adobe photoshop для web (печников)

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: [email protected]

ISBN 5-93673-048-4 © ООО «Лучшие книги», 2005© Обложка ООО «Лучшие книги», 2005© Верстка и оформление ООО «Лучшие книги», 2005

Краткое содержание

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

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

с помощью Adobe ftiofoshop CS

и Adobe ImageReady CS .........................................

Глава з. Анимация на 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 - размер файла без сжатия в байтах;

А - ширина исходного изображения в мм;

В -длина исходного изображения в мм;


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 IsWhat You Get (Что видишь, то и получаешь). Говоря «как правило», мы имеем ввиду небольшие индивидуальные отличия мониторов пользователей.

На вопрос «Каков должен быть размер графического файла?», предназначенногодля Web, трудно ответить однозначно. Давайте попробуем представить себе, чтопользователь, обращающийся к вашему сайту, имеет модем с пропускной спо-собностью 14,4 Кбит/сек, хотя подобные модемы и считаются устаревшими.При использовании такого модема передача блока данных объемом 1 килобайтзанимает примерно 1 секунду, так что при объеме графики в 30 килобайт для еепередачи по сети потребуется приблизительно 30 секунд. После таких расчетов

9


возникает следующий вопрос: как долго посетитель, обратившийся к вашемусайту, готов ждать появления на экране загружаемого изображения? Если высможете ответить на этот вопрос, то сразу же определите и максимальный размерфайла с графическим изображением. Считается, что файл должен иметь такойразмер, при котором время его загрузки по сети не превышает одной минуты,что выражается в ограничении размера величиной примерно 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


Формат 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


показывается в четыре прохода. Такая система показа позволяет понять, чтоизображено на картинке еще до того, как она полностью загрузится, что оченьважно на медленных линиях связи. Нечто подобное используется в телевидениидля передачи одного полного кадра за два прохода луча - так называемая «че-ресстрочная развертка». Поэтому такие изображения были названы чересстроч-ными (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


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


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

.Во всяком случае, имейте в виду следующие обстоятельства:

• Чем больше на рисунке мелких и контрастных деталей, тем сильнее будутзаметны искажения, вносимые при сжатии в формате JPEG.

• Чем крупнее геометрические размеры изображения в пикселах и чем нижеконтрастность снимка, тем искажения JPEG будут меньше заметны.

• Чем больше на рисунке контрастных и мелких деталей, тем более крупныйразмер файла получится при сохранении в формате GIF.

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

• Файлы, записанные в чересстрочном (interlaced) формате GIF и в прогрессив-ном формате JPEG, то есть так, чтобы изображение «проявлялось» постепен-но, будут, при прочих равных условиях, иметь больший размер.

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

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

возможности оптимизации

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

' * ' \ •14


В формате JPEG изображение сохраняется с глубиной цвета 24 бит и исполь-зуется сжатие с потерей информации. У него не так уж много способов опти-мизации, точнее сказать, два:

• использование прогрессивной развертки;

• оптимальный коэффициент сжатия.

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

Оптимальный коэффициент сжатия. Это - другая возможность оптимизацииизображения в- формате JPEG. Для осуществления такой оптимизации нуженграфический пакет или утилита, которая позволяет регулировать степень сжатияизображения. Adobe Photoshop позволяет выполнить такую регулировку. Другиепрограммы, например, Photo- Paint и PaintShopPro, также позволяют плавно регу-лировать степень сжатия в интервале значений от 1 до 255.

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

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

• уменьшение количества цветов;

• оптимизация палитры изображения;

15


• стилизация изображения;

• изменение размеров изображения;

• фрагментарная оптимизация;

• оптимизация «прозрачных» изображений;

• использование чересстрочной развертки.

Теперь разберемся по порядку с этими методами и приемами оптимизации.

Уменьшение количества цветов. Для большинства изображений, не являю-щихся фотографическими, количество необходимых для воспроизведения цве-тов часто меньше 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


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

При оптимизации конкретного изображения задача состоит в том, чтобы выбратьоптимальное количество цветов в палитре. Здесь уместно сказать о способе уве-личения количества используемых цветов при их недостатке - так называемомсмешивании (dithering). При этом области, которые в оригинале были залиты од-нородным цветом, после преобразования заполняются смесью пикселов разныхцветов, разбросанных по случайному закону. Как правило, каждый отсутствую-щий в редуцированной палитре цвет передается пикселами двух самых близких кнему цветов новой палитры. В результате изображение приобретает характернуюзернистую, шероховатую фактуру. Очень часто смешивание является единствен-ным способом хоть сколько-нибудь адекватно передать исходные цвета с помо-щью палитры, в которой этих цветов уже нет. Например, у нас есть 16 стандарт-ных чистых цветов, а нам нужен отсутствующий оранжевый цвет. В таком случаеможно составить его из красных и желтых точек, разместив их в шахматном по-рядке. Издалека будет казаться, что это сплошной оранжевый цвет. Это классиче-ский пример смешивания. Его использование при преобразовании изображенийможет дать очень хорошие результаты. Но с точки зрения оптимизации размеровфайла происходит совсем обратное. Смешивание может увеличить размер файла,причем довольно существенно - он может стать больше, чем до оптимизации.А все дело в способе хранения изображения форматом GIF. Изображение передсохранением на диске подвергается сжатию методом LZW, а основная особен-ность этого метода заключается в том, что сжатию лучше всего поддаются области,заполненные однородным цветом, и хуже всего - области, состоящие из набораразноцветных точек. Смешивание же как раз основано на том, что получает не-достающие цвета путем «перемешивания» точек разных цветов.

Все существующие ныне Web-браузеры, включая Netscape Navigator и Micro-soft Internet Explorer, вынуждены при выводе графических файлов на экранизменять их палитру. Во-первых, им приходится приводить к общему знаме-нателю палитру всех файлов, включенных в одну страницу. Поскольку неко-торые компьютерные мониторы не могут отобразить больше 256 цветов од-новременно, приходится идти на компромиссы. Во-вторых, в некоторых слу-чаях браузеру приходится также приспосабливать палитру файла к фиксиро-ванной системной палитре. Чтобы эти неизбежные преобразования не приво-дили к совсем уж неприемлемым результатам, все современные браузерыпользуются при замещении палитры смешиванием. Это значит, что даже есливаше изображение состоит из идеально гладких цветовых плоскостей, но его

17


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

Однако для очень многих изображений, составляющих нередко основу дизайнастраницы, смешивание крайне нежелательно. Что же делать? Выход, хоть и несамый лучший, есть. Оказывается, существует набор из 216 цветов, которые сгарантией никогда не подвергаются смешиванию ни в Netscape Navigator, ни вInternet Explorer, ни в Windows, ни в Macintosh. Если ваше изображение будетсодержать только цвета из этого набора или, по крайней мере, к этому наборубудут относиться цвета, занимающие наибольшую площадь, в браузере оно бу-дет выглядеть намного чище и привлекательнее. Эту палитру часто называютбезопасной (browser-safe palette). О ней мы уже упоминали выше.

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

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

Изменение размеров изображения. Этот метод оптимизации основан на изме-нении размеров рисунка. Его нельзя применять к обычным рисункам, но оночень хорошо подходит для рисунков, состоящих из элементов типа линий иоднородных областей. Допустим, нам понадобился рисунок, представляющийсобой черный квадрат размером 100x100 пикселов. Для уменьшения размерафайла достаточно сделать так называемый однопикселный, т.е. размером 1x1пиксел, рисунок GIF черного цвета и, как обычно, вставить его в HTML-файл, норазмеры картинки указать те, что нужны нам — 100x100. О том, как указыватьразмеры рисунка, мы поговорим в следующих разделах. Браузер сам растянетнаш пиксел до нужных размеров, и, таким образом, будет достигнута значитель-ная экономия в объеме файла. Подобным же образом можно использовать одно-пикселные рисунки других цветов, но наибольшую пользу может принестипрозрачное однопикселное изображение GIF. С его помощью удобно задавать«пустышки» на страницах, абзацные отступы, фиксировать минимальную ширинуили высоту таблицы и делать другие полезные вещи.

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

18


Фрагментарная оптимизация. Фрагментарная оптимизация применяется в слу-чае, если у вас есть некоторое большое изображение, содержащее сильно отли-чающиеся по количеству цветов области. В этом случае изображение можноразрезать на фрагменты и поместить их в таблицу, тогда в браузере оно будетвыглядеть как единое целое. Теперь каждый фрагмент исходного рисунка опти-мизируется отдельно. Для фрагментов, содержащих мало цветов, вполне можетхватить палитры в 8 или 16 цветов, а для богатых цветами фрагментов можноиспользовать полную палитру в 256 цветов или сохранять их в формате JPEG.Этот способ позволяет уменьшить объем, занимаемый исходным файлом, при-мерно раза в 2-3, в зависимости от конкретного изображения. Кроме того,изображение будет появляться на экране более равномерно, так как все фраг-менты будут загружаться параллельно. Однако, если количество фрагментовпревысит 10, то возможного выигрыша не получится, так как каждый фрагментдолжен будет хранить свою копию палитры и служебной информации.

Оптимизация .«прозрачных» изображений. Формат GIF позволяет сохранятьтак называемые «прозрачные» изображения. На самом деле, GIF не поддержива-ет прозрачность в изображениях - альфа-канал - он лишь позволяет назначитьодному любому цвету в палитре атрибут прозрачности. Если браузер рисует наэкране такое изображение, то, встречая «прозрачный» пиксел, он просто игно-рирует его и не показывает на экране. Само по себе это хорошо, но в случае ис-пользования метода сглаживания краев изображения (anti-aliasing) и последую-щего сохранения в формате GIF, возникает проблема появления ореола вокругпрозрачного изображения в случае, если GIF показывается на фоне, отличном оттого, на котором происходило сглаживание и который стал прозрачным. Един-ственным способом уменьшения проявления этого эффекта является назначениепрозрачности цвету, близкому к цвету фона, на котором будет использоватьсяGIF, и проведение сглаживания на этом же фоне.

Использование чересстрочной развертки. Версия GIF89a позволяет сохра-нять файлы с использованием чересстрочной развертки. При использовании это-го способа строчки, составляющие изображение, перемежаются, и при загрузкебраузер вначале показывает каждую 8 строчку, потом каждую 4, каждую 2, и,наконец, загружается полное изображение. При этом посетитель вашей Web-страницы сможет понять, что же нарисовано на данной картинке, не дожидаясьее полной загрузки. Это очень удобно.

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

19


Архив с примерами для книги, можно загрузить по ссылке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


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

Здесь Вы узнаете о нашей деятельности, опрограмлшых продуктах нашей компании и об

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

"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=IIspisok.html"ximg src=CLOUD.GIF border=lx/a>

означает, что рисунок CLOUD.GIF служит ссылкой для перехода на страницуspisok.html.

Так как ссылка на рисунок находится между тегами <centerx/center>,то рисунок выравнивается по центру Web-страницы.

21


Операционная система 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



Здесь Вы узнаете о нашей деятельности, опрограммных продуктах нашей компании и об


| 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


бражать смысл рисунка, заменяя собой изображение. Атрибут alt желательно«спользовать еще и потому, что многие пользователи отключают в браузерефункцию отображения рисунков, чтобы ускорить загрузку Web-страниц. В такомслучае пользователь должен видеть альтернативный текст, заменяющий рисунок.Кроме того, существуют специальные речевые браузеры для незрячих, в кото-рых текст выводится голосом.

Вставим в тег <img> файла geoton.html атрибут alt со значением "Областьнашей деятельности", которое в данном случае раскрывает смысл рисунка иссылки. Значение атрибута alt должно быть заключено в кавычки. Этот текстбудет появляться в браузерах, не позволяющих показывать изображения наместе рисунка.

> Отредактируйте файл geoton.html, вставив в тег <img> относительную ссыл-ку на файл с рисунком CLOUD.GIF, находящий в папке Web вашего компью-тера, и атрибут alt="Область нашей деятельности" так, чтобы элемент,содержащий указанный тег, принял следующий вид:

<centerxa href=spisok.htmlximg src=CLOUD.GIF border=lalt="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


Как видите, даже когда рисунок отображается в браузере, значение атрибута altвыводится на экран при установке указателя мыши на изображении. Это значит,что с помощью данного атрибута можно также определять подписи для рисунков.

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

v В браузере Internet Explorer выберите команду меню Сервис * Свойстваобозревателя (Tools * Internet Options). На экране появится диалог Свойст-ва обозревателя (Internet Options).

>• В браузере Internet Explorer щелкните мышью на ярлыке Дополнительно(Advanced), чтобы перейти на соответствующую вкладку.

х В браузере Internet Explorer сбросьте флажок Отображать рисунки (Showpictures). Чтобы найти его, воспользуйтесь вертикальной полосой прокрутки(Рис. 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).

>• Нажатием кнопки ОК закройте диалог Свойства обозревателя (InternetOptions) или Параметры (Preferences).

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

25


>• Обновите изображение в окне браузера, нажав соответствующую кнопку напанели инструментов. Вы увидите, что вместо рисунка в рамке отображаетсятекст, который определен атрибутом 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


•* '" & Щ (Я 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шги11tiki .£dil VKJW Favorites lools M»lfi

- (Working OlHirml

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

»'i [Q C:\WabViBolon.hlinl


Здесь Вы узнаете о нашей деятельности^ опрограммных продуктах нашей компании и об


£) Dorve

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

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

27


графикой не уменьшается, и время их загрузки не изменяется. Уменьшать раз-меры изображения нужно в графическом редакторе. При увеличении же мас-штаба рисунка его качество обычно заметно ухудшается. Следует помнить, чтоатрибуты 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


Так как данный файл записан в стандартном формате JPEG, то в отличие от ри-сунка, сохраненного в формате GIF89a, вывод на экран при загрузке через Интер-нет будет происходить горизонтальными полосами. И до окончания загрузкитрудно определить содержание рисунка. Если бы данный рисунок был записан впрогрессивном формате JPEG, то изображение появлялось бы сразу, целиком, вгрубой форме и постепенно бы прояснялось. Очевидно, такой характер загрузкибыл бы удобней, так как позволил бы быстрее оценить изображение. Идеальнойбыла бы возможность быстро знакомиться с содержимым графических файлов, незагружая их полностью. В некоторых форматах для этого используется умень-шенная копия изображения, вставляемая в тот же файл и предназначенная длябыстрого ознакомления с его содержимым.

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

<а href="Адрес_1Ж1«и>Здесь</а>Вы можете увидеть фотографию

В этом случае пользователь сам решает - смотреть или не смотреть данныйрисунок.

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

' с тем, технология JPEG замечательна именно тем, что позволяет достичь серь-езного выигрыша в сокращении размера при минимально заметных для глазапотерях в качестве.

Еще один способ ускорения загрузки графики большого размера - нарезать изо-бражение на части и поместить отдельные фрагменты в HTML-таблицу, где онибудут восприниматься как единое целое. Каждый такой фрагмент можно опти-мизировать индивидуально, применив наиболее подходящие для него параметры.При этом размер фрагментированного рисунка станет меньше, чем неразрезан-ного, что значительно ускорит его появление на экране. Для графики, сохраняе-мой в формате GIF, можно также оптимизировать палитру каждого фрагмента,что иногда позволяет уменьшить объем файла в 2-3 раза.

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

29


представлен в формате 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=yellowalink=redbackground=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-redbackground-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


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

нашей компании и обе мы производим

программнаоборуд

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

Еще один способ определения фона - с помощью языка каскадных таблиц сти-лей CSS. Как вы сейчас увидите, этот способ предоставляет разработчику Web-страниц значительно больше возможностей управления фоновым изображением.Чтобы удобнее было знакомиться с ними, вставим рисунок BG.JPG в качествефонового изображения второй Web-страницы нашего сайта, сохраненной в файлеspisok.html. воспользовавшись языком каскадных таблиц стилей.

Мы будем использовать вариант определения стилей, при котором описаниестилей располагается внутри заголовка Web-документа <head>.. .</head> воткрывающем теге <style>. В таком случае вы можете использовать описан-ные стили для HTML-элементов всей страницы.

В теге <style> обязательно должен присутствовать атрибут type=ntext/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


<title>4eM мы 3aHMMaeMCH?</title>


</style>

</head>

Следующее, что нужно сделать - это присвоить стили элементам HTML. В общемслучае присвоение стиля элементу выглядит так:

название_элемента { свойство: значение },

где название_элемента - это имя HTML-тега, например, hi, p, body, а пара-метры в фигурных скобках - перечень свойств элементов и присвоенных имзначений. Например, чтобы указать, что все абзацы, описываемые тегами<р>...</р> текущего Web-документа, должны иметь полужирное курсивноеначертание шрифта с размером 150% и выравнивание по центру, следует при-своить этому элементу стили следующим образом:

<style type=1Itext/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.JPGn). На основании сказанного, элементу body втеге <style> нужно присвоить следующий стиль:

body { background-image: url("BG.JPG") }

>• Вставьте пустую строку между открывающим тегом <style> и закрываю-щим тегом </style> и введите указанный код, определяющий стиль элементаbody.

Элемент HTML <style>... </style> должен выглядеть следующим образом:» 4


body { background-image: url("BG.JPG") }

</style>

32


>• Сохраните файл 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> принял следующий вид:


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 выровняетрисунок по центру страницы как по горизонтали, так и по вертикали.

332 - 6645


>• Добавьте в описание свойств элемента body файла spisok-html свойствоbackground-position: center center. Элемент <style>...</style>вэтом файле должен принять следующий вид:


body { background-image: ur l ( "BG.JPG") ; 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: ur l ( "BG.JPG"); 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


«Прозрачная» графикаВо второй версии графического формата 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=yellowalink=red background=BG.G!F">

> Сохраните файл geoton.html и откройте его в браузере.

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

>• Закройте браузер и редактор Блокнот (Notepad).

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

35


Графический текст

VABANf

Многие Web-дизайнеры широко используют в своих проектах графическийтекст. Это обычно небольшие надписи, состоящие из одного или нескольких слов,оформленные с применением различных эффектов и сохраненные в файле одногоиз графических форматов. Такой графический файл с текстом вставляется в Web-документ как рисунок или как фон и используется в качестве заголовков, назва-ний, логотипов, кнопок и т.д. На Рис. 1.12 показаны примеры таких надписей.Хотя подобная графика и увеличивает объемWeb-страниц и время их загрузки, разумноеее использование придает сайту привлека-тельный профессиональный вид.

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

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

книгаРис. 1.12. Графический текст

А АС приемами и способами создания графики и,в частности, графического текста ады познако-мимся в следующей главе.

Рис. 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-графике значи-тельно повысились, дизайнеры и разработчики ориентируются именно на AdobePhotoshop, как на одно из основных средств создания графики для World Wide Web.До появления версии Adobe Photoshop 5.5 программа Adobe ImageReady, ранеераспространявшаяся отдельно, считалась неким придатком Adobe Photoshop с оченьограниченным набором функций подготовки изображений для Web. Однако,учитывая возрастающие требования, компания Adobe System решила отказатьсяот дальнейшего раздельного распространения этих двух продуктов и слить их водин пакет - Adobe Photoshop. Новая концепция «два в одном» гарантирует со-вместимость программ, знакомый интерфейс и, в конечном счете, значительноесокращение времени подготовки графики. По сути, это - единый комплекс, раз-деленный на две программы только для гибкости. Обе программы имеют одина-ковые рабочие окна и предлагают много одинаковых инструментов. Между про-граммами легко переключаться с помощью специальной кнопки и, таким обра-зом, быстро переходить от создания и обработки изображений к их подготовкеи оптимизации для Web. Все операции, выполненные в каждой из программ,сохраняются и, при необходимости, их можно отменить после переключения.

Adobe Photoshop и Adobe ImageReady хорошо дополняют друг друга. И мы бу-дем рассматривать эти программы совместно: обрабатывать фотографии, созда-вать графические кнопки, баннеры и другие изображения Для Web-сайта в Adobe


Photoshop, а затем переключаться в Adobe ImageReady, чтобы оптимизироватьполученные изображения, разрезать их на фрагменты, «оживлять графику» и т.п.

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

Практические алгоритмы этой главы предполагают использование последнихверсий программ - Adobe Photoshop CS и Adobe ImageReady CS. Эти версии яв-ляются следующими после версий Adobe Photoshop 7.0 и Adobe ImageReady 7.0.

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

Начнем работу с Adobe Photoshop.

> Для запуска программы нажмите кнопку Пуск (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 primaryScratch volume to be on a different volume, preferably on a differentphysical 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 defaultsettings.

Do you wish to customise your color settings new?

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

В этом диалоге программа сообщает, что цветовая конфигурация будет установ-лена по умолчанию. Задача настройки цветовой конфигурации состоит в том,чтобы, по возможности, сохранить идентичность цвета на всех стадиях его об-работки и приблизить видимые на экране цвета к тем, которые будут напечата-ны принтером. Если вы желаете выполнить собственную настройку цвета, тоследует нажать кнопку Yes (Да), а чтобы принять установки по умолчанию -кнопку No (Нет). При необходимости вы сможете выполнить настройку цветапозднее, выбрав команду меню Edit» Color Settings (Правка * Настройка цвета).

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

Если сбросить флажок Show this dialog at startup (Показывать этот диалог призапуске), то диалог больше появляться не будет.

39


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


Первая строка рабочего окна программы Adobe Photoshop - строка заголовка.В ней отображается название программы и слева от него значок системного меню,команды которого предназначены для перемещения, изменения размеров ипредставления окна, а также для его закрытия. У правого краястроки заголовка располагаются три кнопки: [Г] - для свора-.чивания, [В] - для разворачивания и [х] - для закрытия окнапрограммы.

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

Ниже полосы меню расположена панель параметров (OptionsBar), на которой в процессе работы будут отображаться дос-тупные для изменения параметры выбранного инструмента.

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

шагРис. 2.6. Панельинструментов

(Tools)

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

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

1 Здесь и далее: латинская буква рядом с названием, в данном случае (V) - это клавиша быстроговыбора инструмента.

41


Большинство инструментов панели привычны для художника: кисть (BrushTool (В)), карандаш (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 LassoTool (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 ErazerTool (Е) (Инструмент «Волшебный ластик» (Е)) - позволяющий, указавлюбую точку на рисунке, сделать прозрачными остальные области с такимже цветом и (jPy - Background Erazer Tool (E) (Инструмент «Фоновый

42


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

- Blur Tool (R) (Инструмент «Размытие» (R)) - позволяет смягчать слишкомрезкие границы или области в изображении, уменьшая контраст междупикселами. Включающийся этой же кнопкой инструмент | Д] - SharpenTool (R) (Инструмент «Резкость» (R)) повышает четкость изображения, де-лая слишком мягкие границы более резкими, а инструмент Щ - SmudgeTool (R) (Инструмент «Палец» (R)) - имитирует размазывание пальцемсвежей краски.

-Ра1г| Selection Tool (А) (Инструмент «Выбор контура» (А)) - позволяетвыбирать контуры. Этой же кнопкой включается инструмент [W] - DirectSelection 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


\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|] - CustomShape Tool (U) (Инструмент «Заказная форма» (U) - для рисованияфигур, форма которых выбирается из предлагаемых образцов.

] - Eyedropper Tool (I) (Инструмент «Пипетка» (I)) - служит для выбора цветана рисунке и переопределения основного и фонового цветов. Этой жекнопкой включаются инструменты |t/J - Color Sampler Tool (I) (Инстру-мент «Образец цвета» (I)), который позволяет перемещать/удалять образцыцвета и |< | - Measure Tool (I) (Инструмент «Измеритель» (I)), который по-зволяет определять размеры линий и углов.

| - Zoom Tool (Z) (Инструмент «Масштаб» (Z)) - используется для увеличенияи уменьшения изображения на экране.

44


Под указанными кнопками на панели инструментов (Tools) расположены дваквадрата с образцами цвета. Левый верхний служит для установки и отображаетцвет переднего плана (Set foreground color), а правый нижний - цвет фона (Setbackground 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 - Editin 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 постоянно находятся панель инструментов (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


(Инструмент «Выбор области карты навигации» (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 Im-ageReady, его можно закрыть, так как очередные практические шаги мы будемвыполнять в Adobe Photoshop.

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

Основная часть рабочей области Adobe Photoshop пока ничем не заполнена.Это, однако, не значит, что на ней можно что-либо нарисовать. У вас не будетработать ни один инструмент, пока не будет создан новый документ или же от-крыт существующий.

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

>• Выберите команду меню File » New (Файл * Новый) или нажмите комбина-

цию клавиш Ictrl l+IPyl. На экране появится диалог New (Новый) (Рис. 2.8).

Name: |untitted-l|

" Preset: (clipboard . Q•

Width: 1 800 || pixels [3

Height:] 600 || pixels'"" "

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

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

Background Contents: | White 0

$ Advancod

I OK |

Reset 1

Save Preset,,. |

Getete Preset... |

1.37M

,

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

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

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

В следующих разделах этой главы мы подготовим баннер - рекламный рисунок -для рекламы сайта в Интернете. Как правило,'баннер - это графическое изобра-жение прямоугольной формы в формате GIF или JPEG. Баннер помещается на

48


Web-странице и имеет ссылку на сайт рекламодателя. В последнее время в связис бурным развитием баннерной рекламы в Интернете, предпринимаются попыт-ки стандартизировать размеры баннеров. Первым шагом стандартизации сталирекомендации по размеру баннеров, предложенные Internet Advertising Bureau(Бюро рекламы в Интернете) (http://www.iab.net/) совместно с CASTE (The Coali-tion for Advertising Supported Information & Entertainment) (Коалиция рекламнойподдержки информации и развлечений), приведенные в таблице ниже.

Размер баннера в пикселах

468x60

234x60

88x31

120x90

120x60

120x240

. 125x125

728x90

Тип баннера

Full Banner (Стандартный баннер)

Half Banner (Баннер половинного размера)

Micro Bar (Микро полоса)

Button 1 (Кнопка 1)

Button 2 (Кнопка 2)

Vertical Banner (Вертикальный баннер)

Square Banner (Квадратный баннер)

Leaderboard («Перетяжка» вверху страницы)

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

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

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

v В поле ввода Width (Ширина) введите ширину стандартного баннера -468 пикселов.

49


> В поле ввода 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


>• Если необходимо, повторно откорректируйте размер окна так, чтобы полосыпрокрутки отсутствовали (Рис. 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


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

>• Отпустите левую кнопку мыши. На рисунке будет создана прямоугольнаяобласть выделения (Рис. 2.11).

ffSUnlitled-1 @ 100% (RGB/8)

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

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

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

ля мыши следует удерживать нажатой клавишу I Alt I. Чтобы нарисовать квадрат

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

нажатой клавишу lshifll.

Для окончания создания прямоугольной фигуры следует обвести контур выде-ления или заполнить выделенную область цветом. Но предварительно цвет нуж-но выбрать. Adobe Photoshop располагает несколькими способами выбора цвета.Наиболее простой - выбор из образцов палитры Swatches (Каталог).

>• Щелкните мышью на ярлыке Swatches (Каталог)в среднем окне палитр у правого края экрана.Если данный ярлык отсутствует, выберите коман-ду меню Window * Swatches (Окно * Каталог).На экране появится палитра,Swatches (Каталог)(Рис. 2.12).

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

угольника. Рис 2.12. Палитра

> Установите указатель мыши на четвертом слева Swatches (Каталог)в верхнем ряду образце голубого цвета. Приэтом указатель мыши примет форму пипетки , и вы увидите всплывающуюподсказку с названием цвета - RGB Cyan (Голубой RGB).

53


> Щелкните мышью в этом месте. Цвет будет выбран и появится на образцецвета переднего плана (Set foreground color) панели инструментов (Tools).

Чтобы выбрать цвет для фона, следует щелкнуть мышью на образце палитры

Swatches (Каталог) при нажатой клавише I Alt 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).

На данной палитре представлены цветовые полоски сползунковыми регуляторами в соответствии с дейст-вующим цветовым режимом RGB. Напомним, что вцветовой модели RGB любой цвет образуется смеши-ванием трех основных компонентов - красного, зеле-ного и синего. Каждый ползунковый регулятор по-зволяет управлять одной из составляющих цвета: R -красной, G - зеленой, В - синей. Количество каждойцветовой составляющей в цвете определяется целымчислом от 0 до 255 и отображается в полях ввода

SEES 9Ь!

Рис. 2.14. ПалитраColor (Цвет)

54


справа от ползунковых регуляторов. Минимальное значение - 0 - означает полноеотсутствие составляющей, а максимальное - 255 - максимальную ее яркость. Цвет,все три составляющие которого равны нулю, является абсолютно черным. Если жевсе три составляющие равны 255, то цвет - белый.

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

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

>• Переместите ползунковые регуляторы G (Зеленый) и В (Синий) влево так,чтобы в полях ввода отобразились значения 0 (ноль). На образцах цветапереднего плана (Set foreground color) на панели инструментов (Tools) и впалитре Color (Цвет) вы увидите выбранный черный цвет.

Выбрать цвет вы можете также, щелкнув мышью, указатель которой приметформу пипетки, на цветовой полосе в нижней части палитры Color (Цвет).

Установить черный цвет переднего плана и белый цвет фона, т.е. цвета по умол-чанию, можно также щелкнув мышью на значке В - Default Foreground andBackground Colors (D) (Цвета переднего плана и фона по умолчанию) панелиинструментов (Tools).

Теперь можно выполнить обводку контуравыделения черным цветом.

>• Выберите команду меню Edit * Stroke(Правка » Обвести). На экране появитсядиалог Stroke (Обводка) (Рис. 2.15).

В поле ввода Width (Толщина) следуетуказать толщину обводки. Оставим пред-лагаемое по умолчанию значение 1 рх (1пиксел) без изменения.

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

Width: 1 1 рх |

Color: ЦЩ

1 О Inside <s> tenter О Outside

Mode: [Normal 3

QpacitY:| 100 [%

О Ereseive Transparency

I OK |

I Cartel |

Puc. 2.15. Диалог Stroke (Обводка)

55


Группа переключателей Location (Положение) позволяет выбрать положениелинии обводки относительно контура выделения: Inside (Внутри), Center (Поцентру), Outside (Снаружи).

Открывающийся список Mode (Режим) поз-воляет выбрать режим наложенияпикселов.

В поле ввода Opacity (Непрозрачность) можно указать уровень непрозрачностицвета. Значение 100% означает полную непрозрачность.

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

> Выберите команду меню Select •Deselect (Выделение • Отменить выделе,-ние), чтобы снять выделение. Изображение в окне документа примет вид какна Рис. 2.16.

UnUUed-l @100Z (RGB/81

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

Нарисуем справа от прямоугольника эллипс. Для создания области выделения ввиде эллипса или круга используется инструмент [ОД - Elliptical MarqueeTool (M) (Инструмент «Эллиптическая область» (М)). Предварительно егоследует выбрать.

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

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

>• Не отпуская клавишу I Alt 1. щелкните мышью на кнопке [[!],( - RectangularMarquee Tool (М) (Инструмент «Прямоугольная область» (М)). Будет выбранинструмент (ОД - Elliptical Marquee Tool (M) (Инструмент «Эллиптическаяобласть» (М)), и вы увидите его нажатую кнопку.

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

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

•i

>• Установите указатель мыши в окне документа, правее верхнего правого угланарисованного прямоугольника.


56


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

> Отпустите левую кнопку мыши. Эллиптическая область выделения будетзакреплена (Рис. 2.17).

"Й, Untitled-1 & 100* (RGB/8)

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

Чтобы нарисовать выделенную область в виде круга, следует при перемещении

мыши удерживать нажатой клавишу ll s h i f lb Для рисования эллиптической области

•от центра необходимо при перемещении указателя мыши удерживать нажатой

клавишу II Alt I.

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

>• Щелкните мышью на образце цвета переднего плана (Set foregroundcolor) на панели инструментов (Tools). На экране появится диалог ColorPicker (Палитра цветов) (Рис. 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


В цветовой модели HSB цвет описывается тремя составляющими - цветовымоттенком Н (Hue), насыщенностью S (Saturation) и яркостью В (Brightness).

Спектральная шкала - узкая вертикальная полоса в центральной части диалога -отображает цветовой диапазон включенной цветовой составляющей: Н (Цвето-вого оттенка), S (Насыщенности), В (Яркости), R (Красной), G (Зеленой),В (Синей). По умолчанию включена составляющая Н (Цветовой оттенок).

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

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

>• Установите переключатель S (Насыщенность). Вертикальная полоса отобра-зит насыщенность в диапазоне от 0% внизу до 100% вверху.

>• Переместите ползунок регулятора вертикальной полосы максимально вверх.Теперь цветовое поле отображает по горизонтали спектр цветовых оттенков,а по вертикали - яркость.

>• Установите переключатель R (Красный), включив таким образом краснуюсоставляющую. На спектральной шкале будет представлен цветовой диапа-зон красной составляющей от 0 в нижней точке до 255 - в верхней, а в цвето-вом поле - соответственно диапазон синей составляющей по горизонтальнойоси и зеленой - по вертикальной.

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

>• Выберите указанным способом любой цвет для заливки эллипса.

Справа от вертикальной полосы, вверху, представлены два небольших цветовыхполя: в нижнем отображается текущий цвет, а в верхнем - полученный в резуль-тате выбора. I

Если выбранный цвет не входит в палитру Web, то справа от этих полей появитсяпредупреждающий значок в виде куба ©, а под значком - образец ближайшегоцвета из Web-палитры. Чтобы выбрать безопасный цвет Web, достаточно щелк-нуть мышью на образце или на значке ф. Но сейчас этого делать не следует.Цвета будут заменены в процессе оптимизации. Напомним, что безопасная Web-палитра содержит 216 цветов, которые гарантировано отображаются всеми брау-зерами во всех операционных системах.

58


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

В цветовой модели CMYK цвет определяется четырьмя основными составляю-щими: голубой (Cyan), пурпурной (Magenta), желтой (Yellow) и черной (Black).Эта модель используется преимущественно для создания изображений, предна-значенных для полиграфического исполнения. Ее цветовой охват значительноменьше, чем цветовой охват модели RGB. Если изображение создается для Web,т.е. для просмотра на экране монитора, то использовать цвета, входящие в охватмодели CMYK нет необходимости.

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

Если установить флажок Only Web Colors (Только цвета Web), то на спектраль-ной шкале и в цветовом поле будут отображаться только безопасные цвета Web.

Нажатие кнопки Custom (Пользовательские) вызовет на экран диалог CustomColors (Пользовательские цвета) (Рис. 2.19), в котором вы можете выбрать.под-ходящий цвет из различных цветовых, библиотек.

Туре з color name toselect it in the cdor list

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

> Нажав кнопку ОК, закройте диалог Color Picker (Палитра цветов). Выбран-ный цвет отобразится на образцах в палитре Color (Цвет) и на панели инст-рументов (Tools).


Зальем цветом выделенную эллиптическую область следующим образом.

>• Выберите команду меню 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 (Белый) и другие возможности.

>• Оставив установленный по умолчанию цвет переднего плана (ForegroundColor), закройте диалог Fill (Запивка) нажатием кнопки ОК. Выделенная об-ласть будет заполнена выбранным цветом.

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

>• Не отменяя выделения эллиптической области, выберите команду меню Select *Modify • Contract (Выделение * Модификация * Сжать). На экране появитсядиалог Contract Selection (Сжатие выделения) (Рис. 2.21).

Contract Selection

Contract By: |l

£3|

Joixeb 1 OK |

| Cancel |

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

> В поле ввода Contract By (Сжать на) введите 16 пикселов.

> Нажав кнопку ОК, закройте диалог Contract Selection (Сжатие выделения).Эллиптическая область выделения будет сжата на 16 пикселов.

Чтобы расширить область выделения следует выбрать команду меню Select *Modify * Expand (Выделение * Модификация * Расширить).


Зальем сжатую выделенную область белым цветом фона.

> Выберите команду меню Edit * Fi l l (Правка * Залить). На экране появитсядиалог Fi l l (Заливка).

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).

Рис. 2.23. ПалитраHistory (События)

В этой палитре вы видите перечень выполненных при работе над документомопераций. Каждая операция обозначена миниатюрой и названием. Последняявыполненная операция - 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


> Щелкните мышью на операции Deselect (Отмена выделения). Следовавшие заней две операции Elliptical Marquee (Эллиптическая область) и Fill (Заливка)будут отменены и выделенный эллипс исчезнет с рисунка.

Любой объект рисунка можно удалить также с помощью инструмента f^F| -Eraser Tool (Е) (Инструмент «Ластик» (Е)). Его действие подобно ластику изаключается в закрашивании рисунка цветом фона.

Удалим оставшийся на рисунке прямоугольник.

>• Нажмите кнопку \ff\ - Eraser Tool (Е) (Инструмент «Ластик» (Е)) на панелиинструментов (Tools), чтобы выбрать этот инструмент.

> Установите указатель мыши у левого верхнего угла прямоугольника в окнедокумента. Указатель мыши примет вид круга.

Форма этого круга и его диаметр - 13 пикселов - соответствуют установленнойпо умолчанию кисти, которая будет закрашивать рисунок цветом фона. Но такоймаленькой кистью работать будет неудобно, поэтому увеличим размер кисти.

Обратите внимание, что после выбора инструмента [ | - Eraser Tool (E) (Инст-румент «Ластик» (Е)) на панели параметров (Options Bar), находящейся под по-лосой меню, отображаются параметры этого инструмента (Рис. 2.25). У левогокрая панели вы видите значок выбранного инструмента. Слева от этого значканаходится поле Brush (Кисть) с образцом активной кисти.

[£ ' Brush: * Opacity; ПоО% I > I Flow; I 100%ТП ft Er»s« to History

Рис. 2.25. Панель параметров инструмента Eraser Tool(E)(Инструмент «Ластик» (Е))

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

Master Diameter

Hardnessi

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

63


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

> В поле ввода 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


> Нажмите и удерживайте левую кнопку мыши.

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

> Отпустите левую кнопку мыши, когда прямоугольник будет полностью удален.

Итак, мы познакомились с приемами рисования и удаления простых объектов.Теперь можно приступить к созданию баннера.

Начинаем изготовление баннераБаннер, который мы создадим, будет состоять из простого логотипа компанииГЕОТОН и двух сменяющих друг друга анимированных надписей, приглашаю-щих посетить сайт компании. Начнем с подготовки логотипа, который, в своюочередь, будет состоять из трех объектов, размещенныходин внутри другого: текста, эллипса и прямоугольника(Рис. 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 MarqueeTool (М) (Инструмент «Прямоугольная область» (М)).

Adobe Photoshop позволяет создавать области выделения заранее заданных раз-меров, для указания которых и определения других свойств объекта использует-ся панель параметров (Options Bar) (Рис. 2.29). Панель с параметрами каждого

653 - 6645


инструмента всегда открывается при выборе инструмента. Элементы управле-ния этой панели зависят от выбранного инструмента.

IftCll F«>b.ri|0p» 1 riAnli-»li»!«d Slylm iNornul _JHI Width: «* Ч**1'

Puc. 2.29. Панель параметров инструмента Rectangular MarqueeTool (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


мыши, координаты курсора 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: О!

Mode: | Actual Color Е]

Mode: | CMYK Color El

Buler Units: | Centimeters [»]

П Show 16 bit values

[„.l.... -.-...,,'

| .Cancel |

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

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

Установка флажка Show 16 bit values (Показывать 16-битные значения) требу-ется только тогда, когда для рисунка выбрана цветовая модель RGB с 16 битамина каждый цвет. '

>• В нижнем открывающемся списке Ruler Units (Единицы) выберите Pixels(Пикселы).

67


>• Закройте диалог Info Options (Параметры палитры «Информация»), нажавкнопку ОК. ,

Теперь в палитре Info (Информация) координаты указателя мыши и размерыобъектов будут отображаться в пикселах.

Создадим прямоугольную область выделения заданного размера и зальем еецветом.

>• Установите указатель мыши у левого верхнего угла окна документа так,чтобы в палитре Info (Информация) отобразились его координаты: Х:5, Y:5.

>• Щелкните мышью в этой точке. В окне документа появится прямоугольнаяобласть выделения, а в палитре Info (Информация) отобразятся ее размеры:W:150,H:50.

>• Залейте созданную прямоугольную область выделения выбранным ранее цве-том, воспользовавшись инструментом [ ] - Paint Bucket Tool (G) (Инструмент«Заливка» (G)).

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

Теперь нам нужно создать внутри прямоугольника эллиптическую область сразмерами горизонтальной и вертикальной осей соответственно 140 и 40 пиксе-лов и залить ее белым цветом фона.

; нажмите кнопку [О] - RectangularMarquee 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(Информация).


Зальем область выделения белым цветом фона.

> Выберите команду меню Edit * Fill (Правка * Залить). На экране появитсядиалог Fill (Заливка).

> Убедитесь, что в открывающемся списке Use (Использовать) выбраноBackground Color (Цвет фона).

> Закройте диалог Fill (Заливка) нажатием кнопки ОК. Эллиптическая областьвыделения будет залита белым цветом.

i>• Отмените выделение, выбрав команду меню Select » Deselect (Выделение »

Отменить выделение). Изображение примет вид, как на Рис. 2.32.

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

Так как наш баннер создается на белом фоне, то можно сделать по его перимет-ру тонкую рамку, чтобы границы баннера были видны, если фон Web-страницыбудет белым2. Для этого следует выделить весь рисунок.

>• Выберите команду меню Select * АИ (Выделение * Все). Весь рисунок в окнедокумента будет выделен, и вдоль его краев появится рамка выделения.

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

> Выберите команду меню Edit » Stroke (Правка * Обвести). На экране появитсядиалог Stroke (Правка » Обводка).

>• Не изменяя предлагаемых параметров, закройте этот диалог нажатием кноп-ки ОК.

> Отмените выделение документа, нажав комбинацию клавиш Ictrl 1+1ГР|. Вы

увидите, что вокруг рисунка появилась тонкая рамка.

Прежде чем продолжить создание баннера, сохраним рисунок, чтобы не поте-рять его при возможных сбоях в работе компьютера или отключении электропи-тания. Мы уже говорили о том, что для использования изображения на Web-странице оно должно быть сохранено в одном из Web-форматов: GIF, JPG илиPNG. Однако промежуточные сохранения следует выполнять в собственномформате Adobe Photoshop - PSD, так как только в данном формате можно со-хранить изображение без потери качества. Это позволит при необходимостивернуться к редактированию отдельных объектов.

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

69


>• Выберите команду меню 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««JColor: П 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 » SaveAs (Файл » Сохранить как).

Для закрытия текущего документа используется команда меню File » Close(Файл • Закрыть) или кнопка [х] в правом верхнем углу окна документа.Открыть ранее сохраненный рисунок можно с помощью команды меню File »

Open (Файл » Открыть) или комбинации клавиш 1Г

70


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

I 100% |> |

FiB: I 100% I > I

Наша следующая задача - добавить в создаваемый логотип надпись ГЕОТОН.Когда в рисунок добавляется текст, он помещается на новый отдельный слой.Слои дают возможность редактировать отдельные элементы изображения неза-висимо друг от друга. Вы можете рисовать, редактиро-вать, вклеивать и перемещать содержимое любогослоя, не изменяя при этом объекты, расположенныена других слоях. Управление слоями осуществляется спомощью специальной палитры Layers (Слои).

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

О. а а в. а а

Рис. 2.34. ПалитраLayers (Слои)

В данный момент наш документ состоит из одного основного слоя, который на-зывается Background (Фон). Этот слой создается при создании нового документа.В палитре Layers (Слои) каждому слою соответствует миниатюра и имя. Миниа-тюра слева от имени слоя в уменьшенном виде отображает его содержимое. Всеминиатюры динамически обновляются в процессе редактирования слоев.

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

Остальные элементы управления палитры Layers (Слои) мы рассмотрим позд-нее, а сейчас добавим в логотип надпись - название компании ГЕОТОН. Всенадписи на рисунках выполняются с помощью инструмента [Т] - HorisontalType Tool (Т) (Инструмент «Горизонтальный текст» (Т)).

>• Нажмите кнопку [Т] - Horisontal Type Tool (Т) (Инструмент «Горизонталь-ный текст» (Т)), чтобы включить этот инструмент. На панели параметров(Options Bar) отобразятся элементы управления данного инструмента(Рис. 2.35), с помощью которых можно определить параметры текста.

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

(Инструмент «Горизонтальный текст» (Т))

Кнопки [Щ[] - Change the text orientation (Изменить ориентацию текста) позволяетизменить ориентацию текста с горизонтальной на вертикальную и наоборот.

71


В первом слева открывающемся списке Set the font family (Установка семей-ства шрифтов) на панели параметров (Options Bar) выберите один из имею-щихся на вашем компьютере шрифтов, лучше из группы Arial.

Установите указатель мыши на рисунке в центре эллипса. Указатель мышипримет форму |£|.

Щелкните мышью в этой точке. Появится текстовый курсор. Вид панелипараметров (Options Bar) изменится (Рис. 2.36).

Рис. 2.36. Панель параметров инструмента Horisontal Type Tool (Т)(Инструмент «Горизонтальный текст» (Т))

> Введите в окне документа надпись: ГЕОТОН. Начало этой надписи будет по-мещено в точку ввода, т.е. в ту точку, в которой вы щелкнули мышью, так какпо умолчанию на панели параметров (Options Bar) нажата кнопка [SI - Leftalign text (Левостороннее выравнивание текста).

Теперь выделим введенный текст и изменим начертание, размер и другиепараметры.

>• Нажмите и удерживайте клавишу |[shifti.

> Не отпуская клавишу [shift], нажмите 6 раз клавишу Р-), чтобы выделить вве-

денную надпись.

>- Отпустите клавишу [s™J.

Теперь, когда текст выделен, можно изменить его параметры.

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

> Во втором слева открывающемся списке Set the font style (Установка начер-тания шрифта) выберите начертание шрифта ВоИ Italic (Наклонный полу-жирный). Перечень доступных начертаний зависит от-выбранной гарнитуры.

> В третьем слева открывающемся списке Set the font size (Установка размерашрифта) выберите 18 pt или 20 pt в зависимости от шрифта.

Три кнопки в правой части панели параметров (Options Bar) позволяют опреде-лить положение текста относительно точки вставки: [iE] - Left align text (Лево-

72


стороннее выравнивание текста) - устанавливает левый край текста в точкувставки; [Ж] - 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 Characterand Paragraph palletes (Показать/скрыть палитрысимволов и абзацев) позволяет вызвать на экран допол-нительные палитры для настройки параметров текста.

> Нажмите кнопку ЦЩ - Togglt the Character andParagraph palletes (Показать/скрыть палитры сим-волов и абзацев) на панели параметров (OptionsBar). На экране появится совмещенная палитраCharacter/Paragraph (Символ/Абзац). ПалитраCharacter (Символ) будет активной (Рис. 2.37).

f! а

Т Т ТТ Тт Г Т, I T

Рис. 2.37. ПалитраCharacter (Символ)

73


Палитру 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 thelanguage on selected characters for hyphenation and spelling (Установить языкдля выбранных символов для целей переноса и проверки орфографии).

В меню палитры Character (Символ), которое открывается при нажатии кнопки©, доступны дополнительные команды форматирования, среди которых отме-тим следующие:

Faux Bold (Имитация полужирного) и Faux Italic (Имитация курсива) - позво-ляют установить соответствующее начертание даже для семейств шрифтов,которые не содержат эти стили;

Fractional Width (Дробная ширина). При включенном режиме расстояние междусимволами текста измеряется не в целых пикселах, а в дробных. Это позволяет вбольшинстве случаев придать тексту более привлекательный вид и-улучшитьего читаемость. Однако применение дробной ширины для шрифтов малого раз-мера, менее 20 пунктов, может ухудшить их представление и затруднить чтение.Для таких шрифтов режим Fractional Width (Дробная ширина) лучше отменить.

74


В палитре 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 ок

Color: |D NoneCancel

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

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

75


> Нажав кнопку 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


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

Photoshop Foimal Options

В Maximize compatibiGty

Turning off Maximize Compatibility may interfere with the use oF PSD files inother applications or with Future versions of Photoshop.

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

Cancel |

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

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

Если возникнет необходимость отредактировать или изменить параметры вве-денного текста, то сделать это можно, щелкнув мышью на тексте при выбран-ном инструменте [Т] и активном текстовом слое, который нужно редактировать.

Создаем новые слоиСоздадим еще два текстовых слоя с надписями «Вам нужна локальная сеть?» и«Заходите СЮДА!», расположенными на рисунке справа от логотипа, одна поддругой так, чтобы они могли сменять друг друга.

>•' Нажмите кнопку [Т] - Horisontal Type Tool (Т) (Инструмент «Горизонтальныйтекст» (Т)) на .панели инструментов (Tools), чтобы выбрать этот инструмент.

> Щелкните мышью в окне документа, справа от созданного логотипа. В этомместе появится текстовый курсор. В палитре Layers (Слои) появится новый тек-стовый слой Layer 2.

>• Введите первую надпись: Вам нужна локальная сеть?.

> Нажмите кнопку ЦЦ в правой части диалога, чтобы поместить текст справаот точки ввода.

>• Выделите введенный текст в окне документа, протащив по нему указательмыши.

> В первом слева открывающемся списке Set the font family (Установка семей-ства шрифтов) на панели параметров (Options Bar) выберите для надписиподходящую гарнитуру шрифта из установленных на вашем компьютере.

77


>• Подберите также начертание и размер шрифта примерно 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


> Щелкните мышью на поле с образцом цвета 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). Надпись в окне документа будет окрашена взаданный коричневый цвет.

>• Нажмите комбинацию клавиш lctr l l+|[Enter], чтобы завершить ввод текста. В окне

рисунка добавленная надпись будет расположена на новом слое, поверх пре-дыдущей надписи. Название нового слоя в палитре Layers (Слои) будет из-менено в соответствии с введенным текстом.

>• Переименуйте новый слой в Layer 3 (Слой 3). Для вызова диалога LayerProperties (Свойства слоя) щелкните правой кнопкой мыши на названиивновь созданного слоя в палитре Layers (Слои) и в появившемся контекстномменю выберите команду Layer Properties (Свойства слоя).

> Воспользовавшись клавишами управления курсором при включенном инст-рументе [*»] - Move Tool (V) (Инструмент «Перемещение» (V)) совместитеначало верхней надписи с началом нижней и выровняйте верхнюю надписьпо вертикали (Рис. 2.44).

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

Кроме уже рассмотренного способа создания нового слоя с помощью кнопки| а | - Create new Layer (Создать новый слой) у нижнего края палитры Layers(Слои), создать новый слой вы можете и другими способами, например:

79


Нажмите кнопку 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) (Инст-румент «Прямоугольная область» (М)) на панели инстру-ментов (Tools), чтобы выбрать этот инструмент и включитьпанель параметров (Options Bar).

Рис. 2.47.Открытая

дверь

> В открывающемся списке 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


Теперь внутри прямоугольника-«стены» нарисуем прямоугольник меньшегоразмера - 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). Изменить масштаб можно с помощью инструмента [§Г| - ZoomTool (Z) (Инструмент «Масштаб» (Z)).

>• Нажмите кнопку [41 - Zoom Tool (Z) (Инструмент «Масштаб» (Z)) на панелиинструментов (Tools), чтобы выбрать этот инструмент.

>• Установите указатель мыши на рисунке, внутри выделенной области. Указа-тель мыши примет форму <* .

>• Щелкните мышью в этом месте. Масштаб отображения рисунка увеличитсяна 100% и новое значение масштаба - 200% - отобразится в заголовке окнадокумента и в строке состояния.

82


в правом верхнем углу окна документа, чтобы развернуть> Нажмите кнопку |его на весь экран.

>• Щелкните еще несколько раз мышью, установив ее указатель на рисунке.Каждый щелчок мышью будет увеличивать масштаб изображения на 100%.

Уменьшить масштаб отображения документа можно следующим способом:

>• Нажмите и удерживайте клавишу I Alt I. Указатель мыши, установленный нарисунке, примет форму €^.

> Не отпуская клавишу I Alt I. щелкните несколько раз мышью на рисунке.Каждый щелчок мыши будет уменьшать масштаб на 100%, и новое значениемасштаба будет отображаться в заголовке окна документа и в строке состоя-ния (Status Bar).

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

>• Установите масштаб изображения 400%.

>• Нажмите клавишу Рта>1. чтобы скрыть все палитры, закрывающие увеличен-ное изображение.

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

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

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

83


Теперь можно выполнить преобразование области выделения.

у Выберите команду меню Edit * Transform » Skew (Правка * Преобразование *Скос). В углах и серединах прямоугольной области выделения появятся 8 квад-ратных маркеров, а в центре области - маркер центра вращения (Рис. 2.51).

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

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

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


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

>• Отпустите левую кнопку мыши. Новое положение мар-кера будет закреплено. Форма выделенной области ста-нет трапециевидной (Рис. 2.52).

\Обратите внимание: в том месте, где область выделениясжата, на рисунке стала частично видна надпись, находя-щаяся на нижележащем слое Layer 2.

>• Подобным же образом переместите верхний левый уг-ловой маркер вправо, примерно на середину верхнейстороны белого прямоугольника так, чтобы левая сто-рона выделенной прямоугольной области стала верти-кальной (Рис. 2.53).

>• Переместите левый нижний квадратный маркер верти-кально вверх на расстояние, примерно равное однойчетверти высоты области выделения (Рис. 2.54).

>• Нажмите клавишу [[Enter]. Маркеры преобразования ис-

чезнут. Форма преобразованной выделенной областибудет закреплена.

Выполним обводку коричневым цветом преобразованнойобласти выделения.

•Фт

Рис. 2.51. Маркерыпреобразования

Рис. 2.52.Левый нижнийугловой маркер

перемещен

тРис. 2.53.

Левый верхнийугловой маркер

перемещен

84


Выберите команду меню Window * Tools(Окно » Инструменты), чтобы отобразить панельинструментов.

Щелкните мышью на значке *}, - SwitchForeground and Background Colors (X) (Пере-ключение цвета переднего- плана и фона (X)) напанели инструментов (Tools), чтобы поменятьместами образцы цвета.

Выберите команду меню Edit • Stroke (Правка *Обвести). На экране появится диалог Stroke(Обводка).

•Ф-

Рис. 2.54. Левый нижнийугловой маркер

перемещен повторнр

> Установите флажок Outside (Снаружи), чтобы выполнить обводку по наруж-ному краю контура выделения.

> Нажатием кнопки ОК закройте диалог Stroke (Обводка). Контур выделениябудет обведен коричневым цветом переднего плана.

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

>• Нажмите клавишу Р»ТаЬ1. чтобы отобразить все палитры.

>• В полях ввода R (Красный), G (Зеленый) и В (Синий) палитры Color (Цвет)введите значения цветовых составляющих соответственно 234, 201 и 176.Светлый оттенок коричневого цвета вы увидите на образцах цвета переднегоплана палитры Color (Цвет) и панели инструментов (Tools).

> Щелчком мыши выберите инструмент [< 1 - Paint Bucket Tool (G) (Инстру-мент «Заливка» (G)) на панели инструментов (Tools) и залейте выделенную

область, предварительно скрыв все палитры с помощью клавиши КТаЬ1.

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

Нарисованной двери не хватает только дверной ручки. Но прежде чем ее изобра-зить, установим в качестве цвета переднего плана темно-коричневый цвет, кото-рым залита «стена». Воспользуемся для этого инструментом [ ] - EyedropperTool (I) (Инструмент «Пипетка» (I)).

>• Нажмите кнопку [5] в окне документа и измените размеры окна документатак, чтобы оно не пересекалось с палитрами, прокрутите изображение в окне,

чтобы отобразить дверь, и нажмите клавишу РТ"Ь|. чтобы отобразить всепалитры.

> Нажмите кнопку [ | - Eyedropper Tool (I) (Инструмент «Пипетка» (I)) напанели инструментов (Tools), чтобы выбрать этот инструмент.

85


> Установите указатель мыши, который примет форму пипетки f, на изобра-жении темно-коричневой «стены».

> Щелкните мышью в этом месте. Цвет переднего плана будет выбран и поя-вится на соответствующем образце панели инструментов (Tools).

Теперь в том месте открытой двери, где обычно находится дверная ручка, нари-суем с помощью инструмента |~?] - Pencil Tool (В) (Инструмент «Карандаш» (В))короткий вертикальный отрезок толщиной 1 пиксел и длиной 5-6 пикселов.

>• Удерживая нажатой клавишу II Alt j. нажмите кнопку \^\ -Brush Tool (В)(Инструмент «Кисть» (В)) на панели инструментов (Tools). Будет выбранинструмент \/\ - Pencil Tool (В) (Инструмент «Карандаш» (В)).

Этот инструмент позволяет рисовать произвольные линии - прямые и кривые.Для рисования горизонтальной или вертикальной прямой следует удерживать

нажатой клавишу ll s h i f tl.

> Установите указатель мыши примерно у середины левогокрая «двери».

>• Нажмите и удерживайте клавишу Р^"ч.

>• Не отпуская клавишу ll s h i f |l. нажмите и удерживайте ле-вую кнопку мыши.

>• Не отпуская левую кнопку мыши и клавишу Ifs^l. пере-местите указатель мыши вниз на 5-6 пикселов.

>• Отпустите левую кнопку мыши.

>• Отпустите клавишу |[shiftl. Будет нарисована тонкая верти-кальная линия (Рис. 2.55).

Рис. 2.55.«Дверная ручка»

нарисована

Напомним, что если с первого раза линия желаемого размера не получилась, выможете отменить выполненную операцию и повторить ее сначала.

>• Уменьшите масштаб изображения до 100%, щелкнув три раза на рисунке ин-струментом [ДГ| - Zoom Tool (Z) (Инструмент «Масштаб» (Z)) при нажатой

клавише Г^П. Изображение примет вид как на Рис. 2.56.

"Sb Geolon.psd <•> 100% (Lajiei 4. RGB/3)

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

86


> Сохраните документ, выбрав команду меню File » Save (Файл » Сохранить).

Итак, мы создали рисунок, состоящий из основного слоя Background (Фон) и че-тырех слоев - Layer 1, Layer 2, Layer 3, Layer 4. Посмотрим теперь, что можноделать со слоями.

Работаем со слоями

Рис. 2.57. Палитра Layers(Слои) со всеми слоями

Слои в изображении располагаются стопкой, один на другом. Основной слойBackground (Фон) всегда находится внизу. На нем располагаются остальныеслои в том порядке, в котором они были созданы. В таком же порядке слои рас-положены в палитре Layers (Слои).

>• Увеличьте размер палитры Layers (Слои), пере-тащив ее верхнюю границу вверх, чтобы отобра-зить в палитре все имеющиеся слои (Рис. 2.57).

Порядок расположения слоев рисунка легко изме-нить, перетащив миниатюру слоя в палитре Layers(Слои) в нужное место. Посмотрим, как это сде-лать, переместив слой Layer 2 наверх.

>• Установите указатель мыши на миниатюре слояLayer 2 в палитре Layers (Слои). Указательмыши примет форму fy.

>• Нажмите и удерживайте левую кнопку мыши.Слой будет выделен темным цветом.

> Не отпуская левую кнопку мыши, переместитеуказатель мыши на миниатюру слоя Layer 4.Вместе с ним переместится значок слоя.

>• Отпустите левую кнопку мыши. Новое положе-ния слоя Layer 2 вверху группы слоев будет за-креплено (Рис. 2.58). В окне документа надписьВам нужна локальная сеть? теперь будет рас-положена поверх надписи Заходите СЮДА!, ане под ней, как прежде, и поверх рисунка две-ри, находящегося на слое Layer 4 (Рис. 2.59).

В процессе редактирования слоев часто бываетнеобходимо выключить отображение какого-либослоя или нескольких слоев, чтобы сосредоточитьсяна обработке других. В крайнем левом столбце палитры Layers (Слои), напротиввидимых слоев выставляется специальный значок в виде открытого глаза ф -Indicates layer visibility (Индикация видимости слоя).

87

Рис. 2.58. Слой Layer 2перемещен


"E Geoton.psd & 1002 [Layei 4. RGB/8)

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

Щелкните мышью на значке с изображением глаза g> - Indicates layervisibility (Индикация видимости слоя) в палитре 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(Слои). Строка будет выделена темным цветом. Данный слой станет актив-ным, и информацию об этом вы увидите в заголовке окна документа.

Другой способ активизации слоя позволяет выбирать его из контекстного меню.

>• Установите указатель мыши в окне рисунка на надписи Вам нужна локаль-ная сеть?

Нажмите и удерживайте клавишу II ctrl I. Указатель мыши примет форму Kj..

Это значит, что при включенном инструменте [К^1 - Move, Tool (V) (Инстру-

мент «Перемещение» (V)) клавишу I I С1г| I можно не нажимать.

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

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

88


> Выберите из контекстного меню слой Layer 3.Этот слой станет активным и будет выделен впалитре Layers (Слои). ауег

Layer 2

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


>> Чтобы убедиться в том, что слои объединены, щелкните мышью на значке сизображением глаза ® слева от названия слоя 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 imagepixels), положение (Lock position), весь слой (Lock all).

menu u выпуклостиЧтобы придать создаваемому баннеру большую выразительность и привлека-тельность, можно применить к каждому слою различные эффекты. Посмотрим,какие эффекты предлагает Adobe Photoshop для слоев и как их применить.Предварительно следует сделать активным нужный слой. Создадим эффектыдля слоя Layer 1 с надписью ГЕОТОН.

> Щелкните мышью на слое Layer 1 в палитре Layers (Слои), чтобы сделать егоактивным.

> Выберите команду меню Layer * Layer Style (Слой * Стиль слоя). На экранепоявится меню с перечнем команд, управляющих применением эффектов квыбранному слою (Рис. 2.62).

Команды этого меню, начиная со второй, создают следующие эффекты:

Drop Shadow (Тень снаружи) - добавляет тень, которую отбрасывает содержи-мое слоя;

91


Inner Shadow (Тень внутри) - добавляет тень, кото-рая лежит внутри слоя, создавая ощущение его ото-двинутости или приподнятости;

Outer Glow (Свечение наружу) - добавляет свечение,исходящее от слоя наружу;

Inner Glow (Свечение внутри) - добавляет свечениевнутри слоя;

Bevel and Emboss (Скос и рельеф) - дает возможностьдобавить различные комбинации подсветки и затене-ния слоев, которые создают эффекты рельефности искошенных кромок;

Satin (Атлас) - добавляет затенение внутри слоя, соз-давая эффект изменения формы слоя;

Color Overlay (Наложение цвета) - заполняет слойцветом;

Blending Options...

Drop Shadow...Inner Shadow...

Outer Glow...Inner Glow...

Bevel and Emboss:.Satin...Color Overlay...

Gradient Overlay...Pattern Overlay...Stroke...

Copy Layet Style

Paste Layer Slyte

Paste Layer Stylo to LinkedClear Layer Style

Global Light...

Create Layer

Hide All EffectsScale Effects...

Puc. 2.62. Менюэффектов

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

Pattern Overlay (Наложение текстуры) - заполняет слой узором;

Stroke (Обводка) - обводит контур объекта на текущем слое, используя цвет,градиент или узор. Обычно используется для объектов с жесткими границами,таких как текст.

Применим к активному слою Layer 1 эффект Bevel arid Emboss (Скос ирельеф).

х Выберите из меню Layer ». Layer Style (Слой * Стиль слоя) команду Bevel andEmboss (Скос и рельеф). На экране появится диалог Layer Style (Стиль слоя)(Рис. 2.63).

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

Данный диалог состоит из двух панелей. На левой панели - Styles (Стили) от-мечено флажком и выделено название выбранного эффекта - Bevel and Emboss(Скос и рельеф). На этой же панели вы можете выбрать, установив флажок,другие доступные эффекты из перечисленных выше.

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

92


Styles

Blending Options: Default

О Drop Shadow

П Inner Shadow

|j Outer Glow

|~1 Inner Glow

!~ Satin

П Color Overlay

Г": Gradient Overlay

fj Pattern Overlay

!~j Stroke

Bevel and Emboss— Structure —'

Styles [inner Bevel

Technique: |Smooth ~

Direction: © Up О Down

Soften: л . |o Ipx

• Shading

Angle:

Akitude:

Gloss Contour:

[7j Use Global Light

П Anti-a[iased

Highlight Mode:, [Screen

Opacity:

Shadow Mode: [Multiply

Opacity:

OKJ

ResetJ

"New Style... I

13 Preview

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

> Убедитесь, что в диалоге Layer Style (Стиль слоя) установлен флажокPreview (Предварительный просмотр). При этом все изменения параметров,сделанные в диалоге, будут сразу же отображаться на рисунке.

Следует отметить, однако, что значения параметров, заданные по умолчанию,являются оптимальными и в большинстве случаев создают наиболее яркие эф-фекты. На рисунке в окне документа вы можете видеть, как будет выглядетьнадпись ГЕОТОН при значениях параметров эффекта, определенных по умолчанию.

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

В открывающемся списке Style (Стиль) вы можете выбрать один из пяти вари-антов данного эффекта.

>• Просмотрите различные варианты эффекта, выбирая их из открывающегосясписка Style (Стиль), после чего выберите стиль Inner Bevel (Скос внутри).

93


>• Выбирая из открывающегося списка. Technique (Технология) различные ва-рианты, просмотрите возможные способы формирования кромок, после чеговыберите вариант Smooth (Сглаженный).

Параметр Depth (Глубина) позволяет изменить степень затенения. ПараметрSize (Размер) управляет размером скоса, а параметр Soften (Смягчение) закругле-нием кромок.

> Проверьте, как изменяется эффект при изменении параметров Depth (Глубина),Size (Размер) и Soften (Смягчение) и выберите наилучшие значения этих па-раметров.

Переключателями Up (Вверху) и Down (Внизу) определяют положение подсвет-ки по отношению к содержимому слоя.

>• Посмотрите, как изменяется эффект при установке переключателя Down(Внизу), после чего установите переключатель Up (Вверху).

Параметр Angle (Угол) определяет угол, под которым падает свет из слоя или наслой. Если установлен флажок Use Global Light (Использрвать глобальныйсвет), то используется глобальный угол, определяющий угол падения света навсе изображение. Если данный флажок сброшен, то применяется локальныйугол, который задает угол падения света на активный слой. Для установки гло-бального угла следует использовать команду меню Layer • Layer Style » GlobalLight (Слой » Стиль слоя * Глобальный свет).

>• Щелкайте мышью в разных местах круговой шкалы Angle (Угол) и наблю-дайте на рисунке, как изменяется характер эффекта при разных углах падениясвета. Выберите наиболее оптимальный, с вашей точки зрения, угол.

>• Изменяя параметр Altitude (Высота), проверьте, как изменяется эффект приизменении высоты источника света и выберите подходящее значение этогопараметра.

>• Нажав кнопку ОК, закройте диалог Layer Style(Стиль слоя). Выбранный эффект будет примененк слою Layer 1. Надпись ГЕОТОН на изображе- Рис. 2.64. К текстовомунии будет выглядеть примерно как на Рис. 2.64, слою применен эффект

Bevel and EmbossОбратите внимание, что после применения эффекта в (Скос и оельей)палитре Layers (Слои), под строкой с активным сло-ем Layer 1 появилось название примененного к слою эффекта, а справа от именислоя - значок в виде буквы f внутри белого круга, который означает, что к слоюприменен эффект (Рис. 2.65). Слева от этого значка находится треугольный пе-реключатель v, позволяющий выключить и снова включить отображение названийэффектов, примененных к слою. Слева от названия эффекта - Bevel and Emboss(Скос и рельеф) - находится значок в виде открытого глаза ф, с помощью кото-рого можно выключить и включить отображение эффекта в окне документа.

94


BIDQ Bevel and Emboss

= 1 Bickground

о. т t>. a

Рис. 2.65. Слой с эффектом в палитре Layers (Слои)

К одному слою можно применить одновременно несколько эффектов. Добавимк слою Layer 1 еще один эффект - Drop Shadow (Тень снаружи). Для вызовадиалога Layer Style (Стиль слоя) воспользуемся другим способом.

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

I Layer Style И I

Styles

Blinding Options: Default

1 d Drop Shadow ЯК

О Inner Shadow

(jOuttrGlow

О Inner Glow

W Bevel and Emboss

П Contour

П TtJlturt

Cs»«n

Г* Color Overlay

С <5r«dienl Overlay

r"j Pattern Overlay

П Stroke

- Drop Shadow

Blind Mod.: [Multinlv ЗИИ

ODjcitv: | fi 1 [re |%

Angle! \\ J 1.120 |° E Use global Light

.

Contour: ^A'l П Anti-aliased

Noise! ;*) j In |%

Q Layer Knocks Oul Drop Shadow

..

| OK |_____ 1

R] Preview

'

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

95

I


На левой панели диалога уже установлен флажок Drop Shadow (Тень снаружи)и справа отображаются элементы управления эффектом.

Выбранный эффект имитирует тень, которую отбрасывает содержимое слоя. И этотэффект, созданный параметрами по умолчанию, вы видите в окне документа.

Элементы'управления Blend Mode (Режим наложения) и Opacity (Непрозрач-ность) определяют соответственно режим наложения пикселов и степень непро-зрачности тени. Применяемая по умолчанию тень создается черным цветом.Однако для выбранного объекта такой цвет тени не является наилучшим. Выбе-рем другой цвет тени, более близкий к цвету надписи.

>• Щелкните мышью на поле с образцом цвета справа от открывающегося спи-• ска Blend Mode (Режим наложения). На экране появится диалог Color Picker

(Палитра цветов).

>• Если этот диалог перекрывает окно документа, переместите его в сторону,чтобы видеть на рисунке результат выбора цвета.

>• Щелкните мышью на спектральной шкале - узкой вертикальной полосе - вобласти оттенков синего. "В цветовом поле слева отобразится цветовое про-странство выбранного оттенка.

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

> Закройте диалог Color Picker (Палитра цветов), нажав кнопку ОК.

Параметр Angle (Угол) определяет угол, под которым свет падает на слой, апараметр Distance (Расстояние) - расстояние, на которое отбрасывается тень.Эти два параметра можно изменять интерактивно, прямо на рисунке.

> Установите указатель мыши, который примет форму Kj., в окне документа натени, которую отбрасывает надпись ГЕОТОН.


>• Не отпуская левую кнопку мыши, перемещайте указатель мыши вблизи над-писи. Вместе е ним будет перемещаться и тень от надписи. В процессе пере-мещения текущие значения угла (Angle) и расстояния (Distance) будут ото-бражаться в соответствующих полях ввода диалога Layer Style (Стиль слоя).

>• Добейтесь наиболее оптимального положения тени и отпустите левую кноп-ку мыши.

Параметр Spread (Размытие) определяет степень четкости тени.

>• Перемещая ползунок Spread (Размытие), установите наиболее подходящуюстепень четкости тени.

96


С помощью ползункового регулятора 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.

974-6645


>• В программе Adobe Photoshop нажмите кнопку - Edit in ImageReady(Shift+Ctrl+M) (Редактировать в ImageReady (Shift+Ctrl+M)). Будет запущенапрограмма Adobe ImageReady, и на экране появится ее рабочее окно.

Изготовление кнопки начнем с создания нового документа размером 250 х 100пикселов и прозрачным фоном.

>• Выберите команду меню File * New (Файл * Новый). На экране появитсядиалог New Document (Новый документ) (Рис. 2.68).

Ыате: |Untitled-l

Size: (Custom H

Wjdth: |539 | pixels

tlelght: |15 [ pixels

0 White

О eackoround Color

О transparent

1 OK I

| Cancel |

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

Этот диалог несколько отличается от аналогичного диалога Adobe Photoshop.В нем отсутствует возможность выбора цветового режима документа. Всеновые документы в Adobe ImageReady создаются в цветовом режиме RGB.

> В полях ввода со счетчиками Width (Ширина) и Height (Высота) введите раз-меры документа - 250 и 100 пикселов.

>• Установите переключатель Transparent (Прозрачный), чтобы создать доку-мент с прозрачным фоном.

> Закройте диалог New Document (Новый документ) нажатием кнопки ОК. В ра-бочем окне программы появится окно документа указанных размеров, в которомпрозрачный фон условно показан в виде серой шахматной мозаики (Рис. 2.69).

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

98

: \


Новый документ состоит из одного прозрачного слоя 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


Применим к слою Layer 1, на котором располо-жен прямоугольник, эффект Bevel and Emboss(Скос и рельеф), создающий иллюзию рельефно-сти кнопки.

> Чтобы видеть в палитре Layers (Слои) все эф-фекты и слои, которые мы создадим, перемес-тите эту палитру вверх, расположив ее справаот окна документа так, чтобы она не перекры-

Пи Untilled-1 @ 100% (Original) ВЕЗЕТ

^; 0

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

i

Нажмите кнопку ПЯ - Add a layer effect (Добавить эффект к слою) в нижнейчасти палитры Layers (Слои). На экране появится меню эффектов.

Это меню содержит перечень тех же э<]Adobe Photoshop.

эектов, что и аналогичное меню в

> Выберите из появившегося меню эффект Bevel and Emboss (Скос и рельеф).На экране появится диалог Layer Style (Стиль слоя) с элементами управленияэффекта Bevel and Emboss (Скос и рельеф) (Рис. 2.72).

[~j Drop Shadow

П Inner Shadow

О Outer Glow

П Satin

П Color OwUy

Г_] Gradient Overlay

Fj Pattern Overlay

Style: [inner Bevel I - I

Technique: [Smooth j

Depth: -0

Direction: ©Up О D°»n

S»l fl

Soften: [}• i iiiu-i -

-Shading-

Angle: ^_^ 1120

В U» global Light

По I °Altitude:i t

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

Highlight Mode: [Screen

Opacity:

Shadow Mode: | Multiply [T|

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

New Style... I

13 Preview

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

100


Данный эффект с параметрами по умолчаниюбудет применен к активному слою :(Рис. 2.73).В диалоге Layer Style (Стиль слоя) вы можетеизменить параметры эффекта. Но мы делатьэтого не будем, а используем эффект, созда-ваемый по умолчанию.

Обратите внимание, что после применения эф-фекта в палитре Layers (Слои) справа от именислоя появился значок в виде буквы f внутрибелого круга, который означает, что к слоюприменен эффект.

Нам осталось только написать на кнопке текст,для надписи синий цвет. ,

Рис. 2.73. Эффект Beveland Emboss (Скос и рельеф)

применен к слою

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

> Выберите из палитры Swatches (Каталог) синий цвет - такой, чтобы текстбыл хорошо виден на желтой кнопке.

v Нажмите кнопку [Т] - Type Tool (Т) (Инструмент «Текст» (Т)) на панели ин-струментов (Tools). На панели параметров (Options Bar) появятся элементыуправления параметрами инструмента - такие же, как и в Adobe Photoshop.

v В открывающихся списках Set the font family (Установка семействашрифта) и Set the font style (Установка начертания шрифта) панели пара-метров (Options Bar) выберите гарнитуру и начертание шрифта из числаустановленных на вашем компьютере.

> Щелкните мышью у левого края желтого прямоугольника в окне документа.В этом месте появится текстовый курсор. •

v Введите с клавиатуры надпись: На первую страницу. Эта надпись появитсяв окне документа в точке ввода.

> Выделите введенный тест, протащив черезнего указатель мыши.

> В открывающемся списке со счетчиком Setthe font size (Установка размера шрифта)панели параметров (Options Bar) подберитедля текста такой размер, чтобы надпись пол-ностью поместилась на кнопке.

> С помощью инструмента \**\ - Move Tool (V)(Инструмент «Перемещение» (V)) отцентри-руйте надпись на желтом прямоугольнике(Рис. 2.74).

ТО Untitled-1 @100£ (Original)

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

101


Изменим название созданного текстового слоя на 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 (Скос и рельеф).

Для выделения обрезаемого объекта воспользуемся инструментом [\] - MagicWand (W) (Инструмент «Волшебная палочка» (W)), с помощью которого легковыделяются области одного цвета или близких цветов.

102


>• Выберите инструмент [\1 - Magic Wand Tool (W) (Инструмент «Волшебнаяпалочка» (W)) из всплывающего меню, которое появляется, если нажать иудерживать кнопку [О] - Marquee Tool (M) (Инструмент «Выделение» (М)) напанели инструментов (Tools).

>• Установите указатель мыши, который примет форму \, в окне документа нарисунке желтого прямоугольника.

>• Щелкните мышью в этом месте. Контур желтого прямоугольника будетвыделен.

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

f|Untitled-1 @ 100% (Original) HEQEOriginal Ч 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


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

В палитре Web Content (Содержимое Web) по умолчанию уже создан первыйкадр эффекта для состояния изображения Normal (Нормальное), при котором

•указатель мыши находится за пределами объекта, т.е. за пределами кнопки.На миниатюре этого кадра отображается видимый в данный момент слой Layer 1без примененного к нему эффекта.

> Включите также отображение надписи, которая находится на слое Layer 2,чтобы и она отображалась на первом кадре-состоянии.

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

Создадим новый кадр для следующего состояниярисунка.

>• Нажмите кнопку I в | - Creates rollover state(Создать состояние) R нижней части палитрыWeb Content (Содержимое Web). В этойпалитре появится и будет выделен двойнойрамкой следующий кадр для состояния Over(Над) (Рис. 2.78), при котором указатель мышиперемещается по объекту или находится надним, и кнопки мыши не нажаты.

Состояние Over (Над) программа предлагает длявторого кадра по умолчанию. Но вы можете вы-брать для этого и всех последующих кадров лю-бые другие состояния.

> Щелкните правой кнопкой мыши на именисостояния Over (Над). На экране появится ме-ню состояний (Рис. 2.79).

Из этого меню, кроме Over (Над), вы можете вы-брать одно из следующих состояний изображения,связанных с действиями мыши.

Рис. 2.78. Добавленосостояние Over (Над)

Ovei

Down

Selected

Out

Up

Click

Custom...

None

Puc. 2.79. Меню состояний

Down (Нажатие) - состояние изображения, при котором нажимается и удержи-вается левая кнопка мыши в то время, когда указатель мыши находится надобъектом. Это состояние сохраняется так долго, как долго удерживается нажа-той кнопка мыши.

104


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


Оставим для нового кадра состояние, предлагаемое по умолчанию. При этомсостоянии, т.е. когда нажимается кнопка мыши, графическая кнопка на Web-странице должна выглядеть нажатой. Изменим соответствующим образом длятекущего кадра параметры эффекта Bevel and Emboss (Скос и рельеф).

>• Дважды щелкните мышью на названии эффекта Bevel and Emboss (Скоси рельеф) в палитре Layers (Слои). На экране появится диалог Layer Style(Стиль слоя) с элементами управления эффекта Bevel and Emboss (Скоси рельеф).

> Установите переключатель Down (Вниз) в диалоге Bevel and Emboss (Скос ирельеф) и нажмите кнопку ОК. Диалог Layer Style (Стиль слоя) закроется, ивид кнопки на рисунке изменится, имитируя ее нажатое состояние (Рис. 2.80).

Созданный эффект можно просмотреть.

>• Нажмите кнопку [§ - Preview Document (Y)Г9Untitletl-1 @ 1002 (Original)

(Предварительный просмотр документа (Y))на панели инструментов (Tools), чтобы вклю-чить режим предварительного просмотра.

Установите указатель мыши в окне докумен-та, за пределами изображения кнопки. Кноп-ка примет вид плоского прямоугольника.

Переместите указатель мыши на изображе-ние кнопки. Кнопка станет рельефной.

OrlgtoalXOplMitd Чг-ирЧ/4-Up^

Рис. 2.80. Нажатоесостояние кнопки

> Нажмите и удерживайте левую кнопку мыши. Будет имитировано нажатоесостояние кнопки.

>• Отпустите левую кнопку мыши. Изображение кнопки вновь станет рельефным.

>• Удалите указатель мыши за пределы изображения кнопки. Это изображениестанет плоским.

>• Выключите режим предварительного просмотра эффекта, нажав кнопку [JS] -Preview Document (Y) (Предварительный просмотр документа (Y)) на панелиинструментов (Tools).

>• Сохраните документ в формате PSD под именем Knopka.psd, выбрав коман-ду меню File » Save (Файл * Сохранить).

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

106


Оптимизируем и сохраняем графикуСоздание минимально возможного по размеру графического файла - одна изважнейших задач, стоящих перед разработчиками графики для 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


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

В двух открывающихся списках в нижней части окна документа можно выбратьдля отображения другую информацию о рисунке: оптимизационная информация(Optimized Information), размеры изображения (Image Dimensions), наличиеводяного знака на изображении (Watermark Strength), размер в байтах ори-гинального (Original in Bytes) и оптимизированного изображения (Optimizedin 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% ditherSelective palette» colors

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

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

Как видите, различия между этими вариантами практически не заметны.

В режиме 4-Up (4 варианта) в рабочем окне документа отображаются четыреверсии рисунка.

108


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

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

Vj Knopka psd & 10D% (4 Up)

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

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

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

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

109


Рис. 2.86. ПалитраOptimize (Оптимизация)

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

>• Переключите окно документа в режим 2-Up (2 варианта), щелкнув мышью наэтом ярлыке в верхней части окна.

>• Выберите команду меню View • Show Optimization Info (Вид * Показатьоптимизационную информацию), чтобы отобразить в окне документа необ-ходимые сведения.

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

>• Если эта палитра отсутствует в рабочем окне,выберите команду меню Window * Optimize(Окно * Оптимизация).

В открывающемся списке Preset (Предваритель-ные установки) в верхней части палитры 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


файла с тем же изображением в формате 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


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 (Цветоваятаблица) в третьем сверху окне палитр у правогокрая рабочего окна или выберите команду менюWindow * Color Table (Окно * Цветовая таблица),чтобы вывести на экран эту палитру (Рис. 2.88).

Рис. 2.88. ПалитраColor Table

(Цветовая таблица)

В палитре Color Table (Цветовая таблица) отображаются образцы 256 градацийсерого цвета.

112


>• Выбирая из открывающегося списка Reduction (Уменьшение) палитрыOptimize (Оптимизация) различные цветовые таблицы, просмотрите, как приэтом изменяется оптимизированное изображение, его параметры, а такженабор цветов таблицы (Color Table), после чего снова выберите таблицуSelective (Выборочная).

Используя все доступные средства, вы можете добавлять, удалять, редактиро-вать или блокировать некоторые цвета в палитре Color Table (Цветовая таблица).Блокирование цветов гарантирует, что цвет останется нетронутым, когвд вы вы-бираете другие цвета или преобразовываете их в Web-безопасные цвета. Длявыбора любого цвета достаточно щелкнуть на нем мышью; для выбора группы

цветов - щелкать мышью при нажатой клавише ll s h i f ll. Блокирование выбранныхцветов выполняется нажатием кнопки с изображением замка П§"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 (Удалить выбранные цвета) в нижней части палитры ColorTable (Цветовая таблица).

В меню палитры Color Table (Цветовая таблица) Adobe ImageReady предлагаеткоманды для быстрого выбора всех цветов (Select All Colors), всех цветов извыделенной части рисунка (Select All From Selection), всех Web-безопасныхцветов (Select All Web Safe Colbrs) или всех не Web-безопасных цветов (SelectAll None-Web Safe Colors). Вы можете создавать также собственные группыманипуляций с цветами. Можно, например, выбрать нужный набор цветов иливсе цвета, а затем автоматически преобразовать их в Web-безопасный эквива-лент. Вы также можете непосредственно из палитры Color Table (Цветовая таб-лица) открыть диалог Color Picker (Палитра цветов) двойным щелчком на лю-бом из цветов для выбора нового текущего цвета. Выбирая новый цвет,.вы темсамым редактируете цвет, выделенный в палитре. Напомним, что диалог ColorPicker (Палитра цветов) содержит флажок, который позволяет отображать толь-ко набор Web-безопасных цветов.

С помощью элемента управления Colors (Цвета) вы можете указать максималь-ное количество цветов в палитре. Если изображение содержит меньшее количе-ство цветов, чем вы определили, цветовая палитра будет содержать только цвета

113


изображения. В поле ввода со счетчиком 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


Смешивание подразумевает комбинирование пикселов, окрашенных в доступ-ные цвета, случайным образом или в виде узора (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


Если вам заранее известен цвет фона 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


х Установите флажок 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 WindowsColor (Вид Ф Предварительный просмотр «• Стандартные цвета 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


. !

Sample Piclme.

Имя файле:

1ип Файла:

Settings:

Sices:

|Knopka

[HTML and Images I'.Kmll

| Dclaul Sellings

|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

Посмотрим, что представляет собой созданный файл.

> Откройте в программе Блокнот (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)—> и заканчивая .

> В открывающий тег <body> файла spisok.html добавьте команду вызова функ-ции предварительной загрузки изображений ONLOAD="preloadimages();",скопировав ее из файла Knopka.html так, чтобы этот тег имел следующий вид:

<body bgcolor=blue text=yellow link=white vlink=yellowONLOAD="preloadImages();">

>• На место строки, в которой определяется ссылка На первую страницу файлаspisok.html скопируйте из файла Knopka.html текст программы, начиная с<!— ImageReady Slices (Knopka.psd) --> и заканчивая .

> В файле spisok.html Б ссылке A HREF="#" символ # замените именем файлаgeoton.html, чтобы эта ссылка имела следующий вид:

A HREF="geoton.html"

> Сохраните файл spisok.html, выбрав команду меню программы Блокнот(Notepad) Файл » Сохранить (File • Save).

>• Закройте обе копии программы Блокнот (Notepad).

Проверим, как работает созданная нами кнопка.

>• Откройте документ spisok.html из папки Web в программе просмотра Web-страниц.

> Перейдите в конец страницы, где находится вставленная кнопка.

119


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

>• Установите указатель мыши на желтой кнопке с надписью На первуюстраницу. Кнопка станет рельефной.

>• Нажмите и удерживайте, левую кнопку мыши. Будет имитировано нажатоесостояние графической кнопки.

> Отпустите левую кнопку мыши. Произойдет переход по ссылке, и в окнобраузера будет загружен файл 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).

1120


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

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

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

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

121


>• Выберите команду меню 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


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

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

>• Нажмите и удерживайте клавишу I А11 I. Указатель мыши примет форму @.

> Не отпуская клавишу И А|У I. щелкните мышью в этом месте.

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

Таким образом, мы зафиксировали центр клонируемой области.

Нажав клавишу II Alt I. вы можете взять образец для инструмента [Ж] в любом от-

крытом окне документа программы Adobe Photoshop, не меняя при этом актив-ного окна.

Теперь можно перенести образец на блик и, таким образом, ликвидировать его.

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

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

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

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

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

123


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

Фотография Ozero.jpg затемнена и выглядит «тусклой». Причиной этого являет-ся нарушение тонового баланса. Поэтому наша очередная задача - повысить яр-кость и контрастность изображения, выполнив тоновую коррекцию. Это можносделать с помощью диалога Levels (Уровни). •

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

Создадим корректирующий слой.

>• Убедитесь, что палитра Layers (Слои) видна на экране и не перекрываетсядругими палитрами. В противном случае выберите команду меню Window »Layers (Окно » Слои).

> Выберите команду меню Layer * New Adjustment Layer * Levels (Слой »Новый корректирующий слой » Уровни). На экране появится диалог NewLayer (Новый слой) (Рис. 2.96).

Name: | Levels 1 ] L OK J. П Use Previous Layer to Create GiQping Mask | Cancel |

Color: |D None \*\

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

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

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

124


Установка флажка 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


Тоновая коррекция изображения выполняется с помощью гистограммы вдиалоге Levels (Уровни). Гистограмма - это графическое представление уров-ней яркости в изображении. Горизонтальная ось гистограммы отображает зна-чения яркости от 0 до 255. Значение яркости 0 (ноль) у левого края графикасоответствует самым темным тонам, а значение яркости 255 у правого края гра-фика - самым светлым. По вертикальной оси гистограммы отображается коли-чество пикселов, имеющих данное значение яркости.

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

Под гистограммой расположены три треугольника-бегунка: черный - слева, се-рый - в центре, белый - справа. Черный и белый бегунки указывают значенияяркости, которые отображаются соответственно в левом - 0 - и правом - 255 -полях ввода Input Levels (Входные уровни). Серый треугольник-бегунок управ-ляет настройкой гаммы изображения или коэффициента контраста в среднихтонах. Соответствующее его положению значение - 1.0 - отображается в сред-нем поле ввода.

Если черный треугольный бегунок под гистограммой перемещать вправо, то всезначения яркости пикселов слева от него станут равны 0 (нулю) или черномуцвету. Например, когда при перемещении треугольника значение в левом полеввода Input Levels (Входные уровни) повысится до 50, то все пикселы, имеющиев исходном изображении уровень яркости 50 и ниже, станут черными. Это при-ведет к затемнению изображения.

Если белый треугольный бегунок двигать влево, то все значения яркости пиксе-лов справа от него будут равны 255 или белому цвету. Например, когда при пе-ремещении бегунка значение в правом поле ввода Input Levels (Входные уровни)понизится до 200, все пикселы изображения с уровнями яркости 200 и вышестанут белыми. Это приведет к осветлению изображения.

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

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

126


При установленных по умолчанию в полях ввода Input Levels (Входные уровни)значениях яркости 0,1.0,255 коррекция исходного изображения не выполняется.

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

Если изображение содержит полутона по всему диапазону яркости, то графикбудет отображаться по всей ширине гистограммы, от черного до белого тре-угольных бегунков. Если же график сжат к центру, то это свидетельствует оботсутствии очень темных и очень светлых тонов. В нашем случае, как видно нагистограмме, отсутствуют полутона в области теней, у правого края гистограммы,и самые темные пикселы имеют значение яркости не 0, а примерно 18-20. Этоприводит к снижению контраста исходного изображения в области теней.

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

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

Переопределим значение яркости для самого темного пиксела изображения.

>• Убедитесь, что в диалоге Levels (Уровни) установлен флажок Preview (Пред-варительный просмотр). Это позволит наблюдать в окне документа все изме-нения изображения.

> Переместите черный треугольный бегунок у левого края гистограммы вправо,к границе тонового интервала изображения, т.е. к первой слева группе полу-тонов так, чтобы в левом поле ввода Input Levels (Входные уровни) появи-лось значение 18.

127


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

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

> .Перемещайте серый треугольный бегунок под гистограммой влево, в областьтеней, на небольшие интервалы и наблюдайте, как при этом увеличиваетсяяркость средних тонов. Установите этим бегунком значение гаммы прибли-зительно 1.30. Это значение должно отобразиться в среднем поле ввода InputLevels (Входные уровни).

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

Предположим, что вы хотите повысить контраст в изображении, пикселы кото-рого охватывают весь диапазон цветовых значений от 0 до 255. Если перемес-тить белый треугольник под гистограммой к отметке 225, то всем пикселам сяркостью от 225 до 255 будет присвоено значение 255. Значения яркости всехостальных пикселов будут пропорционально переопределены в границах новоготонового интервала. В результате изображение станет светлее, а контраст всветлых областях усилится.

Поля ввода Output Levels (Выходные уровни) и шкала под ними в нижней частидиалога Levels (Уровни) используются для снижения контраста в изображении.Черный треугольник управляет тенями, а белый - светлыми областями. Вы так-же можете вводить выходные значения в явном виде. Если в параметре Input

128


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

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

> Закройте диалог Levels (Уровни) нажатием кнопки ОК. Установленные па-раметры коррекции будут применены. Изображение примет вид примернокак на Рис. 2.99.

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

> Выключайте и включайте отображение корректирующего слоя Levels (Уровни)в палитре Layers (Слои), чтобы оценить различие в изображении до и послетоновой коррекции.

Теперь, когда тоновая коррекция выполнена, можно объединить корректирую-щий слой с нижележащим фоновым.

> Выберите команду меню Layer • Merge Down (Слой * Объединить с ниже-лежащим). Корректирующий слой будет объединен с нижележащим слоемBackground (Фон).

> Повторно откройте диалог Levels (Уровни), выбрав команду меню Image *Adjustments * Levels (Изображение • Коррекции * Уровни).

1295-6645


Вы увидите, что гистограмма несколько «выровнялась», растянулась на всю ши-рину шкалы яркостей, уменьшилась концентрация полутонов в области теней,однако при этом в ней появились «пробелы» (Рис. 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


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

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

В программе Adobe Photoshop имеется специальный инструмент Sharpen Tool (R)(Инструмент «Резкость» (R)) и несколько фильтров; которые осуществляют уси-ление резкости. Эти фильтры вызываются из меню Filter * Sharpen (Фильтр »Резкость).

SharpenSharpen EdgesSharpen MoreUnsharp Mask...

>. Выберите команду меню Filter » Sharpen (Фильтр *Резкость). Вы увидите подменю с перечнемфильтров, повышающих резкость (Рис. 2.101).

Все эти фильтры повышают четкость изображения засчет усиления контраста между соседними пикселами. рис 2 101 ФильтрыФильтры Sharpen (Резкость) и Sharpen More (Рез- повышающие резкостькосты-) фокусируют изображение или выделеннуюобласть," повышая ее четкость. Разница между ними состоит лишь в том, чтофильтр Sharpen More (Резкость*) дает более выраженный эффект. Из четырехфильтров первые три - это фильтры прямого действия: они не требуют дополни-тельных установок. Фильтры Sharpen Edges (Резкость по краям) и UnsharpMask (Контурная резкость) отыскивают в изображении границы цветовых пере-ходов и повышают их резкость.

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

> Выберите в подменю с перечнем фильтров команду Unsharp Mask (Контурнаярезкость). На экране появится диалог Unsharp Mask (Контурная резкость)(Рис. 2.102).

131


FJ 100% [£|

Amount: П ю ( %

Threshold: |£_ _j levels

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

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

Параметр Amount (Эффект) определяет степень усиления контраста пикселов.Для изображений с высоким разрешением рекомендуется задавать его значе-ние в пределах от 150% до 200%.

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

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

132


> Перемещайте ползунковый регулятор Amount (Эффект) вправо до тех пор,пока изображение в окне документа не станет достаточно резким. Мы ис-пользовали значение 200%.

> Закройте диалог Unsharp Mask (Контурная резкость), нажав кнопку ОК.Изображение в окне документа примет вид примерно как на Рис. 2.103.

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

> Сохраните документ, выбрав команду меню File * Save (Файл * Сохранить).

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

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

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

133


> He закрывая файл Ozero.psd, откройте в рабочем окне программы AdobePhotoshop файл 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


>• Переместите панель инструментов (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


Контур состоит из одного или нескольких сегментов. Начало и конец каждого сег-мента определяют специальные точки привязки или узлы (Рис. 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


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

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

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

Чтобы провести линию вертикальную, горизон-тальную или под углом, кратным 45°, удержи-

вайте нажатой клавишу \\$*Щ.

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

> Переместите указатель мыши в следующуюкрайнюю точку верхней плоскости левого кры-ла самолета и' щелчком мыши создайте сле-дующую точку привязки (Рис. 2.111).

Рис. 2.110. Первая точкапривязки создана

Рис. 2.111. Первыетри точки контура

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

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

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

удалить ее можно, щелкнув на ней мышью и нажав клавишу Р»1*]. Но точкиможно и не удалять. В дальнейшем мы увидим, как легко можно изменить ихположение в процессе редактирования контура.

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

137


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

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

>• Не перемещая указатель мыши, нажмите и, не отпуская левую кнопку мыши,переместите указатель мыши вправо на расстояние, примерно равное радиусуколеса.

> Отпустите левую кнопку мыши. В этой точке появится направляющая линия.

Нажав клавишу Ifsi1iftl. вы можете ограничить наклон направляющих линий углами,кратными 45°.

> Переместите указатель мыши в нижнюю точку окружности левого колеса,лежащую на противоположном конце диаметра.


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

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

>• Отпустите левую кнопку мыши. Криволинейный сегмент, огибающий колесосправа, зафиксируется (Рис. 2.113).

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

138

I . . ' - . 'Подготовка графики с помощью программ Photoshop и ImageReady

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

>• Нажмите и, не отпуская левую кнопку мыши, переместите указатель мышивправо. Появятся две направляющие линии. „

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

>• Отпустите левую кнопку мыши. Криволинейный сегмент, огибающий колесослева, зафиксируется (Рис. 2.114).

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

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

IP ' t> Нажав и удерживая клавишу I Alt I. щелкните мышью на последней точке

привязки. Эта точка будет преобразована в угловую. Ее правая направляю-щая исчезнет.

v Продолжайте рисование контура, щелчками мыши создавая прямолинейныесегменты, пока не дойдете до второго колеса.

>• Создайте вокруг второго колеса криволинейные огибающие, как это былоописано выше, после чего продолжайте рисовать прямолинейные сегменты,пока не дойдете до той точки, с которой было начато рисование контура.

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

>• Щелкните мышью в этом месте. Контур замкнется (Рис. 2.115).

139


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

Для завершения рисования не замкнутого, а открытого контура следует щелк-нуть мыщью на значке инструмента (JQ на панели инструментов (Tools).

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

Чтобы удалить или добавить новую точку привязки, воспользуйтесь, соответст-венно, инструментами [1П и [&*]. Выбрать эти инструменты в панели инструмен-тов (Tools) можно из дополнительной панели инструментов, нажав и удерживаякнопку мыши на кнопке | & ,|. Для добавления точки привязки, выбрав инстру-мент ЩП, установите указатель мыши на контуре в нужном месте. При этом ря-дом с указателем мыши появится знак +. Щелкните мышью в этой точке.

Чтобы удалить точку привязки, выберите инструмент |ф~| и установите указательмыши в той точке привязки, которую вы хотите удалить. При этом рядом с ука-зателем мыши появится знак -. Щелкните мышью. Точка будет удалена, а формакривой изменится в соответствии с оставшимися точками привязки.

Для перемещения всего контура используйте инструмент [ 1 ,|. Вы можете изме-нять форму контура, перемещая его сегменты, точки привязки и направляющиелинии инструментом |"k"|, который можно выбрать на дополнительной панели,нажав кнопку Щ.

Изменить гладкую точку на угловую и наоборот можно с помощью инструмента[Г~|- Для изменения гладкой точки на угловую без направляющих линий доста-точно просто щелкнуть инструментом [Т~| на нужной точке. Если вы хотите за-менить гладкую точку угловой с направляющими линиями, нажмите кнопкумыши и слегка сместите указатель мыши, чтобы получить направляющие ли-нии; после этого переместите одну из направляющих точек - концевую точкунаправляющей линии. Направляющие линии станут независимыми.

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

140


> Нажмите кнопку |~о~1 - Loads path as a selection (Загрузить контур, как выде-ленную область) в нижней части палитры Paths (Контуры). Вокруг изображениясамолета появится бегущая рамка выделения, а сам контур будет выключен иисчезнет с экрана.

Уменьшим масштаб отображения документа до 100%.

> Щелчком мыши выберите инструмент [Щ] - Zoom Tool (Z) (Инструмент«Масштаб» (Z)) на панели инструментов (Tools) и два раза щелкните мышью

на изображении при нажатой клавише I Alt 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


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

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

> Выберите команду меню Layer » Matting * Defringe (Слой » Обработка краев »Устранить кайму). На экране появится диалог Defringe (Устранить кайму)(Рис. 2.117).

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

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

> Нажав кнопку ОК, закройте диалог Defringe (Устранить кайму). Командабудет применена, и ореол вокруг объекта исчезнет.

142


Если вклеенное изображение было создано на черном фоне, то черную каймувокруг его границ можно удалить командой меню Layer » Matting » RemoveBlack Matte (Слой * Обработка краев * Удалить черный ореол), а если на беломфоне, то белая кайма удаляется командой меню Layer * Matting Ф Remove WhiteMatte (Слой » Обработка краев * Удалить белый ореол).

Уменьшим изображение самолета в два раза, чтобы затем поместить его «в небе».

> Выберите команду меню Edit * Transform • Scale (Правка » Преобразование »Масштаб). Вокруг изображения самолета появится прямоугольная рамка смаркерами в углах и серединах сторон, а на панели параметров (Options Bar) -элементы управления преобразованием объекта (Рис. 2.118).

Xi 1229,5 р« I Д Т||1ЬЬ,5р«] В W; 1100,0% ~\ § Hi | 100.0% || Л 10,0 , |° a H i l C M ) |» У! 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


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

> Сохраните документ, выбрав команду меню File * Save (Файл * Сохранить).

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

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

Посмотрим, как выполняется кадрирование практически, удалив узкую темнуюполосу у нижнего края фотографии, которую не удалось в достаточной степениосветлить. Кадрирование выполняется специальным инструментом |1ф| - CropTool (С) (Инструмент «Рамка» (С)).

>• Нажмите кнопку [tjT| - Crop Tool (С) (Инструмент «Рамка» (С)) на панели инст-рументов (Tools), чтобы выбрать этот инструмент..

> Установите указатель мыши, который примет форму fy, в левом верхнем углуизображения.


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

144


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

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

Если при перемещении удерживать нажатой клавишу |[s™l. то будут сохранены

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

рование, достаточно нажать клавишу |[ESC|.

>• Перемещая маркеры рамки выделения, добейтесь, чтобы кадрирующая рамкавключала все изображение, кроме узкой темной полосы у нижней границыфотографии (Рис. 2.120).

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

> Дважды щелкните мышью внутри кадрирующей рамки или нажмите клавишу

[[inter]. Фотография будет обрезана по установленной границе.

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

145


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

> Выберите команду меню Image • Image Size (Изображение * Размер изо-бражения). На экране появится диалог Image Size (Размер изображения)(Рис. 2.121).

{image Size

Width: 1 460 1 1 pixels

Height |297 || pixels Q

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

0^OK 1

| Reset |

| Auto... |

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

В верхней части диалога, в группе элементов управления Pixel Dimensions(Размерность в пикселах) указан текущий размер файла в формате PSD - 400,ЗК,а также текущие ширина (Width) и высота (Height) изображения в пикселах.У вас эти значения после кадрирования могут быть несколько иными.

В группе элементов управления Document Size (Размер документа) указаныразмеры документа в сантиметрах и его графическое разрешение (Resolution).При установленном флажке Constrain Proportions (Сохранить пропорции) про-грамма автоматически сохраняет пропорции изображения при изменении одногоиз размеров - ширины или высоты.

При изменении размеров изображения в группе элементов управления PixelDimensions (Размерность в пикселах) соответственно изменяются его характе-ристики для документа - либо его размеры, либо графическое разрешение, в за-висимости от того, установлен или сброшен флажок Resample Image (Изменитьразмер). Если этот флажок установлен, то изменяется размер документа и, соот-ветственно, объем файла с изображением. Если же флажок сброшен, то можноизменить только размеры документа. При этом, соответственно, будет изменять-ся его графическое разрешение, а размеры изображения в пикселах и объемфайла останутся без изменения.

146


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

Поскольку фотография, размеры которой мы хотим изменить, предназначенадля показа на экране, то изменять ее графическое разрешение не следует.

>• Убедитесь, что установлен флажок Resample Image (Изменить размер), чтобысохранить графическое разрешение изображения и изменить его размер.

> Установите флажок Constrain Proportions (Сохранить пропорции).

> В поле ввода Width (Ширина) группы элементов управления PixelDimensions (Размерность в пикселах) введите новое значение ширины изо-бражения в пикселах - 300. Автоматически изменится значение высоты изо-бражения в поле ввода Height (Высота), а также размер документа в группеэлементов управления Document Size (Размер документа). В верхней частидиалога вы увидите также новое, уменьшенное значение объема файла ирядом с ним, в скобках прежний объем.

> Закройте диалог Image Size (Размер изображения), нажав кнопку ОК. Уста-новленные параметры будут применены, и размер изображения в окне доку-мента уменьшится.

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

>• Выберите команду меню Filter » Sharpen • Unsharp Mask (Фильтр * Резкость *Кон-турная резкость). На экране появится диалог Unsharp Mask (Контурнаярезкость).

> Перемещая ползунковый регулятор Amount (Эффект), восстановите резкостьфотографии. Значение этого параметра должно быть в пределах 50-60%.

> Нажатием кнопки ОК закройте диалог Unsharp Mask (Контурная резкость).Резкость изображения усилится.

>• Сохраните документ, выбрав команду меню File * Save (Файл * Сохранить).

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

147


Сохраняем фото Эля 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


помощью инструмента [QT1 - Zoom Tool (Z) (Инструмент «Масштаб» (Z)), кото-рый включается кнопкой в левом верхнем углу диалога. Включенный по умол-чанию инструмент [У^1 - Hand Tool (H) (Инструмент «Рука» (Н)) позволяетперемещать изображение в окне просмотра, если его размеры превышают раз-меры окна. С помощью кнопки Q - Select Browser Menu (Меню выбора брау-зера) в нижней части диалога •вы можете открыть меню, из которого выбратьбраузер для просмотра оптимизированного изображения. Можно также нажатькнопку слева от 0, чтобы загрузить программу просмотра, определенную поумолчанию, в которой автоматически откроется оптимизируемое изображение.

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

Кнопка © - Preview Menu (Меню предварительного просмотра) над окном про-смотра справа открывает меню, команды которого позволяют имитировать ото-бражение документа в операционных системах Macintosh (Standard MacintoshColor) и 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


> Убедитесь, что установлен флажок 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


> Закройте диалог Save For Web (Сохранить для Web), нажав кнопку ОК. Наэкране появится диалог Save Optimized As (Сохранить оптимизированныйдокумент как), в поле ввода которого Имя файла (File name) уже указано имясохраняемого файла - Ozero.

> Выберите папку для сохранения оптимизированного файла.

>• Нажатием кнопки Сохранить (Save) закройте диалог Save Optimized As(Сохранить оптимизированный документ как). Файл будет сохранен на дискев указанной папке.

>• Закройте документ Ozero.psd, выбрав команду меню File » Close (Файл *Закрыть). Если появится запрос о необходимости сохранения документа, от-ветьте отрицательно.

Мы познакомились с принципами оптимизации изображений в программе AdobePhotoshop. Как вы могли заметить, они практически не отличаются от оптими-зации в Adobe ImageReady.

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

Формат GIF хотя и не сохраняет прозрачность, но позволяет присвоить в изо-бражении атрибут прозрачности выделенной области; все пикселы в пределахэтой области в браузере показываться не будут, т.е. станут невидимыми. Дляпримера создания изображения с прозрачным фоном воспользуемся фотографиейиз файла Samolet.psd.

> Откройте файл Samolet.psd, который вы сохранили в разделе о комбиниро-вании фотографий.

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

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

v Щелкните мышью на ярлыке Paths (Контуры) в третьем сверху окне палитр,чтобы открыть эту палитру.

151


>• Щелчком мыши на имени контура Path 1 (Контур 1) в палитре Paths(Контуры) выделите его. В окне документа вокруг изображения самолетапоявится контур.

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

>• Нажмите кнопку 0 в правом верхнем углу палитры Paths (Контуры) и в поя-вившемся меню выберите команду Make selection (Создать выделеннуюобласть). На экране появится диалог Make selection (Создать выделеннуюобласть) (Рис. 2.123).

I Make Selection Q

- Rendering

Feather Radius: |o | pixels

0 Anti-aliased

© New Selection

О ДО to Selection

О Subtract *om Selection

О Interact wtth Setectton

1 UK |

| Cancel |

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

В поле ввода Feather Radius (Радиус растушевки) следует указать величину ра-диуса растушевки выделения в пикселах. Растушевка делает края выделеннойобласти более расплывчатыми благодаря созданию «зоны перехода» между пик-селами выделенной области и окружающими пикселами. В этой зоне происхо-дит постепенное смешивание цветов. В результате растушевки может произойтипотеря четкости изображения вблизи границы выделенной области.По умолчанию для этого параметра предлагается значение 0 (ноль) пикселов.Оставим его без изменения.

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

> Нажав кнопку ОК, закройте диалог Make selection (Создать выделеннуюобласть). Изображение самолета будет выделено движущейся пунктирнойграницей. Автоматически будет сброшено выделение контура.

152


Удалим все изображение за пределами выделенной области. Для этого выделе-ние следует предварительно инвертировать или обратить.

>• Выберите команду меню 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


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 bemade transparent (Я должен выбрать область прозрачности). В таком случаеМастер предложит закрыть диалог и выделить нужную область.

> Установите флажок I have selected the area to be made transparent (Я выде-лил область, которая должна быть прозрачной).

> Нажмите кнопку Next (Далее). На экране появится следующий диалог ExportTransparent 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


> Установите переключатель 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 (Далее). Вы увидите следующий диалог ExportTransparent 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 toreduce the number of colors in your image by using trie IndexedColor dialog.

Puc. 2.128. Четвертый диалог Export Transparent Image Wizard(Мастер экспорта прозрачных изображений}

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

155


Indexed Coloi

г Palette: | Web h"} П

Colors: 217

&reed: | None H

0 Transparency

№tte: | None El

Dither: | Diffusion EJ

Umount: [75 _j %

П Preserve Exact Colors

i Ш «| Reset |

[7| Preview

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


Для имитации цветов, не вошедших в цветовую таблицу, в открывающемсясписке Dither (Смешивание) можно выбрать один из способов смешивания.Возможные варианты описаны в разделе «Оптимизируем и сохраняем графику».

В поле ввода Amount (Эффект) указывается числовое значение параметра Dither(Смешивание) в процентах. Высокие значения смешивают больше цветов, но имогут увеличить размер файла.

Установка флажка Preserve Exact Color (Сохранить точные цвета) предохраняетцвета таблицы от смешивания.

>• Закройте диалог Indexed Color (Индекси-рованные цвета), нажав кнопку ОК. Изо-бражение будет преобразовано в режим ин-дексированных цветов с параметрами,предложенными по умолчанию. Появитсядиалог Save As (Сохранить как).

JGIF Options

О interlaced

iLlIOiTZjl

СапсёГ~~1

Рис. 2.130. Диалог GIF Options(Параметры GIF)Откройте в этом диалоге папку Web, чтобы

сохранить в ней файл./

В поле ввода Имя файла (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 TransparencyWfeard.

Your rnage is now ready to be used online.

Puc. 2.131. Пятый диалог Export Transparent Image Wizard(Мастер экспорта прозрачных изображений)

157


>• Нажмите кнопку 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


SeteQt: I f Sampled Colors Ц

Fuzziness:

© Selection

Reset |

П Invert

Selection Preview: [None

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

Этот диалог используется для выделения в пределах некоторой области или всегоизображения пикселов заданного цвета. Для выделения нужных оттенков можновыбрать цвет из предлагаемого в открывающемся списке Select (Выделение)диапазона цветов или сформировать выделенную область на основе «проб» цве-та, взятых пипеткой непосредственно на изображении (Sampled Colors).

При установленном по умолчанию переключателе Selection (Выделение) высможете наблюдать за формированием выделенной области. Если же установитьпереключатель Image (Изображение), то в окне просмотра диалога будет ото-бражаться все изображение. Такой режим удобен, например, при сильном уве-личении, когда область, в которой вы хотите взять «пробу» цвета, не видна вокне Документа.

' - , ' , . '

>• Чтобы взять «пробу» цвета,' установите указатель мыши, который приметформу пипетки ^, на белом цвете фона изображения в окне документа ищелкните мышью. «Проба» будет взята, и таким образом будет отмечена об-ласть с белым цветом фона, которая должна быть выделена.

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

>• Установите флажок Invert (Обратить выделение). Теперь в окне просмотрадиалога черным цветом окрасится фон, а белым, соответствующим выделен-ной области, - изображение самолета.

Чтобы расширить выделенную область за счет новых оттенков, нужно выбрать вдиалоге Color Range (Цветовой диапазон) инструмент [Д] и щелкнуть на нуж-ном цвете в окне документа или в поле просмотра диалога.

159


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

Для временной активизации инструмента \$\ нужно нажать клавишу ll s h i f li. 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


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

>• Нажмите кнопку |Р| - Edit in Quick Mask Mode (Q) (Редактирование в ре-жиме «Быстрая маска» (Q)) на панели инструментов (Tools), чтобы включитьэтот режим.

Все изображение в окне документа, за исключением выделенных - незащи-щенных от изменения - областей, будет маскировано с помощью своего рода«пленки», по умолчанию окрашенной в красный цвет и имеющей 50-процентную непрозрачность (Рис. 2.133). Теперь все, что окрашено краснымцветом, - это маска - защищенная от изменения область.

Sarnolel.psd @ 100% (Quick Mask/8)

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

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

1616 - 6645


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

>• Выбрав инструмент [ ] - 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


Следующее, что нужно сделать - это скрыть ореол.

>• Выберите на панели инструментов (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


Палитра Channels (Каналы) содержит список всех цветовых каналов данногоизображения. В ней отображаются миниатюры и имена трех каналов - Red(Красный), Green (Зеленый), Blue (Синий) - в соответствии с действующимцветовым режимом. Кроме того, в программе создается еще и совмещенныйканал - RGB, отображающий результирующее изображение, который занимаетв палитре верхнюю строку. Палитра Channels (Каналы) позволяет такжеуправлять отображением отдельных каналов на экране с помощью значка ф,делая их видимыми или невидимыми.

> Просмотрите, как выглядит каждый канал, включая и выключая его отобра-жение с помощью значка •§$.

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

Создадим из выделенной области альфа-канал.

> Нажмите кнопку | О) - Save selection as channel (Сохранить выделение какканал) в нижней части палитры Channels (Каналы). В палитре появится но-вый канал - Alpha 1 (Альфа 1) (Рис. 2.135).

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

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

Созданный альфа-канал можно просмотреть.

164


Щелкните мышью в палитре 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


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


Скорее всего, на синем фоне все еще хорошо видны резкие границы, особеннов области крыльев и фюзеляжа самолета. Эти края можно растушевать инстру-ментом Пр] - Smudge Tool (R) (Инструмент «Палец» (R)). Но сделать это нужнона основном слое Background (Фон).

>> Удалите слои Layer 1 и Layer 2, перетащив их миниатюры на кнопку I ffi I -Delete current layer (Удалить активный слой) в нижней части палитрыLayers (Слои). Активным станет слой Background (Фон).

>• Восстановите выделение, выбрав команду меню Select » Load Selection(Выделе-ние» Загрузить выделение) и в появившемся диалоге LoadSelection (Загрузить выделение) нажав кнопку ОК.

>• Увеличьте масштаб отображения до 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


Обратите внимание, что весь слой 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


В описанной методике для создания прозрачного слоя мы использовали выделе-ние, полученное с помощью маски, сохраненной в альфа-канале, а для созданиямаски сформировали выделенную область, воспользовавшись командой ColorRange (Цветовой диапазон) с последующим редактированием в режиме «Быст-рая маска». Конечно, создать выделенную область для маски можно было значи-тельно проще, без использования этой команды и режима, а простым выделениемфона инструментом |'*\| - 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


В этом диалоге сохранены параметры оптимизации, применявшиеся последний раз.

При установленном флажке 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


£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


>• Выберите команду меню Filter » Render • Clouds (Фильтр » Рендеринг *Облака). Фильтр будет применен, и на изображении появится узор в виде«облаков».

Теперь применим к изображению фильтр Difference Clouds (Облака сналожением).

>• Выберите команду меню Filter * Render • Difference Clouds (Фильтр *Рендеринг * Облака с наложением). Узор на изображении изменится.

Повторное многократное применение этого фильтра создает эффект «прожилок»,который напоминает текстуру мрамора. Для повторного применения последнего

использовавшегося фильтра достаточно нажать комбинацию клавиш 1

> Нажмите несколько раз комбинацию клавиш II ctrl l+ll F 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


Рис. 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


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

Рис. 2.142. Изображение после применения фильтра Glowing Edges(Свечение краев) и настройки яркости и контраста

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

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

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

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

>• Убедитесь, что установлен флажок Preview (Предварительный просмотр),чтобы иметь возможность наблюдать в окне документа результаты измененияпараметров.

> Установите флажок Colorize (Тонирование). В диалоге изменится положениеползунковых регуляторов, а в окне документа изображение будет тонировано -приобретет красный оттенок.

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

174


гаются на цветовом круге (Рис. 2.144). Каждый цвет на этом круге характеризу-ется тремя базовыми параметрами: цветовым тоном (Hue), насыщенностью(Saturation) и яркостью (Lightness). Такое представление соответствует ужерассмотренной нами ранее цветовой модели HSB.

Для описания цветового тона обычно используетсяназвание цвета: красный, оранжевый, желтый, зе-леный и т.д. Каждый цветовой тон занимает опре-деленное положение на цветовом круге и характе-ризуется величиной угла от 0° до 360°.

Насыщенность - это степень чистоты цвета, кото-рая определяется соотношением серого цвета иданного цветового тона. Насыщенность выражает-ся в процентах от 0% - серый - до 100% - полно-стью насыщенный. На цветовом круге насыщен-ность увеличивается от центра к краю. Рис' 2Л44~ Цвет°в™ кРУг

Яркость характеризует относительную освещенность или затемненность цвета иизмеряется в процентах в диапазоне от 0% - черный - до 100% - белый.

На цветовом круге основные цвета моделей RGB и CMYK находятся в опреде-ленной зависимости: каждый цвет расположен против дополняющего его цветаи находится между цветами, из которых он получен. Например, сложение зеле-ного и красного дает желтый. Чтобы усилить какой-либо цвет, нужно ослабитьдополняющий его - расположенный напротив него на цветовом круге. Так, что-бы изменить общее цветовое решение в пользу голубых тонов, следует снизитьсодержание красного. По краю цветового круга располагаются так называемыеспектральные цвета, или цветовые тона. Эти цвета характеризуются максималь-ной насыщенностью.

Сделаем насыщенность красного оттенка изображения в окне документа макси-мальной.

>• Перемещайте ползунковый регулятор Saturation (Насыщенность) вправо инаблюдайте в окне документа, как при этом повышается насыщенность крас-ного цвета. Напомним, что на цветовом круге это соответствует движению отцентра к краю. Установите значение этого параметра -100%.

Изменим цветовой тон изображения на синий.

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

' • ' . I ' • ' • . : • ' • • • ' -

175


>• Установите значение параметра Hue (Цветовой тон) - 210. Такое значениеотражает тот факт, что на цветовом круге синий цвет, которым тонированоизображение, смещен относительно красного на 210°.

>• Нажав кнопку ОК, закройте диалог Hue/Saturation (Цветовой тон/Насыщен-ность). Установленные цветовые параметры будут закреплены.

> Сохраните документ в папке Web, в файле Fon.psd в формате Adobe Photoshop.

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

> Нажмите кнопку - 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

О Kaleidoscope Tile

Reset

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

Данный фильтр смешивает пикселы на краях изображения для создания бес-шовного фона. При установленном переключателе Blend Edges (Размытие краев)будет выполняться размытие краев рисунка для исключения швов между плит-ками при повторении изображения на Web-странице.

В поле ввода Width (Ширина) следует указать ширину полосы у края изображе-ния, в пределах которой должен происходить плавный переход. Обычно исполь-зуются значения от 5% до 15%, максимум до 20%. Воспользуемся значениемэтого параметра, предлагаемым по умолчанию, - 10 процентов.

При установленном флажке Resize Tile to Fill Image (Изменить размер плиткидля заполнения изображения), размер плиток подгоняется под размер изображения.Если данный флажок сбросить, то плитки будут меньше размера изображения навеличину, определенную параметром Width (Ширина), и на Web-странице онине будут вплотную прилегать друг к другу.

176


Установка переключателя 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

r View Document As •

©Image О Background

-Background Image-

Eath: [ | Choose... |

I Caned

Prev

I Next (

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

>• Установите переключатель Background (Фон), чтобы использовать активноеизображение в качестве фона Web-страницы.

> Закройте диалог Output Settings (Параметры вывода), нажав кнопку ОК.

Теперь можно просмотреть фон в браузере.

177


>• Выберите команду меню 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: OIFDimensions: lOOwxlOOh1Ьж4ШСSettings: Selective, 16 Colon, IOC*/. Diffusion Dither, Tnnspuincy on. No Tnnspmncy Dither, Interkced, 0*/. Web Snap

<heml>«body bgcolor""*FFFFFF" le£CM»rgin«"0" top»at7in-"0" Mftcginwidth«"0" »arginhtighta"0" bftckgrouxid«"imBg«c/Von.</body>

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

> Закройте окно браузера, нажав кнопку [х] в правом верхнем его углу.

Чтобы изготовленное изображение можно было использовать как фон Web-страницы, его необходимо оптимизировать и сохранить в Web-формате.

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

178


>• Подберите наилучшие, с вашей точки зрения, параметры оптимизации в фор-мате 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 (Облака) и DifferenceClouds (Облака с наложением). Применяя различные эффекты к одноцветнымили полутоновым изображениям, вы можете создавать самые разнообразныетекстуры. Ниже кратко описаны еще некоторые способы изготовления фоновыхтекстур. Причем указанные параметры фильтров не являются строгообязательными. Вы можете варьировать их в широких пределах, получаякаждый раз новый эффект.

ШероховатостьВ программе Adobe Photoshop создайте новый документ размером ЮОх 100 пик-селов с белым цветом фона и черным цветом переднего плана.

>• Залейте изображение черным цветом.

> Примените фильтр Add Noise (Добавить шум), выбрав команду меню Filter »Noise » Add Noise (Фильтр * Шум » Добавить шум) с установленным пере-ключателем Uniform (Равномерное), флажком Monochromatic (Сохранитьоттенки) и параметром Amount (Эффект) равным 400 (Рис. 2.148).

179


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

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

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

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

Шлифованная плиткаСоздайте новый документ размером 100х 100 пикселов и с белым цветом фона.

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


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

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

180


>• Примените фильтр 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).


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

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

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

181


Выделите изображение альфа-канала в окне документа командой 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.

El On.|n>fmi>j<- Neaativ«

Focur Narrow

P r'

гц„,. Matte

Material- PI*5'!0

EBp0?V|tr Under

Ambi-ncf Negative

21

92

-79

68

0

32

_I-J —

FullБ

Wide

^

Shiny

Metallic

Over

Positivejlj

E3 Preview

•Texture Channel: [Alpha 1

El White is high

Height:

Ja-Flat 50 Mountainous

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

182


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

> Тонируйте изображение, воспользовавшись диалогом Hue/Saturation (Цвето-вой тон/Насыщенность).

Для создания фоновых текстур, кроме описанных фильтров, попробуйте исполь-зовать фильтры Colored Pencil (Волшебный карандаш), Sponge (Губка), Grain(Зерно), Craquelure (Кракелюры), Chalk & Charcoal (Мел и уголь), Mezzotint(Меццо-тинто), Mosaic (Мозаика), Halftone Pattern (Полутоновой узор), NotePaper (Почтовая бумага), 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 закрыты все документы, пе-рейдите в программу Adobe ImageReady, нажав кнопку - Edit inImageReady (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), чтобы включить этот инструмент.

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

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

Рис. 2.158. Графическоеменю

184


>• Установите указатель мыши, который примет форму /, в левом верхнем углуокна документа.

Нажмите и удерживайте левую кнопку мыши. В левом верхнем углу фрагментапоявятся два серых значка-индикатора [оТЩ. Левый значок означает порядковыйномер фрагмента, а правый - его тип - изображение. Фрагменты нумеруются попорядку слева направо и сверху вниз.

>• Не отпуская левую кнопку мыши, переместите указатель мыши вправо и внизтак, чтобы надпись Главная страница находилась в середине нарисованногопрямоугольника.

> Отпустите левую кнопку мыши. Первый поль-зовательский фрагмент будетвырезан и окружен рамкой выделения с квадратными маркерами в углах исерединах сторон (Рис. 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


Если размер вырезанной части изображения вас не устраивает, то его легкоможно изменить, переместив маркеры выделения с помощью инструмента \№\ -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). Разметка.фрагментов будет скрыта.

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

186


Нарезать изображение можно и другим способом - создав выделенную областьи выбрав команду меню 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


> Выберите команду меню 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 rolloverstate (Создать новое состояние) в нижней части палитры Web Content(Содержимое Web).

>• Создайте выделенную область из фрагмента с помощью команды менюSelect • Create Selection from Slice (Выделить * Создать выделение изфрагмента).

> Создайте новый слой - Layer 2 - в палитре Layers (Слои) и залейте выделен-ную область темно-синим цветом.

Будет определен эффект Rollover (Наведение) для второго фрагмента. »

> Действуя описанным способом, создайте эффект Rollover (Наведение) дляостальных фрагментов изображения.

188


После того как изображение нарезано и для фрагментов создан эффект Rollover(Наведение), у вас есть два варианта дальнейших действий. Можно сохранитьготовые фрагменты изображения и затем вручную в текстовом редакторе вста-вить ссылки на них в код HTML. Но можно ввести адреса ссылок для каждогофрагмента в программе Adobe ImageReady и сохранить вместе с нарезаннымичастями изображения также и HTML-файл, который будет создан автоматическис уже готовым меню. Назначение ссылок фрагментам изображения выполняетсяс помощью палитры Slice (Фрагмент).

>• Щелкните мышью при выбранном инструменте |5У] - Slice Select Tool (О)(Инструмент «Выбор фрагмента» (О)) в окне документа на первом фрагментеизображения с надписью Главная страница, чтобы выделить его.

> Выберите команду меню Window * Slice (Окно * Фрагмент). На экране поя-вится палитра Slice (Фрагмент) (Рис. 2.162).

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

В открывающемся списке Туре (Тип) вы можетевыбрать тип фрагмента из трех вариантов: Image(Изображение), No Image (He изображение) и Table(Таблица). По умолчанию тип всех фрагментов -Image (Изображение), т.е. содержащий графическиеданные. Для фрагментов, содержащих не графику, атолько сплошной цвет или текст, следует устанав-ливать тип No Image (He изображение). При этомвид палитры Slice (Фрагмент) изменится, и вы смо-

| i SliceXTableX'mage M<

Type: Image ~ |

Name: rnenujl

URL: |~

Target;

Alt:

t> Dimensions

t» Cell Alignment

t> Background

t> Status Bar Message

?4 ' ®

„ю—.*.—!

~ZI -d

. . . . . . . . .iil

/Й

Рис. 2.162. Палитра Slice(Фрагмент)

жете ввести нужный текст в специальном поле ввода, а в расширяемой частиBackground (Фон) выбрать цвет фона для текстового фрагмента из открываю-щегося списка Color (Цвет) (Рис. 2.163). Текст, который вы введете, в окне до-кумента не отобразится. Его можно будет увидеть только в браузере.

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

> В поле открывающегося списка URL введите имя файла geoton.html.

Напомним, что, создавая сайт компании ГЕОТОН, мы использовали технологиюфреймов, разделив экран по вертикали на два окна: в левом отображается менюиз файла menu.html, а в правом - страницы сайта. Правому фрейму присвоеноимя frame. Чтобы определить, в какой фрейм должна загружаться Web-страница, следует указать его имя в поле открывающегося списка Target (Цель).

189


> В поле открывающегося списка Target (Цель) введите имя правого фрейма -frame.

В поле ввода Alt (Альтернативный) вы можете указать значение атрибута altтега <img>. Введенный текст будет отображаться вместо графического фраг-мента в текстовых браузерах, а также, если функция загрузки графики вы-ключена, в некоторых браузерах в процессе за-грузки изображения и как всплывающая подсказка.

-J

URLl |gtoton.Nrnl

Target: ||«m«__

•V Dimensions

Xl

Hi

Г" Constrain Proportions

- Oil Alionm.nt

Horln

V«rti iDtfauk »i

<? Background

Color: I None i •

"Ы Status Bar Message

>• В поле ввода Alt (Альтернативный) введитеГлавная.

> Нажмите кнопку © в правом верхнем углу па-литры Slice (Фрагмент) и в появившемся менювыберите команду Show Options (Показатьпараметры). Палитра развернется, и вы уви-дите дополнительные элементы управления(Рис. 2.163).

С помощью элементов управления Dimensions(Размеры) можно указать точные координаты X иY левого верхнего угла фрагмента, а также изме-нить его ширину (W) и высоту (Н). Чтобы сохра-нить пропорции фрагмента при изменении одно-то из параметров - ширины или высоты, следуетустановить флажок Constrain Proportions (Со-хранить пропорции).

В поле ввода Status Bar Message (Сообщение встроке состояния) можно ввести текст; который бу-дет отображаться в строке состояния (Status Bar)браузера при установке указателя мыши на данномфрагменте. Если это поле ввода оставить пустым, то по умолчанию, в строкесостояния браузера отображается адрес URL связанного с фрагментом документа.

Подобным же образом определим ссылку для второго фрагмента изображения снадписью Чем мы занимаемся?

v Щелкните мышью в окне документа на фрагменте 02 с текстом Чем мы за-нимаемся?, чтобы выделить его. В палитре Slice (Фрагмент) отобразятсяпараметры этого фрагмента.

v В поле открывающегося списка URL введите имя файла - spisok.html, накоторый фрагмент должен ссылаться.

> В поле открывающегося списка Target (Цель) введите имя правого фрейма -frame, в который должен загружаться файл spisok.html.

11 Slice XTtbbXImagt Мар^у

Typti [b

Name: j menuJH

Puc. 2.163. Развернутаяпалитра Slice (Фрагмент)

190


>• В поле ввода Alt (Альтернативный) введите текст: Чем мы занимаемся?

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

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

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

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

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

Для выделения всех фрагментов вы можете также воспользоваться командойменю 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


> Нажатием кнопки 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


, Output Sellings

Preset: [Custom OK

[HTML

П Output XHTML

Formatting

Tags Case: [Lowercase (body)

Attribute Case: [lowercase (rowspan)

Indent: [Tabs

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

Cancel

Brev

I Next

I Load...

I Save...

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), то будут создаваться каскадные таблицы стилей. При этом

1937 - 6645


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

Preset: [custom щ|

MCOl LU

0 Generate Table

Empty Cete: |GIF, IMG W&H И

TD W&H: |Auto И

Spacer Cels: [Auto (Bottom) [»]

О Generate CSS

Referenced JBy Ю [j]

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

|none [«] + [none Щ+|попе |»|

Example: MyFle.Ol

1 OK

| Erev

[ jsgxt

| Load...

| gave...

Рис. 2.165. Диалог Output Settings (Параметры вывода)с набором элементов управления Slices (Фрагменты)

Для использования таблиц HTML следует установить флажок Generate Table(Генерировать таблицу) и в открывающемся списке TD W&H указать, включать лив код HTML атрибуты ширины и высоты ячеек таблиц: Always (Всегда), Never(Никогда), Auto (Автоматически). С помощью открывающегося списка EmptyCells (Пустые ячейки) можно определить, как заполняются пустые ячейки.

Для набора элементов управления навигационных карт (Image Maps) (Рис. 2.166)можно выбрать тип карты, а с помощью переключателей Placement (Положе-ние) - определить в каком месте HTML-кода должен быть помещен тег <тар>.Подробнее о картах навигации будет рассказано в следующем разделе.

>• Для настройки параметров файлов сохраняемых изображений во второмсверху открывающемся списке без названия выберите Saving Files (Сохране-ние файлов). В диалоге отобразятся соответствующие элементы управления(Рис. 2.167).

При установленном флажке Put Images in Folder (Поместить изображения впапку) все фрагменты будут сохранены в папке, имя которой указано в поле вводасправа, по умолчанию - images. Вы можете указать другую папку или же сбро-сить флажок, чтобы сохранять изображения в той же папке, что и HTML-файл.

194


Preset: [Custom |*]|

Э Client-Side

О NCSA Server-Side

О CERN Server-Side

О Client-Side and NCSA Server-Side

О dent-Side and CERN Server-Side

„, _^

О Top О Body 0 Bottom

•

i авнъ i1 &ev |

1 Mext 1

I Load... |

1 Save... |

Puc, 2.166. Диалог Output Settings (Параметры вывода) с наборомэлементов управления Image Maps (Навигационные карты)

Output Settings

Preset: |custom [3

л i (

0 Put Images in Folder: j triages I

О Use Long Filename Extensions (Jpeg, .wbmp)

0 Copy Background Image when Saving

| 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

1 &ev 1

| №xt |

| ipad... |

| gave... |

Puc. 2.167. Диалог Output Settings (Параметры вывода)с элементами управления Saving Files (Сохранение файлов)

195

Установленный флажок 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 таблица с фрагментамиизображения находится между комментариями и<!-- End ImageReady Slices —>. При необхо-димости этот фрагмент кода можно скопировать в буфер обмена и затем вставитьв любой HTML-документ. Меню будет работать.

196


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

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

•••••'" ' • - . - • ' ' . . " . - . " " • '.

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

Adobe ImageReady предлагает два способа создания навигационных карт: с по-мощью специальных инструментов, в частности, |Щ] - Rectangle Image MapTool (P) (Инструмент «Прямоугольная область карты навигации» (Р)), или же изслоев изображения. Используя инструменты, вы просто рисуете, так же, как иинструментами выделения, область определенной формы: прямоугольной, круг-лой или многоугольной, а затем назначаете этой области адрес URL.

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

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

> Откройте файл Samolet.psd в программе Adobe Photoshop.

197


Сделаем так, чтобы щелчок мышью на изображении самолета на переднемплане загружал в окно браузера файл 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


^К?Ю1

Duplicate: Background

As: I Background copyI o* '

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


Nan»: | ImageMipJ)!

в ее расширяемой части, Layer Based Settings (Параметры слоя), появитсяоткрывающийся список Shape (Форма) (Рис. 2.170).

В открывающемся списке Shape (Форма) следует выбрать форму участка изо-бражения, которому будет назначена URL-ссылка. В отличие от нарезанныхфрагментов, форма которых может быть только прямоугольной, карты навигации,кроме прямоугольной (Rectangle), могут иметь также участки круглой (Circle) имногоугольной.(Polygon) формы. Причем форма и размер этих участков, реаги-рующих на щелчок мыши и называемых «горячимизонами» (hotspots), автоматически подбирается так,чтобы они в максимальной степени соответствова-ли непрозрачной части слоя. При выборе много-угольной (Polygon) формы Adobe ImageReady соз-дает контур в виде многоугольника вокруг непро-зрачной области. Если же вы выберете прямо-угольную (Rectangle) или круглую (Circle) форму,то создается фигура минимально возможных раз-меров, окружающая непрозрачный участок слоя, вкоторую включаются также прозрачные области.Когда, работая в программе просмотра Web-страниц,вы щелчком мыши выбираете «горячую зону» на-вигационной карты, форма выбранного участкаотображается на рисунке в виде прямоугольника,круга или многоугольника. Предлагаемая по умол-чанию прямоугольная (Rectangle) форма отобра-жается в окне документа в виде прямоугольнойрамки, ограничивающей изображение самолета.

URL: |

Target: |

Alt: |

ии

i• Layer Based Sellings

Shape; | Rectangle^

//,

Рис. 2.170. Развернутаяпалитра Image Map(Карта навигации)

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

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

URL: [_

Tirg.li £

"' С

"W Layer Based Sellings

Shape: I Polygon

Quality:

Puc. 2.171. Для областиссылки выбрана форма

Polygon (Многоугольник)

Параметр Quality (Качество) позволяет указать степень отклонения формы мно-гоугольника от формы непрозрачной части слоя.

v Нажмите кнопку И у правого края поля ввода Quality (Качество) и с помо-щью появившегося ползункового регулятора установите значение этого па-

200


раметра 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


> Если палитра Optimize (Оптимизация) отсутствует на экране, выберитекоманду меню Window • Optimize (Окно • Оптимизация).

>• В открывающемся списке Settings (Установки) палитры Optimize (Оптими-зация) выберите набор параметров JPEG (JPEG). Параметры, соответствую-щие этому набору, отобразятся в палитре.

>• В открывающемся списке Quality (Качество) выберите High (Высокое).

> Щелкните мышью на ярлыке 2-Up (2 варианта) в верхней части окна доку-мента. Будет выполнена оптимизация с выбранными параметрами.

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

Сохраним оптимизированное изображение.

>• Выберите команду меню File * Save Optimized (Файл » Сохранить оптими-зированный документ). На экране появится диалог Save Optimized (Сохране-ние оптимизированного документа) (Рис. 2.92), в поле ввода Имя файла (Filename) которого указано имя сохраняемого документа - 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


>• Нажмите кнопку 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), который вызывается из диалога SaveOptimized (Сохранение оптимизированного документа) или командой меню 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


Структура файла

Чтобы лучше понять, как работает 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


После создания анимационного 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.


> Выберите команду меню File •> Open (Файл * Открыть). На экране появитсядиалог Открытие файла (Open) (Рис. 4.2).

QAdob.

eceived Filet2) 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 (Создание промежуточных кадров) -автоматически генерирует промежуточные кадрымежду двумя указанными.

I a I - Duplicates current frame (Дублирование теку-щего кадра) - создает копию выбранного кадра.

\9 | - Deletes selected frames (Удаление выбранныхкадров) - удаляет выбранные кадры.

В правом верхнем углу палитры Animation (Ани-мация) находится кнопка ©, открывающая доступ кменю палитры (Рис. 4.5). С помощью команд этогоменю можно создавать, удалять, копировать, встав-лять и выделять кадры, генерировать промежуточ-ные кадры, оптимизировать анимацию и выполнятьнекоторые другие операции.

Dock to Palette Wel

Нем F»

Copy FlameP**t% FIMM...

SitactAIFujMt

Optimize Animation...

Make Frame* From LayersFlatten Flames Into Layers

Create Layer loi Each New Frame»• New Layers Visible in All Slates/Fra

Palette Option»...

Puc. 4.5. Меню палитрыAnimation (Анимация)

211


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

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

Напомним, что анимационные GIF-файлы - это последовательность кадров сзаданной длительностью. Эти кадры в Adobe ImageReady создаются из слоев.Слои же, в свою очередь, следует предварительно подготовить в самой про-грамме или же в Adobe Photoshop.

Создадим эффект анимации баннера из файлаGeoton.psd таким образом, чтобы надписи Вам нуж-на локальная сеть? и Заходите СЮДА! последо-вательно сменяли друг друга через определенныепромежутки времени и чтобы рисунок открытойдвери появлялся после надписи Заходите СЮДА!.

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

> Увеличьте высоту палитры Layers (Слои),чтобы в ней были видны все имеющиеся слои(Рис. 4.6).

BID

Effects

О Drop Shadow

ff Bevel and Emboss

4i i»-i o. a | ш а

Puc. 4.6. Слои в палитреLayers (Слои)

212


Благодаря наличию значков с изображением открытого глаза ф, вы можете вы-ключить и включить отображение слоев и эффектов на рисунке и текущем кадреанимации и таким образом указать программе, что должно отображаться на дан-ном кадре. Для первого кадра мультипликации следует выключить отображениеслоя 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


Добавим еще один кадр анимации.

>• Нажмите кнопку 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 (Удаление выбранных кадров),

предварительно выделив их щелчками мыши при нажатой клавише lshit ll. если

кадры смежные (в этом случае достаточно щелкнуть мышью только на крайних

кадрах), или при нажатой клавише 1^4. если кадры несмежные. Удалить выбран-

ные кадры можно также командой меню Delete Frame (Удалить кадр) палитрыAnimation (Анимация).

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

214


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

Чтобы выделить несколько кадров, следует удерживать нажатой клавишу If c t r l 1.

> Нажмите и удерживайте клавишу IС1г| I.

> Не отпуская клавишу Itctr l 1. щелкните мышью в палитре Animation (Анимация)поочередно на не выделенных темным цветом кадрах анимации. Эти кадрыбудут выделены.

>• Отпустите клавишу IC t r l I.

Выделить все кадры анимации в палитре Animation (Анимация) можно также спомощью команды меню палитры Animation (Анимация) Select All Frames(Выделить все кадры).

Теперь, когда все три кадра анимации выделены, устано-вим для каждого из них время задержки, равное 1 секунде.

>• Щелкните мышью в палитре Animation (Анимация) наминиатюрном значке-треугольнике т - Selects framedelay time (Выбор времени задержки кадра) справа отнадписи 0 sec. под миниатюрой первого кадра. На эк-ране появится меню времени задержки (Рис. 4.9).

> В появившемся меню выберите 1.0 (1 секунда). Этозначение- 1 sec. - отобразится в палитре Animation(Анимация) под миниатюрами всех трех кадров.

Просмотрим полученный результат.

No delay0.1 seconds

0.20.51.02.05.010.0

Othei..

0 seconds

Рис. 4.9. Менювремени задержки

> Нажмите кнопку ГР1 - Plays/Stops animation (Проигрывание/Остановкаанимации) в нижней части палитры Animation (Анимация). Начнется проиг-рывание эффекта. Изображение кнопки ГР~1 изменится на | а |.

В окне документа вы увидите, как периодически сменяются надписи Вам нужналокальная сеть? и Заходите СЮДА! Причем после появления надписи Захо-дите СЮДА! появляется также рисунок открытой двери. В процессе проигрыва-ния в палитре Animation (Анимация) будет перемещаться выделение, отмечаятекущий кадр.

> Нажмите кнопку I D I - Plays/Stops animation (Проигрывание/Остановкаанимации) в нижней части палитры Animation (Анимация), чтобы прекра-тить проигрывание эффекта.

Увеличим время показа на экране первого кадра анимации до 1,5 секунд. Пред-варительно этот кадр нужно выделить.

215


> Нажмите кнопку 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


•

Set Loop Count

Play: 1 1 | times | OK

| Cancel

I

1

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

> Щелкните мышью на свободном пространстве рабочего окна, чтобы скрытьменю повторений.

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

«Метущие», постепенно поя&ляюшиесяи исчезающие рисункиВ предыдущих разделах мы создавали и изменяли каждый кадр анимации вруч-ную. Но Adobe ImageReady позволяет автоматически сгенерировать последова-тельность кадров между двумя указанными и отличающимися друг от другакадрами, которые в совокупности создадут плавный переход от первого кадра кпоследнему. Для автоматически созданных кадров можно также определить, чтоименно должно изменяться: положение объектов, их прозрачность или эффекты,или же все эти три атрибута одновременно.

Изменим анимацию таким образом, чтобы надпись Заходите СЮДА!, конкрети-зируя приглашение, двигалась в направлении постепенно появляющейся откры-той двери и «заходила» в нее. Но сначала изменим время задержки второго итретьего кадров на 0,2 секунды.

> Щелкните мышью на втором кадре в палитре Animation (Анимация),чтобы выделить его.

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

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

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

217


Теперь для третьего кадра анимации следует изменить положение слоя Layer 3так, чтобы правый край надписи Заходите СЮДА! на этом слое «входил»в открытую дверь.

> Щелкните мышью на миниатюре третьего кадра. Этот кадр станет активным,а выделение второго кадра будет снято.

Переместим слой Layer 3 в окне документа вправо, предварительно выделив его.

> Щелкните мышью на названии слоя Layer 3 в палитре Layers (Слои). Слойбудет выделен.

> Нажмите кнопку [>»] - Move Tool (V) (Инструмент «Перемещение» (V)) напанели инструментов (Tools), чтобы выбрать данный инструмент.

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

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

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

ri psd <•?> 100% (Uiigin

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

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

> Отпустите клавишу lshml.

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

нажимая клавишу l shml. Напомним, что в этом случае каждое нажатие стре-

лочной клавиши перемещает слой на один пиксел в соответствующем на-правлении.

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

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

>• В палитре Animation (Анимация) щелкните мышью на миниатюре второгокадра, чтобы выделить его вдобавок к третьему, уже выделенному кадру.

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

218


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

>• Нажмите кнопку |°ч,| - Tween (Созданиепромежуточных кадров) в нижней частипалитры Animation (Анимация). На экранепоявится диалог Tween (Промежуточныекадры) (Рис. 4.13).

Этот диалог можно вызвать также командойTween (Промежуточные кадры) из меню па-литры Animation (Анимация).

В данном диалоге переключатели Layers(Слои) позволяют указать, должны ли присут-ствовать в добавленных кадрах все видимыеслои (All Layers) или только активный слой(Selected Layer).

Iween With: [selection

james to Add: |5 |

0 Al LayersО Selected Layers

0 Position

0 Opacity13 Effects

I Cancel |

\

/

Puc. 4.13. Диалог Tween(Промежуточные кадры)

> Убедитесь, что установлен переключатель 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


> Нажмите кнопку |"F1 - Plays animation (Проигрывание анимации) в нижнейчасти палитры Animation (Анимация) и просмотрите созданный эффект.

Вы увидите, что теперь, после исчезновения надписи Вам нужна локальнаясеть?, возникает надпись Заходите СЮДА!, которая движется в направлениипостепенно появляющейся «открытой двери» и «заходит» в нее.

>• Остановите проигрывание анимации нажатием кнопки | а |.

Анимация готова. Теперь'ее нужно оптимизировать и сохранить в формате GIF.

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

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

>• Нажмите кнопку 0 в правом верхнемуглу палитры Animation (Анимация)и в появившемся меню выберитекоманду Optimize Animation (Опти-мизация анимации). На экране поя-вится диалог Optimize Animation(Оптимизация анимации) (Рис. 4.15),в котором определяются параметрыоптимизации анимации.

1 Optimize Animation

0 Bounding Box

0 Redundant Pixel Removal

1 OK |

| Cancel |

Puc. 4.15. Диалог OptimizeAnimation (Оптимизация анимации)

При установленном по умолчанию флажке Bounding Box (Граничные области)Adobe ImageReady в каждом кадре удаляет те фрагменты изображения, которыеприсутствовали в предыдущем кадре, и сохраняет только измененные, по срав-нению с предыдущим кадром, области.

220


При установленном флажке 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


Д

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

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

romit:01FDimensions: 468vr x 60hSae:22.«KSettings. 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


Папка:

no)CLOUD]FoniSamolet

^мя Файла:

1ип Файла:

Settings:

Sleet:

[Geolon

| Images ОпИ'.д») | Отмена

[ DetauH Sellings

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: [email protected]Интернет-магазин: www.3st.ru

КНИГА-ПОЧТОЙ: 125438, г.Москва, а/я 18 «Триумф». E-mail: [email protected]

ОТВЕТСТВЕННЫЕ ЗА ПЕРЕГОВОРЫ:

Региональные магазины - директор по развитию Волошин Юрий

Московские магазины - главный менеджер Малкина Елена

Оптовые покупатели - коммерческий директор Марукевич Иван

Идея, план и примеры книги В.Н. Печников.

Дизайн обложки Борис Клюйко.

Корректор Е.В. Акиева.

Верстка Е.О. Русакова.• (

ООО «Лучшие книги».125438, г. Москва, а/я 18.

, V

Подписано в печать с оригинал-макета 23.03.2005 г.Формат 70хЮО'/|6. Печать офсетная. Печ. л. 14.

Заказ №6645.

Тираж 3 500 экз.•

Отпечатано в полном соответствии с качеством предоставленных диапозитивовв ОАО «Можайский полиграфический комбинат»

143200, г. Можайск, ул. Мира, 93

Издательская группа «ТРИУМФ» представляетЛУЧШИЕ КНИГИ ДЛЯ ВАШЕГО МАГАЗИНА

Интернет-магазин

www.3st.ru

9 l l 7 8 5 9 3 6 l l 7 3 0 4 8 l

Телефон для товароведов: (095) 720 07 65 E-mail: [email protected]

adobe photoshop для web (печников)

Documents