При работе с изображениями довольно часто бывает нужно изменить размер изображения, как для печати фотографии, так и для подготовки ее для web-страниц. Давайте рассмотрим способы изменения размеров изображений и обрезки фото, которые доступны в Adobe Photoshop.
И начнем мы с настройки единиц измерения, т.к. это будет важно для получения размеров.
Настройка единиц измерения в Adobe Photoshop
Скорей всего при первом запуске Adobe Photoshop вы увидите, что все значения измеряются в дюймах (in, или inches). Однако для ваших целей удобнее будут сантиметры или пиксели. Один из самых простых способов изменить единицы измерений в Photoshop - это отобразить линейки (Ctrl + R от англ. Rulers - линейки) и кликом по правой кнопке мыши выбрать нужные единицы.
Второй способ - это открыть настройки Photoshop (Меню Edit → Preferences, или Ctrl + K), выбрать пункт Единицы измерения и линейки (Units & Rulers) и установить их в соответствующих местах, как на скриншоте ниже.
Изменение размеров изображения
В меню Image (Изображение) выбираем пункт Image Size (Размер изображения) или нажимаем сочетание клавиш Ctrl + Alt + I.
В открывшемся окне видим поле для ввода ширины (width) и высоты изображения (hight), а также для разрешения (resolution). Для web стандартным разрешением является 72dpi, для печати - 300dpi. Это количество точек на дюйм, которое создает плотность изображения. Для экрана такая плотность должна быть в несколько раз меньше, чем для печати, т.к. и сам экран имеет определенное количество пикселей в матрице. Поэтому, если вы готовите фото для web-сайта, то разрешение должно быть 72dpi, т.к. это ведет к уменьшению веса изображения при сохранении его качества для просмотра на экране. Когда же вы готовите фото для печати, то, напротив, разрешение нужно увеличивать до 300dpi, т.к. иначе печать будет размытой.
Для ширины и высоты слева по умолчанию включен "замок" - иконка, говорящая о том, что при изменении одного параметра второй будет пересчитан автоматически. Как правило, его не отключают, т.к. иначе ваше фото будет непропорционально вытянуто по горизонтали или вертикали в зависимости от того, какой из параметров вы меняете.
Для изображений для web необходимо указывать значения в пикселях (px), для фото, которое вы готовите к печати - в сантиметрах (cm), если иное не указано в требованиях типографии или студии фотографии.
Инструмент обрезки, или кадрирования (Crop Tool)
Инструмент кадрирования вызывается нажатием на клавишу C, которая является начальной в англоязычном названии этого инструмента (Crop Tool). При использовании этого инструмента вы создаете рамку обрезки для фото либо произвольного размера, либо вполне определенного. Именно поэтому название этого инструмента в некоторых версиях Photoshop переводится, как "Рамка".
Для указания размеров обрезки фото необходимо воспользоваться палитрой параметров (options) в верхней части рабочего пространства Adobe Photoshop. В примере выше мы устанавливаем размер обрезаемой области, как 1920x600px и разрешение в 72px/inch.
Для того чтобы подтвердить операцию кадрирования, нужно нажать клавишу Enter или сделать двойной клик внутри кадрируемой области, либо нажать кнопку в виде галочки справа на палитре настроек инструмента обрезки. Если вы хотите отменить операцию кадрирования, нажмите клавишу ESC или перечеркнутый кружок справа вверху. В том случае, если вас не устраивают настройки, сделанные для инструмента кадрирования, и вы хотите их отменить, нажмите стрелку с поворотом влево.
Вы также можете указать в настройках инструмента кадрирования, что нужно оставлять и показывать отсекаемые области, выбрать цвет и непрозрачность области, которая накрывает отсекаемые части фото.
Используем размер текущего изображения
Обычно на сайтах есть ряд изображений, которые имеют одинаковые размеры - слайдеры, фотогалереи, блоки с фото логотипов партнеров компании и т.п. Дизайнеры, как правило, добавляют фото в прямоугольники одного размера, обрезая лишнее масками обрезки. Однако в реальности фотографий может быть больше, чем заготовил дизайнер, т.к. их в процессе разработки сайта может добавлять клиент. Поэтому уже перед верстальщиком или программистом может стоять вопрос, как подогнать размеры всех фотографий под одну величину.
Можно, конечно, использовать такой css-свойство, как overflow: hidden
, но это не всегда лучший выход, т.к. фотографии могут быть достаточно большими по размеру и приводить к долгой загрузке страницы.
В Adobe Photoshop есть настройка Front Image
, которая позволяет "взять" размеры текущего изображения и установить эти значения для ширины, высоты и разрешения инструмента кадрирования. После этого для каждого нового файла с картинкой вам нужно будет только выбрать положение рамки обрезки.
На примере видно, что исходное изображение имеет размер 240x360px (это видно из окна Image → Image Size) . Этот размер мы устанавливаем в качестве настроек инструмента обрезки (Crop Tool), а затем обрезаем по такому размеру еще 2 изображения. Удобно, не так ли?
Изменение "заваленного горизонта"
"Заваленный горизонт" - это вид фото, когда явная или неявная линия горизонта смещена под углом. Как правило, получается при наклоне фотоаппарата. Явная линя горизонта видна на тех фото, на которых есть пустое пространство с видимым горизонтом. Неявная - когда фото снято в лесу, парке или в городе, но при этом элементы пейзажа (ручей, скамейка, крыши домов и т.п.) находятся под углом к другим объектам на фото.
Для выравнивания линии горизонта необходимо использовать кнопку Straighten (Выпрямление). После этого вы проводите вдоль искаженного горизонта линию, и Photoshop переворачивает ваше изображение так, чтобы линия горизонта стала прямой. Остается нажать клавишу Enter для подтверждения обрезки фото.
Инструмент Линейка для выравнивания линии горизонта
В качестве альтернативы Crop Tool для выравнивания линии горизонта вы можете использовать инструмент Линейка (Ruler Tool). Он находится в группе инструментов Пипетка (Eydropper Tool) и может быть вызван клавишей I. Для переключения между инструментами группы можно использовать Alt + клик на инструментах группы, пока не появится нужный, либо сделать правый клик на активном в данный момент инструменте группы и выбрать Линейку.
Этим инструментом также нужно провести линию вдоль вашего заваленного горизонта, а затем нажать на кнопку Выровнять слой (Straighten Layer) в палитре настроек справа вверху. В результате вы получите перевернутое изображение на белом или ином фоне, которое нужно будет обрезать инструментом кадрирования (Crop Tool) или с помощью выделения, описанного чуть ниже.
Изменение размера изображения после выделения
Для указания области обрезки вы можете использовать инструмент прямоугольного выделения (Marquee Tool). По умолчанию вы будете выделять область изображения с произвольными размерами. Однако в настройках инструмента прямоугольного выделения также можно задать фиксированные размеры (Fixed Size), например 200x300px, как в примере, или пропорции выделения, например 1:1 или 3:2. Затем вы переходите в меню Image (Изображение) и выбираете пункт Crop (Кадрировать, или Обрезать).
Когда область выделения уже сформирована, подведите курсор внутрь ее и переместите эту область при необходимости.
Чтобы снять выделение, нажмите сочетание клавиш Ctrl + D. Для отмены любых действий в Adobe Photoshop нажмите Ctrl + Z (в версиях до 2019 года - Ctrl + Alt + Z ).
Изменение размеров холста
В некоторых случаях вам может понадобится рамка вокруг вашего изображения или дополнительное место для размещения дополнительных фото для коллажа внутри открытого в Adobe Photoshop файла. Тут может пригодится возможность работы с холстом - виртуальным фоновым слоем вашего фото. Для вызова окна с настройками перейдите в меню Image - Canvas Size (Изображение - Размер холста) или нажмите сочетание клавиш Ctrl + Alt +C.
Увеличение размера холста
Для добавления размеров холста вам нужно увеличить данные в полях ширины и высоты и выбрать точку, относительно которой будет происходить добавление размеров. По умолчанию - это центр вашей фотографии. Добавление размеров будет происходить одинаково относительно центра.
Если вам необходимо добавить к текущим размерам определенное количество пикселей или сантиметров, поставьте флажок Relative (Относительно) и укажите в полях Width (Ширина) и Height (Высота) только добавочные значения. Они будут добавлены к размерам фото без вашего пересчета этих величин.
Поскольку вы увеличиваете размеры холста, нужно будет указать цвет добавляемого пространства. Вы можете выбрать его из выпадающего списка внизу диалогового окна Canvas Size (Размер холста). Можно позаботиться об этом заранее, выбрав цвет переднего плана (Foreground color) или цвет фона (Background color) и использовав их в настройках, или выбрать нужный цвет с помощью Color Picker.
В примере выше было создано несколько рамок разного цвета вокруг изображения. Однако с помощью изменения размеров холста можно добавить пространство к фото для создания на его основе какого-либо коллажа, например, или отзеркаливания этого изображения.
Уменьшение размера холста
Если в полях для указания ширины и высоты холста поставить отрицательные значения при установленном флажке "Относительно" (Relative) или указать значения меньше, чем текущий размер изображения, то фото будет уменьшено до нужного размера путем обрезки лишних пикселей. Вы при этом получите предупреждение вида "The new canvas size is smaller than current canvas size; some clipping will occure.", т.е. "Новый размер холста меньше, чем текущий; будет произведена обрезка фото", которое сообщает вам о том, что часть фото будет потеряна. При нажатии на кнопку "Proceed" (Продолжить) вы получите изображение указанного вами размера, как если бы воспользовались инструментом кадрирования с нужными величинами. При этом вы также можете указать, с какой стороны будет выполняться такая обрезка.
На примере ниже изображение было уменьшено почти в 2 раза за счет удаления части пикселей сверху и по бокам.
Тримминг (Image → Trim)
Для обрезки какого-либо сплошного фона или прозрачных пикселей на изображении в Adobe Photoshop есть также отличное решение. Откройте картинку и перейдите меню Image (Изображение), чтобы выбрать пункт Trim (Тримминг). В настройках вы сможете выбрать, какой цвет вас интересует - в верхнем левом или правом нижнем углу, либо убрать прозрачные пиксели в PNG или GIF-изображениях. Также в настройках можно указать, какие стороны будут удалены (Trim Away) с изображения: top - верхняя, bottom - нижняя, left - левая, right - правая.
На примере видно, что логотип с белым фоном стал значительно меньше, а с картинки с растением в горшке были удалены прозрачные области.
Изменение размеров изображения с прозрачностью после экспорта
В том случае, когда вы экспортируете из Adobe Photoshop изображение с прозрачными областями, которые больше, чем изобразительная часть этого файла, то Photoshop обрежет лишние пиксели аналогично тому, как это происходит при тримминге.
В примере ниже исходное изображение имеет размер 712x512px, а полученное в результате экспорта в PNG - размер в 508x405px. Это следует учитывать, т.к. в зависимости от того, какя картинка нужна после экспорта, это может быть как плюсом, так и минусом.