Adobe Photoshop для Web

здесь вы узнаете <а href-"sp1sok.html">o нашей деятельности, о программных продуктах нашей компании об оборудован которое мы npoH3BOAHM

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

30

Графика для Web-страниц » •* » О и fl I ^Search 31 Favorite» OHisloiy | %~ S ЕЯ »

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

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

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

Adobe Photoshop для Web <style type="text/css"> Следующее, что нужно сделать - это присвоить стили элементам HTML. В общем случае присвоение стиля элементу выглядит так: название_элемента { свойство: значение }, где название_элемента - это имя HTML-тега, например, hi, p, body, а параметры в фигурных скобках - перечень свойств элементов и присвоенных им значений. Например, чтобы указать, что все абзацы, описываемые тегами <р>... текущего Web-документа, должны иметь полужирное курсивное начертание шрифта с размером 150% и выравнивание по центру, следует присвоить этому элементу стили следующим образом: <style type= 1 I text/css"> p { font-weight: bold; font-style: italic; font-size: 150%; text-align: center } Напомним, что такие стили мы присвоили элементу <р>... на нашей первой Web-странице - geoton.html - и сделали это с помощью атрибута style. При этом стили были присвоены только данному элементу <р>.. . . Если же стили определяются в заголовке документа указанным выше способом, то они присваиваются всем элементам <р>.. . данной страницы. Но нам требуется вставить рисунок, который. будет служить фоном Webстраницы. Для этого в теге <style> элементу body должно быть присвоено свойство background-image, значением которого должен быть URL-адрес файла с изображением. Этот адрес в языке таблиц стилей указывается в скобках после символов url так: url("BG.JPG n ). На основании сказанного, элементу body в теге <style> нужно присвоить следующий стиль: body { background-image: url("BG.JPG") } >• Вставьте пустую строку между открывающим тегом <style> и закрывающим тегом и введите указанный код, определяющий стиль элемента body. Элемент HTML <style>... должен выглядеть следующим образом: »

<style type="text/css"> body { background-image: url("BG.JPG") } 32

4

Графика для Web-страниц >• Сохраните файл spisok.html и откройте его в программе-браузере. Вы увидите, что установленный ранее цветной фон заменен изображением из файла BG.JPG и текстовое содержимое документа отображается теперь на новом фоне. v Если текст плохо виден на новом фоне, измените его цвет с помощью атрибута text тега-:body>, например, . Когда вы просмотрите текущий документ, воспользовавшись вертикальной полосой прокрутки, то увидите, что в нижней части страницы фоновое изображение повторяется. Если у вас установлено разрешение монитора 1024x768 или выше, то повторение будет и справа. Во всех случаях, когда размер фонового рисунка меньше размера текущей страницы, браузер по умолчанию повторяет рисунок по вертикали и по горизолтали. Но вы можете указать программе просмотра не повторять рисунок, т.е. выводить его только один раз. Для этого используется свойство background-repeat со значением no-repeat: background-repeat: no-repeat. >• Вставьте указанное свойство в код HTML файла spisok.html так, чтобы элемент <style> — принял следующий вид: <style type="text/css"> body { background-image: ur1("BG.JPG"); background-repeat: no-repeat } Теперь в окне браузера фоновый рисунок занимает только верхнюю часть документа. Нижняя и, возможно, правая часть, в случае высокого разрешения монитора, заполнена однотонным фоном, который вы установили ранее. Свойство background-repeat может иметь также следующие значения: • repeat - фон повторяется как по горизонтали, так и по вертикали; это значение устанавливается по умолчанию; • repeat-х - фон повторяется только по горизонтали; • repeat-у - фон повторяется только по вертикали. Положение фонового рисунка на странице можно изменить с помощью свойства background-position. В качестве значений этого свойства указываются ключевые слова, характеризующие положение изображения по вертикали - top (вверху), center (по центру), bottom (внизу) - и по горизонтали - left (слева), center (по центру), right (справа). Первым должно указываться вертикальное положение. Например, код background-position: center center выровняет рисунок по центру страницы как по горизонтали, так и по вертикали.

33 2 - 6645

Adobe Photoshop для Web >• Добавьте в описание свойств элемента body файла spisok-html свойство background-position: center center. Элемент <style>...в этом файле должен принять следующий вид: <style type="text/css"> body { background-image: u r l ( " B G . J P G " ) ; background-repeat: no-repeat; background-position: center center }

,

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

,

Теперь вы увидите, что при прокрутке страницы фоновое изображение остается неподвижным, а текст и другие элементы Web-страницы перемещаются относительно фона. Как видите, использование языка каскадных таблиц стилей предоставляет больше возможностей для представления фонового изображения на Web-странице, чем применение атрибута background в теге . Изображения для использования в качестве фона и рисунков в своих Webстраницах вы можете свободно загрузить со следующих Web-сайтов: http://www.abcgiant.com/ http://barrysclipart.com/ http://www.arttoday.com/

34

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

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

35

Adobe Photoshop для Web

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

36

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

А А Рис. 1.13. Графический текст несглаженный (слева) и сглаженный (справа)

Г Л А В А 2.

Подготовка графики с помощью Adobe ftiotoshop C5

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

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

Знакомство с рабочим окном программы i Начнем работу с Adobe Photoshop. > Для запуска программы нажмите кнопку Пуск (Start) на Панели задач (Taskbar) и из появившегося главного меню 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 кого диска и предлагается назначить для первичного виртуального диска Photoshop другой раздел жесткого диска или, еще лучше, другой физический жесткий диск (Рис. 2.2). Adobe Photoshop i S j You currently have Adobe Photoshop's primary Scratch and Windows' ЧА/ primary paging file on the same volume, which can result in reduced performance. It is recommended that you set Adobe Photoshop's primary Scratch volume to be on a different volume, preferably on a different physical drive.

Puc. 2.2. Диалог с предложением назначить другой жесткий диск для первичного виртуального диска Photoshop Виртуальные диски программы Photoshop (Scratch disks) используются тогда, когда для выполнения операции не хватает оперативной памяти. В диалоге Preferences (Настройки), который вызывается с помощью команды меню Edit * Preferences • Plug-Ins & Scratch Disks (Правка » Настройки • Плагины и виртуальные диски) можно назначить до 4-х виртуальных дисков. Их рекомендуется назначать на наиболее свободных и нефрагментированных жестких дисках. >• Нажмите кнопку О К, чтобы закрыть диалог. На экране появится диалогзапрос Adobe Photoshop о настройке параметров цвета (Рис. 2.3). Color settings for Photoshop 6 will be configured usrig default settings. Do you wish to customise your color settings new?

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

39

Adobe Photoshop для Web

Tips and Tricks Tips and Tricks From the Experts Cotar Management Setup Щ setting Up Color What's New f New Features At A Glance New Feature HigHights What's New Movie (Onlhe)

Puc. 2.4. Диалог для знакомства с программой > Нажмите кнопку Close (Закрыть). На экране появится рабочее окно программы Photoshop (Рис. 2.5). Значок системного меню

i

Заголовок окна

Полоса меню

Кноп|(а

сворачивания окна

Кнопка разворачивания :

C Adobe Photoshop

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

Кнопка

закрытия

кна — , 1 I

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

1

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

41

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

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

-Р Selection Tool (А) (Инструмент «Выбор контура» (А)) - позволяет выбирать контуры. Этой же кнопкой включается инструмент [W] - Direct Selection Tool (А) (Инструмент «Прямой выбор» (А)), который позволяет выбирать сегмент контура. - Pen Tool (Р) (Инструмент «Перо» (Р)) - создает контур любой формы. Этой кнопкой включаются также инструменты, позволяющие добавлять и удалять точки привязки на линии и преобразовывать плавные кривые в ломаные и наоборот.. - Notes Tool (N) (Инструмент «Комментарии» (N)) - создает текстовые комментарии, которые могут быть добавлены к изображению. Этой кнопкой включается также инструмент [Ц] - Audio Annotation Tool (N) (Инструмент «Аудиокомментарий» (N)), позволяющие добавлять к изображению аудиокомментарий. [f5]-Hand Tool (Н) (Инструмент «Рука» (Н)) - применяется для перемещения изображения, которое не умещается в рабочем окне. В правом вертикальном ряду панели Tools содержатся следующие инструменты: [KjT| - Move Tool (V) (Инструмент «Перемещение» (V)) - позволяет перемещать выделенные области и слои. [\]-Magic Wand (W) (Инструмент «Волшебная палочка» (W)) - выделяет фрагменты изображения с учетом сходства цветов соседних пикселов. [^]-Slice Tool (К) (Инструмент «Фрагмент» (К)) - позволяет разрезать изображение на фрагменты для ускорения их загрузки в браузер. При помощи другого инструмента- \^\- Slice Select Tool (К) (Инструмент «Выбор фрагмента» (К)), который включается этой же кнопкой, можно изменять размеры фрагментов и перемещать их. \j/\-Brush Tool (В) (Инструмент «Кисть» (В)) - используется для наложения мягких цветовых мазков. Этой же кнопкой включается инструмент \/\ Pencil Tool (В) (Инструмент «Карандаш» (В)), который позволяет рисовать произвольные линии с жесткими границами.

43

Adobe Photoshop для Web \Sf\ - History Brush Tool (Y) (Инструмент «Кисть событий» (Y)) - создает копию или снимок изображения и затем закрашивает ею текущее изображение или его часть. Этой же кнопкой включается инструмент \3f] - Art History Brush (Y) (Художественная кисть событий (Y)), который позволяет рисовать стилизованными мазками, используя указанное предыдущее состояние изображения в качестве исходных данных. [Ш]-Gradient Tool (G) (Инструмент «Градиент» (G)) - используется для создания плавных переходов от одного цвета к другому. Такой плавный переход художники называют растяжкой. Этой кнопкой включается также инструмент [<$»] - Paint Bucket Tool (G) (Инструмент «Заливка» (G)), который используется для заливки цветом выделенной области. Щ-Dodge Tool (О) (Инструмент «Осветлитель» (О)) - осветляет отдельные участки изображения. Включающийся этой же кнопкой инструмент [QJ Burn Tool (О) (Инструмент «Затемнитель» (О)) затемняет отдельные области, а инструмент [ip] - Sponge Tool (0) (Инструмент «Губка» (О)) изменяет насыщенность цветов. [T]-Horisontal Type Tool (Т) (Инструмент «Горизонтальный текст» (Т)) - инструменты, которые включаются этой кнопкой, создают горизонтальные и вертикальные надписи, а также маски текста на изображении. |Hj-Rectangle Tool (U) (Инструмент «Прямоугольник» (U)) - позволяет рисовать фигуры прямоугольной формы. Этой же кнопкой включаются инструменты: |G3j- Rounded Rectangle Tool (U) - для рисования прямоугольников со скругленными углами, [о] - Ellipse Tool (U) - для создания эллипсов и окружностей, |QJ - Polygon Tool (U) - для рисования многоугольников, Г\] - Line Tool (U) (Инструмент «Линия» (U)) - для создания прямых линий любой толщины со стрелками на концах, [Z|] - Custom Shape Tool (U) (Инструмент «Заказная форма» (U) - для рисования фигур, форма которых выбирается из предлагаемых образцов. ] - Eyedropper Tool (I) (Инструмент «Пипетка» (I)) - служит для выбора цвета на рисунке и переопределения основного и фонового цветов. Этой же кнопкой включаются инструменты |t/J - Color Sampler Tool (I) (Инструмент «Образец цвета» (I)), который позволяет перемещать/удалять образцы цвета и |<^| - Measure Tool (I) (Инструмент «Измеритель» (I)), который позволяет определять размеры линий и углов. | - Zoom Tool (Z) (Инструмент «Масштаб» (Z)) - используется для увеличения и уменьшения изображения на экране.

44

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

45

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

46

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

Ed»

Image

Layer

Slicet

Select

Filler

View

Window

Help

».s, т и. \ a.

т «a

л*

umu

тэиа

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

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

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

Name: |untitted-l| " Preset: (clipboard

.

Width: 1 800 Height:] 600

Q || pixels

•

OK

|

Reset

1

Save Preset,,. |

[3

Getete Preset... |

|| pixels

'"" "

Resolution: 1 72 Color Mode: | RGB Cobr Background Contents: | White

1 1 pixels/inch [3 1 8 bit

[*j [•] 0

1.37M

$ Advancod ,

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

48

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

Тип баннера

468x60

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

234x60

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

88x31

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

120x90

Button 1 (Кнопка 1)

120x60

Button 2 (Кнопка 2)

120x240

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

. 125x125 728x90

Square Banner (Квадратный баннер) Leaderboard («Перетяжка» вверху страницы)

Воспользовавшись этими рекомендациями, создадим стандартный баннер размером 468x60 пикселов. Напомним, что пикселы — это точки, из которых строится растровое изображение. Размеры рисунка определяются количеством пикселов по горизонтали (Width) и вертикали (Height). Плотность пикселов в изображении характеризует графическое разрешение, которое измеряется в пикселах на дюйм или в пикселах на сантиметр. Чем больше графическое разрешение, тем выше качество изображения. Число экранных пикселов на единицу длины определяет разрешающую способность монитора, которая зависит от размера экрана и от заданной размерности экранной матрицы. Подробнее об этом читайте в главе «Графика для Web-страниц». В Adobe Photoshop предусмотрена возможность указания размера рисунка в различных единицах: сантиметрах (cm), дюймах (inches), пикселах (pixels) и др. Эти единицы можно выбрать в открывающихся списках, расположенных справа от полей ввода Width (Ширина) и Height (Высота). По умолчанию предлагается измерять размеры в пикселах (pixels). v В поле ввода Width (Ширина) введите ширину стандартного баннера 468 пикселов. 49

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

50

Подготовка графики с помощью программ Photoshop и ImageReady • Ей. Е<*

Layer

Delect

Fitter

Yiew

Window

Ftrihm-i l.tjJM^J C;Anli-aH»Md

Help

Siyfoi |N^J

^

J^ Width: \

~ ... | ** Height: ^^°°

j I

т

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

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

о. а а е>. а а Ь Ц,Ь7% | Dot! «ЛК/О bylts

^ Draw stltclbn from «nt.f or lubtMCt from Kilting Mltction.

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

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

51

Adobe Photoshop для Web >•

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

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

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

52

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

Рис. 2.J1. Прямоугольная область выделения создана Если с первого раза не получилась прямоугольная область, примерно равная половине размера окна документа, то созданную область можно отменить, щелкнув мышью в любом месте окна документа, и нарисовать заново. Описанным способом вы рисуете прямоугольную область от верхнего левого угла. Если же нужно нарисовать от центра, то в процессе перемещения указатеAlt

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

Рис

2.12. Палитра

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

Adobe Photoshop для Web > Щелкните мышью в этом месте. Цвет будет выбран и появится на образце цвета переднего плана (Set foreground color) панели инструментов (Tools). Чтобы выбрать цвет для фона, следует щелкнуть мышью на образце палитры 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 и отображается в полях ввода 54

SEES 9Ь!

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

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

I OK |

Width: 1 1 рх |

I

Cartel

|

Color: ЦЩ

1 О Inside <s> tenter О Outside

Mode: [Normal

3

QpacitY:| 100 [% В поле Color (Цвет) указан черный цвет пеО Ereseive Transparency реднего плана, который будет использован для обводки. При необходимости вы можете выбрать другой цвет, щелкнув мышью на Puc. 2.15. Диалог Stroke (Обводка) этом поле.

55

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

Рис. 2.16. Обводка прямоугольника выполнена Нарисуем справа от прямоугольника эллипс. Для создания области выделения в виде эллипса или круга используется инструмент [ОД - Elliptical Marquee Tool (M) (Инструмент «Эллиптическая область» (М)). Предварительно его следует выбрать. > Установите указатель мыши на кнопке [Q| - Rectangular Marquee Tool (M) (Инструмент «Прямоугольная область» (М)) на панели инструментов (Tools). ">' Нажмите и удерживайте клавишу >• Не отпуская клавишу I Alt 1. щелкните мышью на кнопке [[!],( - Rectangular Marquee Tool (М) (Инструмент «Прямоугольная область» (М)). Будет выбран инструмент (ОД - Elliptical Marquee Tool (M) (Инструмент «Эллиптическая область» (М)), и вы увидите его нажатую кнопку. > Отпустите клавишу II Alt I. Вычерчивание овальной области выделения выполняется так же, как и прямоугольной. •i

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

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

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

i

IfL,

OS: [О

|% О а: [И

° В: 1°

! ° 12 | | ' C:[75_J%

О R: [Я

%

OG: [0_J О В: [0

Ь;

M:[68_J% } t

Y:[67_j%

К: 190 1%

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

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

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

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

58

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

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

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

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

- Blending • Mode: [Normal Opacity: [IPO

|%

П EJesarve Transparency

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

£3| Joixeb

1

OK

|

|

Cancel

|

Puc. 2.21. Диалог Contract Selection (Сжатие выделения) > В поле ввода Contract By (Сжать на) введите 16 пикселов. > Нажав кнопку ОК, закройте диалог Contract Selection (Сжатие выделения). Эллиптическая область выделения будет сжата на 16 пикселов. Чтобы расширить область выделения следует выбрать команду меню Select * Modify * Expand (Выделение * Модификация * Расширить).

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

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

Удаление объектов и отмена действий Теперь нам нужно научиться отменять выполненные команды и операции и удалять объекты. Это позволит в процессе создания рисунка при необходимости вернуться на несколько шагов назад, чтобы сделать исправления в документе. Отменить последнюю выполненную операцию можно, воспользовавшись командой меню Edit » Undo (Правка * Отменить). >• Выберите команду меню Edit » Undo Deselect (Правка » Отменить снятие выделения) или нажмите комбинацию клавиш I С1г| 1+|Z|. Последняя выполненная команда снятия выделения будет отменена, и выделение будет восстановлено. 61

Adobe Photoshop дПя Web В Adobe Photoshop имеется специальная палитра History (События), в которой записываются все операции, выполненные в окне документа. >• Щелкните мышью на четвертом слева ярлыке History (События) в нижнем окне палитр. Если этот ярлык отсутствует, выберите команду меню Window * 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

Подготовка графики с помощью программ Photoshop и ImageReady > Щелкните мышью на операции 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

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

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

Подготовка графики с помощью программ Photoshop и ImageReady > Нажмите и удерживайте левую кнопку мыши. >• Не отпуская левую кнопку мыши, перемещайте указатель мыши по прямоугольнику вправо и влево, пока весь объект не будет закрашен белым цветом фона. > Отпустите левую кнопку мыши, когда прямоугольник будет полностью удален. Итак, мы познакомились с приемами рисования и удаления простых объектов. Теперь можно приступить к созданию баннера.

Начинаем изготовление баннера Баннер, который мы создадим, будет состоять из простого логотипа компании ГЕОТОН и двух сменяющих друг друга анимированных надписей, приглашающих посетить сайт компании. Начнем с подготовки логотипа, который, в свою очередь, будет состоять из трех объектов, размещенных один внутри другого: текста, эллипса и прямоугольника (Рис. 2.28) Для объектов логотипа установим синий цвет. >• Выведите на экран палитру Color (Цвет), щелкнув мышью на ее ярлыке.

рис 2.28. Логотип

> С помощью ползунковых регуляторов палитры Color (Цвет) установите значения красной (R), зеленой (G) и синей (В) составляющих цвета соответственно 32,112, 239. Выбранный синий цвет отобразится на образцах цвета переднего плана палитры Color (Цвет) и панели инструментов (Tools). Обратите внимание, что после установки цвета в палитре Color (Цвет) под образцами появился треугольный значок с восклицательным знаком Д - Warning: out of gamut for printing (Предупреждение: выход за пределы цветового охвата для печати), предупреждающий о том, что выбранный цвет не входит в цветовой диапазон модели CMYK. Справа от треугольного значка отображается поле с ближайшим CMYK-эквивалентом выбранного цвета. Напомним, что для Webграфики цветовой охват CMYK не имеет значения, так как Web-изображения не пред назначены .для полиграфического исполнения. Нарисуем в левой части окна документа прямоугольную область размером 150x50 пикселов, которую затем заполним выбранным цветом. '

'

(г

1

> Удерживая нажатой клавишу II Alt I. три раза нажмите кнопку |Q| - Elliptical Marquee Tool (M) (Инструмент «Эллиптическая область» (М)) на панели инструментов (Tools). Будет выбран инструмент [О] - Rectangular Marquee Tool (М) (Инструмент «Прямоугольная область» (М)). Adobe Photoshop позволяет создавать области выделения заранее заданных размеров, для указания которых и определения других свойств объекта используется панель параметров (Options Bar) (Рис. 2.29). Панель с параметрами каждого

65 3 - 6645

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

F«>b.ri|0p» 1 riAnli-»li»!«d

Slylm iNornul

_JHI Width:

«*

Ч**1'

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

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

О!

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

Е]

Mode: | CMYK Color

El

Buler Units: | Centimeters

[»]

| .Cancel

|

П Show 16 bit values

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

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

Подготовка графики с помощью программ Photoshop и ImageReady Зальем область выделения белым цветом фона. > Выберите команду меню Edit * Fill (Правка * Залить). На экране появится диалог Fill (Заливка). > Убедитесь, что в открывающемся списке Use (Использовать) выбрано Background Color (Цвет фона). > Закройте диалог Fill (Заливка) нажатием кнопки ОК. Эллиптическая область выделения будет залита белым цветом. i >• Отмените выделение, выбрав команду меню Select » Deselect (Выделение » Отменить выделение). Изображение примет вид, как на Рис. 2.32.

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

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

69

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

•

Имя Файла:

[Untitled-1

Eoimat

|Pho>Qshop (".PSD/.POD)

Save:

{ [^J

| Сохранить ] |

Отмена

П As a Cop*

О Snratattor»'

П Abba Chmneb

Osuptcctos

OL««J Color:

|*J О if Е? ИЗ"

|

П Use Pwof Setup; Waking CMfK H Iff Profile: SRQB IEC61966-2.1

0 Ihurrtbnjll

0 Use Lower Case Extension

4

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

70

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

Текст Эля Лайнера Наша следующая задача - добавить в создаваемый логотип надпись ГЕОТОН. Когда в рисунок добавляется текст, он помещается на новый отдельный слой. Слои дают возможность редактировать отдельные элементы изображения независимо друг от друга. Вы можете рисовать, редактировать, вклеивать и перемещать содержимое любого I 100% |> | слоя, не изменяя при этом объекты, расположенные FiB: I 100% I > I на других слоях. Управление слоями осуществляется с помощью специальной палитры Layers (Слои). > Щелкните мышью на первом слева ярлыке Layers (Слои) в нижнем окне палитр. Если такой ярлык отсутствует, выберите команду меню Window * Layers (Окно * Слои). На экране появится палитра Layers (Слои) с перечнем имеющихся в документе слоев (Рис. 2.34).

О. а а в. а а

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

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

Цх|в

|

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

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

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

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

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

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

f! а Т Т ТТ Тт Г Т,

I T

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

73

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

Подготовка графики с помощью программ Photoshop и ImageReady В палитре Paragraph (Абзац) определяются параметры абзаца: выравнивание, отступы, пробелы до и после абзаца, расстановка переносов. >•

Закройте совмещенную палитру Character/Paragraph (Символ/Абзац), нажав кнопку [х] в правом верхнем углу ее окна.

> Для окончания ввода текста нажмите кнопку \\/\ у правого края панели параметров (Options Bar). Надпись на рисунке будет закреплена (Рис. 2.38). V; Geolon psd C'a \OOZ |f tOTOH. RGB/U)

Рис. 2.38. Надпись введена Для отмены ввода текста достаточно нажать на панели параметров кнопку [®1 Cancel any current ededits (Отменить все текущие правки). Закончить ввод текста можно также, нажав клавишу |[Enterj на цифровой клавиатуре или комбинацию клавиш\( см l+pnter| на основной клавиатуре. Обратите внимание, что в палитре Layers (Слои) появился новый текстовый слой, которому по умолчанию присвоено имя, соответствующее введенной надписи. Этот слой помечен символом Т - текстовый - и выделен темным цветом, что означает, что в данный момент слой активен, т.е. именно к нему будут относиться все ваши действия. На то, что слой активен, указывает также имя слоя, появившееся в заголовке окна документа. Но очень вероятно, что в палитре Layers (Слои) и в заголовке окна документа имя слоя отображается неправильно. Это связано с тем, что Adobe Photoshop не всегда правильно отображает русские шрифты. В таком случае, чтобы в дальнейшем было удобно работать, слою нужно присвоить английское имя и порядковый номер. > Нажмите кнопку 0 в правом верхнем углу палитры Layers (Слои) и в появившемся меню выберите команду Layer Properties (Свойства слоя). На экране появится диалог Layer Properties (Свойства слоя) (Рис. 2.39).

Name: ГЕОТОН Color: |D None

I L ок

Cancel

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

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

Lock: Q

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

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

Подготовка графики с помощью программ Photoshop и ImageReady Сохраните рисунок, выбрав команду меню File * Save (Файл * Сохранить). При этом может появиться информационный диалог (Рис. 2.42), в котором говорится о том, что если вы сбросите флажок Maximize compatibility (Максимизировать совместимость), то у вас могут возникнуть проблемы при использовании файлов *.psd в других программах. Photoshop Foimal Options В Maximize compatibiGty Turning off Maximize Compatibility may interfere with the use oF PSD files in other applications or with Future versions of Photoshop.

Cancel

|

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

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

Создаем новые слои Создадим еще два текстовых слоя с надписями «Вам нужна локальная сеть?» и «Заходите СЮДА!», расположенными на рисунке справа от логотипа, одна под другой так, чтобы они могли сменять друг друга. >•' Нажмите кнопку [Т] - Horisontal Type Tool (Т) (Инструмент «Горизонтальный текст» (Т)) на .панели инструментов (Tools), чтобы выбрать этот инструмент. > Щелкните мышью в окне документа, справа от созданного логотипа. В этом месте появится текстовый курсор. В палитре Layers (Слои) появится новый текстовый слой Layer 2. >• Введите первую надпись: Вам нужна локальная сеть?. > Нажмите кнопку ЦЦ в правой части диалога, чтобы поместить текст справа от точки ввода. >• Выделите введенный текст в окне документа, протащив по нему указатель мыши. > В первом слева открывающемся списке Set the font family (Установка семейства шрифтов) на панели параметров (Options Bar) выберите для надписи подходящую гарнитуру шрифта из установленных на вашем компьютере.

77

Adobe Photoshop для Web >• Подберите также начертание и размер шрифта примерно 16-18 пунктов, в зависимости от выбранной гарнитуры. >• Нажмите кнопку [V] у правого края панели параметров (Options Bar). Надпись будет закреплена. В палитре Layers (Слои) изменится имя нового текстового слоя. Восстановим прежнее имя нового слоя - Layer 2 (Слой 2). > Выберите команду меню Layer • Layer Properties (Слой » Свойства слоя). На экране появится диалог Layer Properties (Свойства слоя) (Рис. 2.39). >• В поле ввода Name (Имя) введите Layer 2 и закройте диалог Layer Properties (Свойства слоя) нажатием кнопки ОК. Новое имя отобразится в заголовке окна документа и в палитре Layers (Слои). х С помощью инструмента [Ё»1 - Move Tool (V) (Инструмент «Перемещение» (V)) или клавиш управления курсором выровняйте надпись в свободном пространстве окна рисунка по вертикали и горизонтали (Рис. 2.43).

Вам нужна локальная сеть? Рис. 2.43. Надпись выровнена Добавим поверх активного слоя следующий текстовый слой с надписью. Предварительно следует вручную создать новый слой, так как щелчок мышью на надписи при активном слое Layer 2 включит режим редактирования этого слоя. > Нажмите кнопку | н | - Create a new Layer (Создать новый слой) у нижнего края палитры Layers (Слои). В палитре появится и станет активным новый слой, которому по умолчанию будет присвоено имя Layer 3 (Слой 3). Название нового слоя вы увидите также в заголовке окна документа. х

Выберите инструмент [Т] - Horisontai Type Tool (Т) (Инструмент «Горизонтальный текст» (Т)) на панели инструментов (Tools) и щелкните мышью в окне документа у правого края логотипа. В палитре Layers (Слои) появится отметка в виде символа Т о том, что текущий слой Layer 3 - текстовый.

>• Введите с клавиатуры надпись: Заходите СЮДА! >• Выделите надпись, протащив через нее указатель мыши, и выберите для нее гарнитуру шрифта, начертание, а также размер приблизительно 20 пунктов. Изменим цвет надписи на коричневый.

78

Подготовка графики с помощью программ Photoshop и ImageReady > Щелкните мышью на поле с образцом цвета Set the text color (Установка цвета текста) панели параметров (Options Bar). На экране появится диалог Color Picker (Палитра цветов). Выберем цвет путем ввода числовых значений RGB-составляющих. >• Дважды щелкните мышью в поле ввода R (Красный), чтобы выделить его числовое значение. х В поле ввода R (Красный) введите 142. > Нажмите клавишу Р^"1. чтобы переместить фокус в поле ввода G (Зеленый) и выделить его числовое значение. >• В поле ввода G (Зеленый) введите 90 и нажмите клавишу Р'Н. Фокус переместится в поле ввода В (Синий), числовое значение в котором будет выделено. >• В поле ввода В (Синий) введите 52. >• Закройте диалог Color Picker (Палитра цветов), нажав кнопку ОК. Заданный цвет отобразится на образце в поле Set the text color (Установка цвета текста) панели параметров (Options Bar). Надпись в окне документа будет окрашена в заданный коричневый цвет. >• Нажмите комбинацию клавиш l c t r l l+|[Enter], чтобы завершить ввод текста. В окне рисунка добавленная надпись будет расположена на новом слое, поверх предыдущей надписи. Название нового слоя в палитре Layers (Слои) будет изменено в соответствии с введенным текстом. >• Переименуйте новый слой в Layer 3 (Слой 3). Для вызова диалога Layer Properties (Свойства слоя) щелкните правой кнопкой мыши на названии вновь созданного слоя в палитре Layers (Слои) и в появившемся контекстном меню выберите команду Layer Properties (Свойства слоя). > Воспользовавшись клавишами управления курсором при включенном инструменте [*»] - Move Tool (V) (Инструмент «Перемещение» (V)) совместите начало верхней надписи с началом нижней и выровняйте верхнюю надпись по вертикали (Рис. 2.44).

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

79

Adobe Photoshop для Web Нажмите кнопку 0 в правом верхнем углу палитры Layers (Слои) и в появившемся меню выберите команду New Layer (Новый слой). На экране появится диалог New Layer (Новый слой), в поле ввода которого Name (Имя) для нового слоя предлагается имя Layer 4 (Слой 4) (Рис. 2.45). 'OK

Name: [Layer 4 Q Use Previous Layer to Create Clbping Mask

|

J

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

Adobe Photoshop для Web Теперь внутри прямоугольника-«стены» нарисуем прямоугольник меньшего размера - 30x40 пикселов - «дверную коробку». > Щелчком мыши на кнопке [ПЦ - Rectangular Marquee Tool (M) (Инструмент «Прямоугольная область» (М)) панели инструментов (Tools) выберите инструмент и откройте панель параметров (Options Bar). > В полях ввода Width (Ширина) и Height (Высота) панели параметров (Options Bar) введите значения соответственно 30 рх и 40 рх. >

Установите указатель мыши внутри нарисованного прямоугольника, в точке с координатами X: 419, Y: 14- Эти координаты должны отобразиться в палитре Info (Информация).

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

> Щелкните мышью на значке *}, - Switch Foreground and Background Colors (X) (Переключение цвета переднего плана и фона (X)) на панели инструментов (Tools), чтобы поменять местами образцы цвета. > Нажмите кнопку [<^ - Paint Bucket Tool (G) (Инструмент «Заливка» (G)) на панели инструментов (Tools) и щелкните мышью внутри выделенной области. Она будет залита белым цветом фона (Рис. 2.49).

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

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

> Нажмите кнопку | его на весь экран.

в правом верхнем углу окна документа, чтобы развернуть

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

Alt

I. Указатель мыши, установленный на

Alt

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

Alt

I.

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

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

Воспользовавшись горизонтальной полосой прокрутки, переместите изображение в рабочем окне так, чтобы на экране была видна его правая часть и выделенная прямоугольная область (Рис. 2.50). Fit* Ed* Image U* Ми1 Fittci Vi«» ЩМм Help

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

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

•Фт

> Установите указатель мыши на левом нижнем угловом маркере так, чтобы указатель мыши принял форму серой стрелки ^. Рис. 2.51. Маркеры преобразования > Нажмите и удерживайте левую кнопку мыши. >• Не отпуская левую кнопку мыши, переместите квадратный маркер вправо, примерно к середине нижней стороны белого прямоугольника. >• Отпустите левую кнопку мыши. Новое положение маркера будет закреплено. Форма выделенной области станет трапециевидной (Рис. 2.52). \ Обратите внимание: в том месте, где область выделения сжата, на рисунке стала частично видна надпись, находящаяся на нижележащем слое Layer 2. >• Подобным же образом переместите верхний левый угловой маркер вправо, примерно на середину верхней стороны белого прямоугольника так, чтобы левая сторона выделенной прямоугольной области стала вертикальной (Рис. 2.53). >• Переместите левый нижний квадратный маркер вертикально вверх на расстояние, примерно равное одной четверти высоты области выделения (Рис. 2.54). >• Нажмите клавишу [[Enter]. Маркеры преобразования исчезнут. Форма преобразованной выделенной области будет закреплена. Выполним обводку коричневым цветом преобразованной области выделения. 84

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

т Рис. 2.53. Левый верхний угловой маркер перемещен

Подготовка графики с помощью программ Photoshop и ImageReady Выберите команду меню Window * Tools (Окно » Инструменты), чтобы отобразить панель инструментов. •Ф-

Щелкните мышью на значке *}, - Switch Foreground 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. >• Отмените выделение объекта, нажав комбинацию клавиш I c t r l I+JD|. Нарисованной двери не хватает только дверной ручки. Но прежде чем ее изобразить, установим в качестве цвета переднего плана темно-коричневый цвет, которым залита «стена». Воспользуемся для этого инструментом [^] - Eyedropper Tool (I) (Инструмент «Пипетка» (I)). >• Нажмите кнопку [5] в окне документа и измените размеры окна документа так, чтобы оно не пересекалось с палитрами, прокрутите изображение в окне, чтобы отобразить дверь, и нажмите клавишу РТ"Ь|. чтобы отобразить все палитры. > Нажмите кнопку [^| - Eyedropper Tool (I) (Инструмент «Пипетка» (I)) на панели инструментов (Tools), чтобы выбрать этот инструмент. 85

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

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

Напомним, что если с первого раза линия желаемого размера не получилась, вы можете отменить выполненную операцию и повторить ее сначала. >• Уменьшите масштаб изображения до 100%, щелкнув три раза на рисунке инструментом [ДГ| - Zoom Tool (Z) (Инструмент «Масштаб» (Z)) при нажатой клавише Г^П. Изображение примет вид как на Рис. 2.56. "Sb Geolon.psd <•> 100% (Lajiei 4. RGB/3)

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

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

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

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

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

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

Adobe Photoshop для Web "E Geoton.psd & 1002 [Layei 4. RGB/8)

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

Заходите СЮДА! Рис. 2.60. Слой Layer2выключен > Повторно щелкните мышью в том же месте. В палитре Layers (Слои) появится значок глаза -gs, а на рисунке - надпись Вам нужна локальная сеть? v

Просмотрите, как выглядит каждый слой в отдельности, выключая отображение остальных слоев; после чего включите все слои.

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

Нажмите и удерживайте клавишу II I. Указатель мыши примет форму Kj.. Это значит, что при включенном инструменте [К^1 - Move, Tool (V) (Инструмент «Перемещение» (V)) клавишу II С1г| I можно не нажимать. Не отпуская клавишу ctrl . щелкните правой кнопкой мыши. На экране появится контекстное меню с перечнем доступных в данной точке слоев (Рис. 2.61). 88

Подготовка графики с помощью программ Photoshop и ImageReady > Выберите из контекстного меню слой Layer 3. Этот слой станет активным и будет выделен в палитре 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

Adobe Photoshop для Web

>> Чтобы убедиться в том, что слои объединены, щелкните мышью на значке с изображением глаза ® слева от названия слоя Layer 3. Слой будет выключен, и надпись Заходите СЮДА! с рисунком двери исчезнет с экрана. На ее месте останется только надпись Вам нужна локальная сеть?, находящаяся на слое Layer 2. > Повторно щелкните мышью в том же месте, чтобы включить отображение слоя Layers. > Выберите команду меню Edit * Undo Merge Linked (Правка » Отменить объединение связанных слоев). Слой Layer 4 снова появится в палитре Layers (Слои). х Щелкните мышью на значке в виде цепи Щ в поле Indicates if layer is linked (Индикация связанного слоя) слева от миниатюры слоя Layer 4. Значок исчезнет. Связь слоев будет прервана. Для объединения всех видимых слоев изображения нужно оставить видимыми только те слои изображения, которые должны быть объединены (невидимые слои не будут удалены в результате объединения), и выбрать команду меню Layer • Merge Visible (Слой » Объединить видимые слои). Переместим слой Layer 3 на передний план рисунка, воспользовавшись следующим способом. >• Выберите команду меню Layer • Arrange * Bring to Front (Слой * Порядок » Переместить на передний план). Положение активного слоя в пачке слоев изменится. Он будет перемещен наверх. Подобным же образом переместим на передний план слой Layer 4. > Щелкните мышью на миниатюре слоя Layer 4 в палитре Layers (Слои), чтобы выделить его. >• Выберите команду меню Layer • Arrange » Bring to Front (Слой » Порядок » Переместить на передний план). Слой Layer 4 будет перемещен наверх. > Сохраните документ, выбрав команду меню File * Save (Файл » Сохранить). Созданные нами слои полностью непрозрачны. Однако ничто не мешает вам изменить непрозрачность активного слоя с помощью элемента управления Opacity (Непрозрачность) палитры Layers (Слои). По умолчанию значение Opacity (Непрозрачность) для каждого слоя равно 100%, т.е. слои абсолютно непрозрачны. > Щелкните мышью на кнопке [Г] у правой границы поля ввода Opacity (Непрозрачность) в палитре Layers (Слои). Под полем ввода появится ползунковый регулятор. 90

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

Перемещайте ползунок регулятора Opacity (Непрозрачность) влево и наблюдайте, как на рисунке постепенно уменьшается непрозрачность активного слоя Layer 4 и сквозь него становится видна надпись нижележащего слоя Layer 2. Когда ползунковый регулятор достигнет своего крайнего левого положения, слой Layer 4 станет абсолютно прозрачным.

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

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

Adobe Photoshop для Web Inner Shadow (Тень внутри) - добавляет тень, которая лежит внутри слоя, создавая ощущение его отодвинутости или приподнятости; 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 Linked Clear Layer Style Global Light... Create Layer Hide All Effects Scale Effects...

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

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

92

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

Styles Blending Options: Default О Drop Shadow

Bevel and Emboss — Structure —'

OK

Reset

Styles [inner Bevel Technique: |Smooth ~

|~1 Inner Glow

Direction: © Up Soften: л

J

"New Style... I

П Inner Shadow |j Outer Glow

J

13 Preview

О Down . |o

Ipx

• Shading Angle: !~ Satin

[7j Use Global Light Akitude:

П Color Overlay Г": Gradient Overlay fj Pattern Overlay !~j Stroke

Gloss Contour:

П Anti-a[iased

Highlight Mode:, [Screen Opacity: Shadow Mode: [Multiply Opacity:

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

93

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

Обратите внимание, что после применения эффекта в

Рис. 2.64. К текстовому слою применен эффект Bevel and Emboss

(Скос и оельей)

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

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

Q Bevel and Emboss

BID

1 Bickground

=

о. т

t>. a

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

ИI - Drop Shadow

Blinding Options: Default 1 d Drop Shadow О Inner Shadow

| OK |

Blind Mod.: [Multinlv ЯК

ODjcitv: |

_____ 1

ЗИИ fi

Angle! \\ J 1.120

1 [re

|%

|° E Use global Light

R] Preview

(jOuttrGlow О Inner Glow W Bevel and Emboss П Contour

.

П TtJlturt

Cs»«n Г* Color Overlay

Contour: ^A'l П Anti-aliased Noise! ;*)

j In

|%

С <5r«dienl Overlay Q Layer Knocks Oul Drop Shadow

r"j Pattern Overlay

'

П Stroke

..

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

I

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

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

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

«Живые» кнопки

/

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

97 4-6645

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

Ыате: |Untitled-l

Size: (Custom Wjdth: |539

| pixels

tlelght: |15

[ pixels

1

OK

I

|

Cancel

|

H

0 White О eackoround Color О transparent

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

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

98

:

\

Подготовка графики с помощью программ Photoshop и ImageReady Новый документ состоит из одного прозрачного слоя Layer 1.

;>

Установим для создаваемой кнопки желтый цвет переднего плана, выбрав его из палитры Swatches (Каталог). v Щелкните мышью на ярлыке Swatches (Каталог) во втором сверху окне палитр у правого края рабочего окна, чтобы вывести на экран эту палитру. v Щелчком мыши выберите в палитре Swatches (Каталог) седьмой слева в первом ряду желтый цвет. Этот цвет отобразится на образце цвета переднего плана (Set foreground color) панели инструментов (Tools). Нарисуем с помощью инструмента [Щ| - Rectangle Tool (U) (Инструмент «Прямоугольник» (U)) кнопку в виде прямоугольника размером 230x35 пикселов, залитого желтым цветом переднего плана. v Щелкните мышью на кнопке [5] - Rectangle Tool (U) (Инструмент «Прямоугольник» (U)) на панели инструментов (Tools). Данный инструмент будет выбран, а на панели параметров (Options Bar) появятся элементы управления данного инструмента (Рис. 2.70), с помощью которых следует определить параметры фигуры. • Я

DP

n^^Si» ЧЕЛМ*Ор*"~1 mtf*[«0p»

|

StyUl []NJ j*| Mod«i l)j°gMJ_

j,,^! OtMdt»! f"lOO% | ; ; |Д

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

99

Adobe Photoshop для Web Применим к слою Layer 1, на котором расположен прямоугольник, эффект Bevel and Emboss (Скос и рельеф), создающий иллюзию рельефности кнопки. > Чтобы видеть в палитре Layers (Слои) все эффекты и слои, которые мы создадим, переместите эту палитру вверх, расположив ее справа от окна документа так, чтобы она не перекрывала другие палитры, и увеличьте ее высоту примерно в 2 раза. .

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

0

Рис. 2.71. Залитый цветом прямоугольник 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

Style: [inner Bevel Technique: [Smooth Depth:

I-I

New Style... I

j

13 Preview

-0

Direction: ©Up О D°»n

S»l П Satin

Soften:

fl [}•

i iiiu-i

-

П Color OwUy Г_] Gradient Overlay Fj Pattern Overlay

-ShadingAngle: ^_^^ 1120 В U» global Light

По i

Altitude: Gloss Contour:

It °

^A " I П Anli-a(iased

Highlight Mode: [Screen Opacity: Shadow Mode: | Multiply Opacity:

[T| ^

inn in. (— . . |?5

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

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

Рис. 2.73. Эффект Bevel and Emboss (Скос и рельеф) применен к слою

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

ТО Untitled-1 @100£ (Original)

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

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

101

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

J

П Use Previous Layer to Create Dipping Mask

L

ок

I

Options Color: [None Bend Mode: [Normal Lock: 0 lr«nsp*rency П Eosition Dfil

Puc. 2.75. Диалог Layer Options (Параметры слоя) > В поле ввода Name (Имя) диалога Layer Options (Параметры слоя) выделите название слоя, протащив по нему указатель мыши. > Введите с клавиатуры новое название слоя - Layer 2 - й нажмите клавишу fjnterj. Текстовый слой будет переименован, и его новое имя появится в палитре Layers (Слои). Обрежем изображение в окне документа, оставив только ту его часть, на которой находится рисунок кнопки. Для этого предварительно следует выделить обрезаемый объект. Чтобы легче было выполнить выделение, нужно сделать активным слой Layer 1 с изображением желтого прямоугольника и выключить отображение остальных слоев и эффектов. >• Щелкните мышью на миниатюре слоя Layer 1 в палитре Layers (Слои), чтобы сделать его активным. >• В палитре Layers (Слои) щелкните мышью на треугольнике, расположенном между именем слоя Layer 1 и значком ©, чтобы отобразить названия эффектов, примененных к слою. > Выключите отображение слоя Layer 2 и эффекта на слое Layer 1, щелкнув мышью на значках с открытым глазом §! в палитре Layers (Слои) против названия слоя Layer 2 и эффекта Bevel and Emboss (Скос и рельеф). Для выделения обрезаемого объекта воспользуемся инструментом [\] - Magic Wand (W) (Инструмент «Волшебная палочка» (W)), с помощью которого легко выделяются области одного цвета или близких цветов. 102

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

100% т -\ Г/..

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

чтобы отменить выделение объекта

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

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

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

Рис. 2.78. Добавлено состояние Over (Над) Ovei Down Selected Out Up Click

Custom... None

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

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

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

105

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

Г9Untitletl-1 @ 1002 (Original) OrlgtoalXOplMitd Чг-ирЧ/4-Up^

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

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

106

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

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

(?)

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

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

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

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

107

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

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

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

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

108

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

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

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

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

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

Подготовка графики с помощью программ Photoshop и ImageReady файла с тем же изображением в формате JPEG. Формат PNG-24 рекомендуется применять только для полноцветных изображений, содержащих многоуровневую прозрачность, которую не поддерживает формат JPEG. Следует также помнить, что PNG-файлы поддерживаются не всеми популярными Web-браузерами. Формат WBMP является стандартным для оптимизации изображений для мобильных устройств, таких, как сотовые телефоны. Формат WBMP поддерживает 1-битный цвет, т.е. WBMP-изображения являются черно-белыми. > Щелкните мышью на треугольнике > слева от строки Color Table (Таблица цветов). Эта часть палитры Optimize (Оптимизация) будет развернута (Рис. 2.87).

Format i [GIF •7Color Table

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

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

111

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

Рис. 2.88. Палитра Color Table (Цветовая таблица)

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

112

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

113

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

Format: [GIF > Color Table •
Puc. 2.89. Элементы управления Dither (Смешивание) палитры Optimize (Оптимизация)

114

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

Formal: (GIF t> Color Table l> Dither ^ Transparency р" Transparency Dither: !

1> Options

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

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

Preset: ([Unnamed] Format; [GIF l> Color Table 1> Dither ^ Transparency VOplioni П Interlaced

Lossy: | 0

П Use Unified Color Table JTi Add Metadata {"settings... |

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

116

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

117

Adobe Photoshop для Web

Sample Piclme. .!

Имя файле:

|Knopka

1ип Файла:

[HTML and Images I'.Kmll

Settings:

| Dclaul Sellings

Sices:

|AISfc«

PMC. 2.92. Диалог Save Optimized (Сохранение оптимизированного документа) В поле ввода Имя файла (File name) для сохраняемого документа предлагается имя Knopka.html. Оставим его без изменения. >

Нажмите кнопку Сохранить (Save). Диалог Save Optimized (Сохранение оптимизированного документа) закроется. Adobe ImageReady создаст и сохранит на диске файл Knopka.html с HTML-кодом эффекта.

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

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

'а„

i

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

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

Посмотрим, что представляет собой созданный файл. > Откройте в программе Блокнот (Notepad) файл Knopka.html из папки Web. В этом файле записана автоматически созданная на языке JavaScript программа, изменяющая состояние изображения кнопки при различных действиях, выполняемых мышью. Сами изображения находятся в папке images. Такая программа обычно состоит из команд (операторов) и команд вызова функций. В нашем случае функции находятся в заголовке HTML-документа между тегами и , а команды, их вызывающие, - в его теле, между тегами и . Теперь мы должны скопировать код программы из файла Knopka.html в файл spisok.html так, чтобы вставить в последнем документе вместо текстовой ссылки На первую страницу графическую кнопку. Сделаем это следующим образом: >• Откройте файл spisok.html в новой копии программы Блокнот (Notepad). > Скопируйте через буфер обмена в заголовок файла spisok.html функции, начиная с комментария и заканчивая . > В открывающий тег файла spisok.html добавьте команду вызова функции предварительной загрузки изображений ONLOAD="preloadimages();", скопировав ее из файла Knopka.html так, чтобы этот тег имел следующий вид:

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

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

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

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

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

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

121

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

Выберите папку, в которой будет сохранен документ.

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

Ftowi I 100% Fl

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

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

А11

I. Указатель мыши примет форму @.

А|

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

Alt

I.

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

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

123

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

]L

Name: | Levels 1

OK

. П Use Previous Layer to Create GiQping Mask | Cancel Color: |D None Mode: | Normal

J |

\*\ \~l

Opacity: 1100 I И %

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

124

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

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

Input Levels: 10_ J jjUDOj [255J

Рис. 2.98. Диалог Levels (Уровни) > Переместите этот диалог так, чтобы он не закрывал окно документа. 125

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

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

127

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

128

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

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

129 5-6645

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

II III • * • • • • » . _

Output Levels: [p_j J255J

//J Ш Ereview

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

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

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

Sharpen Sharpen Edges Sharpen More Unsharp Mask...

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

131

Adobe Photoshop для Web

FJ

100%

[£|

Amount: П ю ( %

Threshold: |£_

_j levels

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

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

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

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

133

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

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

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

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

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

о о XX Я 9

Рис. 2.107. Палитра Paths (Контуры) Несмотря на то, что контуры отображаются на экране, они не содержат пикселов, так как являются не растровыми, а векторными изображениями. В векторной графике, в отличие от растровой, изображение строится не из пикселов, а описывается в виде математических объектов - контуров. 135

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

Узлы

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

А.

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

136

Подготовка графики с помощью программ Photoshop и ImageReady Установите указатель мыши, который примет форму пера с крестиком &<, у левого края нижней плоскости ближайшей к зрителю части левого крыла изображения самолета. Щелкните мышью в этом месте. На изображении появится точка привязки (Рис. 2.110). Она останется выделенной - заполненной темным или светлым цветом, в зависимости от окружающего фона, - до тех пор, пока вы не укажете следующую точку. Переместите указатель мыши вертикально вверх, к левому краю верхней плоскости крыла самолета, и щелкните в этой точке мышью. Обе точки будут соединены отрезком прямой первый прямолинейный сегмент будет создан. Чтобы провести линию вертикальную, горизонтальную или под углом, кратным 45°, удерживайте нажатой клавишу \\$*Щ.

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

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

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

> Продолжайте, щелкая мышью, размещать последующие точки привязки, двигаясь вокруг изображения самолета по часовой стрелке. Чтобы точнее передать детали контура самолета, размещайте точки привязки на каждом изгибе его границы. ' Если вы по ошибке поставите точку привязки не в том.месте, где хотелось бы, то удалить ее можно, щелкнув на ней мышью и нажав клавишу Р»1*]. Но точки можно и не удалять. В дальнейшем мы увидим, как легко можно изменить их положение в процессе редактирования контура. Расставляя описанным выше способом точки привязки и создавая, таким образом, прямолинейные сегменты, вы должны оконтурить верхнюю часть, хвост и нижнюю хвостовую часть фюзеляжа самолета и подойти к левому колесу шасси (правому по отношению к зрителю) (Рис. 2.112). Колесо следует нарисовать как криволинейный контур. Криволинейные контуры создаются путем перемещения направляющих линий, которые определяют наклон и длину кривых. Сделайте это следующим образом:

137

Adobe Photoshop для Web

Рис. 2.112. Часть контура из прямолинейных сегментов" > Продолжая построение контура, установите указатель мыши в крайней верхней точке окружности левого колеса и щелкните мышью, чтобы создать точку привязки. >• Не перемещая указатель мыши, нажмите и, не отпуская левую кнопку мыши, переместите указатель мыши вправо на расстояние, примерно равное радиусу колеса. > Отпустите левую кнопку мыши. В этой точке появится направляющая линия. Нажав клавишу If кратными 45°.

si1ift

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

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

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

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

Рис. 2.114. Огибающая вокруг колеса создана Точки привязки криволинейных сегментов, имеющие направляющие, называются гладкими, в отличие от угловых точек прямолинейных сегментов, которые не имеют направляющих. Чтобы продолжать построение прямолинейных сегментов, следует преобразовать последнюю гладкую точку с направляющими в угловую. IP ' t > Нажав и удерживая клавишу I Alt I. щелкните мышью на последней точке привязки. Эта точка будет преобразована в угловую. Ее правая направляющая исчезнет. v

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

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

139

Adobe Photoshop для Web

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

140

Подготовка графики с помощью программ Photoshop и ImageReady > Нажмите кнопку |~о~1 - Loads path as a selection (Загрузить контур, как выделенную область) в нижней части палитры Paths (Контуры). Вокруг изображения самолета появится бегущая рамка выделения, а сам контур будет выключен и исчезнет с экрана. Уменьшим масштаб отображения документа до 100%. > Щелчком мыши выберите инструмент [Щ] - Zoom Tool (Z) (Инструмент «Масштаб» (Z)) на панели инструментов (Tools) и два раза щелкните мышью на изображении при нажатой клавише 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

Adobe Photoshop для Web

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

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

142

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

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

a HilCM)

|» У! 10,0

|» I

ф

J

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

Adobe Photoshop для Web

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

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

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

Рис. 2.120. Кадрирующая рамка указывает границы обрезки > Дважды щелкните мышью внутри кадрирующей рамки или нажмите клавишу [[inter]. Фотография будет обрезана по установленной границе. Но даже после обрезки фотография достаточно велика для Web-страницы. При разрешении экрана 800x600 пикселов (а с таким разрешением по статастике в настоящее время работает большинство пользователей Web) фотография занимает значительное место на экране. Кроме того, файл с изображением такого размера

145

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

Width: 1 460

1 1 pixels

Height

|| pixels

Q

Width: 1 16,23

||cm

H

Heiflht:

|[cm

Q

|297

|10,4S

Resolution: |72

|

OK

0^ 1

Reset

|

| Auto... |

1 1 pixels/inch Q

DScateStite П Constrain Proportions E3 Resample Image: | Bicubic

Q

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

146

Подготовка графики с помощью программ Photoshop и ImageReady При уменьшении размерности или графического разрешения Adobe Photoshop удаляет из изображения избыточную информацию, а при увеличении этих параметров - формирует недостающую информацию на основе цветовых величин существующих пикселов. В обоих случаях программа использует один из пяти методов интерполяции, который можно выбрать в открывающемся списке Resample Image (Изменить размер). Поскольку фотография, размеры которой мы хотим изменить, предназначена для показа на экране, то изменять ее графическое разрешение не следует. >• Убедитесь, что установлен флажок Resample Image (Изменить размер), чтобы сохранить графическое разрешение изображения и изменить его размер. >

Установите флажок Constrain Proportions (Сохранить пропорции).

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

Adobe Photoshop для Web

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

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

148

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

149

Adobe Photoshop для Web > Убедитесь, что установлен флажок Optimized (Оптимизированный). Это позволит получить оптимальное качество цветов и уменьшить размер формируемого файла. Однако некоторые старые браузеры не поддерживают эту особенность. >

Убедитесь, что установлен флажок Progressive (Прогрессивный).

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

150

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

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

151

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

Q

- Rendering Feather Radius: |o

1 UK | pixels

|

Cancel

| |

0 Anti-aliased

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

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

152

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

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

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

Adobe Photoshop для Web This wizard will help you to export an Image with transparency.

Which option best describes your Image? © tH/ tran Ч on a transparent background О I bave selected the area to be made transparent О I need to select the area to be made transparent

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

Puc. 2.126. Второй диалог Export Transparent Image Wizard (Мастер экспорта прозрачных изображений) 154

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

В

.

OENG

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

•

———

•

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

PMC. 2.727. Третий диалог Export Transparent Image Wizard (Мастер экспорта прозрачных изображений) Здесь следует определить, в каком формате нужно сохранить изображение - GIF или PNG. По умолчанию установлен переключатель GIF. Согласимся с этим предложением. . > Нажмите кнопку Next (Далее). Вы увидите следующий диалог Export Transparent Image Wizard (Мастер экспорта прозрачных изображений) (Рис. 2.128) с сообщением о том, что формат GIF поддерживает 8-битные изображения, и поэтому на следующем шаге необходимо будет уменьшить количество цветов в изображении с помощью диалога Indexed Color (Индексированные цвета). Export Transparent Image Wiznrti The GIF format only supports 8 bit images. The next step will be to reduce the number of colors in your image by using trie Indexed Color dialog.

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

Adobe Photoshop для Web Indexed Coloi г Palette: | Web

h"} П

Colors: 217

&reed: | None

H

i Ш

«

|

|

Reset

[7| Preview

0 Transparency

№tte: | None Dither: | Diffusion Umount: [75

El EJ

_j %

П Preserve Exact Colors

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

156

Подготовка графики с помощью программ Photoshop и ImageReady Для имитации цветов, не вошедших в цветовую таблицу, в открывающемся списке Dither (Смешивание) можно выбрать один из способов смешивания. Возможные варианты описаны в разделе «Оптимизируем и сохраняем графику». В поле ввода Amount (Эффект) указывается числовое значение параметра Dither (Смешивание) в процентах. Высокие значения смешивают больше цветов, но и могут увеличить размер файла. Установка флажка Preserve Exact Color (Сохранить точные цвета) предохраняет цвета таблицы от смешивания. >• Закройте диалог Indexed Color (Индексированные цвета), нажав кнопку ОК. Изображение будет преобразовано в режим индексированных цветов с параметрами, предложенными по умолчанию. Появится диалог Save As (Сохранить как). Откройте в этом диалоге папку Web, чтобы сохранить в ней файл.

JGIF Options iLlIOiTZjl О interlaced

СапсёГ~~1

Рис. 2.130. Диалог GIF Options (Параметры GIF)

/ В поле ввода Имя файла (File name) вместо предлагаемого по умолчанию имени, укажите имя сохраняемого файла - Samolet.

Нажмите кнопку Сохранить (Save). Диалог Save As (Сохранить как) закроется. На экране появится диалог GIF Options (Параметры GIF) (Рис. 2.130). Установите переключатель Interlaced (Чересстрочная развертка) и нажмите кнопку ОК. Файл будет сохранен в указанной папке. На экране появится последний, пятый диалог Export Transparent Image Wizard (Мастер экспорта прозрачных изображений) (Рис. 2.131) с сообщением о том, что изображение с прозрачным фоном создано. Export Transparent Image Wizard You have now completed the Export Image with Transparency Wfeard. Your rnage is now ready to be used online.

Puc. 2.131. Пятый диалог Export Transparent Image Wizard (Мастер экспорта прозрачных изображений)

157

Adobe Photoshop для Web >• Нажмите кнопку Finish (Готово), чтобы закрыть этот диалог. В рабочем окне программы Adobe Photoshop появится окно документа Samolet.gif, в котором прозрачный фон условно обозначен шахматной мозаикой. Созданное таким образом прозрачное изображение перед использованием в Web должно быть еще оптимизировано. >• Закройте окно рисунка Samolet.gif, нажав кнопку \х\ в правом верхнем его углу. Посмотрим теперь, как выглядит изображение самолета на Web-странице. Вставим файл Samolet.gif в. конец документа geoton.html. > Откройте в программе Блокнот (Notepad) файл geoton.html из папки Web и вставьте перед закрывающим тегом строку со следующим кодом HTML:

>• Откройте в браузере файл geoton.html. Вы увидите, что в конце страницы на синем фоне появился рисунок с изображением самолета. Причем белый фон этого рисунка в браузере стал таким прозрачным, что сквозь него виден синий фон Web-страницы. Мы умышленно включили в HTML-код атрибут border=i, чтобы видеть в браузере границы фотографии. Как видите, описанный способ экспорта прозрачного изображения достаточно прост. Сложность состоит только в выборе области, которая должна стать прозрачной. Мы воспользовались ранее нарисованным контуром, из которого создали выделенную область, после чего инвертировали ее. Рассмотрим теперь еще один способ выделения областей сложной формы - посредством выбора диапазона цветов. >• Не закрывая, сверните окно браузера, нажав кнопку П в правом верхнем его углу, чтобы вернуться к программе Adobe Photoshop. Программу Блокнот (Notepad) можно закрыть. >

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

Начнем с выделения изображения самолета, но воспользуемся для этого не созданным ранее контуром, а иным способом. > Выберите команду меню Select • Color Range (Выделение * Цветовой диапазон). На экране появится диалог Color Range (Цветовой диапазон) (Рис. 2.132).

158

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

SeteQt: I f Sampled Colors Ц Reset

Fuzziness:

|

П Invert © Selection Selection Preview: [None

Puc. 2.132. Диалог Color Range (Цветовой диапазон) Этот диалог используется для выделения в пределах некоторой области или всего изображения пикселов заданного цвета. Для выделения нужных оттенков можно выбрать цвет из предлагаемого в открывающемся списке Select (Выделение) диапазона цветов или сформировать выделенную область на основе «проб» цвета, взятых пипеткой непосредственно на изображении (Sampled Colors). При установленном по умолчанию переключателе Selection (Выделение) вы сможете наблюдать за формированием выделенной области. Если же установить переключатель Image (Изображение), то в окне просмотра диалога будет отображаться все изображение. Такой режим удобен, например, при сильном увеличении, когда область, в которой вы хотите взять «пробу» цвета, не видна в окне Документа. '-,',.

'

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

159

Adobe Photoshop для Web Чтобы исключить некоторые оттенки из выделенной области, следует выбрать в диалоге инструмент [^£] и щелкнуть мышью на исключаемых цветах. Для временной активизации инструмента \$\ нужно нажать клавишу ll s h i f l i. a инструмента \$\ - клавишу I Alt I. Вы можете изменить диапазон выделяемых цветов с помощью ползункового регулятора Fuzziness (Разброс). > Перемещайте ползунковый регулятор Fuzziness (Разброс) влево и наблюдайте в окне просмотра диалога Color Range (Цветовой диапазон), как при этом сужается диапазон выделенных цветов и заливается белым цветом контур самолета. Установите значение этого параметра 0 (ноль). В открывающемся списке Selection Preview (Предварительный просмотр выделения) можно выбрать один из вариантов просмотра выделенной области в окне документа: None (He задан) - исключает возможность просмотра; Grayscale (Черно-белое) - выделенная область отображается черным цветом, а невыделенная - белым; Black Matte (Черная подложка) - выделенная область отображается в цвете на черном фоне; White Matte (Белая подложка) - выделенная область отображается в цвете на белом фоне; Quick Mask (Быстрая маска) - выделенная область отображается с использованием текущих установок режима «Быстрая маска». Данный режим обеспечивает возможность одновременного просмотра маски и изображения. Подробнее об этом мы поговорим ниже. > Просмотрите выделенную область в окне документа в различных режимах, выбирая их из открывающегося списка Selection Preview (Предварительный просмотр выделения). >• Закройте диалог Color Range (Цветовой диапазон), нажав кнопку ОК. Изображение самолета в окне документа будет выделено. Но в пределах этого выделения вы увидите также множество мелких областей выделения, окрашенных в белый цвет - такой же, как и цвет фона. И выделение этих мелких областей теперь следует исключить. Удобнее, точнее и быстрее всего это можно сделать в режиме «Быстрая маска» (Quick Mask). Маски в программе Adobe Photoshop позволяют изолировать и защищать от модификации отдельные фрагменты изображения в процессе общего изменения цветов, применения фильтров и других эффектов. Понятие маскирования

160

Подготовка графики с помощью программ Photoshop и ImageReady тесно связано с выделением областей. Когда вы выделяете в изображении некоторую область, оставшаяся часть изображения становится недоступной для редактирования - маскируется. При необходимости можно создавать полупрозрачные маски, которые обеспечивают частичное применение эффектов преобразований к определенным участкам изображения. Режим «Быстрая маска» обеспечивает возможность одновременного просмотра маски и изображения и редактирования маски. >• Нажмите кнопку |Р| - Edit in Quick Mask Mode (Q) (Редактирование в режиме «Быстрая маска» (Q)) на панели инструментов (Tools), чтобы включить этот режим. Все изображение в окне документа, за исключением выделенных - незащищенных от изменения - областей, будет маскировано с помощью своего рода «пленки», по умолчанию окрашенной в красный цвет и имеющей 50процентную непрозрачность (Рис. 2.133). Теперь все, что окрашено красным цветом, - это маска - защищенная от изменения область. Sarnolel.psd @ 100% (Quick Mask/8)

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

161 6 - 6645

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

162

;

•

.

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

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

163

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

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

164

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

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

Adobe Photoshop для Web

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

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

166

Подготовка графики с помощью программ Photoshop и ImageReady Скорее всего, на синем фоне все еще хорошо видны резкие границы, особенно в области крыльев и фюзеляжа самолета. Эти края можно растушевать инструментом Пр] - Smudge Tool (R) (Инструмент «Палец» (R)). Но сделать это нужно на основном слое Background (Фон). >> Удалите слои Layer 1 и Layer 2, перетащив их миниатюры на кнопку I ffi I Delete current layer (Удалить активный слой) в нижней части палитры Layers (Слои). Активным станет слой Background (Фон). >• Восстановите выделение, выбрав команду меню Select » Load Selection (Выделе-ние» Загрузить выделение) и в появившемся диалоге Load Selection (Загрузить выделение) нажав кнопку ОК. >•

Увеличьте масштаб отображения до 300%.

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

167

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

Убедитесь, что установлен флажок Transparency (Прозрачность).

Если программа обнаруживает в изображении прозрачные области, то данный флажок устанавливается автоматически. При этом сохраняется прозрачность всех абсолютно прозрачных пикселов. Если же флажок сбросить, то прозрачные пикселы будут окрашены цветом, определенным параметром Matte (Подложка). >• Нажмите кнопку ОК, чтобы закрыть диалог Save For Web (Сохранить для Web). >• В появившемся диалоге сохранения Save Optimized As (Сохранить оптимизированный документ как) откройте папку Web и нажмите кнопку Сохранить (Save), чтобы сохранить файл под прежним именем - Samolet.gif. > В появившемся диалоге Replace Files (Замена файлов) с запросом о необходимости замены существующего файла с таким же именем (Рис. 2.138) нажмите кнопку Replace (Заменить). Файл будет перезаписан. Replace Files Some of the specified files already exist in the target location. The files marked below will be replaced: Ш Samolet.gif

Cancel

] |

Replace

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

168

|

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

169

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

170

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

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

В открывающемся списке Background Contents (Содержимое фона) выберите Background Color (Цвет фона).

> Нажав кнопку ОК, закройте диалог New (Новый). В рабочем окне программы Adobe Photoshop появится окно нового документа с размерами 100х 100 пикселов и черным цветом фона. С помощью фильтров Clouds (Облака) и Difference Clouds (Облака с наложением) создадим мягкий узор в виде «облаков». Эти фильтры генерируют узор с помощью случайных величин, которые изменяются в диапазоне от основного цвета к фоновому, в нашем случае от белого к черному.

171

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

F

> Нажмите несколько раз комбинацию клавиш II l+ll I. При каждом нажатии этой комбинации клавиш фильтр будет применяться повторно, а изображение в окне документа - изменяться. В результате должно получиться что-то вроде Рис. 2.139.

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

172

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

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

Contrast:

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

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

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

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

Подготовка графики с помощью программ Photoshop и ImageReady гаются на цветовом круге (Рис. 2.144). Каждый цвет на этом круге характеризуется тремя базовыми параметрами: цветовым тоном (Hue), насыщенностью (Saturation) и яркостью (Lightness). Такое представление соответствует уже рассмотренной нами ранее цветовой модели HSB. Для описания цветового тона обычно используется название цвета: красный, оранжевый, желтый, зеленый и т.д. Каждый цветовой тон занимает определенное положение на цветовом круге и характеризуется величиной угла от 0° до 360°. Насыщенность - это степень чистоты цвета, которая определяется соотношением серого цвета и данного цветового тона. Насыщенность выражается в процентах от 0% - серый - до 100% - полностью насыщенный. На цветовом круге насыщенность увеличивается от центра к краю.

Рис

' 2Л44~ Цвет°в™ кРУг

Яркость характеризует относительную освещенность или затемненность цвета и измеряется в процентах в диапазоне от 0% - черный - до 100% - белый. На цветовом круге основные цвета моделей RGB и CMYK находятся в определенной зависимости: каждый цвет расположен против дополняющего его цвета и находится между цветами, из которых он получен. Например, сложение зеленого и красного дает желтый. Чтобы усилить какой-либо цвет, нужно ослабить дополняющий его - расположенный напротив него на цветовом круге. Так, чтобы изменить общее цветовое решение в пользу голубых тонов, следует снизить содержание красного. По краю цветового круга располагаются так называемые спектральные цвета, или цветовые тона. Эти цвета характеризуются максимальной насыщенностью. Сделаем насыщенность красного оттенка изображения в окне документа максимальной. >• Перемещайте ползунковый регулятор Saturation (Насыщенность) вправо и наблюдайте в окне документа, как при этом повышается насыщенность красного цвета. Напомним, что на цветовом круге это соответствует движению от центра к краю. Установите значение этого параметра -100%. Изменим цветовой тон изображения на синий. > Перемещайте ползунковый регулятор Hue (Цветовой тон) вправо и наблюдайте, как изменяется цветовой тон изображения в окне документа. Изменяющееся при этом числовое значение в поле ввода над ползунковым регулятором отражает угол поворота на цветовом круге относительно исходного красного цвета. ' • '

. I

'

• ' • . : • ' • • •

'

-

175

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

© Blend Edges Width: [10

| percent

П Resize Tile to Fill Image

Reset

О Kaleidoscope Tile

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

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

L

Preset: [Default Settings [Background

r

I

View Document As • ©Image

OK

Caned Prev

О Background

I

Next

(

-Background ImageEath: [

| Choose... |

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

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

Правка

Вид

Избранное

Сервис

Справка

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

^ Me

ftapec; |g| CADocunentt and SeUing»4Va«ily\Loc»l SellingiU»mp\lmaUBReadyVTaia»>Pi»via»»3\Fon.hlm

|;J В Парой* [ Link

'ormt: OIF Dimensions: lOOwxlOOh

1Ьж4ШС

Settings: Selective, 16 Colon, IOC*/. Diffusion Dither, Tnnspuincy on. No Tnnspmncy Dither, Interkced, 0*/. Web Snap

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

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

178

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

>• Подберите наилучшие, с вашей точки зрения, параметры оптимизации в формате GIF. >• Сохраните оптимизированный документ в папке Web под именем Fon.gif, выбрав команду меню File » Save Optimized (Файл » Сохранить оптимизированный документ). >• Закройте программу Adobe ImageReady без сохранения документа Fon.psd, нажав кнопку [х] в правом верхнем углу ее окна. Посмотрим теперь, как будет выглядеть изготовленный фон на Web-странице geoton.html. >• Откройте файл geoton.html из папки Web в программе Блокнот (Notepad) и вставьте в открывающий тег атрибут background=Fon.gif. >

Откройте в браузере файл geoton.html.

Как видите, Web-страница с изготовленным фоном выглядит значительно интереснее, чем с однородным. Обратите внимание также, что швы между плитками практически незаметны. i >• Закройте программу просмотра Web-страниц. >• Удалите из HTML-кода файла geoton.html вставленный атрибут background= Fon.gif. >

Закройте программу Блокнот (Notepad).

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

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

Adobe Photoshop для Web

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

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

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

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

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

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

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

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

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

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

181

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

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

_I-J —

El On 21

Narrow

92

Wide

гц„,.

Matte

-79

Shiny

Material-

PI*5'!0

68

Metallic

EBp0?V|tr Under

0

Over

Ambi-ncf Negative

32

Focur P

aativ«

Б

^

r'

• Texture Channel: E3 Preview

Full

Ne

.|n>fmi>j<-

El White is high Flat Height:

jlj

[Alpha 1 50

Positive

JaMountainous

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

182

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

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

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

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

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

0

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

Чет мы занимаемся?

Оборудование Спец. ПО Наши партнеры Прайс-лист

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

184

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

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

О нашей компании Новости Оборудование Спец. ПО Наши партнеры Прайс-лист Связь с компанией 100% •> I

-;..s.i 9 28.8 KM -"I

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

185

Adobe Photoshop для Web Если размер вырезанной части изображения вас не устраивает, то его легко можно изменить, переместив маркеры выделения с помощью инструмента \№\ Slice Select Tool (О) (Инструмент «Выбор фрагмента» (О)). Этим же инструментом можно выделить фрагмент и переместить его. Для удаления выделенного фрагмента достаточно нажать клавишу Р*1"1*! или воспользоваться командой меню Slices •Delete Slice (Фрагменты * Удалить фрагмент). > С помощью инструмента VL\ - Slice Tool (К) (Инструмент «Фрагмент» (К)) вырежьте второй фрагмент с надписью Чем мы занимаемся?, а затем - все остальные фрагменты с названиями пунктов меню. Всего должно получиться 9 пользовательских фрагментов (Рис. 2.160). V j menu ры) & 100% (Qiiqin

ИН Е

! Главная страница оз о !

: Чем мы занимаемся?

03 а |

\ О нашей 'компании 04 га К Новости 05 О !

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

06 а !

Спец. ПО

07 Р

Наши партнеры ов а г Прайс-лист ,..':{

оч а

f

:

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

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

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

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

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

»

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

188

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

| i SliceXTableX'mage M
URL: |~

®

~|

rnenujl

„ю—.*.—!

~ZI -d

В открывающемся списке Туре (Тип) вы можете Target; ...... . . .iil выбрать тип фрагмента из трех вариантов: Image Alt: (Изображение), No Image (He изображение) и Table t> Dimensions (Таблица). По умолчанию тип всех фрагментов - t» Cell Alignment t> Background Image (Изображение), т.е. содержащий графические t> Status Bar Message /Й данные. Для фрагментов, содержащих не графику, а только сплошной цвет или текст, следует устанав- Рис. 2.162. Палитра Slice ливать тип No Image (He изображение). При этом (Фрагмент) вид палитры Slice (Фрагмент) изменится, и вы сможете ввести нужный текст в специальном поле ввода, а в расширяемой части Background (Фон) выбрать цвет фона для текстового фрагмента из открывающегося списка Color (Цвет) (Рис. 2.163). Текст, который вы введете, в окне документа не отобразится. Его можно будет увидеть только в браузере. Чтобы связать выбранный фрагмент изображения с другим HTML-документом, который будет загружаться в браузер после щелчка мышью на данном фрагменте, следует в поле открывающегося списка URL ввести адрес нужного документа. > В поле открывающегося списка URL введите имя файла geoton.html. Напомним, что, создавая сайт компании ГЕОТОН, мы использовали технологию фреймов, разделив экран по вертикали на два окна: в левом отображается меню из файла menu.html, а в правом - страницы сайта. Правому фрейму присвоено имя frame. Чтобы определить, в какой фрейм должна загружаться Webстраница, следует указать его имя в поле открывающегося списка Target (Цель). 189

Adobe Photoshop для Web > В поле открывающегося списка Target (Цель) введите имя правого фрейма frame. В поле ввода Alt (Альтернативный) вы можете указать значение атрибута alt тега . Введенный текст будет отображаться вместо графического фрагмента в текстовых браузерах, а также, если функция загрузки графики выключена, в некоторых браузерах в процессе загрузки изображения и как всплывающая подсказка. 11 Slice XTtbbXImagt Мар^у

>• В поле ввода Alt (Альтернативный) введите Главная. > Нажмите кнопку © в правом верхнем углу палитры Slice (Фрагмент) и в появившемся меню выберите команду Show Options (Показать параметры). Палитра развернется, и вы увидите дополнительные элементы управления (Рис. 2.163). С помощью элементов управления Dimensions (Размеры) можно указать точные координаты X и Y левого верхнего угла фрагмента, а также изменить его ширину (W) и высоту (Н). Чтобы сохранить пропорции фрагмента при изменении одното из параметров - ширины или высоты, следует установить флажок Constrain Proportions (Сохранить пропорции).

Typti [b

-J

Name: j menuJH URLl |gtoton.Nrnl Target: ||«m«__

•V Dimensions Xl

Hi Г" Constrain Proportions ^- Oil Alionm.nt Horln V«rti iDtfauk »i
В поле ввода Status Bar Message (Сообщение в строке состояния) можно ввести текст; который буPuc. 2.163. Развернутая палитра Slice (Фрагмент) дет отображаться в строке состояния (Status Bar) браузера при установке указателя мыши на данном фрагменте. Если это поле ввода оставить пустым, то по умолчанию, в строке состояния браузера отображается адрес URL связанного с фрагментом документа. Подобным же образом определим ссылку для второго фрагмента изображения с надписью Чем мы занимаемся? v Щелкните мышью в окне документа на фрагменте 02 с текстом Чем мы занимаемся?, чтобы выделить его. В палитре Slice (Фрагмент) отобразятся параметры этого фрагмента. v В поле открывающегося списка URL введите имя файла - spisok.html, на который фрагмент должен ссылаться. > В поле открывающегося списка Target (Цель) введите имя правого фрейма frame, в который должен загружаться файл spisok.html.

190

Подготовка графики с помощью программ Photoshop и ImageReady >• В поле ввода Alt (Альтернативный) введите текст: Чем мы занимаемся? Повторяя описанные шаги, можно создать ссылки для каждого фрагмента изображения. После того как ссылки назначены, остается только оптимизировать фрагменты изображения и сохранить их. Для оптимизации следует поочередно выбирать каждый фрагмент и устанавливать наиболее подходящие для него параметры. Но, так как все части нашего документа имеют практически одинаковое графическое содержимое, их можно связать и применить единые оптимизационные параметры. > Нажмите и, удерживая нажатой клавишу l s h i t t l. щелкайте мышью поочередно на каждом фрагменте, чтобы выделить все части изображения. > Отпустите клавишу II Shitt Для выделения всех фрагментов вы можете также воспользоваться командой меню Select» All Slices (Выделение » Все фрагменты). > Выберите команду меню Slices • Link Slices for Optimization (Фрагменты • Связать фрагменты для оптимизации). Все части изображения будут связаны и в левом верхнем углу каждой из них появится дополнительный значокиндикатор Ц], указывающий на связь. Все значки-индикаторы окрасятся в красный цвет. Это помогает идентифицировать все связанные фрагменты. Теперь можно выполнить оптимизацию всех фрагментов одновременно. х Щелкните мышью на ярлыке 2-Up (2 варианта) в верхней части окна документа. Будет выполнена оптимизация документа с параметрами, применявшимися при последней оптимизации. > В палитре Optimize (Оптимизация) выберите формат GIF. > В открывающемся списке Colors (Цвета) выберите 16. Перед сохранением документа желательно еще определить цвет фона Webстраницы, которая будет создана автоматически и на которую будет помещена таблица с нарезанными частями изображения. Если цвет фона не определить, то по умолчанию будет использован белый цйет. >• Выберите команду меню File • Output Settings • Background (Файл • Параметры вывода • Фон). На экране появится диалог Output Settings (Параметры вывода) (Рис. 2.146). >• Установите переключатель Image (Изображение). х В открывающемся списке BG Color (Цвет фона) выберите Foreground Color (Цвет переднего плана). В поле этого списка отобразится синий цвет переднего плана. 191

Adobe Photoshop для Web > Нажатием кнопки OK закройте диалог Output Settings (Параметры вывода). Теперь для фона HTML-файла, который будет создан автоматически, будет использован синий цвет. >• Прежде чем сохранить оптимизируемый документ, переименуйте или переместите из папки Web файл menu.html. Если это не сделать, то автоматически созданный при сохранении оптимизированных фрагментов HTML-файл с таким же именем будет записан поверх существующего файла. Сохраним оптимизированные фрагменты изображения. >• Выберите команду меню File * Save Optimized (Файл * Сохранить оптимизированный документ). На экране появится диалог Save Optimized (Сохранение оптимизированного документа) (Рис. 2.92). >• Откройте папку Web. В процессе сохранения будет автоматически создан HTML-документ, имя которого - menu - предлагается по умолчанию в поле ввода Имя файла (File name). Одновременно с файлом HTML будут сохранены также нарезанные фрагменты, так как в открывающемся списке Тип файла (List files of type) автоматически выбрано HTML and Images (*.html) (HTML и изображения (*.html)). В том случае, если вам нужны только нарезанные фрагменты, чтобы вставить их в существующий файл HTML вручную, следует в этом открывающемся списке выбрать Images Only (*.gif) (Только изображения (*.gif)). В открывающемся списке Slices (Фрагменты) у нижнего края диалога по умолчанию установлено All Slices (Все фрагменты). При этом будут сохранены все нарезанные фрагменты. Если же в данном списке выбрать Selected Slices (Выбранные фрагменты), то будут сохранены только выделенные в данный момент фрагменты изображения. >• Чтобы настроить параметры создаваемых файлов, выберите значение Other (Другие) из открывающегося списка Settings (Параметры). На экране появится диалог Output Settings (Параметры вывода) (Рис. 2.164). Во втором сверху открывающемся списке без названия можно выбрать один из наборов элементов управления: HTML - для форматирования файлов HTML; Saving Files (Сохранение файлов) - для сохранения файлов изображений; Slices (Фрагменты) - для определения имен фрагментов, Image Maps (Карты навигации), Background (Фон) - для установки параметров фона, Saving Files (Сохранение файлов) и Metadata (Метаданные) - для сохранения метаданных. При выборе каждого набора вид диалога будет изменяться, отображая соответствующие элементы управления. По умолчанию в диалоге отображается набор элементов для форматирования HTML-файлов.

192

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

OK

Preset: [Custom [HTML

Cancel

П Output XHTML Formatting Tags Case: [Lowercase (body) Attribute Case: [lowercase (rowspan) Indent: [Tabs

Brev I

Next

I

Load...

I

Save...

Line Endings: [Automatic Encoding: [Automatic (windows-1251) Coding ———————————— 13 Include Comments 0 Always Add Alt Attribute El Always Quote Attributes П Close All Tags 0 Include Zero Margins on Body Tag

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

Adobe Photoshop для Web в открывающемся списке Referenced (Ссылка) следует выбрать тип ссылки в коде HTML, определяющей положение фрагмента. Preset: [custom MCOl

щ|

1

OK

|

Erev

[

jsgxt

И

|

Load...

[»]

|

gave...

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 |none

[«] + [none

jj + | layer name or slic p| + Щ+|попе

|»|

Example: MyFle.Ol

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

194

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

Preset: [Custom

|*]|

i авнъ i 1

&ev

|

1

Mext

1

I

Load...

|

1

Save...

|

Э Client-Side О NCSA Server-Side О CERN Server-Side О Client-Side and NCSA Server-Side О dent-Side and CERN Server-Side

„,

_^

О Top

О Body

0 Bottom

•

Puc, 2.166. Диалог Output Settings (Параметры вывода) с набором элементов управления Image Maps (Навигационные карты) Output Settings

Preset: |custom

л

i

(

[3

^

0 Put Images in Folder: j triages

I

О Use Long Filename Extensions (Jpeg, .wbmp) 0 Copy Background Image when Saving

| slice name

|J + | hyphen

| underscore |none

|jj + | trigger name

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

»J+[none

[»J-f|.ext

1

&ev

1

|

xt №

|

|

ipad...

|

|

gave...

|

Щ+ P1 + (Vj

Example: MyStee-MyTrlgger_over.gif

^

^

0 Wlxtows

,,.ь ,

0 Mac OS 9

0 Unix

Puc. 2.167. Диалог Output Settings (Параметры вывода) с элементами управления Saving Files (Сохранение файлов)

195

Adobe Photoshop для Web Установленный флажок Copy Background Image when Saving (Скопировать фоновое изображение при сохранении) дает указание программе в процессе сохранения скопировать также фоновое изображение, определенное в наборе установок Background (Фон). Открывающиеся списки File Naming (Именование файлов) позволяют выбрать элементы, комбинация которых составит имена по умолчанию для всех файлов. Эти элементы включают: имя документа (doc. name), имя фрагмента (slice name), состояние эффекта Rollover (rollover state), дату создания файла в различных форматах (date), номер фрагмента (trigger no.), расширение имени файла (.ext), знаки пунктуации - дефис (hyphen), символ подчеркивания (underscore), пробел (space) и др. Пример составленного имени (Example) приведен под открывающимися списками. Установка флажков Filename Compability (Совместимость имен файлов) делает имена файлов совместимыми с операционными системами Windows, Macintosh (Mac OS) и UNIX. > Закройте диалог Output Settings (Параметры вывода), нажав кнопку ОК. Программа возвратит вас к диалогу Save Optimized (Сохранение оптимизированного документа). > Закройте и этот диалог нажатием кнопки Сохранить (Save). Файлы будут сохранены в указанных папках с установленными параметрами. V Закройте документ menu.psd без сохранения, нажав кнопку [х] в правом верхнем углу его окна. ',.

'

'

•; .

Проверим созданное меню.

,.

•

.

.'

•"

;

•"- -."

' N

..•'."••

•

.:ЛИ'.*

> Откройте в программе просмотра Web-страниц файл index.html из папки Web. Вы увидите, что в правом фрейме загружен файл geoton.html, а в левом - вместо прежнего меню-таблицы загружена созданная нами графическая навигационная панель. > Устанавливайте указатель мыши на разных пунктах меню. При этом будет изменяться цвет фона соответствующей надписи. >• Щелкните мышью на пункте меню Чем мы занимаемся? В правый фрейм будет загружен файл spisok.html. > Щелкните мышью на пункте меню Главная страница. В правый фрейм будет загружен файл geoton.html. В автоматически созданном программой файле menu.html таблица с фрагментами изображения находится между комментариями /G«oton.flii" width*"468" heighc»"60" I— End ImageReady Slice* —>

'—' My Computer

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

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

Папка:

no )CLOUD ]Fon iSamolet

^мя Файла:

[Geolon

1ип Файла:

| Images ОпИ'.д»)

Settings:

[ DetauH Sellings

Sleet:

|

Отмена

AH Slices

PMC. 4.17. Диалог Save Optimized (Сохранение оптимизированного документа) >• Закройте диалог Save Optimized (Сохранение оптимизированного документа) нажатием кнопки Сохранить (Save). Файл будет сохранен в указанной папке. Программу Adobe ImageReady можно закрыть. >• Выберите команду меню File » Exit (Файл * Закрыть). На экране может появиться запрос о сохранении файла Geoton.psd. >• Нажмите кнопку No (Нет) в этом запросе. Окно документа закроется без сохранения файла. v Просмотрите, как выглядит баннер на первой Web-странице вашего сайта, вставив в теге файла 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. ,

Подписано в печать с оригинал-макета 23.03.2005 г. Формат 70хЮО'/|6. Печать офсетная. Печ. л. 14. Заказ №6645. Тираж 3 500 экз.

V

• Отпечатано в полном соответствии с качеством предоставленных диапозитивов в ОАО «Можайский полиграфический комбинат» 143200, г. Можайск, ул. Мира, 93

Издательская группа «ТРИУМФ» представляет ЛУЧШИЕ КНИГИ ДЛЯ ВАШЕГО МАГАЗИНА

Интернет-магазин

www.3st.ru

9ll785936ll73048l

Телефон для товароведов: (095) 720 07 65

E-mail: [email protected]