Как изменить размер изображения в photoshop cc для web

Данная статья посвящается всем тем, кто только-только взялся за изучение верстки макетов, и тем, кто пока плохо разбирается в Adobe Photoshop. Моя цель рассказать откуда брать данные из PSD-файлов и научить приёмам, которые будут полезны всем верстальщикам.

Простые картинки, которые состоят из геометрических фигур, лучше всего описывать посредством CSS. Такой метод не будет нагружать сайт, а значит скорость загрузки не пострадает.

Если такой возможности нет, нам потребуется вырезать картинки из макета. Но стоит помнить, что некоторые картинки стоит сохранять по одной, а другие — лучше вывести в отдельный спрайт. Например, социальные иконки. Их я советую размещать в одной картинке. Выглядеть это будет примерно так:

Как изменить размер изображения в Photoshop cc для web

Итак, чтобы вырезать картинку из макета, надо, во-первых, найти слой с картинкой.

Как изменить размер изображения в Photoshop cc для web

Во-вторых, в окне «Слои» в нужном слое нажать на правую кнопку мыши и выбрать пункт «Создать дубликат слоя…». В диалоговом окне «Дубликат слоя» выбрать в выпадающем списке пункт «Новый».

Как изменить размер изображения в Photoshop cc для web

Картинку перенесет в пустой документ по длине и ширине схожим с размерами прошлого макета. Искать в ней картинку бывает довольно проблематично, особенно, если она прозрачная. Чтобы этого не делать достаточно зажать Ctrl и кликнуть по иконке нужного слоя с картинкой. Он выделится пунктиром.

Как изменить размер изображения в Photoshop cc для web

Далее в левой панели необходимо выбрать инструмент «Рамка». Весь документ затемнится, кроме нужной картинки.

Как изменить размер изображения в Photoshop cc для web

Жмем Enter. Наша картинка готова.

Как изменить размер изображения в Photoshop cc для web

Сохраняем ее в режиме web. Чтобы так сохранить в Photoshop CC надо нажать на Файл -> Экспортировать -> Сохранить для Web (старая версия). Для более ранних версий Photoshop можно было сохранить еще проще: Файл -> Сохранить для Web

Как правило, картинки сохраняют в JPEG и PNG-24.

Сохранение SVG картинок в Photophop

Чтобы сохранить картинку в формате SVG, достаточно кликнуть правой кнопкой мыши и кликнуть на «Экспортировать как…»

Как изменить размер изображения в Photoshop cc для web

Далее появится диалоговое окно, в котором необходимо установить Формат SVG и нажать на «Экспортировать все». Важно, чтобы картинка в документе была одна.

Как изменить размер изображения в Photoshop cc для web

Информация о font-family, font-size, line-height, color

Чтобы найти данные по этим трем компонентам, достаточно дважды кликнуть на слой с текстом, чтобы он стал активным. Как правило, информацию о font-family и font-size можно найти в верхней панели, а данные о line-height в окне «Символ». Обычно он располагается в правой части, но если его пока там нет, достаточно открыть его через Окно -> Символ.

Как изменить размер изображения в Photoshop cc для web

Информация о margin и padding

Чтобы узнать сколько пикселей необходимо задать для отступа, достаточно включить Инструмент «Прямоугольная область» и потянуть курсор вниз (или влево), чтобы посмотреть расстояние в пикселях.

Как изменить размер изображения в Photoshop cc для web

Этот метод я использую, как правило, чтобы узнать о высоте или ширине определенного элемента. Но для того, чтобы соблюсти pixel-perfect всего макета, обычно я использую расширение для Chrome с одноименным названием PerfectPixel. Чтобы его установить, нажмите здесь.

Информация об opacity

Довольно часто веб-дизайнеры делают элементы прозрачными. В css за это отвечает свойство opacity. К счастью, в Photoshop можно увидеть процент непрозрачности.

Для этого достаточно кликнуть на слой, в котором применяется прозрачность и посмотреть в верхний правый угол окна «Слои». На скриншоте видно, что прямоугольный элемент имеет прозрачность в 90%.

Следовательно, в css следует записать следующее: opacity: 0.9

Горячие клавиши Photoshop для верстака

  • В процессе верстки я применяю «горячие клавиши», которые значительно ускоряют работу в Photoshop. Список актуален для всех версий:
  • Ctrl + «-« — уменьшить масштаб
  • Ctrl + «+» — увеличить масштаб
  • Ctrl + «1» — масштаб 100%
  • Ctrl + J — создать дубликат слоя
  • Ctrl + [ — уменьшить размер кисти
  • Ctrl + ] — увеличить размер кисти
  • Ctrl + Alt + Z — шаг назад (отмена действия)
  • Ctrl + Shift + Z — шаг вперед (вернуть назад отменённое действие)
  • Ctrl + Alt + I — диалоговое окно «Размер изображения»

P.S. Скриншоты, приводимые в статье сделаны в программе Photoshop CC.

Тема оказалась довольно объемной и уместить все в рамках одной статьи — сложно. Но я для вас подготовила видеоролик, в котором я все подробно объясняю:

Источник: https://tpverstak.ru/photoshop-dlya-verstaka/

Как уменьшить вырезанный объект в Фотошопе сохранив его качество

Привет всем читателям моего блога! С вами Андрей Зенков. Давайте поговорим о том, как уменьшить вырезанный объект в Фотошопе CS5 или CS6. Описанные в этой статье способы можно использовать всегда: если вы создаёте дизайн для собственного сайта, редактируете семейное фото, создаёте макет визитки и т.д.

А перед началом хотел бы напоминать о статье «Как быстро и самостоятельно русифицировать Photoshop». Это поможет, если вы изучаете только азы графического редактора, так как в большинстве уроков начального уровня в программе используется русский интерфейс.

Как изменить размер изображения в Photoshop cc для web

Находим и открываем нужное изображение

В первую очередь, необходимо найти и открыть в Photoshop картинку. Для поиска фотографий, векторов или иллюстраций воспользуйтесь бесплатным фотобанком — pixabay.com. В этом сервисе хранится более 950 тысяч картинок. Для тренировки советую взять простое изображение, откуда будет несложно вырезать нужный предмет.

Я взял простенькую иллюстрацию с шариками:

Как изменить размер изображения в Photoshop cc для web

Чтобы начать работать, необходимо открыть её в Фотошопе. Здесь всё просто. Я уже не раз описывал, как это делать, но давайте повторим. В верхнем меню нажмите на кнопку «Файл» и выберите вкладку «Открыть…». Далее найдите картинку на своём компьютере. Как только это сделано, можно приступать к самому интересному.

Читайте также:  Создание gif-анимации из видео: программа qgifer

Вырезаем нужный объект

Для начала мы отделим некоторую область от основного изображения. Для этого воспользуемся инструментом «Рамка». Он активируется при нажатии кнопки «C» на клавиатуре. Так же его легко найти в боковой навигации Adobe Photoshop CC:

Вообще, чем отличается этот инструмент от стандартного выделения? Размер выбранного участка можно редактировать до внесения изменений. «Прямоугольная область» такой возможностью не обладает. Если вы сделали что-то не так, придётся выделять предмет снова и снова, пока не будет достигнут требуемый результат.

Что ж, давайте приступим к делу. Активируйте «Рамку» и обведите, например, красный шарик. Делается это привычно: в любой точке нажимаете левую кнопку мыши и, не отпуская её, тянете по диагонали. У вас должно получиться следующее:

Как изменить размер изображения в Photoshop cc для web

Теперь, чтобы выделенный объект перенести на отдельный слой, достаточно просто нажать на клавишу «Enter». Результат должен быть таким:

Как изменить размер изображения в Photoshop cc для web

Если вы хотите вырезать шарик без заднего фона, ознакомьтесь с материалом «Как быстро вырезать в Photoshop изображение любой сложности». В нём описан принцип действия инструмента «Быстрое выделение».

Как видите, ничего сложного в этом нет. На осуществление всех действий уходит не больше 2-3 минут. Что можно делать дальше? Сохранив его качество, можно, используя один из инструментов группы «Лассо», вырезать шарик.

Это сделать гораздо проще, чем при работе с большой исходной картинкой. Ещё можно изменить размер, если вырезанный предмет получился слишком большим и его габариты не подходят для ваших целей.

На этот случай имеется два простых способа.

Редактируем получившийся фрагмент

Перед описанием первого способа я бы хотел напомнить, что подобную тему рассматривал ранее в статье «Как быстро уменьшить объект в Photoshop — профессионально и без потери качества». Приятное дополнение — описание данного процесса в онлайн-версиях графического редактора.

Изменить параметры можно перед переносом шарика на основную картинку. Чтобы изменить размер, проследуйте по следующему пути:

Как изменить размер изображения в Photoshop cc для web

Откроется следующее окно:

Как изменить размер изображения в Photoshop cc для web

Здесь нас интересует блок «Размерность» и конфигурации ширины и высоты. Рекомендую пользоваться пиксельной величиной. В этих полях задайте нужные вам значения. Если хотите изменить пропорции, то уберите галочку с этого пункта:

Как изменить размер изображения в Photoshop cc для web

После завершения редактирования, можете переносить полученный фрагмент на другую иллюстрацию или использовать в других целях. Теперь давайте поговорим о втором методе.

  Адаптивный web-дизайн для начинающих

Изменяем габариты после переноса на другую картинку

Здесь вообще всё предельно просто. Для изменения размеров вставленного объекта нажмите сочетание клавиш CTRL + T или проследуйте по следующему пути:

Как изменить размер изображения в Photoshop cc для web

После активации «масштабирования» выделяются границы предмета и на каждой стороне появляются небольшие квадратики. Наведите на один из них курсор, зажмите левую кнопку мыши и тяните внутрь области, если хотите уменьшить фрагмент. Для сохранения пропорций при редактировании зажмите «Shift». Чтобы сохранить изменения, нажмите клавишу «Enter».

Если хотите увеличить размеры объекта, то вам будет интересна статья «Как растянуть изображение в Photoshop — без потери качества и пропорционально». В ней я даю практические советы и объясняю, как делать не стоит.

Этими простыми способами ежедневно пользуются дизайнеры, работающие с Фотошоп. Так же хочу отметить, что они работают как в CS5, так и в CS6. Закрепите пройденный материал просмотром небольшого видео:

Ещё больше полезных уроков по Фотошоп вы можете найти в курсе Зинаиды Лукьяновой — «Photoshop. Уроки повышения мастерства». Он состоит из ста материалов, после ознакомления с которыми ваши навыки заметно улучшатся. Стоимость — 1 490 рублей.

Как изменить размер изображения в Photoshop cc для web

И в качестве дополнения перед завершением рекомендую ознакомиться с материалом «Как быстро уменьшить размер изображения в Photoshop и сохранить качество». Здесь я раскрыл важный секрет, о котором вы ещё точно не знаете, поэтому обязательно прочтите.

Сегодня вы проделали хорошую работу и познакомились с полезным инструментом — «Рамка». Кроме этого, теперь сможете легко и быстро менять размер вырезанного фрагмента. Если вы хотите не пропускать следующие уроки, то обязательно подпишитесь на блог Start Luck прямо сейчас! А моё сегодняшнее время подошло к концу.

С Вами был Андрей Зенков, увидимся в следующей статье.

Источник: https://start-luck.ru/photoshop/kak-umenshit-vyrezannyj-obekt.html

Интерполяция (Resample Image) в Фотошопе

Как изменить размер изображения в Photoshop cc для web

Для увеличения или уменьшения размера изображения Фотошоп использует метод Интерполяции. Так, например, при увеличении изображения, Фотошоп создает дополнительные пиксели на основе значений соседних. Грубо говоря, если один пиксель черный, а другой белый, то Фотошоп вычислит среднее значение и создаст новый пиксель серого цвета. Некоторые виды интерполяции быстрые и некачественные, другие более сложные, но с помощью них достигаются хорошие результаты.

Как изменить размер изображения в Photoshop cc для web

  • Если вы перейдете в окно Image – Image Size (Изображение – Размер изображения / Сочетание клавиш «Alt+Ctrl+I») и кликните по стрелочке около параметра Resample Image (Интерполяция / Ресамплинг), то в выплывающем окне появится несколько значений.
  • Этот способ редко используется для работы с фото, так как результат оставляет желать лучшего.
  • Здесь пиксели грубо копируются, переходы цветов получаются неровные.
  • Результат от применения этого способа будет лучше.
Читайте также:  Отслеживание и запись каждого вашего действия в photoshop

Здесь значение новых пикселей вычисляется путем нахождения средней величины, а не просто копируется. Качество получается среднее.

Этот способ интерполяции работает с большим количеством смежных пикселей, производит серьезные вычисления значений этих элементов и создает новые пиксели, которые должны быть на этом месте. При небольших увеличениях фото этот способ вполне подойдет.

Версии Photoshop CS и выше предлагают два новых алгоритма интерполяции: «Bicubic Smoother» (Бикубическая глаже) и «Bicubic Sharper» (Бикубическая четче). Они видоизменяют вычисления стандартного «Бикубического» способа в зависимости от эффекта, который вы хотите получить.

  1. Прекрасно сделает свою работу, если вы хотите увеличить фото.
  2. Подойдет в том случае, если вы уменьшаете фото.
  3. Пример использования «Bicubic Sharper» (Бикубическая четче).
  4. Есть фото, размеры 448 х 336 px разрешение 96 dpi.

Как изменить размер изображения в Photoshop cc для web

Нам нужно его увеличить.

Переходим в меню Image – Image Size (Изображение – Размер изображения / Сочетание клавиш Alt+Ctrl+I).

Выбираем «Bicubic Sharper» (Бикубическая четче), измерение документа – проценты.

Как изменить размер изображения в Photoshop cc для web

  • Размеры документа сразу установятся на значения 100%.
  • Будем постепенно увеличивать изображение.
  • Измените значение 100% на 110%.
  • Когда вы измените ширину, высота автоматически подгонится сама.

Как изменить размер изображения в Photoshop cc для web

Нажмите ОК. Посмотрите на изображение.

Теперь его размеры уже 493 х 370 px.

Повторяя данные действия можно добиться хороших результатов.

Как изменить размер изображения в Photoshop cc для web Как изменить размер изображения в Photoshop cc для web

Конечно, идеальной четкости нам добиться будет достаточно сложно, так как фото было маленькое и низкого разрешения.

Но посмотрите, какие изменения произошли в пикселях.

Как изменить размер изображения в Photoshop cc для web

Насколько большими мы можем делать фотографии благодаря методу интерполяции?

Все зависит от качества фотографии, как оно было сделано и для каких целей вы его увеличиваете. Лучший ответ: возьмите и проверьте сами.

  1. Зинаида Лукьянова;
  2. Источник;
  3. ⇐ • Фокусировка изображения (предыдущая страница учебника)
  4. • Выравнивание объектов в заданных границах при работе с Фотошопом (следующая страница учебника)

Источник: https://photoshoplessons.ru/book/resample

Как изменить размер фото в Photoshop

Картинки и фотографии — это одни из самых популярных способов передачи информации. Мы регулярно выкладываем свои фото в социальные сети, картинками наполняются сайты и новостные ленты. Специальные изображения используются веб-дизайнерами для создания максимально красивых и привлекательных сайтов.

Во всех случаях используются изображения разных форматов и размеров. К счастью, можно изменить размер любой фотографии. Программный продукт Adobe Photoshop предоставляет пользователю практические безграничные возможности для работы с картинками. В этой статье разберёмся, как уменьшить или увеличить изображение в Фотошопе.

Давайте же начнём. Поехали!

Как изменить размер изображения в Photoshop cc для web

Статья о задании ширины и высоты фото

В Фотошопе реализован специальный метод, который позволяет сохранить резкость и детализацию фото при его увеличении. Этот метод имеется в версиях не старше, чем Photoshop CC.

Для увеличения или уменьшения картинки запустите программу и перейдите в меню «Изображение». В выплывающем списке выберите пункт «Размер изображения». В открывшемся окне и будут производиться все необходимые настройки. Попасть в него можно, воспользовавшись комбинацией клавиш Alt+Ctrl+I.

В окне «Размер изображения» обратите внимание на два пункта: «Ширина» и «Высота». Вы можете изменять их значения, чтобы добиться необходимых параметров.

Если вы хотите, чтобы фотография уменьшалась или увеличивалась пропорционально, щёлкните по специальной иконке в виде звеньев слева.

Если они сцеплены, то при изменении значения высоты, ширина также будет изменяться пропорционально. Если звенья расцеплены, то каждый параметр изменяется отдельно.

Как изменить размер изображения в Photoshop cc для web

В большинстве случаев взаимосвязь включена

Справа можно выбрать единицы измерения. По умолчанию там установлено «Пиксель», так как именно эта единица измерения обычно считается наиболее удобной. Ниже вы можете установить разрешение, которое измеряется в пикселях на дюйм.

Как изменить размер изображения в Photoshop cc для web

Для разных ситуаций свой вариант. Не забываем о ресамплинге

Если в процессе редактирования фотографии вы хотите обеспечить пропорциональную корректировку всех пикселей, обязательно выберите пункт «Ресамплинг». В случае необходимости выберите метод интерполяции в меню «Ресамплинг». Чтобы выбрать параметры ресамплинга, кликните по небольшому треугольнику, после этого развернётся список, в котором можно выбрать один из нескольких режимов:

  • Автоматически (Photoshop самостоятельно подберёт наиболее подходящий метод);
  • Сохранить детали (выбрав этот метод, становится доступной возможность уменьшения шума);
  • Бикубическая с увеличением (использует интерполяцию для получения более гладкой картинки);
  • Бикубическая с уменьшением (уменьшает изображения, повышая при этом резкость);
  • Более плавные градиенты (анализирует цветы соседних пикселей, позволяет добиться плавных цветовых переходов);
  • По соседним пикселям (такой метод применяется для сохранения чётких краёв);
  • Билинейная (этот способ основан на добавлении новых пикселей к уже имеющимся, рассчитывая средний цвет).

Как изменить размер изображения в Photoshop cc для web

Программ предлагает несколько вариантов

Если сохранение общего числа пикселей вас не волнует, то можно обойтись без этого режима.

Кроме этого, можно выбрать нужный параметр в разделе «Подогнать под». По умолчанию установлено «Исходный размер». Изменять этот пункт необязательно.

Задав все необходимые настройки, щёлкните кнопку «ОК», чтобы изменения вступили в силу. После этого остаётся только сохранить картинку и наслаждаться полученным результатом.

Читайте также:  Как выбрать зеркальную фотокамеру?

Теперь вы знаете, как легко и быстро увеличить или уменьшить картинку в Фотошопе. Пишите в х, была ли эта статья полезна для вас, и задавайте интересующие вопросы по рассмотренной теме.

Источник: https://nastroyvse.ru/programs/review/izmenyaem-razmery-foto-v-photoshope.html

Изменение размеров изображений в Photoshop

Команда Размер изображения в Photoshop CC содержит метод сохранения детализации и обеспечивает повышенную резкость при увеличении изображений.

Как изменить размер изображения в Photoshop cc для web

Исходное изображение без рамки (слева); четкое изображение с измененным размером (справа)

Кроме того, диалоговое окно Размер изображения в Photoshop CC обновлено для удобства использования.

  • В окне доступен предварительный просмотр изображения на основе параметров изменения размера.
  • При изменении размеров диалогового окна изменяется размер окна просмотра.
  • Параметр Масштабировать стили включается и выключается в меню со значком шестерни, расположенном в правом верхнем углу диалогового окна.
  • Во всплывающем меню Размеры выберите другие единицы измерения для отображения размеров итогового выводимого изображения.
  • Щелкните значок связи для включения или выключения параметра сохранения пропорций.

Как изменить размер изображения в Photoshop cc для web

Изменение размера изображения

  1. Выберите команду Изображение > Размер изображения.

  2. Выполните любое из следующих действий для изменения режима просмотра изображения.

    • Чтобы изменить размер окна просмотра, перетащите угол диалогового окна Размер изображения и измените его размер.
    • Чтобы просмотреть другую область изображения, перетащите указатель в области предварительного просмотра.
    • Чтобы изменить масштаб просмотра, удерживая нажатой клавишу Ctrl (Windows) или Command (Mac OS), щелкните мышью в изображении предварительного просмотра для увеличения масштаба. Удерживая нажатой клавишу Alt (Windows) или Option (Mac OS), щелкните мышью для уменьшения масштаба. После нажатия кнопки мыши процент увеличения в течение короткого периода отображается в нижней части изображения предварительного просмотра.
  3. Чтобы изменить единицы измерения размера в пикселах, щелкните треугольник рядом с пунктом Размеры и выберите в меню требуемый параметр.

  4. Чтобы сохранить исходные пропорции ширины и высоты, убедитесь, что параметр Сохранить пропорции включен. Если требуется масштабировать ширину и высоту независимо друг от друга, нажмите на значок Сохранить пропорции для удаления связи между ними.

    Примечание.

    Можно изменить единицы измерения ширины и высоты, выбрав требуемый вариант в меню справа от текстовых полей Ширина и Высота.

  5. Выполните одно из следующих действий.

    • Чтобы изменить размер или разрешение изображения и обеспечить пропорциональную корректировку общего количества пикселов, убедитесь, что выбран пункт Ресамплинг, и при необходимости выберите метод интерполяции в меню Ресамплинг.
    • Чтобы изменить размер изображения или разрешение без изменения общего количества пикселов изображения, не выбирайте пункт Ресамплинг.
  6. (Необязательно) В меню Подогнать под:

    • Выберите набор параметров для изменения размера изображения. 
    • Выберите Автоматическое разрешение, чтобы изменить размер изображения для определенного выходного варианта печати. В диалоговом окне Автоматическое разрешение укажите значение для параметра Экран и выберите Качество. Можно изменить единицу измерения, выбрав требуемый вариант в меню справа от текстового поля Экран.
  7. Введите значения Ширина и Высота. Чтобы указать значения в другой единице измерения, выберите требуемый параметр в меню рядом с текстовыми полями Ширина и Высота.

    Новый размер файла изображения появляется в верхней части диалогового окна Размер изображения (старый размер указывается в скобках).

  8. Чтобы изменить Разрешение, введите новое значение. (Необязательно) Можно также выбрать другую единицу измерения.

  9. Если изображение содержит слои с примененными к нему стилями, выберите пункт Масштабировать стили с помощью значка шестерни для масштабирования воздействия стилей на изображение с измененными размерами. Эта функция доступна только в том случае, если выбран параметр Сохранить пропорции.

  10. По окончании изменения настроек нажмите кнопку «ОК».

Чтобы восстановить исходные значения, отображаемые в диалоговом окне Размер изображения, выберите Исходный размер в меню Подогнать под или, удерживая нажатой клавишу Alt (Windows) или Option (Mac OS), щелкните Восстановить.

Приложение Photoshop выбирает метод ресамплинга на основе типа документа и увеличения либо уменьшения его масштаба.

Сохранить детали (с увеличением)

Если выбран этот метод, становится доступным ползунок Снижение шума для сглаживания шума при масштабировании изображения.

Бикубическая (с увеличением)

Хороший метод для увеличения изображений на основе бикубической интерполяции, разработанный специально для получения более гладких результатов.

Бикубическая (с уменьшением)

Хороший метод для уменьшения размера изображения на основе бикубической интерполяции с повышенной резкостью. Этот метод позволяет сохранить детали изображения, подвергнутого ресамплингу. Если интерполяция «Бикубическая, четче» делает слишком резкими некоторые области изображения, попробуйте воспользоваться бикубической интерполяцией.

Бикубическая (более плавные градиенты)

Более медленный, но и более точный метод, основанный на анализе значений цвета окружающих пикселов. За счет использования более сложных вычислений бикубическая интерполяция дает более плавные цветовые переходы, чем интерполяция по соседним пикселам или билинейная интерполяция.

По соседним пикселам (четкие края)

Быстрый, но менее точный метод, который повторяет пикселы изображения. Этот метод сохраняет четкие края и позволяет создать файл уменьшенного размера в иллюстрациях, содержащих несглаженные края. Однако этот метод может создать зубчатые края, которые станут заметными при искажении или масштабировании изображения или проведении множества операций с выделением.

Этот метод добавляет новые пикселы, рассчитывая среднее значение цвета окружающих пикселов. Он дает результат среднего качества.

Источник: https://photoshop.demiart.ru/book-CC/resizing-image.html

Ссылка на основную публикацию