Случалось ли вам, распечатав картинку из интернета, испытывать разочарование? Изображения на экране компьютера выглядели прекрасно, однако печатались либо размером с почтовую марку, либо большими и размытыми. Виновником здесь является разрешение картинки.
Справедливости ради нужно сказать: разрешение придумано не для того, чтобы портить нам жизнь. Истинной причиной плохого качества печати являются очень маленькие пиксельные размеры большинства картинок в интернете: как правило, 640x480 пикселей и даже меньше, благодаря чему они быстро и качественно отображаются на экране компьютера и загружаются на веб-сайтах.
Что же мы можем предпринять, чтобы при печати картинки из интернета выглядели так же хорошо, как фотографии с цифровой камеры, и были бы приличного размера? Ответ прост: абсолютно ничего. Большинству картинок не хватает пикселей для высококачественной печати. Давайте попробуем разобраться, почему.
Прежде всего, забудем о скачивании картинок из интернета: делая это, мы нарушаем авторские права.
Посмотрим на разрешение изображений в целом.
Разрешение - величина, определяющая количество точек (пикселей), умещающихся в каждом дюйме бумаги при печати. Очевидно, что, поскольку каждое изображение имеет фиксированное количество пикселей, то чем больше их вы попытаетесь уместить в одном дюйме бумаги, тем меньше размер картинки на выходе; чем меньше пикселей в одном дюйме, тем больше по размеру изображение будет напечатано.
Понятие Разрешение полностью относится к печати, но не имеет ничего общего с отображением картинки на экране монитора; именно поэтому на экране все всегда выглядит больше и качественнее.
Для примера рассмотрим вот эту фотографию:
Я не могу сдержать улыбку каждый раз, как смотрю на нее. Я сфотографировал эту лошадку, проезжая однажды по сельской местности. Как правило, она всегда стоит горделиво, властно, ее вид полон достоинства и изящества. Но в тот день я застал ее в совершенно нелепой позе: она как-то странно наклонилась, в гриве запуталась соломинка и, кажется, лошадка что-то пережевывает. Или, может быть, она старательно пытается мне улыбнуться? В любом случае, мы возьмем ее фотографию в качестве образца.
Сперва нужно проверить размер фотографии в Фотошопе через меню Изображение > Размер изображения (Image > Image Size) (Ctlr + Alt + I). В открывшемся диалоговом окне отображается полная информация о размере:
Диалоговое окно Размер изображения (Image Size) разделено на две части: верхняя называется Размерность (Pixel Dimensions), нижняя – Размер печатного оттиска (Document Size). Размерность показывает ширину и длину в пикселях, а Размер печатного оттиска – реальные размеры картинки при печати на бумаге.
В подразделе Размерность (Pixel Dimensions) указано: ширина нашей фотографии – 1200 пикселей, высота – 800. Звучит, будто это очень много (перемножив значения ширины и высоты, получим целых 960,000 пикселей в картинке!) Да, это действительно много для экрана монитора. Фотография такого размера может и не уместиться на экране! Но, к сожалению, это не значит, что качество печати будет высоким. Обратите внимание на подраздел Размер печатного оттиска:
Здесь мы найдем информацию о текущем разрешении и размер изображения на бумаге. Разрешение фотографии, которую мы сейчас рассматриваем, - 72 пикселя. Это означает, что из 1200 пикселей, составляющих ширину изображения, на каждом дюйме бумаги будут напечатаны 72; из 800 пикселей, составляющих высоту, на каждом дюйме напечатаются также 72.
Значение в поле Разрешение (Resolution) одинаково относится к ширине и к высоте, но не к общему количеству точек. Другими словами, для каждого квадратного дюйма бумаги 72 пикселя от нашего изображения будут напечатаны слева направо, и 72 пикселя сверху вниз. Общее количество пикселей на каждом квадратном дюйме бумаги составит 5184 (72x72).
Произведем небольшой математический расчет, чтобы убедиться, что ширина и высота изображения корректно отображаются в поле Размер печатного оттиска (Document Size). Нам известна ширина изображения - 1200 пикселей, и высота – 800 пикселей. Разрешение на данный момент составляет 72 пикселя на дюйм; чтобы выяснить размеры на бумаге, нужно разделить количество пикселей, составляющих ширину, на 72; аналогично вычисляется высота.
Ширина (1200 пикселей), разделенная на 72 пикселя на дюйм - 16.667 дюйма
Высота (800 пикселей), разделенная на 72 пикселя на дюйм - 11.111 дюйма
Итак, размер изображения на бумаге составит 16.667x11.111 дюймов.
Обратимся к подразделу Размер печатного оттиска (Document Size) снова:
Размеры указаны именно такие! Какой большой получится фотография, не так ли?
К сожалению, не все так просто. Такого разрешения недостаточно, чтобы отобразить при печати необходимую резкость и хорошее качество. Взгляните на изображение, приведенное ниже: так выглядела бы фотография, будучи напечатанной с разрешением 72 пикселя на дюйм.
Попытайтесь представить себе качество при размерах 11 х 16 дюймов.
Сейчас точки расположены слишком далеко друг от друга, поэтому нет ни резкости, ни детальности. Качество глухое, слишком мягкое и, следовательно, непривлекательное. На экране все выглядит не так: мониторы относятся к устройствам низкого разрешения. На них прекрасно смотрится даже фотография относительно небольших размеров, например, 640x480 пикселей. Однако принтеры – устройства высокого разрешения, и для качественной печати понадобилось бы значение намного больше 72 пикселей на дюйм.
Насколько высоким должно быть разрешение, чтобы получить качественную профессиональную печать? Общепринятое значение составляет 300 пикселей на дюйм; при печати пиксели располагаются друг к другу очень близко, за счет чего изображение выглядит четким. Можно даже использовать разрешение 240 пикселей на дюйм – и этого будет достаточно.
Изменим разрешение у нашей фотографии: в поле Разрешение (Resolution) установим 300. Обратите внимание, что в подразделе Размерность (Pixel Dimensions) сохранились значения 1200 и 800.
Увеличение разрешения с 72 до 300 пикселей означает, что из 1200 пикселей ширины в каждом дюйме бумаги будут напечатаны 300 пикселей, из 800 пикселей высоты – столько же. При таком сжатии фотография на бумаге получится меньшего размера. Поэтому в подразделе Размер печатного оттиска (Document Size) размер фотографии теперь составляет 4 дюйма в ширину и 2.667 дюймов в высоту.
Снова прибегнем к математическим вычислениям:
Ширина (1200 пикселей), разделенная на 300 пикселей на дюйм - 4 дюйма
Высота (800 пикселей), разделенная на 300 пикселей на дюйм - 2.667 дюйма
Все верно!
Фотография при печати будет гораздо меньшего размера, чем при разрешении 72 пикселя, зато гораздо качественнее - мы будем наслаждаться четким и хорошо детализированным изображением.
Конечно, никто не станет печатать фотографии таких нестандартных размеров, как 4x2.667 дюйма. Как же получить качественную фотографию размером 4х6? Нам вновь придется обратиться к вычислениям.
Допустим, Вы сделали несколько снимков семейного отдыха на цифровую камеру и хотите их распечатать так, чтобы размер фотографий был 6x4. Мы теперь знаем, что для достижения профессионального качества печати необходимо разрешение минимум 240 пикселей на дюйм (лучше 300).
Давайте посмотрим на оба значения разрешения и решим, какое лучше выбрать. При разрешении 240 пикс/дюйм ширина и высота будут следующие:
240 пикселей умножим на 4 дюйма по ширине - 960 пикселей (ширина).
240 пикселей умножим на 6 дюймов по высоте – 1440 пикселей (высота).
Общее количество: 960х1440 – 1382400.
Итак, размерность фотографии должна составлять 960х1440. Сейчас большинство цифровых камер имеют разрешение 5 Мп (мегапикселей или миллионов пикселей) и выше, поэтому в данном случае не будет проблемой распечатать фотографию размером 4х6 дюйма даже разрешением 300пикс/дюйм. Пиксельные размеры составят соответственно 1200x1800 (всего 2160000).
А что делать, когда требуются фотографии не 4х6 дюймов, а 8х10?
240 пикселей умножить на 8 дюймов – 1920 пикселей.
240 пикселей умножить на 10 дюймов – 2400 пикселей.
Общее количество: 1920x2400 – 4,608,000 пикселей.
Итак, чтобы напечатать фотографию в хорошем качестве размером 8х10 дюймов, ее размер в пикселях должен составлять 1920 пикселей в ширину и 2400 в высоту (или наоборот), а разрешение камеры должно быть около 4.6 миллионов пикселей.
Цифровая камера с разрешением, например, 4 Мп не даст необходимых 4,6 Мп, поэтому напечатать фотографии с такой камеры размером 8x10 с разрешением 240 качественно не получится.
Для печати фотографии размером 8x10 дюймов и разрешением 300 понадобится:
300 пикселей умножить на 8 дюймов – 2400 пикселей в высоту.
300 пикселей умножить на 10 дюймов – 3000 пикселей в ширину.
Общее количество - 7,200,000 пикселей.
Вот это уже действительно большое количество точек!
Для печати фотографии размером 8х10 дюймов с разрешением 300 пикс/дюйм, ее размер должен составлять 2400 пикселей в ширину и 3000 в высоту (или наоборот), общим количеством 7.2 миллиона пикселей. Это достаточно много, и камера должна быть с разрешением минимум 7,2 Мп! Не забывайте, что фотографии иногда требуют обрезки. Поэтому я настоятельно рекомендую приобрести камеру с разрешением 8Мп!
Калькуляторы в этой статье посвящены теме печати цифровых фотографий.
Первый калькулятор помогает подобрать формат фотографии для печати изображения известных размеров. Сформулируем задачу.
Дано: У нас имеется цифровое изображение известных нам размеров, например, 3264 на 2448 пикселей, и набор стандартных форматов, предлагаемых сервисами фотопечати. Формат определяет линейные размеры фотографии, например, фотография формата 10х15 имеет размеры 102 на 152 миллиметра.
Требуется: Выбрать из набора форматов максимально большой, на котором еще можно напечатать изображение без потери качества.
Для задания форматов фотографий я создал отдельный справочник Форматы фотографий , который при необходимости можно расширять.
Единственное специальное знание, которым нужно обладать для нахождения ответа, это знание того, что качественная печать цифрового изображения требует разрешения не менее 300 точек (пикселей) на дюйм (300 dpi), а более-менее приемлемая печать возможна при разрешении не менее 150 точек на дюйм (150 dpi). Все остальное - простые математические действия.
Графически задача изображена на рисунке ниже
Логика поиска ответа проста - линейные размеры каждого формата переводятся в дюймы, а затем в пиксели, исходя из того, что в одном дюйме 300 (150) пикселей. Далее полученное число сравнивается с размером изображения (там есть определенные нюансы, связанные с отношением высоты и ширины, но об этом во второй части). Если размер формата в пикселях больше, чем размер нашего изображения (на рисунке - формат справа от фотографии), то он уже не подойдет, ибо фотографию придется растягивать, и мы получим разрешение хуже 300 (150) dpi. Если размер формата меньше, чем размер нашего изображения (на рисунке - формат справа от фотографии), то он подойдет - фотографию придется сжимать, и мы получим разрешение лучше 300 (150) dpi.
Из всех подходящих форматов калькулятор выбирает формат максимального размера (с печатью изображений меньшего размера проблем нет - насколько я понимаю, печатать можно и с разрешением 1200 dpi).
Размер формата в пикселях для разрешения 300 dpi
Размер формата в пикселях для разрешения 150 dpi
Второй калькулятор по размерам уже напечатанного снимка и размерам исходного изображения помогает определить получившееся разрешение снимка и обрезанную при масштабировании часть. Сформулируем задачу.
Дано: Изображение известных размеров напечатано на снимке известных размеров. Поскольку значение соотношения высоты и ширины снимка и значение соотношения высоты и ширины цифрового изображения, как правило, не совпадают, то при печати происходит масштабирование снимка, очевидно, с сохранением пропорций. Графически это отображено на рисунке ниже.
При масштабировании, как видно, возможны два варианта:
первый - масштабирование с потерей части изображения,
второй - масштабирование с сохранением всего изображения, но с возникновением пустого места на снимке.
Как эстет, для расчетов я выбрал первый вариант.
Таким образом, первое, что требуется: найти получившееся разрешение снимка и часть изображения, которая не попала на снимок. Второе, соответственно, это будет разница между использованной шириной (высотой) и исходной шириной (высотой) изображения.
Ширина напечатанного изображения, см
Высота напечатанного изображения, см
Ширина изображения в пикселях
Многие из нас любят фотографировать. Разнообразие и доступность цифровых фотокамер делают фотографию популярным удовольствием, позволяющим запечатлеть яркие, колоритные моменты нашей жизни. При этом высокое качество полученных фотографий, отнюдь не гарантирует такого же качества при распечатке цифровых снимков на стандартной рулонной фотобумаге. В данном материале я расскажу, какие есть размеры фотографий для печати, подам таблицы имеющихся форматов, а также приведу ряд примеров, позволяющих наглядно уяснить особенности различных размеров фотографий.
Чтобы уяснить, какие есть размеры фотографий для печати и какова их специфика, нам необходимо, прежде всего, разобраться в базовых понятиях, необходимых для понимания процесса цифровой печати.
Линейный размер фотографии – размеры фотографии в миллиметрах (ширина-высота).
Параметры фото в пикселях – размеры вашей фотографии, выраженные в количестве пикселей (ширина-высота).
Пиксель – наименьший элемент изображения, обычно точка прямоугольной или круглой формы, и определённого цвета. Изображение состоит из сотен и тысяч таких пикселей, которое подсчитываются как горизонтально (ширина), так и вертикально (высота). К примеру, размер изображения 1181×1772 (обычно отвечающего стандартному размеру фото 10х15), имеет 1181 пикселей в ширину, и 1772 в высоту.
При этом чем больше таких точек-пикселей в вашем изображении, тем обычно оно качественнее, с лучшей детализацией и прорисовкой объектов.
Пропорции сторон – соотношение величин сторон фотографии (к примеру, 1:1, 2:3, 3:4 и так далее). Параметр показывает, насколько одна сторона короче или длиннее другой.
Растровое изображение (растр) – изображение, состоящее из таких пикселей.
DPI – (аббревиатура от «dots per inch» — точек на дюйм) – параметр, употребляемый для характеристики разрешения печати фотографий, то есть количества точек на дюйм (дюйм составляет 2,54 см). Базовый стандарт печати – это 150 dpi, оптимальный – 300 dpi. Соответственно, чем выше DPI, тем выше качество печати имеющегося цифрового фото.
Стандарт (формат) фото – это шаблонное соотношение размеров сторон фотографии, которого важно придерживаться для получения конечного изображения на бумаге.
В абсолютном большинстве случаев полученные вами цифровые снимки будут печататься на фотобумаге, имеющей стандартные размеры. При несовпадении пропорций цифровых снимков и выбранных размеров фотобумаги фотографии могут выйти растянутыми, не чёткими, потерять в качестве изображения, иметь другие нежелательные для вас последствия.
Следовательно, важно соизмерять стандартные размеры фотографий при печати, и размеры имеющихся у вас цифровых фото в пикселях, чтобы выбрать оптимальный печатный формат.
Общепризнанным стандартом фото является размер 10 на 15 см. При этом размер соразмерного цифрового фото обычно чуть больше (к примеру, 10,2 на 15,2 см), а размер в пикселях данного фото будет составлять 1205 на 1795 пикселей.
Другие форматы приведены в нижеприведённой таблице:
Если же вы планируете работать с широкоформатной печатью, то она имеет достаточно широкие требования к цифровому изображению:
Если вы знаете параметр dpi и количество пикселей вашего фото, то используя нижеприведённую формулу, вы можете рассчитать необходимые размеры сторон вашей фотографии:
В данной формуле:
х – необходимый нам размер одной стороны фотографии в сантиметрах;
r – разрешение стороны фото в пикселях;
d — 2.54 см (величина стандартного дюйма);
dpi – обычно 300 (реже – 150).
Например, пусть ширина снимка 1772 пикселя, а dpi=300.
Тогда 1772*2.54/300=15,00 см по ширине печати.
Кроме уже упомянутого мной классического размера 10 на 15 (формат A6) существуют другие популярные размеры фотографий для печати. Среди них я бы выделил следующие:
В данной статье были приведены стандартные размеры фотографий для печати, популярные форматы фото, а также удобная формула для подсчёта оптимальных размеров сторон фотографии. Рекомендую придерживаться приведённых мной форматов, это гарантирует качество напечатанных фотографий, а значит и визуальное удовольствие от их просмотра.
Для просмотра видео нажмите на картинку.
Вы узнаете:
Урок состоит из следующих разделов:
1. Обучающее видео.
2. Как влияет Resolution (Разрешение) на качество снимка.4. Увеличение размера без потерь качества.
5. Плагины для изменения размеров изображений.
6. Подготовим изображение для размещения в интернете.
7. Save for Web (Сохранить для Web).
8. Сохранение в формат JPG.
9. Сохранение в формат GIF.
10. Сохранение в формат PNG.12. Сохранение в формат PDF.
13. Сохранение в формат PSD.
14. Вопросы.
15. Домашнее задание.
Как влияет Resolution (Разрешение) на качество снимка
Мы уже освоили азы программы, сделали свои собственные работы и теперь хотим показать их другим. В этом разделе пойдет речь о том, как это сделать правильно. Качество фотоснимка зависит от многих факторов. Одним из самых важных является разрешение.
Разрешение – это количество пикселей, из которых состоит растровое изображение. Многие из вас сталкивались с ситуацией, когда в фотоаппарате специально уменьшалось разрешение (больше фотографий влезет в карту памяти, а на маленьком дисплее они хорошо смотрятся). Вспомните первые камеры в мобильных телефонах с разрешением 0,3 МП. А потом, перенеся фотографии
в компьютер на большой монитор, были разочарованы качеством, которое было безвозвратно утрачено в момент съемки. При увеличении тех фотографий в графическом редакторе результат становится еще хуже. Наклонные линии становятся зубчатыми, а фото кажется расплывчатым. Пиксели определяют, насколько изображение кажется нам резким, а их количество отвечает за максимальный размер отпечатка без потерь качества.
У нижнего левого края окна программы находится Status Bar (Строка состояния).
Здесь можно поменять масштаб отображения. Рядом с графой масштаба находится информация о документе. Щелкнув мышкой по стрелочке, вы попадете в дополнительное меню. Выберите команды, которые считаете необходимыми вам для предоставления информации.
Это поле удобно, но не позволяет изменять размер в соответствии с нашими запросами.
Чтобы изменить разрешение или размер выберите в меню Image (Изображение) – Image Size (Размер изображения). Или нажмите Alt + Ctrl + I .
Из открывающихся меню полей Width (Ширина) и Height (Высота), расположенных в группе Document Size (Размер документа), выберите единицы измерения. Проценты, дюймы, см, мм, пункты, пк, колонки.
dpi – dots per inch (точки на дюйм) – Единицы измерения разрешения при печати.
ppi – pixels per inch (пиксели на дюйм) – Единицы измерения разрешения для компьютерных мониторов.
Resolution (Разрешение) – количество пикселей в 1 дюйме или сантиметре. Какое разрешение выбрать?
72 ppi – вполне достаточно для отображения фотографий на экране монитора. Для Web-графики тоже этого достаточно. При увеличении масштаба таких изображений разглядеть мелкие детали у вас не получится, потому что их там нет.
300 ppi – желательно устанавливать для фотографий, которые вы хотите выставить на продажу или распечатать на принтере. Хотя для печати средним значением является 267 ppi. У изображений с большим разрешением при увеличении масштаба просмотра, можно разглядеть мелкие детали.
В качестве единиц измерения выберите pixels / inch (пиксели на дюйм), а не pixels /cm. Нам, не привыкшим измерять в дюймах, нужно быть особенно осторожными и не выбирать pixels /cm только на том основании, что сантиметры больше нравятся. Разница в 2,54 раза сразу скажется на вашем разрешении. Файлы станут гигантского веса. Так что при работе с данным окном и при создании нового документа следите, чтобы были выбраны пиксели на дюйм.
Scale Styles (Масштабировать стили) – позволяет масштабировать стили, заданные в палитре Layers (Cлои) вместе с выбранным слоем.
Constrain Proportions (Сохранить пропорции) – связывать высоту и ширину, так что при изменении одного параметра меняется и другой. Самая распространенная ошибка у новичков – это отсутствие этой галочки. В результате изображение сплющивается или вытягивается.
Resample Image (Интерполяция/Отслеживать изменения). При установке этой галочки изменение разрешения изображения (числа пикселов на дюйм) приведет к изменению размеров изображения c сохранением исходного разрешения. Если сбросить галочку, то увеличение разрешения изображения (например, с 72 до 300) приведет к уменьшению геометрических размеров изображения при печати. Будьте внимательны, чтобы не получить отпечаток размером с почтовую марку.
Алгоритмы интерполяции можно выбрать в выпадающем списке. В зависимости от этого выбора результат получается разный. Стоит потратить немного времени для того, что бы проверить их в действии.
При уменьшении разрешения обычно проблем не возникает, т. к. графическая информация просто отбрасывается. А вот для увеличения изображения программе приходится генерировать новые пиксели на основе анализа их соседей. Добавляя новые пиксели, программа не всегда выдает результат который бы нас удовлетворил.
Ресемплинг всегда сопровождается потерями в качестве. За исключением интерполяции с уменьшением числа пикселей для устранения дефектов сканирования и повышенной зернистости изображения. При сканировании выберите разрешение значительно больше необходимого. Произведите ресемплинг с уменьшением в несколько этапов. Зерно и другие артефакты будут устранены.
Nearest Neighbor (По соседним пикселам).
Сохраняет четкие края. Самый простейший алгоритм,
в результате работы которого края имеют характерные зазубрены.
Bilinear (Билинейная). Вычисляется среднее значение на основе анализа соседних пикселей по горизонтали и вертикали.
Bicubic (Бикубическая) . Наилучшая для плавных градиентов. Вычисляется среднее значение на основе анализа соседних пикселей не только по горизонтали и вертикали, но и по диагонали. Этот способ интерполяции работает с большим количеством смежных пикселей, производит серьезные вычисления значений этих элементов и создает новые пиксели, которые должны быть на этом месте. При небольших увеличениях фото этот способ вполне подойдет.
Начиная с CS и выше, появились два новых алгоритма интерполяции. Советую использовать именно их:
Bicubic Smoother (Бикубическая глаже) Наилучшая для увеличения.
Bicubic Sharper (Бикубическая четче). Наилучшая для уменьшения. Если вы чаще всего уменьшаете снимки, задайте этот алгоритм в качестве основного по умолчанию. Для этого выберите его в Edit(Редактирование) – Preferences (Установки) – General (Основные). Изменения вступят в силу после перезапуска Photoshop.
Увеличение размера без потерь качества
Я нашла в интернете простой способ увеличить размеры изображения с небольшой потерей качества и решила проверить так ли это. Я взяла маленькую картинку размером 5 на 5 см и увеличила ее в 2 раза, используя интерполяцию Bicubic Smoother (Бикубическая глаже). Справа от полей Width (ширина) и Height (Высота) выберите элемент % (проценты). Введите в эти поля значение 110, чтобы увеличить размер изображения на 10%.
Увеличение размера изображения на 10% не приводит к ухудшению его качества! Чтобы увеличить небольшое изображение во много раз, необходимо несколько раз увеличить его размеры на 10% (8 раз пришлось выполнить эту команду).
Затем решила записать Экшен для постепенного увеличения изображения, в надежде, что качество будет лучше и я смогу пользоваться этой формулой при следующих увеличениях.
Кстати, сделать это очень просто: откройте палитру Action (Операции/Сценарии). Она находится рядом с палитрой History (История). Нажмите на кнопку создать новую операцию. Появится окошко, в котором нужно ввести название операции (например, увеличить в 2р. по 10). Кружок внизу палитры станет красным, значит пошла запись. Измените Image Size (Размер изображения), как сказано ниже 8 раз, и нажмите на самый левый квадратик «Стоп». Все! Теперь для выполнения этой операции достаточно отметить ее курсором и нажать кнопку Play.Подробную информацию об Action (Операциях) вы найдете в уроке по автоматизации.
Результаты эксперимента представлены ниже. Вы видите разницу? Я нет. Но может зрение меня подводит. Мне кажется, оба результата стали заметно хуже по сравнению с маленьким исходником.
Так стоит ли овчинка выделки, если разница еле уловима? И неужели люди зря придумали этот алгоритм? Нет, не зря. Разница действительно есть, но заметна она лишь при очень большом увеличении (в 300% и выше). Размытость изображения после проведения Resample Image (Интерполяции) будет видна только при печати изображения, на экране это
При использовании инструментов трансформации (Ctrl+T), также меняется размер изображения. Причем происходит это так быстро, что мы даже не успеваем задуматься, на сколько, пострадает качество. Алгоритмы интерполяции беспощадно съедают пиксели при уменьшении и дорисовывают новые при увеличении.
Плагины для изменения размеров изображений.
В Photoshop есть достаточно средств для изменения размера изображения. Однако нельзя не отметить и других производителей.
Если поставить себе задачу можно найти и других достойных представителей. Не буду ничего советовать. Лично мне удобно пользоваться одной программой Photoshop. Но время идет быстро, возможно, когда вы будете читать этот текст появится новый супер плагин или ПО о котором я еще не знаю. Ну а мы продолжим изменять размеры и разрешения средствами Photoshop.
Подготовим изображение для размещения в интернете.
Обычные Save (Сохранить) Ctrl+S и Save as… (Сохранить как…) Shift+Ctrl+S не дают возможности контролировать результат, да и вес файла получается большим.
Несмотря на то, что в окне сохранения есть ползунок регулирующий качество сжатия, размер файла получается при максимальном качестве все равно больше, чем при выборе другой команды Save for Web (Сохранить для Web).
Выберите в меню File (Файл) – Save for Web (Сохранить для Web ). Комбинация клавиш Alt + Shift +Ctrl + S. В этом окне мы можем наблюдать, как меняется качество при сжатии изображения. А так же контролировать вес файла и скорость его загрузки. Удобнее всего работать с вкладкой 2 — Up (2 варианта), т. к. можно сравнить на сколько пострадает качество ради маленького веса (важно чтобы картинки на сайте быстро загружались). Под изображением находятся комментарии: формат сжатия, размер файла после оптимизации и время загрузки.
В правой части окна находятся все основные настройки оптимизации.
Всего форматов сохранения для Web пять: GIF, JPG, PNG-8, PNG-24 и WBMP. Последний практически не используется.
В JPG лучше всего хранить объемные файлы фона сайта и фотографий для публикаций, в GIF, PNG-8 и PNG-24 – элементы дизайна, которые имеют небольшой объем и ограниченное количество цветов. К сожалению, PNG-24 не поддерживается браузером Internet Explorer 6, но количество пользователей IE6 быстро уменьшается и, следовательно, риск, что формат PNG-24 не откроется у кого-то на компьютере, уменьшается.
Файлы формата GIF и PNG-8 сохраняют прозрачность (но не альфа-канал). Чтобы сохранить прозрачность, нужно отметить галочку Transparency. WBMP – растровый формат для мобильных телефонов.
После того как вы нажмете «Сохранить» и введете название файла, появится это окно. Оно нужно лишь для того, чтобы напомнить Вам, что писать название файла при сохранении лучше английскими буквами, без пробелов и заглавных букв. Если не хотите впредь его видеть, отметьте галочкой «Не показывать снова».
Сохранение в формат JPG.
JPG – самый распространенный формат для хранения фотографий. К плюсам относится относительно небольшой размер файла. Основной минус – это сжатие с потерями качества. Теряются мелкие детали, появляются разводы и муар. При многократной перезаписи происходит постепенное искажение деталей, приводящее к значительной потере качества.
Настройки для формата JPG состоят в основном из настройки качества изображения (оно же сжатие) в процентах. Чтобы сохранить большой кусок фона можно увеличить размытие.
Для управления размером картинки в Save for Web (Сохранить для Web) есть раздел под названием Image Size (Размер изображения). Размеры вашей картинки не должны превышать 800 на 600 пикселей. Или нетерпеливый пользователь закроет окно браузера, не дождавшись пока картинка загрузится полностью.
Откройте файл кораблик.jpg. Выберите в меню File(Файл) команду Save for Web (Сохранить для Web). Выберите режим 2-Up (Два варианта). В разделе Image Size (Размер изображения) уменьшите размер изображения до 450*600. Можно это сделать предварительно, выбрав в меню Image (Изображение) – Image Size (Размер изображения), или нажав Alt + Ctrl + I.
В правой части окна в списке выберите формат сохранения JPEG.
Список Compression quality (Качество сжатия)
предлагает несколько значений – от Low (Низкое) до Maximum (Наилучшее). Более точная регулировка осуществляется ползунком Quality (Качество), расположенным правее. Для начала установите 100%. При столь высоком значении изображение
в правой части области просмотра (оптимизированное) практически не отличается от оригинала
в левой части. Взгляните на информационные поля в соответствующих частях области просмотра. Оригинал (несжатое изображение) занимает 625 Кбайт, а сжатое – 139,5 Кбайт. Даже при таком низком коэффициенте сжатия есть значительный выигрыш в размере файла. Время загрузки сжатого изображения 26 секунд – это слишком много, многие могут потерять терпение и уйти
с вашей странички.
Установите ползунок Quality (Качество) посередине, примерно на 50%. Вы видите разницу между двумя изображениями? Нет? Тогда можно уменьшить Качество еще немного. Остановимся на 35%. Ниже 30 уже будет заметно ухудшение. Вес стал 23 кб, а скорость 5 сек. Иногда параметр Blur (Размытие) может сэкономить вам еще одну-две секунды. Но в нашем случае он не даст заметного результата, т.к. мы уже достаточно сильно сжали картинку.
Progressive (Прогрессивный) задает прогрессивную развертку изображения при загрузке в браузере. Этот параметр позволяет постепенно загружать изображение. С самого начала загрузки вы будете видеть часть изображения.
Optimized (Оптимизация/Оптимизированный) включает дополнительную оптимизацию внутренней структуры JPEG, что иногда еще сильнее сокращает размер файла.
ICC Profile (Встроенный профиль/Профиль ICC) позволяет внедрить в файл изображения цветовой профиль. Внедренный профиль увеличивает размер файла. Отметьте этот пункт только, если считаете необходимым, чтобы и другие знали какой у вас цветовой профиль.
Нажмите на кнопку просмотр и вы увидите, как ваше изображение будет открываться в браузере. Вы можете выбрать для просмотра любой из установленных на компьютере браузеров.
Сохраните сделанные настройки если вам нужно обработать много изображений. Для этого щелкните по значку меню опримизации и выберите Save Settings (Сохранить настройки). Введите в поле File name (Имя файла) какое-нибудь имя, и нажмите кнопку Save (Сохранить).
Теперь в списке Settings (Наборы/Параметры) появится введенное имя. При обработке следующего файла будет достаточно выбрать это имя из списка.
Сохранение в формат GIF
Для размещения на Web-странице изображений с прозрачными участками используется формат GIF , поддерживающий только индексированные цвета.
Количество цветов в его палитре задается в поле Colors (Цвета) и должно создавать зависимость между качеством и весом.
В перечне алгоритмов генерации индексированной палитры изображения по умолчанию предлагается вариант Selective (Селективная) , дающий наилучшие результаты для изображений.
Следующий выпадающий список по умолчанию вариант Diffusion (Диффузия/Случайный) лучше использовать для фотографий, a Noise (Шум) – для фоновых текстур и градиентов. Pattern (Регулярный /Узор) создает повторяющийся узор.
Interlaced (Чересстрочно)
– для постепенной загрузки изображения.
Степень сглаживания задается ползунком Dither (Дизеринг/Сглаживание). Чем выше сглаживание, тем больше размер файла.
Список Matte (Матовый/Кайма)
создает переход кромки изображения к фоновому цвету страницы. Обычно кромка полупрозрачная, а это не поддерживается форматом GIF.
В результате при экспорте возникает характерный шум. Чтобы избежать его появления, установите в списке цвет фона Web-страницы. Полупрозрачные пиксели будут окрашены в этот цвет. Если снять галочку Transparency (Прозрачность), цвет, заданный в списке Matte (Матовый/Кайма), будет считаться фоновым и заполнит прозрачные участки изображения.
Перевод цветов к палитре Web осуществляется ползунком Web Snap (Web-цвета) . Понаблюдайте за изменениями цветов изображения в зависимости от положения ползунка. Происходящие изменения отображаются в палитре изображения. На некоторых цветах палитры появляются белые ромбики.
Color Table (Таблица цветов) полезна не только для наблюдения. Она позволяет управлять отдельными цветами изображения.
Если щелкнуть по значку откроется дополнительный список.
Если вы хотите избежать существенных цветовых сдвигов в любых браузерах, но не хотите приводить все цвета к палитре Web, то можно сделать это выборочно. Задайте режим сортировки Sort by Popularity (Сортировка по частоте использования). Наиболее часто встречающиеся цвета расположатся слева направо.
Щелкните мышью на любом образце в палитре. Образец получит белую рамку, показывающую, что он выделен. Photoshop может сам выбрать цвет, наиболее близкий к выделенному, из палитры Web. Для этого надо щелкнуть на пиктограмме кубика в нижней части панели или выбрать команду Shift/Unshift Selected Colors to/from Web Palette(Заменить / Отменить замену выделенных цветов на цвета палитры Web).
Приведение всего изображения к палитре Web сделало переходы на изображении монитора чересчур резкими. Исправим этот дефект вручную. Сделайте на образце в палитре двойной щелчок мышью. Перед вами появится окно Color Picker (Палитра цветов). Убедитесь, что флажок Only Web Colors (Только цвета Web) в нем установлен. Выберите оттенок, ближайший к текущему цвету и закройте окно нажатием кнопки ОК (Да). Цвет будет отредактирован. Если вы находите его тоже неудачным, снова откройте окно Color Picker (Палитра цветов) и подберите другой.
Белый квадратик в нижнем углу образца указывает, что цвет блокирован. Блокированные цвета сохраняются в неприкосновенности при сокращении цветов в палитре изображения и при просмотре в браузере. Чтобы снять блокировку, щелкните на пиктограмме с изображением замка
в нижней части панели.
Сохранение в формат PNG.
PNG позволяет хранить как индексированные, так и полноцветные изображения. Используемый алгоритм сжатия не приводит к потерям информации. Многократная обработка и перезапись лишена недостатков, присущих формату JPG. Форматы PNG-8 для индексированных изображений и PNG-24 для полноцветных. Параметры PNG-8 абсолютно аналогичны GIF, в PNG-24 есть только переключение режимов Transparency (Прозрачность), Interlaced (Чересстрочная развертка)
и параметров Matting (Матовый/Обработка краев).
Для сохранения воспользуйтесь Меню File (Файл) – Save as… (Сохранить как…). В поле тип файлов выберите TIFF.
TIFF поддерживает сжатие без потерь за счет большого увеличения размеров файла по сравнению с JPG. Этот формат считается лучшим для сохранения результатов сканирования, отправки факсов, распознавания текста и в полиграфии для печати. Имеется возможность сохранять изображение с разными алгоритмами сжатия и без сжатия вообще.
В TIFF сохраняется прозрачность и альфа‑каналы. В PhotoShop вы можете сохранить файл, содержащий слои.
В TIFF сохраняется информация о профиле ICC . Это дает возможность сохранить цвета без изменения при просмотре на разных мониторах и при выводе на печать.
TIFF широко распространен и на IBM PC, и на Apple. Это позволяет использовать его для передачи изображений с одной аппаратной платформы на другую без потери содержания. Также этот формат можно использовать для передачи данных между различными приложениями, «не понимающими» форматы друг друга, но «знающими» TIFF. При такой передаче будут сохранены многие атрибуты изображения, теряющиеся, например, при передаче данных через буфер обмена Windows.
Сохранение в формат PDF
PDF – это формат для представления электронных документов (безбумажный офис). Главное достоинство состоит в том, что документы выглядят одинаково на любых устройствах (экраны, принтеры). Элементы оформления не смещаются в разные стороны.
Для сохранения воспользуйтесь Меню File (Файл) – Save as… (Сохранить как…). В поле тип файлов выберите PDF.
В разделе Система защиты можно поставить пароль на открытие файла, на печать, на сохранение и на редактирование.
Сохранение в формат PSD
PSD – это собственный формат PHOTOSHOP. В нем можно сохранить слои, маски, обтравочные маски, контуры, текст и другие моменты не законченной работы.
Вопросы:
– Nearest Neighbor(По соседним пикселам)
– Bilinear (Билинейный)
– Bicubic (Бикубический)
– Bicubic Smoother (Бикубическая глаже)
– Bicubic Sharper (Бикубическая четче)
– Установить галочку Scale Styles (Масштабировать стили).
– Установить галочку Constrain Proportions (Сохранить пропорции).
– Установить галочку Resample Image (Интерполяция/Отслеживать изменения).
– Снять галочку Resample Image (Интерполяция/Отслеживать изменения).
– Снять галочку Scale Styles (Масштабировать стили).
Домашнее задание:
1. Откройте фотографию кораблик.jpg. Сохраните в формат JPG при помощи Save for Web (Сохранить для Web). Добейтесь следующих показателей: размер изображения 600*800 пикс; 39,49 к;
8сек /56,6 кбит в сек.
2. Откройте фотографию кораблик.jpg. Сохраните в формат GIF при помощи Save for Web (Сохранить для Web). У меня получилось сжать ее до 75 кб и добиться скорости загрузки 14 сек при 56 кбит/сек. Попробуйте добиться лучшего результата.
Придется изменять цвета.
