---

 Тема 12. Иллюстрации для Интернета

--------------------------------------------------------------------------------

Введение 
Рисунки с палитрой (GIF, PNG) 
Рисунки JPEG 
Изображения с прозрачными областями 
Изображения из фрагментов 

--------------------------------------------------------------------------------

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

Если полноцветное изображение сохраняется c палитрой (GIF или PNG-8) и содержит больше цветов, чем есть в палитре, программа использует так называемый дизеринг (dithering) — цвета, отсутствующие в палитре, заменяются узором из пикселей других цветов, которые в палитре есть. 

Пусть нам надо разместить на Web-странице кнопку . Попробуем сохранить ее в разных форматах и сравнить качество рисунка и объем файла. 


Формат Размер Качество 
GIF, 8 цветов 212 байт хорошее 
GIF, 16 цветов 257 байт лучшее 
PNG-8, 8 цветов 256 байт хорошее 
PNG-8, 16 цветов 303 байт лучшее 
PNG-24 526 байт лучшее 
JPEG, качество 0 468 байт плохое 
JPEG, качество 50% 684 байт плохое 
JPEG, качество 100% 1384 байта лучшее 

Теперь сохраним в разных форматах фотографию девушки. 


Вот что получается: 
Формат Размер Качество 
GIF, 32 цвета 5,91 Кб низкое 
GIF, 128 цветов 10,43 Кб хорошее 
GIF, 256 цветов 13,40 Кб хорошее 
PNG-8, 32 цвета 5,56 Кб низкое 
PNG-8, 128 цветов 9,41 Кб хорошее 
PNG-8, 256 цветов 12,25 Кб хорошее 
PNG-24 31,09 Кб лучшее 
JPEG, качество 0 1,90 Кб плохое 
JPEG, качество 50% 5,82 Кб хорошее 
JPEG, качество 100% 19,17 Кб лучшее 

Таким образом, рекомендуется использовать 

форматы GIF или PNG-8 для 
мелких изображений 
рисунков с четкими границами 
рисунков с прозрачными областями 
черно-белых (двуцветных) рисунков 
формат JPEG для 
фотографий 
размытых изображений 
рисунков с градиентом 
к началу   

  

2. Рисунки с палитрой (GIF, PNG)
Окно сохранения
  Откройте Обозреватель файлов и перейдите в папку PRACTICE/12. Откройте файл africa.psd.  


Заметим, что это изображение содержит всего несколько различных цветов, поэтому для размещения в Интернете его следует сохранять в форматах GIF или PNG-8. 

  Выберите пункт меню Файл — Сохранить для Web (клавиши Alt+Shift+Ctrl+S).  




В левой части специального диалогового окна сохранения выводится оптимизированный рисунок, который будет сохранен. Окно содержит четыре вкладки: 
Original — только исходное изображение 
Optimized — только оптимизированное изображение, готовое для сохранения 
2-Up — исходное и оптимизированное изображения 
4-Up — исходное и три варианта оптимизированных изображений с разными параметрами 
Правую часть занимают элементы, позволяющие настроить параметры сохранения. В первую очередь надо отметить палитру Image Size (размер изображения). С ее помощью можно уменьшить размеры при выводе, при этом размеры рисунка, редактируемого в Photoshop, останутся без изменений. Для того, чтобы применить новые размеры, служит кнопка Apply. 
В верхней части находится палитра для выбора формата файла. 


Список, отмеченный цифрой 1, служит для выбора формата файла. Параметр Lossy задает допустимые потери при сжатии изображения (от 0% до 100%). 
Палитра
В поле Colors надо выбрать количество цветов в палитре (от 2 до 256), при увеличении этого числа качество повышается, но размер файла увеличивается. Надо выбирать предельно малое число цветов, при котором изображение выглядит удовлетворительно. 
Список, отмеченный цифрой 2, определяет, как выбираются цвета в палитре: 

Перцепционная (Perceptual) — в первую очередь выбираются цвета, которые лучше воспринимаются человеческим глазом 
Селективная (Selective) — преимущество в палитре отдается тем цветам, которые охватывают большие непрерывные области 
Адаптивная (Adaptive) — в первую очередь выбираются цвета, которые встречаются чаще всего 
Ограниченная (Web) (Restrictive (Web)) — используются только цвета из безопасной Web-палитры, которую браузеры не искажают 
В левом нижнем углу окна можно увидеть размер файла в выбранном формате. Посмотрите, как он изменяется при изменении количества цветов в палитре. 
Дизеринг
Поле Dither задает степень дизеринга при замене цветов, отсутствующих в палитре — применяется или нет узорная заливка. При значении 100% дизеринг применяется везде, при значении 0% отсутствующие цвета просто заменяются ближайшими из палитры. Список, отмеченный цифрой 3, определяет, каким методом будут заменяться цвета, отсутствующие в палитре (чаще всего используется Diffusion — взаимопроникновение пикселей двух цветов). Для рисунков с переходами цветов лучше использовать дизеринг. 
  
Дизеринг 0% Дизеринг 100% 



Прозрачность
Флажок Transparency показывает, сохранять ли прозрачные пиксели рисунка. Если он установлен, прозрачность сохраняется, если нет — прозрачные пиксели заливаются цветом, который выбран в поле Matte. 
Список, отмеченный цифрой 4, определяет, как обрабатываются полупрозрачные пиксели. Если выбран вариант No Transparency Dithering, пиксели с прозрачность менее 50% считаются полностью прозрачными, а для остальных цвет определяется как смешивание цвета изображения и цвета, выбранного в поле Matte. При любом другом варианте создается узор из прозрачных и непрозрачных пикселей так, чтобы имитировать полупрозрачное изображение. 

  Установите формат GIF и режим 16 цветов в поле Color. Сохраните файл. Сравните размеры исходного и нового файлов.  


к началу   

  

3. Рисунки JPEG
  Откройте файл hands.psd.  


Это полутоновое (серое) изображение с плавными переходами. Поэтому его следует сохранить в формате JPEG. 

  Выберите пункт меню Файл — Сохранить для Web (клавиши Alt+Shift+Ctrl+S). Выберите формат JPEG.  



В формате JPEG изображение сжимается с потерями с помощью специальных алгоритмов. В поле Quality задается качество изображения в процентах. Кроме того, в списке под полем формата можно выбрать часто используемые варианты от Low (низкое, 0%) до Maximum (максимальное, 100%). 
  Установите качество Medium и сохраните файл.  


Если установлен флажок Progressive, изображение в окне браузера будет появляться постепенно (сначала грубое, потом качество постепенно будет улучшаться). 

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

  Откройте файл lion.psd. Выберите формат JPEG, качество 60% и размытие около 0,2. Сохраните файл.  


  Откройте файл economy.psd. Выберите нужный формат и параметры так, чтобы сохранить качество и максимально уменьшить размер изображения. Сохраните файл.  


к началу   

  

4. Изображения с прозрачными областями
Программа Photoshop позволяет обрабатывать рисунки с прозрачными областями. Для размещения в сети Интернет их надо сохранять в форматах GIF или PNG, которые поддерживают прозрачность. Прозрачные области обозначаются "шахматкой" — клетчатым фоном, в котором чередуются серые и белые квадраты, как на шахматной доске. 
Мы уже знаем, что фоновый слой — всегда непрозрачный. Поэтому для получения изображения с прозрачными областями этот слой надо удалить или преобразовать в обычный слой (Слой — Новый — Слой из фона или двойной щелчок по нему в палитре Слои). 

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

Ластик (Eraser)  — на любом слое, кроме фонового, стирает пиксели — делает их прозрачными 
Стиратель фона (Background Eraser)  — при стирании на фоновом слое преобразует его в обычный и устанавливает фоновым цветом цвет пикселя, на котором щелкнули. Стирает пиксели до прозрачного состояния. Параметр Дискретизация (Sampling) на панели параметров может принимать значения 
Непрерывная (Continuous) — удаляется тот цвет, который находится под курсором 
Одиночная (Once) — удаляется тот цвет, который находился под курсором в начале движения кисти 
Образец фона (Background Swatch) — удаляется фоновый цвет 
Волшебный ластик (Magic Eraser)  — выделяет пиксели, как Волшебная палочка, и сразу делает их прозрачными. Если применяется к фоновому слою, автоматически преобразует его в обычный слой. 
  Откройте файл butterfly.psd. Включите инструмент Стиратель фона и попробуйте стереть белый фон вокруг бабочки.  


  Включите инструмент Волшебный ластик, установите чувствительность 20 и щелкните по белой области вокруг бабочки. Не устанавливайте флажок Не грубо, иначе будут стерты усы!  


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


Проверим, как будет выглядеть рисунок на зеленом фоне. 
  Вызовите палитру Слои (клавиша F7) и создайте новый слой, щелкнув по кнопке . Перетащите этот слой ниже слоя с бабочкой и залейте его светло-зеленым цветом. Для этого надо установить этот цвет основным и применить заливку (Редактирование — Залить или клавиши Shift+F5).  



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


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

  В палитре Слои сделафйте активным слой с бабочкой и снимите выделение (клавиши Ctrl+D). Примените команду Слой — Обработка краев — Устранить кайму.  


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

  Удалите фоновый слой, перетащив его на кнопку  в палитре Слои.  


  Выберите пункт меню Файл — Сохранить для Web (клавиши Alt+Shift+Ctrl+S). Выберите формат GIF и установите флажок Transparent. Определите нужное число цветов в палитре и сохраните файл.  


к началу   

  

5. Изображения из фрагментов
Введение
При разработке дизайна Web-страниц чаще всего страница сначала рисуется целиком в графическом редакторе, например в Photoshop, а потом "режется на куски". Каждый такой фрагмент (slice) будет храниться в виде отдельного файла. Это дает несколько преимуществ: 
маленькие файлы бастрее загружаются 
для каждого фрагмента можно использовать оптимальные для него формат и параметры: например, один фрагмент удобнее сохранять в формате GIF, а другой — в JPEG 
каждый фрагмент может служить гиперссылкой ссылкой на отдельный докмент 
при создании анимационных рисунков можно ограничить область анимации: например, у автомобиля может мигать только фара, а остальная часть будет обычными рисунками, это уменьшает объем файлов) документ 
В Photoshop есть специальные инструменты для работы с такими фрагментами: 

Раскройка  позволяет "разрезать" рисунок на части 
Выбор фрагмента  служит для перемещения и изменения границ фрагментов 
Эти инструменты связаны с одной и той же кнопкой и вызываются по клавише K. 
Порядок работы с "разрезанными" изображениями таков: 

разделить рисунок на фрагменты с помощью инструмента Раскройка, для точного размещения можно использовать направляющие — специальные линии разметки 
если нужно, передвинуть фрагменты и изменить их размеры с помощью инструмента Выбор фрагмента 
настроить свойства каждого фрагмента: имя файла при сохранении, гиперссылку, всплывающую подсказку и т.д. 
сохранить рисунок как Web-страницу: HTML-файл и набор файлов, гда хранятся фрагменты изображения 
Как разрезать изображение?
  Откройте файл menu.jpg и сохраните его в формате PSD.  


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



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


  Для того, чтобы границы выделения "прилипали" к направляющим и краям, выберите пункт меню Просмотр — Привязать к — Направляющим, а затем — Просмотр — Привязать к — Границам документа.  


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



В левой верхнем углу каждого фрагмента выводится его номер и значок, показывающий тип фрагмента. Мы будем работать пока только с одним типом — фрагмент-рисунок. 
Настройка фрагментов
Теперь с помощью инструмента Выбор фрагмента можно выбрать фрагмент, который нужно изменить, вокруг него появляется рамка с маркерами. Фрагмент можно перетащить мышкой или изменить его размеры. Если при этом остается свободное место, программа автоматически создает новые фрагменты так, чтобы все изображение было разбито на прямоугольники. Номера и значки таких авто-фрагментов выводятся серым цветом. 
  Включите инструмент Выбор фрагмента и попробуйте изменить границы какого-нибудь фрагмента. Затем отмените эти действия.  


Для каждого фрагмента можно установить параметры: 

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



Сохранение
  Выберите пункт меню Файл — Сохранить для Web.  


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

  Установите разные параметры сохранения для каждого фрагмента.  


  После нажатия на кнопку ОК в списке Тип файла выберите вариант HTML and Images и сохраните документ с именем menu.html.  


При таком сохранении создается HTML-файл и связанные с ним рисунки (каждый фрагмент записывается в отдельный файл). Все рисунки помещаются в подкаталог images. На Web-странице фрагменты помещаются в таблицу вплотную друг к другу так что между ними не остается зазора и изображение кажется цельным. Однако учтите, что "швы" могут стать заметны, если для сохранения фрагментов используются разные параметры (например, один сохраняется с палитрой 16 цветов, а второй — как черно-белый рисунок). 

  Откройте файл menu.html в браузере. Проверьте работу всплывающих подсказок и изменение строки состояния. Просмотрите код Web-страницы, выбрав пункт Просмотр HTML-кода из контекстного меню.  


Поскольку рисунок является ссылкой на другой документ, Photoshop почему-то вставляет команды изменения строки состояния в тэг <A>, а не в тэг <IMG>. Поэтому в строке состояния большинства браузеров отображается адрес перехода, а не введенный нами текст. Если исправить эту ошибку (переставить команды в тэг <IMG>), все работает правильно. 



--------------------------------------------------------------------------------
    
 Фильтры    Анимация в Image Ready 



--------------------------------------------------------------------------------

© 2005-2007  К. Поляков 

--------------------------------------------------------------------------------