Как подготовить изображение для сайта?

Как подготовить изображение для сайта

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

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

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

Какие есть требования к загружаемым фотографиям?

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

Лучшим разрешением изображения в пикселях является 900 px по наибольшей стороне. Такой размер фотографии можно посмотреть целиком на большинстве мониторов. При этом объем файла может составлять около 250-400 килобайт.

Как уменьшить размер фотографии?

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

Во-первых, если вы будете загружать фотографии больших размеров, то это будет большая нагрузка на хостинг, на котором будут располагаться ваши фотографии, а во-вторых, большие фотографии нельзя будет посмотреть на медленных Интернет-соединениях.

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

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

Как это сделать?

После того как вы обработали фотографию, сводите все слои. Для изменения размера заходим в меню File (Файл) и выбираем Automate (Автоматизация) -> Fit Image (Изменить размерность).

1

В появившемся окне вводим значения, которые будут отвечать за размер фотографии по наибольшей стороне. Как было сказано ранее, рекомендуемым размером является 900 px. При этом нужно отметить чекбокс Don’t Enlage (Не увеличивать).

Таким образом, размер фотографии уменьшится до 900 px по большей стороне независимо от положения (неважно будет ли кадр вертикальным или горизонтальным).

2

Теперь нажимаем сочетание клавиш <Ctrl + Alt + 0>, чтобы рассмотреть изображение в 100%-м масштабе.

3

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

Как повысить резкость изображения?

Для того чтобы повысить резкость уменьшенного изображения можно использовать следующий способ. Делаем копию основного слоя, затем используем на ней фильтр Smart Sharpen (Умная резкость) со следующими настройками:

4

После применения настроек изображение получилось с повышенной резкостью, но выглядит оно не совсем хорошо. Если вы обратите внимание, то после применения фильтра Smart Sharpen (Умная резкость) на изображении появились светлые ореолы.

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

5

6

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

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

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

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

7

Теперь создадим маску слоев. Для этого самый контрастный канал загрузим как выделение. В моем примере это синий канал. Переходим в палитру каналов и, зажав клавишу <Ctrl>, кликаем по миниатюре канала.

 

9

После того как выделили, переходим во вкладку Layers (Слои) и нажимаем на значок маски.

10

К «Layer 1» добавится маска с синим каналом.

11

 

Далее создадим маску краев. Для этого сделаем сначала маску видимой для просмотра, чтобы было видно наши действия на маске. Зажимаем клавишу <Alt> и кликаем по маске.

12

Теперь зайдем во вкладку Filter (Фильтр), выберем Stylize (Стилизация) и Find Edges (Выделение краев).

13

14

Далее нужно инвертировать маску слоя: нажимаем сочетание клавиш <Ctrl + I>, тогда выделение краев станет белым.

15

Теперь необходимо размыть маску слоя, чтобы сделать переходы более плавными. Для этого применим фильтр Gaussian Blur (Размытие по Гауссу) к маске слоя.

16

Для своего случая я решил использовать радиус размытия в 4 пикселя.

17

У нас получилась размытая маска краев с плавными переходами от краев к равномерным областям изображения.

18

Теперь переключим режим просмотра обычного изображения и увидим вот такую картинку.

19

Также можно отрегулировать прозрачность слоя по своему усмотрению.

Как сохранить изображение?

Конечным этапом при подготовке изображения к загрузке на сайт является его сохранение. Для этого заходим во вкладку File (Файл) и выбираем Save for Web (Сохранить для Web).

20

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

21

Далее выбираем формат JPEG, Maximum (наилучшее), Quality (Качество) – 100, нажимаем кнопку Save (Сохранить) и сохраняем файл.

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

Также на эту тему Вы можете почитать:

You can leave a response, or trackback from your own site.

Оставить комментарий