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

Ранее мы рассмотрели работу с новым диалоговым окном "Размер изображения" (Image Size) в Photoshop CC (Creative Cloud), где мы узнали о новых функциях и улучшениях этого диалогового окна .

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

В этом, третьем, уроке мы рассмотрим самую распространённую на данный момент опцию Photoshop - как изменить размер изображения таким образом, чтобы оно подходило для отправки по электронной почте или загрузки на web-сайт.

Чтобы получить максимальную отдачу от этого урока, я рекомендую прочитать два предыдущих урока из этой серии (ссылки выше), а также статью "Разрешение и размер изображения в Photoshop".

Как и в прошлом уроке, я буду работать с этой фотографией:

9

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

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

Давайте приступим.

Итак, открываем изображение в Photoshop, и, прежде всего, неплохо было бы создать дубликат документа, чтобы, в случае чего, у нас всегда был под рукой нетронутый оригинал. Для этого идём по вкладке главного меню Изображение --> Создать дубликат (Image --> Duplicate), после чего мы получаем копию документа, с ней и будем работать.

Теперь открываем диалоговое окно "Размер изображения" (Image Size) через вкладку "Изображение" (Image), либо нажатием клавиш Ctrl+Alt+I.

О работе в новом диалоговом окне размера изображения Photoshop CC, его новом интерфейсе и опциях подробно рассказывается здесь.

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

Это также означает, что мы должны изменить количество пикселей в изображении, процесс, известный как передискретизация или ресамплинг (Resampling).

Начальная информация о файле

В верхней части диалогового окна "Размер изображения", справа от окна предварительного просмотра, находится начальный размер файла в мегабайтах (М) и пикселях (пикс. или PX в англ.)

Здесь мы видим, что моя фотография в настоящий момент занимает 5,88 мегабайт в памяти моего компьютера и имеет размер в пикселях 1282 на 1603:

изменить размер изображения в Photoshop CC

Опция ресамплинга

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

Мы будем снижать количество пикселей в изображении для уменьшения линейного размера файла (с меньшее количеством пикселей будет означать также и меньший размер файла в мегабайтах). Как я уже говорил, изменения количества пикселей называется ресамплингом изображения, поэтому первое, что нам нужно сделать, это убедиться, что опция "Ресамблинг ( Resample) включена (флажок в чекбоксе проставлен). Она должна быть включена по умолчанию, но если это не так, то кликните по чекбоксу, чтобы флажок появился:

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

Выбор метода ресамплинга

Справа от опции "Ресамплинг" находится выпадающее меню выбора метода ресамплинга (или, на техническом языке известный как "метод интерполяции"), этот метод указывает Photoshop, как анализировать и перерисовать пиксели:

14

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

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

Для понижения разрешения изображения, что мы, скорее всего, будем делать при подготовки изображения для отправки по электронной почте или публикации на веб-сайте, оптимальным способом является "Бикубический с уменьшением" (Bicubic Sharper reduction). Вы можете выбрать его сами, если вы хотите, но если вы просто оставите значение "Автоматически", Photoshop автоматически выберет "Бикубический с уменьшением", когда он обнаружит, что Вы понижаете разрешение изображения, так что на самом деле нет необходимости его менять:

10

Выбор единиц измерения документа

Далее, поскольку мы имеем дело с пикселями изображения, нужно проставить эти единицы и в диалоговом окне, если они не были установлены ранее:

15

Сохранение пропорций сторон изображения

Чтобы уменьшить количество пикселей в изображении, все, что нужно сделать, это ввести новые значения пикселей в поля "Ширина" (Width) и "Высота" (Height). Но прежде чем это сделать, если посмотрите слева от полей ввода "Ширины" и "Высоты", увидите расположенный там значок связки. Это константа соотношения сторон документа, и при его выборе (он выбран по умолчанию), ширина и высота изображения связаны друг с другом, а это означает, что если мы вводим новое значение ширины, Photoshop автоматически изменит значение высоты на соответствующее, и наоборот, чтобы сохранить пропорции исходного изображения. Если вы нажмете на этот значок, чтобы снять данную опцию, вы сможете ввести новые значения ширины и высоты независимо друг от друга, но при этом появляется опасность исказить форму и внешний вид изображения. В большинстве случаев, эта опция должна быть активной:

16

Вводим собственные значения ширины и высоты

Единственное, что осталось сделать, это установить новые размеры в пикселях.

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

Хотя некоторые фотосайты, типа Flickr, позволяют отображать изображения больше, чем 1920 x 1080, так что ширина и высота зависит от того, куда Вы отправляете фото.

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

Предположим, что мне надо задать ширину изображения в 700 пикс., для этого мне надо просто ввести это значение в поле "Ширина", и Photoshop автоматически подбирает новое значение высоты для поддержания исходных пропорций фотографии. В моём случае, он задал 875 пикселей:

17

Если теперь посмотреть на размер изображения в мегабайтах и пикселях в верхней части окна, можно убедится, что размер в пикселях уменьшился с оригинальных 1282 на 1603 до 700 на 850 пикселей, а размер в мегабайтах сократился с 5,88 до 1,75. Важно отметить, что тот что 1,75 мегабайта - это место, занимаемое несжатым файлом в Photoshop на компьютере, и когда позже Вы будете сохранять уменьшенное изображение как JPEG или PNG, размер файла будет ещё значительно уменьшен:

18

То же произойдёт, если Вы введёте значение не ширины, а высоты, Photoshop так же уменьшит ширину изображение и вес файла.

Значения разрешения

Если Вы посмотрите на строку с "Разрешением" картинки, то заметите, что независимо от новых значений ширины и высоты разрешение осталось прежним, у меня это 72 пикс./дюйм:

19

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

Теперь осталось только сохранить картинку в виде популярных форматов PNG или JPG, но эта уже тема другой статьи.

Теги:

Помощь сайту

Понравился сайт? Уроки оказались полезными? Вы можете поддержать проект, просто если скачаете и установите приложение "Фонарик" для Андроид. Приложение написал автор сайта и рассчитывает в дальнейшем публиковать свои приложения. Фонарик управляет светодиодом вспышки фотокамеры телефона, а также включает подсветку экраном на полной яркости.

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

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

Установить с Google Play.

Заранее благодарен, Дмитрий.

QR-код для установки:

Если Вам понравился материал, скажите свое "спасибо", поделитесь ссылками с друзьями в социальных сетях! Спасибо!

Похожие материалы:

3d
Эта статья - вторая часть материала о создании 3D-модели винной бутылки. Для лучшего понимания материала рекомендую скачать готовый PSD-файл по...
В версии программы Photoshop CS6 инструменты 3D-моделирования подверглись значительному улучшению и модернизации. В этом материале мы рассмотрим...
В Adobe Photoshop CC появилась замечательная опция, значительно облегчающая жизнь и ускоряющая работу веб-дизайнерам - это автоматическое сохранение...
размытие поля CS6
В этом материале мы рассмотрим фильтр "Размытие поля" (Field Blur), первый в списке из трех новых фильтров размытия в Photoshop CS6. Этот фильтр...