Adobe Photoshop

для WEB

ПОДРОБНОЕ
Ж НЛЯЮСТРПРОВАМНО!
РУКОВОДСТВО
 Под редакцией В. Н. Печникова
4

Adobe Photoshop
для Web

Подробное иллюстрированное руководство

«Лучшие книги»
Москва
УДК [004.731.12:004.92](075.4)
ББК 32.973.202-018.2я78-1
А21
1

А21 Adobe Photoshop для Web : подроб. иллюстрир. рук.: [учеб, пособие] /
под ред. В. Н. Печникова. —.М.: Лучшие книги, 2005. — 224 с.: ил. —
ISBN 5-93673-048-4.
I. Печников, В. Н., ред.
Агентство CIP РГБ

Эта книга научит вас использовать программы Adobe Photoshop и

Adobe ImageReady для создания привлекательного оформления своих Web-
страниц. Замечательная особенность книги - нацеленность на практическое
применение.
Прочитав эту книгу, вы овладеете всеми основными приемами созда-
ния Web-графики и Web-анимации, а также, что очень важно, особенностями
интеграции графики в HTML-код Web-страниц.
Кнопки, баннеры, анимация, графические карты навигации, бесшовный
фон, управление прозрачностью - купите книгу и перед вами откроются про-
сто потрясающие возможности!

Посетите наш Интернет-магазин «Три ступеньки »: www.3st.ru

E-mail: post@triumph.ru

ISBN 5-93673-048-4 © ООО «Лучшие книги», 2005

© Обложка ООО «Лучшие книги», 2005
© Верстка и оформление ООО «Лучшие книги», 2005
 Краткое содержание

Глава 1. Графика Эля Web-страниц ................................ ....6

Глава 2.Т1ос)готовка трафики

с помощью Adobe ftiofoshop CS
иAdobeImageReadyCS.........................................

Глава з. Анимация на Web-страницах

Глава 4. Со^с)аем анимацию с помощью

Adobe ImaejeReady CS
 Содержание

глава 1. Графика Эля Web-cmpa«im.. , 6

Цифровые изображения 6
Особенности Web-графики 9
Графические форматы для Интернета 10
Какой формат использовать? : 13
Возможности оптимизации 14
Вставляем графику в HTML-код 19
Графика большого размера 28
Графический фон... , 29
«Прозрачная» графика 35
Графический текст 36
\

Глава 2.floe)T01flO&K3 Графики С ПОМОЩЬЮ

Adobe fliotoshop CS и Adobe Imageready OS Ъ1
Знакомство с рабочим окном программы 38
Создание нового рисунка 48
Рисуем геометрические фигуры '. 52
, Удаление объектов и отмена действий 61
Начинаем изготовление баннера 65
Текст для баннера 71
Создаем новые слои 77
Работаем со слоями 87
Эффекты тени и выпуклости 91
«Живые» кнопки 97
Оптимизируем и сохраняем графику 107
Обрабатываем фото... 120
Выполняем тоновую коррекцию •. 123
Повышаем резкость изображения 131
Комбинируем фотографии 133
Уменьшаем и обрезаем фото : 144
Сохраняем фото для Web 148
Прозрачные изображения 151
 Содержание
Бесшовный фон ...... ............................ ........ . ............................................................. 171
Шероховатость ................................... .- ............................................................................ 779
Шлифованная плитка .................................... . ....... . ......... . ........................ ........................ 180
Облицовочная плитка.... ........................................................ , .......................................... 18J
Разрезаем изображения и создаем изображения-карты ....................................... 183
"Создаем карту навигации .............................. . ......................................................... 197

Глава з. Аиимзция «з
Структура файла GIF89a .................................................................. .... .......................... 206
Использование GIF-анимации ..................................................... . ............................. . ...... 207

Глава 4. оЗЗеМ ЗИиМЗЦиЮ С ПОМОЩЬЮ

Adobe Imageready С5
Знакомство с палитрой «Анимация» ............... ... ............................... .................... 209
Сменяющиеся кадры ........................... , .............. ..................................................... 212
Просмотр и настройка параметров «ролика» ........................................................ 214
«Бегущие», постепенно появляющиеся и исчезающие рисунки ........... . ............. 217
Оптимизация и сохранение анимации ....... . ................ . .......................................... 220
•
Г Л А В А 1.

Графика Эля Web-страниц

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

Цифровые изображения
Изображение, которое вы видите на экране компьютерного монитора, строится из
мелких точек, называемых пикселами. Слово пиксел - это сокращение английских
слов picture element (элемент изображения). Другими словами, экран монитора -
это большая матрица, каждый пиксел которой, независимо от другого, излучает
определенный цвет, а все пикселы вместе образуют один кадр изображения.
Каждое точечное изображение содержит фиксированное количество пикселов,
поэтому высота и ширина такого изображения могут быть определены как коли-
чество пикселов, расположенных, соответственно, вдоль его вертикальной и го-
ризонтальной границ. Общее число пикселов определяет размер файла, или объ-
ем данных, содержащихся в изображении. От количества пикселов в изображе-
нии и характеристик конкретного монитора зависит, каков будет размер или
формат этого изображения на экране. Стандартный 15-дюймовый монитор
SVGA способен показать 800 пикселов по горизонтали и 600 по вертикали; со-
временные мониторы, как правило, допускают возможность настройки экранной
матрицы от 800x600 - при этом пикселы будут достаточно большими-
до 1600* 1200 - в этом случае пикселы будут очень малы.
Независимо от заданного размера печатного оттиска, размер изображения на
экране определяется количеством содержащихся в нем пикселов, а также разме-
ром монитора и заданными для него параметрами. Большой монитор, экранная
матрица которого настроена на разрешение 800x600, будет использовать более
крупные пикселы, чем маленький монитор с таким же разрешением. В большин-
стве случаев мониторы настраиваются таким образом, чтобы они могли отобра-
жать приблизительно от 72 до 120 пикселов на один дюйм.
Любое точечное изображение характеризуется двумя основными параметрами:
графическим разрешением и глубиной цвета.
Разрешение изображения или графическое разрешение определяет плотность
пикселов в изображении и измеряется в пикселах на дюйм (ppi). Чем выше раз-
решение, тем больше пикселов содержится в изображении и тем меньше размер
этих пикселов. Например, изображение размером 1x1 дюйм с разрешением 72 ppi
будет содержать 5184 пиксела - 72 пиксела в ширину х 72 пиксела в высоту = 5184.
То же самое изображение, но с разрешением 300 ppi, будет содержать 90000
 Графика для Web-страниц
значительно более мелких пикселов. Благодаря использованию большего числа
пикселов, высокое разрешение позволяет получать в изображении более мелкие
детали и более тонкие цветовые переходы.
Выбор оптимального разрешения для изображения зависит от того, каким обра-
зом вы собираетесь его отображать или тиражировать. Так, использование
слишком низкого разрешения для книжной или журнальной иллюстрации неиз-
бежно приведет к резкому падению качества печатных оттисков, вызванному
чрезмерным увеличением размера пикселов. С другой стороны, выбор неоправ-
данно высокого разрешения, превышающего физические возможности выводного
устройства, приводит к увеличению размера файла, что, в свою очередь, не может
не сказаться на скорости его обработки, печати или передачи по сети.
Размер файла, содержащего оцифрованное изображение, пропорционален размерам
и графическому разрешению изображения и задается в байтах, килобайтах (Кб)
или мегабайтах (Мб). Более тесное расположение пикселов, то есть более высо-
кое разрешение, позволяет воспроизводить более мелкие детали изображений.
В то же время это ведет к увеличению размера файла. Например, объем файла
для изображения размером 1х 1 дюйм с разрешением 200 ppi будет в четыре раза
больше, чем для изображения того же размера с разрешением 100 ppi.
Размер файла имеет большое значение при выделении дискового пространства
для его хранения. Кроме того, он в значительной мере определяет время переда-
чи файла по сети. При выборе графического разрешения вы должны находить
компромисс между желанием сохранить как можно больше полезной информа-
ции и необходимостью минимизировать размер файла.
Число экранных пикселов на единицу длины определяет разрешающую способ-
ность монитора: она зависит от размера экрана и от заданной размерности эк-
ранной матрицы. При переводе печатных оригиналов в экранные образы и рас-
чете их размеров в пикселах следует иметь в виду, что разрешающая способ-
ность большинства мониторов для Macintosh по умолчанию составляет 72 .точки
на дюйм (dpi), a PC-совместимые мониторы могут иметь разную разрешающую
способность, но обычно она составляет 96 dpi.
На экране монитора все пикселы изображения представляются с помощью опре-
деленного числа экранных пикселов. Размер экранного изображения определя-
ется разрешающей способностью монитора, и ее не следует путать с графиче-
ским разрешением, характеризующим плотность пикселов в изображении.
Например, размер изображения с разрешением 144 ppi на экране монитора с раз-
решающей способностью 72 ppi будет вдвое превышать реальный размер, посколь-
ку в каждом дюйме экрана могут быть отображены только 72 из 144 пикселов.
При выводе на монитор с разрешающей способностью 120 dpi то же самое изо-
бражение будет лишь незначительно больше оригинала, так как в этом случае в
каждом дюйме экрана смогут уместиться уже 120 из 144 пикселов.
Adobe Photoshop для Web
Другим важным параметром точечного изображения является глубина цвета,
или битовое разрешение - величина, которая определяет количество бит инфор-
мации на один пиксел. Битовое разрешение характеризует объем цветовой инфор-
мации, используемой для описания каждого пиксела изображения. Чем больше
глубина цвета, тем шире диапазон доступных цветов и тем точнее их представление
в оцифрованном изображении. Например, пиксел с битовой глубиной, равной
единице, имеет лишь два возможных состояния - два цвета: черный или белый.
Пиксел с битовой глубиной в 8 единиц имеет 28, или 256 возможных значений
цвета. Пиксел же с битовой глубиной в 24 единицы имеет 234, или 16,7 миллионов
возможных значений. Считается, что изображения, содержащие 16,7 миллионов
цветов, достаточно точно передают краски окружающего нас мира. Как правило,
битовое разрешение задается в диапазоне от 1 до 48 бит/пиксел.
Большинство цветов видимого спектра могут быть получены путем смешивания в
различных пропорциях трех основных цветовых компонентов. Этими компонен-
тами, которые называются первичными цветами, являются красный, зеленый и
синий цвета. Они образуют цветовую модель RGB - Red, Green, Blue (Красный,
Зеленый, Синий) - в которой на каждый пиксел отводится 24 бита (по 8 бит на
каждый цвет), что дает возможность закодировать 16,7 миллионов оттенков. Как
мы увидим в дальнейшем, RGB - не единственная цветовая модель, но в мони-
торах и телевизорах используется именно она. Монитор вашего компьютера
воспроизводит все цвета спектра на основе сложения трех перечисленных
цветов. При смешивании первичных цветов образуются вторичные цвета:
голубой, пурпурный, желтый. Чем выше интенсивность цвета, тем ближе он к
чистому тону, а чем меньше - тем ближе он к черному цвету. Если сложить
все три основных цвета с максимальной 'интенсивностью, равной 255, полу-
чится чисто белый цвет. И наоборот, если просуммировать три цвета нулевой
интенсивности, получится чисто черный цвет.
Объем файла, содержащего изображение, зависит не только от его размеров л
графического разрешения, но также и от глубины цвета. Учитывая, что каждый
пиксел изображения может описываться различным количеством бит - от 1 до
24 и более, можно сделать вывод, что чем больше цветовая глубина, тем больше
должен быть объем файла с изображением.
Размер графического файла, в частности, полученного в результате сканиро-
вания изображения, можно определить по следующей формуле:
F = (A/25,4xB/25,4)xD2xC/8,
где
F - размер файла без сжатия в байтах;
А - ширина исходного изображения в мм;
В -длина исходного изображения в мм;
 Графика для Web-страниц
D - графическое разрешение изображения в dpi;
С - глубина цвета в битах.
Таким образом, если вы хотите отсканировать для своей Web-страницы фото-
графию размером 10x15 см с разрешением 150 dpi и глубиной цвета 24 бита,
то результирующий файл будет иметь размер 1569378 байт или 1,49 мегабайта.

Особенности Web-графики
Оформление Web-страниц подразумевает необходимость размещения макси-
мально возможного объема информации на сравнительно небольшом простран-
стве. Вы должны исходить из того, что среднестатистический пользователь ра-
ботает в Интернете с разрешением экрана не более 800x600. Область, которая
отображается в окне браузера при таком разрешении экрана, составляет пример-
но 790x430 пикселов. Чтобы представить величину этой области, вспомните,
что значки на рабочем столе Windows имеют размер 32x32 пиксела.
Подготавливая графику для Web-страницы, необходимо помнить о небольших
размерах области, с которой вы должны работать. Изображение не должно пре-
вышать 700 пикселов по ширине и 400 пикселов по высоте. Но файл даже такой
картинки может оказаться слишком большим для передачи по каналам связи
сети. Следует также помнить и о том, что часть пользователей могут видеть на
своих мониторах только 256 цветов. Поэтому 24-битная графика, способная
обеспечить 16,7 миллиона оттенков цвета, не сможет быть оценена некоторой
частью зрителей. При этом пользователи не только не смогут увидеть на своих
мониторах всей заложенной вами цветовой гаммы, но, кроме того, изображение
может оказаться худшего качества, чем в случае использования 8-битной
графики, отображающей 256 цветов. К тому же файл окажется в три раза боль-
ше по размеру, так как, напомним, его размер пропорционален глубине цвета, и,
соответственно, будет требовать большего времени для загрузки на экран.
Использование корректной цветовой гаммы важно при разработке любого графиче-
ского проекта. Для графики Web-страниц необходимо применять цвета модели
RGB. Так как для Web-страниц устройством вывода графики является экран мо-
нитора, то здесь, как правило, соблюдается условие WYSIWIG - What You See Is
What You Get (Что видишь, то и получаешь). Говоря «как правило», мы имеем в
виду небольшие индивидуальные отличия мониторов пользователей.
На вопрос «Каков должен быть размер графического файла?», предназначенного
для Web, трудно ответить однозначно. Давайте попробуем представить себе, что
пользователь, обращающийся к вашему сайту, имеет модем с пропускной спо-
собностью 14,4 Кбит/сек, хотя подобные модемы и считаются устаревшими.
При использовании такого модема передача блока данных объемом 1 килобайт
занимает примерно 1 секунду, так что при объеме графики в 30 килобайт для ее
передачи по сети потребуется приблизительно 30 секунд. После таких расчетов
9
Adobe Photoshop для Web
возникает следующий вопрос: как долго посетитель, обратившийся к вашему
сайту, готов ждать появления на экране загружаемого изображения? Если вы
сможете ответить на этот вопрос, то сразу же определите и максимальный размер
файла с графическим изображением. Считается, что файл должен иметь такой
размер, при котором время его загрузки по сети не превышает одной минуты,
что выражается в ограничении размера величиной примерно 60 килобайт.

Графические, форматы для Интернета

Любая компьютерная информация может храниться только в определенном
формате. Каждый вид информации имеет собственные форматы. Для текста
используются одни форматы, для электронных таблиц - другие, для графики -
третьи. Формат графической информации обычно определяется программой,
в которой она создана. Для Web-графики стандартными считаются форматы
JPEG, GIF и PNG.
Формат JPEG (Joint Photographic Experts Group - Объединенная группа экспер-
тов фотографии) - самый популярный формат для хранения фотографических
изображений. JPEG является стандартом в Интернете и предназначен для со-
хранения растровых или точечных изображений со сжатием, уменьшающим
размер файла от десятых долей процента до 100 раз, за счет отбрасывания избы-
точной информации, не влияющей на отображение документа. Но практически
диапазон сжатия значительно уже: от 5 до 15 раз. Хотя алгоритм сжатия изо-
бражения этого формата и ухудшает качество, он может быть легко настроен на
минимальные, практически незаметные для человеческого глаза, потери. Распа-
ковка JPEG-файла происходит автоматически, во время его открытия. Между
качеством изображения и степенью уплотнения существует обратная зависимость:
чем более высокую степень сжатия для результирующего изображения вы зада-
дите, тем хуже будет его качество.
Существует разновидность формата JPEG, именуемая «прогрессивный JPEG»
(p-JPEG). Прогрессивный JPEG отличается от обычного тем, что при выводе
на экран изображение появляется почти сразу, но плохого качества, а по мере
загрузки качество улучшается. В формате JPEG можно хранить только полно-
цветные изображения с глубиной цвета 24 бит/пиксел. Существует также версия
JPEG для 32-битных изображений, но она пока мало распространена. Следует
отметить, что файлы изображений, сохраненные в формате JPEG с небольшим
сжатием, вполне подходят для использования в полиграфии. Но для создания
полиграфической продукции файл в формате JPEG лучше преобразовать в дру-
гой формат и далее редактировать только этот преобразованный файл, так как
при каждом сохранении JPEG-файла будет происходить новое сжатие, все более
ухудшающее его качество. Обычно формат JPEG рекомендуют использовать
для фотографий, на которых снижение качества, сопутствующее сжатию по этой
технологии, наименее заметно.

10
 Графика для Web-страниц
Формат GIF (Graphics Interchange Format - Формат для обмена графической ин-
формацией) был разработан специалистами компьютерной сети CompuServe в
1987 году с целью ускорения пересылки файлов по телефонным линиям. Требо-
валось создать такой формат, который бы содержал достаточно хорошо упако-
ванные данные. Алгоритм распаковки должен был быть при этом встроен во все
программы, которые будут работать с этим форматом: утилиты просмотра, гра-
фические редакторы и т.п. Именно такой подход и реализован в формате GIF.
Хотя с тех времен пропускная способность _модемов увеличилась во много раз,
требования к компактности файлов, передаваемых по сетевым каналам, отнюдь
не отошли на второй план. Web-страница, которая со всем своим текстом и гра-
фикой занимает свыше 40-50 килобайт, уже считаетс'я «большой» - и далеко
не каждый посетитель дождется, пока она целиком загрузится в его браузер.
Профессионализм Web-дизайнера как раз и заключается в том, чтобы отыскать
должный баланс между художественностью, информативностью страницы и ее
объемом. Вот почему формат GIF, главным достоинством которого является ма-
лый размер файлов, до сих пор сохраняет свое значение основного графического
формата World Wide Web. Из распространенных графических форматов GIF
однозначно уступает по степени сжатия только формату JPEG.
Конечно, GIF - не единственный формат, позволяющий сжимать графические
данные; кое-какие способности к сжатию есть у форматов BMP, PCX, TIFFxH
многих других. Однако GIF - один из немногих форматов, использующих алго-
ритм сжатия, почти не уступающий по эффективности программам-
архиваторам. Иными словами, GIF-файл не нужно архивировать, так как это
редко дает ощутимый выигрыш в объеме.
Как и у программ-архиваторов, степень сжатия графической информации в
формате GIF сильно зависит от уровня ее повторяемости и предсказуемости, а
иногда еще и от ориентации картинки. Поскольку GIF сканирует изображение по
строкам, то, к примеру, плавный переход цветов - градиент, направленный
сверху вниз, сожмется куда лучше, чем тех же размеров градиент, ориентиро-
ванный слева направо, а этот последний - лучше, чем градиент по диагонали.
В отличие от формата JPEG, который позволяет достичь серьезного выигрыша в
размере при минимально заметных для глаза потерях в качестве, формат GIF поль-
зуется обычным сжатием без потерь. С другой стороны, преимуществом JPEG
по сравнению с GIF является возможность хранить полноцветные изображения с
16 миллионами цветов, тогда как GIF ограничен лишь 256-цветной палитрой.
В 1989 году появилась новая, усовершенствованная версия формата GIF, в которой
используется «постепенный» показ изображения по мере его загрузки из сети.
Эта технология заключается в том, что при показе специально записанных GIF-
файлов строки изображения выводятся на экран не подряд, а в определенном
порядке: сначала каждая 8-я, затем 4-я и т.д., то есть полностью изображение

11
Adobe Photoshop для Web
показывается в четыре прохода. Такая система показа позволяет понять, что
изображено на картинке еще до того, как она полностью загрузится, что очень
важно на медленных линиях связи. Нечто подобное используется в телевидении
для передачи одного полного кадра за два прохода луча - так называемая «че-
ресстрочная развертка». Поэтому такие изображения были названы чересстроч-
ными (interlaced). Приняв из сети очередной проход чересстрочного GIF-файла,
браузер не только рисует каждую его строку на своем месте, но и заполняет ко-
пиями предыдущей строки все промежутки между строками, иначе после перво-
го прохода изображение было бы почти невидимым. Поэтому сначала чересст-
рочный GIF состоит из широких горизонтальных полос, которые постепенно
сужаются по мере проявления изображения.
В этой же версии, которую обозначают GIF89a в отличие от первой - GIF87a,
появились и другие важные усовершенствования, а именно, возможность указы-
вать прозрачный цвет, который позволяет, по сути, создавать GIF-изображения
не только прямоугольной, но и произвольной формы - пикселы рисунка, имею-
щие этот цвет, при просмотре в браузере будут невидимы.
Помимо прочих своих достоинств, формат t3IF89a позволяет хранить в одном
файле сразу несколько изображений-кадров движущегося мультипликационного
изображения. И притом указывать, сколько времени держать на экране каждое
из них, прежде чем сменить следующим. Браузеру остается лишь подчиниться
этим инструкциям, чтобы непосредственно в HTML-документе возникло дви-
жущееся и циклически повторяющееся изображение. Достоинством этого мето-
да является то, что пользователи браузеров, не умеющих пока -работать с GIF-
мультфильмами, почти не пострадают - просто вместо движущегося изображе-
ния они увидят его первый кадр.
В 1994 году стало известно, что американская фирма Unisys владеет патентом на
алгоритм сжатия, используемый форматом GIF, и это дает ей законное право
требовать выплаты отчислений у производителей всех коммерческих программ-
ных продуктов, использующих данный формат. Такое положение стало причи-
ной начала постепенного вытеснения GIF с арены популярных графических
форматов. На смену GIF приходит формат PNG. Однако способность GIF содер-
жать анимацию все еще держит его на поверхности: анимационные GIF-файлы
широко используются в Интернете для создания рекламных баннеров.
Формат PNG (Portable Network Graphics - Переносимая сетевая графика) поддер-
живается поздними версиями браузеров, например, Netscape Navigator, начиная
с версии 4, но широкого распространения пока не получил. Этот формат, осно-
ванный на вариации алгоритма сжатия без потерь качества, в отличие от GIF
сжимает растровые изображения и по горизонтали, и по вертикали, что обеспе-
чивает более высокую степень сжатия; кроме того, он поддерживает цветные
графические изображения с глубиной цвета до 48 бит включительно.
• ' I . ' . ' '

12
 Графика для Web-страниц
PNG реализует гораздо более эффективный алгоритм чересстрочное™. Достаточно
сказать, что первый проход, дающий общее представление об изображении,
занимает в PNG не одну восьмую исходного файла, как в GIF, а всего лишь одну
шестьдесят четвертую - и, тем не менее, распознаваемость картинки при этом
заметно лучше.
PNG позволяет хранить полную информацию о степени прозрачности в каждой
точке изображения в виде так называемого альфа-канала. Каждый пиксел PNG-
файла, вне зависимости от его цвета и местоположения, может иметь любую
градацию прозрачности: от нулевой - полная непрозрачность, до абсолютной
невидимости.
Чтобы сгладить различия в яркости дисплеев, существующие между разными
типами компьютеров и, соответственно, между создаваемыми на них изображе-
ниями, PNG позволяет хранить в файле исходный коэффициент яркости того
дисплея, на котором изображение было создано. Это дает возможность про-
граммам просмотра перед выводом на экран регулировать яркость изображения,
приспосабливая ее к особенностям данной видеосистемы - так называемая
гамма-коррекция.
PNG-формат не дает возможности создавать анимационные ролики. Поэтому
для хранения анимации или нескольких изображений в одном файле использу-
ется вариация формата PNG - формат MNG (Multiple Network Graphics - Множе-
ственная сетевая графика). В настоящее время разработчики формата PNG рабо-
тают над новым форматом PNP (Portable Network Photography - Переносимая
сетевая фотография), произносится «пинап», который предназначен для хране-
ния фотографических изображений и обладает мощным алгоритмом сжатия с
потерей качества.

Какой формат использовать?

Вопрос о том, в каком формате хранить нужное вам изображение, не так прост,
как кажется. Очень часто можно прочитать, что фотографические изображения,
поскольку они имеют более 256 цветов, следует хранить в формате JPEG, а ри-
сунки в формате GIF. Это правило действительно верно в большинстве случаев.
Однако могут быть и исключения. В ряде случаев, если вам требуется особое
качество изображения, следует предпочесть GIF. Дело в том, что главной поме-
хой в использовании JPEG является то, что изображения, сохраненные в этом
формате, в отличие от GIF имеют визуально заметные искажения. Они тем за-
метнее, чем больше величина сжатия и меньше геометрические размеры деталей
изображения. Считается, что если исходный размер файла сжимается до 10 раз,
то искажения будут не очень заметны. В то же время, если в достаточно «интел-
лектуальной» программе уменьшить количество цветов фотографии до 256,
этих 256 цветов в большинстве случаев хватит на то, чтобы изображение не
проиграло в визуальном восприятии.
13
Adobe Photoshop для Web
Поэтому в том случае, когда для вас существенно, чтобы картинка воспроизво-
дилась с минимальными искажениями, сделайте два файла - в GIF и JPEG-
форматах и посмотрите, какой файл при устраивающем вас качестве займет
меньше места на диске.
.
Во всяком случае, имейте в виду следующие обстоятельства:
• Чем больше на рисунке мелких и контрастных деталей, тем сильнее будут
заметны искажения, вносимые при сжатии в формате JPEG.
• Чем крупнее геометрические размеры изображения в пикселах и чем ниже
контрастность снимка, тем искажения JPEG будут меньше заметны.
• Чем больше на рисунке контрастных и мелких деталей, тем более крупный
размер файла получится при сохранении в формате GIF.
• Чем большую площадь занимают однородно окрашенные участки и чем
большую горизонтальную протяженность имеют детали рисунка, тем мень-
ший размер займет на диске файл GIF.
• Файлы, записанные в чересстрочном (interlaced) формате GIF и в прогрессив-
ном формате JPEG, то есть так, чтобы изображение «проявлялось» постепен-
но, будут, при прочих равных условиях, иметь больший размер.
Но есть две области, где GIF - вне конкуренции. Первая - это создание анимиро-
ванных, то есть движущихся изображений. На самом деле анимированный GIF -
это несколько графических изображений, записанных в один файл. Последова-
тельный показ этих изображений создает иллюзию движения. В файле GIF
хранится информация о том, сколько раз в секунду надо менять изображение, в
какой последовательности показывать картинки и т.д. Для создания анимиро-
ванного изображения вы в любом графическом редакторе рисуете картинки,
из которых будет строиться анимация, а затем загружаете их в специальную
программу подготовки анимации, где указываете, как эти, картинки должны
чередоваться. Таких программ существует большое количество.
Другое незаменимое свойство GIF - это возможность получения прозрачного
фона изображения, то есть такого фона, сквозь который видно все, что под ним
находится. Создавать GIF с прозрачным фоном может любой профессиональный
графический редактор, например, Adobe Photoshop.

возможности оптимизации
Чтобы любое изображение можно было использовать на Web-странице, его не-
обходимо предварительно оптимизировать, уменьшив до минимума размер файла
и, следовательно, время загрузки по сети так, чтобы качество изображения при
этом заметно не ухудшилось. Оптимизация - это, по сути, компромисс между
размером файла и качеством изображения.
' *' \ •
14
 Графика для Web-страниц
В формате JPEG изображение сохраняется с глубиной цвета 24 бит и исполь-
зуется сжатие с потерей информации. У него не так уж много способов опти-
мизации, точнее сказать, два:
• использование прогрессивной развертки;
• оптимальный коэффициент сжатия.
Использование прогрессивной развертки не сказывается на размере изобра-
жения, но заметно при загрузке. В случае записи изображения в стандартном
формате вывод на экран осуществляется горизонтальными полосами, и до за-
грузки всего изображения невозможно определить его смысл. Напротив, при
записи файла в прогрессивном формате изображение появляется сразу целиком,
но в грубой форме, и затем постепенно улучшается. Это дает посетителям сайта
возможность сразу же оценить изображение и решить, стоит ли ожидать его окон-
чательной загрузки, что позволяет сэкономить немного времени при просмотре
страниц. Общее время загрузки страницы при этом не уменьшается, возникает
лишь иллюзия его уменьшения. Прогрессивная развертка JPEG поддерживается
всеми браузерами, но не каждый графический пакет может записывать в этом
формате. Поэтому проверьте свои программы на возможность сохранять файлы
с прогрессивной разверткой. Последние версии Photoshop умеют это делать.
Оптимальный коэффициент сжатия. Это - другая возможность оптимизации
изображения в- формате JPEG. Для осуществления такой оптимизации нужен
графический пакет или утилита, которая позволяет регулировать степень сжатия
изображения. Adobe Photoshop позволяет выполнить такую регулировку. Другие
программы, например, Photo- Paint и PaintShopPro, также позволяют плавно регу-
лировать степень сжатия в интервале значений от 1 до 255.
Как определить оптимальную степень-сжатия? Для этого нужно сохранить изо-
бражение при нескольких значениях коэффициента сжатия, а затем внимательно
рассмотреть его. Критерием потери качества будут так называемые «дрожащие
контуры», наиболее заметные в местах контрастных переходов, и появление пя-
тен в областях с плавными переходами. Тот коэффициент сжатия, при котором
искажения еще не видны, но с увеличением коэффициента на одну ступеньку
становятся заметными, и будет оптимальным. Размер файла при таком коэффи-
циенте сжатия будет минимально возможным при сохранении качества.
Формат GIF сильно отличается от JPEG и использует совершенно другие мето-
ды оптимизации. Он предназначен для хранения изображений с количеством
цветов не более 256 и использует сжатие без потерь по методу LZW, который
применяется в программах-архиваторах. Методы оптимизации можно разделить
на следующие типы, исключая оптимизацию файлов с анимацией:
• уменьшение количества цветов;
• оптимизация палитры изображения;

15
Adobe Photoshop для Web
• стилизация изображения;
• изменение размеров изображения;
• фрагментарная оптимизация;
• оптимизация «прозрачных» изображений;
• использование чересстрочной развертки.
Теперь разберемся по порядку с этими методами и приемами оптимизации.
Уменьшение количества цветов. Для большинства изображений, не являю-
щихся фотографическими, количество необходимых для воспроизведения цве-
тов часто меньше 256. Лишние цвета можно убрать из изображения, тем самым
уменьшив его размер. Это возможно потому, что формат GIF поддерживает
размер палитры меньше 256 цветов. Теоретически мы' можем задать любое
число цветов палитры от 2 до 256, например, 45 цветов или 99. Практически
же количество цветов в изображении выбирается из ряда: 2, 4, 8, 16, 32, 64,
128, 256. Это связано с тем, что для представления цвета используется всегда
целое число бит, а приведенный выше ряд является рядом максимального ко-
личества цветов при использовании от 1 до 8 бит на пиксел. В случае, если вы
используете в рисунке, допустим, только 97 цветов, для сохранения-одного
пиксела все равно будет использовано 7 бит, как и при использовании
128 цветов. Поэтому при оптимизации количества цветов нужно ориентиро-
ваться на приведенный выше ряд. Это позволит получить более качественную
картинку. Уменьшив количество цветов с 256 до' 32, можно иногда добиться
уменьшения размера файла в 2 раза без заметной потери качества.
Оптимизация палитры изображения. Преобразование полноцветного изобра-
жения в индексное, т.е. уменьшение количества цветов до 256 является важной
операцией, и здесь следует сказать несколько слов о том, как это делается совре-
менными графическими пакетами.
Палитра конечного изображения может быть либо фиксированной, либо опти-
мизированной. В первом случае графический редактор просматривает каждую
точку изображения и подбирает ближайшую ей по цвету из палитры. Этот спо-
соб дает самые худшие результаты с точки зрения правильности воспроизведе-
ния цветов. Попробуйте, например, преобразовать фотографию красной розы в
индексное изображение, используя палитру, содержащую оттенки зеленого. Это,
конечно, крайний случай, но даст вам возможность оценить качество преобразо-
вания с использованием фиксированной палитры. Тем не менее, данный способ
применяется в основном для того, чтобы изображения приемлемо выглядели на
мониторах с малым количеством цветов - 16 или 256. Обычно в этом случае
пользуются так называемой безопасной палитрой, состоящей из набора часто
используемых цветов и их оттенков. Безопасная палитра гарантирует, что изобра-
жения, использующие эту палитру, будут одинаково показаны всеми браузерами.
16
 Графика для Web-страниц
Во втором случае, когда используется оптимизированная палитра, графический
редактор вначале анализирует рисунок и составляет список всех используемых в
изображении цветов. Далее, на основании частоты появления цветов, составля-
ется палитра, которая называется оптимизированной. После этого рисунок снова
просматривается, и цвет пиксела „изменяется на ближайший из палитры. Этот
способ дает гораздо лучшие результаты, и именно его следует применять, если у
вас нет причин для использования фиксированной палитры.
При оптимизации конкретного изображения задача состоит в том, чтобы выбрать
оптимальное количество цветов в палитре. Здесь уместно сказать о способе уве-
личения количества используемых цветов при их недостатке - так называемом
смешивании (dithering). При этом области, которые в оригинале были залиты од-
нородным цветом, после преобразования заполняются смесью пикселов разных
цветов, разбросанных по случайному закону. Как правило, каждый отсутствую-
щий в редуцированной палитре цвет передается пикселами двух самых близких к
нему цветов новой палитры. В результате изображение приобретает характерную
зернистую, шероховатую фактуру. Очень часто смешивание является единствен-
ным способом хоть сколько-нибудь адекватно передать исходные цвета с помо-
щью палитры, в которой этих цветов уже нет. Например, у нас есть 16 стандарт-
ных чистых цветов, а нам нужен отсутствующий оранжевый цвет. В таком случае
можно составить его из красных и желтых точек, разместив их в шахматном по-
рядке. Издалека будет казаться, что это сплошной оранжевый цвет. Это классиче-
ский пример смешивания. Его использование при преобразовании изображений
может дать очень хорошие результаты. Но с точки зрения оптимизации размеров
файла происходит совсем обратное. Смешивание может увеличить размер файла,
причем довольно существенно - он может стать больше, чем до оптимизации.
А все дело в способе хранения изображения форматом GIF. Изображение перед
сохранением на диске подвергается сжатию методом LZW, а основная особен-
ность этого метода заключается в том, что сжатию лучше всего поддаются области,
заполненные однородным цветом, и хуже всего - области, состоящие из набора
разноцветных точек. Смешивание же как раз основано на том, что получает не-
достающие цвета путем «перемешивания» точек разных цветов.
Все существующие ныне Web-браузеры, включая Netscape Navigator и Micro-
soft Internet Explorer, вынуждены при выводе графических файлов на экран
изменять их палитру. Во-первых, им приходится приводить к общему знаме-
нателю палитру всех файлов, включенных в одну страницу. Поскольку неко-
торые компьютерные мониторы не могут отобразить больше 256 цветов од-
новременно, приходится идти на компромиссы. Во-вторых, в некоторых слу-
чаях браузеру приходится также приспосабливать палитру файла к фиксиро-
ванной системной палитре. Чтобы эти неизбежные преобразования не приво-
дили к совсем уж неприемлемым результатам, все современные браузеры
пользуются при замещении палитры смешиванием. Это значит, что даже если
ваше изображение состоит из идеально гладких цветовых плоскостей, но его
17
Adobe Photoshop для Web
палитра почему-либо не может быть отображена напрямую, то в браузере это
изображение неизбежно станет шероховатым.
Однако для очень многих изображений, составляющих нередко основу дизайна
страницы, смешивание крайне нежелательно. Что же делать? Выход, хоть и не
самый лучший, есть. Оказывается, существует набор из 216 цветов, которые с
гарантией никогда не подвергаются смешиванию ни в Netscape Navigator, ни в
Internet Explorer, ни в Windows, ни в Macintosh. Если ваше изображение будет
содержать только цвета из этого набора или, по крайней мере, к этому набору
будут относиться цвета, занимающие наибольшую площадь, в браузере оно бу-
дет выглядеть намного чище и привлекательнее. Эту палитру часто называют
безопасной (browser-safe palette). О ней мы уже упоминали выше.
Воспользоваться безопасной палитрой не поздно, даже когда графика уже готова.
Однако, если вы хотите иметь больший контроль над цветовой стороной своего
дизайна, те графические элементы, для которых хотелось бы избежать смешива-
ния, лучше с самого начала рисовать с использованием безопасной палитры.
Безопасная палитра поддерживается последними версиями Adobe Photoshop.
Стилизация изображения. Для уменьшения количества используемых цветов в
изображениях, содержащих фотографические сюжеты, возможно применение
стилизации фотографии. Для этого можно воспользоваться такими приемами,
как тонирование изображения и применение художественных фильтров, имити-
рующих рисунки. Фотографии, обработанные таким способом, будут сжиматься
лучше и требовать палитру, содержащую менее 256 цветов.
Изменение размеров изображения. Этот метод оптимизации основан на изме-
нении размеров рисунка. Его нельзя применять к обычным рисункам, но он
очень хорошо подходит для рисунков, состоящих из элементов типа линий и
однородных областей. Допустим, нам понадобился рисунок, представляющий
собой черный квадрат размером 100x100 пикселов. Для уменьшения размера
файла достаточно сделать так называемый однопикселный, т.е. размером 1x1
пиксел, рисунок GIF черного цвета и, как обычно, вставить его в HTML-файл, но
размеры картинки указать те, что нужны нам — 100x100. О том, как указывать
размеры рисунка, мы поговорим в следующих разделах. Браузер сам растянет
наш пиксел до нужных размеров, и, таким образом, будет достигнута значитель-
ная экономия в объеме файла. Подобным же образом можно использовать одно-
пикселные рисунки других цветов, но наибольшую пользу может принести
прозрачное однопикселное изображение GIF. С его помощью удобно задавать
«пустышки» на страницах, абзацные отступы, фиксировать минимальную ширину
или высоту таблицы и делать другие полезные вещи.
Методом изменения размеров очень удобно создавать графические разделитель-
ные линии. Достаточно нарисовать ее сечение в виде квадрата со стороной в
один пиксел, а в HTML-документе указать нужную ширину линии или высоту,
если линия вертикальная.
18
 Графика для Web-страниц
Фрагментарная оптимизация. Фрагментарная оптимизация применяется в слу-
чае, если у вас есть некоторое большое изображение, содержащее сильно отли-
чающиеся по количеству цветов области. В этом случае изображение можно
разрезать на фрагменты и поместить их в таблицу, тогда в браузере оно будет
выглядеть как единое целое. Теперь каждый фрагмент исходного рисунка опти-
мизируется отдельно. Для фрагментов, содержащих мало цветов, вполне может
хватить палитры в 8 или 16 цветов, а для богатых цветами фрагментов можно
использовать полную палитру в 256 цветов или сохранять их в формате JPEG.
Этот способ позволяет уменьшить объем, занимаемый исходным файлом, при-
мерно раза в 2-3, в зависимости от конкретного изображения. Кроме того,
изображение будет появляться на экране более равномерно, так как все фраг-
менты будут загружаться параллельно. Однако, если количество фрагментов
превысит 10, то возможного выигрыша не получится, так как каждый фрагмент
должен будет хранить свою копию палитры и служебной информации.
Оптимизация .«прозрачных» изображений. Формат GIF позволяет сохранять
так называемые «прозрачные» изображения. На самом деле, GIF не поддержива-
ет прозрачность в изображениях - альфа-канал - он лишь позволяет назначить
одному любому цвету в палитре атрибут прозрачности. Если браузер рисует на
экране такое изображение, то, встречая «прозрачный» пиксел, он просто игно-
рирует его и не показывает на экране. Само по себе это хорошо, но в случае ис-
пользования метода сглаживания краев изображения (anti-aliasing) и последую-
щего сохранения в формате GIF, возникает проблема появления ореола вокруг
прозрачного изображения в случае, если GIF показывается на фоне, отличном от
того, на котором происходило сглаживание и который стал прозрачным. Един-
ственным способом уменьшения проявления этого эффекта является назначение
прозрачности цвету, близкому к цвету фона, на котором будет использоваться
GIF, и проведение сглаживания на этом же фоне.
Использование чересстрочной развертки. Версия GIF89a позволяет сохра-
нять файлы с использованием чересстрочной развертки. При использовании это-
го способа строчки, составляющие изображение, перемежаются, и при загрузке
браузер вначале показывает каждую 8 строчку, потом каждую 4, каждую 2, и,
наконец, загружается полное изображение. При этом посетитель вашей Web-
страницы сможет понять, что же нарисовано на данной картинке, не дожидаясь
ее полной загрузки. Это очень удобно.

графику 6 ИТМ1^кос)
В качестве примера мы подготовили простые Web-страницы вымышленной
фирмы «ГЕОТОН», которая работает в области автоматизированных систем
управления. Цель сайта компании «ГЕОТОН» - рассказать миру о себе, сфере
деятельности, найти партнеров и заказчиков.

19
Adobe Photoshop для Web
Архив с примерами для книги, можно загрузить по ссылке
www.3st.ru/book/web/ex.zip. Загрузите и распакуйте этот архив в какую-нибудь
папку на вашем жестком диске, например, Web.
>• Среди полученных файлов найдите index.html и дважды щелкните на нем
мышью. Запустится браузер и вы увидите начальную страницу сайта компании
«Геотон» (Ошибка! Источник ссылки не найден.).

Главная
Добро пожаловать на
Чем мы страничку компании ГЕОТОН!
О нашей

Нокосчн
Оборудование
Спец. ПО Здесь Вы узнаете
Ниши о программных продуктах нашей
партнеры
1
компании и об оборудовании, которое мы
лист производим
Связь с
компанией

Ц|3 My Computer ^1

Рис. 1.1. Начальная страница сайта

Сайт очень простой и в дальнейшем мы будем совершенствовать его графиче-
ское оформление.
Среди полученных файлов вы также найдете geoton.html.
>• .Дважды щелкните на файле geoton.html. Будет запущен ваш браузер и Web-
страница будет выглядеть как на Ошибка! Источник ссылки не найден..
>• Запустите программу Блокнот (Notepad), нажав кнопку Пуск (Start) на Пане-
ли задач (Taskbar) и выбрав из появившегося меню команду Программы *
Стандартные * Блокнот (Programs * Accessories * Notepad).
> Откройте в программе Блокнот (Notepad) файл geoton.html из папки Web.
И посмотрите код HTML-страницы.
Код, который отображает единственные рисунок на Web-странице выглядит так:
<img src=CLOUD.GIF border=l>

20
 Графика для Web-страниц

Добро пожаловать на страничку

компании ГЕОТОН!

Здесь Вы узнаете о нашей деятельности, о

програмлшых продуктах нашей компании и об
оборудовании, которое мы производим
м
"1| !| 12
Рис. 1.2. Web-страница из файла geoton.html
Для вставки изображения в Web-документ используется одиночный тег
<img> с атрибутом src, значение которого соответствует имени вставляемо-
го файла или его адресу в Интернете. В нашем случае путь, к файлу рисунка
указывается относительно текущего каталога, т.е. каталога в котором находится
файл geoton.html. Таким образом, для правильного отображения рисунка на
Web-странице, файл CLOUD.GIF должен находится в том же каталоге, что и
файл geoton.html.
Если бы обращение к рисунку выглядело так:
<img src=images\CLOUD.GIF border=l>
то это означало бы, что рисунок находится в папке images, которая находится в
том же каталоге, что и файл geoton.html.
С помощью необязательного, атрибута <border> включается отображение
рамки вокруг рисунка. Значение 1 для этого атрибута создает рамку толщи-
ной 1 пиксел.
Для задания перехода по гиперссылке в языке HTML используются теги
<ах/а> с атрибутом href, значением которого является адрес перехода.
В качестве адреса может использоваться имя файла другого документа или
URL-адрес. Поэтому код:
<а href= I I spisok.html"ximg src=CLOUD.GIF border=lx/a>
означает, что рисунок CLOUD.GIF служит ссылкой для перехода на страницу
spisok.html.
Так как ссылка на рисунок находится между тегами <centerx/center>,
то рисунок выравнивается по центру Web-страницы.

21
Adobe Photoshop для Web

Операционная система Windows не различает регистр букв в названиях

имен файлов, но операционные системы семейства Unix различают
его, поэтому следует тщательно следить за тем, чтобы имя файла в
теге указывалось с соблюдением регистра. Начинающие Web-
дизайнеры часто недоумевают: почему рисунок был виден на странице
при тестировании на локальном компьютере и не появляется при за-
грузке страниц с удаленного сервера. А все дело в том, что они указали
cloud.gif, а на диске хранится CLOUD.GIF.

Рассмотрим теперь более подробно приемы работы с графикой.

Напомним, что, вставляя рисунок в код HTML, мы использовали его относи-
тельный адрес, т.е. адрес, который определяется относительно текущей папки
данного компьютера. Но в ссылке на рисунок можно указать также и абсолют-
ный адрес, т.е. адрес файла с изображением, который находится на любом Web-
узле в Интернете. Посмотрим, как вставить в HTML-код файла geoton.html
абсолютную ссылку на рисунок CLOUD.GIF, хранящийся не в папке Web вашего
компьютера, а в каталоге вашего сайта где-нибудь в Интернете.
>- Откройте в программе Блокнот (Notepad) файл geoton.html из папки Web.
Нам нужно в теге <img>, вставляющем рисунок на Web-страницу, изменить ат-
рибут src, который имеет виД src=CLOUD.G!F, на URL-адрес этого же рисунка,
но находящегося на вашем сайте.
> Отредактируйте тег <img> файла geoton.html так, чтобы значением атрибута
src был адрес файла CLOUD.GIF, находящегося на вашем сайте, например:
src="http: / /www .inysite. ru/CLOUD. GIF".
Напомним, что URL-адрес файла включает протокол доступа к WWW - http://,
имя сайта в Интернете, например, www.mysite.ru и имя файла - CLOUD.GIF,
отделенное от имени сайта косой чертой /. В общем случае перед именем файла
могут присутствовать также имена каталогов. Если у вас пока нет своего сайта,
то воспользуйтесь следующей учебной ссылкой:
src="http:/ /www. 3st.ru/book/web/CLOtID. GIF" *'

> Сохраните файл geoton.html, выбрав команду меню программы Блокнот

(Notepad) Файл » Сохранить (File * Save).
> Загрузите браузер и откройте в его окне файл geoton.html из папки Web
(Рис. 1.3).
Как видите, пока ваш компьютер не подключен к Интернету, рисунок в окне
браузера не отображается. Вместо него выводится только рамка, толщина
которой определена атрибутом border. Чтобы увидеть рисунок, необходимо
подключиться к Интернету.
22
 Графика для Web-страниц

Добро пожаловать на страничку

компании ГЕОТОН!

Здесь Вы узнаете о нашей деятельности, о

программных продуктах нашей компании и об
оборудовании, которое мы производим

| My Computer

Рис. 1.3. Отображение рисунка с абсолютной ссылкой

при отсутствии подключения к Интернету
v Не закрывая окно браузера, установите связь с провайдером.
> Когда связь, будет установлена, нажмите кнопку |й[ - Обновить (Refresh) на
панели инструментов браузера Internet Explorer или кнопку Обновить теку-
щую страницу (Reload Current Page) на той же панели браузера Netscape.
Браузер подключится к вашему сайту и загрузит рисунок CLOUD.GIF.
Возможно, если ваша линия связи недостаточно быстрая, вы увидите, что изобра-
жение как бы постепенно «выкристаллизовывается» из «бесформенной массы».
Так как данный рисунок сохранен с использованием чересстрочной развертки,
то браузер отображает его постепенно, по мере загрузки: сначала показывается
каждая в.осьмая строка пикселов, затем - каждая четвертая, далее - каждая вто-
рая и, наконец - все оставшиеся нечетные строки. Приняв из сети очередную
порцию данных, браузер не только рисует каждую строку пикселов на своем
месте, но и заполняет копиями предыдущей строки все промежутки между стро-
ками. Поэтому вначале чересстрочный рисунок формата GIF состоит из широ-
ких горизонтальных полос, которые сужаются по мере появления изображения.
>. Прервите связь с Интернетом.
Таким образом, мы вставили изображение на Web-страницу, указав в теге <img>
в качестве значения атрибута src абсолютный адрес файла с рисунком.
>• Запустив программу Блокнот (Notepad) и отредактируйте файл geoton.html,
так чтобы рисунок CLOUD.GIF снова загружался с диска вашего компьютера:
<img src=CLOUD.GIF border=l>

Для тех браузеров, которые не могут отображать рисунки, в языке HTML преду-
смотрен для тега <img> специальный атрибут alt, определяющий альтернатив-
ный текст, который будет выводиться вместо рисунка. Этот текст должен ото-

23
Adobe Photoshop для Web
бражать смысл рисунка, заменяя собой изображение. Атрибут alt желательно
«спользовать еще и потому, что многие пользователи отключают в браузере
функцию отображения рисунков, чтобы ускорить загрузку Web-страниц. В таком
случае пользователь должен видеть альтернативный текст, заменяющий рисунок.
Кроме того, существуют специальные речевые браузеры для незрячих, в кото-
рых текст выводится голосом.
Вставим в тег <img> файла geoton.html атрибут alt со значением "Область
нашей деятельности", которое в данном случае раскрывает смысл рисунка и
ссылки. Значение атрибута alt должно быть заключено в кавычки. Этот текст
будет появляться в браузерах, не позволяющих показывать изображения на
месте рисунка.
> Отредактируйте файл geoton.html, вставив в тег <img> относительную ссыл-
ку на файл с рисунком CLOUD.GIF, находящий в папке Web вашего компью-
тера, и атрибут alt="Область нашей деятельности" так, чтобы элемент,
содержащий указанный тег, принял следующий вид:
<centerxa href=spisok.htmlximg src=CLOUD.GIF border=l
alt="O6nacTb нашей деятельности"х/ах/сех^ег>
Теперь, когда относительный адрес рисунка указывает на файл CLOUD.GIF, на-
ходящийся в папке Web вашего компьютера, рисунок сразу показывается в окне
браузера после обновления изображения.
>• Установите указатель мыши на рисунке в окне браузера так, чтобы указатель
мыши принял форму •fo. Под ним появится рамка с текстом, определенным в
качестве значения атрибута alt (Рис. 1.4).
ания ГЕГОТОН - Microsoft Internet Explorer - [Working Offline]
Die Hdit View Favorites Jools JJelp
•l-Bnds * "* - tBFnviirlles <jHislory |
Asiare»»[fiC:WDb\Buolon,tiliBl j <»Go j Links

Добро пожаловать на страничку

компании ГЕОТОН!

Здесь Вы узнаете о нашей дея/пельноспш, о

программных продуктах нашей компании и об
оборудовании, которое мы производим
В
Q Da Ь-Compuler

Рис. 1.4, Отображение альтернативного текста

24
 Графика для Web-страниц
Как видите, даже когда рисунок отображается в браузере, значение атрибута alt
выводится на экран при установке указателя мыши на изображении. Это значит,
что с помощью данного атрибута можно также определять подписи для рисунков.
Посмотрим теперь, что происходит, если браузер не показывает графику. Для
этого выключим ее отображение.
v В браузере Internet Explorer выберите команду меню Сервис * Свойства
обозревателя (Tools * Internet Options). На экране появится диалог Свойст-
ва обозревателя (Internet Options).
>• В браузере Internet Explorer щелкните мышью на ярлыке Дополнительно
(Advanced), чтобы перейти на соответствующую вкладку.
х В браузере Internet Explorer сбросьте флажок Отображать рисунки (Show
pictures). Чтобы найти его, воспользуйтесь вертикальной полосой прокрутки
(Рис. 1.5).

Общие Безопасность Конфиденциальность

Содержание Подключения J Программы | 'Дополнительно

Параметры:

0 Проверять аннулирование сертификатов издателей

П Проверять аннулирование сертификатов серверов (требует
П Удалять все файлы из папки временных файлов Интернету
^ Мультимедиа
0 Включить автоматическую подгонку размеров изображениГ"
0 Включить панель изображений (требуется перезапуск)
0 Врспроизеодить анимацию на веб-страницах
121 Воспроизводить видео на веб-страницах
0 Воспроизводить звуки на веб-страницах
П Не отображать оперативное медиа-содержимое на панели

Q Показывать рамки рисунков

0 Улучшенная передача цветовых оттенков
@ Настройка HTTP 1.1
0 Использовать HTTP 1.1
Г] Использовать HTTP 1.1 через прокси-соединения IT.
«I г • ш
| восстановить значения по умолчанию

OK j Отмена | ) Применить

Рис. 1.5. Вкладка Advanced (Дополнительно) диалога Internet Options

(Свойства обозревателя) программы Internet Explorer
> В браузере Internet Explorer нажмите кнопку Применить (Apply).
>• Нажатием кнопки ОК закройте диалог Свойства обозревателя (Internet
Options) или Параметры (Preferences).
Теперь, когда отображение графики в программе просмотра выключено, посмот-
рим, что мы увидим вместо рисунка.
25
Adobe Photoshop для Web
>• Обновите изображение в окне браузера, нажав соответствующую кнопку на
панели инструментов. Вы увидите, что вместо рисунка в рамке отображается
текст, который определен атрибутом alt (Рис. 1.6).

-l-Back т •* -• О & (Я {(Search & Favorites OMislory

Добро пожаловать на страничку

компании ГЕОТОН!
I Щ Область нашей деятельности I

Здесь Вы узнаете о нашей деятельности, о

программных продуктах нашей компании и об
оборудовании, которое мы производим

JJDone ijljll My Computer

Рис. 1.6. Текст, отображаемый вместо рисунка

Специальные атрибуты width (ширина) и height (высота) тега <img> позволя-
ют программам просмотра зарезервировать место на экране для рисунка еще до
того, как он будет передан по сети. Это дает возможность пользователю начать
чтение документа, пока передача данных еще продолжается.
Добавим в тег <img> атрибуты width=613 и height=60, значения которых со-
ответствуют фактической ширине и высоте рисунка в пикселах. Размеры изо-
бражения можно определить с помощью графического редактора, например,
Adobe Photoshop. Об этом мы поговорим в одной из следующих глав.
> Отредактируйте в файле geoton.html тег <img>, добавив указанные атрибуты
так, чтобы этот элемент принял следующий вид:
<centerxa href =" spisok.html "ximg src=CLOUD.GIF alt=" Область
нашей деятельности" border=l width=613 height=60x/ax/center>
*B окне браузера вы увидите, что рисунку, хотя он и не показывается, выделено
столько места, сколько указано значениями атрибутов width (ширина) и height
(высота) (Рис. 1.7).
>• Восстановите отображение графики в окне программы просмотра Web-
страниц.
Многие браузеры, хотя и не все, могут масштабировать изображение в соответствии
с атрибутами width и height. Проверим это, уменьшив значения данных атри-
бутов в шесть раз. Соответственно должен измениться и размер рисунка на экране.

26
 Графика для Web-страниц

•* '" & Щ (Я QSearch CSFovoritoe «^History l&» в В

Добро пожаловать на страничку

компании ГЕОТОН!
Область нашей деятельности

Здесь Вы узнаете о нашей деятельности, о

программных продуктах нашей компании и об
оборудовании, которое мы производим
У£ My Computer

Рис. 1.7. Место для рисунка зарезервировано

> Отредактируйте элемент HTML, содержащий тег <img>, изменив в нем зна-
чения атрибутов: width=102 height=10 так, чтобы данный элемент принял
следующий вид:
<centerxa href = "spisok.html"ximg src=CLOUD.GIF а!Ь="Область
нашей деятельности" border=l width=102 height=10x/ax/center>
Когда вы обновите изображение в браузере, то увидите примерно то же, что и на
Рис. 1.8.

льша<цм1^Ч1та11Г|1жт11шшш1шги11 - (Working OlHirml

tiki .£dil VKJW Favorites lools M»lfi

J-Back ''•*• -г ffli И и I ttSeorch Э Favorite» GJHiMoiy | 81" в ЕЯ

»'i [Q C:\WabViBolon.hlinl

Добро пожаловать на страничку

компании ГЕОТОН!

Здесь Вы узнаете о нашей деятельности^ о

программных продуктах нашей компании и об
оборудовании, которое мы производим
£) Dorve

Рис. 1.8. Размер рисунка уменьшен в шесть раз

Однако такое масштабирование не имеет особого смысла и не рекомендуется,
так как при уменьшении значений атрибутов width и height размер файлов с

27
Adobe Photoshop для Web
графикой не уменьшается, и время их загрузки не изменяется. Уменьшать раз-
меры изображения нужно в графическом редакторе. При увеличении же мас-
штаба рисунка его качество обычно заметно ухудшается. Следует помнить, что
атрибуты width и height не предназначены для автоматического изменения
размера изображения программами просмотра и должны использоваться для
указания реального размера рисунка. Вместе с тем, увеличение размеров можно
применять с целью оптимизации рисунков, состоящих из однотонных областей
или линий, как об этом говорилось выше.

Графика большого размера

Часто бывает необходимо вставить на Web-страницу рисунок или фотографию
большого размера. Очевидно, что файл, содержащий подобный рисунок или фото-
графию, будет большого объема, и его загрузка потребует значительного времени.
Такой рисунок большого размера BG.JPG вы можете в папке, в которую вы рас-
паковали архив с примерами, загруженные из Интернета. Вставим этот рисунок
в документ geoton.html, поместив его в начале Web-страницы.
>• В файле geoton.html, открытом в окне программы Блокнот (Notepad), вставьте
пустую строку после открывающего тега <body> и введите следующий код
HTML:
<img src=BG.JPG>
> Сохраните файл geoton.html на диске.
>• Обновите изображение в окне браузера.
Вы увидите, что изображение, представляющее собой фотографию девушки на
сером фоне, занимает почти все окно браузера в начале Web-страницы (Рис. 1.9),
а текст документа и рисунок CLOUD.GIF располагаются в нижней части страницы.

Рис. 1.9. Загруженный рисунок

28
 Графика для Web-страниц
Так как данный файл записан в стандартном формате JPEG, то в отличие от ри-
сунка, сохраненного в формате GIF89a, вывод на экран при загрузке через Интер-
нет будет происходить горизонтальными полосами. И до окончания загрузки
трудно определить содержание рисунка. Если бы данный рисунок был записан в
прогрессивном формате JPEG, то изображение появлялось бы сразу, целиком, в
грубой форме и постепенно бы прояснялось. Очевидно, такой характер загрузки
был бы удобней, так как позволил бы быстрее оценить изображение. Идеальной
была бы возможность быстро знакомиться с содержимым графических файлов, не
загружая их полностью. В некоторых форматах для этого используется умень-
шенная копия изображения, вставляемая в тот же файл и предназначенная для
быстрого ознакомления с его содержимым.
Если рисунок очень большой, и вы не хотите, чтобы он замедлял загрузку
основного Web-документа, можно поместить рисунок на отдельную страницу,
вставив в основном документе гиперссылку на нее, например, так:
<а href="Адрес_1Ж1«и>Здесь</а>Вы можете увидеть фотографию
В этом случае пользователь сам решает - смотреть или не смотреть данный
рисунок.
Мы уже отмечали, что для файлов, подобных загруженному, т.е. сохраненных
в формате JPEG, основной способ оптимизации - сжатие. Только таким спосо-
бом можно уменьшить объем файлов данного формата. Однако следует пом-
нить, что сжатие JPEG ведет к потере качества. При каждом сохранении файла
этого формата происходит новое сжатие и качество снова ухудшается. Вместе
' с тем, технология JPEG замечательна именно тем, что позволяет достичь серь-
езного выигрыша в сокращении размера при минимально заметных для глаза
потерях в качестве.
Еще один способ ускорения загрузки графики большого размера - нарезать изо-
бражение на части и поместить отдельные фрагменты в HTML-таблицу, где они
будут восприниматься как единое целое. Каждый такой фрагмент можно опти-
мизировать индивидуально, применив наиболее подходящие для него параметры.
При этом размер фрагментированного рисунка станет меньше, чем неразрезан-
ного, что значительно ускорит его появление на экране. Для графики, сохраняе-
мой в формате GIF, можно также оптимизировать палитру каждого фрагмента,
что иногда позволяет уменьшить объем файла в 2-3 раза.

Графический фон
Создавая наши первые Web-страницы, мы использовали для них однотонный фон,
указывая его цвет в теге <body> с помощью атрибута bgcolor. Однако фон
может быть не только однотонным, но также в виде рисунка или фотографии.
В этом случае, как и любое другое изображение, рисунок фона должен быть

29
Adobe Photoshop для Web
представлен в формате GIF, JPEG или NPG. Для указания фонового рисунка в
теге <body> используется атрибут background, значение которого - имя или
URL-адрес файла с рисунком.
Вставим в файл geoton.html в качестве фона Web-страницы рисунок BG.JPG,
который мы сохранили в папке Web в предыдущем разделе.
>• В файле geoton.html, открытом в программе Блокнот (Notepad), удалите
HTML-элемент <img src=BG. JPG>.
>• Добавьте в конец открывающего тега <body> атрибут background=BG. JPG
так, чтобы тег <body> принял следующий вид:
<body bgcolor=blue text=yellow link=white vlink=yellow
alink=red
background=BG.JPG>
После такого редактирования код HTML в файле geoton.html должен принять
вид как на Рис. 1.10. В окне браузера вы увидите, что теперь фон этой страницы
не однотонный синий, как прежде, а изображение из загруженной нами фото-
графии, записанной в файле BG.JPG. Причем, если у вас большое разрешение
экрана, то вы увидите что фон повторяется по Web-странице. И на этом новом
фоне отображается текст документа и рисунок CLOUD.GIF (Рис. 1.11). Однако
напомним, что мы не удалили атрибут bgcolor в теге <body>. В таких случаях,
когда в теге <body> указываются оба атрибута - bgcolor и background - брау-
зер обычно отдает предпочтение атрибуту background, но, если изображение
фона загрузить невозможно, используется атрибут bgcolor.
|Г, geoton - Блокнот
5£вйя Правка Формат Дид Справка
<ntml>
<head>
tle>KoMnaHM* rcoTOH</t1tle>
</head>
<body bgcolor-blue text-yellow link-white vllnk-yellow slink-red
background-Be.JPG>
<hl al1gn-center>flo6po пожаловать на страничку компании ГЕОТОН!</hl>
<centerxa href-"sp1sok.html"x1mg src-CLOUD.Gir alt-" область нашей
деятельности" border-1 wldth-102 height-10x/ax/center>
<p style-"font-weight: bold; font-style: Italic; font-size: 150*;
text-align: center >здесь вы узнаете <а href-"sp1sok.html">o нашей
деятельности</а>, о программных продуктах нашей компании об оборудован
которое мы npoH3BOAHM</px/body>
</html>

Рис. 1.10. Файл geoton.html после указания фонового рисунка

30
 Графика для Web-страниц

» •* » О и fl I ^Search 31 Favorite» OHisloiy | %~ S ЕЯ »

программна нашей компании и об

оборуд е мы производим

Рис. 1.11. Фон в виде рисунка

Еще один способ определения фона - с помощью языка каскадных таблиц сти-
лей CSS. Как вы сейчас увидите, этот способ предоставляет разработчику Web-
страниц значительно больше возможностей управления фоновым изображением.
Чтобы удобнее было знакомиться с ними, вставим рисунок BG.JPG в качестве
фонового изображения второй Web-страницы нашего сайта, сохраненной в файле
spisok.html. воспользовавшись языком каскадных таблиц стилей.
Мы будем использовать вариант определения стилей, при котором описание
стилей располагается внутри заголовка Web-документа <head>.. .</head> в
открывающем теге <style>. В таком случае вы можете использовать описан-
ные стили для HTML-элементов всей страницы.
В теге <style> обязательно должен присутствовать атрибут type= n text/css",
который служит указанием браузеру использовать язык каскадных таблиц сти-
лей CSS. Таким образом, элемент <style>.. .</style> должен иметь с/ледую-
щий вид:
<style type="text/css">
</style>
Вставим этот тег в код HTML файла spisok.html.
>• Вставьте пустую строку в файле spisok.html после элемента <title>4eM мы
занимаемся?</title> и введите теги <stylex/style>, как указано вы-
ше. Код HTML» заголовка Web-страницы, заключенный между тегами
<head>... < /head>, должен иметь такой вид:
<head>

31
Adobe Photoshop для Web
<title>4eM мы 3aHMMaeMCH?</title>
<style type="text/css">
</style>
</head>
Следующее, что нужно сделать - это присвоить стили элементам HTML. В общем
случае присвоение стиля элементу выглядит так:
название_элемента { свойство: значение },
где название_элемента - это имя HTML-тега, например, hi, p, body, а пара-
метры в фигурных скобках - перечень свойств элементов и присвоенных им
значений. Например, чтобы указать, что все абзацы, описываемые тегами
<р>...</р> текущего Web-документа, должны иметь полужирное курсивное
начертание шрифта с размером 150% и выравнивание по центру, следует при-
своить этому элементу стили следующим образом:
<style type= 1 I text/css">
p { font-weight: bold; font-style: italic; font-size: 150%;
text-align: center }
</style>
Напомним, что такие стили мы присвоили элементу <р>... </р> на нашей пер-
вой Web-странице - geoton.html - и сделали это с помощью атрибута style.
При этом стили были присвоены только данному элементу <р>.. . </р>. Если
же стили определяются в заголовке документа указанным выше способом, то
они присваиваются всем элементам <р>.. .</р> данной страницы.
Но нам требуется вставить рисунок, который. будет служить фоном Web-
страницы. Для этого в теге <style> элементу body должно быть присвоено свой-
ство background-image, значением которого должен быть URL-адрес файла с
изображением. Этот адрес в языке таблиц стилей указывается в скобках после
символов url так: url("BG.JPG n ). На основании сказанного, элементу body в
теге <style> нужно присвоить следующий стиль:
body { background-image: url("BG.JPG") }
>• Вставьте пустую строку между открывающим тегом <style> и закрываю-
щим тегом </style> и введите указанный код, определяющий стиль элемента
body.
Элемент HTML <style>... </style> должен выглядеть следующим образом:
» 4
<style type="text/css">
body { background-image: url("BG.JPG") }
</style>
32
 Графика для Web-страниц
>• Сохраните файл spisok.html и откройте его в программе-браузере. Вы увидите,
что установленный ранее цветной фон заменен изображением из файла BG.JPG
и текстовое содержимое документа отображается теперь на новом фоне.
v Если текст плохо виден на новом фоне, измените его цвет с помощью атри-
бута text тега-:body>, например, <body text="black">.
Когда вы просмотрите текущий документ, воспользовавшись вертикальной по-
лосой прокрутки, то увидите, что в нижней части страницы фоновое изображе-
ние повторяется. Если у вас установлено разрешение монитора 1024x768 или
выше, то повторение будет и справа. Во всех случаях, когда размер фонового
рисунка меньше размера текущей страницы, браузер по умолчанию повторяет
рисунок по вертикали и по горизолтали. Но вы можете указать программе
просмотра не повторять рисунок, т.е. выводить его только один раз. Для этого
используется свойство background-repeat со значением no-repeat: back-
ground-repeat: no-repeat.
>• Вставьте указанное свойство в код HTML файла spisok.html так, чтобы
элемент <style> — </style> принял следующий вид:
<style type="text/css">
body { background-image: ur1("BG.JPG"); background-repeat:
no-repeat }
</style>
Теперь в окне браузера фоновый рисунок занимает только верхнюю часть доку-
мента. Нижняя и, возможно, правая часть, в случае высокого разрешения мони-
тора, заполнена однотонным фоном, который вы установили ранее.
Свойство background-repeat может иметь также следующие значения:
• repeat - фон повторяется как по горизонтали, так и по вертикали; это значе-
ние устанавливается по умолчанию;
• repeat-х - фон повторяется только по горизонтали;
• repeat-у - фон повторяется только по вертикали.
Положение фонового рисунка на странице можно изменить с помощью свойства
background-position. В качестве значений этого свойства указываются клю-
чевые слова, характеризующие положение изображения по вертикали - top
(вверху), center (по центру), bottom (внизу) - и по горизонтали - left (слева),
center (по центру), right (справа). Первым должно указываться вертикальное
положение. Например, код background-position: center center выровняет
рисунок по центру страницы как по горизонтали, так и по вертикали.

33
2 - 6645
Adobe Photoshop для Web
>• Добавьте в описание свойств элемента body файла spisok-html свойство
background-position: center center. Элемент <style>...</style>в
этом файле должен принять следующий вид:
<style type="text/css">
body { background-image: u r l ( " B G . J P G " ) ; background-repeat:
no-repeat; background-position: center center }
</style> ,
Фоновый рисунок будет помещен в центре страницы, при этом нижняя и верх-
няя части страницы, а также правая и левая при разрешении монитора 1024x768
и выше, будут заполнены сплошным цветом.
> Просмотрите еще раз изображение в окне браузера, воспользовавшись верти-
кальной полосой прокрутки, и обратите внимание на то, что фоновый рису-
нок прокручивается вместе с текстом.
Вы можете, однако, фиксировать изображение так, чтобы при прокрутке фон
страницы оставался неподвижным, а текст перемещался относительно фонового
изображения. Для этого в элементе body следует использовать свойство back-
ground-attachment со значением fixed: background-attachment: fixed.
>• Вставьте указанное свойство в описание стиля элемента body. Элемент
<style> — </style> HTML-кода файла spisok.html должен принять следую-
щий вид:
<style type=«text/ess">
body { background-image: u r l ( " B G . J P G " ) ; background-repeat:
no-repeat; background-position: center center;
background-attachment: fixed } ,
</style>
Теперь вы увидите, что при прокрутке страницы фоновое изображение остается
неподвижным, а текст и другие элементы Web-страницы перемещаются относи-
тельно фона.
Как видите, использование языка каскадных таблиц стилей предоставляет боль-
ше возможностей для представления фонового изображения на Web-странице,
чем применение атрибута background в теге <body>.
Изображения для использования в качестве фона и рисунков в своих Web-
страницах вы можете свободно загрузить со следующих Web-сайтов:
http://www.abcgiant.com/
http://barrysclipart.com/
http://www.arttoday.com/

34
 Графика для Web-страниц

«Прозрачная» графика
Во второй версии графического формата GIF, разработанной в 1989 году, появи-
лась возможность указывать прозрачный цвет, т.е. такой цвет, сквозь который
видно все, что под ним находится. Но по-настоящему эта возможность стала
использоваться лишь после того, как ее поддержка появилась в браузерах.
Прозрачный цвет позволяет создавать изображения произвольной формы - пик-
селы рисунка, имеющие этот цвет, при просмотре в браузере становятся неви-
димы. В связи с тем, что у большей части изображений прямоугольную форму
имеет только пустой фон, а сам рисунок занимает область произвольной конфи-
гурации в центре прямоугольного фона, такой режим отображения может ока-
заться очень полезным.
Посмотрим, как можно использовать изображение с прозрачным цветом. Такое
изображение BG.GIF вы можете найти среди файлов из архива с примерами.
Вставим в Web-документ geoton.html рисунок с прозрачным цветом. В файле
BG.GIF в указанной папке хранится та же фотография, что и в файле BG.JPG, с
которым мы работали до сих пор, но записанная в формате GIF таким образом,
что серый цвет фона при просмотре в браузере становится прозрачным.
>• Откройте в программе Блокнот (Notepad) файл geoton.html.
> Отредактируйте код HTML файла, использовав в качестве значения атрибута
background открывающего тега <body> адрес файла BG.GIF на вашем сайте
так, чтобы этот элемент принял примерно такой вид:
«cbody bgcolor=blue text=yellow link=white vlink=yellow
alink=red background=BG.G!F">
> Сохраните файл geoton.html и откройте его в браузере.
Когда рисунок будет загружен, сначала может показаться, что фотография де-
вушки сделана на синем фоне. В действительности же синий цвет - это цвет фо-
на страницы, а прежний серый цвет фона фотографии в браузере стал прозрач-
ным и сквозь него виден синий фон документа. В этом можно убедиться, если
изменить цвет фона страницы на любой другой, изменив значение атрибута
bgcolor.
>• Закройте браузер и редактор Блокнот (Notepad).
Итак, мы познакомились с возможностями использования «прозрачной» графики
GIF. О том, как ее создавать, мы поговорим в следующих главах.

35
Adobe Photoshop для Web

Графический текст
Многие Web-дизайнеры широко используют в своих проектах графический
текст. Это обычно небольшие надписи, состоящие из одного или нескольких слов,
оформленные с применением различных эффектов и сохраненные в файле одного
из графических форматов. Такой графический файл с текстом вставляется в Web-
документ как рисунок или как фон и используется в качестве заголовков, назва-
ний, логотипов, кнопок и т.д. На Рис. 1.12 показаны примеры таких надписей.
Хотя подобная графика и увеличивает объем
Web-страниц и время их загрузки, разумное
ее использование придает сайту привлека-
тельный профессиональный вид.
Графический текст, как и другие изображения,
создается обычно в программах точечной гра-
фики и поэтому состоит из множества пикселов. VABANf
Если размер шрифта надписей достаточно круп-
ный, то на границах символов возникает резкий
контраст, в результате чего очертания символов
кажутся неровными, особенно в наклонных и
закругленных элементах (Рис. 1.13, слева). книга
С помощью специального эффекта сглажива-
ния (anti-aliasing) можно минимизировать кон- Рис. 1.12. Графический текст
траст на границах символов. В результате их

А А
очертания станут более мягкими и надпись
будет выглядеть более элегантно (Рис. 1.13,
справа). Однако в тех случаях, когда надпись
создается мелким шрифтом, использование
сглаживания нежелательно, так как текст мо-
жет стать плохо читаемым.
Рис. 1.13. Графический текст
С приемами и способами создания графики и, несглаженный (слева)
в частности, графического текста ады познако- и сглаженный (справа)
мимся в следующей главе.

36
Г Л А В А 2.

Подготовка графики
с помощью Adobe ftiotoshop C5
и Adobe ImacjeKeady C5
Внешний вид и привлекательность вашего сайта в значительной мере зависят от
наполняющей его графики. Графика - это визуальное средство подчеркивания и
выделения информации, раскрываемой текстом Web-страницы, которое в то же
время не должно отвлекать внимание посетителя сайта от самого текста. Поэтому
подготовке графики следует уделить самое серьезное внимание.
В настоящее время существует множество программных продуктов, позволяю-
щих готовить рисунки для Web; наиболее популярными из Них являются Mac-
romedia Fireworks и Adobe ImageReady. Компания Macromedia стала пионером в
области создания программ подготовки Web-графики, когда выпустила свой
продукт Macromedia Fireworks, специально предназначенный для этой цели.
Вслед за ним появилась аналогичная программа компании Adobe System Incor-
porated - Adobe ImageReady.
Среди программ профессиональной подготовки растровых изображений, пожалуй,
нет программы более совершенной и более популярной, чем Adobe Photoshop.
За последние несколько лет в связи с тем, что требования к Web-графике значи-
тельно повысились, дизайнеры и разработчики ориентируются именно на Adobe
Photoshop, как на одно из основных средств создания графики для World Wide Web.
До появления версии Adobe Photoshop 5.5 программа Adobe ImageReady, ранее
распространявшаяся отдельно, считалась неким придатком Adobe Photoshop с очень
ограниченным набором функций подготовки изображений для Web. Однако,
учитывая возрастающие требования, компания Adobe System решила отказаться
от дальнейшего раздельного распространения этих двух продуктов и слить их в
один пакет - Adobe Photoshop. Новая концепция «два в одном» гарантирует со-
вместимость программ, знакомый интерфейс и, в конечном счете, значительное
сокращение времени подготовки графики. По сути, это - единый комплекс, раз-
деленный на две программы только для гибкости. Обе программы имеют одина-
ковые рабочие окна и предлагают много одинаковых инструментов. Между про-
граммами легко переключаться с помощью специальной кнопки и, таким обра-
зом, быстро переходить от создания и обработки изображений к их подготовке
и оптимизации для Web. Все операции, выполненные в каждой из программ,
сохраняются и, при необходимости, их можно отменить после переключения.
Adobe Photoshop и Adobe ImageReady хорошо дополняют друг друга. И мы бу-
дем рассматривать эти программы совместно: обрабатывать фотографии, созда-
вать графические кнопки, баннеры и другие изображения Для Web-сайта в Adobe
Adobe Photoshop для Web
Photoshop, а затем переключаться в Adobe ImageReady, чтобы оптимизировать
полученные изображения, разрезать их на фрагменты, «оживлять графику» и т.п.
Следует отметить, что работа с Adobe Photoshop требует некоторого навыка, так как
большинство созданных в ней объектов не могут быть легко изменены. Однако к
этой особенности программы достаточно легко привыкнуть, тем более, что она за-
писывает все выполненные действия, и любые из них можно отменить, вернувшись
к предыдущему варианту.
Практические алгоритмы этой главы предполагают использование последних
версий программ - Adobe Photoshop CS и Adobe ImageReady CS. Эти версии яв-
ляются следующими после версий Adobe Photoshop 7.0 и Adobe ImageReady 7.0.

Знакомство с рабочим окном программы

Начнем работу с Adobe Photoshop.
i
> Для запуска программы нажмите кнопку Пуск (Start) на Панели задач (Task-
bar) и из появившегося главного меню Windows выберите команду Програм-
мы * Adobe Photoshop CS (Programs » Adobe * Adobe Photoshop CS).
Программа будет запущена. При использовании пробной версии программы на
экране появится диалог, в нижней части которого показывается число оставшихся
дней работы с программой (Рис. 2.1).

Рис. 2.1. Начальный диалог пробной версии программы Adobe Photoshop CS

>• Нажмите кнопку Try (Попробовать). При первом запуске программы на экра-
не появятся диалоги о настройках Adobe Photoshop CS (Рис. 2.2 и Рис. 2.3).
В первом диалоге сообщается, что первичный виртуальный диск программы
Photoshop и файл подкачки Windows находятся в одном и том же разделе жест-

38
 Подготовка графики с помощью программ Photoshop и ImageReady
кого диска и предлагается назначить для первичного виртуального диска Photo-
shop другой раздел жесткого диска или, еще лучше, другой физический жесткий
диск (Рис. 2.2).
Adobe Photoshop

i S j You currently have Adobe Photoshop's primary Scratch and Windows'

ЧА/ primary paging file on the same volume, which can result in reduced
performance. It is recommended that you set Adobe Photoshop's primary
Scratch volume to be on a different volume, preferably on a different
physical drive.

Puc. 2.2. Диалог с предложением назначить другой жесткий диск

для первичного виртуального диска Photoshop
Виртуальные диски программы Photoshop (Scratch disks) используются тогда,
когда для выполнения операции не хватает оперативной памяти. В диалоге
Preferences (Настройки), который вызывается с помощью команды меню Edit *
Preferences • Plug-Ins & Scratch Disks (Правка » Настройки • Плагины и вир-
туальные диски) можно назначить до 4-х виртуальных дисков. Их рекомендуется
назначать на наиболее свободных и нефрагментированных жестких дисках.
>• Нажмите кнопку О К, чтобы закрыть диалог. На экране появится диалог-
запрос Adobe Photoshop о настройке параметров цвета (Рис. 2.3).

Color settings for Photoshop 6 will be configured usrig default

settings.

Do you wish to customise your color settings new?

Рис. 2.З. Диалог-запрос о настройке параметров цвета

В этом диалоге программа сообщает, что цветовая конфигурация будет установ-
лена по умолчанию. Задача настройки цветовой конфигурации состоит в том,
чтобы, по возможности, сохранить идентичность цвета на всех стадиях его об-
работки и приблизить видимые на экране цвета к тем, которые будут напечата-
ны принтером. Если вы желаете выполнить собственную настройку цвета, то
следует нажать кнопку Yes (Да), а чтобы принять установки по умолчанию -
кнопку No (Нет). При необходимости вы сможете выполнить настройку цвета
позднее, выбрав команду меню Edit» Color Settings (Правка * Настройка цвета).
> Нажмите кнопку No (Нет), чтобы закрыть диалог о настройке параметров
цвета. На экране появится диалог, из которого вы можете перейти к руко-
водствам по использованию программы, настройке цвета и узнать о новых
возможностях программы (Рис. 2.4).
Если сбросить флажок Show this dialog at startup (Показывать этот диалог при
запуске), то диалог больше появляться не будет.
39
Adobe Photoshop для Web

Tips and Tricks

Tips and Tricks From the Experts

Cotar Management Setup

Щ setting Up Color

What's New f

New Features At A Glance

New Feature HigHights
What's New Movie (Onlhe)

Puc. 2.4. Диалог для знакомства с программой

> Нажмите кнопку Close (Закрыть). На экране появится рабочее окно про-
граммы Photoshop (Рис. 2.5).
Кнопка
Значок Кнопка
Кноп|(а закрытия
системного Заголовок Полоса разворачивания
меню
сворачивания : кна — ,
меню окна
i окна 1 I
C Adobe Photoshop

Рис. 2.5. Рабочее окно программы Adobe Photoshop

40
 Подготовка графики с помощью программ Photoshop и ImageReady
Первая строка рабочего окна программы Adobe Photoshop - строка заголовка.
В ней отображается название программы и слева от него значок системного меню,
команды которого предназначены для перемещения, изменения размеров и
представления окна, а также для его закрытия. У правого края
строки заголовка располагаются три кнопки: [Г] - для свора-.
чивания, [В] - для разворачивания и [х] - для закрытия окна
программы.
Под строкой заголовка расположена полоса меню, содержа-
щая группы команд управления программой. Для выбора ка-
кой-либо команды меню следует щелкнуть мышью на назва-
нии группы, а затем в появившемся подменю - на имени нуж-
ной команды.
Ниже полосы меню расположена панель параметров (Options
Bar), на которой в процессе работы будут отображаться дос-
тупные для изменения параметры выбранного инструмента.
Основную часть рабочего окна Adobe Photoshop занимает ра-
бочая область, у левого края которой находится панель инст-
рументов (Tools) (Рис. 2.6). Инструменты этой панели пред-
назначены для создания, редактирования и обработки изобра-
жения. Каждая кнопка этой панели представляет или отдель-
ный инструмент, например, [Kf] - Move Tool (V) (Инструмент
«Перемещение» (V)1), [\] - Magic Wand Tool (W) (Инстру-
мент «Волшебная палочка» (W)) или несколько инструментов, шаг
например, О - Rectangular Marquee Tool (M) (Инструмент Рис. 2.6. Панель
«Прямоугольная область» (М)), |£^| - Lasso Tool (L) (Инстру- инструментов
мент «Лассо» (L)). В последнем случае в правом нижнем углу (Tools)
кнопки инструмента находится маленький черный треугольник.
Здесь и далее английские названия кнопок и других элементов управления - это
всплывающая подсказка, которая появляется на экране при установке указателя
мыши на кнопке, а английская буква в скобках рядом с названием инструмента -
это клавиша, которая включает данный инструмент при включенном англий-
ском языке клавиатуры.
Если установить указатель мыши на кнопке с черным треугольником внизу, а
затем нажать и удерживать левую кнопку мыши, то появится дополнительная
панель со списком других инструментов. Чтобы выбрать для работы любой
инструмент из списка, достаточно щелкнуть мышью на его имени.

1
Здесь и далее: латинская буква рядом с названием, в данном случае (V) - это клавиша быстрого
выбора инструмента.
41
Adobe Photoshop для Web
Большинство инструментов панели привычны для художника: кисть (Brush
Tool (В)), карандаш (Pencil Tool (В)), ластик (Erazer Tool (E)). Но есть и такие,
которые обычно используют фотографы, например, размытие/резкость/палец
(Blur/Sharpen/Smudge Tool (R)), осветлитель/затемнитель/губка (Dodge/Burn/
Sponge Tool (О)).
Инструменты левого ряда панели Tools имеют следующее назначение:
[П]] - Rectangular Marquee Tool (М) (Инструмент «Прямоугольная область» (М)) -
создает выделенную область прямоугольной формы. Этой же кнопкой
включаются и другие инструменты, создающие области правильной формы:
[О] - Elliptical Marquee Tool (M) (Инструмент «Эллиптическая область»
(М)) - создает область эллиптической формы; Single Row Marquee Tool
(Инструмент «Однострочная область») и Single Column Marquee Tool
(Инструмент «Одноколоночная область») - позволяют выделить соответст-
венно строку или колонку высотой или шириной в 1 пиксел.
[?^| - Lasso Tool (L) (Инструмент «Лассо» (L)) - выделяет область произвольной
формы. Этой же кнопкой включаются инструменты (уГ| - Polygonal Lasso
Tool (L) (Инструмент «Многоугольное лассо» (L)), создающий выделенную
область в форме многоугольника и fW] - Magnetic Lasso Tool (L) (Инстру-
мент «Магнитное лассо» (L)), создающий выделенную область посредст-
вом привязки к резким границам изображения.
[§]-Crop Tool (С) (Инструмент «Рамка» (С)) - позволяет кадрировать изобра-
жение, обрезав его края.
[53-Healing Brush Tool (J) (Инструмент «Лечащая кисть» (J)) - позволяет испра-
вить дефекты изображения, делая их неотличимыми от окружающих частей
картинки. Этой же кнопкой включаются инструменты [О] - Patch Tool (J)
(Инструмент «Заплатка» (J)), который позволяет заменить выбранную область
пикселами из другой области, и Ц^ - Color Replacement Tool (J) (Инстру-
мент «Замена цвета» (J)), который упрощает замену указанного цвета.
Щ- Clone Stamp Tool (S) (Инструмент «Штамп» (S)) - позволяет воспроизво-
дить точные или модифицированные копии элементов изображения и цве-
товых образцов в том же изображении или в другом документе. [Ц] - Pat-
tern Stamp Tool (S) (Инструмент «Штамп узора» (S)), который позволяет
рисовать выбранным узором.
[^| - Erazer Tool (Е) (Инструмент «Ластик» (Е)) - подобно ластику, стирает изо-
бражение. Этой кнопкой включается также инструмент\Ё?\- Magic Erazer
Tool (Е) (Инструмент «Волшебный ластик» (Е)) - позволяющий, указав
любую точку на рисунке, сделать прозрачными остальные области с таким
же цветом и (jPy - Background Erazer Tool (E) (Инструмент «Фоновый

42
 Подготовка графики с помощью программ Photoshop и ImageReady
ластик» (Е)), который определяет цвета в том месте, где прошла кисть,
ищет аналогичные цвета по всему изображению и удаляет их.
- Blur Tool (R) (Инструмент «Размытие» (R)) - позволяет смягчать слишком
резкие границы или области в изображении, уменьшая контраст между
пикселами. Включающийся этой же кнопкой инструмент | Д] - Sharpen
Tool (R) (Инструмент «Резкость» (R)) повышает четкость изображения, де-
лая слишком мягкие границы более резкими, а инструмент Щ - Smudge
Tool (R) (Инструмент «Палец» (R)) - имитирует размазывание пальцем
свежей краски.
а1г|
-Р Selection Tool (А) (Инструмент «Выбор контура» (А)) - позволяет
выбирать контуры. Этой же кнопкой включается инструмент [W] - Direct
Selection Tool (А) (Инструмент «Прямой выбор» (А)), который позволяет
выбирать сегмент контура.
- Pen Tool (Р) (Инструмент «Перо» (Р)) - создает контур любой формы. Этой
кнопкой включаются также инструменты, позволяющие добавлять и уда-
лять точки привязки на линии и преобразовывать плавные кривые в ло-
маные и наоборот..
- Notes Tool (N) (Инструмент «Комментарии» (N)) - создает текстовые ком-
ментарии, которые могут быть добавлены к изображению. Этой кнопкой
включается также инструмент [Ц] - Audio Annotation Tool (N) (Инстру-
мент «Аудиокомментарий» (N)), позволяющие добавлять к изображению
аудиокомментарий.
[f5]-Hand Tool (Н) (Инструмент «Рука» (Н)) - применяется для перемещения
изображения, которое не умещается в рабочем окне.
В правом вертикальном ряду панели Tools содержатся следующие инструменты:
[KjT| - Move Tool (V) (Инструмент «Перемещение» (V)) - позволяет перемещать
выделенные области и слои.
[\]-Magic Wand (W) (Инструмент «Волшебная палочка» (W)) - выделяет фраг-
менты изображения с учетом сходства цветов соседних пикселов.
[^]-Slice Tool (К) (Инструмент «Фрагмент» (К)) - позволяет разрезать изобра-
жение на фрагменты для ускорения их загрузки в браузер. При помощи дру-
гого инструмента- \^\- Slice Select Tool (К) (Инструмент «Выбор фраг-
мента» (К)), который включается этой же кнопкой, можно изменять размеры
фрагментов и перемещать их.
\j/\-Brush Tool (В) (Инструмент «Кисть» (В)) - используется для наложения
мягких цветовых мазков. Этой же кнопкой включается инструмент \/\ -
Pencil Tool (В) (Инструмент «Карандаш» (В)), который позволяет рисовать
произвольные линии с жесткими границами.
43
Adobe Photoshop для Web
\Sf\ - History Brush Tool (Y) (Инструмент «Кисть событий» (Y)) - создает копию
или снимок изображения и затем закрашивает ею текущее изображение или
его часть. Этой же кнопкой включается инструмент \3f] - Art History Brush
(Y) (Художественная кисть событий (Y)), который позволяет рисовать стили-
зованными мазками, используя указанное предыдущее состояние изображе-
ния в качестве исходных данных.
[Ш]-Gradient Tool (G) (Инструмент «Градиент» (G)) - используется для созда-
ния плавных переходов от одного цвета к другому. Такой плавный переход
художники называют растяжкой. Этой кнопкой включается также инстру-
мент [<$»] - Paint Bucket Tool (G) (Инструмент «Заливка» (G)), который ис-
пользуется для заливки цветом выделенной области.
Щ-Dodge Tool (О) (Инструмент «Осветлитель» (О)) - осветляет отдельные
участки изображения. Включающийся этой же кнопкой инструмент [QJ -
Burn Tool (О) (Инструмент «Затемнитель» (О)) затемняет отдельные облас-
ти, а инструмент [ip] - Sponge Tool (0) (Инструмент «Губка» (О)) изменяет
насыщенность цветов.
[T]-Horisontal Type Tool (Т) (Инструмент «Горизонтальный текст» (Т)) - инст-
рументы, которые включаются этой кнопкой, создают горизонтальные и
вертикальные надписи, а также маски текста на изображении.
|Hj-Rectangle Tool (U) (Инструмент «Прямоугольник» (U)) - позволяет рисо-
вать фигуры прямоугольной формы. Этой же кнопкой включаются инст-
рументы: |G3j- Rounded Rectangle Tool (U) - для рисования прямоуголь-
ников со скругленными углами, [о] - Ellipse Tool (U) - для создания эл-
липсов и окружностей, |QJ - Polygon Tool (U) - для рисования много-
угольников, Г\] - Line Tool (U) (Инструмент «Линия» (U)) - для создания
прямых линий любой толщины со стрелками на концах, [Z|] - Custom
Shape Tool (U) (Инструмент «Заказная форма» (U) - для рисования
фигур, форма которых выбирается из предлагаемых образцов.
] - Eyedropper Tool (I) (Инструмент «Пипетка» (I)) - служит для выбора цвета
на рисунке и переопределения основного и фонового цветов. Этой же
кнопкой включаются инструменты |t/J - Color Sampler Tool (I) (Инстру-
мент «Образец цвета» (I)), который позволяет перемещать/удалять образцы
цвета и |<^| - Measure Tool (I) (Инструмент «Измеритель» (I)), который по-
зволяет определять размеры линий и углов.
| - Zoom Tool (Z) (Инструмент «Масштаб» (Z)) - используется для увеличения
и уменьшения изображения на экране.

44
 Подготовка графики с помощью программ Photoshop и ImageReady
Под указанными кнопками на панели инструментов (Tools) расположены два
квадрата с образцами цвета. Левый верхний служит для установки и отображает
цвет переднего плана (Set foreground color), а правый нижний - цвет фона (Set
background color). Значок t+- Switch Foreground and Background Colors (X)
(Переключатель цветов переднего плана и фона (X)) позволяет менять местами
эти цвета. С помощью значка ft - Default Foreground and Background Colors (D)
(Цвета переднего плана и фона по умолчанию (D)) вы можете быстро выбрать
черный цвет для переднего плана и белый - для фона.
Под образцами цвета находятся две кнопки: ЕЕ - Edit in Standard Mode (Q)
(Редактирование в стандартном режиме (Q)) и О - Edit in Quick Mask Mode (Q)
(Редактирование в режиме «Быстрая маска» (Q)) - соответственно для выключе-
ния и включения режима быстрой маски, позволяющего предохранить фрагменты
изображения от изменения в процессе редактирования.
Еще ниже располагаются три кнопки, предназначенные для быстрого переклю-
чения режимов просмотра рисунка: [Ш] - Standard Screen Mode (F) (Стандарт-
ный режим (F)), [BJ - Full Screen Mode with Menu Bar (F) (Полноэкранный ре-
жим с полосой меню (F)), [О] - Full Screen Mode (F) (Полноэкранный режим (F)).
У нижнего края панели инструментов (Tools) расположена кнопка 'Si>tij - Edit
in ImageReady (Shift+Ctrl+M) (Редактировать в ImageReady (Shift+Ctrl+M)),
позволяющая быстро переключиться в программу Adobe ImageReady.
Мы предполагаем, что все параметры программы Adobe Photoshop установлены
по умолчанию, т.е. так, как определили разработчики. Это возможно лишь в том
случае, если после установки программы с ней еще не работали, так как в процессе
работы программа запоминает все изменения параметров. Если же с программой
уже работали и изменяли значения ее параметров, то перед выполнением даль-
нейших практических алгоритмов целесообразно переустановить Adobe Photo-
shop или удалить все файлы настроек из папки Adobe Photoshop CS Settings,
которую следует искать на том диске, где установлена операционная система, и
перезапустить программу, чтобы восстановить параметры по умолчанию.
При первом запуске программы у правого края рабочей области находятся еще
три небольших вспомогательных окна, в которых отображаются группы палитр
(Palettes). В программах компьютерной графики значение слова «палитра» не-
сколько расширено по сравнению с традиционным его толкованием - плоско-
стью для смешивания красок. В Adobe Photoshop содержатся различные палитры,
имеющие самое разнообразное назначение: они позволяют выбирать цвета и
стили, устанавливать параметры текста, перемещаться по изображению и полу-
чать необходимую информацию о размерах, положении, цветах объектов, рабо-
тать со слоями, контурами, каналами и т.п.

45
Adobe Photoshop для Web
В процессе создания или редактирования изображения в рабочем окне програм-
мы Adobe Photoshop постоянно находятся панель инструментов (Tools) и необ-
ходимые для работы палитры. Их можно разместить рядом с обрабатываемым
изображением, поверх него, если оно велико, или свернуть и поместить на краю
рабочей области. Все операции с окнами палитр осуществляются обычными,
принятыми в Windows, способами. Перемещение палитры выполняется посред-
ством перетаскивания мышью заголовка окна. Для сворачивания палитры доста-
точно нажать кнопку [Г] в правом верхнем углу окна палитры, для разворачива-
ния свернутой палитры - кнопку 0. С помощью кнопки [х] вы можете закрыть
палитру, если она не нужна, чтобы освободить место на экране. Вызвать
закрытую палитру на экран можно с помощью соответствующей команды меню
Window (Окно).
Каждая палитра имеет собственный ярлык с названием, который располагается
во второй строке окна палитры. Основные палитры Adobe Photoshop по умолча-
нию располагаются группами в трех окнах у правого края рабочей области.
В верхнем окне слева направо находятся палитры Navigator (Навигатор), Info
(Информация) и Histogram (Гистограмма); в среднем - Color (Цвет), Swatches
(Каталог), Styles (Стили); в нижнем - Layers (Слои), Channels (Каналы), Paths
(Контуры), History (События), Actions (Действия). В каждом из окон отобража-
ется активная в данный момент палитра. Названия активных палитр выделены
полужирным начертанием. Чтобы включить другую, неактивную в данный мо-
мент палитру, следует щелкнуть мышью на ее ярлыке. Любую палитру можно
выделить из группы и поместить в отдельном окне. Для этого достаточно
перетащить ярлык этой палитры в нужное место. Возможна также и обратная
процедура - совмещение палитр.
У нижнего края рабочего окна находится строка состояния (Status Bar), предна-
значенная для отображения информации о текущем документе, рабочих дисках,
активном в данный момент инструменте. Здесь могут появляться некоторые
подсказки.
Теперь, когда мы познакомились с рабочим окном Adobe Photoshop, переклю-
чимся в Adobe ImageReady и посмотрим, чем отличаются эти программы.
> Нажмите кнопку S>>@ - Edit in ImageReady (Shift+Ctrl+M) (Редактировать в
ImageReady (Shift+Ctrl+M)) на панели инструментов (Tools). Будет запущена
программа Adobe ImageReady, и на экране появится ее рабочее окно (Рис. 2.7).
Как видите, элементы рабочего окна Adobe ImageReady аналогичны уже рас-
смотренным элементам рабочего окна Adobe Photoshop. Набор инструментов на
панели инструментов (Tools) практически такой же, как и в Adobe Photoshop.
Но, кроме того, имеются новые кнопки для работы с картами навигации, кото-
рых нет в Adobe Photoshop: [Щ] - Rectangle Image Map Tool (P) (Инструмент
«Прямоугольная область карты навигации» (Р)) и [4fo] - Image Map Select Tool (J)

46
 Подготовка графики с помощью программ Photoshop и ImageReady
(Инструмент «Выбор области карты навигации» (J)): Кнопкой P^j] включаются
r
также инструменты | ^J - Circle Image Map Tool (P) (Инструмент «Круглая об-
ласть карты навигации» (Р)) и |^] - Polygon Image Map Tool (P) (Инструмент
«Многоугольная область карты навигации» (Р)) - для указания формы участка
карты навигации.
Под образцами цвета переднего плана и фона расположены четыре кнопки,
имеющие следующее назначение:
-Toggle Image Maps Visibility (А) (Выключение/включение отображения
навигационных карт (А));
] -Toggle Slices Visibility (Q) (Выключение/включение отображения фраг-
ментов (Q));

tie Ed» Image Layer Slicet Select Filler View Window Help

».s,
т и.
\ a.

т
«a
л*
umu

тэиа

-<i i»-i o. a i ел в 9

C. 2.7. Рабочее окно программы Adobe ImageReady

]-Rollover Document (Y) (Предварительный просмотр документа (Y));
] -Preview in Default Browser (Ctrl+Alt+P) (Предварительный просмотр в
браузере по умолчанию (Ctrl+Alt+P)).
С помощью кнопки - Edit in Photoshop (Shift+Ctrl+M) (Редактировать
в Photoshop (Shift+Ctrl+M)) у нижнего края панели инструментов (Tools) вы
можете переключиться в Adobe Photoshop.
У правого края экрана в Adobe ImageReady располагаются 11 палитр в четырех
окнах.

47
 \

Adobe Photoshop для Web

После того как мы познакомились с рабочим окном программы Adobe Im-
ageReady, его можно закрыть, так как очередные практические шаги мы будем
выполнять в Adobe Photoshop.
х Выберите команду меню File • Exit (Файл * Выход). Программа Adobe Im-
ageReady закроется. Вы возвратитесь к рабочему окну Adobe Photoshop.
Основная часть рабочей области Adobe Photoshop пока ничем не заполнена.
Это, однако, не значит, что на ней можно что-либо нарисовать. У вас не будет
работать ни один инструмент, пока не будет создан новый документ или же от-
крыт существующий.

Создание иобого рисунка

При создании нового документа необходимо определить его параметры: имя,
размеры, цветовой режим, цвет фона.
>• Выберите команду меню File » New (Файл * Новый) или нажмите комбина-
цию клавиш I ctrl l+IPyl. На экране появится диалог New (Новый) (Рис. 2.8).

Name: |untitted-l| I OK |
" Preset: (clipboard . Q Reset 1
•
Width: 1 800 || pixels [3 Save Preset,,. |

Height:] 600 || pixels Getete Preset... |

'"" "

Resolution: 1 72 1 1 pixels/inch [*j

Color Mode: | RGB Cobr [3 1 8 bit [•]

Background Contents: | White 0

1.37M
$ Advancod

Puc, 2.8. Диалог New (Новый)

В поле ввода Name (Имя) в верхней части диалога можно указать имя создаваемого
документа. По умолчанию предлагается Untitled-1 (Без имени-1). Не будем пока
изменять его. Мы сможем сделать это в дальнейшем, при сохранении рисунка.
В программе Adobe Photoshop предусмотрена возможность работы с рисунками
заданного размера. Поэтому, создавая новый документ, следует сразу указать
его размер. Если размер рисунка заранее не известен, то лучше сделать его по-
больше, с запасом, а потом обрезать до нужного размера.
В следующих разделах этой главы мы подготовим баннер - рекламный рисунок -
для рекламы сайта в Интернете. Как правило,'баннер - это графическое изобра-
жение прямоугольной формы в формате GIF или JPEG. Баннер помещается на

48
 Подготовка графики с помощью программ Photoshop и ImageReady
Web-странице и имеет ссылку на сайт рекламодателя. В последнее время в связи
с бурным развитием баннерной рекламы в Интернете, предпринимаются попыт-
ки стандартизировать размеры баннеров. Первым шагом стандартизации стали
рекомендации по размеру баннеров, предложенные Internet Advertising Bureau
(Бюро рекламы в Интернете) (http://www.iab.net/) совместно с CASTE (The Coali-
tion for Advertising Supported Information & Entertainment) (Коалиция рекламной
поддержки информации и развлечений), приведенные в таблице ниже.
Размер баннера в пикселах Тип баннера
468x60 Full Banner (Стандартный баннер)
234x60 Half Banner (Баннер половинного размера)
88x31 Micro Bar (Микро полоса)
120x90 Button 1 (Кнопка 1)
120x60 Button 2 (Кнопка 2)
120x240 Vertical Banner (Вертикальный баннер)
. 125x125 Square Banner (Квадратный баннер)
728x90 Leaderboard («Перетяжка» вверху страницы)

Воспользовавшись этими рекомендациями, создадим стандартный баннер раз-

мером 468x60 пикселов.

Напомним, что пикселы — это точки, из которых строится растровое

изображение. Размеры рисунка определяются количеством пикселов по
горизонтали (Width) и вертикали (Height). Плотность пикселов в изо-
бражении характеризует графическое разрешение, которое измеряется
в пикселах на дюйм или в пикселах на сантиметр. Чем больше графиче-
ское разрешение, тем выше качество изображения. Число экранных пик-
селов на единицу длины определяет разрешающую способность мони-
тора, которая зависит от размера экрана и от заданной размерности
экранной матрицы. Подробнее об этом читайте в главе «Графика для
Web-страниц».

В Adobe Photoshop предусмотрена возможность указания размера рисунка в раз-

личных единицах: сантиметрах (cm), дюймах (inches), пикселах (pixels) и др. Эти
единицы можно выбрать в открывающихся списках, расположенных справа от
полей ввода Width (Ширина) и Height (Высота). По умолчанию предлагается
измерять размеры в пикселах (pixels).
v В поле ввода Width (Ширина) введите ширину стандартного баннера -
468 пикселов.

49
Adobe Photoshop для Web
> В поле ввода Height (Высота) введите высоту стандартного баннера -
60 пикселов.
Параметр Resolution (Разрешение) определяет разрешение создаваемого
рисунка - количество пикселов на дюйм.
В открывающемся списке Color Mode (Режим цвета) программа предлагает вы-
брать цветовой режим изображения, определяемый глубиной цвета или битовым
разрешением, т.е. количеством бит на один пиксел. По умолчанию предусмотрен
режим RGB Color (Цвет RGB), в котором на каждый пиксел отводится 24 бита
(по 8 бит на каждый из трех цветов), что дает возможность закодировать 16,7
миллиона оттенков. Этот режим иногда называют TrueColor (Истинный цвет), так
как он достаточно точно отображает цветовое многообразие нашего мира. Именно
данный режим наиболее пригоден для изображений, предназначенных для показа
на экране монитора. В соседнем открывающемся списке для режима RGB можно
выбрать 16 бит на каждый из трех цветов, т.е. 48 бит на один пиксел.
Открывающийся список Background Contents (Содержимое фона) позволяет
указать цвет фона создаваемого рисунка: White (Белый), Background Color
(Цвет фона) т.е. цвет, установленный на образце Background Color (Цвет фона)
панели инструментов (Tools), или Transparent (Прозрачный).
> Убедитесь, что в открывающемся списке Background Contents (Содержимое
фона) выбрано значение White (Белый), чтобы создать новый рисунок с
белым фоном.
> Нажатием кнопки ОК закройте диалог New (Новый). В рабочей области про-
граммы появится окно нового документа с именем Untitled-1 (Без имени-1)
с белым цветом фона и заданного размера - 468x60 пикселов.
> Если окно Untitled-1 частично перекрыто панелью инструментов (Tools),
перетащите его вправо, чтобы оно было видно полностью (Рис. 2.9).
В Adobe Photoshop каждый рисунок имеет свое собственное отдельное окно. Это
позволяет работать одновременно с несколькими изображениями.
В заголовке окна созданного документа, кроме его имени - Untitled-1, указан
масштаб изображения, вероятней всего - 66,7%, который зависит от установ-
ленного в данный момент разрешения видеокарты вашего компьютера, а в скоб-
ках - цветовой режим - RGB/8 (RGB, no 8 бит на каждый цвет). Текущий мас-
штаб изображения - 66,67% - вы можете видеть также в левом нижнем углу
строки состояния (Status Bar).
Чтобы с документом было удобно работать, увеличим масштаб отображения
до 100%.

50
 Подготовка графики с помощью программ Photoshop и ImageReady •

Ей. Е<* Layer Delect Fitter Yiew Window Help

Ftrihm-i l.tjJM^J C;Anli-aH»Md Siyfoi |N^J ^ J^ Width: \ ~ ... | ** Height: ^^°° j I

т
УД ТЯЯШь>---Я^Ж.

BQI
дд^гд^р^эд^ D I

о. а а е>. а а Ь
Ц,Ь7% | Dot! «ЛК/О bylts ^ Draw stltclbn from «nt.f or lubtMCt from Kilting Mltction.

PMC. 2.9. Новый документ создан

> Дважды щелкните мышью на поле с отображением текущего масштаба -
66,67% - в левом нижнем углу строки состояния (Status Bar). Это значение
будет выделено темным цветом.
> Введите с клавиатуры новое значение масштаба отображения документа - 100 -
и нажмите клавишу |[Enter|. Масштаб отображения увеличится, и в окне документа
появятся вертикальная и горизонтальная полосы прокрутки, с помощью которых
можно увидеть части рисунка, не помещающиеся в окне.
Но использовать полосы прокрутки для созданного документа малого размера
нецелесообразно. Удобнее будет увеличить размеры окна документа. Это вы-
полняется так же, как обычно изменяется размер окна в Windows.
> Установите указатель мыши на правом нижнем углу рамки окна документа
так, чтобы указатель мыши принял форму двунаправленной стрелки Ч. .
>• Нажмите и удерживайте левую кнопку мыши.
> Не отпуская левую кнопку мыши, переместите указатель мыши вправо и вниз
примерно на расстояние, равное одной третьей части ширины и высоты окна
документа. Размер окна увеличится.
> Отпустите левую кнопку мыши.

51
Adobe Photoshop для Web
>• Если необходимо, повторно откорректируйте размер окна так, чтобы полосы
прокрутки отсутствовали (Рис. 2.10).
ГЦ Untitled-1 & W0% (RGB/8)

Рис. 2.10. Размер окна документа увеличен

Справа от значения масштаба - 100% - в строке состояния (Status Bar) выво-
дится информация о текущем документе: Doc: 82, ЗК /0 bytes. Первое число -
82, ЗК - объем документа в килобайтах. Этот объем программа вычисляет как
произведение размеров документа в пикселах и глубины цвета. Второе число',
после дробной черты - это объем оперативной памяти, занимаемой неуплотнен-
ным файлом, с учетом дополнительных слоев и альфа-каналов. Пока изображе-
ние в документе отсутствует, это число - 0 bytes (0 байт). Подробнее о слоях и
альфа-каналах мы поговорим позднее. Правее информации о размере документа
выводятся сведения о выбранном в данный момент инструменте на панели
инструментов (Tools).

Рисуем геометрические
Прежде чем приступить к изготовлению баннера, потренируемся в создании
простых объектов, а затем посмотрим, как их удалять и отменять выполненные
операции.
В Adobe Photoshop есть специальные инструменты для рисования простых фи-
гур - прямоугольника, прямоугольника со скругленными углами, эллипса, мно-
гоугольника. Однако мы для рисования таких фигур воспользуемся инструмен-
тами выделения области с последующей заливкой или обводкой контура цветом.
Это позволит быстрее освоить весь арсенал инструментов Adobe Photoshop.
Сначала нарисуем прямоугольник, воспользовавшись для этого инструментом
[ГГЦ - Rectangular Marquee Tool (М) (Инструмент «Прямоугольная область» (М)).
>• Убедитесь, что на панели инструментов (Tools) выбран инструмент [[ГЦ -
Rectangular Marquee Tool (М) (Инструмент «Прямоугольная область» (М)):
его кнопка должна быть нажата. В противном случае - нажмите эту кнопку.
>• Установите указатель мыши в окне документа Untitled-1 вблизи левого верх-
него его края. Указатель мыши примет форму крестика +•
>• Нажмите и удерживайте левую кнопку мыши.

52
 Подготовка графики с помощью программ Photoshop и ImageReady
Не отпуская левую кнопку мыши, переместите указатель мыши вправо вниз,
примерно к середине нижней стороны окна документа. В окне рисунка появится
прямоугольная рамка из движущегося пунктира, которая будет увеличиваться по
мере перемещения указателя мыши, указывая размер создаваемой прямоуголь-
ной области.
>• Отпустите левую кнопку мыши. На рисунке будет создана прямоугольная
область выделения (Рис. 2.11).
ffSUnlitled-1 @ 100% (RGB/8)

Рис. 2.J1. Прямоугольная область выделения создана

Если с первого раза не получилась прямоугольная область, примерно равная по-
ловине размера окна документа, то созданную область можно отменить, щелк-
нув мышью в любом месте окна документа, и нарисовать заново.
Описанным способом вы рисуете прямоугольную область от верхнего левого
угла. Если же нужно нарисовать от центра, то в процессе перемещения указате-
Alt
ля мыши следует удерживать нажатой клавишу I I. Чтобы нарисовать квадрат
с равными сторонами, следует при перемещении указателя мыши удерживать
нажатой клавишу l shifl l.
Для окончания создания прямоугольной фигуры следует обвести контур выде-
ления или заполнить выделенную область цветом. Но предварительно цвет нуж-
но выбрать. Adobe Photoshop располагает несколькими способами выбора цвета.
Наиболее простой - выбор из образцов палитры Swatches (Каталог).
>• Щелкните мышью на ярлыке Swatches (Каталог)
в среднем окне палитр у правого края экрана.
Если данный ярлык отсутствует, выберите коман-
ду меню Window * Swatches (Окно * Каталог).
На экране появится палитра,Swatches (Каталог)
(Рис. 2.12).
Выберем в этой палитре цвет для заливки прямо-
угольника. Рис
2.12. Палитра
> Установите указатель мыши на четвертом слева Swatches (Каталог)
в верхнем ряду образце голубого цвета. При
этом указатель мыши примет форму пипетки ^, и вы увидите всплывающую
подсказку с названием цвета - RGB Cyan (Голубой RGB).

53
Adobe Photoshop для Web
> Щелкните мышью в этом месте. Цвет будет выбран и появится на образце
цвета переднего плана (Set foreground color) панели инструментов (Tools).
Чтобы выбрать цвет для фона, следует щелкнуть мышью на образце палитры
Alt
Swatches (Каталог) при нажатой клавише I I.
Теперь можно с помощью инструмента R/»] - Paint Bucket Tool (G) (Инструмент
«Заливка» (G)) залить выбранным цветом выделенную прямоугольную область.
>• Нажмите и удерживайте кнопку [Ш] - Gradient Tool (G) (Инструмент «Гради-
ент» (G)) на панели инструментов (Tools). Появится дополнительная панель с
перечнем инструментов, которые включаются данной кнопкой.
>• Щелчком мыши выберите инструмент [§] - Paint Bucket Tool (G) (Инстру-
мент «Заливка» (G)). Его значок отобразится на кнопке, а кнопка будет нажата.
Теперь можно выполнить заливку.
>• Установите указатель мыши, который примет форму ф, внутри прямоуголь-
ной области выделения.
>• Щелкните мышью в этом месте. Выделенная область будет залита выбран-
ным цветом (Рис. 2.13).

Рис. 2.13. Область выделения залита цветом

Теперь обведем контур прямоугольника, но другим цветом, для выбора которого
воспользуемся палитрой Color (Цвет), предоставляющей более широкие воз-
можности указания цвета.
>• Щелкните мышью на ярлыке Color (Цвет) в среднем окне палитр. Вместо
палитры Swatches (Каталог) появится палитра Color (Цвет) (Рис. 2.14).
На данной палитре представлены цветовые полоски с
ползунковыми регуляторами в соответствии с дейст- SEES 9Ь!
вующим цветовым режимом RGB. Напомним, что в
цветовой модели RGB любой цвет образуется смеши-
ванием трех основных компонентов - красного, зеле-
ного и синего. Каждый ползунковый регулятор по-
зволяет управлять одной из составляющих цвета: R -
красной, G - зеленой, В - синей. Количество каждой Рис. 2.14. Палитра
цветовой составляющей в цвете определяется целым Color (Цвет)
числом от 0 до 255 и отображается в полях ввода
54
 Подготовка графики с помощью программ Photoshop и ImageReady
справа от ползунковых регуляторов. Минимальное значение - 0 - означает полное
отсутствие составляющей, а максимальное - 255 - максимальную ее яркость. Цвет,
все три составляющие которого равны нулю, является абсолютно черным. Если же
все три составляющие равны 255, то цвет - белый.
Для заливки прямоугольника мы выбрали в палитре Swatches (Каталог) голубой
цвет, и теперь этот цвет отображается в палитре Color (Цвет) на квадрате образ-
ца цвета переднего плана, обведенном двойной рамкой, слева от ползунковых
регуляторов. Второй квадрат, правее и ниже, отображает цвет фона. Голубой
цвет переднего плана, как это видно в палитре Color (Цвет), состоит из 255 час-
тей зеленого, такого же количества синего и полного отсутствия красного цвета.
Числовые значения его цветовых составляющих отображаются в полях ввода
справа от соответствующих ползунковых регуляторов.
Установим для обводки контура прямоугольника черный цвет, все значения цве-
товых составляющих которого равны нулю.
>• Переместите ползунковые регуляторы G (Зеленый) и В (Синий) влево так,
чтобы в полях ввода отобразились значения 0 (ноль). На образцах цвета
переднего плана (Set foreground color) на панели инструментов (Tools) и в
палитре Color (Цвет) вы увидите выбранный черный цвет.
Выбрать цвет вы можете также, щелкнув мышью, указатель которой примет
форму пипетки, на цветовой полосе в нижней части палитры Color (Цвет).
Установить черный цвет переднего плана и белый цвет фона, т.е. цвета по умол-
чанию, можно также щелкнув мышью на значке В - Default Foreground and
Background Colors (D) (Цвета переднего плана и фона по умолчанию) панели
инструментов (Tools).
Теперь можно выполнить обводку контура
выделения черным цветом.
I OK |
>• Выберите команду меню Edit * Stroke Width: 1 1 рх |
I Cartel |
(Правка » Обвести). На экране появится
Color: ЦЩ
диалог Stroke (Обводка) (Рис. 2.15).
В поле ввода Width (Толщина) следует
указать толщину обводки. Оставим пред- 1 О Inside <s> tenter О Outside

лагаемое по умолчанию значение 1 рх (1

пиксел) без изменения. Mode: [Normal 3

В поле Color (Цвет) указан черный цвет пе- QpacitY:| 100 [%

реднего плана, который будет использован О Ereseive Transparency

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

55
Adobe Photoshop для Web
Группа переключателей Location (Положение) позволяет выбрать положение
линии обводки относительно контура выделения: Inside (Внутри), Center (По
центру), Outside (Снаружи).
Открывающийся список Mode (Режим) поз-воляет выбрать режим наложения
пикселов.
В поле ввода Opacity (Непрозрачность) можно указать уровень непрозрачности
цвета. Значение 100% означает полную непрозрачность.
> Оставив все значения, предлагаемые по умолчанию, закройте диалог Stroke
(Обводка) нажатием кнопки ОК.
> Выберите команду меню Select •Deselect (Выделение • Отменить выделе,-
ние), чтобы снять выделение. Изображение в окне документа примет вид как
на Рис. 2.16.
UnUUed-l @100Z (RGB/81

Рис. 2.16. Обводка прямоугольника выполнена

Нарисуем справа от прямоугольника эллипс. Для создания области выделения в
виде эллипса или круга используется инструмент [ОД - Elliptical Marquee
Tool (M) (Инструмент «Эллиптическая область» (М)). Предварительно его
следует выбрать.
> Установите указатель мыши на кнопке [Q| - Rectangular Marquee Tool (M)
(Инструмент «Прямоугольная область» (М)) на панели инструментов (Tools).

">' Нажмите и удерживайте клавишу

>• Не отпуская клавишу I Alt 1. щелкните мышью на кнопке [[!],( - Rectangular

Marquee Tool (М) (Инструмент «Прямоугольная область» (М)). Будет выбран
инструмент (ОД - Elliptical Marquee Tool (M) (Инструмент «Эллиптическая
область» (М)), и вы увидите его нажатую кнопку.

> Отпустите клавишу II Alt I.

Вычерчивание овальной области выделения выполняется так же, как и прямо-
угольной.
•i
>• Установите указатель мыши в окне документа, правее верхнего правого угла
нарисованного прямоугольника.
>• Нажмите и удерживайте левую кнопку мыши.

56
 Подготовка графики с помощью программ Photoshop и ImageReady
>• Не отпуская левую кнопку мыши, переместите указатель мыши вправо вниз
так, чтобы появившаяся пунктирная эллиптическая область выделения
расположилась в правой части окна документа.
> Отпустите левую кнопку мыши. Эллиптическая область выделения будет
закреплена (Рис. 2.17).
"Й, Untitled-1 & 100* (RGB/8)

Рис. 2.17. Эллиптическая область выделения создана

Чтобы нарисовать выделенную область в виде круга, следует при перемещении
мыши удерживать нажатой клавишу ll s h i f l b Для рисования эллиптической области
•от центра необходимо при перемещении указателя мыши удерживать нажатой
клавишу II Alt I.
Для выбора цвета заливкд эллипса воспользуемся еще одним, новым способом.
>• Щелкните мышью на образце цвета переднего плана (Set foreground
color) на панели инструментов (Tools). На экране появится диалог Color
Picker (Палитра цветов) (Рис. 2.18).
Этот диалог предоставляет самые широкие возможности по установке цвета.
Определять цвет можно визуально по спектральной шкале и цветовому полю
или с помощью ввода числовых значений составляющих любой из используе-
мых цветовых моделей. Спектральная шкала и цветовое поле выводят на экран
цвета в двух моделях - RGB и HSB.

i
IfL,
OS: [О |% О а: [И

° В: 1° % Ь;
! ° 12 |
О R: [Я | ' C:[75_J%
OG: [0_J M:[68_J%
О В: [0 } t Y:[67_j%
К: 190 1%

Рис. 2.18. Диалог Color Picker (Палитра цветов)

57
Adobe Photoshop для Web
В цветовой модели HSB цвет описывается тремя составляющими - цветовым
оттенком Н (Hue), насыщенностью S (Saturation) и яркостью В (Brightness).
Спектральная шкала - узкая вертикальная полоса в центральной части диалога -
отображает цветовой диапазон включенной цветовой составляющей: Н (Цвето-
вого оттенка), S (Насыщенности), В (Яркости), R (Красной), G (Зеленой),
В (Синей). По умолчанию включена составляющая Н (Цветовой оттенок).
Цветовое поле слева от спектральной шкалы отображает цветовой диапазон
оставшихся двух составляющих цветовой модели: одной - по горизонтальной,
а другой - по вертикальной оси. При установленном по умолчанию переключа-
теле цветового оттенка Н на спектральной шкале отображается полный спектр.
>• Перемещайте ползунок регулятора вдоль спектральной шкалы. Таким образом
вы определяете цветовой оттенок, а цветовое поле отображает цветовое про-
странство этого оттенка по насыщенности - горизонтальная ось и по яркости -
вертикальная.
>• Установите переключатель S (Насыщенность). Вертикальная полоса отобра-
зит насыщенность в диапазоне от 0% внизу до 100% вверху.
>• Переместите ползунок регулятора вертикальной полосы максимально вверх.
Теперь цветовое поле отображает по горизонтали спектр цветовых оттенков,
а по вертикали - яркость.
>• Установите переключатель R (Красный), включив таким образом красную
составляющую. На спектральной шкале будет представлен цветовой диапа-
зон красной составляющей от 0 в нижней точке до 255 - в верхней, а в цвето-
вом поле - соответственно диапазон синей составляющей по горизонтальной
оси и зеленой - по вертикальной.
Для указания цвета следует переместить ползунок регулятора вдоль вертикаль-
ной полосы и щелчком мыши выбрать цвет в цветовом поле. Числовые значения
цветовых составляющих отобразятся в полях ввода в правой части диалога.
>• Выберите указанным способом любой цвет для заливки эллипса.
Справа от вертикальной полосы, вверху, представлены два небольших цветовых
поля: в нижнем отображается текущий цвет, а в верхнем - полученный в резуль-
тате выбора. I
Если выбранный цвет не входит в палитру Web, то справа от этих полей появится
предупреждающий значок в виде куба ©, а под значком - образец ближайшего
цвета из Web-палитры. Чтобы выбрать безопасный цвет Web, достаточно щелк-
нуть мышью на образце или на значке ф. Но сейчас этого делать не следует.
Цвета будут заменены в процессе оптимизации. Напомним, что безопасная Web-
палитра содержит 216 цветов, которые гарантировано отображаются всеми брау-
зерами во всех операционных системах.

58
 Подготовка графики с помощью программ Photoshop и ImageReady
Если новый цвет не имеет аналогов в цветовой модели CMYK, т.е. не входит в
цветовой охват этой модели, то рядом появляется предупреждение в виде тре-
угольника с восклицательным знаком Д. Под треугольником выводится цвето-
вое поле с ближайшим CMYK-эквивалентом выбранного цвета. Этот эквивалент
можно принять, если щелкнуть мышью на треугольнике или образце.
В цветовой модели CMYK цвет определяется четырьмя основными составляю-
щими: голубой (Cyan), пурпурной (Magenta), желтой (Yellow) и черной (Black).
Эта модель используется преимущественно для создания изображений, предна-
значенных для полиграфического исполнения. Ее цветовой охват значительно
меньше, чем цветовой охват модели RGB. Если изображение создается для Web,
т.е. для просмотра на экране монитора, то использовать цвета, входящие в охват
модели CMYK нет необходимости.
После выбора цвета в поле ввода # в нижней части диалога отобразится его
шестнадцатеричное числовое значение, каждые два символа которого слева на-
право характеризуют значения соответственно красной, зеленой и синей RGB-
составляющей.
Если установить флажок Only Web Colors (Только цвета Web), то на спектраль-
ной шкале и в цветовом поле будут отображаться только безопасные цвета Web.
Нажатие кнопки Custom (Пользовательские) вызовет на экран диалог Custom
Colors (Пользовательские цвета) (Рис. 2.19), в котором вы можете выбрать.под-
ходящий цвет из различных цветовых, библиотек.

Туре з color name to

select it in the cdor list

Puc. 2.19. Диалог Custom Colors (Пользовательские цвета)

> Нажав кнопку ОК, закройте диалог Color Picker (Палитра цветов). Выбран-
ный цвет отобразится на образцах в палитре Color (Цвет) и на панели инст-
рументов (Tools).
Adobe Photoshop для Web
Зальем цветом выделенную эллиптическую область следующим образом.
>• Выберите команду меню Edit » Fill (Правка + Залить). На экране появится
диалог Fill (Заливка) (Рис. 2.20)'.

- Blending •
Mode: [Normal

Opacity: [IPO |%
П EJesarve Transparency

Puc. 2.20. Диалог Fill (Заливка)

В открывающемся списке Use (Использовать) вы можете выбрать, какой цвет
использовать для заливки: Foreground Color (Цвет переднего плана),
Background Color (Цвет фона), Black (Черный), 50% Gray (50% серого),
White (Белый) и другие возможности.
>• Оставив установленный по умолчанию цвет переднего плана (Foreground
Color), закройте диалог Fill (Запивка) нажатием кнопки ОК. Выделенная об-
ласть будет заполнена выбранным цветом.
В процессе создания рисунка может возникнуть необходимость нарисовать тол-
стую прямоугольную рамку или кольцо. Для этого достаточно сжать выделенную
область и залить ее цветом фона. Посмотрим, как это выполнить практически.
>• Не отменяя выделения эллиптической области, выберите команду меню Select *
Modify • Contract (Выделение * Модификация * Сжать). На экране появится
диалог Contract Selection (Сжатие выделения) (Рис. 2.21).
Contract Selection £3|

Contract By: |l Joixeb 1 OK |

| Cancel |

Puc. 2.21. Диалог Contract Selection (Сжатие выделения)

> В поле ввода Contract By (Сжать на) введите 16 пикселов.
> Нажав кнопку ОК, закройте диалог Contract Selection (Сжатие выделения).
Эллиптическая область выделения будет сжата на 16 пикселов.
Чтобы расширить область выделения следует выбрать команду меню Select *
Modify * Expand (Выделение * Модификация * Расширить).
 Подготовка графики с помощью программ Photoshop и ImageReady
Зальем сжатую выделенную область белым цветом фона.
> Выберите команду меню Edit * Fill (Правка * Залить). На экране появится
диалог Fill (Заливка).
v В открывающемся списке Use (Использовать) выберите Background Color
(Цвет фона).
> Закройте диалог F i l l (Заливка), нажав кнопку ОК. Сжатая эллиптическая
выделенная область будет заполнена белым цветом фона (Рис. 2.22).
"ft Urililled-l @ 100% (RGB/8)

Рис. 2.22. Кольцо нарисовано

> Нажмите комбинацию клавиш || ctn |+|(р|. чтобы снять выделение.

Данная комбинация и все другие комбинации буквенных клавиш работают в
Adobe Photoshop только, если включен язык клавиатуры Английский (США)
(English (USA)).
В этом разделе мы рассмотрели приемы создания областей выделения правиль-
ной формы. Области выделения неправильной формы можно получить с помо-
щью инструмента [?^| - Lasso Tool (L) (Инструмент «Лассо» (L)), перетаскивая
указатель мыши так, чтобы создать замкнутый контур. Многоугольную область
выделения легко построить с помощью инструмента [^] - Polygonal Lasso Tool (L)
(Инструмент «Многоугольное лассо» (L)), щелкая мышью в вершинах предпо-
лагаемой фигуры. Если же требуется создать контур неправильной формы с вы-
сокой точностью, например, выделить на фотографии фигуру человека, то наи-'
лучший результат можно получить с помощью инструмента [Т]- Pen Tool (P)
(Инструмент «Перо» (Р)).

Удаление объектов и отмена действий

Теперь нам нужно научиться отменять выполненные команды и операции и уда-
лять объекты. Это позволит в процессе создания рисунка при необходимости
вернуться на несколько шагов назад, чтобы сделать исправления в документе.
Отменить последнюю выполненную операцию можно, воспользовавшись ко-
мандой меню Edit » Undo (Правка * Отменить).
>• Выберите команду меню Edit » Undo Deselect (Правка » Отменить снятие выде-
ления) или нажмите комбинацию клавиш I С1г| 1+|Z|. Последняя выполненная
команда снятия выделения будет отменена, и выделение будет восстановлено.
61
Adobe Photoshop дПя Web
В Adobe Photoshop имеется специальная палитра
History (События), в которой записываются все опера-
ции, выполненные в окне документа.
>• Щелкните мышью на четвертом слева ярлыке
History (События) в нижнем окне палитр. Если этот
ярлык отсутствует, выберите команду меню Win-
dow * History (Окно » События). На экране появит-
ся палитра History (События).
> Увеличьте высоту окна палитры History (События), Рис. 2.23. Палитра
чтобы увидеть всю информацию, содержащуюся в History (События)
ней (Рис. 2.23).
В этой палитре вы видите перечень выполненных при работе над документом
операций. Каждая операция обозначена миниатюрой и названием. Последняя
выполненная операция - Fill (Заливка) - выделена темным цветом. Любую из
операций можно отменить несколькими способами.
> Чтобы отменить последнюю операцию заливки сжатой эллиптической облас-
ти цветом фона, перетащите значок этой операции - Fill (Заливка) - на кноп-
ку с изображением корзины |_й I - Delete current state (Удалить выделенную
операцию) в нижней части палитры History (События). Заливка сжатой эл-
липтической области белым цветом на рисунке будет удалена, а в палитре
History (События) будет выделена операция Contract (Сжатие).
Отменим также и эту операцию.
> Нажмите кнопку I и? I - Delete current state (Удалить выделенную опера-
цию) в нижней части палитры History (События). На экране появится диа-
лог с запросом подтверждения удаления выделенной операции (Рис. 2.24).
Adobe Photoshop

Delete state "Contract"?

Рис. 2.24. Диалог с запросом подтверждения удаления выделенной операции

> Нажмите кнопку Yes (Да), чтобы закрыть этот диалог и подтвердить необхо-
димость отмены операции Contract (Сжатие). Данная операция будет отме-
нена и эллиптическая область выделения примет свои прежние размеры, а в
палитре History (События) будет выделена операция Fill (Заливка).
Чтобы отменить несколько последних операций, следует щелкнуть мышью на
действии, которое находится в списке выше отменяемого.

62
 Подготовка графики с помощью программ Photoshop и ImageReady
> Щелкните мышью на операции Deselect (Отмена выделения). Следовавшие за
ней две операции Elliptical Marquee (Эллиптическая область) и Fill (Заливка)
будут отменены и выделенный эллипс исчезнет с рисунка.
Любой объект рисунка можно удалить также с помощью инструмента f^F| -
Eraser Tool (Е) (Инструмент «Ластик» (Е)). Его действие подобно ластику и
заключается в закрашивании рисунка цветом фона.
Удалим оставшийся на рисунке прямоугольник.
>• Нажмите кнопку \ff\ - Eraser Tool (Е) (Инструмент «Ластик» (Е)) на панели
инструментов (Tools), чтобы выбрать этот инструмент.
> Установите указатель мыши у левого верхнего угла прямоугольника в окне
документа. Указатель мыши примет вид круга.
Форма этого круга и его диаметр - 13 пикселов - соответствуют установленной
по умолчанию кисти, которая будет закрашивать рисунок цветом фона. Но такой
маленькой кистью работать будет неудобно, поэтому увеличим размер кисти.
Обратите внимание, что после выбора инструмента [^| - Eraser Tool (E) (Инст-
румент «Ластик» (Е)) на панели параметров (Options Bar), находящейся под по-
лосой меню, отображаются параметры этого инструмента (Рис. 2.25). У левого
края панели вы видите значок выбранного инструмента. Слева от этого значка
находится поле Brush (Кисть) с образцом активной кисти.
Opacity; ПоО% I > I Flow; I 100%ТП ft Er»s« to History
[£ ' Brush: *

Рис. 2.25. Панель параметров инструмента Eraser Tool(E)

(Инструмент «Ластик» (Е))

> Нажмите кнопку [j справа от поля образца Brush (Кисть) на панели парамет-
ров (Options Bar). На экране появится палитра кистей (Рис. 2.26).

Master Diameter

Hardnessi

Рис. 2.26. Палитра кистей

63
Adobe Photoshop для Web
В этой палитре представлены образцы готовых кистей различной формы и раз-
меров. Для выбора любой кисти достаточно щелкнуть мышью на ее образце.
Однако если нужной нам кисти среди образцов нет, то кисть можно изготовить.
Для этого существует несколько способов: модифицировать существующую
кисть, определить в качестве кисти фрагмент рисунка или создать новую кисть.
Воспользуемся последним способом.
> В поле ввода Master Diameter (Основной диаметр) введите новое значение
этого параметра - 50 пикселов. Одновременно в палитре кистей увеличится
размер кисти на образце.
Поле ввода Hardness (Жесткость) и соответствующий ему ползунковый регулятор
определяет размер жесткого центра кисти и задается в процентах от ее диаметра.
Он позволяет приблизительно имитировать реальную кисть с мягкими краями.
> Нажмите кнопку 0 в правом верхнем углу палитры кистей. На экране появится
меню.
>• Выберите в появившемся меню команду New Brush Preset (Новая кисть).
На экране появится диалог Brush Name (Имя кисти) (Рис. 2.27), в котором
следует указать имя новой кисти.

Рис. 2.27. Диалог Brush Name (Имя кисти)

На образце в левой части диалога отображаются текущая форма и размер кисти.
Ее название - Hard Round 50 1 (Жесткая, круглая, 50 1) - указано в поле ввода
Name (Имя).
>• В поле ввода Name (Имя) укажите имя Новая кисть и нажмите кнопку ОК,
чтобы закрыть диалог Brush Name (Имя кисти).
Созданная кисть и ее размер отобразятся в палитре Brushes (Кисти) в конце
перечня образцов. Ее имя появляется во всплывающей подсказке при наведе-
нии указателя мыши на кисть.
>- Щелкните мышью на свободном пространстве рабочего окна, чтобы закрыть
палитру кистей.
Теперь можно с помощью инструмента f^| - Eraser Tool (E) (Инструмент
«Ластик» (Е)) удалить прямоугольник на рисунке.
>• Установите указатель мыши на прямоугольнике в окне документа. Вы увидите,
что теперь размер указателя мыши - круглой кисти - значительно больше,
чем прежде.
64
 Подготовка графики с помощью программ Photoshop и ImageReady
> Нажмите и удерживайте левую кнопку мыши.
>• Не отпуская левую кнопку мыши, перемещайте указатель мыши по прямоуголь-
нику вправо и влево, пока весь объект не будет закрашен белым цветом фона.
> Отпустите левую кнопку мыши, когда прямоугольник будет полностью удален.
Итак, мы познакомились с приемами рисования и удаления простых объектов.
Теперь можно приступить к созданию баннера.

Начинаем изготовление баннера

Баннер, который мы создадим, будет состоять из простого логотипа компании
ГЕОТОН и двух сменяющих друг друга анимированных надписей, приглашаю-
щих посетить сайт компании. Начнем с подготовки логотипа, который, в свою
очередь, будет состоять из трех объектов, размещенных
один внутри другого: текста, эллипса и прямоугольника
(Рис. 2.28) Для объектов логотипа установим синий цвет.
>• Выведите на экран палитру Color (Цвет), щелкнув мы- рис 2.28. Логотип
шью на ее ярлыке.
> С помощью ползунковых регуляторов палитры Color (Цвет) установите зна-
чения красной (R), зеленой (G) и синей (В) составляющих цвета соответст-
венно 32,112, 239. Выбранный синий цвет отобразится на образцах цвета пе-
реднего плана палитры Color (Цвет) и панели инструментов (Tools).
Обратите внимание, что после установки цвета в палитре Color (Цвет) под об-
разцами появился треугольный значок с восклицательным знаком Д - Warning:
out of gamut for printing (Предупреждение: выход за пределы цветового охвата
для печати), предупреждающий о том, что выбранный цвет не входит в цветовой
диапазон модели CMYK. Справа от треугольного значка отображается поле с
ближайшим CMYK-эквивалентом выбранного цвета. Напомним, что для Web-
графики цветовой охват CMYK не имеет значения, так как Web-изображения не
пред назначены .для полиграфического исполнения.
Нарисуем в левой части окна документа прямоугольную область размером
150x50 пикселов, которую затем заполним выбранным цветом.
' ' (г 1
> Удерживая нажатой клавишу II Alt I. три раза нажмите кнопку |Q| - Elliptical
Marquee Tool (M) (Инструмент «Эллиптическая область» (М)) на панели ин-
струментов (Tools). Будет выбран инструмент [О] - Rectangular Marquee
Tool (М) (Инструмент «Прямоугольная область» (М)).
Adobe Photoshop позволяет создавать области выделения заранее заданных раз-
меров, для указания которых и определения других свойств объекта использует-
ся панель параметров (Options Bar) (Рис. 2.29). Панель с параметрами каждого
65
3 - 6645
Adobe Photoshop для Web
инструмента всегда открывается при выборе инструмента. Элементы управле-
ния этой панели зависят от выбранного инструмента.
IftCll F«>b.ri|0p» 1 riAnli-»li»!«d Slylm iNornul _JHI Width: «* Ч**1'

Puc. 2.29. Панель параметров инструмента Rectangular Marquee

Tool (M) (Инструмент «Прямоугольная область» (М))
> В открывающемся списке Style (Стиль) панели параметров (Options Bar)
выберите Fixed Size (Фиксированный размер), чтобы создать прямоугольную
область определенного размера.
Теперь в полях ввода Width (Ширина) и Height (Высота) следует указать разме-
ры области выделения.
>. Дважды щелкните мышью в поле ввода Width (Ширина), чтобы выделить
числовое значение в нем.
> Введите с клавиатуры значение ширины прямоугольной области - 150 рх
(150 пикселов).
>• В поле ввода Height (Высота) введите высоту прямоугольника - 50 рх
(50 пикселов), предварительно выделив двойным щелчком мыши находящееся
там число.
Установка параметра Feather (Растушевка) создает плавный переход между
пикселами выделенной области и пикселами, окружающими ее. Это делает края
выделенной области расплывчатыми и исключает резкий переход.
Установка флажка Anti-aliased (Сглаживание) позволяет свести до минимума
контраст на границах между пикселами и создает более мягкие переходы между
объектами.

Следует следить за тем, чтобы у инструментов выделения и заливки

всегда был установлен флажок Anti-aliased (Сглаживание). Это позво-
лит исключить резкие контрасты в изображении.

Чтобы точнее расположить создаваемую область выделения, воспользуемся па-

литрой Info (Информация).
>• Щелкните мышью на ярлыке Info (Информация) в верхнем окне палитр. Если
этот ярлык отсутствует, выберите команду меню Window » Info (Окно »
Информация). На экране появится палитра Info (Информация) (Рис. 2.30).
Эта палитра является своеобразным информационным табло, отслеживающим
ваши действия и дающим им точное числовое соответствие. По умолчанию па-
литра отображает параметры цвета пикселов, по которым перемещается указатель

66
 Подготовка графики с помощью программ Photoshop и ImageReady
мыши, координаты курсора X и Y, ширину W и высоту
Н создаваемого объекта. Параметры цвета пикселов
отображаются в моделях RGB и CMYK
>• Переместите указатель мыши в окно документа. Вы
увидите, что в палитре Info (Информация) появи-
лись числовые значения - 255 - для RGB-
составляющих и 0% - для CMYK-составляющих, Рис. 2.30. Палитра Info
которые соответствуют белому цвету фона. (Информация)

При перемещении указателя мыши в окне документа также постоянно изменя-

ются координаты указателя мыши X и Y, отслеживая его текущее положение.
Эти координаты отсчитываются от верхнего левого угла рисунка, причем ось X
направлена вправо, а ось Y - вниз. Координаты указателя мыши по умолчанию
измеряются в сантиметрах. Однако, поскольку размеры прямоугольника мы за-
дали в пикселах, то нам было бы удобнее, если бы и координаты указателя
мыши выражались в пикселах. Поэтому изменим соответствующую установку.
> Нажмите кнопку 0 в правом верхнем углу палитры Info (Информация) и в
появившемся меню выберите команду Palette Options (Параметры палитры).
На экране появится диалог Info Options (Параметры палитры «Информация»)
(Рис. 2.31).
| Info Option: О!

[„.l....^-.-...,,'
Mode: | Actual Color Е]
| .Cancel |

Mode: | CMYK Color El

Buler Units: | Centimeters [»]

П Show 16 bit values

Puc. 2.31. Диалог Info Options (Параметры палитры «Информация»)

Два верхних открывающихся списка идентичны и определяют отображение в
определенной цветовой модели цветовых составляющих пикселов, по которым
перемещается указатель мыши.
Установка флажка Show 16 bit values (Показывать 16-битные значения) требу-
ется только тогда, когда для рисунка выбрана цветовая модель RGB с 16 битами
на каждый цвет. '
>• В нижнем открывающемся списке Ruler Units (Единицы) выберите Pixels
(Пикселы).

67
Adobe Photoshop для Web
>• Закройте диалог Info Options (Параметры палитры «Информация»), нажав
кнопку ОК. ,
Теперь в палитре Info (Информация) координаты указателя мыши и размеры
объектов будут отображаться в пикселах.
Создадим прямоугольную область выделения заданного размера и зальем ее
цветом.
>• Установите указатель мыши у левого верхнего угла окна документа так,
чтобы в палитре Info (Информация) отобразились его координаты: Х:5, Y:5.
>• Щелкните мышью в этой точке. В окне документа появится прямоугольная
область выделения, а в палитре Info (Информация) отобразятся ее размеры:
W:150,H:50.
>• Залейте созданную прямоугольную область выделения выбранным ранее цве-
том, воспользовавшись инструментом [^] - Paint Bucket Tool (G) (Инструмент
«Заливка» (G)).
>• Выберите команду меню Select • Deselect (Выделение * Отменить выделение),
чтобы снять выделение области.
Теперь нам нужно создать внутри прямоугольника эллиптическую область с
размерами горизонтальной и вертикальной осей соответственно 140 и 40 пиксе-
лов и залить ее белым цветом фона.
; нажмите кнопку [О] - Rectangular
Marquee Tool (М) (Инструмент «Прямоугольная область» (М)) на панели ин-
струментов (Tools). Будет выбран Инструмент [Q] - Elliptical Marquee Tool
(М) (Инструмент «Эллиптическая область» (М)), а на панели параметров
(Options Bar) появятся соответствующие элементы управления.
> Убедитесь, что в открывающемся списке Style (Стиль) панели параметров
(Options Bar) выбрано Fixed Size (Фиксированный размер).
>• В полях ввода Width (Ширина) и Height (Высота) панели параметров
(Options Bar) введите соответственно размеры горизонтальной - 140 рх - и
вертикальной - 40 рх - осей эллипса.
Нарисуем эллиптическую область выделения заданного размера внутри прямо-
угольника.
>• Установите указатель мыши у левого верхнего угла прямоугольника так, что-
бы в палитре Info (Информация) отобразились координаты указателя мыши:
X:10,Y:10.
>• Щелкните мышью в этой точке. Внутри прямоугольника будет создана эл-
липтическая выделенная область, размеры которой вы увидите в палитре Info
(Информация).
 Подготовка графики с помощью программ Photoshop и ImageReady
Зальем область выделения белым цветом фона.
> Выберите команду меню Edit * Fill (Правка * Залить). На экране появится
диалог Fill (Заливка).
> Убедитесь, что в открывающемся списке Use (Использовать) выбрано
Background Color (Цвет фона).
> Закройте диалог Fill (Заливка) нажатием кнопки ОК. Эллиптическая область
выделения будет залита белым цветом.
i
>• Отмените выделение, выбрав команду меню Select » Deselect (Выделение »
Отменить выделение). Изображение примет вид, как на Рис. 2.32.

Рис. 2.32. Прямоугольник и эллипс созданы

Так как наш баннер создается на белом фоне, то можно сделать по его перимет-
ру тонкую рамку, чтобы границы баннера были видны, если фон Web-страницы
будет белым2. Для этого следует выделить весь рисунок.
>• Выберите команду меню Select * АИ (Выделение * Все). Весь рисунок в окне
документа будет выделен, и вдоль его краев появится рамка выделения.
Обведем контур выделения цветом переднего плана.
> Выберите команду меню Edit » Stroke (Правка * Обвести). На экране появится
диалог Stroke (Правка » Обводка).
>• Не изменяя предлагаемых параметров, закройте этот диалог нажатием кноп-
ки ОК.
> Отмените выделение документа, нажав комбинацию клавиш I c t r l 1+1ГР|. Вы
увидите, что вокруг рисунка появилась тонкая рамка.
Прежде чем продолжить создание баннера, сохраним рисунок, чтобы не поте-
рять его при возможных сбоях в работе компьютера или отключении электропи-
тания. Мы уже говорили о том, что для использования изображения на Web-
странице оно должно быть сохранено в одном из Web-форматов: GIF, JPG или
PNG. Однако промежуточные сохранения следует выполнять в собственном
формате Adobe Photoshop - PSD, так как только в данном формате можно со-
хранить изображение без потери качества. Это позволит при необходимости
вернуться к редактированию отдельных объектов.

!
Следует отметить, что рамку вокруг рисунка на Web-странице можно создать средствами HTML.

69
Adobe Photoshop для Web
>• Выберите команду меню File » Save (Файл » Сохранить). На экране появится
диалог Save As (Сохранить как) (Рис. 2.33).

Папка | U Web • |*J О if Е? ИЗ"

Имя Файла: [Untitled-1 { | Сохранить ]

Eoimat |Pho>Qshop (".PSD/.POD) [^J | Отмена |

Save: П As a Cop* О Snratattor»'

П Abba Chmneb Osuptcctos
OL««J
Color: П Use Pwof Setup; Waking CMfK
H Iff Profile: SRQB IEC61966-2.1

0 Ihurrtbnjll 0 Use Lower Case Extension

4
Puc. 2,33. Диалог Save As (Сохранить как)
> Откройте папку, в которой вы хотите сохранить рисунок.
>• В поле ввода Имя файла (File name) удалите имя, предлагаемое по умолча-
нию, и введите Geoton - так мы назовем этот документ. Расширение имени
файла указывать не обязательно. Оно будет добавлено автоматически.
х Нажмите кнопку Сохранить (Save), чтобы закрыть диалог Save As (Сохра-
нить как). Рисунок будет сохранен в. файле с указанным, именем и это имя -
Geoton.psd - появится в заголовке окна документа.
При последующих периодических сохранениях рисунка командой меню File Ф
Save (Файл * Сохранить) диалог Save As (Сохранить как) уже появляться не
будет, а файл будет сохраняться в той же папке и под тем же именем. Если же
потребуется сохранить файл на другом диске, в другой папке или под другим
именем, то для этого нужно будет воспользоваться командой меню File » Save
As (Файл » Сохранить как).
Для закрытия текущего документа используется команда меню File » Close
(Файл • Закрыть) или кнопка [х] в правом верхнем углу окна документа.
Открыть ранее сохраненный рисунок можно с помощью команды меню File »
Open (Файл » Открыть) или комбинации клавиш 1Г^

70
 Подготовка графики с помощью программ Photoshop и ImageReady

Текст Эля Лайнера

Наша следующая задача - добавить в создаваемый логотип надпись ГЕОТОН.
Когда в рисунок добавляется текст, он помещается на новый отдельный слой.
Слои дают возможность редактировать отдельные элементы изображения неза-
висимо друг от друга. Вы можете рисовать, редактиро-
вать, вклеивать и перемещать содержимое любого
слоя, не изменяя при этом объекты, расположенные I 100% |> |

на других слоях. Управление слоями осуществляется с FiB: I 100% I > I

помощью специальной палитры Layers (Слои).

> Щелкните мышью на первом слева ярлыке Layers
(Слои) в нижнем окне палитр. Если такой ярлык от-
сутствует, выберите команду меню Window * Layers О. а а в. а а
(Окно * Слои). На экране появится палитра Layers
(Слои) с перечнем имеющихся в документе слоев Рис. 2.34. Палитра
(Рис. 2.34). Layers (Слои)

В данный момент наш документ состоит из одного основного слоя, который на-
зывается Background (Фон). Этот слой создается при создании нового документа.
В палитре Layers (Слои) каждому слою соответствует миниатюра и имя. Миниа-
тюра слева от имени слоя в уменьшенном виде отображает его содержимое. Все
миниатюры динамически обновляются в процессе редактирования слоев.
Значок в виде открытого глаза ф у левого края строки с названием слоя позволя-
ет выключить отображение этого слоя, чтобы оно не мешало работе с другими
слоями.
Остальные элементы управления палитры Layers (Слои) мы рассмотрим позд-
нее, а сейчас добавим в логотип надпись - название компании ГЕОТОН. Все
надписи на рисунках выполняются с помощью инструмента [Т] - Horisontal
Type Tool (Т) (Инструмент «Горизонтальный текст» (Т)).
>• Нажмите кнопку [Т] - Horisontal Type Tool (Т) (Инструмент «Горизонталь-
ный текст» (Т)), чтобы включить этот инструмент. На панели параметров
(Options Bar) отобразятся элементы управления данного инструмента
(Рис. 2.35), с помощью которых можно определить параметры текста.

Цх|в |
Рис. 2.35. Панель параметров инструмента Horisontal Type Tool (Т)
(Инструмент «Горизонтальный текст» (Т))
Кнопки [Щ[] - Change the text orientation (Изменить ориентацию текста) позволяет
изменить ориентацию текста с горизонтальной на вертикальную и наоборот.

71
Adobe Photoshop для Web
В первом слева открывающемся списке Set the font family (Установка семей-
ства шрифтов) на панели параметров (Options Bar) выберите один из имею-
щихся на вашем компьютере шрифтов, лучше из группы Arial.
Установите указатель мыши на рисунке в центре эллипса. Указатель мыши
примет форму |£|.
Щелкните мышью в этой точке. Появится текстовый курсор. Вид панели
параметров (Options Bar) изменится (Рис. 2.36).

Рис. 2.36. Панель параметров инструмента Horisontal Type Tool (Т)

(Инструмент «Горизонтальный текст» (Т))
> Введите в окне документа надпись: ГЕОТОН. Начало этой надписи будет по-
мещено в точку ввода, т.е. в ту точку, в которой вы щелкнули мышью, так как
по умолчанию на панели параметров (Options Bar) нажата кнопка [SI - Left
align text (Левостороннее выравнивание текста).
Теперь выделим введенный текст и изменим начертание, размер и другие
параметры.
>• Нажмите и удерживайте клавишу |[ shift i.
> Не отпуская клавишу [shift], нажмите 6 раз клавишу Р-), чтобы выделить вве-
денную надпись.
>- Отпустите клавишу [s™J.
Теперь, когда текст выделен, можно изменить его параметры.

Не рекомендуется использовать для надписей очень тонкий шрифт и

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

> Во втором слева открывающемся списке Set the font style (Установка начер-
тания шрифта) выберите начертание шрифта ВоИ Italic (Наклонный полу-
жирный). Перечень доступных начертаний зависит от-выбранной гарнитуры.
> В третьем слева открывающемся списке Set the font size (Установка размера
шрифта) выберите 18 pt или 20 pt в зависимости от шрифта.
Три кнопки в правой части панели параметров (Options Bar) позволяют опреде-
лить положение текста относительно точки вставки: [iE] - Left align text (Лево-

72
 Подготовка графики с помощью программ Photoshop и ImageReady
стороннее выравнивание текста) - устанавливает левый край текста в точку
вставки; [Ж] - Center text (Центрирование текста) - центрирует текст относи-
тельно точки вставки; [Ж| - Right align text (Правостороннее выравнивание
текста) - устанавливает текст так, что его конец оказывается в точке вставки.
> Нажмите кнопку [Щ - Center text (Центрирование текста) на панели пара-
метров (Options Bar). Надпись ГЕОТОН будет центрирована на рисунке
относительно точки ввода.
Щелкнув мышью на поле с образцом цвета Set the text color (Установка цвета
текста) вы вызовете на экран диалог Color Picker (Палитра цветов), в котором
сможете выбрать цвет для текста. По умолчанию для надписи предлагается цвет
переднего плана.
В четвертом слева открывающемся списке Set the anti-aliasing method (Уста-
новка способа сглаживания) на панели параметров (Options Bar) можно выбрать
один из вариантов сглаживания шрифта: None (Нет) - сглаживание не применя-
ется; Sharp (Резкий) - текст выглядит наиболее резким; Crisp (Четкий) - текст
выглядит резким; Strong (Средний) - небольшая степень сглаживания; Smooth
(Сглаженный) — максимальная степень сглаживания. Напомним, что сглажива-
ние позволяет уменьшить контраст на границах символов и сделать их очерта-
ния более плавными. Благодаря использованию нескольких уровней сглажива-
ния в некоторых случаях можно добиться хорошей читаемости текста даже
малого размера.
> Выбирая из открывающегося списка Set the anti-aliasing method (Установка
способа сглаживания) различные значения, просмотрите, как изменяются
очертания символов надписи на рисунке при разных уровнях сглаживания
и при отсутствии сглаживания. Выберите наиболее оптимальный, с вашей
точки зрения, вариант сглаживания.
С помощью кнопки |Х1 - Create warped text (Разме-
щение текста вдоль кривой) на панели параметров
(Options Bar) вы можете расположить введенный
текст вдоль кривой, а кнопка||§| - Togglt the Character
and Paragraph palletes (Показать/скрыть палитры f! а
символов и абзацев) позволяет вызвать на экран допол-
нительные палитры для настройки параметров текста.
> Нажмите кнопку ЦЩ - Togglt the Character and Т Т ТТ Тт Г Т, I T
Paragraph palletes (Показать/скрыть палитры сим-
волов и абзацев) на панели параметров (Options
Bar). На экране появится совмещенная палитра
Рис. 2.37. Палитра
Character/Paragraph (Символ/Абзац). Палитра
Character (Символ)
Character (Символ) будет активной (Рис. 2.37).

73
Adobe Photoshop для Web
Палитру Character (Символ) можно вызвать на экран также командой меню
Window » Character (Окно » Символ), а палитру Paragraph (Абзац) - командой
меню Window • Paragraph (Окно * Абзац).
В палитре Character (Символ) так же, как и на панели параметров (Options Bar),
вы можете установить гарнитуру, начертание, размер и цвет шрифта. Но кроме
того, можно задать еще ряд специфических параметров.
В открывающемся списке Set the leading (Установка промежутка) можно опре-
делить расстояние между строками текста.
В открывающемся списке Set the kerning between two characters (Установка
промежутка между двумя символами) задается расстояние между двумя сосед-
ними буквами. Перед выбором значения из списка следует установить текстовый
курсор в нужном месте.
В открывающемся списке Set the tracking for the selected characters (Уста-
новка слежения для выбранных символов) можно выбрать расстояние между
буквами в определенном слове или текстовом блоке, который предварительно
следует выделить.
В полях ввода Vertically scale (Вертикальный масштаб) и Horizontally scale
(Горизонтальный масштаб) определяется соответственно вертикальный и гори-
зонтальный масштаб текста. ч
В поле ввода Set the baseline shift (Установка сдвига базовой линии) вы можете
указать сдвиг базовой линии, определяющий начальное смещение текста. Положи-
тельное значение сдвигает текст вправо и вверх, отрицательное - влево и вниз.
В предпоследней строке расположены кнопки для форматирования символов
верхнего или нижнего индекса, подчеркнутых, зачеркнутых и т.п.
В левом нижнем углу палитры расположен открывающийся список Set the
language on selected characters for hyphenation and spelling (Установить язык
для выбранных символов для целей переноса и проверки орфографии).
В меню палитры Character (Символ), которое открывается при нажатии кнопки
©, доступны дополнительные команды форматирования, среди которых отме-
тим следующие:
Faux Bold (Имитация полужирного) и Faux Italic (Имитация курсива) - позво-
ляют установить соответствующее начертание даже для семейств шрифтов,
которые не содержат эти стили;
Fractional Width (Дробная ширина). При включенном режиме расстояние между
символами текста измеряется не в целых пикселах, а в дробных. Это позволяет в
большинстве случаев придать тексту более привлекательный вид и-улучшить
его читаемость. Однако применение дробной ширины для шрифтов малого раз-
мера, менее 20 пунктов, может ухудшить их представление и затруднить чтение.
Для таких шрифтов режим Fractional Width (Дробная ширина) лучше отменить.
74
 Подготовка графики с помощью программ Photoshop и ImageReady
В палитре Paragraph (Абзац) определяются параметры абзаца: выравнивание,
отступы, пробелы до и после абзаца, расстановка переносов.
>• Закройте совмещенную палитру Character/Paragraph (Символ/Абзац), нажав
кнопку [х] в правом верхнем углу ее окна.
> Для окончания ввода текста нажмите кнопку \\/\ у правого края панели пара-
метров (Options Bar). Надпись на рисунке будет закреплена (Рис. 2.38).
V; Geolon psd C'a \OOZ |f tOTOH. RGB/U)

Рис. 2.38. Надпись введена

Для отмены ввода текста достаточно нажать на панели параметров кнопку [®1 -
Cancel any current ededits (Отменить все текущие правки).

Закончить ввод текста можно также, нажав клавишу |[Enterj на цифровой клавиа-
туре или комбинацию клавиш\( см l+pnter| на основной клавиатуре.

Обратите внимание, что в палитре Layers (Слои) появился новый текстовый слой,
которому по умолчанию присвоено имя, соответствующее введенной надписи.
Этот слой помечен символом Т - текстовый - и выделен темным цветом, что оз-
начает, что в данный момент слой активен, т.е. именно к нему будут относиться
все ваши действия. На то, что слой активен, указывает также имя слоя, появив-
шееся в заголовке окна документа.
Но очень вероятно, что в палитре Layers (Слои) и в заголовке окна документа
имя слоя отображается неправильно. Это связано с тем, что Adobe Photoshop не
всегда правильно отображает русские шрифты. В таком случае, чтобы в даль-
нейшем было удобно работать, слою нужно присвоить английское имя и поряд-
ковый номер.
> Нажмите кнопку 0 в правом верхнем углу палитры Layers (Слои) и в поя-
вившемся меню выберите команду Layer Properties (Свойства слоя). На эк-
ране появится диалог Layer Properties (Свойства слоя) (Рис. 2.39).

Name: ГЕОТОН I L ок
Cancel
Color: |D None

Рис. 2.39. Диалог Layer Properties (Свойства слоя)

> В поле ввода Name (Имя) введите новое название слоя - Layer 1 (Слой 1).

75
Adobe Photoshop для Web
> Нажав кнопку OK, закройте диалог Layer Properties (Свойства слоя). В за-
головке окна документа и в палитре Layers (Слои) отобразится новое имя
слоя (Рис. 2.40).

Lock: Q

о. а а е>. a a
Рис. 2.40. Текстовый слой переименован
Теперь нам нужно переместить надпись ГЕОТОН в центр эллипса. Перемещение
слоев и выделенных областей в Adobe Photoshop выполняется инструментом |К^| -
Move Tool (V) (Инструмент «Перемещение» (V)).
> Нажмите кнопку [KjT| - Move Tool (V} (Инструмент «Перемещение» (V)) на
панели инструментов (Tools), чтобы выбрать этот инструмент.
> Установите указатель мыши, который примет форму Kj., в окне документа на
надписи ГЕОТОН.
>• Нажмите и удерживайте левую кнопку мыши.
>• Не отпуская левую кнопку мыши, переместите надпись ГЕОТОН так, чтобы
она была расположена в центре эллипса.
> Отпустите левую кнопку мыши. Новое положение надписи будет закреп-
лено (Рис. 2.41).
ГЙ Geolon.psd @ 100% (Layer 1. RGB/8)

Рис. 2.41. Надпись центрирована

Для точного перемещения слоя или выделенной области используйте клавиши
управления курсором |[Т]. 1ГП. |[-»]. IFI. Каждое нажатие одной из этих клавиш
при выбранном инструменте [KJE] - Move Tool (V) (Инструмент «Перемещение»
(V)) перемещает объект на один пиксел в соответствующем направлении. Если
при нажатии одной из этих клавиш удерживать нажатой клавишу ffwjtj, то объект
будет перемещаться на 10 пикселов.

76
 Подготовка графики с помощью программ Photoshop и ImageReady
Сохраните рисунок, выбрав команду меню File * Save (Файл * Сохранить).
При этом может появиться информационный диалог (Рис. 2.42), в котором
говорится о том, что если вы сбросите флажок Maximize compatibility (Мак-
симизировать совместимость), то у вас могут возникнуть проблемы при
использовании файлов *.psd в других программах.
Photoshop Foimal Options

В Maximize compatibiGty

Turning off Maximize Compatibility may interfere with the use oF PSD files in
other applications or with Future versions of Photoshop. Cancel |

This diabg can be turned off in PrsFerences > File Handling > РЙе Compatibility.

Puc. 2.42. Информационный диалог

Текстовый слой, а также выделенную область можно подвергать всевозможным
трансформациям: масштабировать, поворачивать, сжимать и растягивать, де-
формировать, зеркально отражать. Все эти операции выполняются командами
Free Transform (Произвольное преобразование) и Transform (Преобразование)
из меню Edit (Правка).
Если возникнет необходимость отредактировать или изменить параметры вве-
денного текста, то сделать это можно, щелкнув мышью на тексте при выбран-
ном инструменте [Т] и активном текстовом слое, который нужно редактировать.

Создаем новые слои

Создадим еще два текстовых слоя с надписями «Вам нужна локальная сеть?» и
«Заходите СЮДА!», расположенными на рисунке справа от логотипа, одна под
другой так, чтобы они могли сменять друг друга.
>•' Нажмите кнопку [Т] - Horisontal Type Tool (Т) (Инструмент «Горизонтальный
текст» (Т)) на .панели инструментов (Tools), чтобы выбрать этот инструмент.
> Щелкните мышью в окне документа, справа от созданного логотипа. В этом
месте появится текстовый курсор. В палитре Layers (Слои) появится новый тек-
стовый слой Layer 2.
>• Введите первую надпись: Вам нужна локальная сеть?.
> Нажмите кнопку ЦЦ в правой части диалога, чтобы поместить текст справа
от точки ввода.
>• Выделите введенный текст в окне документа, протащив по нему указатель
мыши.
> В первом слева открывающемся списке Set the font family (Установка семей-
ства шрифтов) на панели параметров (Options Bar) выберите для надписи
подходящую гарнитуру шрифта из установленных на вашем компьютере.
77
Adobe Photoshop для Web
>• Подберите также начертание и размер шрифта примерно 16-18 пунктов,
в зависимости от выбранной гарнитуры.
>• Нажмите кнопку [V] у правого края панели параметров (Options Bar).
Надпись будет закреплена. В палитре Layers (Слои) изменится имя нового
текстового слоя.
Восстановим прежнее имя нового слоя - Layer 2 (Слой 2).
> Выберите команду меню Layer • Layer Properties (Слой » Свойства слоя).
На экране появится диалог Layer Properties (Свойства слоя) (Рис. 2.39).
>• В поле ввода Name (Имя) введите Layer 2 и закройте диалог Layer Properties
(Свойства слоя) нажатием кнопки ОК. Новое имя отобразится в заголовке
окна документа и в палитре Layers (Слои).
х С помощью инструмента [Ё»1 - Move Tool (V) (Инструмент «Перемещение»
(V)) или клавиш управления курсором выровняйте надпись в свободном
пространстве окна рисунка по вертикали и горизонтали (Рис. 2.43).

Вам нужна локальная сеть?

Рис. 2.43. Надпись выровнена

Добавим поверх активного слоя следующий текстовый слой с надписью. Пред-
варительно следует вручную создать новый слой, так как щелчок мышью на
надписи при активном слое Layer 2 включит режим редактирования этого слоя.
> Нажмите кнопку | н | - Create a new Layer (Создать новый слой) у нижнего
края палитры Layers (Слои). В палитре появится и станет активным новый
слой, которому по умолчанию будет присвоено имя Layer 3 (Слой 3). Назва-
ние нового слоя вы увидите также в заголовке окна документа.
х Выберите инструмент [Т] - Horisontai Type Tool (Т) (Инструмент «Горизон-
тальный текст» (Т)) на панели инструментов (Tools) и щелкните мышью в
окне документа у правого края логотипа. В палитре Layers (Слои) появится
отметка в виде символа Т о том, что текущий слой Layer 3 - текстовый.
>• Введите с клавиатуры надпись: Заходите СЮДА!
>• Выделите надпись, протащив через нее указатель мыши, и выберите для нее
гарнитуру шрифта, начертание, а также размер приблизительно 20 пунктов.
Изменим цвет надписи на коричневый.

78
 Подготовка графики с помощью программ Photoshop и ImageReady
> Щелкните мышью на поле с образцом цвета Set the text color (Установка
цвета текста) панели параметров (Options Bar). На экране появится диалог
Color Picker (Палитра цветов).
Выберем цвет путем ввода числовых значений RGB-составляющих.
>• Дважды щелкните мышью в поле ввода R (Красный), чтобы выделить его число-
вое значение.
х В поле ввода R (Красный) введите 142.
> Нажмите клавишу Р^"1. чтобы переместить фокус в поле ввода G (Зеленый)
и выделить его числовое значение.
>• В поле ввода G (Зеленый) введите 90 и нажмите клавишу Р'Н. Фокус перемес-
тится в поле ввода В (Синий), числовое значение в котором будет выделено.
>• В поле ввода В (Синий) введите 52.
>• Закройте диалог Color Picker (Палитра цветов), нажав кнопку ОК. Заданный
цвет отобразится на образце в поле Set the text color (Установка цвета текста)
панели параметров (Options Bar). Надпись в окне документа будет окрашена в
заданный коричневый цвет.

>• Нажмите комбинацию клавиш l c t r l l+|[Enter], чтобы завершить ввод текста. В окне
рисунка добавленная надпись будет расположена на новом слое, поверх пре-
дыдущей надписи. Название нового слоя в палитре Layers (Слои) будет из-
менено в соответствии с введенным текстом.
>• Переименуйте новый слой в Layer 3 (Слой 3). Для вызова диалога Layer
Properties (Свойства слоя) щелкните правой кнопкой мыши на названии
вновь созданного слоя в палитре Layers (Слои) и в появившемся контекстном
меню выберите команду Layer Properties (Свойства слоя).
> Воспользовавшись клавишами управления курсором при включенном инст-
рументе [*»] - Move Tool (V) (Инструмент «Перемещение» (V)) совместите
начало верхней надписи с началом нижней и выровняйте верхнюю надпись
по вертикали (Рис. 2.44).

Рис. 2.44. Надпись на слое Layer 3 выровнена

Кроме уже рассмотренного способа создания нового слоя с помощью кнопки
| а | - Create new Layer (Создать новый слой) у нижнего края палитры Layers
(Слои), создать новый слой вы можете и другими способами, например:
79
Adobe Photoshop для Web
Нажмите кнопку 0 в правом верхнем углу палитры Layers (Слои) и в поя-
вившемся меню выберите команду New Layer (Новый слой). На экране
появится диалог New Layer (Новый слой), в поле ввода которого Name (Имя)
для нового слоя предлагается имя Layer 4 (Слой 4) (Рис. 2.45).

Name: [Layer 4 'OK J

Q Use Previous Layer to Create Clbping Mask | Cancel "|
Color: |D None

№de: [Normal
П (No neutral cctor exists for Normal mode.)

Puc. 2.45. Диалог New Layer (Новый слой)

> Нажмите кнопку ОК, чтобы закрыть этот диалог и принять предлагаемое имя.
В палитре появится и станет активным новый слой, которому будет присвоено
имя Layer 4 (Слой 4). Название нового слоя вы увидите также в заголовке окна
документа.
Еще один способ создания слоя - командой меню.
>• Выберите команду меню Layer • New * Layer (Слой * Новый » Слой).
На экране появится диалог New Layer (Новый слой) (Рис. 2.45), в поле ввода
которого Name (Имя) предлагается имя - Layer 5 (Слой 5).
>• Закройте этот диалог нажатием кнопки ОК. В палитре Layers (Слои) поя-
вится и будет выделен новый слой Layer 5 (Слой 5). Его имя вы увидите
также в заголовке окна документа.
Если какой-либо слой не нужен, то его можно легко удалить, предварительно
сделав активным. Удалим слой Layer 5.
> Убедитесь, что слой Layer 5 активен. В палитре Layers (Слои) он должен
быть выделен темным цветом.
> Нажмите кнопку | ш | - Delete layer (Удалить слой) в нижней части палитры
Layers (Слои). На экране появится запрос подтверждения удаления (Рис. 2.46).

Рис. 2.46. Запрос подтверждения удаления слоя

> Нажмите кнопку Yes (Да), чтобы санкционировать удаление. Выбранный
слой исчезнет из палитры Layers (Слои). Активным станет слой Layer 4.

80
 .Подготовка графики с помощью программ Photoshop и ImageReady
Создадим на активном слое Layer 4 у его правого края рисунок открытой двери
(Рис. 2.47), чтобы посетителю сайта, увидевшему баннер, было понятно, куда
нужно заходить. Сначала нарисуем залитый прямоугольник
размером 63x50 пикселов, который будет символизировать
фрагмент некоторой стены.
Нажмите кнопку [П]]- Rectangular Marquee Tool (M) (Инст-
румент «Прямоугольная область» (М)) на панели инстру- Рис. 2.47.
ментов (Tools), чтобы выбрать этот инструмент и включить Открытая
панель параметров (Options Bar). дверь

> В открывающемся списке Style (Стиль) на панели параметров (Options Bar)

выберите Fixed Size (Фиксированный размер).
> В полях ввода Width (Ширина) и Height (Высота) панели параметров
(Options Bar) введите значения соответственно 63 рх (63 пиксела) и 50 рх
(50 пикселов).
> Выведите на экран палитру Info (Информация), щелкнув мышью на ее ярлыке.
> Установите указатель мыши в области рисования, в точке с координатами
X: 400, Y: 5. Эти координаты должны отобразиться в палитре Info (Информация).
> Щелкните мышью в указанной точке. На рисунке появится прямоугольная
область выделения, размеры которой вы увидите в палитре Info (Информация).
Зальем созданную область выделения коричневым цветом. Для этого установим
цвет переднего плана.
> Щелкните мышью на инструменте |^| - Eyedropper Tool (I) (Инструмент
«Пипетка» (I)), чтобы выбрать его.
> Для выбора коричневого цвета на рисунке щелкните мышью на букве Ю.
> Щелчком мыши выберите инструмент [^1 - Paint Bucket Tool (G) (Инстру-
мент «Заливка» (G)) на панели инструментов (Tools).
> Установите указатель мыши, который примет форму <$), внутри выделенной
области и щелкните мышью. Прямоугольник будет залит (Рис. 2.48).
ГК, Geolon.psd & 100% (Layer 4. RGB/8)

Рис. 2.48. На слое Layer 4 создан прямоугольник

> Выберите команду меню Select * Deselect (Выделение * Отменить выделение),
чтобы снять выделение объекта.

81
Adobe Photoshop для Web
Теперь внутри прямоугольника-«стены» нарисуем прямоугольник меньшего
размера - 30x40 пикселов - «дверную коробку».
> Щелчком мыши на кнопке [ПЦ - Rectangular Marquee Tool (M) (Инструмент
«Прямоугольная область» (М)) панели инструментов (Tools) выберите инст-
румент и откройте панель параметров (Options Bar).
> В полях ввода Width (Ширина) и Height (Высота) панели параметров
(Options Bar) введите значения соответственно 30 рх и 40 рх.
> Установите указатель мыши внутри нарисованного прямоугольника, в точке
с координатами X: 419, Y: 14- Эти координаты должны отобразиться в палитре
Info (Информация).
>• Щелкните мышью в указанной точке. На рисунке появится выделенная пря-
моугольная область заданного размера.
Вновь созданную область выделения следует залить белым цветом фона.
> Щелкните мышью на значке *}, - Switch Foreground and Background Colors (X)
(Переключение цвета переднего плана и фона (X)) на панели инструментов
(Tools), чтобы поменять местами образцы цвета.
> Нажмите кнопку [<^ - Paint Bucket Tool (G) (Инструмент «Заливка» (G)) на
панели инструментов (Tools) и щелкните мышью внутри выделенной области.
Она будет залита белым цветом фона (Рис. 2.49).

Рис. 2.49. Внутренняя выделенная область залита цветом фона

Наша следующая задача - преобразовать выделенную область так, чтобы после
заливки и обводки она выглядела как открытая дверь. Чтобы точнее выполнить
эту операцию, следует увеличить масштаб отображения рисунка. Текущий мас-
штаб - 100% - вы видите в заголовке окна документа и в строке состояния
(Status Bar). Изменить масштаб можно с помощью инструмента [§Г| - Zoom
Tool (Z) (Инструмент «Масштаб» (Z)).
>• Нажмите кнопку [41 - Zoom Tool (Z) (Инструмент «Масштаб» (Z)) на панели
инструментов (Tools), чтобы выбрать этот инструмент.
>• Установите указатель мыши на рисунке, внутри выделенной области. Указа-
тель мыши примет форму <*^.
>• Щелкните мышью в этом месте. Масштаб отображения рисунка увеличится
на 100% и новое значение масштаба - 200% - отобразится в заголовке окна
документа и в строке состояния.

82
 Подготовка графики с помощью программ Photoshop и ImageReady
> Нажмите кнопку | в правом верхнем углу окна документа, чтобы развернуть
его на весь экран.
>• Щелкните еще несколько раз мышью, установив ее указатель на рисунке.
Каждый щелчок мышью будет увеличивать масштаб изображения на 100%.
Уменьшить масштаб отображения документа можно следующим способом:
Alt
>• Нажмите и удерживайте клавишу I I. Указатель мыши, установленный на
рисунке, примет форму €^.
Alt
> Не отпуская клавишу I I. щелкните несколько раз мышью на рисунке.
Каждый щелчок мыши будет уменьшать масштаб на 100%, и новое значение
масштаба будет отображаться в заголовке окна документа и в строке состоя-
ния (Status Bar).
Alt
>• Отпустите клавишу! I.
>• Установите масштаб изображения 400%.
та>
>• Нажмите клавишу Р 1. чтобы скрыть все палитры, закрывающие увеличен-
ное изображение.
> Воспользовавшись горизонтальной полосой прокрутки, переместите изобра-
жение в рабочем окне так, чтобы на экране была видна его правая часть и вы-
деленная прямоугольная область (Рис. 2.50).

Fit* Ed* Image U* Ми1 Fittci Vi«» ЩМм Help

Рис. 2.50. Изображение увеличено и перемещено

83
Adobe Photoshop для Web
Теперь можно выполнить преобразование области выделения.
у Выберите команду меню Edit * Transform » Skew (Правка * Преобразование *
Скос). В углах и серединах прямоугольной области выделения появятся 8 квад-
ратных маркеров, а в центре области - маркер центра вращения (Рис. 2.51).
Для преобразования формы объекта достаточно перета-
щить мышью его угловые маркеры. Перетаскивание боко-
вых маркеров наклоняет объект.
Сначала изменим положение левого" нижнего углового
маркера, перетащив его на середину нижней стороны бело- •Фт
го прямоугольника.
> Установите указатель мыши на левом нижнем угловом
маркере так, чтобы указатель мыши принял форму се-
рой стрелки ^. Рис. 2.51. Маркеры
> Нажмите и удерживайте левую кнопку мыши. преобразования

>• Не отпуская левую кнопку мыши, переместите квадрат-

ный маркер вправо, примерно к середине нижней сто-
роны белого прямоугольника.
>• Отпустите левую кнопку мыши. Новое положение мар-
кера будет закреплено. Форма выделенной области ста-
нет трапециевидной (Рис. 2.52).
\
Обратите внимание: в том месте, где область выделения
сжата, на рисунке стала частично видна надпись, находя- Рис. 2.52.
щаяся на нижележащем слое Layer 2. Левый нижний
>• Подобным же образом переместите верхний левый уг- угловой маркер
ловой маркер вправо, примерно на середину верхней перемещен
стороны белого прямоугольника так, чтобы левая сто-
рона выделенной прямоугольной области стала верти-

т
кальной (Рис. 2.53).
>• Переместите левый нижний квадратный маркер верти-
кально вверх на расстояние, примерно равное одной
четверти высоты области выделения (Рис. 2.54).
>• Нажмите клавишу [[Enter]. Маркеры преобразования ис-
чезнут. Форма преобразованной выделенной области Рис. 2.53.
будет закреплена. Левый верхний
Выполним обводку коричневым цветом преобразованной угловой маркер
области выделения. перемещен

84
 Подготовка графики с помощью программ Photoshop и ImageReady
Выберите команду меню Window * Tools
(Окно » Инструменты), чтобы отобразить панель
инструментов.
Щелкните мышью на значке *}, - Switch •Ф-
Foreground and Background Colors (X) (Пере-
ключение цвета переднего- плана и фона (X)) на
панели инструментов (Tools), чтобы поменять
местами образцы цвета.
Рис. 2.54. Левый нижний
Выберите команду меню Edit • Stroke (Правка *
угловой маркер
Обвести). На экране появится диалог Stroke
перемещен повторнр
(Обводка).
> Установите флажок Outside (Снаружи), чтобы выполнить обводку по наруж-
ному краю контура выделения.
> Нажатием кнопки ОК закройте диалог Stroke (Обводка). Контур выделения
будет обведен коричневым цветом переднего плана.
Зальем выделенную область оттенком коричневого цвета более светлым, чем
цвет выполненной обводки.
>• Нажмите клавишу Р»ТаЬ1. чтобы отобразить все палитры.
>• В полях ввода R (Красный), G (Зеленый) и В (Синий) палитры Color (Цвет)
введите значения цветовых составляющих соответственно 234, 201 и 176.
Светлый оттенок коричневого цвета вы увидите на образцах цвета переднего
плана палитры Color (Цвет) и панели инструментов (Tools).
> Щелчком мыши выберите инструмент [<^1 - Paint Bucket Tool (G) (Инстру-
мент «Заливка» (G)) на панели инструментов (Tools) и залейте выделенную
область, предварительно скрыв все палитры с помощью клавиши КТаЬ1.

>• Отмените выделение объекта, нажав комбинацию клавиш I c t r l I+JD|.

Нарисованной двери не хватает только дверной ручки. Но прежде чем ее изобра-
зить, установим в качестве цвета переднего плана темно-коричневый цвет, кото-
рым залита «стена». Воспользуемся для этого инструментом [^] - Eyedropper
Tool (I) (Инструмент «Пипетка» (I)).
>• Нажмите кнопку [5] в окне документа и измените размеры окна документа
так, чтобы оно не пересекалось с палитрами, прокрутите изображение в окне,
чтобы отобразить дверь, и нажмите клавишу РТ"Ь|. чтобы отобразить все
палитры.
> Нажмите кнопку [^| - Eyedropper Tool (I) (Инструмент «Пипетка» (I)) на
панели инструментов (Tools), чтобы выбрать этот инструмент.
85
Adobe Photoshop для Web
> Установите указатель мыши, который примет форму пипетки f, на изобра-
жении темно-коричневой «стены».
> Щелкните мышью в этом месте. Цвет переднего плана будет выбран и поя-
вится на соответствующем образце панели инструментов (Tools).
Теперь в том месте открытой двери, где обычно находится дверная ручка, нари-
суем с помощью инструмента |~?] - Pencil Tool (В) (Инструмент «Карандаш» (В))
короткий вертикальный отрезок толщиной 1 пиксел и длиной 5-6 пикселов.
>• Удерживая нажатой клавишу II Alt j. нажмите кнопку \^\ -Brush Tool (В)
(Инструмент «Кисть» (В)) на панели инструментов (Tools). Будет выбран
инструмент \/\ - Pencil Tool (В) (Инструмент «Карандаш» (В)).
Этот инструмент позволяет рисовать произвольные линии - прямые и кривые.
Для рисования горизонтальной или вертикальной прямой следует удерживать
нажатой клавишу ll s h i f t l.
> Установите указатель мыши примерно у середины левого
края «двери».
>• Нажмите и удерживайте клавишу Р^"ч.
>• Не отпуская клавишу ll s h i f | l. нажмите и удерживайте ле-
вую кнопку мыши.
>• Не отпуская левую кнопку мыши и клавишу Ifs^l. пере-
местите указатель мыши вниз на 5-6 пикселов.
Рис. 2.55.
>• Отпустите левую кнопку мыши.
«Дверная ручка»
>• Отпустите клавишу |[shiftl. Будет нарисована тонкая верти- нарисована
кальная линия (Рис. 2.55).
Напомним, что если с первого раза линия желаемого размера не получилась, вы
можете отменить выполненную операцию и повторить ее сначала.
>• Уменьшите масштаб изображения до 100%, щелкнув три раза на рисунке ин-
струментом [ДГ| - Zoom Tool (Z) (Инструмент «Масштаб» (Z)) при нажатой
клавише Г^П. Изображение примет вид как на Рис. 2.56.
"Sb Geolon.psd <•> 100% (Lajiei 4. RGB/3)

Рис. 2.56. Дверь нарисована

86
 Подготовка графики с помощью программ Photoshop и ImageReady
> Сохраните документ, выбрав команду меню File » Save (Файл » Сохранить).
Итак, мы создали рисунок, состоящий из основного слоя Background (Фон) и че-
тырех слоев - Layer 1, Layer 2, Layer 3, Layer 4. Посмотрим теперь, что можно
делать со слоями.

Работаем со слоями
Слои в изображении располагаются стопкой, один на другом. Основной слой
Background (Фон) всегда находится внизу. На нем располагаются остальные
слои в том порядке, в котором они были созданы. В таком же порядке слои рас-
положены в палитре Layers (Слои).
>• Увеличьте размер палитры Layers (Слои), пере-
тащив ее верхнюю границу вверх, чтобы отобра-
зить в палитре все имеющиеся слои (Рис. 2.57).
Порядок расположения слоев рисунка легко изме-
нить, перетащив миниатюру слоя в палитре Layers
(Слои) в нужное место. Посмотрим, как это сде-
лать, переместив слой Layer 2 наверх.
>• Установите указатель мыши на миниатюре слоя
Layer 2 в палитре Layers (Слои). Указатель
мыши примет форму fy.
>• Нажмите и удерживайте левую кнопку мыши. Рис. 2.57. Палитра Layers
Слой будет выделен темным цветом. (Слои) со всеми слоями

> Не отпуская левую кнопку мыши, переместите

указатель мыши на миниатюру слоя Layer 4.
Вместе с ним переместится значок слоя.
>• Отпустите левую кнопку мыши. Новое положе-
ния слоя Layer 2 вверху группы слоев будет за-
креплено (Рис. 2.58). В окне документа надпись
Вам нужна локальная сеть? теперь будет рас-
положена поверх надписи Заходите СЮДА!, а
не под ней, как прежде, и поверх рисунка две-
ри, находящегося на слое Layer 4 (Рис. 2.59).
В процессе редактирования слоев часто бывает Рис. 2.58. Слой Layer 2
необходимо выключить отображение какого-либо перемещен
слоя или нескольких слоев, чтобы сосредоточиться
на обработке других. В крайнем левом столбце палитры Layers (Слои), напротив
видимых слоев выставляется специальный значок в виде открытого глаза ф -
Indicates layer visibility (Индикация видимости слоя).
87
Adobe Photoshop для Web
"E Geoton.psd & 1002 [Layei 4. RGB/8)

Puc. 2.59. Положение слоя ца рисунке изменено

Щелкните мышью на значке с изображением глаза g> - Indicates layer
visibility (Индикация видимости слоя) в палитре Layers (Слои) слева от ми-
ниатюрылслря Layer 2. Значок глаза исчезнет. Одновременно на рисунке ис-
чезнет надпись Вам нужна локальная сеть?, находящаяся на слое Layer 2, -
слой будет выключен (Рис. 2.60).
fCGeoton.psd & 100% (Layer 4. RGB/8)

Заходите СЮДА!

Рис. 2.60. Слой Layer2выключен

> Повторно щелкните мышью в том же месте. В палитре Layers (Слои) появит-
ся значок глаза -gs, а на рисунке - надпись Вам нужна локальная сеть?
v Просмотрите, как выглядит каждый слой в отдельности, выключая отображе-
ние остальных слоев; после чего включите все слои.
После перемещения слоя Layer 2 наверх активным по-прежнему остался слой
Layer 4. Он выделен в палитре Layers (Слои) темным цветом. И все операции
редактирования будут выполняться только для этого Слоя. Чтобы перейти к ре-
дактированию другого слоя, достаточно щелкнуть мышью на строке с его именем.
> Щелкните мышью на строке слоя Background (Фон) в палитре Layers
(Слои). Строка будет выделена темным цветом. Данный слой станет актив-
ным, и информацию об этом вы увидите в заголовке окна документа.
Другой способ активизации слоя позволяет выбирать его из контекстного меню.
>• Установите указатель мыши в окне рисунка на надписи Вам нужна локаль-
ная сеть?
ctrl
Нажмите и удерживайте клавишу II I. Указатель мыши примет форму Kj..
Это значит, что при включенном инструменте [К^1 - Move, Tool (V) (Инстру-
мент «Перемещение» (V)) клавишу II С1г| I можно не нажимать.

Не отпуская клавишу ctrl . щелкните правой кнопкой мыши. На экране поя-

вится контекстное меню с перечнем доступных в данной точке слоев (Рис. 2.61).

88
 Подготовка графики с помощью программ Photoshop и ImageReady
> Выберите из контекстного меню слой Layer 3.
Layer 2
Этот слой станет активным и будет выделен в
ауег
палитре Layers (Слои).
Background
> Отпустите клавишу II ctrl _
Рис. 2.61. Контекстное
Обратите внимание, что между значком с изображе- меню слоев
нием глаза ф и миниатюрой слоя в палитре Layers
(Слои) имеется еще одно поле, в котором для активного слоя отображается зна-
чок кисти ^ - Indicates painting on layer or layer mask (Индикация рисования
на слое или слой-маске). Этот значок указывает, что только данный слой досту-
пен для рисования и редактирования. Соответствующие поля остальных слоев -
Indicates if layer is linked (Индикация связанного слоя) - пока пустые. Если же
нужно связать несколько слоев для их совместного перемещения, поворота или
масштабирования, то следует щелкнуть мышью в этих полях против каждого
слоя, который нужно связать с активным слоем.
> Щелкните мышью в поле Indicates if layer is linked (Индикация связанного
слоя) слева от миниатюры слоя Layer 4. В этом поле появится значок в виде
цепи jg, указывающий на то, что теперь этот слой связан с активным.
Проверим это, перемещая активный слой Layer 3.
> Нажав кнопку [К^] - Move Tool (V) (Инструмент «Перемещение» (V)), выбе-
рите этот инструмент.
>• Установите указатель мыши, который примет форму Kj., на надписи Заходите
СЮДА!
> Нажмите и удерживайте левую кнопку мыши.
> Не отпуская левую кнопку мыши, перемещайте изображение. Вы увидите,
что вместе с активным слоем Layer 3 перемещается связанный с ним слой
Layer 4. Остальные слои останутся на своих местах.
> Отпустите левую кнопку мыши.
> Отмените выполненную операцию перемещения слоев, выбрав команду ме-
ню Edit» Undo Move (Правка » Отменить перемещение).
В процессе редактирования рисунка может возникнуть необходимость объеди-
нить два или несколько слоев в один, если они в дальнейшем будут обрабаты-
ваться совместно. Объединение нескольких слоев позволяет сохранять опти-
мальный объем файла, что особенно важно при обработке больших документов.
Объединим связанные слои Layer 3 и Layer 4.
> Выберите команду меню Layer • Merge Linked (Слой * Объединить связанные).
Слои Layer 3 и Layer 4 будут объединены в один слой Layer 3, а миниатюра
и название слоя Layer 4 исчезнут из палитры слоев.
89
Adobe Photoshop для Web
>> Чтобы убедиться в том, что слои объединены, щелкните мышью на значке с
изображением глаза ® слева от названия слоя Layer 3. Слой будет выключен,
и надпись Заходите СЮДА! с рисунком двери исчезнет с экрана. На ее месте
останется только надпись Вам нужна локальная сеть?, находящаяся на слое
Layer 2.
> Повторно щелкните мышью в том же месте, чтобы включить отображение слоя
Layers.
> Выберите команду меню Edit * Undo Merge Linked (Правка » Отменить
объединение связанных слоев). Слой Layer 4 снова появится в палитре
Layers (Слои).
х Щелкните мышью на значке в виде цепи Щ в поле Indicates if layer is linked
(Индикация связанного слоя) слева от миниатюры слоя Layer 4. Значок ис-
чезнет. Связь слоев будет прервана.
Для объединения всех видимых слоев изображения нужно оставить видимыми
только те слои изображения, которые должны быть объединены (невидимые
слои не будут удалены в результате объединения), и выбрать команду меню
Layer • Merge Visible (Слой » Объединить видимые слои).
Переместим слой Layer 3 на передний план рисунка, воспользовавшись сле-
дующим способом.
>• Выберите команду меню Layer • Arrange * Bring to Front (Слой * Порядок »
Переместить на передний план). Положение активного слоя в пачке слоев
изменится. Он будет перемещен наверх.
Подобным же образом переместим на передний план слой Layer 4.
> Щелкните мышью на миниатюре слоя Layer 4 в палитре Layers (Слои),
чтобы выделить его.
>• Выберите команду меню Layer • Arrange » Bring to Front (Слой » Порядок »
Переместить на передний план). Слой Layer 4 будет перемещен наверх.
> Сохраните документ, выбрав команду меню File * Save (Файл » Сохранить).
Созданные нами слои полностью непрозрачны. Однако ничто не мешает вам
изменить непрозрачность активного слоя с помощью элемента управления
Opacity (Непрозрачность) палитры Layers (Слои). По умолчанию значение
Opacity (Непрозрачность) для каждого слоя равно 100%, т.е. слои абсолютно
непрозрачны.
> Щелкните мышью на кнопке [Г] у правой границы поля ввода Opacity
(Непрозрачность) в палитре Layers (Слои). Под полем ввода появится пол-
зунковый регулятор.

90
_ Подготовка графики с помощью программ Photoshop и ImageReady
>> Перемещайте ползунок регулятора Opacity (Непрозрачность) влево и наблю-
дайте, как на рисунке постепенно уменьшается непрозрачность активного
слоя Layer 4 и сквозь него становится видна надпись нижележащего слоя
Layer 2. Когда ползунковый регулятор достигнет своего крайнего левого
положения, слой Layer 4 станет абсолютно прозрачным.
>• Восстановите для слоя Layer 4 значение Opacity (Непрозрачность), равное 100%.
Для каждого слоя изображения может быть задано собственное значение
непрозрачности.
В открывающемся списке Set the blending mode for the layer (Установка режи-
ма наложения для слоя) в верхней части палитры Layers (Слои) можно выбрать
один из многочисленных режимов наложения текущего слоя. Режим наложения
определяет, каким образом пикселы активного слоя взаимодействуют с пиксе-
лами других слоев, расположенных под ним. Применяя различные режимы
на отдельных слоях, можно получить интересные изобразительные эффекты.
Например, если вы выберете режим Darken (Замена темным), то в изображение
будут включены только те его пикселы, которые окажутся темнее пикселов,
расположенных на более низких слоях.
С помощью четырех флажков Lock (Блокировать) в верхней части палитры
Layers (Слои) вы можете блокировать от изменения при редактировании от-
дельные элементы активного слоя. Можно блокировать прозрачные пикселы
активного слоя (Lock transparent pixels), пикселы изображения (Lock image
pixels), положение (Lock position), весь слой (Lock all).

menu u выпуклости
Чтобы придать создаваемому баннеру большую выразительность и привлека-
тельность, можно применить к каждому слою различные эффекты. Посмотрим,
какие эффекты предлагает Adobe Photoshop для слоев и как их применить.
Предварительно следует сделать активным нужный слой. Создадим эффекты
для слоя Layer 1 с надписью ГЕОТОН.
> Щелкните мышью на слое Layer 1 в палитре Layers (Слои), чтобы сделать его
активным.
> Выберите команду меню Layer * Layer Style (Слой * Стиль слоя). На экране
появится меню с перечнем команд, управляющих применением эффектов к
выбранному слою (Рис. 2.62).
Команды этого меню, начиная со второй, создают следующие эффекты:
Drop Shadow (Тень снаружи) - добавляет тень, которую отбрасывает содержи-
мое слоя;

91
Adobe Photoshop для Web
Inner Shadow (Тень внутри) - добавляет тень, кото- Blending Options...
рая лежит внутри слоя, создавая ощущение его ото- Drop Shadow...
двинутости или приподнятости; Inner Shadow...
Outer Glow...
Outer Glow (Свечение наружу) - добавляет свечение, Inner Glow...
Bevel and Emboss:.
исходящее от слоя наружу; Satin...
Color Overlay...
Inner Glow (Свечение внутри) - добавляет свечение Gradient Overlay...
внутри слоя; Pattern Overlay...
Stroke...

Bevel and Emboss (Скос и рельеф) - дает возможность Copy Layet Style

добавить различные комбинации подсветки и затене- Paste Layer Slyte

Paste Layer Stylo to Linked
ния слоев, которые создают эффекты рельефности и Clear Layer Style
скошенных кромок; Global Light...
Create Layer
Satin (Атлас) - добавляет затенение внутри слоя, соз- Hide All Effects
Scale Effects...
давая эффект изменения формы слоя;
Color Overlay (Наложение цвета) - заполняет слой Puc. 2.62. Меню
цветом; эффектов

Gradient Overlay (Наложение градиента) - заполняет слой градиентом;

Pattern Overlay (Наложение текстуры) - заполняет слой узором;
Stroke (Обводка) - обводит контур объекта на текущем слое, используя цвет,
градиент или узор. Обычно используется для объектов с жесткими границами,
таких как текст.
Применим к активному слою Layer 1 эффект Bevel arid Emboss (Скос и
рельеф).
х Выберите из меню Layer ». Layer Style (Слой * Стиль слоя) команду Bevel and
Emboss (Скос и рельеф). На экране появится диалог Layer Style (Стиль слоя)
(Рис. 2.63).
>• Расположите этот диалог так, чтобы он не перекрывал изображение в окне до-
кумента, чтобы видеть изменения, которые будут происходить при настрой-
ке параметров эффекта.
Данный диалог состоит из двух панелей. На левой панели - Styles (Стили) от-
мечено флажком и выделено название выбранного эффекта - Bevel and Emboss
(Скос и рельеф). На этой же панели вы можете выбрать, установив флажок,
другие доступные эффекты из перечисленных выше.
При установленном слева от названия эффекта флажке данный эффект будет
применен к слою после закрытия диалога кнопкой ОК. Чтобы отменить эффект,
достаточно, вызвав диалог, сбросить соответствующий флажок.

92
 Подготовка графики с помощью программ Photoshop и ImageReady

Styles Bevel and Emboss OK

— Structure —' J
Blending Options: Default Styles [inner Bevel Reset J
О Drop Shadow Technique: |Smooth ~
"New Style... I
П Inner Shadow
Direction: © Up О Down
13 Preview
|j Outer Glow

|~1 Inner Glow

Soften: л . |o Ipx

• Shading
Angle:
[7j Use Global Light
!~ Satin
Akitude:
П Color Overlay
Gloss Contour: П Anti-a[iased
Г": Gradient Overlay

fj Pattern Overlay Highlight Mode:, [Screen

Opacity:
!~j Stroke
Shadow Mode: [Multiply
Opacity:

Puc. 2.63. Диалог Layer Style (Стиль слоя) с элементами управления

эффекта Bevel and Emboss (Скос и рельеф)
> Убедитесь, что в диалоге Layer Style (Стиль слоя) установлен флажок
Preview (Предварительный просмотр). При этом все изменения параметров,
сделанные в диалоге, будут сразу же отображаться на рисунке.
Следует отметить, однако, что значения параметров, заданные по умолчанию,
являются оптимальными и в большинстве случаев создают наиболее яркие эф-
фекты. На рисунке в окне документа вы можете видеть, как будет выглядеть
надпись ГЕОТОН при значениях параметров эффекта, определенных по умолчанию.
Эффект рельефности надписи создается комбинацией подсветки (Highlight) и
затенения (Shadow), параметры которых определяются соответствующими эле-
ментами управления. В каждой из групп можно выбрать цвет тени или свечения,
щелкнув мышью на образце, степень непрозрачности этого цвета (Opacity) и
режим наложения пикселов (Mode). Значения, установленные по умолчанию,
обычно дают наилучший результат.
В открывающемся списке Style (Стиль) вы можете выбрать один из пяти вари-
антов данного эффекта.
>• Просмотрите различные варианты эффекта, выбирая их из открывающегося
списка Style (Стиль), после чего выберите стиль Inner Bevel (Скос внутри).

93
Adobe Photoshop для Web
>• Выбирая из открывающегося списка. Technique (Технология) различные ва-
рианты, просмотрите возможные способы формирования кромок, после чего
выберите вариант Smooth (Сглаженный).
Параметр Depth (Глубина) позволяет изменить степень затенения. Параметр
Size (Размер) управляет размером скоса, а параметр Soften (Смягчение) закругле-
нием кромок.
> Проверьте, как изменяется эффект при изменении параметров Depth (Глубина),
Size (Размер) и Soften (Смягчение) и выберите наилучшие значения этих па-
раметров.
Переключателями Up (Вверху) и Down (Внизу) определяют положение подсвет-
ки по отношению к содержимому слоя.
>• Посмотрите, как изменяется эффект при установке переключателя Down
(Внизу), после чего установите переключатель Up (Вверху).
Параметр Angle (Угол) определяет угол, под которым падает свет из слоя или на
слой. Если установлен флажок Use Global Light (Использрвать глобальный
свет), то используется глобальный угол, определяющий угол падения света на
все изображение. Если данный флажок сброшен, то применяется локальный
угол, который задает угол падения света на активный слой. Для установки гло-
бального угла следует использовать команду меню Layer • Layer Style » Global
Light (Слой » Стиль слоя * Глобальный свет).
>• Щелкайте мышью в разных местах круговой шкалы Angle (Угол) и наблю-
дайте на рисунке, как изменяется характер эффекта при разных углах падения
света. Выберите наиболее оптимальный, с вашей точки зрения, угол.
>• Изменяя параметр Altitude (Высота), проверьте, как изменяется эффект при
изменении высоты источника света и выберите подходящее значение этого
параметра.
>• Нажав кнопку ОК, закройте диалог Layer Style
(Стиль слоя). Выбранный эффект будет применен
к слою Layer 1. Надпись ГЕОТОН на изображе- Рис. 2.64. К текстовому
нии будет выглядеть примерно как на Рис. 2.64, слою применен эффект
Bevel and Emboss
Обратите внимание, что после применения эффекта в (Скос и оельей)
палитре Layers (Слои), под строкой с активным сло-
ем Layer 1 появилось название примененного к слою эффекта, а справа от имени
слоя - значок в виде буквы f внутри белого круга, который означает, что к слою
применен эффект (Рис. 2.65). Слева от этого значка находится треугольный пе-
реключатель v, позволяющий выключить и снова включить отображение названий
эффектов, примененных к слою. Слева от названия эффекта - Bevel and Emboss
(Скос и рельеф) - находится значок в виде открытого глаза ф, с помощью кото-
рого можно выключить и включить отображение эффекта в окне документа.
94
 Подготовка графики с помощью программ Photoshop и ImageReady

Q Bevel and Emboss

BID = 1 Bickground

о. т t>. a
Рис. 2.65. Слой с эффектом в палитре Layers (Слои)
К одному слою можно применить одновременно несколько эффектов. Добавим
к слою Layer 1 еще один эффект - Drop Shadow (Тень снаружи). Для вызова
диалога Layer Style (Стиль слоя) воспользуемся другим способом.
>• Нажмите кнопку Г5П - Add a layer style (Добавить стиль слоя) в нижней
части палитры Layers (Слои) и в появившемся меню с Перечнем эффектов
выберите Drop Shadow (Тень снаружи). На экране появится диалог Layer
Style (Стиль слоя) (Рис. 2.66).
I Layer Style ИI

Styles - Drop Shadow | OK |

_____ 1
Blinding Options: Default Blind Mod.: [Multinlv ЗИИ
1 d Drop Shadow ЯК ODjcitv: | fi 1 [re |%

О Inner Shadow
Angle! \\ J 1.120 |° E Use global Light R] Preview
(jOuttrGlow
О Inner Glow

W Bevel and Emboss

П Contour
.
П TtJlturt

Cs»«n Contour: ^A'l П Anti-aliased

Г* Color Overlay
Noise! ;*) j In |%
С <5r«dienl Overlay
Q Layer Knocks Oul Drop Shadow
r"j Pattern Overlay

П Stroke '

..

Puc. 2.66, Диалог Layer Style (Стиль слоя) с элементами управления

эффекта Drop Shadow (Тень снаружи)
95
I
Adobe Photoshop для Web
На левой панели диалога уже установлен флажок Drop Shadow (Тень снаружи)
и справа отображаются элементы управления эффектом.
Выбранный эффект имитирует тень, которую отбрасывает содержимое слоя. И этот
эффект, созданный параметрами по умолчанию, вы видите в окне документа.
Элементы'управления Blend Mode (Режим наложения) и Opacity (Непрозрач-
ность) определяют соответственно режим наложения пикселов и степень непро-
зрачности тени. Применяемая по умолчанию тень создается черным цветом.
Однако для выбранного объекта такой цвет тени не является наилучшим. Выбе-
рем другой цвет тени, более близкий к цвету надписи.
>• Щелкните мышью на поле с образцом цвета справа от открывающегося спи-
• ска Blend Mode (Режим наложения). На экране появится диалог Color Picker
(Палитра цветов).
>• Если этот диалог перекрывает окно документа, переместите его в сторону,
чтобы видеть на рисунке результат выбора цвета.
>• Щелкните мышью на спектральной шкале - узкой вертикальной полосе - в
области оттенков синего. "В цветовом поле слева отобразится цветовое про-
странство выбранного оттенка.
>• Щелкая мышью в разных местах цветового поля, наблюдайте, как изменяется
цвет тени на рисунке. Подберите оттенок светло-синего, наиболее подходящий,
с вашей точки зрения, для тени.
> Закройте диалог Color Picker (Палитра цветов), нажав кнопку ОК.
Параметр Angle (Угол) определяет угол, под которым свет падает на слой, а
параметр Distance (Расстояние) - расстояние, на которое отбрасывается тень.
Эти два параметра можно изменять интерактивно, прямо на рисунке.
> Установите указатель мыши, который примет форму Kj., в окне документа на
тени, которую отбрасывает надпись ГЕОТОН.
> Нажмите и удерживайте левую кнопку мыши.
>• Не отпуская левую кнопку мыши, перемещайте указатель мыши вблизи над-
писи. Вместе е ним будет перемещаться и тень от надписи. В процессе пере-
мещения текущие значения угла (Angle) и расстояния (Distance) будут ото-
бражаться в соответствующих полях ввода диалога Layer Style (Стиль слоя).
>• Добейтесь наиболее оптимального положения тени и отпустите левую кноп-
ку мыши.
Параметр Spread (Размытие) определяет степень четкости тени.
>• Перемещая ползунок Spread (Размытие), установите наиболее подходящую
степень четкости тени.

96
 Подготовка графики с помощью программ Photoshop и ImageReady
С помощью ползункового регулятора Size (Размер) настраивается размер тени.
> Просмотрите, как данный параметр изменяет эффект, и выберите для него,
если считаете нужным, новое значение.
В открывающемся списке Contour (Контур) можно выбрать форму контура тени.
Если установить флажок Anti-aliased (Сглаживание), то контур будет сглажен.
Ползунковый регулятор Noise (Шум) позволяет добавить к тени шум.
> Закройте диалог Layer Style (Стиль слоя), нажав кнопку ОК. В палитре
Layers (Слои) появится название второго эффекта - Drop Shadow (Тень сна-
ружи), примененного к слою Layer 1. В окне документа эффект будет выгля-
деть примерно как на Рис. 2.67.
|<jGeoton psd @ МЮ% (Layer 1. RGB/8)

Рис. 2.67. Эффект Drop Shadow (Тень снаружи) применен

v Выберите команду меню File » Save (Файл »• Сохранить), чтобы сохранить
документ.
В следующей главе мы продолжим работу над баннером и «оживим» его, создав
анимацию. А пока рисунок Geoton.psd можно закрыть. Этот рисунок вы можете
найти среди файлов в архиве www.3st.ru/book/web/ex.zip.
>• Нажав кнопку [х] в правом верхнем углу окна документа, закройте текущий
документ.
Следует помнить, что все эффекты, которые применяются к слою, связаны с
его содержимым. В процессе редактирования слоя соответственно изменяется
и эффект.

«Живые» кнопки
/
В дальнейшем на своих Web-страницах вы сможете использовать разнообразные
кнопки для самых различных целей с любыми анимационными эффектами.
Посмотрим, как создаются такие кнопки, Для иллюстрации процесса создания и'
«оживления» графической кнопки превратим ссылку На первую страницу из
файла spisok.html в кнопку, которая становится рельефной при установке на
ней указателя мыши и имитирует нажатое состояние, когда нажимается левая
кнопка мыши. Изображение кнопки подготовим в программе Adobe ImageReady,
чтобы ближе познакомиться с ее особенностями и отличиями от Adobe Photoshop.

97
4-6645
Adobe Photoshop для Web

>• В программе Adobe Photoshop нажмите кнопку - Edit in ImageReady

(Shift+Ctrl+M) (Редактировать в ImageReady (Shift+Ctrl+M)). Будет запущена
программа Adobe ImageReady, и на экране появится ее рабочее окно.
Изготовление кнопки начнем с создания нового документа размером 250 х 100
пикселов и прозрачным фоном.
>• Выберите команду меню File * New (Файл * Новый). На экране появится
диалог New Document (Новый документ) (Рис. 2.68).

Ыате: |Untitled-l 1 OK I

| Cancel |
Size: (Custom H

Wjdth: |539 | pixels

tlelght: |15 [ pixels

0 White
О eackoround Color
О transparent

Puc. 2.68. Диалог New Document (Новый документ) в Adobe ImageReady

Этот диалог несколько отличается от аналогичного диалога Adobe Photoshop.
В нем отсутствует возможность выбора цветового режима документа. Все
новые документы в Adobe ImageReady создаются в цветовом режиме RGB.
> В полях ввода со счетчиками Width (Ширина) и Height (Высота) введите раз-
меры документа - 250 и 100 пикселов.
>• Установите переключатель Transparent (Прозрачный), чтобы создать доку-
мент с прозрачным фоном.
> Закройте диалог New Document (Новый документ) нажатием кнопки ОК. В ра-
бочем окне программы появится окно документа указанных размеров, в котором
прозрачный фон условно показан в виде серой шахматной мозаики (Рис. 2.69).

Рис. 2.69. Окно нового документа с прозрачным фоном

98
 : \
Подготовка графики с помощью программ Photoshop и ImageReady
Новый документ состоит из одного прозрачного слоя Layer 1. ;>
Установим для создаваемой кнопки желтый цвет переднего плана, выбрав его
из палитры Swatches (Каталог).
v Щелкните мышью на ярлыке Swatches (Каталог) во втором сверху окне па-
литр у правого края рабочего окна, чтобы вывести на экран эту палитру.
v Щелчком мыши выберите в палитре Swatches (Каталог) седьмой слева в
первом ряду желтый цвет. Этот цвет отобразится на образце цвета переднего
плана (Set foreground color) панели инструментов (Tools).
Нарисуем с помощью инструмента [Щ| - Rectangle Tool (U) (Инструмент «Пря-
моугольник» (U)) кнопку в виде прямоугольника размером 230x35 пикселов,
залитого желтым цветом переднего плана.
v Щелкните мышью на кнопке [5] - Rectangle Tool (U) (Инструмент «Прямо-
угольник» (U)) на панели инструментов (Tools). Данный инструмент будет
выбран, а на панели параметров (Options Bar) появятся элементы управле-
ния данного инструмента (Рис. 2.70), с помощью которых следует опреде-
лить параметры фигуры.
• Я DP n^^Si» ЧЕЛМ*Ор*"~1 mtf*[«0p» | StyUl []NJ j*| Mod«i l)j°gMJ_ j,,^! OtMdt»! f"lOO% |
;;|Д

Рис. 2.70. Панель параметров инструмента Rectangle Tool (U)

(Инструмент «Прямоугольник» (U))
> Установите флажок Fixed Size (Фиксированный размер), чтобы создать пря-
моугольник определенного размера.
> В полях ввода Width (Ширина) и Height (Высота) введите размеры кнопки -
235 рх и 35 рх.
v Нажмите кнопку [•] - Create filled region (Создать заполненную область) на
панели параметров (Options Bar), чтобы создать залитую цветом фигуру.
Теперь, когда параметры прямоугольника заданы, его можно нарисовать.
> Установите указатель мыши в окне документа, у его левого края
> Нажмите и удерживайте левую кнопку мыши. В окне документа появится
рамка прямоугольника заданного размера.
>• Не отпуская левую кнопку мыши, переместите указатель мыши так, чтобы
переместившийся вместе с-ним прямоугольник расположился в центре окна
документа.
> Отпустите левую кнопку мыши. Прямоугольник будет закреплен и залит
желтым цветом переднего плана (Рис. 2.71).

99
Adobe Photoshop для Web
Применим к слою Layer 1, на котором располо- Пи Untilled-1 @ 100% (Original) ВЕЗЕТ
жен прямоугольник, эффект Bevel and Emboss
^; 0
(Скос и рельеф), создающий иллюзию рельефно-
сти кнопки.
> Чтобы видеть в палитре Layers (Слои) все эф-
фекты и слои, которые мы создадим, перемес-
тите эту палитру вверх, расположив ее справа
от окна документа так, чтобы она не перекры-
вала другие палитры, и увеличьте ее высоту Рис. 2.71. Залитый цветом
примерно в 2 раза. . прямоугольник
i
Нажмите кнопку ПЯ - Add a layer effect (Добавить эффект к слою) в нижней
части палитры Layers (Слои). На экране появится меню эффектов.
Это меню содержит перечень тех же э<] эектов, что и аналогичное меню в
Adobe Photoshop.
> Выберите из появившегося меню эффект Bevel and Emboss (Скос и рельеф).
На экране появится диалог Layer Style (Стиль слоя) с элементами управления
эффекта Bevel and Emboss (Скос и рельеф) (Рис. 2.72).

[~j Drop Shadow Style: [inner Bevel I-I

П Inner Shadow New Style... I
Technique: [Smooth j
О Outer Glow
13 Preview
Depth: -0

Direction: ©Up О D°»n

S»l fl

П Satin Soften: [}• i iiiu-i -

П Color OwUy
Г_] Gradient Overlay -Shading-

Fj Pattern Overlay Angle: ^_^^ 1120

В U» global Light
Altitude: По
i
It °

Gloss Contour: ^A " I П Anli-a(iased

Highlight Mode: [Screen

Opacity:

Shadow Mode: | Multiply [T| ^

Opacity: inn in. (— . . |?5

Puc. 2.72. Диалог Layer Style (Стиль слоя) с элементами управления

эффекта Bevel and Emboss (Скос и рельеф)
100
 Подготовка графики с помощью программ Photoshop и ImageReady
Данный эффект с параметрами по умолчанию
будет применен к активному слою :(Рис. 2.73).
В диалоге Layer Style (Стиль слоя) вы можете
изменить параметры эффекта. Но мы делать
этого не будем, а используем эффект, созда-
ваемый по умолчанию.
Обратите внимание, что после применения эф-
фекта в палитре Layers (Слои) справа от имени
слоя появился значок в виде буквы f внутри Рис. 2.73. Эффект Bevel
белого круга, который означает, что к слою and Emboss (Скос и рельеф)
применен эффект. применен к слою

Нам осталось только написать на кнопке текст, Но предварительно установим

для надписи синий цвет. ,
> Выберите из палитры Swatches (Каталог) синий цвет - такой, чтобы текст
был хорошо виден на желтой кнопке.
v Нажмите кнопку [Т] - Type Tool (Т) (Инструмент «Текст» (Т)) на панели ин-
струментов (Tools). На панели параметров (Options Bar) появятся элементы
управления параметрами инструмента - такие же, как и в Adobe Photoshop.
v В открывающихся списках Set the font family (Установка семейства
шрифта) и Set the font style (Установка начертания шрифта) панели пара-
метров (Options Bar) выберите гарнитуру и начертание шрифта из числа
установленных на вашем компьютере.
> Щелкните мышью у левого края желтого прямоугольника в окне документа.
В этом месте появится текстовый курсор. •
v Введите с клавиатуры надпись: На первую страницу. Эта надпись появится
в окне документа в точке ввода.
> Выделите введенный тест, протащив через
него указатель мыши. ТО Untitled-1 @100£ (Original)

> В открывающемся списке со счетчиком Set

the font size (Установка размера шрифта)
панели параметров (Options Bar) подберите
для текста такой размер, чтобы надпись пол-
ностью поместилась на кнопке.
> С помощью инструмента \**\ - Move Tool (V)
Рис. 2.74. Надпись
(Инструмент «Перемещение» (V)) отцентри-
центрирована
руйте надпись на желтом прямоугольнике
(Рис. 2.74).

101
Adobe Photoshop для Web
Изменим название созданного текстового слоя на Layer 2 (Слой 2). Это можно
сделать в диалоге Layer Options (Параметры слоя).
>• Щелкните правой кнопкой мыши на имени текстового слоя На первую стра-
ницу и выберите команду Layer Options (Параметры слоя) из появившегося
контекстного меню. На экране появится диалог Layer Options (Параметры
слоя) (Рис. 2.75).
Layer Options

Ыате: | На первую страницу J L ок

П Use Previous Layer to Create Dipping Mask I

Options -

Color: [None

Bend Mode: [Normal

Lock: 0 lr«nsp*rency П Eosition

Dfil

Puc. 2.75. Диалог Layer Options (Параметры слоя)

> В поле ввода Name (Имя) диалога Layer Options (Параметры слоя) выделите
название слоя, протащив по нему указатель мыши.
> Введите с клавиатуры новое название слоя - Layer 2 - й нажмите клавишу
fjnterj. Текстовый слой будет переименован, и его новое имя появится в палитре
Layers (Слои).
Обрежем изображение в окне документа, оставив только ту его часть, на кото-
рой находится рисунок кнопки. Для этого предварительно следует выделить
обрезаемый объект. Чтобы легче было выполнить выделение, нужно сделать
активным слой Layer 1 с изображением желтого прямоугольника и выключить
отображение остальных слоев и эффектов.
>• Щелкните мышью на миниатюре слоя Layer 1 в палитре Layers (Слои),
чтобы сделать его активным.
>• В палитре Layers (Слои) щелкните мышью на треугольнике, расположенном
между именем слоя Layer 1 и значком ©, чтобы отобразить названия эффектов,
примененных к слою.
> Выключите отображение слоя Layer 2 и эффекта на слое Layer 1, щелкнув
мышью на значках с открытым глазом §! в палитре Layers (Слои) против
названия слоя Layer 2 и эффекта Bevel and Emboss (Скос и рельеф).
Для выделения обрезаемого объекта воспользуемся инструментом [\] - Magic
Wand (W) (Инструмент «Волшебная палочка» (W)), с помощью которого легко
выделяются области одного цвета или близких цветов.
102
 Подготовка графики с помощью программ Photoshop и ImageReady
>• Выберите инструмент [\1 - Magic Wand Tool (W) (Инструмент «Волшебная
палочка» (W)) из всплывающего меню, которое появляется, если нажать и
удерживать кнопку [О] - Marquee Tool (M) (Инструмент «Выделение» (М)) на
панели инструментов (Tools).
>• Установите указатель мыши, который примет форму \, в окне документа на
рисунке желтого прямоугольника.
>• Щелкните мышью в этом месте. Контур желтого прямоугольника будет
выделен.
Теперь можно обрезать рисунок по контуру выделения.
f|Untitled-1 @ 100% (Original) HEQE
Original Ч Optimized Чг-LJp 44-Up "

100% т -\ Г/..

Рис. 2.76. Рисунок обрезан по размеру кнопки

> Выберите команду меню Image * Crop (Изображение * Обрезать). Рисунок
будет обрезан по контуру выделения.

>• Нажмите комбинацию клавиш чтобы отменить выделение объекта

(Рис. 2.76).
Кнопка готова. Теперь мы должны «научить» ее реагировать на различные со-
бытия, связанные с действиями мыши - нажатиями, щелчками и т.д. Для этого
используется специальная палитра Web Content (Содержимое Web).
>• Щелкните мышью на ярлыке Web Content (Содержимое Web) в третьем
сверху окне палитр. Если такого ярлыка нет, выберите команду меню Win-
dow » Web Content (Окно » Содержимое Web). Палитра отобразится в рабо-
чем окне (Рис. 2.77).

Рис. 2.77. Палитра Web Content (Содержимое Web)

103
Adobe Photoshop для Web
Эффект Rollover (Наведение) создается из отдельных кадров-состояний изобра-
жения, для каждого из которых определяется то или иное событие, связанное с
мышью. При просмотре в браузере эти кадры изображения будут изменяться в
зависимости от действий мыши.
В палитре Web Content (Содержимое Web) по умолчанию уже создан первый
кадр эффекта для состояния изображения Normal (Нормальное), при котором
•указатель мыши находится за пределами объекта, т.е. за пределами кнопки.
На миниатюре этого кадра отображается видимый в данный момент слой Layer 1
без примененного к нему эффекта.
> Включите также отображение надписи, которая находится на слое Layer 2,
чтобы и она отображалась на первом кадре-состоянии.
Таким образом, при нормальном (Normal) состоя-
нии изображения, когда мышь находится за пре-
делами объекта, кнопка с надписью будет выгля-
деть как плоский прямоугольник.
Создадим новый кадр для следующего состояния
рисунка.
>• Нажмите кнопку I в | - Creates rollover state
(Создать состояние) R нижней части палитры
Web Content (Содержимое Web). В этой
палитре появится и будет выделен двойной
рамкой следующий кадр для состояния Over
(Над) (Рис. 2.78), при котором указатель мыши
перемещается по объекту или находится над Рис. 2.78. Добавлено
ним, и кнопки мыши не нажаты. состояние Over (Над)

Состояние Over (Над) программа предлагает для Ovei

второго кадра по умолчанию. Но вы можете вы- Down
брать для этого и всех последующих кадров лю- Selected
бые другие состояния.
Out
> Щелкните правой кнопкой мыши на имени Up
состояния Over (Над). На экране появится ме- Click

ню состояний (Рис. 2.79). Custom...

Из этого меню, кроме Over (Над), вы можете вы- None

брать одно из следующих состояний изображения,
Puc. 2.79. Меню состояний
связанных с действиями мыши.
Down (Нажатие) - состояние изображения, при котором нажимается и удержи-
вается левая кнопка мыши в то время, когда указатель мыши находится над
объектом. Это состояние сохраняется так долго, как долго удерживается нажа-
той кнопка мыши.
104
 Подготовка графики с помощью программ Photoshop и ImageReady
Selected (Выбрано) - определяет состояние, когда кнопка выбрана.
Out (Наружу) - определяет состояние, при котором указатель мыши удаляется за
пределы объекта. Такому событию обычно соответствует состояние Normal
(Нормальное).
Up (Отпускание) - определяет состояние изображения, когда после отпускания
кнопки мыши указатель мыши находится в пределах объекта. Такому событию
обычно соответствует состояние Over (Над).
Click (Щелчок) - определяет состояние, когда выполняется щелчок мышью на
объекте. Соответствующий состоянию кадр появляется сразу после щелчка
мышью и сохраняется, пока не будет активизировано другое состояние.
Custom (Пользовательское) - создает новое состояние изображения.
None (Нет) - сохраняет текущее состояние изображения для дальнейшего ис-
пользования в качестве одного из состояний эффекта. Данное состояние не
будет отображаться на Web-странице.
v Щелкните мышью за пределами меню состояний на свободном пространстве
рабочего окна, чтобы закрыть это меню и оставить для второго кадра состоя-
ние Over (Над).
Теперь мы должны определить, как будет выглядеть рисунок кнопки при со-
стоянии Over (Над), т.е. когда на ней находится указатель мыши и кнопки мыши
не нажимаются. При этом событии изображение кнопки должно становиться
рельефным.
>• Включите отображение эффекта Bevel and Emboss (Скос и рельеф), щелкнув
мышью в палитре Layers (Слои) в крайнем левом поле строки с названием
этого эффекта так, чтобы в этом поле появился значок с изображением от-
крытого глаза ф.
Таким образом, мы определили изображение на втором кадре эффекта для со-
стояния Over (Над).
Создадим новый кадр-состояние эффекта Rollover (Наведение).
>• Нажмите кнопку I в I - Creates rollover state (Создать состояние) в нижней
части палитры Web Content (Содержимое Web). В этой палитре появится но-
вый кадр для состояния Down (Нажатие).
Для вновь создаваемых кадров Adobe ImageReady по умолчанию предлагает со-
стояния в том порядке, в каком они располагаются в меню состояний. Но как
указывалось выше, вы можете выбрать из меню другое состояние.

105
Adobe Photoshop для Web
Оставим для нового кадра состояние, предлагаемое по умолчанию. При этом
состоянии, т.е. когда нажимается кнопка мыши, графическая кнопка на Web-
странице должна выглядеть нажатой. Изменим соответствующим образом для
текущего кадра параметры эффекта Bevel and Emboss (Скос и рельеф).
>• Дважды щелкните мышью на названии эффекта Bevel and Emboss (Скос
и рельеф) в палитре Layers (Слои). На экране появится диалог Layer Style
(Стиль слоя) с элементами управления эффекта Bevel and Emboss (Скос
и рельеф).
> Установите переключатель Down (Вниз) в диалоге Bevel and Emboss (Скос и
рельеф) и нажмите кнопку ОК. Диалог Layer Style (Стиль слоя) закроется, и
вид кнопки на рисунке изменится, имитируя ее нажатое состояние (Рис. 2.80).
Созданный эффект можно просмотреть.
Г9Untitletl-1 @ 1002 (Original)
>• Нажмите кнопку [§ - Preview Document (Y) OrlgtoalXOplMitd Чг-ирЧ/4-Up^

(Предварительный просмотр документа (Y))

на панели инструментов (Tools), чтобы вклю-
чить режим предварительного просмотра.
Установите указатель мыши в окне докумен-
та, за пределами изображения кнопки. Кноп-
ка примет вид плоского прямоугольника. Рис. 2.80. Нажатое
состояние кнопки
Переместите указатель мыши на изображе-
ние кнопки. Кнопка станет рельефной.
> Нажмите и удерживайте левую кнопку мыши. Будет имитировано нажатое
состояние кнопки.
>• Отпустите левую кнопку мыши. Изображение кнопки вновь станет рельефным.
>• Удалите указатель мыши за пределы изображения кнопки. Это изображение
станет плоским.
>• Выключите режим предварительного просмотра эффекта, нажав кнопку [JS] -
Preview Document (Y) (Предварительный просмотр документа (Y)) на панели
инструментов (Tools).
>• Сохраните документ в формате PSD под именем Knopka.psd, выбрав коман-
ду меню File » Save (Файл * Сохранить).
Теперь, когда изображение кнопки создано, и к нему применен эффект Rollover
(Наведение), наша следующая задача - оптимизировать и сохранить изображе-
ние в Web-формате, чтобы его можно было использовать на Web-странице.

106
 Подготовка графики с помощью программ Photoshop и ImageReady

Оптимизируем и сохраняем графику

Создание минимально возможного по размеру графического файла - одна из
важнейших задач, стоящих перед разработчиками графики для Web. При подго-
товке графики для просмотра в режиме он-лайн необходимо считаться с множе-
ством факторов, которые влияют на то, как будет выглядеть изображение в
окончательном варианте. В частности, необходимо делать выбор между качест-
вом изображения и размером графического файла, то есть получить максималь-
но возможное качество рисунка при оптимальном времени его загрузки и прори-
совки на экране пользователя. Adobe ImageReady учитывает все эти требования.
Для полного контроля над процессом оптимизации вы можете использовать
специальные режимы просмотра. В процессе создания изображения мы рабо-
тали с неоптимизированной, оригинальной (Original) его версией, которая и
сейчас отображается в окне документа. В нижней части этого окна в двух
открывающихся списках отображается информация о документе: размер опти-
мизированного файла и длительность его загрузки 992 bytes / 1 sec, ориги-
нальный размер, файла и размер оптимизированного GIF-файла 314К / 992 bytes
(Рис. 2.81). В этих открывающихся списках вы можете выбрать другую инфор-
мацию для вывода.
-|П|Х
4-Иг, (?)

первую страницу §

:
100% " 1 [иг byi« / 1 ж Э 28.8 ..лГ | ЗЙК I У)} byus 9IF »

Рис. 2.81. Окно документа с исходным изображением и информацией о нем

> Щелкните мышью на ярлыке Optimized (Оптимизированный) в верхней
части окна документа. На этой вкладке отображается оптимизированное изо-
бражение с параметрами, установленными по умолчанию (Рис. 2.82).

Рис. 2.82. Изображение оптимизировано

107
Adobe Photoshop для Web
Как видите, после оптимизации размер файла составляет 992 байта. Таким образом,
оптимизация данного изображения с параметрами, предлагаемыми по умолчанию,
позволяет уменьшить его размер почти в триста раз.
В двух открывающихся списках в нижней части окна документа можно выбрать
для отображения другую информацию о рисунке: оптимизационная информация
(Optimized Information), размеры изображения (Image Dimensions), наличие
водяного знака на изображении (Watermark Strength), размер в байтах ори-
гинального (Original in Bytes) и оптимизированного изображения (Optimized
in Bytes), размер файла и время его загрузки (Size/Download Time) разными
модемами и др.
>• Просмотрите, воспользовавшись левым открывающимся списком, сведения
об оптимизированном изображении, которые сообщает Adobe ImageReady,
после чего выберите Original/Optimized File Sizes (Оригинальный/Оптимизи-
рованный размеры файлов).
В режиме 2-Up (2 варианта) вы можете увидеть одновременно оригинальный и
оптимизированный рисунки, чтобы иметь возможность сравнить их.
> Щелкните мышью на ярлыке 2-Up (2 варианта) в верхней части окна доку-
мента. В этом окне появятся два поля с информацией: вверху - об оригиналь-
ном изображении, внизу - об оптимизированном (Рис. 2.83).
.J Knopka.psd @ 1002 (2-Up)

первую страницу

первую страницу
100% dither
Selective palette
» colors

Puc. 2.83. Режим 2-Up (2 варианта) с отображаемой информацией

> Выберите команду меню View » Hide Optimization Info (Вид * Скрыть опти-
мизационную информацию). Эта информация будет удалена из окна доку-
мента, и вы увидите оба варианта рисунка (Рис. 2.84).
Как видите, различия между этими вариантами практически не заметны.
В режиме 4-Up (4 варианта) в рабочем окне документа отображаются четыре
версии рисунка.

108
 Подготовка графики с помощью программ Photoshop и ImageReady

Рис. 2.84. Режим 2-Up (2 варианта) со скрытой информацией

v Щелкните мышью на ярлыке 4-Up (4 варианта), чтобы переключиться в этот
режим (Рис. 2.85).
Vj Knopka psd & 10D% (4 Up)

первую страницу

Рмс. 2. S5. Режим 4-Up (4 варианта)

По умолчанию в данном режиме в верхней части окна документа отображается
оригинальный вариант изображения, под ним - оптимизированный вариант с
параметрами по умолчанию, а затем - две версии документа низкого качества с
модифицированными текущими установками.
По умолчанию в окне документа выделен жирной рамкой второй оптимизиро-
ванный вариант изображения, и информация о нем отображается в информаци-
онных полях в нижней строке окна. Если же щелчком мыши выделить другой
вариант рисунка, в информационной строке вы увидите сведения о выбранной
версии. Вне зависимости от того, какой вариант просмотра выбран, вы всегда
будете иметь перед глазами необходимую информацию - имя файла, его размер
109
Adobe Photoshop для Web
или установки оптимизации и время загрузки рисунка при заданной скорости
модема - в зависимости от того, какая информация выбрана для отображения в
открывающихся списках в нижней части окна документа.
>• Переключите окно документа в режим 2-Up (2 варианта), щелкнув мышью на
этом ярлыке в верхней части окна.
>• Выберите команду меню View • Show Optimization Info (Вид * Показать
оптимизационную информацию), чтобы отобразить в окне документа необ-
ходимые сведения.
Параметры оптимизации можно настроить с помо-
щью палитры Optimize (Оптимизация) (Рис. 2.86),
которая по умолчанию находится в верхнем окне
палитр у правого края рабочего окна.
>• Если эта палитра отсутствует в рабочем окне,
выберите команду меню Window * Optimize
(Окно * Оптимизация).
В открывающемся списке Preset (Предваритель- Рис. 2.86. Палитра
ные установки) в верхней части палитры Optimize Optimize (Оптимизация)
(Оптимизация) можно выбрать одну из многочис-
ленных заготовок стандартных параметров для сохранения графики в различных
форматах и с различным качеством. В зависимости от выбранной заготовки из-
менится и набор параметров, которые можно изменить. Для формата GIF в рас-
ширяемой части Color Table (Таблица цветов) можно установить количество
цветов 2, 4, 8, 16, 32, 64, 128, 256 с различными методами смешивания (в рас-
ширяемой части Dither). Для формата JPEG в расширяемой части Quality (Каче-
ство) можно выбрать качество оптимизированного изображения: Low (Низкое),
Medium (Среднее), High (Высокое), Very High -(Очень высокое), Maximum (Мак-
симальное). Также большой выбор параметров для форматов PNG-8 и PNG-24.
Кроме того, можно добавить в меню собственный набор установок и дать ему
имя по своему усмотрению.
В открывающемся списке Format (Формат) предлагается выбрать один из Web-
форматов: GIF, JPEG, PNG-8, PNG-24 или WBMP. О критериях выбора формата
мы уже подробно говорили в главе «Графика для Web-страниц». Напомним
кратко, что формат файла, который выбирается для сохранения изображения,
зависит от его цветовых, тоновых и графических характеристик. В общем случае
многотоновые полноцветные изображения, такие, как фотографические, должны
сохраняться в формате JPEG. Для рисунков с ограниченным количеством цветов,
четко прорисованными деталями и границами объектов, таких, как текст, боль-
ше подходят форматы GIF или PNG-8. Изображения с анимацией должны сохра-
няться в формате GIF. Формат PNG-24 подходит для фотографических изобра-
жений. Однако размер файла в этом формате значительно больше, чем размер
110
 Подготовка графики с помощью программ Photoshop и ImageReady
файла с тем же изображением в формате JPEG. Формат PNG-24 рекомендуется
применять только для полноцветных изображений, содержащих многоуровне-
вую прозрачность, которую не поддерживает формат JPEG. Следует также пом-
нить, что PNG-файлы поддерживаются не всеми популярными Web-браузерами.
Формат WBMP является стандартным для оптимизации изображений для мо-
бильных устройств, таких, как сотовые телефоны. Формат WBMP поддерживает
1-битный цвет, т.е. WBMP-изображения являются черно-белыми.
> Щелкните мышью на треугольнике > слева от строки Color Table (Таблица
цветов). Эта часть палитры Optimize (Оптимизация) будет развернута
(Рис. 2.87).

Format i [GIF

•7Color Table

>Dilh.r
E> Transparency
t>0pli€

Puc. 2.87. Элементы управления Color Table (Таблица цветов)

палитры Optimize (Оптимизация)
Чтобы вновь свернуть часть палитры, достаточно щелкнуть мышью на тре-
угольнике v слева от названия развернутого раздела. Чтобы развернуть все раз-
делы палитры Optimize (Оптимизация), надо нажать кнопку © в правом верхнем
углу палитры и в появившемся меню выбрать команду Show Options (Показать
параметры), а чтобы свернуть - команду Hide Options (Скрыть параметры).
Одним из лучших способов уменьшения размеров GIF или PNG-8 файлов при
сохранении качества является максимально возможное сокращение количества
цветов в изображении. В открывающемся списке Reduction (Уменьшение) рас-
ширяемой части Color Table (Таблица цветов) (Рис. 2.87) вы можете выбрать
одну из предложенных цветовых палитр или таблиц для преобразования изо-
бражения из полноцветного в 256-цветное.
Напомним, что такое преобразование необходимо, так как формат GIF поддер-
живает не более 256 цветов. Палитры отличаются способом их формирования:
Perceptual (Воспринимаемая) - формирует пользовательскую палитру из цветов,
к которым наиболее чувствителен глаз человека;
Selective (Выборочная) - создает палитру, подобную предыдущей, но содержит
также Web-цвета. Выбирается по умолчанию;

111
Adobe Photoshop для Web
Adaptive (Адаптивная) - формирует таблицу цветов путем взятия проб в тех
участках спектра, которые наиболее активно использованы в изображении.
Например, при обработке RGB-изображения в зелено-голубых тонах таблица
будет составлена преимущественно из оттенков зеленого и голубого цветов.
Этот вариант может оказаться достаточно удобным, поскольку во многих случа-
ях цвета, использованные в изображении, сконцентрированы в определенных
участках спектра. Если до начала преобразования вы выделите в изображении
области, содержащие те цвета, которые вам хотелось бы включить в адаптиро-
ванную палитру, то Adobe ImageReady будет формировать таблицу на основе
выделенного диапазона цветов;
Restrictiwiy (Web) (Ограниченная (Web)) - использует стандартную Web-
палитру из 216 цветов, общих для палитр Windows и Мае, использование кото-
рой гарантирует, что цвета не будут подвергаться смешиванию в браузере. Эту
палитру также называют безопасной (Web-safe palette);
Custom (Пользовательская) - сохраняет текущую Perceptual (Воспринимаемая),
Selective.(Выборочная) или Adaptive (Адаптированная) палитру как фиксиро-
ванную, которая не обновляется для каждого изображения;
Black & White (Черно-белая);
Grayscale (Градации серого) - использует 256 градаций серого;
Mac OS - использует стандартную 256 цветную палитру операционной системы
Macintosh, также основанной на равномерной выборке RGB-цветов по всей дли-
не спектра;
Windows - использует стандартную 256 цветную па-
литру Windows, которая основана на равномерной, с'
постоянным интервалом, выборке RGB-цветов по всей
длине спектра.
Набор цветов каждой из перечисленных таблиц вы мо-
жете увидеть в палитре Color Table (Цветовая таблица).
>• Выберите из открывающегося списка Reduction
(Уменьшение) значение Grayscale (Градации серого).
Щелкните мышью на ярлыке Color Table (Цветовая
таблица) в третьем сверху окне палитр у правого
Рис. 2.88. Палитра
края рабочего окна или выберите команду меню
Color Table
Window * Color Table (Окно * Цветовая таблица), (Цветовая таблица)
чтобы вывести на экран эту палитру (Рис. 2.88).
В палитре Color Table (Цветовая таблица) отображаются образцы 256 градаций
серого цвета.

112
 Подготовка графики с помощью программ Photoshop и ImageReady
>• Выбирая из открывающегося списка Reduction (Уменьшение) палитры
Optimize (Оптимизация) различные цветовые таблицы, просмотрите, как при
этом изменяется оптимизированное изображение, его параметры, а также
набор цветов таблицы (Color Table), после чего снова выберите таблицу
Selective (Выборочная).
Используя все доступные средства, вы можете добавлять, удалять, редактиро-
вать или блокировать некоторые цвета в палитре Color Table (Цветовая таблица).
Блокирование цветов гарантирует, что цвет останется нетронутым, когвд вы вы-
бираете другие цвета или преобразовываете их в Web-безопасные цвета. Для
выбора любого цвета достаточно щелкнуть на нем мышью; для выбора группы
shifl
цветов - щелкать мышью при нажатой клавише ll l. Блокирование выбранных
цветов выполняется нажатием кнопки с изображением замка П§"1 - Locks /
Unlocks selected colors to prohibit being dropped (Блокирует / Разблокирует
выбранные цвета) в нижней части палитры Color Table (Цветовая таблица). При
этом в правом нижнем углу образца цвета появляется миниатюрный квадрат.
Для преобразования выбранных цветов в Web-безопасные следует нажать кноп-
ку ПП - Shifts / Unshifts selected colors to Web palette (Сдвигает / Отменяет
сдвиг выбранных цветов к Web-палитре) в нижней части палитры. В центре
образца цвета появится значок в виде миниатюрного ромба.
Добавление-цвета возможно только, если в палитре присутствует менее 256 цветов,
и осуществляется нажатием кнопки I и | - Adds foreground color to palette (Доба-
вить цвет в палитру), а удаление выделенных цветов - нажатием кнопки | ffl | -
Deletes selected colors (Удалить выбранные цвета) в нижней части палитры Color
Table (Цветовая таблица).
В меню палитры Color Table (Цветовая таблица) Adobe ImageReady предлагает
команды для быстрого выбора всех цветов (Select All Colors), всех цветов из
выделенной части рисунка (Select All From Selection), всех Web-безопасных
цветов (Select All Web Safe Colbrs) или всех не Web-безопасных цветов (Select
All None-Web Safe Colors). Вы можете создавать также собственные группы
манипуляций с цветами. Можно, например, выбрать нужный набор цветов или
все цвета, а затем автоматически преобразовать их в Web-безопасный эквива-
лент. Вы также можете непосредственно из палитры Color Table (Цветовая таб-
лица) открыть диалог Color Picker (Палитра цветов) двойным щелчком на лю-
бом из цветов для выбора нового текущего цвета. Выбирая новый цвет,.вы тем
самым редактируете цвет, выделенный в палитре. Напомним, что диалог Color
Picker (Палитра цветов) содержит флажок, который позволяет отображать толь-
ко набор Web-безопасных цветов.
С помощью элемента управления Colors (Цвета) вы можете указать максималь-
ное количество цветов в палитре. Если изображение содержит меньшее количе-
ство цветов, чем вы определили, цветовая палитра будет содержать только цвета

113
Adobe Photoshop для Web
изображения. В поле ввода со счетчиком Colors (Цвета) можно ввести любое
значение в диапазоне от 2 до 256 или выбрать в открывающемся списке одно из
фиксированных значений: 2, 4, 8, 16, 32, 64, 128, 256. Напомним, что для пред-
ставления цвета используется целое число бит и указанный ряд чисел - это мак-
симальное количество цветов при использовании от 1 до 8 бит на 1 пиксел.
Поэтому предпочтительнее выбрать фиксированное значение.
> Выбирая из открывающегося списка Colors (Цвета) различные значения мак-
симального количества цветов в палитре и просматривая полученный резуль-
тат в окне документа, найдите минимальное значение параметра, при кото-
ром качество изображения остается удовлетворительным. Вероятно, таким
значением будет 16.
Обратите внимание, что после каждого изменения параметра происходит по-
вторная оптимизация файла и генерация изображения, и в окне документа появ-
ляется новая информация о нем, включающая также новый размер файла и вре-
мя его загрузки. В нашем случае размер файла начинает уменьшаться только
при значениях количества цветов (Colors), меньших 16.
С помощью ползункового регулятора Web Snap (Привязка к Web) можно ав-
томатически конвертировать цвета палитры в Web-цвета и, таким образом,
исключить смешивание в браузере. Числовое значение этого'параметра в
процентах определяет количество цветов, которые будут преобразованы. Чем
больше значение, тем больше цветов будет преобразовано.
Применение любой из перечисленных выше палитр для уменьшения цветов из
открывающегося списка Reduction (Уменьшение) - Selective (Выборочная),
Adaptive (Адаптивная) и других - может привести к тому, что цветовая таблица
не сможет вместить все цвета, использованные в изображении. Для имитации
цветов, не оказавшихся в цветовой таблице, можно задать один из способов
смешивания, выбрав его из открывающегося списка Method (Метод) расширяе-
мой части Dither (Смешивание) (Рис. 2.89).

Format: [GIF

> Color Table

•<? Dither
M»thodi |Diffusion

Amount! I 100%

/ Transparency
Options

Puc. 2.89. Элементы управления Dither (Смешивание)

палитры Optimize (Оптимизация)

114
 Подготовка графики с помощью программ Photoshop и ImageReady
Смешивание подразумевает комбинирование пикселов, окрашенных в доступ-
ные цвета, случайным образом или в виде узора (Pattern) таким образом, чтобы
получить иллюзию отсутствующего цвета. Например, комбинация красного и
желтого цветов, размещенных в виде мозаичного узора, может имитировать
оранжевый цвет, отсутствующий в палитре. Вам предлагаются четыре варианта:
No Dither (Без смешивания) - не выполняет никакого смешивания. Вместо от-
сутствующих цветов подставляются их ближайшие аналоги из числа доступных.
В результате в изображении могут образоваться слишком резкие цветовые
переходы;
Diffusion (Диффузия) - выполняет смешивание, добавляя в изображение пиксе-
лы, расположенные случайным образом, без какой-либо закономерности, созда-
вая эффект диффузии между соседними пикселами. В результате изображение
приобретает характерную зернистую, шероховатую фактуру, но с минимальны-
ми искажениями цвета. Применяется по умолчанию;
Pattern (Узор) - для имитации отсутствующих в палитре цветов смешивает пик-
селы, располагая их в виде шахматной мозаики;
Noise (Шум) - применяет случайное размещение пикселов, подобно методу
Diffusion (Диффузия), но без диффузии между соседними пикселами. При этом
методе на изображении не возникают шероховатости.
Изменяя значения в поле ввода с ползунковым регулятором Amount (Количест-
во) можно управлять диапазоном цветов, имитируемых смешиванием. Высокие
значения параметра создают больше цветов и, соответственно, ртображают
большее количество деталей рисунка, но могут также увеличить и размер файла.
Изображения, содержащие сплошные цвета, хорошо передаются и при отсутст-
вии смешивания. Полноцветные изображения, особенно цветные градиенты,
требуют установки максимального значения этого параметра.
v Щелкните мышью на треугольнике > слева от строки Transparency (Прозрач-
ность). Эта часть палитры Optimize (Оптимизация) будет развернута (Рис. 2.90).

Formal: (GIF

t> Color Table

l> Dither
^ Transparency
р" Transparency

Dither: !

1> Options

Puc. 2.90. Элементы управления Transparency (Прозрачность)

палитры Optimize (Оптимизация)
115
Adobe Photoshop для Web
Если вам заранее известен цвет фона Web-страницы, на которую будет помеще-
но создаваемое изображение, вы можете указать программе окрасить прозрач-
ные пикселы изображения цветом, соответствующим фону Web-страницы. Это
можно сделать двумя способами. При установленном по умолчанию флажке
Transparency (Прозрачность), а этот флажок установлен, так как изображение
создано на' прозрачном фоне, сохраняется прозрачность всех абсолютно про-
зрачных пикселов. Частично прозрачные пикселы, которые обычно присутству-
ют по краям сглаженного изображения, заполняются цветом, определенным па-
раметром Matte (Подложка). При сброшенном флажке Transparency (Прозрач-
ность) абсолютно и частично прозрачные пикселы заполняются цветом, который
выбирается из открывающегося списка Matte (Подложка).
Параметр Lossy (Потери) в расширяемой части Options (Параметры) (Рис. 2.91)
позволяет указать значение в процентах, на основании которого в процессе сжа-
тия из изображения будут удалены пикселы и, соответственно, уменьшен размер
файла. Применение значения Lossy (Потери) в пределах 5-10%, а иногда и до
50%, заметно не сказывается на качестве. Используя этот параметр, часто можно
уменьшить размер файла на 5-40%. Указанный параметр не может использо-
ваться совместно с методами смешивания Noise (Шум) и Pattern (Узор), а также
при установленном флажке Interlaced (Чересстрочная развертка).

Preset: ([Unnamed]

Format; [GIF

l> Color Table

1> Dither
^ Transparency
VOplioni
П Interlaced Lossy: | 0

П Use Unified Color Table

JTi Add Metadata {"settings... |

Puc. 2.91. Элементы управления Options (Параметры)

палитры Optimize (Оптимизация)
>• Установите флажок Interlaced (Чересстрочная развертка), чтобы сохранить
файл с использованием чересстрочной развертки.
При этом в процессе загрузки изображения браузер показывает сначала каждую
восьмую строку пикселов, затем - каждую четвертую, далее - каждую вторую и,
наконец, все изображение. Это позволяет пользователю понять содержание ри-
сунка еще до окончания его полной загрузки. Обратите внимание, что использо-
вание чересстрочной развертки для данного изображения не увеличивает размер
файла, а даже незначительно уменьшает его с 992 до 987 байт (при 256 цветах).

116
 Подготовка графики с помощью программ Photoshop и ImageReady
х Установите флажок Use Unified Color Table (Использовать унифицирован-
ную цветовую таблицу). Это позволит использовать единую цветовую табли-
цу для всех состояний эффекта Rollover (Наведение).
Adobe ImageReady обеспечивает цветовой контроль на таком уровне, что можно
даже увидеть, как будет выглядеть 8-битное, 256-цветное изображение в различ-
ных браузерах и в различных операционных системах. Чтобы проверить ото-
бражение графики в браузере, достаточно выбрать команду меню View •
Preview » Browser Dither (Вид * Предварительный просмотр * Смешивание в
браузере) при активном оптимизированном варианте изображения в окне доку-
t мента. Или можно изменить настройки дисплея на 8-битный режим - 256 цветов,
а затем просмотреть оптимизированное изображение в различных браузерах,
которые можно вызвать непосредственно из Adobe ImageReady командой меню
File » Preview In (Файл * Предварительный просмотр в) или нажатием кнопки
[Ж] - Preview in Default Browser (Ctrl+Alt+P) (Предварительный просмотр в
браузере по умолчанию (Ctrl+Alt+P)) на панели инструментов (Tools).
Операционные системы Macintosh и Windows используют различные цветовые
гаммы для отображения графики на экране, и обычно в системе Windows изобра-
жения кажутся несколько темнее. Adobe ImageReady имитирует этот эффект, ко-
гда пользователь выбирает команды меню View » Preview * Standard Windows
Color (Вид Ф Предварительный просмотр «• Стандартные цвета Windows) или
View » Preview * Standard Macintosh Color (Вид * Предварительный просмотр *
Стандартные цвета Macintosh), что позволяет на глаз оценить, как будет выгля-
деть графика. Adobe ImageReady выводит в палитре Info (Информация) значения
цветов как в десятичной, так и в шестнадцатеричной системе счисления в тот
момент, когда курсор указывает на соответствующий цвет в окне документа или
палитре Color Table (Цветовая таблица), что очень удобно для Web-дизайнеров.
Оптимизированное изображение необходимо сохранить в папке Web, в которой
сохранены файлы сайта, и в том числе, файл spisok.html.
> Выберите команду меню File » Save Optimized (Файл » Сохранить оптими-
зированный документ). На экране появится диалог Save Optimized (Сохране-
ние оптимизированного документа) (Рис. 2.92).
>• Откройте для сохранения файла папку Web, в которой сохранены HTML-
файлы сайта.
> Убедитесь, что в открывающемся списке Тип файла (File type) выбрано
HTML and Images (*.html) (HTML и изображения (*.html)), чтобы сгенериро-
вать HTML-код созданного эффекта и сохранить изображения. При этом кад-
ры каждого состояния эффекта Rollover будут сохранены как отдельные фай-
лы в папке images, которая будет помещена в ту папку, где будет находиться
HTML-файл, т.е. в папку Web.

117
Adobe Photoshop для Web

Sample Piclme.

.!

Имя файле: |Knopka

1ип Файла: [HTML and Images I'.Kmll

Settings: | Dclaul Sellings

Sices: |AISfc«

PMC. 2.92. Диалог Save Optimized (Сохранение оптимизированного документа)

В поле ввода Имя файла (File name) для сохраняемого документа предлагается
имя Knopka.html. Оставим его без изменения.
> Нажмите кнопку Сохранить (Save). Диалог Save Optimized (Сохранение оп-
тимизированного документа) закроется. Adobe ImageReady создаст и сохра-
нит на диске файл Knopka.html с HTML-кодом эффекта.
Мы познакомились с возможностями оптимизации и сохранения графики для
Web в программе Adobe ImageReady. Такую же оптимизацию вы можете выпол-
нить в Adobe Photoshop. Особенности оптимизации в Adobe Photoshop мы рас-
смотрим в дальнейшем. А сейчас программу Adobe ImageReady можно закрыть.
> Выберите команду меню File » Exit (Файл » Выход). На экране появится за-
прос о необходимости сохранения документа Knopka.psd (Рис. 2.93).

Save changes lo document "Knopka.pjd" before quilting?

'а„ i

Рис. 2.93. Запрос о необходимости сохранения документа Knopka.psd

Так как мы уже сохранили документ перед оптимизацией, то на этот запрос
можно ответить отрицательно.
> Нажмите кнопку Нет (No). Программа Adobe ImageReady закроется. Вы воз-
вратитесь к программе Adobe Photoshop.

118
 Подготовка графики с помощью программ Photoshop и ImageReady
Посмотрим, что представляет собой созданный файл.
> Откройте в программе Блокнот (Notepad) файл Knopka.html из папки Web.
В этом файле записана автоматически созданная на языке JavaScript программа,
изменяющая состояние изображения кнопки при различных действиях, выпол-
няемых мышью. Сами изображения находятся в папке images. Такая программа
обычно состоит из команд (операторов) и команд вызова функций. В нашем
случае функции находятся в заголовке HTML-документа между тегами <head>
и </head>, а команды, их вызывающие, - в его теле, между тегами <body> и
</body>.
Теперь мы должны скопировать код программы из файла Knopka.html в файл
spisok.html так, чтобы вставить в последнем документе вместо текстовой ссылки
На первую страницу графическую кнопку. Сделаем это следующим образом:
>• Откройте файл spisok.html в новой копии программы Блокнот (Notepad).
> Скопируйте через буфер обмена в заголовок файла spisok.html функции, на-
чиная с комментария <!— ImageReady Preload Script (Knopka.psd)
—> и заканчивая <!-- End Preload Script -->.
> В открывающий тег <body> файла spisok.html добавьте команду вызова функ-
ции предварительной загрузки изображений ONLOAD="preloadimages();",
скопировав ее из файла Knopka.html так, чтобы этот тег имел следующий вид:
<body bgcolor=blue text=yellow link=white vlink=yellow
ONLOAD="preloadImages();">
>• На место строки, в которой определяется ссылка На первую страницу файла
spisok.html скопируйте из файла Knopka.html текст программы, начиная с
<!— ImageReady Slices (Knopka.psd) --> и заканчивая <!-- End
ImageReady Slices -->.
> В файле spisok.html Б ссылке A HREF="#" символ # замените именем файла
geoton.html, чтобы эта ссылка имела следующий вид:
A HREF="geoton.html"
> Сохраните файл spisok.html, выбрав команду меню программы Блокнот
(Notepad) Файл » Сохранить (File • Save).
>• Закройте обе копии программы Блокнот (Notepad).
Проверим, как работает созданная нами кнопка.
>• Откройте документ spisok.html из папки Web в программе просмотра Web-
страниц.
> Перейдите в конец страницы, где находится вставленная кнопка.

119
Adobe Photoshop для Web
Пока указатель мыши находится за пределами графической кнопки, ее изобра-
жение плоское.
>• Установите указатель мыши на желтой кнопке с надписью На первую
страницу. Кнопка станет рельефной.
>• Нажмите и удерживайте, левую кнопку мыши. Будет имитировано нажатое
состояние графической кнопки.
> Отпустите левую кнопку мыши. Произойдет переход по ссылке, и в окно
браузера будет загружен файл geoton.html.
Если у вас что-либо не получается, проверьте, правильно ли вы скопировали
программу в файл spisok.html.
>• Закройте окно браузера, нажав кнопку [х] в правом верхнем его углу.
Таким образом, мы убедились, что созданный нами эффект Rollover (Наведение)
работает. Подобным образом вы можете создавать большое количество разно-
образных эффектов. Кроме того, каждое состояние эффекта может быть аними-
ровано, например, так, чтобы при нажатии кнопки буквы «убегали» с нее. Можно
придумать множество интересных и необычных эффектов.

фото
На своих Web-страницах вы, конечно же, будете помещать не только баннеры,
кнопки и рисунки, но и фотографические изображения. Фотографии для Web
могут быть взяты из библиотек цифровых фотографий, распространяемых на
CD-ROM, загружены из WWW, получены с помощью видеокамеры, цифрового
фотоаппарата или же путем сканирования фотографий и слайдов, снятых пле-
ночным фотоаппаратом.
Одно из существенных преимуществ цифровой фотографии, помимо оператив-
ности и удобства, - широкие возможности редактирования изображений. Ретушь,
фотомонтаж, всякого рода художественные эффекты на цифровых фото осуще-
ствляются значительно проще, существенно быстрее и, самое главное, не требуют
от исполнителя каких-либо особых навыков и квалификации. Однако самой впе-
чатляющей является возможность коррекции и полного исправления таких не-
достатков экспозиции, перспективных и геометрических искажений, коррекция
которых в традиционной фотографии просто невозможна. В очередных разделах
мы поговорим о процессе подготовки фотографий для Web, а для иллюстрации
основных возможностей их обработки воспользуемся фотографиями Ozero.jpg и
Samolet.jpg из архива www.3st.ru/book/web/ex.zip.
> Откройте в программе Adobe Photoshop с помощью команды меню File *
Open (Файл » Открыть) загруженный файл Ozero.jpg (Рис. 2.94).
1
120
 Подготовка графики с помощью программ Photoshop и ImageReady

Рис, 2.94. Фотография из фата Ozero.jpg

Очень часто цифровые фотографии, особенно сканированные, содержат дефек-
ты самого различного характера: нарушение цветового и тонового баланса, рас-
фокусировка, блики и др. В недалеком прошлом в каждом фотоателье обяза-
тельно выполнялась ретушь фотографий, и вручную, более или менее удачно
корректировались дефекты, как технические, так и художественные. Совершен-
но иное дело - компьютерная ретушь, которую порой даже трудно вычленить,
поскольку, как правило, она входит в качестве составной части в сложный твор-
ческий процесс обработки изображения. И, тем не менее, какие-то элементы
ретуши мы попробуем вычленить и рассмотреть отдельно.
На открытой в Adobe Photoshop фотографии Ozero.jpg вы видите африканский
пейзаж. Причем все изображение сильно затемнено так, что в его нижней части
практически ничего не видно. Кроме того, фотография расфокусирована, а в ее цен-
тре находится белый блик. Попробуем, по возможности, исправить все эти изъяны.
Прежде чем мы приступим к работе, следует сохранить этот файл в формате
Adobe Photoshop. Напомним, что недостатком JPEG-формата, в котором сохра-
нен файл Ozero.jpg, является то, что его алгоритм уплотнения приводит к час-
тичной потере данных. Если вы упакуете изображение в процессе сохранения, а
затем вновь распакуете его, то результат не будет полностью идентичен ориги-
налу. При постоянном открытии и сохранения JPEG-файла можно сильно ис-
портить изображение. Формат Adobe Photoshop лишен этого недостатка и, кро-
ме того, позволяет хранить слои и другие атрибуты изображения, которые не
доступны в формате JPEG. Поэтому до полного окончания работы с изображе-
ниями их нужно сохранять в формате PSD.

121
Adobe Photoshop для Web
>• Выберите команду меню File * Save As (Файл » Сохранить как). На экране
появится диалог Save As (Сохранить как). •
> Выберите папку, в которой будет сохранен документ.
>• В открывающемся списке Format (Формат) выберите формат Photoshop (*.PSD;
*.PDD).
> В открывающемся списке Имя файла (File name) укажите имя сохраняемого
файла - Ozero.psd.
> Нажмите кнопку Сохранить (Save). Файл будет сохранен на диске в выбран-
ной папке под указанным именем.
Ретуширование фотографии начнем с блика. Коррекция подобных погрешностей
выполняется посредством клонирования, которое заключается в замене дефект-
ного участка образцом из близлежащих областей. Эта операция выполняется с
помощью инструмента Щ - Clone Stamp Tool (S) (Инструмент «Штамп» (S)).
> Нажмите кнопку [&] - Clone Stamp Tool (S) (Инструмент «Штамп» (S)) на
панели инструментов (Tools). Инструмент будет выбран. На панели параметров
(Options Bar) вы увидите элементы управления параметрами инструмента
(Рис. 2.95).
Optdlyi 11Ю» I> I Ftowi I 100% Fl

Puc. 2.95. Панель параметров инструмента Clone Stamp Tool (S)

(Инструмент «Штамп» (S))
Теперь нам нужно выбрать мягкую кисть, форма и размер которой определяет
форму и размер фрагмента изображения, переносимого на дефектный участок.
Поскольку удаляемый блик имеет округлую форму, то и форма кисти должна
быть такая же, а размер кисти - несколько больше блика.
>• Нажмите кнопку [J справа от образца текущей кисти Brush (Кисть) на панели
параметров (Options Bar), чтобы открыть палитру кистей.
Напомним, что название кисти появляется во всплывающей подсказке, если на-
вести и удерживать на выбранной кисти указатель мыши.
> Выберите кисть Soft Round 35 pixels (Мягкая круглая 35 пикселов), щелкнув
на ней мышью.
>• Щелкните мышью на свободном пространстве рабочего окна. Палитра
кистей закроется.
Заметьте, что для клонирования следует воспользоваться кистью с мягкими
краями, чтобы максимально сгладить переход между существующим и перене-
сенным изображением.

122
 Подготовка графики с помощью программ Photoshop и ImageReady
Процесс клонирования состоит из двух операций. Сначала следует выбрать об-
разец для замены дефектного фрагмента, а затем выполнить замену. Чтобы на
месте исправленного дефекта не было заметно «заплатки», нужно правильно
выбрать область-источник: того же оттенка, с такой же освещенностью и т.д.
В нашем случае по этим параметрам для клонирования лучше всего подходит
участок справа от блика.
> Установите указатель мыши, который примет форму круга диаметром 35 пик-
селов, на фотографии справа от белого блика так, чтобы блик находился за
пределами круга.
А11
>• Нажмите и удерживайте клавишу I I. Указатель мыши примет форму @.
А|
> Не отпуская клавишу И У I. щелкните мышью в этом месте.
Alt
>• Отпустите клавишу К I.
Таким образом, мы зафиксировали центр клонируемой области.

Нажав клавишу II Alt I. вы можете взять образец для инструмента [Ж] в любом от-
крытом окне документа программы Adobe Photoshop, не меняя при этом актив-
ного окна.
Теперь можно перенести образец на блик и, таким образом, ликвидировать его.
>• Установите указатель мыши, который примет форму круга диаметром 35 пик-
селов, на белый блик так, чтобы блик находился в центре круга.
>• Щелкните мышью в этом месте. В момент щелчка справа от указателя мыши-
круга появится крестик, обозначая центр клонируемой области. Белый блик
исчезнет - на него будет наложен клонированный образец.
Если полученный результат вас не удовлетворяет, отмените клонирование и по-
пробуйте клонировать другие области вокруг дефекта, пока не найдется подхо-
дящая замена.
Клонирование можно выполнять также, «рисуя» кистью при нажатой левой
кнопке мыши. При этом нужно следить за крестиком, определяющим место* с
которого копируется изображение, и одновременно видеть и правильно направ-
лять процесс клонирования.

выполняем тоио&ую коррекцию

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

123
Adobe Photoshop для Web
Однако очень часто изображения, особенно сканированные, имеют дефекты в
темных, средних или светлых тонах. Задачей тоновой коррекции является ис-
правление погрешностей в отдельных частях тонового диапазона путем переоп-
ределения значений яркости пикселов и обеспечения правильного ее распреде-
ления по всему изображению.
Фотография Ozero.jpg затемнена и выглядит «тусклой». Причиной этого являет-
ся нарушение тонового баланса. Поэтому наша очередная задача - повысить яр-
кость и контрастность изображения, выполнив тоновую коррекцию. Это можно
сделать с помощью диалога Levels (Уровни). •
Для выполнения тоновой коррекции воспользуемся специальным корректирую-
щим слоем, который позволит свободно экспериментировать с настройкой цве-
товых и тоновых характеристик изображения, не изменяя при этом исходные
графические данные. Вместо того, чтобы непосредственно редактировать пикселы,
можно записать параметры коррекции на вспомогательным слое и «взглянуть»
сквозь него на реальные слои изображения. Параметры настройки, записанные
на корректирующем слое, воздействуют на все слои изображения, располо-
женные под ним. Таким образом, вы можете не обрабатывать каждый1 слой в
отдельности, а модифицировать одновременно несколько слоев. Имеется воз-
можность также воздействовать только на тот слой, который расположен под
корректирующим.
Создадим корректирующий слой.
>• Убедитесь, что палитра Layers (Слои) видна на экране и не перекрывается
другими палитрами. В противном случае выберите команду меню Window »
Layers (Окно » Слои).
> Выберите команду меню Layer * New Adjustment Layer * Levels (Слой »
Новый корректирующий слой » Уровни). На экране появится диалог New
Layer (Новый слой) (Рис. 2.96).

Name: | Levels 1 ]L OK J
. П Use Previous Layer to Create GiQping Mask | Cancel |
Color: |D None \*\

Mode: | Normal \~l Opacity: 1100 I И %

Puc. 2.96. Диалог New Layer (Новый слой)

В поле ввода Name (Имя) этого диалога по умолчанию предлагается имя слоя -
Levels 1 (Уровни 1). Данный тип корректирующего слоя настраивает уровни
яркости и контрастности изображения. Это то, что нам нужно.

124
 Подготовка графики с помощью программ Photoshop и ImageReady
Установка флажка Use Previous Layer to Create Clipping Mask (Использовать
предыдущий слой для создания маски) позволяет применить коррекцию яркости
и контрастности только к одному нижележащему слою.
Параметры Opacity (Непрозрачность) и Mode (Режим) позволяют сразу же оп-
ределить степень непрозрачности и режим наложения пикселов. Корректи-
рующие слои приобретают такие же характеристики непрозрачности и режима
наложения, что и реальные слои.
> Нажатием кнопки ОК закройте диалог New Layer (Новый слой). В палитре
Layers (Слои) появится и станет активным новый слой Levels 1 (Уровни 1)
(Рис. 2.97).

Рис. 2.97. Корректирующий слой создан

Вновь созданный корректирующий слой располагается в палитре слоев непо-
средственно на слое, который перед этим был активным. При необходимости
можно изменять его положение в пачке слоев, удалять, скрывать и дублиро-
вать по аналогии с обычными слоям)».
Одновременно с созданием корректирующего слоя на экране появился диалог
Levels (Уровни) (Рис. 2.98).

Input Levels: 10_ J jjUDOj [255J

Рис. 2.98. Диалог Levels (Уровни)

> Переместите этот диалог так, чтобы он не закрывал окно документа.

125
Adobe Photoshop для Web
Тоновая коррекция изображения выполняется с помощью гистограммы в
диалоге Levels (Уровни). Гистограмма - это графическое представление уров-
ней яркости в изображении. Горизонтальная ось гистограммы отображает зна-
чения яркости от 0 до 255. Значение яркости 0 (ноль) у левого края графика
соответствует самым темным тонам, а значение яркости 255 у правого края гра-
фика - самым светлым. По вертикальной оси гистограммы отображается коли-
чество пикселов, имеющих данное значение яркости.
С помощью гистограммы вы можете определить, содержит ли изображение дос-
таточное количество деталей яркости, которое обеспечило бы хорошие резуль-
таты настройки: слишком малое количество полутонов может не позволить вам
выполнить качественную коррекцию. Недостаток деталей яркости в изображении
может быть вызван плохим качеством оригинала или ошибками сканирования.
Кроме того, потеря деталей может произойти в результате уже выполненной об-
работки изображения.
Под гистограммой расположены три треугольника-бегунка: черный - слева, се-
рый - в центре, белый - справа. Черный и белый бегунки указывают значения
яркости, которые отображаются соответственно в левом - 0 - и правом - 255 -
полях ввода Input Levels (Входные уровни). Серый треугольник-бегунок управ-
ляет настройкой гаммы изображения или коэффициента контраста в средних
тонах. Соответствующее его положению значение - 1.0 - отображается в сред-
нем поле ввода.
Если черный треугольный бегунок под гистограммой перемещать вправо, то все
значения яркости пикселов слева от него станут равны 0 (нулю) или черному
цвету. Например, когда при перемещении треугольника значение в левом поле
ввода Input Levels (Входные уровни) повысится до 50, то все пикселы, имеющие
в исходном изображении уровень яркости 50 и ниже, станут черными. Это при-
ведет к затемнению изображения.
Если белый треугольный бегунок двигать влево, то все значения яркости пиксе-
лов справа от него будут равны 255 или белому цвету. Например, когда при пе-
ремещении бегунка значение в правом поле ввода Input Levels (Входные уровни)
понизится до 200, все пикселы изображения с уровнями яркости 200 и выше
станут белыми. Это приведет к осветлению изображения.
При таких перемещениях бегунков информация, которая была на краях тонового
диапазона, потеряется, но если ее не было, - все значения яркости будут пере-
вычислены и качество изображения станет лучше.
Если передвигать средний серый треугольный бегунок влево к области теней,
яркость средних тонов будет увеличиваться, а при перемещении вправо средние
тона будут затемняться. В обоих случаях контрастность изображения будет
понижаться.

126
 Подготовка графики с помощью программ Photoshop и ImageReady
При установленных по умолчанию в полях ввода Input Levels (Входные уровни)
значениях яркости 0,1.0,255 коррекция исходного изображения не выполняется.
Гистограмма дает общее представление о распределении пикселов в изображе-
нии. Концентрация большого количества пикселов на гистограмме в светлых
участках или тенях изображения свидетельствует о смещении его тонового ин-
тервала, которое выражается в повышении контраста в соответствующем участ-
ке тонового диапазона. Напротив, отсутствие пикселов в светлых или темных
участках гистограммы приводит к снижению контраста в этой области тонового
диапазона. Характер гистограммы позволяет судить о тоновом интервале изо-
бражения и выбрать наиболее эффективный метод коррекции.
Если изображение содержит полутона по всему диапазону яркости, то график
будет отображаться по всей ширине гистограммы, от черного до белого тре-
угольных бегунков. Если же график сжат к центру, то это свидетельствует об
отсутствии очень темных и очень светлых тонов. В нашем случае, как видно на
гистограмме, отсутствуют полутона в области теней, у правого края гистограммы,
и самые темные пикселы имеют значение яркости не 0, а примерно 18-20. Это
приводит к снижению контраста исходного изображения в области теней.
Первый этап тоновой коррекции состоит в переопределении значений яркости
для самого светлого и самого темного пикселов изображения, что позволяет
достичь максимальной детализации по всему тоновому интервалу. Эту про-
цедуру иногда называют определением света и теней или установкой белой и
черной точек.
Способ коррекции изображения, содержащего слишком малое количество полу-
тонов в светлых областях или тенях, т.е. по краям шкалы яркостей, заключается
в перемещении треугольных бегунков к точкам, соответствующим фактическим
границам его тонового интервала. В результате происходит переопределение
самого светлого и самого темного пикселов изображения - они становятся соот-
ветственно белыми и черными. Значения яркости всех остальных пикселов кор-
ректируются пропорционально, что позволяет сохранить в изображении общий
цветовой баланс.
Переопределим значение яркости для самого темного пиксела изображения.
>• Убедитесь, что в диалоге Levels (Уровни) установлен флажок Preview (Пред-
варительный просмотр). Это позволит наблюдать в окне документа все изме-
нения изображения.
> Переместите черный треугольный бегунок у левого края гистограммы вправо,
к границе тонового интервала изображения, т.е. к первой слева группе полу-
тонов так, чтобы в левом поле ввода Input Levels (Входные уровни) появи-
лось значение 18.

127
Adobe Photoshop для Web
В результате такой коррекции значения яркости пикселов на гистограмме слева
от черного треугольника станут равны 0 (нулю) или черному цвету, а значения
яркости всех остальных пикселов изображения будут уменьшены на указанное
число, и изображение в окне документа станет темнее. Соответственно, если
двигать влево белый треугольный бегунок, то значения яркости всех пикселов
справа от него будут равны 255 или белому цвету. Таким образом, информация,
которая была на краях тонового диапазона, потеряется, но если ее не было, все
значения яркости будут перераспределены, и качество изображения улучшится.
Выполнив коррекцию теней, мы можем теперь настроить гамму или средние
тона изображения. Настройка гаммы позволяет изменять значения яркости в
среднем диапазоне полутоновой шкалы, не вторгаясь в области светов и теней.
Как правило, эта процедура не требуется при обработке изображений с преобла-
данием средних тонов, поскольку в процессе установки светлых областей и те-
ней происходит соответствующее перераспределение значений яркости по всему
тоновому интервалу. Однако в тех случаях, когда большинство полутонов ока-
зывается сконцентрированным на краях шкалы яркостей, как в нашем случае в
области теней, необходимость дополнительной настройки средних тонов стано-
вится очевидной.
> .Перемещайте серый треугольный бегунок под гистограммой влево, в область
теней, на небольшие интервалы и наблюдайте, как при этом увеличивается
яркость средних тонов. Установите этим бегунком значение гаммы прибли-
зительно 1.30. Это значение должно отобразиться в среднем поле ввода Input
Levels (Входные уровни).
Поля ввода Input Levels (Входные уровни) и треугольники-бегунки, располо-
женные непосредственно под гистограммой, используются также для усиления
контраста в изображении. Черный треугольный бегунок, как указывалось
выше, управляет тенями, белый - светом, а серый - настройкой гаммы или
коэффициента контраста в средних тонах. Вы также можете указывать
входные значения в явном виде.
Предположим, что вы хотите повысить контраст в изображении, пикселы кото-
рого охватывают весь диапазон цветовых значений от 0 до 255. Если перемес-
тить белый треугольник под гистограммой к отметке 225, то всем пикселам с
яркостью от 225 до 255 будет присвоено значение 255. Значения яркости всех
остальных пикселов будут пропорционально переопределены в границах нового
тонового интервала. В результате изображение станет светлее, а контраст в
светлых областях усилится.
Поля ввода Output Levels (Выходные уровни) и шкала под ними в нижней части
диалога Levels (Уровни) используются для снижения контраста в изображении.
Черный треугольник управляет тенями, а белый - светлыми областями. Вы так-
же можете вводить выходные значения в явном виде. Если в параметре Input

128
 Подготовка графики с помощью программ Photoshop и ImageReady
Levels (Входные уровни) участок гистограммы справа от светлого треугольника
соответствует белому цвету, то в параметре Output Levels (Выходные уровни)
этот же участок соответствует текущему уровню, на который указывает тре-
угольный бегунок.
Предположим, что необходимо снизить контраст. Если вы переместите белый
треугольник нижней шкалы к отметке 225, то яркость самых светлых пикселов
будет изменена с 255 до 225, а яркость всех остальных пикселов будет пропор-
ционально уменьшена в соответствии с изменившимся диапазоном значений.
В результате изображение станет темнее, а контраст в светлых областях снизится.
> Закройте диалог Levels (Уровни) нажатием кнопки ОК. Установленные па-
раметры коррекции будут применены. Изображение примет вид примерно
как на Рис. 2.99.

Рис. 2.99. Тоновая коррекция выполнена

> Выключайте и включайте отображение корректирующего слоя Levels (Уровни)
в палитре Layers (Слои), чтобы оценить различие в изображении до и после
тоновой коррекции.
Теперь, когда тоновая коррекция выполнена, можно объединить корректирую-
щий слой с нижележащим фоновым.
> Выберите команду меню Layer • Merge Down (Слой * Объединить с ниже-
лежащим). Корректирующий слой будет объединен с нижележащим слоем
Background (Фон).
> Повторно откройте диалог Levels (Уровни), выбрав команду меню Image *
Adjustments * Levels (Изображение • Коррекции * Уровни).

129
5-6645
Adobe Photoshop для Web
Вы увидите, что гистограмма несколько «выровнялась», растянулась на всю ши-
рину шкалы яркостей, уменьшилась концентрация полутонов в области теней,
однако при этом в ней появились «пробелы» (Рис. 2.100).

II III •*••••».
_

Output Levels: [p_j J255J //J

Ш Ereview

Puc. 2.100. Гистограмма после тоновой коррекции

Эти пробелы существенно не влияют на качество изображения, если только они
не становятся слишком широкими и не сопровождаются слишком малым коли-
чеством пикселов соответствующей яркости. Белые пробелы - это плата за рас-
ширение диапазона яркостей. В данном изображении отсутствие пикселов опре-
деленных яркостей не сильно сказывается на качестве изображения, но могут
встретиться изображения, у которых при максимальном расширении диапазона
яркостей возможны значительные провалы в тонах.
> Нажав кнопку ОК, закройте диалог Levels (Уровни).
> Сохраните документ, выбрав команду меню File » Save (Файл * Сохранить).
Так как фотография сохраняется в формате Adobe Photoshop, а не JPEG, то
потери качества не будет.
Таким образом, смысл тоновой коррекции заключается в «вытягивании» имею-
щегося тонового диапазона как в сторону светлых участков, так и в сторону те-
ней и выполняется путем переопределения крайних точек тонового диапазона и
перераспределения всех остальных уровней в новом диапазоне. При необходи-
мости выполняется также коррекция значений яркости в средней части полуто-
новой шкалы. Все эти операции выполняются в диалоге Levels (Уровни).
Кроме команды Levels (Уровни), в Adobe Photoshop имеется еще несколько
возможностей для тоновой коррекции. Принцип работы всех инструментов то-
новой коррекции программы Adobe Photoshop одинаков: существующие диапа-
зоны значений пикселов преобразуются в новые диапазоны. Различие между
этими инструментами определяется разными возможностями настройки значений.
Например, команда Brightness/Contrast (Яркость/Контраст) выполняет одина-

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

Повышаем резкость изображения

Следующее, что необходимо сделать, корректируя изображение, - это усилить
его резкость с помощью фильтров. Резкость изображения - очень важный пара-
метр. Во всяком случае, главные элементы изображения должны быть резкими.
Но зачастую, по разным причинам резкости бывает не достаточно.
В программе Adobe Photoshop имеется специальный инструмент Sharpen Tool (R)
(Инструмент «Резкость» (R)) и несколько фильтров; которые осуществляют уси-
ление резкости. Эти фильтры вызываются из меню Filter * Sharpen (Фильтр »
Резкость).
>. Выберите команду меню Filter » Sharpen (Фильтр * Sharpen
Резкость). Вы увидите подменю с перечнем Sharpen Edges
фильтров, повышающих резкость (Рис. 2.101). Sharpen More
Unsharp Mask...
Все эти фильтры повышают четкость изображения за
счет усиления контраста между соседними пикселами. рис 2 101 Фильтры
Фильтры Sharpen (Резкость) и Sharpen More (Рез- повышающие резкость
косты-) фокусируют изображение или выделенную
область," повышая ее четкость. Разница между ними состоит лишь в том, что
фильтр Sharpen More (Резкость*) дает более выраженный эффект. Из четырех
фильтров первые три - это фильтры прямого действия: они не требуют дополни-
тельных установок. Фильтры Sharpen Edges (Резкость по краям) и Unsharp
Mask (Контурная резкость) отыскивают в изображении границы цветовых пере-
ходов и повышают их резкость.
Фильтр Unsharp Mask (Контурная резкость) обычно используется для аккурат-
ной коррекции изображений. Этот фильтр подчеркивает контуры предметов
и основан на том эффекте, что человеческий глаз воспринимает повышение
контрастности на границах областей с различными яркостями как увеличение
резкости.
> Выберите в подменю с перечнем фильтров команду Unsharp Mask (Контурная
резкость). На экране появится диалог Unsharp Mask (Контурная резкость)
(Рис. 2.102).

131
Adobe Photoshop для Web

FJ 100% [£|

Amount: П ю ( %

Threshold: |£_ _j levels

PMC. 2.102. Диалог Unsharp Mask (Контурная резкость)

В основе работы этого фильтра лежит традиционный метод, применяемый в
полиграфии; он позволяет исправлять некоторые погрешности оригинала- фо-
тографии или сканированного изображения, а также компенсировать размы-
тие, возникающее во время печати. Фильтр определяет все пары смежных пик-
селов, яркость которых отличается на заданную величину, и повышает кон-
траст между ними. Кроме того, можно задать радиус - количество соседних
пикселов, - в пределах которого происходит настройка резкости.
Параметр Amount (Эффект) определяет степень усиления контраста пикселов.
Для изображений с высоким разрешением рекомендуется задавать его значе-
ние в пределах от 150% до 200%.
Параметр Radius (Радиус) определяет ширину границы действия фильтра - ко-
личество пикселов вокруг краевых пикселов элементов изображения, которые
подвергаются воздействию фильтра. Для изображений с высоким разрешением
рекомендуется использовать значения в пределах от 1 до 2.
Параметр Threshold (Порог) определяет величину разности яркости, при кото-
рой начинает действовать фильтр, т.е. при каком минимальном различии ярко-
стей два пиксела должны считаться краевыми и подвергаться воздействию
фильтра. В изображениях, содержащих оттенки телесного цвета, а также в лю-
бых областях, где вам хотелось бы избежать появления дополнительных шумов,
старайтесь использовать для этого параметра значения в лределах от 2 до 20.
Значение, принятое для параметра Threshold (Порог) по умолчанию - 0, повы-
шает резкость всех пикселов изображения.

132
 Подготовка графики с помощью программ Photoshop и ImageReady
> Перемещайте ползунковый регулятор Amount (Эффект) вправо до тех пор,
пока изображение в окне документа не станет достаточно резким. Мы ис-
пользовали значение 200%.
> Закройте диалог Unsharp Mask (Контурная резкость), нажав кнопку ОК.
Изображение в окне документа примет вид примерно как на Рис. 2.103.

Рис. 2.103. Резкость изображения повышена

> Сохраните документ, выбрав команду меню File * Save (Файл * Сохранить).
Кроме фильтров, повышающих резкость, Adobe Photoshop располагает большим
количеством разнообразных фильтров, которые позволяют применять к изобра-
жениям различные специальные эффекты. Например, с их помощью вы можете
имитировать манеру письма художников-импрессионистов, случайным образом
перераспределять цветовые значения пикселов, добавлять или уменьшать шумы,
создавать эффект присутствия различных источников света, произвольно де-
формировать изображение, а также получать многие другие интересные визу-
альные эффекты.

Комбинируем фотографии
Adobe Photoshop располагает поистине неисчерпаемыми возможностями в об-
ласти фотомонтажа и комбинирования изображений. Трудно представить себе
задачу из этой области, с которой не справился бы Adobe Photoshop.
Если изображение на откорректированной фотографии Ozero.psd кажется вам
слишком унылым, то его легко можно оживить, добавив, например, птицу, лод-
ку или космический корабль. Посмотрим, как выполнить такое комбинирование.

133
Adobe Photoshop для Web
> He закрывая файл Ozero.psd, откройте в рабочем окне программы Adobe
Photoshop файл Samolet.jpg (Рис. 2.104).

Рис. 2.104. Фотография из файла файл Samolet.jpg

На этой фотографии мы выделим изображение самолета, находящегося на пе-
реднем плане, скопируем его в буфер обмена, а затем вставим в документ
Ozero.psd.
Чтобы точнее выполнить выделение, увеличим масштаб отображения до 300%.
>> Выберите инструмент [ДП - Zoom Tool (Z) (Инструмент «Масштаб» (Z)) на
панели инструментов (Tools) и два раза щелкните мышью на изображении
самолета на переднем плане фотографии Samolet.jpg.
> Нажмите кнопку [Ц в правом верхнем углу окна документа Samolet.jpg. что-
бы развернуть его на весь экран.
>• Воспользовавшись полосами прокрутки, поместите изображение в центре
экрана (Рис. 2.105).

Рис. 2.105. Масштаб изображения увеличен

134
 Подготовка графики с помощью программ Photoshop и ImageReady
>• Переместите панель инструментов (Tools) и палитры, предварительно свер-
нув их, так чтобы они не перекрывали изображение самолета.
Точнее всего выделить объект такой сложной формы, как самолет, можно, если
обвести его контур с помощью инструмента Щ - Pen Tool (P) (Инструмент
«Перо» (Р)). Чтобы сделать это как можно правильнее, увеличим резкость изо-
бражения фильтром Sharpen Edges (Резкость по краям).
>-. Выберите команду меню Filter * Sharpen • Sharpen Edges (Фильтр * Рез-
кость по краям). Фильтр будет применен, и изображение самолета станет
более четким (Рис. 2.106).

Рис. 2.106. Применен фильтр Sharpen Edges (Резкость по краям)

Теперь можно приступить к выделению.
> Нажмите кнопку ЦТ] - Pen Tool (Р) (Инструмент «Перо» (Р)) на панели инст-
рументов (Tools), чтобы выбрать этот инструмент.
Данный инструмент позволяет создавать контур произвольной формы. Конту-
ром называется любая линия или кривая, построенная в программе Adobe Photo-
shop с помощью инструмента ["У]. Для работы с контурами используется специ-
альная палитра Paths (Контуры), которая содержит список всех созданных кон-
туров. Пока эта палитра пуста (Рис. 2.107).

о о XX Я 9
Рис. 2.107. Палитра Paths (Контуры)
Несмотря на то, что контуры отображаются на экране, они не содержат пиксе-
лов, так как являются не растровыми, а векторными изображениями. В вектор-
ной графике, в отличие от растровой, изображение строится не из пикселов, а
описывается в виде математических объектов - контуров.
135
Adobe Photoshop для Web
Контур состоит из одного или нескольких сегментов. Начало и конец каждого сег-
мента определяют специальные точки привязки или узлы (Рис. 2.108). Контуры мо-
гут быть прямолинейными и криволинейными, замкнутыми и открытыми. Криво-
линейный контур имеет направляющие, с помощью которых можно настраивать
его форму. Замкнутый контур не имеет начальной и концевой точек; например, ок-
ружность - это замкнутый контур. Открытый контур имеет концевые точки; приме-
ром открытого контура является S-образная кривая.
Сегменты

Узлы

Рис. 2.108. Сегменты и узлы (точки привязки)

> Выберите команду меню Window • Paths (Окно » Контуры). На экране поя-
вится палитра Paths (Контуры) (Рис. 2.107). Пока контуры не создавались,
эта палитра пуста.
> Переместите эту палитру так, чтобы она не перекрывала изображение самолета.
Прежде чем начать рисование контура, его следует создать. В этом случае контур
сохранится автоматически.
> Нажмите кнопку I a | - Creates new path (Создать новый контур) в нижней
части палитры Paths (Контуры). В палитре появится и будет выделена
строка с миниатюрой и именем созданного контура, предлагаемым по
умолчанию - Path 1 (Контур 1) (Рис. 2.109).

I _^^—•-г^м м"11и11'^-г^^^т-п^^^ А.

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

136
 Подготовка графики с помощью программ Photoshop и ImageReady
Установите указатель мыши, который примет форму пера с крестиком &<, у
левого края нижней плоскости ближайшей к зрителю части левого крыла
изображения самолета.
Щелкните мышью в этом месте. На изображении появится точка привязки
(Рис. 2.110). Она останется выделенной - заполненной темным или светлым
цветом, в зависимости от окружающего фона, - до тех пор, пока вы не укажете
следующую точку.
Переместите указатель мыши вертикально
вверх, к левому краю верхней плоскости крыла
самолета, и щелкните в этой точке мышью.
Обе точки будут соединены отрезком прямой -
первый прямолинейный сегмент будет создан.
Чтобы провести линию вертикальную, горизон-
Рис. 2.110. Первая точка
тальную или под углом, кратным 45°, удержи-
привязки создана
вайте нажатой клавишу \\$*Щ.
Когда вы укажете вторую точку привязки, на
месте первой точки останется пустой квадратик
вместо заполненного. Это означает, что данная
точка больше не является выделенной.
> Переместите указатель мыши в следующую
крайнюю точку верхней плоскости левого кры- Рис. 2.111. Первые
ла самолета и' щелчком мыши создайте сле- три точки контура
дующую точку привязки (Рис. 2.111).
> Продолжайте, щелкая мышью, размещать последующие точки привязки,
двигаясь вокруг изображения самолета по часовой стрелке.
Чтобы точнее передать детали контура самолета, размещайте точки привязки на
каждом изгибе его границы. '
Если вы по ошибке поставите точку привязки не в том.месте, где хотелось бы, то
удалить ее можно, щелкнув на ней мышью и нажав клавишу Р»1*]. Но точки
можно и не удалять. В дальнейшем мы увидим, как легко можно изменить их
положение в процессе редактирования контура.
Расставляя описанным выше способом точки привязки и создавая, таким обра-
зом, прямолинейные сегменты, вы должны оконтурить верхнюю часть, хвост и
нижнюю хвостовую часть фюзеляжа самолета и подойти к левому колесу шасси
(правому по отношению к зрителю) (Рис. 2.112). Колесо следует нарисовать как
криволинейный контур. Криволинейные контуры создаются путем перемещения
направляющих линий, которые определяют наклон и длину кривых. Сделайте
это следующим образом:
137
Adobe Photoshop для Web

Рис. 2.112. Часть контура из прямолинейных сегментов"

> Продолжая построение контура, установите указатель мыши в крайней верх-
ней точке окружности левого колеса и щелкните мышью, чтобы создать
точку привязки.
>• Не перемещая указатель мыши, нажмите и, не отпуская левую кнопку мыши,
переместите указатель мыши вправо на расстояние, примерно равное радиусу
колеса.
> Отпустите левую кнопку мыши. В этой точке появится направляющая линия.
si1ift
Нажав клавишу If l. вы можете ограничить наклон направляющих линий углами,
кратными 45°.
> Переместите указатель мыши в нижнюю точку окружности левого колеса,
лежащую на противоположном конце диаметра.
>• Нажмите и удерживайте левую кнопку мыши.
>• Не отпуская левую кнопку мыши, переместите указатель мыши влево.
Появятся две направляющие линии, длина и наклон которых определяют
длину и наклон криволинейного сегмента.
> Перемещая указатель мыши, и, изменяя, таким образом, длину и наклон на-
правляющих, добейтесь, чтобы дуга обогнула правую, по отношению к
зрителю, часть колеса.
>• Отпустите левую кнопку мыши. Криволинейный сегмент, огибающий колесо
справа, зафиксируется (Рис. 2.113).

Рис. 2.113. Первый криволинейный сегмент

138
 I . . ' - . '
Подготовка графики с помощью программ Photoshop и ImageReady
>• Чтобы закончить построение огибающей, установите указатель мыши в верх-
ней части окружности колеса.
>• Нажмите и, не отпуская левую кнопку мыши, переместите указатель мыши
вправо. Появятся две направляющие линии. „
> Перемещая указатель мыши, и, изменяя, таким образом, длину и наклон на-
правляющих, добейтесь, чтобы дуга обогнула левую, по отношению к зрителю,
часть колеса.
>• Отпустите левую кнопку мыши. Криволинейный сегмент, огибающий колесо
слева, зафиксируется (Рис. 2.114).

Рис. 2.114. Огибающая вокруг колеса создана

Точки привязки криволинейных сегментов, имеющие направляющие, называют-
ся гладкими, в отличие от угловых точек прямолинейных сегментов, которые не
имеют направляющих. Чтобы продолжать построение прямолинейных сегментов,
следует преобразовать последнюю гладкую точку с направляющими в угловую.
IP ' t
> Нажав и удерживая клавишу I Alt I. щелкните мышью на последней точке
привязки. Эта точка будет преобразована в угловую. Ее правая направляю-
щая исчезнет.
v Продолжайте рисование контура, щелчками мыши создавая прямолинейные
сегменты, пока не дойдете до второго колеса.
>• Создайте вокруг второго колеса криволинейные огибающие, как это было
описано выше, после чего продолжайте рисовать прямолинейные сегменты,
пока не дойдете до той точки, с которой было начато рисование контура.
v Для завершения создания замкнутого контура установите указатель мыши на
первой созданной вами точке привязки. Рядом с указателем мыши появится
небольшой кружок, предупреждающий вас о том, что следующий щелчок
мыши замкнет контур.
>• Щелкните мышью в этом месте. Контур замкнется (Рис. 2.115).

139
Adobe Photoshop для Web

Рис. 2.115. Построение контура завершено

Для завершения рисования не замкнутого, а открытого контура следует щелк-
нуть мыщью на значке инструмента (JQ на панели инструментов (Tools).
Если вас не устраивает форма получившегося контура, то ее можно отредакти-
ровать. Инструменты для построения контуров, доступные в панели инструмен-
тов (Tools), позволяют легко редактировать любые контуры. Вы можете пере-
мещать точки привязки и направляющие линии, удалять и добавлять новые точ-
ки привязки, а также заменять гладкие точки привязки угловыми и наоборот.
Чтобы удалить или добавить новую точку привязки, воспользуйтесь, соответст-
венно, инструментами [1П и [&*]. Выбрать эти инструменты в панели инструмен-
тов (Tools) можно из дополнительной панели инструментов, нажав и удерживая
кнопку мыши на кнопке | & ,|. Для добавления точки привязки, выбрав инстру-
мент ЩП, установите указатель мыши на контуре в нужном месте. При этом ря-
дом с указателем мыши появится знак +. Щелкните мышью в этой точке.
Чтобы удалить точку привязки, выберите инструмент |ф~| и установите указатель
мыши в той точке привязки, которую вы хотите удалить. При этом рядом с ука-
зателем мыши появится знак -. Щелкните мышью. Точка будет удалена, а форма
кривой изменится в соответствии с оставшимися точками привязки.
Для перемещения всего контура используйте инструмент [ 1^,|. Вы можете изме-
нять форму контура, перемещая его сегменты, точки привязки и направляющие
линии инструментом |"k"|, который можно выбрать на дополнительной панели,
нажав кнопку Щ.
Изменить гладкую точку на угловую и наоборот можно с помощью инструмента
[Г~|- Для изменения гладкой точки на угловую без направляющих линий доста-
точно просто щелкнуть инструментом [Т~| на нужной точке. Если вы хотите за-
менить гладкую точку угловой с направляющими линиями, нажмите кнопку
мыши и слегка сместите указатель мыши, чтобы получить направляющие ли-
нии; после этого переместите одну из направляющих точек - концевую точку
направляющей линии. Направляющие линии станут независимыми.
После того, как редактирование контура будет закончено, можно создать из него
границу выделенной области.

140
 Подготовка графики с помощью программ Photoshop и ImageReady
> Нажмите кнопку |~о~1 - Loads path as a selection (Загрузить контур, как выде-
ленную область) в нижней части палитры Paths (Контуры). Вокруг изображения
самолета появится бегущая рамка выделения, а сам контур будет выключен и
исчезнет с экрана.
Уменьшим масштаб отображения документа до 100%.
> Щелчком мыши выберите инструмент [Щ] - Zoom Tool (Z) (Инструмент
«Масштаб» (Z)) на панели инструментов (Tools) и два раза щелкните мышью
Alt
на изображении при нажатой клавише I I. Масштаб отображения докумен-
та уменьшится.
v Выберите команду меню File * Save As (Файл > Сохранить как) и сохраните
фотографию в формате Adobe Photoshop - .psd. Это позволит в.дальнейшем,
при необходимости, редактировать контур и использовать фотографию в сле-
дующих разделах.
Теперь скопируем выделенную область в буфер обмена, чтобы затем вставить ее
в документ Ozero.psd.
> Выберите команду меню Edit » Сору (Правка » Копировать). Выделенная
область будет скопирована в буфер обмена.
>• Нажмите кнопку [30 в правом верхнем углу окна документа, чтобы вернуться
к его исходному размеру.
Файл Samolet.psd можно закрыть.
> Нажмите кнопку [х] в правом верхнем углу окна документа, чтобы закрыть его.
В рабочем окне программы снова станет активным документ Ozero.psd. Вста-
вим в него изображение из буфера обмена.
> Выберите команду меню Edit » Paste (Правка * Вставить). В центре фотографии
появится изображение самолета, вставленное из буфера обмена (Рис. 2.116).
Вставить выделенную область из другого документа можно также, переместив
ее инструментом [Ц-1 - Move Tool (V) (Инструмент «Перемещение» (V)).
Обратите внимание, что в палитре Layers (Слои) появился и стал активным но-
вый слой Layer 1 (Слой 1), на который помещено изображение самолета. Этот
слой расположен непосредственно на слое Background (Фон), который перед
этим был активным. При вставке из буфера обмена или при перемещении выде-
ленной области из другого документа вставляемое изображение всегда помеща-
ется на новый слой, и этот слой располагается над тем, который был активным.

141
Adobe Photoshop для Web

Рис. 2.116. Изображение самолета вставлено из буфера обмена

При перемещении или вклеивании области со сглаженной границей в изображе-
нии вместе с выделенной областью появляются окружающие ее посторонние
пикселы. Это приводит к образованию цветной каймы или ореола на границе
выделенной области. Такой ореол особенно хорошо может быть виден вокруг
фюзеляжа самолета. Но этот нежелательный эффект можно минимизировать.
> Выберите команду меню Layer » Matting * Defringe (Слой » Обработка краев »
Устранить кайму). На экране появится диалог Defringe (Устранить кайму)
(Рис. 2.117).

Рис. 2.117. Диалог Defringe (Устранить кайму)

Данная команда перекрашивает все «посторонние» пикселы в цвета соседних
пикселов, не содержащих примесей фонового цвета. В поле ввода Width (Ширина)
следует указать расстояние, в пределах которого программа будет осуществлять
поиск пикселов для замены цвета. В большинстве случаев для эффективной работы
команды достаточно задать значение, равное 1 или 2 пикселам. Оставим предла-
гаемое по умолчанию значение 1 без изменения.
> Нажав кнопку ОК, закройте диалог Defringe (Устранить кайму). Команда
будет применена, и ореол вокруг объекта исчезнет.

142
 Подготовка графики с помощью программ Photoshop и ImageReady
Если вклеенное изображение было создано на черном фоне, то черную кайму
вокруг его границ можно удалить командой меню Layer » Matting » Remove
Black Matte (Слой * Обработка краев * Удалить черный ореол), а если на белом
фоне, то белая кайма удаляется командой меню Layer * Matting Ф Remove White
Matte (Слой » Обработка краев * Удалить белый ореол).
Уменьшим изображение самолета в два раза, чтобы затем поместить его «в небе».
> Выберите команду меню Edit * Transform • Scale (Правка » Преобразование »
Масштаб). Вокруг изображения самолета появится прямоугольная рамка с
маркерами в углах и серединах сторон, а на панели параметров (Options Bar) -
элементы управления преобразованием объекта (Рис. 2.118).
Xi 1229,5 р« I Д Т||1ЬЬ,5р«] В W; 1100,0% ~\ § Hi | 100.0% || Л 10,0 , |° a HilCM) |» У! 10,0 |» I ф J

Рис. 2.118. Панель параметров команды Transform (Преобразование)

Эти элементы управления дают вам возможность выполнить преобразование
выделенной области или слоя на основе точных числовых значений.
> Нажмите кнопку Щ\ - Maintain aspect ratio (Сохранить пропорции) на панели
параметров (Options Bar).
> В поле ввода W (Ширина) на панели параметров (Options Bar) введите 50
процентов. Такое же значение автоматически появится в поле ввода Н (Высота),
так как включен режим сохранения пропорций.
> Нажмите кнопку |>/| на панели параметров (Options Bar), чтобы закончить
ввод параметров. Размер самолета на фотографии уменьшится в два раза.
Теперь переместим самолет туда, где он должен находиться.
> Выберите инструмент [Kji] - Move Tool (V) (Инструмент «Перемещение» (V))
на панели инструментов (Tools) и переместите изображение самолета в пра-
вый верхний угол фотографии (Рис. 2.119).
Теперь, когда редактирование и комбинирование фотографий почти закончено,
следует выполнить сведение слоев, т.е. совместить имеющиеся в изображении
слои в один основной слой Background (Фон), чтобы уменьшить таким образом
размер файла. Как правило, сведение слоев следует выполнять только тогда,
когда вы уверены в том, что компоновка изображения завершена, и вам не при-
дется редактировать содержимое отдельных слоев.
> Убедитесь, что все слои являются видимыми. Невидимые слои при сведении
будут удалены.
> Нажмите кнопку 0 в правом верхнем углу палитры Layers (Слои) и в поя-
вившемся меню выберите команду Flatten Image (Выполнить сведение).
Слои будут совмещены. В палитре Layers (Слои) останется только один слой -
Background (Фон).
143
Adobe Photoshop для Web

Рис. 2,119. Изображение самолета перемещено

> Сохраните документ, выбрав команду меню File * Save (Файл * Сохранить).
Способом, подобным описанному, вы можете комбинировать любые фотогра-
фии, создавая яркие выразительные эффекты.

Уменьшаем и обрезаем фото

При подготовке изображений для Web часто возникает необходимость обрезать их,
чтобы выделить нужные части изображения и отсечь ненужные. Кроме чисто ху-
дожественных соображений, такая обрезка или, как ее еще называют, кадрирова-
ние, необходима для уменьшения объема файла. Чем меньше изображение, тем
меньше объем его файла, и тем быстрее оно загружается на Web-страницу,
Посмотрим, как выполняется кадрирование практически, удалив узкую темную
полосу у нижнего края фотографии, которую не удалось в достаточной степени
осветлить. Кадрирование выполняется специальным инструментом |1ф| - Crop
Tool (С) (Инструмент «Рамка» (С)).
>• Нажмите кнопку [tjT| - Crop Tool (С) (Инструмент «Рамка» (С)) на панели инст-
рументов (Tools), чтобы выбрать этот инструмент..
> Установите указатель мыши, который примет форму fy, в левом верхнем углу
изображения.
>• Нажмите и удерживайте левую кнопку мыши.
> Не отпуская левую кнопку мыши, переместите указатель мыши к нижней части
правого края фотографии так, чтобы появившаяся пунктирная рамка выделе-
ния не включала узкую темную полосу у нижней границы изображения.

144
 Подготовка графики с помощью программ Photoshop и ImageReady
> Отпустите левую кнопку мыши. Рамка зафиксируется, а в ее углах и серединах
сторон появятся квадратные маркеры. Область изображения за пределами кад-
рирующей рамки будет затемнена, указывая, таким образом, отсекаемую часть
фотографии.
С помощью этих маркеров можно выполнить настройку и поворот границы кадра.
Для перемещения кадрирующей рамки достаточно установить указатель мыши
внутри выделенной области и перетащить ее в нужное место. Чтобы изменить
размер выделенной области, следует переместить один из угловых маркеров.
Если при перемещении удерживать нажатой клавишу |[s™l. то будут сохранены
пропорции области. Для поворота кадра следует установить указатель мыши,
который примет форму изогнутой стрелки, за пределами области выделения и,
перемещая мышь, добиться нужного положения рамки. Чтобы отменить кадри-
рование, достаточно нажать клавишу |[ESC|.
>• Перемещая маркеры рамки выделения, добейтесь, чтобы кадрирующая рамка
включала все изображение, кроме узкой темной полосы у нижней границы
фотографии (Рис. 2.120).

Рис. 2.120. Кадрирующая рамка указывает границы обрезки

> Дважды щелкните мышью внутри кадрирующей рамки или нажмите клавишу
[[inter]. Фотография будет обрезана по установленной границе.

Но даже после обрезки фотография достаточно велика для Web-страницы. При

разрешении экрана 800x600 пикселов (а с таким разрешением по статастике в на-
стоящее время работает большинство пользователей Web) фотография занимает
значительное место на экране. Кроме того, файл с изображением такого размера

145
Adobe Photoshop для Web
будет достаточно велик по объему и будет долго загружаться. Потому уменьшим
размер изображения, что, в свою очередь, уменьшит объем файла.
> Выберите команду меню Image • Image Size (Изображение * Размер изо-
бражения). На экране появится диалог Image Size (Размер изображения)
(Рис. 2.121).
{image Size

OK 0^
1

Width: 1 460 1 1 pixels | Reset |

Height |297 || pixels Q | Auto... |

Width: 1 16,23 ||cm H

Heiflht: |10,4S |[cm Q

Resolution: |72 1 1 pixels/inch Q

DScateStite
П Constrain Proportions
E3 Resample Image: | Bicubic Q

Puc. 2.121. Диалог Image Size (Размер изображения)

В верхней части диалога, в группе элементов управления Pixel Dimensions
(Размерность в пикселах) указан текущий размер файла в формате PSD - 400,ЗК,
а также текущие ширина (Width) и высота (Height) изображения в пикселах.
У вас эти значения после кадрирования могут быть несколько иными.
В группе элементов управления Document Size (Размер документа) указаны
размеры документа в сантиметрах и его графическое разрешение (Resolution).
При установленном флажке Constrain Proportions (Сохранить пропорции) про-
грамма автоматически сохраняет пропорции изображения при изменении одного
из размеров - ширины или высоты.
При изменении размеров изображения в группе элементов управления Pixel
Dimensions (Размерность в пикселах) соответственно изменяются его характе-
ристики для документа - либо его размеры, либо графическое разрешение, в за-
висимости от того, установлен или сброшен флажок Resample Image (Изменить
размер). Если этот флажок установлен, то изменяется размер документа и, соот-
ветственно, объем файла с изображением. Если же флажок сброшен, то можно
изменить только размеры документа. При этом, соответственно, будет изменять-
ся его графическое разрешение, а размеры изображения в пикселах и объем
файла останутся без изменения.

146
 Подготовка графики с помощью программ Photoshop и ImageReady
При уменьшении размерности или графического разрешения Adobe Photoshop
удаляет из изображения избыточную информацию, а при увеличении этих пара-
метров - формирует недостающую информацию на основе цветовых величин
существующих пикселов. В обоих случаях программа использует один из пяти
методов интерполяции, который можно выбрать в открывающемся списке
Resample Image (Изменить размер).
Поскольку фотография, размеры которой мы хотим изменить, предназначена
для показа на экране, то изменять ее графическое разрешение не следует.
>• Убедитесь, что установлен флажок Resample Image (Изменить размер), чтобы
сохранить графическое разрешение изображения и изменить его размер.
> Установите флажок Constrain Proportions (Сохранить пропорции).
> В поле ввода Width (Ширина) группы элементов управления Pixel
Dimensions (Размерность в пикселах) введите новое значение ширины изо-
бражения в пикселах - 300. Автоматически изменится значение высоты изо-
бражения в поле ввода Height (Высота), а также размер документа в группе
элементов управления Document Size (Размер документа). В верхней части
диалога вы увидите также новое, уменьшенное значение объема файла и
рядом с ним, в скобках прежний объем.
> Закройте диалог Image Size (Размер изображения), нажав кнопку ОК. Уста-
новленные параметры будут применены, и размер изображения в окне доку-
мента уменьшится.
Как уже указывалось, уменьшение размерности изображения удаляет из него
избыточную информацию, что приводит к некоторому снижению резкости.
Применение фильтра Unsharp Mask (Контурная резкость) может в известной
степени восстановить резкость изображения.
>• Выберите команду меню Filter » Sharpen • Unsharp Mask (Фильтр * Резкость *
Кон-турная резкость). На экране появится диалог Unsharp Mask (Контурная
резкость).
> Перемещая ползунковый регулятор Amount (Эффект), восстановите резкость
фотографии. Значение этого параметра должно быть в пределах 50-60%.
> Нажатием кнопки ОК закройте диалог Unsharp Mask (Контурная резкость).
Резкость изображения усилится.
>• Сохраните документ, выбрав команду меню File * Save (Файл * Сохранить).
Так как при изменении размеров изображения снижается его качество за счет
удаления избыточной информации, то, по возможности, следует избегать этой
операции. Если вы сканируете изображение, то желательно уже на этом этапе
определить его размер и выполнить сканирование с таким разрешением, которое
обеспечит наилучшее, качество изображения.
147
Adobe Photoshop для Web

Сохраняем фото Эля Web

Теперь, когда редактирование и комбинирование фотографий закончены, полу-
чившееся изображение следует оптимизировать и сохранить для Web.
> Выберите команду меню File * Save for Web (Файл » Сохранить для Web).
На экране появится диалог Save For Web (Сохранить для Web) (Рис. 2.122).

Рис. 2.122. Диалог Save For Web (Сохранить для Web)

Этот диалог совмещает в себе уже знакомые вам по Adobe ImageReady элемен-
ты: окно просмотра, позволяющее выбирать различные режимы просмотра оп-
тимизированного изображения; элементы управления оптимизацией - справа
вверху и цветовую таблицу (Color Table) - справа внизу, используемую при оп-
тимизации изображений в форматах GIF и PNG-8. Кроме того, здесь же присут-
ствует вкладка Image Size (Размер изображения), элементы управления которой
позволяют изменить размер изображения так же, как и элементы управления диало-
га Image Size (Размер изображения), рассмотренного в предыдущем разделе.
В открывающемся списке со всплывающей подсказкой Zoom Level (Уровень
масштабирования) в левом нижнем углу диалога вы можете выбрать масштаб
для отображения в окне просмотра диалога. Масштаб можно изменить также с

148
 Подготовка графики с помощью программ Photoshop и ImageReady
помощью инструмента [QT1 - Zoom Tool (Z) (Инструмент «Масштаб» (Z)), кото-
рый включается кнопкой в левом верхнем углу диалога. Включенный по умол-
чанию инструмент [У^1 - Hand Tool (H) (Инструмент «Рука» (Н)) позволяет
перемещать изображение в окне просмотра, если его размеры превышают раз-
меры окна. С помощью кнопки Q - Select Browser Menu (Меню выбора брау-
зера) в нижней части диалога •вы можете открыть меню, из которого выбрать
браузер для просмотра оптимизированного изображения. Можно также нажать
кнопку слева от 0, чтобы загрузить программу просмотра, определенную по
умолчанию, в которой автоматически откроется оптимизируемое изображение.
Специальное поле под .окном просмотра .диалога информирует о цветовых коор-
динатах пиксела изображения или цветовой таблицы (Color Table), на котором
установлен указатель мыши. Эти координаты указываются как RGB-составляющие
в десятичном формате.
Кнопка © - Preview Menu (Меню предварительного просмотра) над окном про-
смотра справа открывает меню, команды которого позволяют имитировать ото-
бражение документа в операционных системах Macintosh (Standard Macintosh
Color) и Windows (Standard Windows Color), а также увидеть, как будет выгля-
деть 8-битное изображение в браузере (Browser Dither). Кроме того, в этом ме-
ню можно выбрать скорость модема, для отображения информации о времени
загрузки (Download Rate) оптимизированного изображения.
>• Щелкните мышью на ярлыке 2-Up (2 варианта), чтобы увидеть в окне про-
смотра оригинальный и оптимизированный варианты фотографии.
> В открывающемся списке со всплывающей подсказкой Optimized file format
(Формат оптимизированного файла) в правой верхней части диалога выберите
формат JPEG.
Напомним, что фотографические изображения должны сохраняться именно в
этом формате, поддерживающем 24-битный цвет. Формат PNG-24 хотя и под-
держивает полноцветные изображения, но создает файлы значительно большего
объема и поддерживается пока не всеми браузерами.
В открывающемся списке со всплывающей подсказкой Compression quality
(Качество сжатия) или в поле ввода с ползунковым регулятором Quality (Каче-
ство) вы можете выбрать качество компрессии. Высокие (High, Very High) и
максимальные (Maximum) значения этого параметра сохраняют при сжатии
больше цветовой информации, но и создают файлы большего объема.
>• Просмотрите оптимизированное изображение при различных значениях этого
параметра и выберите наиболее оптимальное, при котором снижение качест-
ва визуально не заметно. Очевидно, таким значением будет Maximum (Мак-
симальное) или 80.

149
Adobe Photoshop для Web
> Убедитесь, что установлен флажок Optimized (Оптимизированный). Это по-
зволит получить оптимальное качество цветов и уменьшить размер форми-
руемого файла. Однако некоторые старые браузеры не поддерживают эту
особенность.
> Убедитесь, что установлен флажок Progressive (Прогрессивный).
При установке флажка Progressive (Прогрессивный) в процессе загрузки изо-
бражения оно будет появляться в браузере сразу целиком, но в грубой форме, и
затем постепенно проясняться, что даст возможность посетителю сайта понять
смысл рисунка еще до окончательной его загрузки. Установка этого флажка не
изменяет размер файла и не сокращает время загрузки, а лишь создает иллюзию
его уменьшения. Файлы, сохраненные с этим параметром, требуют больше опе-
ративной памяти для просмотра и поддерживаются не всеми браузерами.
В поле ввода или с помощью ползункового регулятора Blur (Размытие) можно
указать степень размытия изображения в пределах от 0 до 2.0 для легкого раз-
мытия границ цветовых областей. Данный параметр всегда следует использо-
вать применительно к изображениям с глубиной цвета 8 бит на пиксел. Для изо-
бражений с глубиной цвета 24 бита на пиксел потребность в Таком сглаживании
невелика. Размытие оказывается особенно полезным для изображений, имею-
щих большие участки фона однородной окраски. Если в изображении имеется
текст, то величину сглаживания нужно уменьшить, иначе текст будет трудно
прочесть. Этот параметр уменьшает размер файла, но в то же время размывает
детали изображения, действуя подобно фильтру Gaussian Blur (Размытие по
Гауссу). Рекомендуется использовать значения от 0.1 до 0.5.
Установка флажка ICC Profile (Профиль ICC) позволяет сохранить в файле про-
филь ICC, который используется некоторыми браузерами для цветовой коррек-
ции. Данный флажок доступен только для изображений, созданных в формате
Adobe Photoshop.
Если исходное изображение содержит прозрачные области, то в открывающемся
списке Matte (Подложка) можно выбрать цвет для имитации цвета фона Web-
страницы, на которую будет помещено изображение.

Если при создании рисунка на прозрачном фоне использовалось сглажи-

вание (Anti-Aliasing), то изображение будет иметь светлый ореол, ко-
торый улучшит качество на светлом фоне, но будет плохо смотреть-
ся на пестром. Чтобы избавиться от этого ореола, следует перед со-,
хранением перевести документ в режим индексированных цветов с по-
мощью команды меню Image + Mode + Indexed Color (Изображение +
Режим + Индексированные цвета).

150
 Подготовка графики с помощью программ Photoshop и ImageReady
> Закройте диалог Save For Web (Сохранить для Web), нажав кнопку ОК. На
экране появится диалог Save Optimized As (Сохранить оптимизированный
документ как), в поле ввода которого Имя файла (File name) уже указано имя
сохраняемого файла - Ozero.
> Выберите папку для сохранения оптимизированного файла.
>• Нажатием кнопки Сохранить (Save) закройте диалог Save Optimized As
(Сохранить оптимизированный документ как). Файл будет сохранен на диске
в указанной папке.
>• Закройте документ Ozero.psd, выбрав команду меню File » Close (Файл *
Закрыть). Если появится запрос о необходимости сохранения документа, от-
ветьте отрицательно.
Мы познакомились с принципами оптимизации изображений в программе Adobe
Photoshop. Как вы могли заметить, они практически не отличаются от оптими-
зации в Adobe ImageReady.

Прозрачные изображения
В одном из предыдущих разделов, в котором «оживлялась» кнопка, мы научи-
лись создавать изображение на прозрачном фоне. При этом мы рисовали кнопку
«с нуля» и могли сразу, создав новый документ, начать работать с прозрачным
фоном. Теперь рассмотрим случай, когда требуется сделать прозрачным фон
уже готового рисунка.
Формат GIF хотя и не сохраняет прозрачность, но позволяет присвоить в изо-
бражении атрибут прозрачности выделенной области; все пикселы в пределах
этой области в браузере показываться не будут, т.е. станут невидимыми. Для
примера создания изображения с прозрачным фоном воспользуемся фотографией
из файла Samolet.psd.
> Откройте файл Samolet.psd, который вы сохранили в разделе о комбиниро-
вании фотографий.
Посмотрим, как создать прозрачность для той части изображения, которая нахо-
дится за пределами самолета на переднем плане фотографии так, чтобы на Web-
странице был виден только самолет, а все, что его окружает, стало невидимым.
Сначала нужно выделить изображение самолета, преобразовав контур, который
мы нарисовали вокруг самолета, в выделение. Этот контур автоматически со-
хранен в палитре Paths (Контуры).
v Щелкните мышью на ярлыке Paths (Контуры) в третьем сверху окне палитр,
чтобы открыть эту палитру.

151
Adobe Photoshop для Web
>• Щелчком мыши на имени контура Path 1 (Контур 1) в палитре Paths
(Контуры) выделите его. В окне документа вокруг изображения самолета
появится контур.
Создадим выделенную область, ограниченную контуром.
>• Нажмите кнопку 0 в правом верхнем углу палитры Paths (Контуры) и в поя-
вившемся меню выберите команду Make selection (Создать выделенную
область). На экране появится диалог Make selection (Создать выделенную
область) (Рис. 2.123).
I Make Selection Q

- Rendering 1 UK |
Feather Radius: |o | pixels | Cancel |
0 Anti-aliased

© New Selection
О ДО to Selection
О Subtract *om Selection
О Interact wtth Setectton

Puc. 2.123. Диалог Make selection (Создать выделенную область)

В поле ввода Feather Radius (Радиус растушевки) следует указать величину ра-
диуса растушевки выделения в пикселах. Растушевка делает края выделенной
области более расплывчатыми благодаря созданию «зоны перехода» между пик-
селами выделенной области и окружающими пикселами. В этой зоне происхо-
дит постепенное смешивание цветов. В результате растушевки может произойти
потеря четкости изображения вблизи границы выделенной области.
По умолчанию для этого параметра предлагается значение 0 (ноль) пикселов.
Оставим его без изменения.
Обратите внимание, что по умолчанию установлен флажок Anti-aliased (Сгла-
живание). Сглаживание границ происходит за счет частичного наполнения цве-
том граничных пикселов и делает границы выделенных областей более плавными,
поэтому оно особенно эффективно при создании сложных изображений из от-
дельных фрагментов с использованием операций вырезания и вклеивания. При
этом не происходит какой-либо потери качества изображения, поскольку изме-
нения затрагивают только граничные пикселы выделенных областей.
> Нажав кнопку ОК, закройте диалог Make selection (Создать выделенную
область). Изображение самолета будет выделено движущейся пунктирной
границей. Автоматически будет сброшено выделение контура.

152
 Подготовка графики с помощью программ Photoshop и ImageReady
Удалим все изображение за пределами выделенной области. Для этого выделе-
ние следует предварительно инвертировать или обратить.
>• Выберите команду меню Select * Inverse (Выделение » Обратить выделение).
Теперь все изображение за пределами самолета стало выделенным, а изображе-
ние самолета - невыделенным. Удалим выделенную область.
>• Нажмите клавишу I0*"""!. Вся выделенная область будет очищена и окрашена в
белый цвет фона (Рис. 2.124) - тот цвет, на котором создавалось изображение.

Рис. 2.124. Выделенная область очищена

1
Таким образом, ту область, которая должна стать прозрачной, мы перекрасили
в белый цвет фона. Очистка нажатием клавиши |[ра|«1е] - это самый простри спо-
соб закрашивания цветом фона, который применим только к выделенной об-
ласти. Для закрашивания фоновым цветом невыделенных фрагментов изобра-
жения можно использовать инструменты \J?\ - Magic Erazer Tool (E) (Инстру-
мент «Волшебный ластик» (Е)) и [I?] - Background Erazer Tool (E) (Инстру-
мент «Фоновый ластик» (Е)).
Теперь можно создать GIF-файл так, чтобы выделенный белый фон изображе-
ния стал прозрачным.
> Выберите команду меню Help * Export Transparent Image (Справка * Экс-
портировать прозрачное изображение). На экране появится первый диалог
Export Transparent Image Wizard (Мастер экспорта прозрачных изображений)
(Рис. 2.125).
Мастером называется специальная программа, которая с помощью ряда после-
довательных диалогов позволяет выполнить некоторую задачу. В первом диало-
ге мастер предлагает указать метод создания прозрачности.
Если изображение было создано на прозрачном фоне, то при установленном по
умолчанию переключателе My image is on a transparent background (Мое изо-
бражение создано на прозрачном фоне) мастер создаст прозрачный GIF-файл
таким образом, что прозрачность фона сохранится.

153
Adobe Photoshop для Web

This wizard will help you to export an Image with transparency.

Which option best describes your Image?

© tH/ tran Ч on a transparent background
О I bave selected the area to be made transparent
О I need to select the area to be made transparent

Puc. 2.125. Первый диалог Export Transparent Image Wizard

(Мастер экспорта прозрачных изображений)
Если вы выделили ту область, которая должна стать прозрачной, то следует ус-
тановить переключатель I have selected the area to be made transparent (Я вы-
делил область, которая должна быть прозрачной). Прозрачность будет создана
из выделенной области.
Если же фон рисунка не прозрачный и перед вызовом Мастера область не была
выделена, то остается только установить флажок I need to select the area to be
made transparent (Я должен выбрать область прозрачности). В таком случае
Мастер предложит закрыть диалог и выделить нужную область.
> Установите флажок I have selected the area to be made transparent (Я выде-
лил область, которая должна быть прозрачной).
> Нажмите кнопку Next (Далее). На экране появится следующий диалог Export
Transparent Image Wizard (Мастер экспорта прозрачных изображений)
(Рис. 2.126), в котором необходимо указать мастеру, для чего предназна-
чается создаваемое прозрачное изображение: для печати (Print) или для Web-
страницы (Online).
«port rran&parent Imaqe Wizard

What will this mage be used for?

®Erlnt
О Online

Puc. 2.126. Второй диалог Export Transparent Image Wizard

(Мастер экспорта прозрачных изображений)

154
 Подготовка графики с помощью программ Photoshop и ImageReady
> Установите переключатель Online (Web-страница) и нажмите кнопку Next
(Далее). Появится третий диалог Export Transparent Image Wizard (Мастер
экспорта прозрачных изображений) (Рис. 2.127).
вп! Imaqe Wizard

Which image format would you Ike? .

В OENG

r- Description -—•""-'••-' • ——— •

GIF formit only support* 8 bit color but \t vidtly «cctpttd in brovuri.

PMC. 2.727. Третий диалог Export Transparent Image Wizard

(Мастер экспорта прозрачных изображений)
Здесь следует определить, в каком формате нужно сохранить изображение - GIF
или PNG. По умолчанию установлен переключатель GIF. Согласимся с этим
предложением. .
> Нажмите кнопку Next (Далее). Вы увидите следующий диалог Export
Transparent Image Wizard (Мастер экспорта прозрачных изображений)
(Рис. 2.128) с сообщением о том, что формат GIF поддерживает 8-битные
изображения, и поэтому на следующем шаге необходимо будет уменьшить
количество цветов в изображении с помощью диалога Indexed Color (Индек-
сированные цвета).
Export Transparent Image Wiznrti

The GIF format only supports 8 bit images. The next step will be to
reduce the number of colors in your image by using trie Indexed
Color dialog.

Puc. 2.128. Четвертый диалог Export Transparent Image Wizard

(Мастер экспорта прозрачных изображений}
> Нажмите кнопку Next (Далее). На экране появится диалог Indexed Color
(Индексированные цвета) (Рис. 2.Г29).

155
Adobe Photoshop для Web
Indexed Coloi

г Palette: | Web h"} П

i Ш «
Colors: 217 | Reset |
&reed: | None H [7| Preview
0 Transparency

№tte: | None El

Dither: | Diffusion EJ

Umount: [75 _j %
П Preserve Exact Colors

Puc. 2.129. Диалог Indexed Color (Индексированные цвета)

Изображения с индексированными цветами используют цветовые таблицы,
содержащие 256 цветов. В процессе преобразования Adobe Photoshop форми-
рует таблицу цветов, использованных в документе. RGB-цвета, не вошедшие в
таблицу, заменяются ближайшими оттенками или имитируются с помощью
различных сочетаний доступных цветов. Использование индексированной цве-
товой таблицы позволяет уменьшить объем файла при сохранении необходи-
мого качества изображения.
Для преобразования изображения вы можете выбрать из открывающегося
списка Palette (Палитра) одну из предложенных палитр, которые отличаются
способом формирования цветов. Особенности каждой из палитр описаны в
разделе «Оптимизируем и сохраняем графику». По умолчанию предлагается
палитра Web.
При выборе некоторых палитр будет доступно поле ввода Colors (Цвета),
в котором можно указать количество отображаемых цветов - от 2 до 256.
Параметр Forced (Дополнительно), который доступен не для всех палитр, по-
зволяет добавить в цветовую таблицу некоторые дополнительные цвета: чистый
белый и чистый черный (Black and White); первичные (Primaries) - красный,
зеленый синий, голубой, пурпурный, желтый, черный, белый; Web-цвета (Web);
цвета, определенные пользователем (Custom).
Установка флажка Transparency (Прозрачность) предохраняет прозрачные об-
ласти изображения в процессе преобразования. Если этот флажок сбросить, то
прозрачные области будут заполнены цветом, определенным в открывающемся
списке Matte (Подложка), или белым цветом, если для параметра Matte (Под-
ложка) выбрано None (Нет).

156
 Подготовка графики с помощью программ Photoshop и ImageReady
Для имитации цветов, не вошедших в цветовую таблицу, в открывающемся
списке Dither (Смешивание) можно выбрать один из способов смешивания.
Возможные варианты описаны в разделе «Оптимизируем и сохраняем графику».
В поле ввода Amount (Эффект) указывается числовое значение параметра Dither
(Смешивание) в процентах. Высокие значения смешивают больше цветов, но и
могут увеличить размер файла.
Установка флажка Preserve Exact Color (Сохранить точные цвета) предохраняет
цвета таблицы от смешивания.
>• Закройте диалог Indexed Color (Индекси-
JGIF Options
рованные цвета), нажав кнопку ОК. Изо-
бражение будет преобразовано в режим ин- iLlIOiTZjl
дексированных цветов с параметрами, О interlaced СапсёГ~~1
предложенными по умолчанию. Появится
диалог Save As (Сохранить как).
Рис. 2.130. Диалог GIF Options
Откройте в этом диалоге папку Web, чтобы (Параметры GIF)
сохранить в ней файл.
/
В поле ввода Имя файла (File name) вместо предлагаемого по умолчанию
имени, укажите имя сохраняемого файла - Samolet.
Нажмите кнопку Сохранить (Save). Диалог Save As (Сохранить как) закроется.
На экране появится диалог GIF Options (Параметры GIF) (Рис. 2.130).
Установите переключатель Interlaced (Чересстрочная развертка) и нажмите
кнопку ОК. Файл будет сохранен в указанной папке. На экране появится по-
следний, пятый диалог Export Transparent Image Wizard (Мастер экспорта
прозрачных изображений) (Рис. 2.131) с сообщением о том, что изображение
с прозрачным фоном создано.
Export Transparent Image Wizard

You have now completed the Export Image with Transparency

Wfeard.

Your rnage is now ready to be used online.

Puc. 2.131. Пятый диалог Export Transparent Image Wizard

(Мастер экспорта прозрачных изображений)

157
Adobe Photoshop для Web
>• Нажмите кнопку Finish (Готово), чтобы закрыть этот диалог. В рабочем окне
программы Adobe Photoshop появится окно документа Samolet.gif, в котором
прозрачный фон условно обозначен шахматной мозаикой.
Созданное таким образом прозрачное изображение перед использованием в Web
должно быть еще оптимизировано.
>• Закройте окно рисунка Samolet.gif, нажав кнопку \х\ в правом верхнем его
углу.
Посмотрим теперь, как выглядит изображение самолета на Web-странице. Вста-
вим файл Samolet.gif в. конец документа geoton.html.
> Откройте в программе Блокнот (Notepad) файл geoton.html из папки Web и
вставьте перед закрывающим тегом </body> строку со следующим кодом
HTML:
<centerximg src=Samolet .gif border=lx/center>
>• Откройте в браузере файл geoton.html.
Вы увидите, что в конце страницы на синем фоне появился рисунок с изображе-
нием самолета. Причем белый фон этого рисунка в браузере стал таким про-
зрачным, что сквозь него виден синий фон Web-страницы. Мы умышленно
включили в HTML-код атрибут border=i, чтобы видеть в браузере границы
фотографии.
Как видите, описанный способ экспорта прозрачного изображения достаточно
прост. Сложность состоит только в выборе области, которая должна стать про-
зрачной. Мы воспользовались ранее нарисованным контуром, из которого соз-
дали выделенную область, после чего инвертировали ее. Рассмотрим теперь еще
один способ выделения областей сложной формы - посредством выбора диапа-
зона цветов.
>• Не закрывая, сверните окно браузера, нажав кнопку П в правом верхнем его
углу, чтобы вернуться к программе Adobe Photoshop. Программу Блокнот
(Notepad) можно закрыть.
> Отмените выделение, выбрав команду меню Select • Deselect (Выделение •
Отменить выделение).
Начнем с выделения изображения самолета, но воспользуемся для этого не
созданным ранее контуром, а иным способом.
> Выберите команду меню Select • Color Range (Выделение * Цветовой
диапазон). На экране появится диалог Color Range (Цветовой диапазон)
(Рис. 2.132).

158
 Подготовка графики с помощью программ Photoshop и ImageReady

SeteQt: I f Sampled Colors Ц

Fuzziness: Reset |

П Invert
© Selection

Selection Preview: [None

Puc. 2.132. Диалог Color Range (Цветовой диапазон)

Этот диалог используется для выделения в пределах некоторой области или всего
изображения пикселов заданного цвета. Для выделения нужных оттенков можно
выбрать цвет из предлагаемого в открывающемся списке Select (Выделение)
диапазона цветов или сформировать выделенную область на основе «проб» цве-
та, взятых пипеткой непосредственно на изображении (Sampled Colors).
При установленном по умолчанию переключателе Selection (Выделение) вы
сможете наблюдать за формированием выделенной области. Если же установить
переключатель Image (Изображение), то в окне просмотра диалога будет ото-
бражаться все изображение. Такой режим удобен, например, при сильном уве-
личении, когда область, в которой вы хотите взять «пробу» цвета, не видна в
окне Документа.
'-,',. '
>• Чтобы взять «пробу» цвета,' установите указатель мыши, который примет
форму пипетки ^, на белом цвете фона изображения в окне документа и
щелкните мышью. «Проба» будет взята, и таким образом будет отмечена об-
ласть с белым цветом фона, которая должна быть выделена.
В окне просмотра диалога Color Range (Цветовой диапазон) черный цвет фона
изменится на белый, так как в этом диалоге область, которая должна стать выде-
ленной, отмечается белым цветом, а не выделенная - черным, и появится черно-
белое изображение самолета. В окне документа выделенная область будет соз-
дана после закрытия диалога нажатием кнопки ОК.
>• Установите флажок Invert (Обратить выделение). Теперь в окне просмотра
диалога черным цветом окрасится фон, а белым, соответствующим выделен-
ной области, - изображение самолета.
Чтобы расширить выделенную область за счет новых оттенков, нужно выбрать в
диалоге Color Range (Цветовой диапазон) инструмент [Д] и щелкнуть на нуж-
ном цвете в окне документа или в поле просмотра диалога.

159
Adobe Photoshop для Web
Чтобы исключить некоторые оттенки из выделенной области, следует выбрать в
диалоге инструмент [^£] и щелкнуть мышью на исключаемых цветах.

Для временной активизации инструмента \$\ нужно нажать клавишу ll s h i f l i. a

инструмента \$\ - клавишу I Alt I.
Вы можете изменить диапазон выделяемых цветов с помощью ползункового
регулятора Fuzziness (Разброс).
> Перемещайте ползунковый регулятор Fuzziness (Разброс) влево и наблюдай-
те в окне просмотра диалога Color Range (Цветовой диапазон), как при этом
сужается диапазон выделенных цветов и заливается белым цветом контур
самолета. Установите значение этого параметра 0 (ноль).
В открывающемся списке Selection Preview (Предварительный просмотр выде-
ления) можно выбрать один из вариантов просмотра выделенной области в окне
документа:
None (He задан) - исключает возможность просмотра;
Grayscale (Черно-белое) - выделенная область отображается черным цветом, а
невыделенная - белым;
Black Matte (Черная подложка) - выделенная область отображается в цвете на чер-
ном фоне;
White Matte (Белая подложка) - выделенная область отображается в цвете на бе-
лом фоне;
Quick Mask (Быстрая маска) - выделенная область отображается с использовани-
ем текущих установок режима «Быстрая маска». Данный режим обеспечивает
возможность одновременного просмотра маски и изображения. Подробнее об
этом мы поговорим ниже.
> Просмотрите выделенную область в окне документа в различных режимах,
выбирая их из открывающегося списка Selection Preview (Предваритель-
ный просмотр выделения).
>• Закройте диалог Color Range (Цветовой диапазон), нажав кнопку ОК.
Изображение самолета в окне документа будет выделено.
Но в пределах этого выделения вы увидите также множество мелких областей
выделения, окрашенных в белый цвет - такой же, как и цвет фона. И выделение
этих мелких областей теперь следует исключить. Удобнее, точнее и быстрее
всего это можно сделать в режиме «Быстрая маска» (Quick Mask).
Маски в программе Adobe Photoshop позволяют изолировать и защищать от
модификации отдельные фрагменты изображения в процессе общего измене-
ния цветов, применения фильтров и других эффектов. Понятие маскирования
160
 Подготовка графики с помощью программ Photoshop и ImageReady
тесно связано с выделением областей. Когда вы выделяете в изображении не-
которую область, оставшаяся часть изображения становится недоступной для
редактирования - маскируется. При необходимости можно создавать полупро-
зрачные маски, которые обеспечивают частичное применение эффектов преоб-
разований к определенным участкам изображения. Режим «Быстрая маска»
обеспечивает возможность одновременного просмотра маски и изображения и
редактирования маски.
>• Нажмите кнопку |Р| - Edit in Quick Mask Mode (Q) (Редактирование в ре-
жиме «Быстрая маска» (Q)) на панели инструментов (Tools), чтобы включить
этот режим.
Все изображение в окне документа, за исключением выделенных - незащи-
щенных от изменения - областей, будет маскировано с помощью своего рода
«пленки», по умолчанию окрашенной в красный цвет и имеющей 50-
процентную непрозрачность (Рис. 2.133). Теперь все, что окрашено красным
цветом, - это маска - защищенная от изменения область.
Sarnolel.psd @ 100% (Quick Mask/8)

Рис. 2.133. Включен режим Quick Mask (Быстрая маска)

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

161
6 - 6645
Adobe Photoshop для Web
Прежде всего, удалим в пределах незащищенной области с изображением само-
лета мелкие красные пятна, соответствующие защищенным участкам изображе-
ния, закрасив их белым цветом с помощью кисти.
>• Выбрав инструмент [^] - Zoom Tool (Z) (Инструмент «Масштаб» (Z)) на па-
нели инструментов (Tools), увеличьте масштаб отображения до 300%.
> Разверните окно документа на весь экран, нажав кнопку (В] в правом верхнем
его углу, и переместите с помощью полос прокрутки изображение в окне так,
чтобы оно не перекрывалось панелью инструментов (Tools) и палитрами.
При включении режима «Быстрая маска» на цанели инструментов (Tools) авто-
матически устанавливаются белый цвет переднего плана и черный цвет фона.
>- Щелкните мышью на значке t*. - Switch Foreground and Background Colors
(X) (Переключатель цветов переднего плана и фона) на панели инструментов
(Tools), чтобы поменять местами цвета переднего плана и фона. Теперь цве-
том переднего плана будет белый.
>• Нажмите кнопку \J\ - Paintbrush Tool (В) (Инструмент «Кисть» (В)) на па-
нели инструментов (Tools), чтобы выбрать этот инструмент.
> Откройте палитру Brush (Кисть) на панели параметров (Options Bar) и выбе-
рите жесткую кисть малого диаметра - Hard Round 3 Pixels (Жесткая круг-
лая 3 пиксела).
>• Переместите указатель мыши, который примет форму окружности, в окно
документа, на незащищенную область с изображением самолета и аккуратно,
чтобы не выйти за границы этой области, закрасьте белым цветом все крас-
ные пятна, удалив таким образом мелкие области выделения, защищенные от
изменения. Для обработки краевых участков используйте кисть меньшего
диаметра.
Заметьте, что при закрашивании белым цветом в этом режиме само изображение
самолета не изменяется, а только удаляются красные пятна, соответствующие
участкам, защищенным от изменения.
Если вы где-то допустите ошибку и выйдете за пределы контура самолета, отме-
ните последнее действие командой меню Edit » Undo (Правка » Отменить) или
воспользуйтесь палитрой History (События).
При увеличенном масштабе вокруг изображения самолета должен быть хорошо
виден белый ореол, обусловленный тем, что применялось сглаживание границы
выделения. Этот ореол, практически незаметный на белом фоне, будет хорошо
виден на другом цветном фоне. Единственный способ борьбы с таким ореолом -
выполнение сглаживания на том же фоне, на котором будет находиться изобра-
жение, и указание цвета граничных пикселов, близкого к этому фону.

; • .
162
 Подготовка графики с помощью программ Photoshop и ImageReady
Следующее, что нужно сделать - это скрыть ореол.
>• Выберите на панели инструментов (Tools) инструмент [ф~\ - Pencil Tool (В)
(Инструмент «Карандаш» (В)), аккуратно закрасьте теперь уже черным цветом
белый ореол вокруг шасси самолета, крыльев, фюзеляжа, хвоста - везде, где
этот ореол хорошо виден. Это расширит маскирующую область и скроет ореол.
Когда редактирование в режиме «Быстрая маска» будет закончено, переключи-
тесь в стандартный режим.
> Нажмите кнопку [Щ] - Edit in Standard Mode (Q) (Редактирование в стан-
дартном режиме (Q)) на панели инструментов (Tools). Программа переклю-
чится в стандартный режим.
> Просмотрите внимательно выделенную область и убедитесь, что вы правиль-
но отредактировали ее в режиме «Быстрая маска». При необходимости мож-
но снова включить этот режим и выполнить необходимую корректировку.
>> С помощью инструмента [^] - Zoom Tool (Z) (Инструмент «Масштаб» (Z))
уменьшите масштаб отображения документа до 100%.
Теперь мы должны сохранить выделенную область в альфа-канале.
Каждый документ Adobe Photoshop содержит один или несколько каналов, в
которых хранится информация о цветовых элементах изображения. Например,
изображение в цветовом формате RGB содержит три канала: красный (Red), зе-
леный (Green) и синий (Blue). Цветовые каналы создаются автоматически при
создании нового документа. Управлять каналами можно с помощью специаль-
ной палитры Channels (Каналы).
>• Щелкните мышью на ярлыке Channels (Каналы) в третьем сверху окне па-
литр. Если этот ярлык отсутствует, выберите команду меню Window *
Show Channels (Окно • Показать палитру «Каналы»). На экране появится
палитра Channels (Каналы) (Рис. 2.134).

Рис. 2.134. Палитра Channels (Каналы)

163
Adobe Photoshop для Web
Палитра Channels (Каналы) содержит список всех цветовых каналов данного
изображения. В ней отображаются миниатюры и имена трех каналов - Red
(Красный), Green (Зеленый), Blue (Синий) - в соответствии с действующим
цветовым режимом. Кроме того, в программе создается еще и совмещенный
канал - RGB, отображающий результирующее изображение, который занимает
в палитре верхнюю строку. Палитра Channels (Каналы) позволяет также
управлять отображением отдельных каналов на экране с помощью значка ф,
делая их видимыми или невидимыми.
> Просмотрите, как выглядит каждый канал, включая и выключая его отобра-
жение с помощью значка •§$.
В каждом документе вы можете создавать из выделенных областей дополни-
тельные каналы, которые называются альфа-каналами и используются для хра-
нения масок, позволяющих изолировать и защитить от модификации в процессе
редактирования отдельные фрагменты изображения. Каждое изображение мо-
жет содержать до 24-х каналов, включая все цветовые каналы. Вы можете до-
бавлять и удалять альфа-каналы, а также задавать для каждого из них имя, цвет,
режим маскирования и непрозрачность. Все новые каналы получают те же размеры
и разрешение, что и исходное изображение. Сохранив выделенную область в альфа-
канале, вы можете многократно использовать ее в любом документе.
Создадим из выделенной области альфа-канал.
> Нажмите кнопку | О) - Save selection as channel (Сохранить выделение как
канал) в нижней части палитры Channels (Каналы). В палитре появится но-
вый канал - Alpha 1 (Альфа 1) (Рис. 2.135).

Рис. 2.135. Альфа-канал создан

> Выберите команду меню Select * Deselect (Выделение * Отменить выделе-
ние), чтобы снять выделение объекта в окне документа.
Созданный альфа-канал можно просмотреть.

164
 Подготовка графики с помощью программ Photoshop и ImageReady
Щелкните мышью в палитре Channels (Каналы) на крайнем левом поле -
Indicates channel visibility (Индикация видимости канала), слева от миниа-
тюры канала Alpha 1, чтобы включить отображение альфа-канала. В окне до-
кумента изображение будет представлено так же, как и в режиме «Быстрая
маска», с помощью полупрозрачного красного цвета.
Щелкните мышью в палитре Channels (Каналы) на значке ф слева от миниа-
тюры совмещенного канала RGB, чтобы выключить его. В окне документа вы
увидите, как выглядит альфа-канал (Рис. 2.136).

Рис. 2.136. Альфа-канал

Обратите внимание, что белый участок альфа-канала создан из выделенной об-
ласти, а черный - из невыделенной. При экспорте в формат GIF89a участки изо-
бражения, соответствующие черным областям альфа-канала, станут прозрачны-
ми, а белым - останутся непрозрачными.
>• Если в пределах белой области альфа-канала еще остались мелкие черные
«пятна», закрасьте их белым цветом, предварительно щелчком мыши выде-
лив альфа-канал в палитре Channels (Каналы). После редактирования снова
сделайте активным совмещенный канал RGB.
>• Включите отображение совмещенного канала, щелкнув мышью в палитре
Channels (Каналы) в поле Indicates channel visibility (Индикация видимости
канала) слева от миниатюры канала RGB, и отключите отображение альфа-
канала, щелкнув мышью на значке ф слева от миниатюры канала Alpha 1.
В любой момент из альфа-канала можно создать выделенную область.
>• Выберите команду меню Select V Load Selection (Выделение * Загрузить
выделение). На экране появится диалог Load Selection (Загрузить выделение)
(Рис. 2.137).

165
Adobe Photoshop для Web

0 blew Selection
О fisH to Selection
О Subtract from Selection
О Intersect with Setectton

Puc. 2.137. Диалог Load Selection (Загрузить выделение)

В поле открывающегося списка Document (Документ) этого диалога указано
имя активного документа; в поле Channel (Канал) - имя альфа-канала, из кото-
рого будет создано выделение. Если установить флажок Invert (Инвертировать),
то выделенной будет защищенная область альфа-канала.
v Закройте диалог Load Selection (Загрузить выделение), нажав кнопку ОК.
Изображение самолета в окне документа вновь будет выделено.
Прежде чем повторно экспортировать изображение в формат GIF89a, проверим,
как будет выглядеть наш рисунок на Web-странице с синим цветом фона. Для
этого скопируем в буфер обмена выделенную область с изображением самолета,
создадим новый слой, зальем его синим цветом и вставим из буфера обмена вы-
деленную область.
> Выберите команду меню Edit * Сору (Правка * Копировать). Выделенная
область будет скопирована в буфер обмена.
> Щелкните мышью на ярлыке Layers (Слои), чтобы показать эту палитру.
>• Нажмите кнопку |"н~1 - Create new layer (Создать новый слой) в нижней
части палитры Layers (Слои). Новый слой - Layer 1 - будет создан и станет
активным.
> Откройте палитру Swatches (Каталог) и щелчком мыши выберите пятый
слева в верхнем ряду синий цвет для заливки слоя.
> Выберите команду меню Select » АН (Выделение » Все), чтобы выделить весь
документ.
>• Воспользовавшись инструментом [^] - Paint Bucket Tool (G) (Инструмент
«Заливка» (G)), залейте активный слой выбранным цветом.
>• Выберите команду меню Edit • Paste (Правка • Вставить). Изображение из
буфера обмена будет вставлено на новый слой Layer 2, и в окне документа вы
увидите изображение самолета на синем фоне.

166
 Подготовка графики с помощью программ Photoshop и ImageReady
Скорее всего, на синем фоне все еще хорошо видны резкие границы, особенно
в области крыльев и фюзеляжа самолета. Эти края можно растушевать инстру-
ментом Пр] - Smudge Tool (R) (Инструмент «Палец» (R)). Но сделать это нужно
на основном слое Background (Фон).
>> Удалите слои Layer 1 и Layer 2, перетащив их миниатюры на кнопку I ffi I -
Delete current layer (Удалить активный слой) в нижней части палитры
Layers (Слои). Активным станет слой Background (Фон).
>• Восстановите выделение, выбрав команду меню Select » Load Selection
(Выделе-ние» Загрузить выделение) и в появившемся диалоге Load
Selection (Загрузить выделение) нажав кнопку ОК.
>• Увеличьте масштаб отображения до 300%.
v Нажав и удерживая кнопку [^] - Blur Tool (R) (Инструмент «Размытие» (R))
на панели инструментов (Tools), выберите из появившейся дополнительной
палитры инструмент Щ - Smudge Tool (R) (Инструмент «Палец» (R)).
Этот инструмент имитирует смазывание пальцем свежей краски. Цвет, «взятый» в
начале каждого штриха, смазывается в направлении перемещения указателя мыши.
>• Откройте палитру Brush (Кисти) на панели параметров (Options Bar) и выбе-
рите кисть малого диаметра Hard Round 3 Pixels (Жесткая круглая 3 пиксела).
> Сбросьте флажок Finger Painting (Рисование пальцем) на панели параметров
(Options Bar).
> Аккуратно перемещая указатель мыши вдоль краев изображения самолета
при нажатой левой кнопке, растушуйте резкие границы. Делайте небольшие
штрихи, начиная их в местах, где дефекты границ не заметны.
> Уменьшите масштаб изображения до 100%.
Теперь для создания прозрачного GIF-файла создадим прозрачный слой с непро-
зрачным изображением самолета. Для этого достаточно вставить в существую-
щее выделение изображение самолета, скопированное ранее в буфер обмена.
В буфере обмена любой фрагмент хранится до тех пор, пока не будет заменен
другим фрагментом.
> Выберите команду меню Edit » Paste Into (Правка » Вставить в). Изображе-
ние из буфера обмена будет вставлено в выделенную область и помещено на
новый слой Layer 1. Этот слой появится в палитре Layers (Слои).
> Выключите отображение слоя Background (Фон) в палитре Layers (Слои),
щелкнув мышью на значке ф против названия этого слоя.

167
Adobe Photoshop для Web
Обратите внимание, что весь слой Layer 1, за исключением изображения само-
лета, прозрачен - он отображается, как все прозрачные области, в виде серой
шахматной мозаики.
Для сохранения прозрачного слоя Layer 1 в формате GEF воспользуемся коман-
дой меню Save for Web (Сохранить для Web). В процессе сохранения вся ин-
формация, которая не отображается в окне документа - слой Background (Фон),
будет отброшена.
> Выберите команду меню File «• Save for Web (Файл * Сохранить для Web).
На экране появится диалог Save For Web (Сохранить для Web) (Рис. 2.122).
В этом диалоге для формата JPEG прозрачный фон слоя по умолчанию отобра-
жается белым цветом.
> В открывающемся списке Optimized file format (Формат оптимизированного
файла) выберите GIF.
> В открывающемся списке Colors (Цвета) подберите оптимальное количество
цветов, при котором качество изображения заметно не изменится.
> Убедитесь, что установлен флажок Transparency (Прозрачность).
Если программа обнаруживает в изображении прозрачные области, то данный
флажок устанавливается автоматически. При этом сохраняется прозрачность
всех абсолютно прозрачных пикселов. Если же флажок сбросить, то прозрачные
пикселы будут окрашены цветом, определенным параметром Matte (Подложка).
>• Нажмите кнопку ОК, чтобы закрыть диалог Save For Web (Сохранить для Web).
>• В появившемся диалоге сохранения Save Optimized As (Сохранить оптими-
зированный документ как) откройте папку Web и нажмите кнопку Сохра-
нить (Save), чтобы сохранить файл под прежним именем - Samolet.gif.
> В появившемся диалоге Replace Files (Замена файлов) с запросом о необхо-
димости замены существующего файла с таким же именем (Рис. 2.138)
нажмите кнопку Replace (Заменить). Файл будет перезаписан.
Replace Files

Some of the specified files already exist in the target location. The files marked below will be replaced:
Ш Samolet.gif

Cancel ] | Replace |

Puc. 2.138. Диалог Replace Files (Замена файлов)

168
 Подготовка графики с помощью программ Photoshop и ImageReady
В описанной методике для создания прозрачного слоя мы использовали выделе-
ние, полученное с помощью маски, сохраненной в альфа-канале, а для создания
маски сформировали выделенную область, воспользовавшись командой Color
Range (Цветовой диапазон) с последующим редактированием в режиме «Быст-
рая маска». Конечно, создать выделенную область для маски можно было значи-
тельно проще, без использования этой команды и режима, а простым выделением
фона инструментом |'*\| - Magic Wand (W) (Инструмент «Волшебная палочка»
(W)) с последующим инвертированием выделения. Но рассмотренные приемы
дали нам возможность глубже познакомиться с возможностями программы
Adobe Photoshop и практически освоить новые инструменты.
Просмотрим полученный результат в браузере.
>• Разверните свернутое окно программы просмотра Web-страниц, щелкнув
мышью на его кнопке на Панели задач (Taskbar).
>• Обновите Web-страницу, нажав соответствующую кнопку на панели инстру-
ментов браузера.
Вы увидите, что теперь фотография самолета в браузере выглядит значительно
лучше, чем прежде. Однако до совершенства все еще далеко: границы изобра-
жения самолета достаточно резкие. И главная причина заключается в том, что
сглаживание выполнялось на фоне, отличающемся от фона Web-страницы.

Если вы хотите получить профессиональное сглаживание, следует

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

>- Не закрывая, сверните окно браузера, нажав кнопку Q в правом верхнем его
углу.
Описанные выше методики выделения и создания прозрачных областей можно и
следует применять в том случае, если вы заранее не знаете, каким будет цвет
фона Web-страницы, на которую будет помещено создаваемое прозрачное изо-
бражение. Если же этот цвет вам известен, то, повторим, именно на нем следует
выполнять сглаживание. В том случае, когда сглаживание выполнено на фоне,
отличающемся от фона Web-страницы, следует окрасить частично прозрачные
пикселы, которые всегда присутствуют на границе прозрачной области, в цвет
фона Web-страницы. Посмотрим, как это сделать практически.
> Выберите команду меню File » Save for Web (Файл » Сохранить для Web).
На экране появится диалог Save For Web (Сохранить для Web) (Рис. 2.122).

169
Adobe Photoshop для Web
В этом диалоге сохранены параметры оптимизации, применявшиеся последний раз.
При установленном флажке Transparency (Прозрачность) частично прозрачные
пикселы, которые обычно присутствуют по краям сглаженного изображения,
заполняются цветом, определенным параметром Matte (Подложка). Установим
синий цвет подложки, соответствующий цвету фона Web-страницы geoton.html.
>• Щелкните мышью на поле открывающегося списка Matte (Подложка). На эк-
ране появится диалог Color Picker (Палитра цветов).
>• В полях ввода R, G, В введите значения, соответственно, О, О, 255 и нажатием
кнопки ОК закройте диалог Color Picker (Палитра цветов). Заданный синий
цвет отобразится в поле открывающегося списка Matte (Подложка). На об-
разце в диалоге вокруг изображения самолета появится тонкая линия такого
же цвета.
> Нажмите кнопку ОК. Диалог Save For Web (Сохранить для Web) закроется.
На экране появится диалог Save Optimized As (Сохранить оптимизирован-
ный документ как).
>• Откройте папку Web и нажмите кнопку Сохранить (Save).
>• В появившемся диалоге Replace Files (Замена файлов) с запросом о замене су-
ществующего файла с именем Samolet.gif нажмите кнопку Replace (Заменить).
Файл будет перезаписан.
Посмотрим, как будет выглядеть изображение в программе просмотра Web-
страниц.
> Разверните свернутое окно браузера и обновите документ HTML.
Теперь, после того как частично прозрачные пикселы по краям сглаженной об-
ласти окрашены в цвет фона Web-страницы, изображение смотрится вполне
профессионально.
>• Закройте браузер, нажав кнопку [х] в правом верхнем его углу.
> Удалите из файла geoton.html тег, загружающий фотографию Samolet.gif.
>• Закройте документ Samolet.psd в программе Adobe Photoshop, нажав
кнопку [х] в правом верхнем углу его окна, и на предложение сохранить
файл ответьте отрицательно.
Мы подробно познакомились с приемами и особенностями создания прозрачных
изображений. Еще раз подчеркнем, что качество таких изображений зависит от
того, на каком фоне выполнялось сглаживание. В любом случае сглаживание
следует выполнять на том же фоне, что и фон Web-страницы.

170
 Подготовка графики с помощью программ Photoshop и ImageReady

£ecuio&Hbiu фон
Несомненно, что фон ваших Web-страниц в значительной мере определяет стиль
и привлекательность всего сайта. Фон в виде рисунка, узора или текстуры
оживляет Web-страницу. С помощью текстур вы можете имитировать создание
изображений на различных поверхностях, таких как мрамор, брезент или кир-
пичная кладка. Вместе с тем следует следить, чтобы фон не затруднял чтение
основного текста.
Изображение для фона можно взять в одной из многочисленных бесплатных
библиотек в WWW. Но можно изготовить рисунок и самостоятельно. Посмот-
рим, как это сделать на примере создания простой фоновой текстуры. Начнем с
создания нового документа размером ЮОх 100 пикселов с черным цветом фона и
белым цветом переднего плана.
> Щелкните мышью на значке В - Default Foreground and Background Colors (D)
(Цвета переднего плана и фона по умолчанию) на панели инструментов
(Tools) программы Adobe Photoshop, чтобы установить цвета по умолчанию.
>• Поменяйте местами цвета переднего плана и фона, щелкнув мышью на значке
*}, - Switch Foreground and Background Colors (X) (Переключатель цветов
переднего плана и фона) на панели инструментов (Tools). Цвет фона на об-
разце станет черным.
> Выберите команду меню File * New (Файл » Новый). На экране появится
диалог New (Новый).
> В полях ввода Width (Ширина) и Might (Высота) введите значения ширины и
высоты документа - 100 пикселов.
> В открывающемся списке Color mode (Цветовой режим) выберите RGB Color
(Цвет RGB).
> В открывающемся списке Background Contents (Содержимое фона) выберите
Background Color (Цвет фона).
> Нажав кнопку ОК, закройте диалог New (Новый). В рабочем окне программы
Adobe Photoshop появится окно нового документа с размерами 100х 100 пик-
селов и черным цветом фона.
С помощью фильтров Clouds (Облака) и Difference Clouds (Облака с нало-
жением) создадим мягкий узор в виде «облаков». Эти фильтры генерируют узор
с помощью случайных величин, которые изменяются в диапазоне от основного
цвета к фоновому, в нашем случае от белого к черному.

171
Adobe Photoshop для Web
>• Выберите команду меню Filter » Render • Clouds (Фильтр » Рендеринг *
Облака). Фильтр будет применен, и на изображении появится узор в виде
«облаков».
Теперь применим к изображению фильтр Difference Clouds (Облака с
наложением).
>• Выберите команду меню Filter * Render • Difference Clouds (Фильтр *
Рендеринг * Облака с наложением). Узор на изображении изменится.
Повторное многократное применение этого фильтра создает эффект «прожилок»,
который напоминает текстуру мрамора. Для повторного применения последнего
использовавшегося фильтра достаточно нажать комбинацию клавиш 1
ctrl F
> Нажмите несколько раз комбинацию клавиш II l+ll I. При каждом нажатии
этой комбинации клавиш фильтр будет применяться повторно, а изображение
в окне документа - изменяться. В результате должно получиться что-то вроде
Рис. 2.139.

Рис. 2.139. Результат применения фильтра Difference Clouds

(Облака с наложением)
Далее применим к изображению фильтр Glowing Edges (Свечение краев) из
группы фильтров Stylize (Стилизация). Все фильтры этой группы создают ярко
выраженные эффекты очерчивания за счет смещения пикселов и повышения
контрастности изображения и особенно полезны при обработке черно-белых
изображений. Фильтр Glowing Edges (Свечение краев) отыскивает границы
цветовых областей и добавляет свечение, подобное неоновому.
>• Выберите команду меню Filter * Stylize • Glowing Edges (Фильтр » Стили-
зация » Свечение краев). На экране появится диалог Glowing Edges (Свече-
ние краев) (Рис. 2.140), в котором следует определить параметры эффекта.
> Переместите ползунковый регулятор Edge Width (Ширина границ) влево так,
чтобы в поле ввода над ним появилось значение 1.
> Ползунковый регулятор Edge Brightness (Яркость границ) переместите к
правому краю так, чтобы значение этого параметра стало равно 20.

172
 Подготовка графики с помощью программ Photoshop и ImageReady

Рис. 2.140. Диалог Glowing Edges (Свечение краев)

> Для параметра Smoothness (Сглаженность) установите значение 1.
> Закройте диалог Glowing Edges (Свечение краев), нажав кнопку ОК.
После применения этого фильтра изображение будет затемнено. Поэтому вос-
пользуемся командой Brightness/Contrast (Яркость/Контраст) для увеличения
яркости и контраста.
> Выберите команду меню Image » Adjustments » Brightness/Contrast (Изобра-
жение» Коррекции » Яркость/Контраст). На экране появится диалог
Brightness/Contrast (Яркость/Контраст) (Рис. 2.141).
Brightness/Contrast

Brightness:

Contrast:

Рис. 2.141. Диалог Brightness/Contrast (Яркость/Контраст)

> Переместите ползунковый регулятор Brightness (Яркость) вправо так, чтобы
в поле ввода над ним отобразилось значение +50.
> Переместив ползунковый регулятор Contrast (Контраст) вправо, установите
значение этого параметра +30.

173
Adobe Photoshop для Web
Нажав кнопку OK, закройте диалог Brightness/Contrast (Яркость/Контраст).
Документ примет вид примерно как на Рис. 2.142.

Рис. 2.142. Изображение после применения фильтра Glowing Edges

(Свечение краев) и настройки яркости и контраста
Теперь наше изображение, состоящее пока из оттенков серого, необходимо то-
нировать или окрасить.
> Выберите команду меню Image • Adjustments • Hue/Saturation (Изображе-
ние » Коррекции * Цветовой тон/Насыщенность). На экране появится диалог
Hue/Saturation (Цветовой тон/Насыщенность) (Рис. 2.143).

Рис. 2.143. Диалог Hue/Saturation (Цветовой тон/Насыщенность)

С помощью этого диалога вы можете настраивать в изображении цветовой тон,
насыщенность и яркость отдельных цветовых компонентов.
>• Убедитесь, что установлен флажок Preview (Предварительный просмотр),
чтобы иметь возможность наблюдать в окне документа результаты изменения
параметров.
> Установите флажок Colorize (Тонирование). В диалоге изменится положение
ползунковых регуляторов, а в окне документа изображение будет тонировано -
приобретет красный оттенок.
Чтобы лучше понять закономерности настройки цветовых компонентов, следует
представить себе, что все видимые человеческим глазом цвета спектра, распола-

174
 Подготовка графики с помощью программ Photoshop и ImageReady
гаются на цветовом круге (Рис. 2.144). Каждый цвет на этом круге характеризу-
ется тремя базовыми параметрами: цветовым тоном (Hue), насыщенностью
(Saturation) и яркостью (Lightness). Такое представление соответствует уже
рассмотренной нами ранее цветовой модели HSB.
Для описания цветового тона обычно используется
название цвета: красный, оранжевый, желтый, зе-
леный и т.д. Каждый цветовой тон занимает опре-
деленное положение на цветовом круге и характе-
ризуется величиной угла от 0° до 360°.
Насыщенность - это степень чистоты цвета, кото-
рая определяется соотношением серого цвета и
данного цветового тона. Насыщенность выражает-
ся в процентах от 0% - серый - до 100% - полно-
стью насыщенный. На цветовом круге насыщен-
Рис
ность увеличивается от центра к краю. ' 2Л44~ Цвет°в™ кРУг
Яркость характеризует относительную освещенность или затемненность цвета и
измеряется в процентах в диапазоне от 0% - черный - до 100% - белый.
На цветовом круге основные цвета моделей RGB и CMYK находятся в опреде-
ленной зависимости: каждый цвет расположен против дополняющего его цвета
и находится между цветами, из которых он получен. Например, сложение зеле-
ного и красного дает желтый. Чтобы усилить какой-либо цвет, нужно ослабить
дополняющий его - расположенный напротив него на цветовом круге. Так, что-
бы изменить общее цветовое решение в пользу голубых тонов, следует снизить
содержание красного. По краю цветового круга располагаются так называемые
спектральные цвета, или цветовые тона. Эти цвета характеризуются максималь-
ной насыщенностью.
Сделаем насыщенность красного оттенка изображения в окне документа макси-
мальной.
>• Перемещайте ползунковый регулятор Saturation (Насыщенность) вправо и
наблюдайте в окне документа, как при этом повышается насыщенность крас-
ного цвета. Напомним, что на цветовом круге это соответствует движению от
центра к краю. Установите значение этого параметра -100%.
Изменим цветовой тон изображения на синий.
> Перемещайте ползунковый регулятор Hue (Цветовой тон) вправо и наблю-
дайте, как изменяется цветовой тон изображения в окне документа. Изме-
няющееся при этом числовое значение в поле ввода над ползунковым регуля-
тором отражает угол поворота на цветовом круге относительно исходного
красного цвета.
' • ' . I ' • ' • . : • ' • • • ' -

175
Adobe Photoshop для Web
>• Установите значение параметра Hue (Цветовой тон) - 210. Такое значение
отражает тот факт, что на цветовом круге синий цвет, которым тонировано
изображение, смещен относительно красного на 210°.
>• Нажав кнопку ОК, закройте диалог Hue/Saturation (Цветовой тон/Насыщен-
ность). Установленные цветовые параметры будут закреплены.
> Сохраните документ в папке Web, в файле Fon.psd в формате Adobe Photoshop.
На этом создание фоновой текстуры можно считать законченным. Но, так как
рисунок будет повторен на Web-странице много раз, между фрагментами фона
будут видны швы. В Adobe ImageReady имеется специальный фильтр - Tile
Maker (Конструктор повторений), который позволяет удалить швы, создавая
таким образом бесшовный фон.
> Нажмите кнопку - Edit in ImageReady (Shift+Ctrl+M) (Редактиро-
вать в ImageReady (Shift+Ctrl+M)) в нижней части панели инструментов
(Tools). Будет запущена программа Adobe ImageReady, и в ее рабочем окне
откроется документ Fon.psd.
> Выберите команду меню Adobe ImageReady Filter • Other • Tile Maker
(Фильтр * Другие * Конструктор повторений). На экране появится диалог
Tile Maker (Конструктор повторений) (Рис. 2.145).

© Blend Edges
Width: [10 | percent
П Resize Tile to Fill Image Reset

О Kaleidoscope Tile

Puc. 2.145. Диалог Tile Maker (Конструктор повторений)

Данный фильтр смешивает пикселы на краях изображения для создания бес-
шовного фона. При установленном переключателе Blend Edges (Размытие краев)
будет выполняться размытие краев рисунка для исключения швов между плит-
ками при повторении изображения на Web-странице.
В поле ввода Width (Ширина) следует указать ширину полосы у края изображе-
ния, в пределах которой должен происходить плавный переход. Обычно исполь-
зуются значения от 5% до 15%, максимум до 20%. Воспользуемся значением
этого параметра, предлагаемым по умолчанию, - 10 процентов.
При установленном флажке Resize Tile to Fill Image (Изменить размер плитки
для заполнения изображения), размер плиток подгоняется под размер изображения.
Если данный флажок сбросить, то плитки будут меньше размера изображения на
величину, определенную параметром Width (Ширина), и на Web-странице они
не будут вплотную прилегать друг к другу.

176
 Подготовка графики с помощью программ Photoshop и ImageReady
Установка переключателя Kaleidoscope Tile (Калейдоскоп) создаст фон в виде
калейдоскопа, в котором изображение отражается по горизонтали и вертикали,
создавая таким образом оригинальный узор.
> Установите флажок Resize Tile to Fill Image (Изменить размер плитки для
заполнения изображения).
> Закройте диалог Tile Maker (Конструктор повторений) нажатием кнопки ОК.
Установленные параметры будут применены.
Чтобы увидеть, как будет выглядеть в программе просмотра Web-страниц соз-
данный фон, следует сначала указать программе, что данное изображение должно
использоваться как фон,
> Выберите команду меню File • Output Settings • Background (Файл •
Параметры вывода * Фон). На экране появится диалог Output Settings
(Параметры вывода) (Рис. 2.146).
Output Settings

Preset: [Default Settings L OK

[Background I Caned

r View Document As •
©Image

-Background Image-
О Background
I
Prev

Next (

Eath: [ | Choose... |

Puc. 2.146. Элементы управления Background (Фон)

диалога Output Settings (Параметры вывода)
>• Установите переключатель Background (Фон), чтобы использовать активное
изображение в качестве фона Web-страницы.
> Закройте диалог Output Settings (Параметры вывода), нажав кнопку ОК.
Теперь можно просмотреть фон в браузере.

177
Adobe Photoshop для Web
>• Выберите команду меню File » Preview in (Файл * Предварительный про-
смотр в) и в появившемся подменю - программу просмотра Web-страниц.
Будет запущен выбранный браузер, и в его окне вы увидите созданный
бесшовный фон.
Для запуска браузера, установленного по умолчанию, вы можете нажать кнопку
[gji] - Preview in Default Browser (Ctrl+Alt+P) (Предварительный просмотр в
браузере по умолчанию (Ctrl+Alt+P)) на панели инструментов (Tools).
Кроме фонового рисунка в окне программы просмотра выводится информация о
формате изображения (Format), его размерах (Dimensions), размере файла (Size)
и параметрах оптимизации (Settings), а ниже - HTML-код автоматически
сгенерированного файла (Рис. 2.147).
ШИНННШ!^^
£айя Правка Вид Избранное Сервис Справка

£J) I Jp Поиск "£f Избранное ^ Me

ftapec; |g| CADocunentt and SeUing»4Va«ily\Loc»l SellingiU»mp\lmaUBReadyVTaia»>Pi»via»»3\Fon.hlm |;J В Парой* [ Link

'ormt: OIF
Dimensions: lOOwxlOOh
1Ьж4ШС
Settings: Selective, 16 Colon, IOC*/. Diffusion Dither, Tnnspuincy on. No Tnnspmncy Dither, Interkced, 0*/. Web Snap

<heml>
«body b g c o l o r " " * F F F F F F " le£CM»rgin«"0" top»at7in-"0" Mftcginwidth«"0" »arginhtight a "0" bftckgrouxid«"imBg«c/Von.
</body>

Puc. 2.147. Фоновый рисунок в браузере

> Закройте окно браузера, нажав кнопку [х] в правом верхнем его углу.
Чтобы изготовленное изображение можно было использовать как фон Web-
страницы, его необходимо оптимизировать и сохранить в Web-формате.
> Щелкните мышью на ярлыке 2-Up (2 варианта) в верхней части окна доку-
мента. Будет выполнена оптимизация с последними установленными пара-
метрами, и вы увидите оригинальное и оптимизированное изображения.

178
 Подготовка графики с помощью программ Photoshop и ImageReady
>• Подберите наилучшие, с вашей точки зрения, параметры оптимизации в фор-
мате GIF.
>• Сохраните оптимизированный документ в папке Web под именем Fon.gif,
выбрав команду меню File » Save Optimized (Файл » Сохранить оптими-
зированный документ).
>• Закройте программу Adobe ImageReady без сохранения документа Fon.psd,
нажав кнопку [х] в правом верхнем углу ее окна.
Посмотрим теперь, как будет выглядеть изготовленный фон на Web-странице
geoton.html.
>• Откройте файл geoton.html из папки Web в программе Блокнот (Notepad)
и вставьте в открывающий тег <body> атрибут background=Fon.gif.
> Откройте в браузере файл geoton.html.
Как видите, Web-страница с изготовленным фоном выглядит значительно инте-
реснее, чем с однородным. Обратите внимание также, что швы между плитками
практически незаметны.
i
>• Закройте программу просмотра Web-страниц.
>• Удалите из HTML-кода файла geoton.html вставленный атрибут back-
ground= Fon.gif.
> Закройте программу Блокнот (Notepad).
Мы познакомились со способом создания бесшовного фона на основе фоновой
текстуры, полученной с помощью фильтров Clouds (Облака) и Difference
Clouds (Облака с наложением). Применяя различные эффекты к одноцветным
или полутоновым изображениям, вы можете создавать самые разнообразные
текстуры. Ниже кратко описаны еще некоторые способы изготовления фоновых
текстур. Причем указанные параметры фильтров не являются строго
обязательными. Вы можете варьировать их в широких пределах, получая
каждый раз новый эффект.

Шероховатость
В программе Adobe Photoshop создайте новый документ размером ЮОх 100 пик-
селов с белым цветом фона и черным цветом переднего плана.
>• Залейте изображение черным цветом.
> Примените фильтр Add Noise (Добавить шум), выбрав команду меню Filter »
Noise » Add Noise (Фильтр * Шум » Добавить шум) с установленным пере-
ключателем Uniform (Равномерное), флажком Monochromatic (Сохранить
оттенки) и параметром Amount (Эффект) равным 400 (Рис. 2.148).
179
Adobe Photoshop для Web

Рис. 2.148. Применен фильтр Add Noise (Добавить шум)

> Примените фильтр Emboss (Рельеф), воспользовавшись командой меню
Filter » Stylize • Emboss (Фильтр » Стилизация * Рельеф), с параметрами:
Angle (Угол)=45, Height (Высота)=2, Amount (Эффект)=30 (Рис. 2.149).

Рис. 2.149. Применен фильтр Emboss (Рельеф)

> Тонируйте изображение, выбрав команду меню Image • Adjustments
Hue/Saturation (Изображение * Коррекции * Цветовой тон/Насыщенность).

Шлифованная плитка
Создайте новый документ размером 100х 100 пикселов и с белым цветом фона.
Примените фильтр Add Noise (Добавить шум) с установленным переключа-
телем Gaussian (По Гауссу), флажком Monochromatic (Сохранить оттенки)
и параметром Amount (Эффект) равным 125 (Рис. 2.150).

Рис. 2.150. Применен фильтр Add Noise (Добавить шум)

Примените фильтр Motion Blur (Размытие в движении), воспользовавшись
командой меню Filter * Blur • Motion Blur (Фильтр * Размытие * Размытие, в
движении), с параметрами: Angle (Угол)=-45, Distance (Расстояние)=100
(Рис. 2.151). Последний параметр должен быть не меньше размера изображения.

Рис. 2.151. Применен фильтр Motion Blur (Размытие в движении)

180
 Подготовка графики с помощью программ Photoshop и ImageReady
>• Примените фильтр Emboss (Рельеф) с параметрами: Angle (Угол)=45, Height
(Высота)=2, Amount (Эффект)=35 (Рис. 2.152). Обратите внимание, что пара-
метр Angle (Угол) должен отличаться от того же параметра фильтра Motion Blur
(Размытие в движении).

Рис. 2.152. Применен фильтр Emboss (Рельеф)

> Тонируйте изображение, воспользовавшись диалогом Hue/Saturation (Цвето-
вой тон/Насыщенность), применив следующие параметры: флажок Colorize
(Тонирование) - установлен, Hue (Цветовой тон)=180, Saturation (Насыщен-
ность)^! О, Lightness (Яркость)=+20.

Облицовочная плитка
> Создайте новый документ размером 100 х 100 пикселов и с белым цветом фона.
> Примените фильтр Add Noise (Добавить шум) с установленным переключа-
телем Uniform (Равномерное), флажком Monochromatic (Сохранить оттенки)
и параметром Amount (Эффект) равным 120 (Рис. 2.153).

Рис. 2.153. Применен фильтр Add Noise (Добавить шум)

> Примените фильтр Emboss (Рельеф) с параметрами: Angle (Угол)=45, Height
(Высота)=1, Amount (Эффект)=30 (Рис. 2.154).

Рис. 2.154. Примените фильтр Emboss (Рельеф)

> В палитре Channels (Каналы) создайте новый канал Alpha 1, нажав кнопку
I в | - Create new channel (Создать новый канал).

181
Adobe Photoshop для Web
Выделите изображение альфа-канала в окне документа командой Select * All
(Выделение » Все) и создайте рамку выделения толщиной 3 пиксела коман-
дой Select • Modify • Border (Выделение • Модификация • Граница).
Инвертируйте выделение командой Select » Inverse (Выделение » Обратить
выделение) и залейте выделенную область белым цветом. Отмените выделение.
Примените к альфа-каналу фильтр Gaussian Blur (Размытие по Гауссу), вос-
пользовавшись командой меню Filter * Blur » Gaussian Blur (Фильтр * Раз-
мытие * Размытие по Гауссу) с параметром Radius (Радиус)=2,0 пиксела,
чтобы размыть границу (Рис. 2.155).

Рис. 2.155. Рамка в альфа-канале

В палитре Layers (Слои) выделите слой Background (Фон) и создайте эффект
трехмерности с помощью фильтра Lighting Effects (Эффекты освещения),
воспользовавшись командой меню Filter • Render * Lighting Effects (Фильтр •
Рендеринг » Эффекты освещения). Установите параметры эффекта как на
Рис. 2.156. Результат будет примерно такой, как на Рис. 2.157.

_I-J —
El On
.|n>fmi>j<-
Ne
aativ« 21 Full
Б

Focur Narrow 92 Wide

^
P r'

гц„,. Matte -79 Shiny

Material- PI*5'!0 68 Metallic

EBp0?V|tr Under 0 Over

Ambi-ncf Negative 32 Positive

jlj
• Texture Channel: [Alpha 1 Ja-
El White is high
Height: Flat 50 Mountainous
E3 Preview

Puc. 2.156. Диалог Lighting Effects (Эффекты освещения)

с установленными параметрами фильтра

182
 Подготовка графики с помощью программ Photoshop и ImageReady

Рис. 2.157. Применен фильтр Lighting Effects (Эффекты освещения)

> Тонируйте изображение, воспользовавшись диалогом Hue/Saturation (Цвето-
вой тон/Насыщенность).
Для создания фоновых текстур, кроме описанных фильтров, попробуйте исполь-
зовать фильтры Colored Pencil (Волшебный карандаш), Sponge (Губка), Grain
(Зерно), Craquelure (Кракелюры), Chalk & Charcoal (Мел и уголь), Mezzotint
(Меццо-тинто), Mosaic (Мозаика), Halftone Pattern (Полутоновой узор), Note
Paper (Почтовая бумага), Pointillize (Пуантилизм), Reticulation (Ретикуляция),
Glass (Стекло), Texturlzer (Текстуризатор), Texture (Текстура), Ink Outlines
(Тушь) и Mosaic Tile (Цветная плитка). Заметим, что применение некоторых
фильтров, например, Glass (Стекло), к сплошному цвету дает очень незначи-
тельный или нулевой эффект.

Разрезаем изображения
и создаем изо£раже*шя~карты
В последнее время весьма актуальной задачей, стоящей перед Web-дизайнерами,
становится разработка интерактивной графики. Одной из разновидностей такой
графики являются изображения, разбитые на фрагменты (slices). Каждый фраг-
мент представляет собой прямоугольный участок изображения, который стано-
вится ячейкой таблицы в HTML-файле. После того, как документ разбит на части,
можно оптимизировать каждую из них, используя наиболее подходящие для нее
параметры оптимизации, что позволяет значительно уменьшить объем файла.
Кроме того, каждый фрагмент можно «оживить», применив к нему эффект
Rollover (Наведение). При просмотре в браузере, в зависимости от действий
мыши, состояние этого фрагмента будет изменяться.
Все части изображения автоматически сохраняются в отдельных GIF- или JPEG-
файлах, а при загрузке картинки в браузер отдельные ее фрагменты размещаются
в ячейках таблицы HTML-документа. Каждому фрагменту можно присвоить ссыл-
ку на другую Web-страницу и создать таким образом навигационную панель.
Посмотрим, как выполняется нарезка изображения и создаются изображения-
карты. Файл menu.html, который находится в архиве с примерами, содержит
меню из таблицы HTML. Сейчас в программе Adobe ImageReady создадим для
этого меню простую графическую навигационную панель.

183
Adobe Photoshop для Web
Убедившись, что в программе Adobe Photoshop закрыты все документы, пе-
рейдите в программу Adobe ImageReady, нажав кнопку - Edit in
ImageReady (Shift+Ctrl+M) (Редактировать в ImageReady (Shift+Ctrl+M)) на
панели инструментов (Tools).
Установите на панели инструментов программы Adobe ImageReady белый
цвет переднего плана и синий цвет фона с RGB-составляющими цвета R=0,
G=0, В=255 или в шестнадцатеричном формате - OOOOFF.
Создайте в программе Adobe ImageReady новый документ с размерами
160x400 пикселов и цветом фона -
Background Color, т.е. синим. isd @ 1002 [Uiimn .. НЭЕ
0
> Введите названия пунктов меню Как на Рис. Главная
2.158, так, чтобы каждый из них располагался страница
на отдельном слое. Чет мы
занимаемся?
>• Сохраните документ под именем menu.psd.
Теперь можно приступить к нарезке изображения.
Эта операция выполняется с помощью инстру-
мента РУ] - Slice Tool (К) (Инструмент «Фраг- Оборудование
мент» (К)). Спец. ПО

> Нажмите кнопку \^\ - Slice Tool (К) (Инстру- Наши партнеры

мент «Фрагмент» (К)) на панели инструментов Прайс-лист

(Tools), чтобы включить этот инструмент.
Фрагменты могут быть двух типов: автоматически
созданные и пользовательские. По умолчанию ка-
ждый документ содержит один автоматически соз- Рис. 2.158. Графическое
данный фрагмент, включающий все изображение и меню
занимающий одну ячейку HTML-таблицы. Когда
вы вручную создаете новый пользовательский фрагмент, программа генерирует
дополнительные автофрагменты, необходимые для того, чтобы заполнить ячейки
HTML-таблицы. Пользовательские фрагменты имеют более широкие возможно-
сти модификации параметров, чем автоматически созданные. При необходимости
вы можете преобразовать автофрагменты в пользовательские. К каждому пользо-
вательскому фрагменту можно применять индивидуальные установки опти-
мизации. Можно также связать несколько пользовательских фрагментов, чтобы
применить к ним одинаковые оптимизационные параметры. Ко всем автоматиче-
ски созданным фрагментам применяются единые установки оптимизации.
Вырежем в изображении первый пользовательский фрагмент, включающий на-
звание пункта меню Главная страница.

184
 Подготовка графики с помощью программ Photoshop и ImageReady
>• Установите указатель мыши, который примет форму /, в левом верхнем углу
окна документа.
Нажмите и удерживайте левую кнопку мыши. В левом верхнем углу фрагмента
появятся два серых значка-индикатора [оТЩ. Левый значок означает порядковый
номер фрагмента, а правый - его тип - изображение. Фрагменты нумеруются по
порядку слева направо и сверху вниз.
>• Не отпуская левую кнопку мыши, переместите указатель мыши вправо и вниз
так, чтобы надпись Главная страница находилась в середине нарисованного
прямоугольника.
> Отпустите левую кнопку мыши. Первый поль-зовательский фрагмент будет
вырезан и окружен рамкой выделения с квадратными маркерами в углах и
серединах сторон (Рис. 2.159).
ШШШН1ШШШ
} Ori8ln»l\OpHmii«d Tgjjp\4-IJp ^8

Главная
страница

О нашей
компании

Новости

Оборудование

Спец. ПО
Наши партнеры

Прайс-лист

Связь с
компанией
100% •> I -;..s.i 9 28.8 KM -"I

Рис. 2.159. Первый фрагмент создан

Созданный фрагмент будет выделен также более ярким цветом и ему будет при-
своен номер 01, который вы увидите в его левом верхнем углу. Автоматически
будет создан фрагмент с номером 02, содержащий остальную часть документа.
Этот автофрагмент будет отличаться от выделенного пользовательского фраг-
мента оттенком. В его левом верхнем углу, кроме значков-индикаторов номера
и типа, появится значок Щ, означающий, что данный автофрагмент связан с
пользовательским.

185
Adobe Photoshop для Web
Если размер вырезанной части изображения вас не устраивает, то его легко
можно изменить, переместив маркеры выделения с помощью инструмента \№\ -
Slice Select Tool (О) (Инструмент «Выбор фрагмента» (О)). Этим же инструмен-
том можно выделить фрагмент и переместить его. Для удаления выделенного
фрагмента достаточно нажать клавишу Р*1"1*! или воспользоваться командой ме-
ню Slices •Delete Slice (Фрагменты * Удалить фрагмент).

> С помощью инструмента VL\ - Slice Tool (К) (Инструмент «Фрагмент» (К))
вырежьте второй фрагмент с надписью Чем мы занимаемся?, а затем - все
остальные фрагменты с названиями пунктов меню. Всего должно получиться
9 пользовательских фрагментов (Рис. 2.160).
V j menu ры) & 100% (Qiiqin ИН Е

! Главная
страница
оз о !
: Чем мы
занимаемся?
03 а |
\ О нашей
'компании
04 га К
Новости
05 О !
Оборудование
06 а !
Спец. ПО
07 Р
Наши партнеры
ов а г
Прайс-лист
,..':{ :
оч а f

Связь с
компанией

Рис. 2.160. Фрагменты созданы

Разметку нарезанных частей можно временно скрыть, например, для того, чтобы
она не мешала выполнять другие операции редактирования документа.
>• Нажмите кнопку [Щ - Toggle Slices Visibility (Q) (Выключение/включение
отображения фрагментов (Q)) на панели инструментов (Tools). Разметка
.фрагментов будет скрыта.
>• Чтобы показать скрытую нарезку, повторно нажмите кнопку |Щ| - Toggle
Slices Visibility (Q) (Выключение/включение отображения фрагментов (Q))
на панели инструментов (Tools) или просто щелкните мышью в окне доку-
мента при выбранном инструменте \^\ или №\.

186
 Подготовка графики с помощью программ Photoshop и ImageReady
Нарезать изображение можно и другим способом - создав выделенную область
и выбрав команду меню Select • Create Selection from Slice (Выделить •
Создать выделение из фрагмента).
Для каждого полученного фрагмента документа создадим эффект Rollover
(Наведение) таким образом, чтобы при установке указателя мыши в браузере на
каждом из пунктов меню цвет фона этого фрагмента изменялся с синего на тем-
но-синий. Начнем с первого фрагмента. Предварительно его следует выделить.
> Нажмите кнопку |$У] - Slice Select Tool (О) (Инструмент «Выбор фрагмента»
(О)) на панели инструментов (Tools), чтобы выбрать инструмент.
>• Установите указатель мыши, который примет форму »jjf, в окне документа на
фрагменте с надписью Главная страница.
>• Щелкните мышью в этом месте. Фрагмент бу-
дет выделен.
>• Щелкните мышью на ярлыке Web Content
(Содержимое Web) в нижнем окне палитр, что-
бы отобразить палитру на экране.
>• Увеличьте высоту окна палитры, чтобы были
видны все фрагменты (Рис. 2.161).
В палитре Web Content (Содержимое Web) уже
создан первый кадр эффекта для состояния
Normal (Нормальное), при котором указатель
мыши находится за пределами выбранного фраг-
мента. Фрагмент menu_01 выделен. Имя фраг-
мента состоит из имени файла без расширения и
порядкового номера фрагмента.
>• Нажмите кнопку | в | - Creates rollover state
(Создать новое состояние) в нижней части
палитры Web Content (Содержимое Web),
чтобы создать кадр для следующего состояния -
Over (Над).
Теперь нам нужно определить, как будет выгля-
деть выделенный фрагмент изображения при со-
бытии Over (Над), т.е. когда указатель мыши на-
ходится над фрагментом. При этом цвет фона
должен'меняться на темно-синий. Для этого, соз- °' *' алитРа
дадим из фрагмента выделенную область, помес- Content (Содержимое Web)
тим ее на новый слой над слоем Layer 1 и зальем с "еРвьш ™дР°м эФФекта
для пе
темно-синим цветом. Рвого

187
Adobe Photoshop для Web
> Выберите команду меню Select * Create Selection from Slice (Выделить *
Создать выделение из фрагмента). Выделенная область будет создана.
> Щелчком мыши выделите в палитре Layers (Слои) слой Background (Фон).
> Нажмите кнопку I В I - Create a new layer (Создать новый слой) в нижней
части палитры Layers (Слои). Над слоем Background (Фон) появится новый
слой Layer 1.
>• Установите темно-синий цвет переднего плана, выбрав в открывающихся
списках R (Красный) и G (Зеленый) палитры Color (Цвет) значения 00, а в от-
крывающемся списке В (Синий) - значение СС.
>• С помощью команды меню Edit * Fill (Правка * Залить) заполните выбран-
ным цветом переднего плана выделенную область активного слоя Layer 1.
Таким образом, мы определили состояние Over (Над) эффекта Rollover (Наведе-
ние) для фрагмента изображения с надписью Главная страница. Создадим такой
же эффект для второго фрагмента с надписью Чем мы занимаемся?
> Выберите следующий фрагмент - menu_02, щелкнув на нем мышью в палитре
Web Content (Содержимое Web). Второй фрагмент с надписью Чем мы за-
нимаемся? будет выделен в окне документа.

Обратите внимание на то, что для состояния Normal (Нормальное)

фрагмента тепи_01 флажок видимости слоя Layer 1 должен быть
сброшен.

Фрагмент можно выбрать также щелчком мыши в окне документа при активном
инструменте [У] - Slice Select Tool (О) (Инструмент «Выбор фрагмента» (О)).
> Создайте состояние Over (Над), нажав кнопку I s | - Creates new rollover
state (Создать новое состояние) в нижней части палитры Web Content
(Содержимое Web).
>• Создайте выделенную область из фрагмента с помощью команды меню
Select • Create Selection from Slice (Выделить * Создать выделение из
фрагмента).
> Создайте новый слой - Layer 2 - в палитре Layers (Слои) и залейте выделен-
ную область темно-синим цветом.
Будет определен эффект Rollover (Наведение) для второго фрагмента. »
> Действуя описанным способом, создайте эффект Rollover (Наведение) для
остальных фрагментов изображения.

188
 Подготовка графики с помощью программ Photoshop и ImageReady
После того как изображение нарезано и для фрагментов создан эффект Rollover
(Наведение), у вас есть два варианта дальнейших действий. Можно сохранить
готовые фрагменты изображения и затем вручную в текстовом редакторе вста-
вить ссылки на них в код HTML. Но можно ввести адреса ссылок для каждого
фрагмента в программе Adobe ImageReady и сохранить вместе с нарезанными
частями изображения также и HTML-файл, который будет создан автоматически
с уже готовым меню. Назначение ссылок фрагментам изображения выполняется
с помощью палитры Slice (Фрагмент).
>• Щелкните мышью при выбранном инструменте |5У] - Slice Select Tool (О)
(Инструмент «Выбор фрагмента» (О)) в окне документа на первом фрагменте
изображения с надписью Главная страница, чтобы выделить его.
> Выберите команду меню Window * Slice (Окно * Фрагмент). На экране поя-
вится палитра Slice (Фрагмент) (Рис. 2.162).
В поле ввода Name (Имя) указано имя фрагмента,
предлагаемое по умолчанию - menu_01, состоящее | i SliceXTableX'mage M<?4 ' ®
из имени файла и порядкового номера. Под этим Type: Image ~|

именем фрагмент будет сохранен. При необходи- Name: rnenujl

„ю—.*.—!
мости имя можно изменить. URL: |~ ~ZI -d
В открывающемся списке Туре (Тип) вы можете Target; ...... . . .iil
выбрать тип фрагмента из трех вариантов: Image Alt:
(Изображение), No Image (He изображение) и Table t> Dimensions
(Таблица). По умолчанию тип всех фрагментов - t» Cell Alignment
t> Background
Image (Изображение), т.е. содержащий графические t> Status Bar Message
данные. Для фрагментов, содержащих не графику, а /Й

только сплошной цвет или текст, следует устанав- Рис. 2.162. Палитра Slice
ливать тип No Image (He изображение). При этом (Фрагмент)
вид палитры Slice (Фрагмент) изменится, и вы смо-
жете ввести нужный текст в специальном поле ввода, а в расширяемой части
Background (Фон) выбрать цвет фона для текстового фрагмента из открываю-
щегося списка Color (Цвет) (Рис. 2.163). Текст, который вы введете, в окне до-
кумента не отобразится. Его можно будет увидеть только в браузере.
Чтобы связать выбранный фрагмент изображения с другим HTML-документом,
который будет загружаться в браузер после щелчка мышью на данном фрагменте,
следует в поле открывающегося списка URL ввести адрес нужного документа.
> В поле открывающегося списка URL введите имя файла geoton.html.
Напомним, что, создавая сайт компании ГЕОТОН, мы использовали технологию
фреймов, разделив экран по вертикали на два окна: в левом отображается меню
из файла menu.html, а в правом - страницы сайта. Правому фрейму присвоено
имя frame. Чтобы определить, в какой фрейм должна загружаться Web-
страница, следует указать его имя в поле открывающегося списка Target (Цель).
189
Adobe Photoshop для Web
> В поле открывающегося списка Target (Цель) введите имя правого фрейма -
frame.
В поле ввода Alt (Альтернативный) вы можете указать значение атрибута alt
тега <img>. Введенный текст будет отображаться вместо графического фраг-
мента в текстовых браузерах, а также, если функция загрузки графики вы-
ключена, в некоторых браузерах в процессе за-
грузки изображения и как всплывающая подсказка.
11 Slice XTtbbXImagt Мар^у

>• В поле ввода Alt (Альтернативный) введите Typti [b -J

Главная. Name: j menuJH

URLl |gtoton.Nrnl
> Нажмите кнопку © в правом верхнем углу па-
Target: ||«m«__
литры Slice (Фрагмент) и в появившемся меню
выберите команду Show Options (Показать
•V Dimensions
параметры). Палитра развернется, и вы уви-
Xl
дите дополнительные элементы управления
(Рис. 2.163).
Hi
С помощью элементов управления Dimensions Г" Constrain Proportions
(Размеры) можно указать точные координаты X и ^- Oil Alionm.nt
Y левого верхнего угла фрагмента, а также изме- Horln
нить его ширину (W) и высоту (Н). Чтобы сохра- V«rti iDtfauk »i
нить пропорции фрагмента при изменении одно- <? Background
то из параметров - ширины или высоты, следует Color: I None i •
установить флажок Constrain Proportions (Со- "Ы Status Bar Message
хранить пропорции).
В поле ввода Status Bar Message (Сообщение в
строке состояния) можно ввести текст; который бу- Puc. 2.163. Развернутая
дет отображаться в строке состояния (Status Bar) палитра Slice (Фрагмент)
браузера при установке указателя мыши на данном
фрагменте. Если это поле ввода оставить пустым, то по умолчанию, в строке
состояния браузера отображается адрес URL связанного с фрагментом документа.
Подобным же образом определим ссылку для второго фрагмента изображения с
надписью Чем мы занимаемся?
v Щелкните мышью в окне документа на фрагменте 02 с текстом Чем мы за-
нимаемся?, чтобы выделить его. В палитре Slice (Фрагмент) отобразятся
параметры этого фрагмента.
v В поле открывающегося списка URL введите имя файла - spisok.html, на
который фрагмент должен ссылаться.
> В поле открывающегося списка Target (Цель) введите имя правого фрейма -
frame, в который должен загружаться файл spisok.html.

190
 Подготовка графики с помощью программ Photoshop и ImageReady
>• В поле ввода Alt (Альтернативный) введите текст: Чем мы занимаемся?
Повторяя описанные шаги, можно создать ссылки для каждого фрагмента изо-
бражения.
После того как ссылки назначены, остается только оптимизировать фрагменты
изображения и сохранить их. Для оптимизации следует поочередно выбирать
каждый фрагмент и устанавливать наиболее подходящие для него параметры.
Но, так как все части нашего документа имеют практически одинаковое графи-
ческое содержимое, их можно связать и применить единые оптимизационные
параметры.

> Нажмите и, удерживая нажатой клавишу l s h i t t l. щелкайте мышью поочередно

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

> Отпустите клавишу II Shitt

Для выделения всех фрагментов вы можете также воспользоваться командой
меню Select» All Slices (Выделение » Все фрагменты).
> Выберите команду меню Slices • Link Slices for Optimization (Фрагменты •
Связать фрагменты для оптимизации). Все части изображения будут связаны
и в левом верхнем углу каждой из них появится дополнительный значок-
индикатор Ц], указывающий на связь. Все значки-индикаторы окрасятся в
красный цвет. Это помогает идентифицировать все связанные фрагменты.
Теперь можно выполнить оптимизацию всех фрагментов одновременно.
х Щелкните мышью на ярлыке 2-Up (2 варианта) в верхней части окна доку-
мента. Будет выполнена оптимизация документа с параметрами, применяв-
шимися при последней оптимизации.
> В палитре Optimize (Оптимизация) выберите формат GIF.
> В открывающемся списке Colors (Цвета) выберите 16.
Перед сохранением документа желательно еще определить цвет фона Web-
страницы, которая будет создана автоматически и на которую будет помещена
таблица с нарезанными частями изображения. Если цвет фона не определить, то
по умолчанию будет использован белый цйет.
>• Выберите команду меню File • Output Settings • Background (Файл •
Параметры вывода • Фон). На экране появится диалог Output Settings
(Параметры вывода) (Рис. 2.146).
>• Установите переключатель Image (Изображение).
х В открывающемся списке BG Color (Цвет фона) выберите Foreground Color
(Цвет переднего плана). В поле этого списка отобразится синий цвет перед-
него плана.
191
Adobe Photoshop для Web
> Нажатием кнопки OK закройте диалог Output Settings (Параметры вывода).
Теперь для фона HTML-файла, который будет создан автоматически, будет
использован синий цвет.
>• Прежде чем сохранить оптимизируемый документ, переименуйте или пере-
местите из папки Web файл menu.html. Если это не сделать, то автоматиче-
ски созданный при сохранении оптимизированных фрагментов HTML-файл с
таким же именем будет записан поверх существующего файла.
Сохраним оптимизированные фрагменты изображения.
>• Выберите команду меню File * Save Optimized (Файл * Сохранить оптими-
зированный документ). На экране появится диалог Save Optimized (Сохране-
ние оптимизированного документа) (Рис. 2.92).
>• Откройте папку Web.
В процессе сохранения будет автоматически создан HTML-документ, имя кото-
рого - menu - предлагается по умолчанию в поле ввода Имя файла (File name).
Одновременно с файлом HTML будут сохранены также нарезанные фрагменты, так
как в открывающемся списке Тип файла (List files of type) автоматически выбра-
но HTML and Images (*.html) (HTML и изображения (*.html)). В том случае,
если вам нужны только нарезанные фрагменты, чтобы вставить их в сущест-
вующий файл HTML вручную, следует в этом открывающемся списке выбрать
Images Only (*.gif) (Только изображения (*.gif)).
В открывающемся списке Slices (Фрагменты) у нижнего края диалога по умол-
чанию установлено All Slices (Все фрагменты). При этом будут сохранены все
нарезанные фрагменты. Если же в данном списке выбрать Selected Slices (Вы-
бранные фрагменты), то будут сохранены только выделенные в данный момент
фрагменты изображения.
>• Чтобы настроить параметры создаваемых файлов, выберите значение Other
(Другие) из открывающегося списка Settings (Параметры). На экране поя-
вится диалог Output Settings (Параметры вывода) (Рис. 2.164).
Во втором сверху открывающемся списке без названия можно выбрать один из
наборов элементов управления: HTML - для форматирования файлов HTML;
Saving Files (Сохранение файлов) - для сохранения файлов изображений; Slices
(Фрагменты) - для определения имен фрагментов, Image Maps (Карты навига-
ции), Background (Фон) - для установки параметров фона, Saving Files (Сохра-
нение файлов) и Metadata (Метаданные) - для сохранения метаданных. При вы-
боре каждого набора вид диалога будет изменяться, отображая соответствую-
щие элементы управления. По умолчанию в диалоге отображается набор эле-
ментов для форматирования HTML-файлов.

192
 Подготовка графики с помощью программ Photoshop и ImageReady
, Output Sellings

Preset: [Custom OK

[HTML Cancel

П Output XHTML
Brev
Formatting
I Next
Tags Case: [Lowercase (body)

Attribute Case: [lowercase (rowspan) I Load...

Indent: [Tabs I Save...

Line Endings: [Automatic

Encoding: [Automatic (windows-1251)

Coding ————————————

13 Include Comments
0 Always Add Alt Attribute
El Always Quote Attributes
П Close All Tags
0 Include Zero Margins on Body Tag

Puc. 2.164. Диалог Output Settings (Параметры вывода)

с набором элементов управления HTML
В открывающихся списках Tags Case (Регистр тегов) и Attribute Case
(Регистр атрибутов) можно выбрать регистр символов для кода HTML: все
прописные, все строчные, начальные прописные. Это помогает при копиро-
вании фрагментов кода в другие документы отличать автоматически создан-
ный код от написанного вручную.
Открывающийся список Indent (Отступы) позволяет определить способ созда-
ния отступов в строках HTML-кода: используя установки табуляции программы
(Tabs), с помощью определенного количества пробелов (Spaces) или же, не
используя отступы (None).
В открывающемся списке Line Endings (Концы строк) выбирается платформа
для настройки совместимости концов строк: Windows (Win), Macintosh (Mac), Unix.
Установка флажка Include Comments (Включить комментарии) позволяет доба-
вить поясняющие комментарии в HTML-код.
При установленном флажке Always Quote Attributes (Использовать кавычки для
атрибутов) значения атрибутов всех тегов будут заключаться в кавычки.
Нарезанные фрагменты можно поместить в таблицу HTML или разместить их
в документе, используя язык каскадных таблиц стилей. Если во втором сверху
открывающемся списке без названия выбрать набор элементов управления
Slices (Фрагменты) (Рис. 2.165) и установить переключатель Generate CSS
(Генерировать CSS), то будут создаваться каскадные таблицы стилей. При этом

193
7 - 6645
Adobe Photoshop для Web
в открывающемся списке Referenced (Ссылка) следует выбрать тип ссылки в
коде HTML, определяющей положение фрагмента.

Preset: [custom щ| 1 OK

MCOl LU

| Erev
0 Generate Table
[ jsgxt
Empty Cete: |GIF, IMG W&H И
TD W&H: |Auto И | Load...

Spacer Cels: [Auto (Bottom) [»] | gave...

О Generate CSS
Referenced JBy Ю [j]

3 + [underscore jj + | layer name or slic p| +

|none [«] + [none Щ+|попе |»|
Example: MyFle.Ol

Рис. 2.165. Диалог Output Settings (Параметры вывода)

с набором элементов управления Slices (Фрагменты)
Для использования таблиц HTML следует установить флажок Generate Table
(Генерировать таблицу) и в открывающемся списке TD W&H указать, включать ли
в код HTML атрибуты ширины и высоты ячеек таблиц: Always (Всегда), Never
(Никогда), Auto (Автоматически). С помощью открывающегося списка Empty
Cells (Пустые ячейки) можно определить, как заполняются пустые ячейки.
Для набора элементов управления навигационных карт (Image Maps) (Рис. 2.166)
можно выбрать тип карты, а с помощью переключателей Placement (Положе-
ние) - определить в каком месте HTML-кода должен быть помещен тег <тар>.
Подробнее о картах навигации будет рассказано в следующем разделе.
>• Для настройки параметров файлов сохраняемых изображений во втором
сверху открывающемся списке без названия выберите Saving Files (Сохране-
ние файлов). В диалоге отобразятся соответствующие элементы управления
(Рис. 2.167).
При установленном флажке Put Images in Folder (Поместить изображения в
папку) все фрагменты будут сохранены в папке, имя которой указано в поле ввода
справа, по умолчанию - images. Вы можете указать другую папку или же сбро-
сить флажок, чтобы сохранять изображения в той же папке, что и HTML-файл.

194
 Подготовка графики с помощью программ Photoshop и ImageReady

Preset: [Custom |*]|

i авнъ i
1 &ev |
Э Client-Side
О NCSA Server-Side 1 Mext 1

О CERN Server-Side
I Load... |
О Client-Side and NCSA Server-Side
О dent-Side and CERN Server-Side 1 Save... |

„, _^

О Top О Body 0 Bottom

Puc, 2.166. Диалог Output Settings (Параметры вывода) с набором

элементов управления Image Maps (Навигационные карты)

Output Settings

Preset: |custom [3

л i (
^ 1 &ev 1
0 Put Images in Folder: j triages I
| №
xt |
О Use Long Filename Extensions (Jpeg, .wbmp)
0 Copy Background Image when Saving | ipad... |

| gave... |

| slice name |J + | hyphen |jj + | trigger name Щ+

| underscore £j + [rolover state »J+[none P1 +

|none [»J + |none [»J-f|.ext (Vj

Example: MyStee-MyTrlgger_over.gif
^ ^ ,,.ь

0 Wlxtows , 0 Mac OS 9 0 Unix

Puc. 2.167. Диалог Output Settings (Параметры вывода)

с элементами управления Saving Files (Сохранение файлов)

195
Adobe Photoshop для Web
Установленный флажок Copy Background Image when Saving (Скопировать
фоновое изображение при сохранении) дает указание программе в процессе
сохранения скопировать также фоновое изображение, определенное в наборе
установок Background (Фон).
Открывающиеся списки File Naming (Именование файлов) позволяют выбрать
элементы, комбинация которых составит имена по умолчанию для всех файлов.
Эти элементы включают: имя документа (doc. name), имя фрагмента (slice name),
состояние эффекта Rollover (rollover state), дату создания файла в различных
форматах (date), номер фрагмента (trigger no.), расширение имени файла (.ext),
знаки пунктуации - дефис (hyphen), символ подчеркивания (underscore),
пробел (space) и др. Пример составленного имени (Example) приведен под
открывающимися списками.
Установка флажков Filename Compability (Совместимость имен файлов) делает
имена файлов совместимыми с операционными системами Windows, Macintosh
(Mac OS) и UNIX.
> Закройте диалог Output Settings (Параметры вывода), нажав кнопку ОК.
Программа возвратит вас к диалогу Save Optimized (Сохранение оптимизиро-
ванного документа).
> Закройте и этот диалог нажатием кнопки Сохранить (Save). Файлы будут
сохранены в указанных папках с установленными параметрами.
V Закройте документ menu.psd без сохранения, нажав кнопку [х] в правом
верхнем углу его окна.
',. ' ' •; . • . .' •" ; •"- -." ' N ..•'."•• • .:ЛИ'.*
Проверим созданное меню. ,.
> Откройте в программе просмотра Web-страниц файл index.html из папки Web.
Вы увидите, что в правом фрейме загружен файл geoton.html, а в левом - вме-
сто прежнего меню-таблицы загружена созданная нами графическая навигаци-
онная панель.
> Устанавливайте указатель мыши на разных пунктах меню. При этом будет
изменяться цвет фона соответствующей надписи.
>• Щелкните мышью на пункте меню Чем мы занимаемся? В правый фрейм
будет загружен файл spisok.html.
> Щелкните мышью на пункте меню Главная страница. В правый фрейм бу-
дет загружен файл geoton.html.
В автоматически созданном программой файле menu.html таблица с фрагментами
изображения находится между комментариями <!-- ImageReady Preload
Script (menu.psd) - - > и < ! - - End ImageReady Slices —>. При необхо-
димости этот фрагмент кода можно скопировать в буфер обмена и затем вставить
в любой HTML-документ. Меню будет работать.
196
 Подготовка графики с помощью программ Photoshop и ImageReady

При копировании фрагмента HTML-кода с меню в другой файл необхо-

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

В этом разделе мы создали навигационную панель, разрезав изображение на

фрагменты, применив к ним эффект Rollover (Наведение) и поместив фраг-
менты в ячейки автоматически созданной HTML-таблицы. Но создать карту
навигации можно и другим способом.
•••••'" ' • - . - • ' '..".-." " • '.
Создаем карту навигации
Кроме рассмотренных в предыдущем разделе, применяются карты навигации
иного типа, так называемые Image Map, - изображения, не разрезанные на части,
но отдельные элементы которых содержат ссылки на другие Web-страницы.
Подобные навигационные карты (Image Map) для больших изображений в на-
стоящее время применяются реже, чем фрагментированные, так как время за-
грузки таких изображений достаточно велико. Предпочтительнее использовать
для ссылок фрагментированные изображения. Вместе с тем, навигационные кар-
ты (Image Map) удобно использовать для организации ссылок с фрагментов изо-
бражения сложной формы. Например, так можно делать ссылки с изображений
отдельных деталей машин или узлов механизмов. Если требуется назначить
ссылки с участков изображения не прямоугольной, а круглой или неправильной
формы, то следует отдать предпочтение навигационной карте (Image Map).
Adobe ImageReady предлагает два способа создания навигационных карт: с по-
мощью специальных инструментов, в частности, |Щ] - Rectangle Image Map
Tool (P) (Инструмент «Прямоугольная область карты навигации» (Р)), или же из
слоев изображения. Используя инструменты, вы просто рисуете, так же, как и
инструментами выделения, область определенной формы: прямоугольной, круг-
лой или многоугольной, а затем назначаете этой области адрес URL.
Технология создания навигационных карт из слоев состоит в том, что адреса
URL назначаются не отдельным фрагментам, как для фрагментированного изо-
бражения, а отдельным слоям. Отдельным слоем можно сделать любой элемент
изображения: надпись, деталь механизма, фигуру человека и т.д., после чего
сопоставить каждому слою определенный адрес URL.
> Создадим практически навигационную карту из слоев, воспользовавшись для
этого фотографией Samolet.psd, который вы сохранили в разделе о комбини-
ровании фотографий.
> Откройте файл Samolet.psd в программе Adobe Photoshop.

197
Adobe Photoshop для Web
Сделаем так, чтобы щелчок мышью на изображении самолета на переднем
плане загружал в окно браузера файл geoton.html, а щелчок мышью в любом
другом месте изображения загружал файл spisok.html. Для этого предвари-
тельно следует скопировать фигуру самолета на один слой, а остальную часть
изображения - на другой. Чтобы сделать это, создадим выделенную область из
контура вокруг самолета, который сохранен в документе.
>• Щелчком мыши на ярлыке Paths (Контуры) откройте эту палитру.
> Щелкните мышью на контуре Path 1 в палитре Paths (Контуры), чтобы вы-
делить его. На изображении вокруг самолета появится контур.
>• Нажмите кнопку ПЛ - Loads path as a selection (Загрузить контур, как вы-
деленную область) в нижней части палитры Paths (Контуры). Будет создана
выделенная область.
Скопируем выделенную область в буфер обмена и затем вставим содержимое
буфера обмена в эту же область на новый слой.
> Щелкните мышью на ярлыке Layers (Слои), чтобы отобразить эту палитру.
у Выберите команду меню Edit * Сору (Правка » Копировать). Выделенный
фрагмент будет скопирован в буфер обмена.
>• Выберите команду меню Edit » Past Into (Правка * Вставить в). Изображение
из буфера обмена будет вставлено в выделенную область и помещено на но-
вый слой. Этот слой - Layer 1 - появится в палитре Layers (Слои). Выделе-
ние будет отменено.
Напомним, что созданный таким образом слой Layer 1 почти полностью прозра-
чен, за исключением изображения самолета. Чтобы убедиться в этом, выключи-
те, а затем снова включите отображение слоя Background (Фон).
Для карты навигации нам нужен еще один слой, такой же, как и слой Background
(Фон) т.е. его копия. Создадим этот слой следующим образом:
>• В палитре Layers (Слои) щелчком мыши выделите слой Background (Фон).
>• Нажмите кнопку 0 в правом верхнем углу палитры Layers (Слои) и в поя-
вившемся меню выберите команду Duplicate Layer (Дублировать слой).
На экране появится диалог Duplicate Layer (Дублировать слой) (Рис. 2.168), в
поле ввода которого As (Как) предлагается имя для слоя - Background copy
(Копия Background).
>• Нажав кнопку ОК, закройте диалог Duplicate Layer (Дублировать слой). В па-
литре Layers (Слои) над слоем Background (Фон) появится новый слой -
Background copy (Копия Background).

198
 Подготовка графики с помощью программ Photoshop и ImageReady
^К?Ю1
Duplicate: Background
I o* '
As: I Background copy D I Cancel |
г Destination
Document: [ Samotet.psd

Рис. 2.168. Диалог Duplicate Layer (Дублировать слой)

Теперь, когда необходимые слои имеются, можно переключиться в программу
Adobe ImageReady и создать карту навигации. В общем случае все операции
подготовки слоев для карты навигации можно выполнять и в Adobe ImageReady.
Но, к сожалению, в этой программе отсутствуют средства для работы с конту-
рами. Поэтому для создания выделенной области из контура мы вынуждены
воспользоваться программой Adobe Photoshop. .
>• Нажмите кнопку - Edit in ImageReady (Shift+Ctrl+M) (Редактиро-
вать в ImageReady (Shift+Ctrl+M)) в нижней части панели инструментов
(Tools). На экране появится рабочее окно Adobe ImageReady, и в нем от-
кроется документ Samolet.psd.
Теперь необходимо назначить каждому слою ссылку на Web-страницу. Эта опе-
рация выполняется с помощью палитры Image Map (Карта навигации).
>• Щелкните мышью на ярлыке Image Map (Карта навигации) в окне палитр в
левом нижнем углу рабочей области. Палитра Image Map (Карта навигации)
появится на экране (Рис. 2.169).
Создадим сначала ссылку на Web-страницу для слоя Layer 1.
>• В палитре Layers (Слои) щелкните мышью на слое Layer 1, чтобы выделить его.

NMMI

ы
у Dimension!
~Л

Рис. 2.169. Палитра Image Map (Карта навигации)

> Выберите команду меню Layer • New Layer Based Image Map Area (Слой •
Новая область карты навигации из слоя). Элементы управления палитры
Image Map (Карта навигации) станут активными, и в нижней части палитры,

199
Adobe Photoshop для Web
в ее расширяемой части, Layer Based Settings (Параметры слоя), появится
открывающийся список Shape (Форма) (Рис. 2.170).
В открывающемся списке Shape (Форма) следует выбрать форму участка изо-
бражения, которому будет назначена URL-ссылка. В отличие от нарезанных
фрагментов, форма которых может быть только прямоугольной, карты навигации,
кроме прямоугольной (Rectangle), могут иметь также участки круглой (Circle) и
многоугольной.(Polygon) формы. Причем форма и размер этих участков, реаги-
рующих на щелчок мыши и называемых «горячими
зонами» (hotspots), автоматически подбирается так,
чтобы они в максимальной степени соответствова-
Nan»: | ImageMipJ)!
ли непрозрачной части слоя. При выборе много-
угольной (Polygon) формы Adobe ImageReady соз- URL: | и
дает контур в виде многоугольника вокруг непро- Target: | и
зрачной области. Если же вы выберете прямо- Alt: | i
угольную (Rectangle) или круглую (Circle) форму, •^ Layer Based Sellings
то создается фигура минимально возможных раз- Shape; | Rectangle^
меров, окружающая непрозрачный участок слоя, в
которую включаются также прозрачные области. //,
Когда, работая в программе просмотра Web-страниц,
вы щелчком мыши выбираете «горячую зону» на- Рис. 2.170. Развернутая
вигационной карты, форма выбранного участка палитра Image Map
отображается на рисунке в виде прямоугольника, (Карта навигации)
круга или многоугольника. Предлагаемая по умол-
чанию прямоугольная (Rectangle) форма отобра-
жается в окне документа в виде прямоугольной
рамки, ограничивающей изображение самолета.
URL: [_
Для выбранного прозрачного слоя Layer 1 с непро- Tirg.li £
зрачным изображением самолета лучше всего по-
"' С
дойдет форма области ссылки в виде многоуголь-
"W Layer Based Sellings
ника, который оконтурит фигуру самолета. Shape: I Polygon

>• В открывающемся списке Shape (Форма) выбе- Quality:

рите Polygon (Многоугольник). Под этим спи-
ском появится поле ввода с ползунковым регу-
Puc. 2.171. Для области
лятором Quality (Качество) (Рис. 2.171). В окне
ссылки выбрана форма
документа форма области, окружающей изобра-
Polygon (Многоугольник)
жение самолета, станет многоугольной.
Параметр Quality (Качество) позволяет указать степень отклонения формы мно-
гоугольника от формы непрозрачной части слоя.
v Нажмите кнопку И у правого края поля ввода Quality (Качество) и с помо-
щью появившегося ползункового регулятора установите значение этого па-

200
 Подготовка графики с помощью программ Photoshop и ImageReady
раметра 100, указав таким образом, что форма многоугольника должна точно
соответствовать форме непрозрачного участка слоя, т.е. форме самолета.
Щелкните мышью на поле ввода Quality (Качество), чтобы закончить ввод
параметра и скрыть ползунковый регулятор.
Теперь форма области в окне документа точно повторяет контур самолета.
Изображению на выбранном слое должна быть сопоставлена ссылка на Web-
страницу, адрес которой следует ввести в поле открывающегося списка URL.
v В поле открывающегося списка URL введите имя файла geoton.html.
Открывающийся список Target (Цель) предназначен для указания имени фрейма,
в который будет загружаться документ, адрес которого указан параметром URL.
В поле ввода Alt (Альтернативный) можно указать альтернативный текст, который
будет отображаться в текстовых браузерах и как всплывающая подсказка при
установке указателя мыши на области карты навигации, которой сопоставлен URL.
> В поле ввода Alt (Альтернативный) введите текст: Главная страница.
>• Теперь установим параметры для следующего слоя - Background copy.
>• Щелкните мышью на слое Background copy в палитре Layers (Слои), чтобы
выделить его.
> Выберите команду меню Layer » New Layer Based Image Map Area (Слой »
Новая область карты навигации из слоя). В палитре Image Map (Карта нави-
гации) отобразятся элементы управления для ноббЙ области карты навигации.
Для выбранного слоя лучше всего подойдет прямоугольная форма области
ссылки, т.е. вся область документа за пределами изображения самолета.
>• Убедитесь, что в открывающемся списке Shape (Форма) палитры Image Map
(Карта навигации) выбрано Rectangle (Прямоугольник).
> В поле ввода URL палитры Image Map (Карта навигации) введите имя файла
spisok.html. Это имя появится в палитре Layers (Слои) под названием слоя
Background copy.
> В поле ввода Alt (Альтернативный) введите текст: Чем мы занимаемся?
Так как область карты навигации для слоя Background copy создана после
области для слоя Layer 1, имеет большие размеры и перекрывает последнюю, то
ее - область карты навигации для слоя Background copy - нужно переместить
на задний план.
> В палитре Web Content (Содержимое Web) перетащите мышью слой с одним
самолетом на самый верх. Его имя изменится на lmageMap_02.
Подготовленную таким образом карту навигации следует оптимизировать.

201
Adobe Photoshop для Web
> Если палитра Optimize (Оптимизация) отсутствует на экране, выберите
команду меню Window • Optimize (Окно • Оптимизация).
>• В открывающемся списке Settings (Установки) палитры Optimize (Оптими-
зация) выберите набор параметров JPEG (JPEG). Параметры, соответствую-
щие этому набору, отобразятся в палитре.
>• В открывающемся списке Quality (Качество) выберите High (Высокое).
> Щелкните мышью на ярлыке 2-Up (2 варианта) в верхней части окна доку-
мента. Будет выполнена оптимизация с выбранными параметрами.
>• Сравните оригинальное и оптимизированное изображения и, если считаете
нужным, откорректируйте параметры оптимизации.
Сохраним оптимизированное изображение.
>• Выберите команду меню File * Save Optimized (Файл » Сохранить оптими-
зированный документ). На экране появится диалог Save Optimized (Сохране-
ние оптимизированного документа) (Рис. 2.92), в поле ввода Имя файла (File
name) которого указано имя сохраняемого документа - Samolet.html.
>• Откройте папку Web для сохранения файла.
> Убедитесь, что в открывающемся списке Тип файла (List files of type) вы-
брано HTML and Images (*.html) (HTML и изображения (*.html)), чтобы со-
хранить HTML-код с картой навигации.
>• Закройте диалог Save Optimized (Сохранение оптимизированного документа),
нажав кнопку Сохранить (Save). В папке Web будет сохранено изображение
Samolet.jpg и файл Samolet.html с HTML-кодом карты навигации.
. . . .

>• Закройте программы Adobe ImageReady и Adobe Photoshop.

Проверим теперь, как работает карта навигации.
>• Откройте в программе просмотра Web-страниц файл Samolet.html из папки
Web.
>• Перемещайте указатель мыши по фотографии. В зависимости от положения
указателя мыши - на изображении самолета на переднем плане или вне его,
в строке состояния (Status Bar) будет отображаться адрес URL, сопостав-
ленный данному участку карты навигации. Вблизи указателя мыши будет
появляться всплывающая подсказка.
> Щелкните мышью на изображении самолета. Это изображение будет выделе-
но многоугольным контуром, произойдет переход по ссылке, и в окно брау-
зера будет загружен файл geoton.html.

202
 Подготовка графики с помощью программ Photoshop и ImageReady
>• Нажмите кнопку Back (Назад) на панели инструментов программы просмотра.
Программа возвратит вас к предыдущему документу - Samolet.html.
> Щелкните мышью за пределами изображения самолета. Теперь будет выде-
лен прямоугольный контур всей фотографии, и в окно браузера загрузится
файл spisok.html.
>• Как видите, карта навигации работает правильно. Посмотрим теперь, как вы-
глядит автоматически созданный документ Samolet.html.
>• Откройте в программе Блокнот (Notepad) файл Samolet.html из папки Web.
Обратите внимание, что код карты навигации располагается между коммента-
риями <!— ImageReady Slices (Same-let.pad) —> и <!— End Im-
ageReady Slices —>.
HTML-код навигационной карты включает элемент <IMG>, загружающий изо-
бражение Samolet.jpg, который с помощью атрибута USEMAP связывается с на-
вигационной картой, определяемой элементом <МАР>. . .</МАР>. Имя карты
задается атрибутом NAME. Для указания областей, реагирующих на щелчок
мыши, используются два элемента <AREA>, в которых атрибут SHAPE определяет
форму области, ALT - альтернативный текст, который появляется в неграфиче-
ских браузерах и как всплывающая подсказка при установке указателя мыши на
области изображения, которой сопоставлен URL, COORDS - координаты области,
HREF - адрес URL ссылки.
> Закройте программу Блокнот (Notepad).
> Закройте окно браузера, нажав кнопку [х] в правом верхнем его углу.
Adobe ImageReady может создавать навигационные карты двух видов: клиент-
ские и серверные. В клиентских картах координаты области, на которой выпол-
нен щелчок мышью, обрабатываются программой просмотра Web-страниц поль-
зователя, после чего браузер выполняет переход по ссылке, указанной для акти-
визированной области.
I

В серверных навигационных картах координаты точки щелчка передаются сер-

веру, определенному с помощью атрибута href тега <а>. После обработки
координат сервер выполняет предусмотренные действия.
Клиентские навигационные карты более удобны, так как доступны пользовате-
лям неграфических браузеров и при отключенной загрузке графики. По умолча-
нию Adobe ImageReady создает клиентскую навигационную карту. Изменить
тип создаваемой карты можно с помощью переключателей Туре (Туре) группы
элементов управления Image Maps (Карты навигации) диалога Output Settings
(Параметры вывода) (Рис. 2.166), который вызывается из диалога Save
Optimized (Сохранение оптимизированного документа) или командой меню File »
Output Settings » HTML (Файл * Параметры вывода •» HTML).
203
Г Л А В А 3.

Анимация на
Для пользователей Интернета уже давно стали привычными появляющиеся поч-
ти на каждой Web-странице «живые» мультипликационные картинки. Именно
такими, анимационными, в большинстве случаев являются рекламные баннеры.
Это и понятно: анимация привлекает внимание гораздо сильнее, чем статиче-
ские картинки, и, кроме того, на небольшой площади можно поместить значи-
тельно больше информации за счет чередующихся кадров.
Анимация - это демонстрирующаяся в быстром темпе последовательность
кадров, каждый из которых несколько отличается от предшествовавшего ему и
следующего за ним кадра. Каждый кадр отображается в течение определенного
промежутка времени. Если кадров достаточное количество и время их отобра-
жения невелико, то создается иллюзия движения.
В прошлом, в традиционной анимации кадры рисовались «вручную». В последние
годы анимационные технологии переведены на компьютерную основу. И хотя
концепции разработки анимации остались прежними, используемые методы
значительно отличаются. Ключевым моментом, определяющим качество любой
анимации и фильма вообще, является количество кадров, использованных для
их создания. Чем больше кадров содержит анимация, тем более сглаженным бы-
вает движение в процессе проигрывания. Если кадров недостаточно, движение
будет неравномерным.
Если в традиционной анимации увеличение количества кадров лишь увеличива-
ет длительность их проигрывания, то в компьютерной анимации, создаваемой
для Web, одновременно увеличиваются размер файла и время его загрузки по
сети. При подготовке анимации для Web-страниц должно быть найдено разум-
ное равновесие между ее качеством и размером файла, поскольку и то и другое
зависит от количества кадров. Найти наилучший вариант не так просто. Но при-
обретаемый со временем опыт будет подсказывать вам правильное решение.
В настоящее время существует несколько технологий создания анимации для
WWW: анимационный (animated) GIF, Flash, Java и JavaScript. Из этих техноло-
гий анимационный GIF является, пожалуй, самым простым в создании, и прак-
тически любой современный браузер может его показать. Формат GIF позволяет
размещать в одном файле несколько кадров или фреймов (frames) с изображе-
ниями для их последовательного вывода на экран. В отличие от обычного фильма,
где длительность анимации определяется скоростью воспроизведения, для каж-
дого кадра GIF-анимации может быть задана длительность его показа на экране,
а для всей анимации может быть указано количество повторений. Кроме того, в
отличие от обычного фильма, изображения, содержащиеся в кадрах GIF-анимации,
не обязательно должны быть одного размера. Для изображения каждого кадра
или слоя анимации вы можете установить индивидуальный размер и располо-
 Анимация на Web-страницах
жить его по своему усмотрению, независимо от других слоев. Анимационные
GIF-файлы могут быть легко подготовлены в программе Adobe ImageReady.
Увидеть анимацию такого типа можно, например, на сайте по адресу
http://acidic-gif.narod.ru/ и на многих других сайтах, адреса которых вы можете
узнать, задав поиск фразы «GIF-анимация» на любом из поисковиков в Интер-
нете (Яндекс, Google и т.п.).
В отличие от GIF-анимации, которая позволяет размещать в файле только изо-
бражения, Flash-технология предоставляет возможность объединить в одном
формате анимацию, звук, текст, графику и, кроме того, элементы интерактивно-
сти, которые дают возможность пользователю или посетителю сайта определен-
ным образом изменять данные на Web-странице, превращая его из наблюдателя
в активного участника. Интерактивными элементами сайта могут быть игры,
например: карточные, рулетка, тир, крестики-нолики, «морской бой», онлайно-
вые обучающие программы, викторины, тесты, калькуляторы и т.п. Примеры
такой анимации вы увидите на сайтах www.legus.ru/, www.flasher.ru/,
www.avestadesign.ru/. Создается подобная анимация с помощью программы
Macromedia Flash. К сожалению, для просмотра Flash-анимации вам, скорее всего,
придется установить дополнительный подключаемый модуль (Plug-in) для ваше-
го браузера. Именно по этой причине не имеет смысла использовать Flash-
анимацию при создании серьезных сайтов, например сайтов фирм, реклами-
рующих и поддерживающих свою продукцию через Интернет, т.е. сайтов, кото-
рые предназначены для широкого круга лиц. Поскольку многие люди просто не
смогут увидеть Flash-анимацию, а установить дополнительный подключаемый
модуль не захотят или просто не смогут.
Еще один способ создания анимации - посредством программирования на язы-
ках Java и JavaScript. Эти языки позволяют разрабатывать программы, встроен-
ные в документы HTML и называемые апплетами, которые выполняются брау-
зерами на компьютерах пользователей. И, конечно же, возможности Java и
JavaScript значительно шире, чем подготовка анимационных картинок. Они по-
зволяют создавать масштабные Интернет-приложения. Примеры Java-апплетов
можно увидеть на сайтах http://reality.sgi.com/, www.bulletproof.com/. Создание
анимации с помощью Java и JavaScript также нельзя назвать подходящим для
серьезных сайтов, так как пользователи очень часто отключают поддержку Java
и JavaScript в своих браузерах по соображениям безопасности. Так как с помо-
щью программ на указанных языках можно скопировать или испортить файлы
на вашем компьютере.
Учитывая все вышесказанное, можно с уверенностью сказать, что самый про-
стой, надежный и эффективный способ разместить анимацию на своих Web-
страницах - это использовать формат GIF.

205
Adobe Photoshop для Web

Структура файла
Чтобы лучше понять, как работает GIF-анимация, следует представлять струк-
туру формата GIF89a. Файл формата GIF89a состоит из блоков, расположенных
в определенной последовательности. Выделяют блоки трех типов:
• управляющие блоки - определяют, как будут обрабатываться изображения;
они содержат заголовок, описание логического экрана, управление графиче-
скими расширениями, признак конца;
• блоки изображения - содержат графические данные: изображение, текст,
описание палитры;
• специальные блоки - содержат комментарии и прикладные расширения,
которые никак не влияют на изображение, но могут обрабатываться приклад-
ными программами по их усмотрению. Среди подобных блоков особо следу-
ет выделить прикладной блок Netscape Loop. Он присутствует практически в
каждой анимации. Если браузер, не только Netscape Navigator, видит этот
блок, он проигрывает анимацию не один раз, а столько, сколько указано, или
бесконечно.
Общая схема следования этих блоков приблизительно такова:
• заголовок - GIF87a или GIF89a - определяет формат файла;
• описание логического экрана - задается размер экрана, на котором будет
проигрываться анимация;
• описание глобальной палитры - необязательно, но крайне желательно;
• произвольное количество блоков изображения, в том числе текстовых, или
пар блоков: управление графическими расширениями - изображение. Блок
управления графическим расширением может содержать в себе указание на
локальную палитру, расположение на логическом экране, задержку и способ
удаления изображения и оказывает влияние только на следующий непосред-
ственно за ним блок изображения;
• завершитель - признак конца.
Комментарии и специальные блоки, если они есть, могут располагаться в любом
месте файла, но только после описания глобальной палитры или после описания
логического экрана. Блок расширения Netscape Loop должен следовать непо-
средственно за глобальной палитрой.

206
 Анимация на Web-страницах

Использование (ЛР-аиимациц
В следующий главе вы узнаете, как создавать GIF-анимацию. Здесь же отметим,
что если у вас уже есть готовая GIF-анимация, то процедура помещения ее на
Web-сайт ничем не отличается от помещения туда же простого, не анимирован-
ного GIF-файла. Она выполняется с помощью тэга <img> и подробно рассмот-
рена в предыдущих главах.
К несомненным достоинствам GIF-анимации можно отнести следующие ее
особенности:
• небольшой размер файла за счет оптимизации;
• не требуется специальных программ для просмотра;
• для проигрывания не требуется постоянной связи с сервером;
•, простой способ помещения на Web-страницу.
Но у GIF-файлов есть и недостатки:
• палитра не превышает 256 цветов;
• сжатие фотографических изображений гораздо ниже, чем в формате JPEG.
Стандарт GIF89a - весьма мощный инструмент для создания Web-анимаций,
однако необходимо учитывать тот факт, что если некоторые специальные гра-
фические программы и поддерживают этот стандарт в полном объеме, то это не
относится к некоторым браузерам, поэтому, применяя динамические GIF-файлы
для Web, лучше ориентироваться не на сам стандарт, а на возможности браузе-
ров по его поддержке.
Учитывая проблемы совместимости программ просмотра, при создании
анимационных GIF-файлов рекомендуется соблюдать следующие правила:
• желательно не использовать локальные палитры: в некоторых случаях это
приводит к неправильному отображению цветов;
• прозрачный цвет следует определять глобально; локальный прозрачный цвет
не поддерживается;
• не всеми браузерами поддерживается замена изображения предыдущим;
• если изображение не умещается на логическом экране, то может произойти
аварийное завершение работы браузера;
• в некоторых версиях браузеров кадры проигрываются не быстрее, чем с за-
держкой 0,34 секунды;
• ввод пользователя поддерживается очень немногими браузерами.
/

207
Adobe Photoshop для Web
После создания анимационного GIF-файла, его необходимо протестировать в
наибольшем количестве браузеров.
Создавая сложную анимацию, необходимо тщательно планировать и записывать
ее события, так как в большом количестве кадров очень легко запутаться,
особенно, если речь идет об анимации в одном файле нескольких объектов.
Готовые бесплатные анимационные картинки для использования на своих Web-
страницах вы можете найти, например, по адресам:
http://www.free-clip-art.net
http://www.free-graphics.com
http://www.animation-central.com
http://www.animationlibrary.com
http://www.animationcity.net
Г Л А В А 4.

Создаем анимацию с помощью

Adobe Imageready C5
Создание анимации в Adobe ImageReady базируется на использовании слоев.
Каждый элемент анимации помещается на собственный слой. Это позволяет из-
менять положение и вид элемента в серии кадров, используя команды и пара-
метры палитры Layers (Слои). Для создания кадров анимации из оригинального
многослойного изображения совместно с палитрой Layers (Слои) используется
палитра Animation (Анимация). С ее помощью вы можете назначать каждому
кадру время задержки, создавать новые кадры, автоматически генерировать
промежуточные состояния на основании начального и конечного изображений,
определять количество повторений анимации и др.

2«акомст6о с палитрой «Анимация»

С программой Adobe ImageReady мы уже достаточно подробно познакомились в
разделах предыдущей главы. Рассмотрим теперь процесс подготовки в ней ани-
мации. И в качестве примера «оживим» баннер, который мы создали в преды-
дущей главе и сохранили в файле Geoton.psd. Но прежде всего запустим про-
грамму Adobe ImageReady.
> Нажмите кнопку Пуск (Start) на Панели задач (Taskbar) и в появившемся
главном меню Windows выберите команду Программы * Adobe Im-
ageReady CS (Programs * Adobe ImageReady CS). Программа будет запу-
щена, и на экране появится ее рабочее окно.
Как уже отмечалось, подготовка анимации выполняется с помощью палитры
Animation (Анимация).
>• Выберите команду меню Window * Animation (Окно » Показать Анимация).
В нижней части рабочего окна появится палитра Animation (Анимация)
(Рис. 4.1).

Рис. 4.1. Палитра Animation (Анимация)

Пока в программе Adobe ImageReady не будет создан новый или открыт сущест-
вующий документ, элементы управления данной палитры будут недоступны.
Поэтому сразу откроем файл Geoton.psd.
Adobe Photoshop для Web
> Выберите команду меню File •> Open (Файл * Открыть). На экране появится
диалог Открытие файла (Open) (Рис. 4.2).

QAdob.

eceived Filet
2) M> Virtual Machinal

)«ата«ог CD

£| MOM рисунки
! Мои рисунки
Моямчэыка

Имя Файла. Ц

1ип«йлок [AI Readable Foimali

м

Рис. 4.2. Диалог Открытие файла (Open)

> Откройте папку, в которой вы сохранили файл Geoton.psd, и щелчком
мыши выделите его.
>• Нажмите кнопку Открыть (Open). Диалог Открытие файла (Open) закро-
ется. В рабочем окне программы Adobe ImageReady появится окно доку-
мента Geoton.psd (Рис. 4.3).
т-ps<l
.— @>_100%
__.(Original)
_.__. ЯЗИ

Рис. 4.3. Окно документа Geoton.psd

Мы уже говорили, что подготовка анимации в Adobe ImageReady заключается в
создании последовательности кадров, для каждого из которых определяется
изображение, время задержки и другие параметры. Первый кадр этой последо-
вательности создается программой автоматически и уже находится в палитре
Animation (Анимация) с миниатюрой и ярлыком 1 в левом верхнем углу (Рис. 4.4).
Этот кадр включает все видимые слои активного рисунка.

210
 Создаем анимацию с помощью Adobe ImageReady CS

Рис. 4.4. Палитра Animation (Анимация) с первым кадром анимации

У нижнего края палитры Animation (Анимация) расположены кнопки, управ-
ляющие созданием и проигрыванием анимации. Эти кнопки имеют следующее
назначение.
•v - Selects looping options (Выбор параметров повторения) - открывает меню,
с помощью которого вы можете выбрать количество повторений анимации.
Выбранный параметр отображается елева от значка •*-. По умолчанию это -
Forever (Непрерывно), т.е. проигрывание анимации повторяется без перерыва.
R<1 - Selects first frame (Выбор первого кадра) - переход к первому кадру
анимации.
Г<П - Selects previous frame (Выбор предыдущего кадра) - переход к предыду-
щему кадру анимации.
П>"1 - Plays/Stops animation (Проигрывание/Остановка анимации) - включает
проигрывание анимации. После начала воспроизведения изображение кнопки
Г5П меняется на I а I. нажатие которой прерывает воспроизведение анимации.
(1^1 - Selects next frame (Выбор следующего кадра) - переход к следующему
кадру.
рчЛ - Tween (Создание промежуточных кадров) - Dock to Palette Wel
автоматически генерирует промежуточные кадры Нем F»

между двумя указанными.

I a I - Duplicates current frame (Дублирование теку- Copy Flame
P**t% FIMM...
щего кадра) - создает копию выбранного кадра. SitactAIFujMt

\9 | - Deletes selected frames (Удаление выбранных

кадров) - удаляет выбранные кадры. Optimize Animation...

В правом верхнем углу палитры Animation (Ани- Make Frame* From Layers
Flatten Flames Into Layers
мация) находится кнопка ©, открывающая доступ к
Create Layer loi Each New Frame
меню палитры (Рис. 4.5). С помощью команд этого »• New Layers Visible in All Slates/Fra
меню можно создавать, удалять, копировать, встав- Palette Option»...
лять и выделять кадры, генерировать промежуточ-
ные кадры, оптимизировать анимацию и выполнять Puc. 4.5. Меню палитры
некоторые другие операции. Animation (Анимация)

211
Adobe Photoshop для Web
Процесс подготовки анимации в Adobe ImageReady очень прост. В палитре
Animation (Анимация) последовательно создаются кадры. Графическое содер-
жимое каждого кадра определяется с помощью палитры Layers (Слои). При
этом вы можете использовать все доступные средства редактирования. Для каж-
дого кадра устанавливается длительность отображения на экране, которую мож-
но изменять в широких пределах. При необходимости между двумя любыми
кадрами автоматически генерируется любое количество промежуточных кадров
для создания эффекта постепенного изменения. Причем такое постепенное из-
менение можно создавать для прозрачности, эффектов и положения объектов.
И наконец, указывается количество повторений проигрывания анимации в брау-
зере, которое определяется целым числом или может быть непрерывным. На
заключительном этапе анимация оптимизируется и сохраняется в формате GIF.

Сменяющиеся кадры
Самый простой вид анимации - это сменяющаяся последовательность кадров.
Такая анимация может быть использована, например, для показа коллекций ри-
сунков, фотографий и т.п., что, в свою очередь, может быть использовано для
привлечения внимания к соответствующему разделу. Сменяющуюся последова-
тельность фотографий можно создать, если предварительно преобразовать их к
единому размеру, при необходимости обрезав, а затем вставить каждую фото-
графию через буфер обмена на новый слой.
Напомним, что анимационные GIF-файлы - это последовательность кадров с
заданной длительностью. Эти кадры в Adobe ImageReady создаются из слоев.
Слои же, в свою очередь, следует предварительно подготовить в самой про-
грамме или же в Adobe Photoshop.
Создадим эффект анимации баннера из файла
Geoton.psd таким образом, чтобы надписи Вам нуж-
на локальная сеть? и Заходите СЮДА! последо-
вательно сменяли друг друга через определенные
промежутки времени и чтобы рисунок открытой
двери появлялся после надписи Заходите СЮДА!.
Прежде всего необходимо определить изображение
Effects
для первого кадра анимации. Это можно сделать, О Drop Shadow
включив отображение нужных слоев и выключив ff Bevel and Emboss

отображение ненужных. BID

4i i»-i o. a | ш а
> Увеличьте высоту палитры Layers (Слои),
чтобы в ней были видны все имеющиеся слои Puc. 4.6. Слои в палитре
(Рис. 4.6). Layers (Слои)

212
 Создаем анимацию с помощью Adobe ImageReady CS
Благодаря наличию значков с изображением открытого глаза ф, вы можете вы-
ключить и включить отображение слоев и эффектов на рисунке и текущем кадре
анимации и таким образом указать программе, что должно отображаться на дан-
ном кадре. Для первого кадра мультипликации следует выключить отображение
слоя Layer 3 с надписью Заходите СЮДА! и слоя Layer 4 с рисунком двери,
оставив остальные слои включенными.
>• Щелкните мышью на значке с изображением глаза ф слева от миниатюры
слоя LayerS. Этот значок исчезнет. Указанный слой на рисунке и первом
кадре анимации станет невидимым.
> Подобным же образом, щелчком мыши, выключите отображение слоя Layer 4.
Включенными должны остаться только слои Background, Layer 1, Effects (Эффек-
ты) и Layer 2. Эти слои и будут отображаться на первом кадре мультипликации.
Теперь, когда мы определили изображение для первого кадра анимации, следует
создать следующий, второй кадр.
> Нажмите кнопку | в | - Duplicates current frame (Дублирование текущего
кадра) в нижней части палитры Animation (Анимация). В ней появится и бу-
дет выделен темной рамкой второй кадр (Рис. 4.7). Темное выделение указы-
вает на то, что теперь этот кадр активный, и к нему будут относиться все
операции редактирования.

Рис. 4.7. Второй кадр анимации

Изображение на втором кадре полностью совпадает с первым, так как был соз-
дан дубликат кадра. И теперь это изображение следует изменить. Для текущего
кадра выключим отображение слоя Layer 2 с текстом Вам нужна локальная
сеть? и включим отображение слоя Layer 3 с надписью Заходите СЮДА!
> Щелкните мышью на значке ф слева от миниатюры слоя Layer 2. Этот
значок исчезнет. Указанный слой будет выключен и надпись Вам нужна
локальная сеть? на рисунке и первом кадре анимации исчезнет.
> Щелкните мышью в палитре Layers (Слои) в крайнем левом пустом поле
Indicates layer visibility (Индикация видимости слоя), слева от названия слоя
Layer 3. В этом поле появится значок с изображением открытого глаза ф.
Слой Layer 3 будет включен, и надпись Заходите СЮДА! отобразится на ри-
сунке в окне документа и на миниатюре второго кадра.

213
Adobe Photoshop для Web
Добавим еще один кадр анимации.
>• Нажмите кнопку 0 в правом верхнем углу палитры Animation (Анимация) и
в появившемся меню выберите команду New Frame (Новый кадр). В палитре
Animation (Анимация) появится и станет активным третий кадр, который
представляет собой копию второго (Рис. 4.8).

Рис. 4.8. Создан новый кадр

Для текущего кадра включим дополнительно отображение слоя Layer 4 с рисун-
ком двери.
> Щелкните мышью в поле Indicates layer visibility (Индикация видимости
слоя) слоя Layer 4 палитры Layers (Слои), чтобы включить его отображение.
Теперь в окне документа и на третьем кадре анимации должны отображаться все
слои, за исключением слоя Layer 2. .
Действуя описанным способом, вы можете создать для анимации любое количе-
ство кадров и для каждого из них определить с помощью палитры Layers (Слои)
графическое содержимое.
Удалить любой кадр или группу кадров из палитры Animation (Анимация) можно
с помощью кнопки I ffl I - Deletes selected frames (Удаление выбранных кадров),
предварительно выделив их щелчками мыши при нажатой клавише l s h i t l l. если
кадры смежные (в этом случае достаточно щелкнуть мышью только на крайних
кадрах), или при нажатой клавише 1^4. если кадры несмежные. Удалить выбран-
ные кадры можно также командой меню Delete Frame (Удалить кадр) палитры
Animation (Анимация).

Просмотр и настройка
параметров «ролика»
Время задержки на экране каждого кадра по умолчанию равно 0 (ноль) секунд.
И это значение - 0 sec. - отображается в палитре Animation (Анимация) под
миниатюрой каждого кадра. Если воспроизводить анимацию с такой задержкой,
то кадры анимации будут сменять друг друга слишком быстро. Но время за-
держки можно легко изменить. Посмотрим, как изменить этот параметр одно-

214
 Создаем анимацию с помощью Adobe ImageReady CS
временно для всех кадров. Предварительно кадры анимации нужно выделить.
Выделение любого кадра осуществляется простым щелчком мыши на кадре.
ctrl
Чтобы выделить несколько кадров, следует удерживать нажатой клавишу If 1.
С1г|
> Нажмите и удерживайте клавишу I I.
ctrl
> Не отпуская клавишу It 1. щелкните мышью в палитре Animation (Анимация)
поочередно на не выделенных темным цветом кадрах анимации. Эти кадры
будут выделены.
Ctrl
>• Отпустите клавишу I I.
Выделить все кадры анимации в палитре Animation (Анимация) можно также с
помощью команды меню палитры Animation (Анимация) Select All Frames
(Выделить все кадры).
Теперь, когда все три кадра анимации выделены, устано-
No delay
вим для каждого из них время задержки, равное 1 секунде. 0.1 seconds
0.2
>• Щелкните мышью в палитре Animation (Анимация) на 0.5
миниатюрном значке-треугольнике т - Selects frame 1.0
delay time (Выбор времени задержки кадра) справа от 2.0
надписи 0 sec. под миниатюрой первого кадра. На эк- 5.0
10.0
ране появится меню времени задержки (Рис. 4.9).
Othei..
> В появившемся меню выберите 1.0 (1 секунда). Это 0 seconds
значение- 1 sec. - отобразится в палитре Animation
(Анимация) под миниатюрами всех трех кадров. Рис. 4.9. Меню
Просмотрим полученный результат. времени задержки

> Нажмите кнопку ГР1 - Plays/Stops animation (Проигрывание/Остановка

анимации) в нижней части палитры Animation (Анимация). Начнется проиг-
рывание эффекта. Изображение кнопки ГР~1 изменится на | а |.
В окне документа вы увидите, как периодически сменяются надписи Вам нужна
локальная сеть? и Заходите СЮДА! Причем после появления надписи Захо-
дите СЮДА! появляется также рисунок открытой двери. В процессе проигрыва-
ния в палитре Animation (Анимация) будет перемещаться выделение, отмечая
текущий кадр.
> Нажмите кнопку I D I - Plays/Stops animation (Проигрывание/Остановка
анимации) в нижней части палитры Animation (Анимация), чтобы прекра-
тить проигрывание эффекта.
Увеличим время показа на экране первого кадра анимации до 1,5 секунд. Пред-
варительно этот кадр нужно выделить.

215
Adobe Photoshop для Web
> Нажмите кнопку R<1 - Selects first frame (Выбрать первый кадр) в нижней
части палитры Animation (Анимация). Кадр станет активным.
Перейти к следующим кадрам палитры Animation (Анимация) можно, нажимая
кнопку П>1 - Selects next frame (Выбрать следующий кадр), а к предыдущим -
нажимая кнопку |"<П - Selects previous frame (Выбрать предыдущий кадр) в
нижней части палитры Animation (Анимация).
Значение 1,5 секунды в меню времени задержки отсутствует. Поэтому для ука-
зания времени следует воспользоваться специальным диалогом.
>• Щелкните мышью в палитре Animation (Анимация) на треугольном значке ^ -
Selects frame delay time (Выбор времени задержки кадра) под миниатюрой
первого кадра и в появившемся меню времени задержки выберите Other
(Другое). На экране появится диалог Set Frame Delay (Установка времени
задержки кадра) (Рис. 4.10).
1 Set Flame Delay

Set Delay: |'l (seconds [ OK |

| Cancel |

Puc. 4.10. Диалог Set Frame Delay (Установка времени задержки кадра)
>• В поле ввода Set Delay (Установить задержку) введите 1,5.
> Нажав кнопку ОК, закройте диалог Set Frame Delay (Установка времени
задержки кадра). Указанное время задержки - 1,5 sec. - отобразится под
миниатюрой первого кадра.
>• Просмотрите анимацию, нажав кнопку П>П - Plays/Stops animation (Проиг-
рывание/Остановка анимации) в палитре Animation (Анимация).
Вы увидите, что теперь надпись Вам нужна локальная сеть? сохраняется на
экране дольше чем прежде, а затем, после ее исчезновения появляется надпись
Заходите СЮДА! и через секунду после нее - рисунок открытой двери.
>• Остановите проигрывание анимации нажатием кнопки ПЛ.
Вы, вероятно, уже заметили, что проигрывание мультипликации повторяется
беспрерывно, до остановки кнопкой | а |. Так предусмотрено по умолчанию, и
информация об этом режиме проигрывания - Forever (Непрерывно) - выводится
у левого края нижней строки палитры Animation (Анимация).
>• Щелкните мышью на треугольном значке т справа от надписи Forever (Не-
прерывно). На экране появится меню повторений, из которого вы можете вы-
брать значение Once (1 раз) или Other (Другое). В последнем случае на экра-
не появится диалог Set Loop Count (Установка числа повторений) (Рис. 4.11),
в котором следует указать количество повторений анимации.
216
 Создаем анимацию с помощью Adobe ImageReady CS
Set Loop Count

Play: 1 1 | times | OK I
| Cancel 1
•

Puc. 4.11. Диалог Set Loop Count (Установка числа повторений)

> Щелкните мышью на свободном пространстве рабочего окна, чтобы скрыть
меню повторений.
Итак, мы создали анимацию из сменяющихся кадров и научились настраивать ее
параметры. В следующем разделе мы познакомимся с автоматической генераци-
ей кадров.

«Метущие», постепенно поя&ляюшиеся

и исчезающие рисунки
В предыдущих разделах мы создавали и изменяли каждый кадр анимации вруч-
ную. Но Adobe ImageReady позволяет автоматически сгенерировать последова-
тельность кадров между двумя указанными и отличающимися друг от друга
кадрами, которые в совокупности создадут плавный переход от первого кадра к
последнему. Для автоматически созданных кадров можно также определить, что
именно должно изменяться: положение объектов, их прозрачность или эффекты,
или же все эти три атрибута одновременно.
Изменим анимацию таким образом, чтобы надпись Заходите СЮДА!, конкрети-
зируя приглашение, двигалась в направлении постепенно появляющейся откры-
той двери и «заходила» в нее. Но сначала изменим время задержки второго и
третьего кадров на 0,2 секунды.
> Щелкните мышью на втором кадре в палитре Animation (Анимация),
чтобы выделить его.

>• Нажав и удерживая клавишу l s h i f l l. щелкните мышью на третьем кадре ани-

мации. Оба кадра будут выделены.

>• Отпустите клавишу l s h i f l l.

>• Щелкните мышью в палитре Animation (Анимация) на треугольном значке т -
Selects frame delay time (Выбор времени задержки кадра) под миниатюрой
третьего кадра и в появившемся меню времени задержки выберите 0.2. Это
время - 0,2 sec. - отобразится под миниатюрами второго и третьего кадров.

217
Adobe Photoshop для Web
Теперь для третьего кадра анимации следует изменить положение слоя Layer 3
так, чтобы правый край надписи Заходите СЮДА! на этом слое «входил»
в открытую дверь.
> Щелкните мышью на миниатюре третьего кадра. Этот кадр станет активным,
а выделение второго кадра будет снято.
Переместим слой Layer 3 в окне документа вправо, предварительно выделив его.
> Щелкните мышью на названии слоя Layer 3 в палитре Layers (Слои). Слой
будет выделен.
> Нажмите кнопку [>»] - Move Tool (V) (Инструмент «Перемещение» (V)) на
панели инструментов (Tools), чтобы выбрать данный инструмент.

>• Нажмите и удерживайте клавишу |shi(1i.

> Не отпуская клавишу l s h m l. нажмите несколько раз клавишу R. Каждое на-

жатие этой клавиши будет перемещать в окне документа надпись Заходите
СЮДА! на 10 пикселов вправо. Расположите надпись так, чтобы последний ее
символ находился «в открытой двери» (Рис. 4.12).
ri psd <•?> 100% (Uiigin

Заходите ^ЮтШ

Рис. 4.12. Слой Layer 3 перемещен

> Отпустите клавишу l s h m l.

х Откорректируйте положение слоя Layer 3 с помощью клавиш и tj, не

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

>• Нажмите клавишу!5111"!.

>• В палитре Animation (Анимация) щелкните мышью на миниатюре второго

кадра, чтобы выделить его вдобавок к третьему, уже выделенному кадру.

> Отпустите клавишу l shi(1 l.

'.

218
 Создаем анимацию с помощью Adobe ImageReady CS
Теперь между вторым и третьим кадрами можно автоматически сгенерировать
последовательность кадров, которые создадут эффект плавного перехода.
>• Нажмите кнопку |°ч,| - Tween (Создание
промежуточных кадров) в нижней части Iween With: [selection
палитры Animation (Анимация). На экране
james to Add: |5 | I Cancel |
появится диалог Tween (Промежуточные
кадры) (Рис. 4.13).
0 Al Layers
Этот диалог можно вызвать также командой О Selected Layers

Tween (Промежуточные кадры) из меню па- \

литры Animation (Анимация). 0 Position

0 Opacity
В данном диалоге переключатели Layers 13 Effects
/
(Слои) позволяют указать, должны ли присут-
ствовать в добавленных кадрах все видимые Puc. 4.13. Диалог Tween
слои (All Layers) или только активный слой (Промежуточные кадры)
(Selected Layer).
> Убедитесь, что установлен переключатель All Layers (Все слои).
Группа элементов управления Parameters (Атрибуты) позволяет определить,
какие атрибуты слоев будут изменяться в добавляемых кадрах: Position (Поло-
жение), Opacity (Непрозрачность) или Effects (Эффекты).
>• Убедитесь, что установлены флажки Position (Положение) и Opacity (Непро-
зрачность) Состояние флажка Effects (Эффекты) для нашей анимации значе-
ния не имеет, так как этот атрибут на выбранных кадрах не используется.
>• Убедитесь, что в открывающемся списке Tween with (Промежуточные кадры
между) выбрано Selection (Выделение). При этом эффект плавного перехода
будет создан между выделенными кадрами.
В поле ввода Frames to Add (Добавить кадров) по умолчанию предлагается до-
бавить 5 кадров. Увеличим количество промежуточных кадров до десяти.
>• В поле ввода Frames to Add (Добавить кадров) введите 10.
> Нажатием кнопки ОК закройте диалог Tween (Промежуточные кадры). В па-
литре Animation (Анимация) между вторым и третьим будет добавлено еще
10 кадров (Рис. 4.14) и, таким образом, создан плавный переход изображения.

Рис. 4.14. Промежуточные кадры созданы

219
Adobe Photoshop для Web
> Нажмите кнопку |"F1 - Plays animation (Проигрывание анимации) в нижней
части палитры Animation (Анимация) и просмотрите созданный эффект.
Вы увидите, что теперь, после исчезновения надписи Вам нужна локальная
сеть?, возникает надпись Заходите СЮДА!, которая движется в направлении
постепенно появляющейся «открытой двери» и «заходит» в нее.
>• Остановите проигрывание анимации нажатием кнопки | а |.
Анимация готова. Теперь'ее нужно оптимизировать и сохранить в формате GIF.

Оптимизация и сохранение анимации

В предыдущей главе мы уже подробно рассматривали процесс оптимизации
графики для Web. А теперь остановимся на специфических приемах оптимиза-
ции анимации.
Как мы уже не раз подчеркивали в предыдущих главах, оптимизация призвана
обеспечить наименьший размер файла при минимальных потерях качества. Размер
анимационного файла зависит от количества кадров в нем. Чем больше кадров,
тем больше будет размер файла. К счастью, существует способ значительно
уменьшить размер файла посредством удаления избыточной информации, то
есть такой информации, которая повторяется в каждом кадре. Если созданная
мультипликация представляет собой лишь последовательную демонстрацию не
связанных между собой картинок, то объем избыточной информации будет ми-
нимальным, и каждый кадр придется почти полностью сохранить в анимацион-
ном файле. Если же анимация - это последовательное преобразование изобра-
жения, как в нашем случае, то в каждом последовательном кадре изменяется
лишь небольшая часть рисунка, и нет никакой необходимости в полном сохра-
нении всех кадров анимации. Избыточную информацию можно смело отбросить
и этим значительно уменьшить размер файла.
>• Нажмите кнопку 0 в правом верхнем 1 Optimize Animation
углу палитры Animation (Анимация)
и в появившемся меню выберите 1 OK |

команду Optimize Animation (Опти- 0 Bounding Box

| Cancel |
0 Redundant Pixel Removal
мизация анимации). На экране поя-
вится диалог Optimize Animation
(Оптимизация анимации) (Рис. 4.15), Puc. 4.15. Диалог Optimize
в котором определяются параметры Animation (Оптимизация анимации)
оптимизации анимации.
При установленном по умолчанию флажке Bounding Box (Граничные области)
Adobe ImageReady в каждом кадре удаляет те фрагменты изображения, которые
присутствовали в предыдущем кадре, и сохраняет только измененные, по срав-
нению с предыдущим кадром, области.
220
 Создаем анимацию с помощью Adobe ImageReady CS
При установленном флажке Redundant Pixel Removal (Удаление избыточных
пикселов) удаляются все пикселы каждого кадра, которые не изменены по срав-
нению с предыдущим кадром. Этот флажок, как и предыдущий, устанавливается
по умолчанию и таким образом Adobe ImageReady автоматически подбирает
наилучшие параметры оптимизации анимации.
> Закройте диалог Optimize Animation (Оптимизация анимации), нажав кнопку
ОК. Установленные параметры будут применены.
Теперь необходимо оптимизировать изображение. .
> Убедитесь, что на экране присутствует палитра Optimize (Оптимизация).
В противном случае выберите команду меню Window » Optimize (Окно *
Оптимизация).
> В открывающемся списке Format (Формат) палитры Optimize (Оптимизация)
выберите GIF.
х В открывающемся списке Colors (Цвета) этой же палитры выберите 32.
> Щелкните мышью на ярлыке 2-Up (2 варианта) в верхней части окна документа.
Будет выполнена оптимизация документа с установленными параметрами.
Специфика оптимизации изображения, содержащего анимацию, заключается в том,
что необходимо проверить, все ли кадры анимации оптимизированы корректно.
>- Переключаясь между кадрами, проверьте, как оптимизирован каждый кадр,
и, если необходимо, измените параметры оптимизации.
Созданную мультипликацию можно просмотреть в браузере.
>• Выберите команду меню File » Preview In (Файл » Предварительный про-
смотр в) и в появившемся меню выберите программу просмотра, в которой вы
хотите открыть рисунок. Будет запущен выбранный браузер, в его рабочем окне
откроется баннер и сразу же начнется проигрывание анимации (Рис. 4.16).
Просмотреть анимацию в браузере, установленном в операционной системе по
умолчанию, можно, нажав кнопку [Ж] - Preview in Default Browser (Ctrl+Alt+P)
(Предварительный просмотр в браузере по умолчанию (Ctrl+Alt+P)).
Под рисунком в окне программы просмотра выводится информация о формате
изображения (Format), его размерах (Dimensions), размере файла (Size) и пара-
метрах оптимизации (Settings), а ниже - HTML-код автоматически сгенериро-
ванного файла.
>• Нажмите кнопку Stop (Стоп) на панели инструментов программы просмотра.
Проигрывание анимации прекратится.
> Нажмите кнопку Refresh (Обновить) или Reload (Обновить) на панели инст-
рументов браузера. Проигрывание анимации возобновится.

221
Adobe Photoshop для Web

Д
П
and Se«inB»Wa«i>VLi)c«l S»)Ung«Vr«BpUein»»fla«<|»4T«ig»IPnvi»»4\G« M И «Р"°«

вам нужна локальная сеть?

r
omit:01F
Dimensions: 468vr x 60h
Sae:22.«K
Settings. Selectivt, 32 Cob», 100% Diffusion Dither. 13 films, Tnnspwncy on. No Transparency Dither, Interlaced 0%
Web Snip

fFFFFJF" iefta*rgin*"0" сзртигдхп^'О"

Slices (Geocon.pxd) -->
/G«oton.flii" width*"468" heighc»"60"
I— End ImageReady Slice* —>
</body>

'—'

My Computer

Puc. 4.16. Предварительный просмотр анимации в браузере

> Закройте программу просмотра, нажав кнопку [х] в правом верхнем углу ее окна.
Чтобы в дальнейшем иметь возможность редактировать созданную анимацию,
документ следует сохранить в формате Adobe Photoshop.
> Выберите команду меню File * Save (Файл » Сохранить). Файл будет сохра-
нен на диске.
Сохраненный таким образом файл можно будет открыть для редактирования
изображения в программе Adobe Photoshop, но в этой программе невозможно
будет проигрывать анимацию и редактировать ее кадры. С анимацией можно
работать только в Adobe ImageReady.
И, наконец, оптимизированное изображение необходимо сохранить для Web в
формате GIF.
> Выберите команду меню File • Save Optimized (Файл » Сохранить оптими-
зированный документ). На экране появится диалог Save Optimized (Сохране-
ние оптимизированного документа) (Рис. 4.17).
> Откройте папку Web, в которой сохранены файлы сайта.
>> Убедитесь, что в поле ввода Имя файла (File name) по умолчанию предлага-
ется имя сохраняемого файла - Geoton.gif.
>• Убедитесь, что в открывающемся списке Тип файла (List files of type) авто-
матически выбрано Images Only (*.gif) (Только изображения (*.gif)). При
этом в указанной папке будет сохранен только файл GIF, без HTML-кода.
222
 Создаем анимацию с помощью Adobe ImageReady CS

Папка:

no
)CLOUD
]Fon
iSamolet

^мя Файла: [Geolon

1ип Файла: | Images ОпИ'.д») | Отмена

Settings: [ DetauH Sellings

Sleet: AH Slices

PMC. 4.17. Диалог Save Optimized (Сохранение оптимизированного документа)

>• Закройте диалог Save Optimized (Сохранение оптимизированного документа)
нажатием кнопки Сохранить (Save). Файл будет сохранен в указанной папке.
Программу Adobe ImageReady можно закрыть.
>• Выберите команду меню File » Exit (Файл * Закрыть). На экране может
появиться запрос о сохранении файла Geoton.psd.
>• Нажмите кнопку No (Нет) в этом запросе. Окно документа закроется без
сохранения файла.
v Просмотрите, как выглядит баннер на первой Web-странице вашего сайта,
вставив в теге <img> файла geoton.html вместо ссылки на файл CLOUD.GIF
ссылку на файл Geoton.gif.
Программа Adobe ImageReady предоставляет очень простой и удобный инстру-
мент для создания анимации. Кроме описанного в этом разделе варианта, для
изменения кадров можно использовать разнообразные эффекты, которые пред-
лагает богатая библиотека фильтров Adobe ImageReady. Вы можете самостоя-
тельно поэкспериментировать с фильтрами, применяя к кадрам различные ко-
манды из меню Filters (Фильтры).

223
 Adobe Photoshop
для Web

Отдел распространения издательской группы «ТРИУМФ»

(«Издательство Триумф», «Лучшие книги», «Только для взрослых», «Технолоджи - 3000», «25 КАДР»)
Телефон: (095) 720-07-65, (095) 772-19-56. E-mail: opt@triumph.ru
Интернет-магазин: www.3st.ru
КНИГА-ПОЧТОЙ: 125438, г.Москва, а/я 18 «Триумф». E-mail: post@triumph.ru

ОТВЕТСТВЕННЫЕ ЗА ПЕРЕГОВОРЫ:
Региональные магазины - директор по развитию Волошин Юрий
Московские магазины - главный менеджер Малкина Елена
Оптовые покупатели - коммерческий директор Марукевич Иван

Идея, план и примеры книги В.Н. Печников.

Дизайн обложки Борис Клюйко.

Корректор Е.В. Акиева.
Верстка Е.О. Русакова.
• (
ООО «Лучшие книги».
125438, г. Москва, а/я 18.
, V

Подписано в печать с оригинал-макета 23.03.2005 г.

Формат 70хЮО'/|6. Печать офсетная. Печ. л. 14.
Заказ №6645.

Тираж 3 500 экз.

•
Отпечатано в полном соответствии с качеством предоставленных диапозитивов
в ОАО «Можайский полиграфический комбинат»
143200, г. Можайск, ул. Мира, 93
 Издательская группа «ТРИУМФ» представляет
ЛУЧШИЕ КНИГИ ДЛЯ ВАШЕГО МАГАЗИНА

Интернет-магазин
www.3st.ru

9ll785936ll73048l

Телефон для товароведов: (095) 720 07 65 E-mail: opt@triumph.ru