Кадрирование фото под определенный размер и оптимизация для сайта (Adobe Photoshop)

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

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

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

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

Обрезка инструментом Crop

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

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

Выбираем инструмент Crop (обрезка).

Как обычно в Photoshop при выборе инструмента вверху появляется панель его настроек.

Именно здесь мы можем установить размеры для обрезки. В нашем случае для фотографий на первой странице сайта используется размер: ширина 610 px и высота 400 px (px - пиксели).

Очень важно! Не перепутайте единицы измерения. Если у вас полноценная русскоязычная версия Photoshop CC и выше, то единицы измерения нужно вписать по-русски. Кроме того, в CC сначала нужно выбрать из раскрывающегося списка параметр
Ш х В х Р — Ширина-Высота-Разрешение, поскольку по умолчанию предлагается ввести параметры в пропорциях.

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

Величина Resolution (разрешение) важна в том случае, если вы ставите линейные размеры в сантиметрах или миллиметрах.
В любом случае, для фотографий, которые вы смотрите с экрана, достаточно поставить 72 пикселя (правда, сейчас уже существуют так называемые ретина-экраны, которые поддерживают гораздо более высокое разрешение, но они не настолько массово распространены, чтобы делать для них фото в несколько раз больше, а потом пока еще не изобретен «ретина» интернет, так что «тяжелые» файлы пользователь может вообще не увидеть,  в этом случае уже будет не важно, хороший у него экран или нет).

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

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

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

Внимание! Если вам не нужно обрезать другие фотографии под аналогичные размеры, лучше после завершения кадрирования в панели настроек нажать кнопку Clear (Очистка). Иначе настройки сохранятся до следующего использования инструмента Crop и потом вы можете запутать сами себя.

Оптимизация фотограии (уменьшаем размер файла)

После обрезки фотографию нужно оптимизировать для показа на Веб-сайте.

В Photoshop в меню File есть команда Save for Web & Devices (сохранить для веба и мобильных устройств). После ее выбора открывается специальное окно.
Из многочисленных настроек разберем только необходимые.

Во-первых, вверху выбираем вторую вкладку Optimized, что означает, что в окне мы будем видеть уже результат оптимизации и таким образом сможем оценить результат.

Во вторых, справа выбираем формат JPEG (как правило, самый оптимальный для фото формат).

В третьих, под выбором формата можно увидеть ползунок Quality (Качество), а рядом с ним список с возможными вариантами качества (высокое, среднее, низкое и т. д.). Для изменения качества можно пользоваться как списком, так и ползунком. Зачем это нужно? Изменяя качество JPEG, можно значительно уменьшить размер файла, при этом визуальное качество изображения может остаться прежним, то есть потерянная информация, возможно, вообще не воспринимается человеческим глазом. Либо качество ухудшится незначительно. Чтобы проконтролировать процесс, нужно при выборе качества следить как за изображением, так и за размером файла в левом нижнем углу. Например, в нашем случае первоначальный размер фото уже с обрезкой был больше 300 Кб, а в результате получился меньше 100 Кб, при этом визуально картинка не пострадала.

 

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

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