This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
.. . должен иметь с/ледующий вид: <style type="text/css"> Вставим этот тег в код HTML файла spisok.html. >• Вставьте пустую строку в файле spisok.html после элемента 4eM мы занимаемся? и введите теги <stylex/style>, как указано выше. Код HTML» заголовка Web-страницы, заключенный между тегами ... < /head>, должен иметь такой вид: 31
Adobe Photoshop для Web 4eM мы 3aHMMaeMCH? <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)) - используется для создания плавных переходов от одного цвета к другому. Такой плавный переход художники называют растяжкой. Этой кнопкой включается также инструмент [' Нажмите и удерживайте клавишу >• Не отпуская клавишу 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). > Установите указатель мыши, который примет форму Выберите команду меню 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), чтобы поменять местами образцы цвета. > Нажмите кнопку [• Нажмите кнопку [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). > Щелчком мыши выберите инструмент [• Отмените выделение объекта, нажав комбинацию клавиш 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
|%
С • Щелкая мышью в разных местах цветового поля, наблюдайте, как изменяется цвет тени на рисунке. Подберите оттенок светло-синего, наиболее подходящий, с вашей точки зрения, для тени. > Закройте диалог 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 (Слои). На экране появится меню эффектов. Это меню содержит перечень тех же э Выберите из появившегося меню эффект 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 •
