Всем доброго времени суток!
И на это раз мы не будем оригинальны: Ваши письма приходят в таком огромном количестве, что мы в очередной раз хотели бы выразить благодарность всем нашим читателям за активность. Если Ваше письмо до настоящего времени осталось без ответа, то Вы его обязательно получите в самое ближайшее время.
В нашем сегодняшнем уроке речь пойдет о том, что для многих уже давно не является секретом, но, судя по Вашим письмам, многим урок пойдет на пользу. По крайней мере, мы очень на это надеемся. Мы постараемся вкратце рассказать Вам о том, что в общем смысле принято называть "Графикой для Web", а именно о форматах и особенностях графических файлов, используемых для создания web-страниц. Эта тема несомненно будет продолжена в последующих выпусках нашей рассылки.

Какой формат файлов Вы обычно выбираете при сохранении в графическом редакторе для последующей публикации в WWW? Какие настройки по оптимизации файлов являются наилучшими?
Если у Вас нет желания вникать во все подробности, а надо срочно заканчивать работу над сайтом, следуйте старому правилу: JPEG - оптимален для Фотографий, GIF - для графики.
Для большинства случаев это правило является верным, хотя довольно примитивным и содержащим определенный условности. И, как из всякого правила, из этого тоже есть исключения и порой очень серьезные. Например, как поступить с изображением, представляющим собой логотип в комбинации с фотографией? Думаете, GIF будет лучшим решением в этом случае?!

Вы скажете: а что насчет PNG?
PNG (Portable Network Graphics или Портативная сетевая графика), на наш взгляд, - очень перспективный формат и будет широко использоваться в недалеком будущем. Многие с этим могут поспорить и сейчас, если вспомнят, что формат PNG был описан еще в 1996 году и до сих пор так и не получил широкого распространения. На всякий случай напомним, что этот формат начал поддерживаться в Internet Explorer, начиная с версии 4.0b2, а в Netscape Navigator с версии 4.04, но так и не имеет полной поддержки в последних версиях обоих браузеров. Получить более подробную информацию о поддержке формата PNG, а также протестировать свой браузер на предмет поддержки файлов PNG можно по адресу:
http://www.libpng.org/pub/png/
Рискую навлечь гнев любимой Macromedia (именно она презентовала PNG как "родной" формат файлов в своем растровом редакторе Fireworks), но объективная реальность такова, что время масштабного использования формата PNG еще не наступило.
Наиболее корректно формат PNG поддерживает Internet Explorer 5.0 для Macintosh, но давайте вспомним, сколько у нас счастливчиков, работающих на Mac'ах?!

Как web-дизайнеру, Вам постоянно приходится думать о двух моментах:
1) качество изображения;
2) размер изображения.
В Photoshop 5.5 разработчики добавили очень полезную команду, без которой практически все web-дизайнеры не представляют сейчас работу в Photoshop, - это команда Сохранить для Web (Save for Web). У многих пользователей Photoshop бытует мнение, что эта команда и была основной причиной того, что Adobe выпустила довольно нехарактерную для своих продуктов промежуточную версию - 5.5. Команда Сохранить для Web (Save for Web) дает значительно лучшие результаты, чем традиционная Сохранить как (Save as). Кроме того, в ней присутствует очень удобный просмотр и полезная информация об изображении.
В диалоговом окне Сохранить для Web (Save for Web) Вы можете:
- выбрать один из 12 методов компресии для файлов в формате .GIF, .JPEG и .PNG;
- налюдать результаты воздействия на качество изображения того или иного изменения в опциях сохранения;
- анализируя информацию в левом нижнем углу, знать размер файла на выходе и время, требуемое на его загрузку в зависимости от скорости соединения;
- воспользоваться имеющимися инструментами, предназначенными для облегчения процесса сохранения файлов;
- посмотреть. как будет выглядеть конечный файл в любом из имеющихся браузеров.
Другими словами, команда Сохранить для Web (Save for Web) в Photoshop уникальна по своей сути и не имеет аналогов в графических редакторах.

Вернемся все же непосредственно к теме урока.
Для графики с ограниченным количеством цветов, такой как клипарт, логотипы, текст в общих случаях, формат GIF - оптимальное решение. GIF использует 8-битную глубину цвета (2 в восьмой степени - 256 цветов) и определенный алгоритм сжатия, хотя часто приходится слышать, что GIF не предусматривает сжатия вообще.
При выборе селективной палитры цветов (Selective color palette) пользователь ограничен определенной цветовой гаммой; например, GIF-64 позволяет сохранять изображения, цветовая палитра которых состоит максимум из 64 цветов. Сглаживание переходов (Dithering) размещает смежные пиксели двух разных цветов таким образом, что при просмотре изображения виден третий - смесь двух цветов смежных пикселей.

Изображение на примере - это .GIF с опцией Сглаживание переходов (Dither) 8%. Я решил, что наименьшее количество цветов, которое я могу оставить в изображении без видимой потери его качества, - 8. Такой анализ изображения позволил снизить размер файла с 30.1 Кб в оригинальном изображении до 1.3 Кб. Мне кажется, это довольно существенным.

Но не только поэтому формат GIF завоевал такую популярность. Еще одной отличительной его особенностью и большим преимуществом является способность хранить информацию о позрачных участках. Для этого необходимо лишь расположить ихображение на отдельном слое и скрыть Фон (Background) перед его сохранением с помощью команды Сохранить для Web (Save for Web).
Естественно, для сохранения прозрачности в итоговом файле необходимо отметить флажком опцию Прозрачность (Transparency). Все было бы отлично, если бы не один нюанс: зубчатая кромка белого цвета по периметру изображения на темном фоне будет смотрется ужасно. Все, что нужно сделать, - это изменить Связанный цвет (Matte) в соответствии с цветов фона Вашей страницы.

Для большинства фотографий или графики, содержащих большое количество цветов, лучше использовать JPEG. Этот формат хранения информации использует 24-битную глубину цвета (2 в 24-й степени - 16,7 миллионов цветов) и алгоритм сжатия, осуществляющий сохранение изображения с потерей качества. Поэкспериментируйте в диалоговом окне Сохранить для Web (Save for Web) с параметром Качество (Quality), уменьшая размер файла, и посмотрите, какое значение этого параметра будет оптимальным для различных файлов, и в какой степени будет уменьшаться их размер.

Этот файл - надеюсь, у Вас есть возможность его наблюдать - сохранен при значении параметра Качество (Quality), равном 60%, и небольшим Размытием (Blur). Его размер 4.2 Кб при том, что оригинальное изображение "весило" 28 Кб.

Чтобы сделать наглядным сравнение, следующий файл сохранен в формате GIF, используя 128-цветную палитру и сглаживание переходов. Его размер - 6,8 Кб. Сравните с предыдущим.

И в заключение несколько рекомендаций по созданию графики для Web от Дика МакКлелланда (Deke McClelland) - признанного мастера в мире графики:

1. Разрешение не играет роли. Независимо от того, какое значение Разрешения (Resolution) Вы введете в диалоговое окно Размер изображения (Image size), браузер отобразит один пиксель изображения на каждый пиксель экрана (если Вы не укажите альтернативный размер изображения в HTML-файле). Следовательно, все измерения производятся в пикселях - число пикселей в ширину и число пикселей в высоту.

2. Форматы GIF, JPEG и PNG. Формат GIF поддерживает только 256 цветов, поэтому он больше подходит для высококонтрастных картин и текста. Формат JPEG сжимает изображение с потерей данных, поэтому он удобен для хранения фотографий и других изображений с непрерывным тоном. Особое место занимает формат PNG, представляющий собой, по существу, 24-битовый вариант формата GIF, разработанный для небольших цветных изображений, которые Вы не хотите сжимать.

3. Индексированные цвета. Чтобы сохранить изображение в формате GIF, Вы должны уменьшить число цветов не более чем до 256. Для этой цели в Photoshop используется прием, называемый индексированием, который состоит в переназначении цветов согласно фиксированным индексам.

4. Используйте команду Сохранить копию (Save a copy). Чтобы размер файла оставался минимальным, выберите команду Файл > Сохранить копию (File > Save a copy) и установите флажок Exclude Non-Image Data. Это избавит Вас от данных, необходимых для предварительного просмотра и настройки цветов, от файловой и другой информации, без которой вполне можно вывести изображение на экран. Одна эта операция может уменьшить на 10 Кб размер файла изображения, что может оказаться совсем не лишним при передаче по Internet.

..:: Опрос ::..

Каким объемом оперативной памяти Вы располагаете?

..:: Вопросы читателей ::..

1. zJ:
В видео-клипах часто применяют эффект, когда картинка становится черно-белой, но за исключением определенного спектра, скажем оставляют
красные цвета. Сколько я не пытался у меня так и не получилось это реализовать в Photoshop, хотя я подозреваю что решение на поверхности и достаточно применить одно-два преобразования картинки.
Вы не можете ничего подсказать по этому поводу?

..:: Ответ ::..

Алексей Барышников:
Используйте функцию Hue\Saturation из меню Image\Adjust (или просто жмите Ctrl+U). Там ставьте галочку Colorize и рулите насыщенностью и цветом.

Rost:
Ответ действительно лежит на поверхности!
Select: Color Range > Выбираем необходимый цвет
Инвертируем выделение
Image: Agjust: HUE/Saturation > Убираем Saturation на нет!
Все!

2. Белла:
Я только начала осваивать эту программу (Adobe Photoshop), и Ваши уроки очень мне в этом помогают. Большое спасибо. Но у меня все время возникает одна и та же проблема: я не могу добавить тень к получаемым объектам.

..:: Ответ ::..

Леонид Тарасов:
Тень можно добавить несколькими разными способами. Самый простой - это использовать эффекты. То есть, вы кликаете правой кнопкой на том слое (Layer), где лежит ваш объект, на выпадающей менюшке нажимаете "Настройки смешивания" (в 6 фотошопе). Как это называется в 5-м я точно не помню, но по моему это так и называется "Эффекты". И после этого просто применяете эффект "Тень" (Shadow).

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

..:: Следующий вопрос ::..

3. Natasha:
Как уменьшить размер отсканированного изображения с наименьшими потерями качества и записать действия как операцию (action)?

..:: Открытый вопрос ::..

4. Игорь:
Как заставить Photoshop делать распечатку на принтере с разрешением 1200 dpi? При выводе на печать выходит только 600 dpi?
Принтер Lexmark Z32. Photoshop 6.

Ответить

Задать вопрос

..:: Совет ::..

Если у Вашей системы возникли проблемы с памятью, выполните команду Edit > Purge. Это поможет вам очистить рабочий диск.

..:: Термин ::..

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

..:: Ссылка ::..

Planet Photoshop
Название говорит о многом...

..:: Юмор ::..

Двое знакомых сидят в кафе.
- Жизнь похожа на чашку чая, - задумчиво пpоизносит один из них.
- Почему? - удивляется втоpой.
- Откуда мне знать? Я что, философ?

..:: Статистика рассылки ::..
Подписчиков: 7767
Выпусков рассылки: 22
Срок жизни рассылки: 39 дней
Количество уникальных посетителей: 8194
Рассылку читают в: 63 странах

..:: Реклама в рассылке ::..

Рейтинг почтовых рассылок SpyLOG