Анимация

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

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

Авторские права

Авторские права
Цифровая метка

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

Несколько лет назад решение этой проблемы предложила компания Digiinarc. Разработанная ими технология ImageMarc позволяет внедрить в изображение (в само изображение, а не в файл) цифровую метку, которая может быть считана. Метка абсолютно точно идентифицирует автора изображения и может быть представлена как свидетельство его прав. Интересно, что метка, являясь частью изображения, абсолютно незаметна. Для получения личного авторского идентификатора необходимо за небольшую плату зарегистрироваться на сервере компании Digimarc (http://www.digimarc.com). Без регистрации использование метки не имеет смысла, поскольку вам не удастся доказать, что метка принадлежит именно вам. Впрочем, программное обеспечение Digimarc не даст внедрить персональную метку, пока регистрация не произведена. Если изображение содержит метку зарегистрированного автора, то, считав ее, вы можете обратиться на сервер Digimarc для получения подробной информации об авторе.

Программное обеспечение Digimarc поставляется в комплекте Photoshop в виде фильтров Digisign.8bf и Digiread.8bf. Первый предназначен для внедрения ме1ки, а второй для ее считывания. Фильтры вызываются командами Embed Watermark и Read Watermark, находящимися в группе фильтров Digimarc. Вы сами можете поэкспериментировать с цифровой меткой на примере любого изображения. С помощью фильтра Embed Watermark внедрите в изображение демонстрационную метку (это доступно и без регистрации). Редактируйте изображение до тех пор, пока метка не перестанет читаться фильтром Read Watermark. Вы наверняка отметите, что метка весьма устойчива: удалить ее можно только такими средствами, которые сделают изображение неузнаваемым. Как обещает компания Digimarc, метка будет считываться даже после сканирования типографского отпечатка помеченного изображения.

При открытии любого файла Photoshop автоматически пытается найти цифровую метку. Если метка определена, то в заголовке окна документа отображается символ авторского права ©. Вы можете ускорить загрузку изображений в Photoshop, если пожертвуете этой функцией. Чтобы отключить обязательный поиск метки при открытии файла, нужно удалить фильтр Digiopen.Sbe из папки \Plug-Ins\Digimarc.

Фоновые текстуры

Любая Web-страница может иметь сплошной цветной фон (его создают средствами HTML) или фон из повторяющихся, как изразцы, графических элементов. В Internet существует много доступных библиотек готовых фоновых текстур. Если же вы хотите, чтобы ваша страница выделялась на общем фоне, создавайте ее сами. Photoshop позволит вам создать свои графические фоновые текстуры, которые будут максимально соответствовать вашей идее.

Браузер различает повторяющиеся и неповторяющиеся фоновые текстуры. Последние представляют собой обыкновенное изображение, находящееся постоянно на странице. Как правило, оно делается либо очень светлым, либо очень темным. На светлом фоне текст пишется темным шрифтом, а на темном — светлым. Для изменения яркости изображений пользуйтесь командой Brightness/Contrast. Такие фоновые изображения выглядят привлекательно, но имеют большой размер. Это приводит к крайне нежелательному увеличению времени загрузки страницы. Если вы все-таки решились использовать такое изображение, то выберите либо формат JPEG с высокой степенью сжатия, либо GIF с маленьким числом цветов (до 16).

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

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

Информация о файле

Информация об изображении может понадобиться не только для защиты прав его автора. Гораздо чаще она необходима при передаче изображений в редакцию или сервис-бюро Полезна информация и самому автору, поскольку позволяет упорядочить большое количество изображений и дает возможность поиска. В этом случае данные не должны ограничиваться именем автора. Организации Newspaper Association of America (NAA) и International Press Telecommunications Council (IPTC) разработали стандартную форму сопроводительной информации к материалам, распространяемым в цифровой форме Photoshop поддерживает эту спецификацию в отношении изображений.

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

Элементы дизайна

Элементы дизайна

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

Кнопки

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

Эффект	Имитация	Параметры
Drop Shadow	Тень от объекта на плос кости. Объект производит впечатление приподнятого над фоном	Режим наложения (Mode). Непрозрачность (Opacity). Цвет тени. Угол, под которым направлен свет (Angle). Расстояние от объекта (Distance). Размывка тени (Blur) "Густота" тени (Intensity)
Inner Shadow	Тень от границ объекта на самом объекте Объект производит впечатление вырезанного из фона	Режим наложения (Mode) Непрозрачность (Opacity) Цвет тени Угол, под которым направлен свет (Angle) Расстояние от объекта (Distance) Размывка тени (Blur) "Густота" тени (Intensity)
Outer Glow	Свечение объекта	Режим наложения (Mode) Непрозрачность (Opacity) Цвет свечения Величина свечения (Blur) Яркость свечения (Intensity)
Inner Glow	Свечение объекта изнутри	Режим наложения (Mode) Непрозрачность (Opacity) Цвет свечения Величина свечения (Blur) Яркость свечения (Intensity) Выбор светящейся части объекта— края (Edges) или центр (Center)
Bevel and Emboss	Барельеф и горельеф. Объект выглядит выдавленным на фоне, вдавленным в фон или сам приобретает рельеф	Режим наложения (Mode) для теней Режим наложения (Mode) для светов Непрозрачность (Opacity) для теней Непрозрачность (Opacity) для светов Цвет светов Цвет теней Вариант эффекта Внешний скос (Outer Bevel) Внутренний скос (Inner Bevel) Барельеф (Emboss) Вдавленный барельеф (Pillow Emboss) Угол, под которым направлен свет (Angle) Высота рельефа (Depth) Размывка рельфа (Blur) Выбор между барельефом (Up) и горельефом (Down)

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

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

1. Создайте новый документ размером 200х200 пикселов и белым фоновым слоем с помощью команды New... меню File.
2, С помощью инструмента Elliptical Marquee выделите круг с диаметром примерно на 30 пикселов меньшим, чем ширина документа.
3. Откройте документ с текстурой мрамора rnarble.jpg, который использовался в упражнениях предыдущего раздела.
4. Выделите весь документ и скопируйте в буфер обмена.
5. Закройте документ rnarble.jpg.
6. Вставьте текстуру из буфера обмена в выделенную область нового документа с помощью команды Paste Into меню Edit.
7. Выберите команду Bevel and Emboss... меню Effects.
8. Перед вами диалоговое окно самого сложного из эффектов (Рисунок 9.26). Грубо говоря, эффект рельефа создается четырьмя растяжками, примыкающими к объекту. Две смежные растяжки создают переходы между цветом объекта и более темным цветом. Две противолежащие растяжки, напротив, осуществляют переход от цвета объекта к более светлому.

Совет
Совет
Если вы желаете увидеть механизм эффекта, воспользуйтесь командой Create Layers меню Effects. Она помещает растяжки, создающие эффект рельефа, на отдельные слои.

9. С помощью элементов управления полей Highlight и Shadow определяются конечные цвета этих растяжек и режим их наложения на объект или фон. По умолчанию это черный цвет для теней и белый цвет для светов. Для теней определен режим Multiply, а для светов — Screen. Эти установки годятся для большинства случаев. Оставьте их в исходном состоянии.

Photoshop для WWW

Photoshop создавался как программа, предназначенная для очень узкого круга потребителей, использующих настольные издательские системы. В те времена стоимость аппаратуры (компьютеры, сканеры, принтеры), необходимой для элементарной работы с изображениями, измерялась десятками тысяч долларов. Стремительное развитие компьютерных технологий в последнее десятилетие сделало такую аппаратуру доступной для всех. Photoshop тоже превратился из программы только для специалистов по издательским системам в программу широкого применения.
Развитие и повсеместное распространение Internet сделало Photoshop программой №1 для тех, кто создает свои страницы в WWW (World Wide Web). Язык описания Web-страниц, HTML (Hypei-Text Markup Language), поддерживает использование только точечных изображений, а лучший редактор точечных изображений, конечно Photoshop. HTML исключительно прост, а визуальные редакторы (Microsoft Frontpage, Adobe PageMill, Macromedia Dreamwaver и др.) сделали верстку Web-страниц столь же простым делом, как набор текста с помощью текстового процессора. Это вызвало лавинообразный рост WWW, и, как следствие, спрос на инструменты создания Web-страниц.
Разработчики прекрасно понимают причины популярности своего детища и с каждой версией вводят в него возможности, ориентированные на новый слой потребителей, Web-дизайнеров:
§ Фильтры экспорта в основные форматы WWW: GIF 89a, JPEG, PNG.
§ Специальная палитра цветов, обеспечивающая их одинаковую передачу на компьютерах разных платформ и с разными браузерами.
§ Эффекты для слоев: тени, имитация объема. Возможность редактировать текст.
§ Средства автоматизации и пакетной обработки изображений: палитра Actions, команды меню Automate.
§ Сохранение в файлах изображений информации об авторском праве и внедрение в изображения невидимых авторских меток.
§ Фильтры импорта и экспорта файлов-документов в переносимом формате PDF (Portable Document Format).
§ Расширение интерфейса программирования (API). Это стимулирует создание сторонними производителями специализированных подключаемых модулей для Photoshop.
Далее рассмотрим применение этих возможностей при создании изображений, предназначенных для World Wide Web.

Прозрачность

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

1. Откройте файл plane, tif.
2. Преобразуйте слой Background в обычный слой. Напомним, что для этого нужно сделать двойной щелчок на пиктограмме слоя в палитре слоев и нажать кнопку ОК в открывшемся диалоговом окне Make Layer.
3. Выделите фон, загрузив выделенную область из альфа-канала.
4. Удалите фоновые пикселы командой Clear меню File или нажатием клавиши <Del>. Теперь изображение находится на прозрачном фоне.
5. Выберите команду Export меню File и в открывшемся вложенном меню команду GIF89a Export....

Размеры и разрешение

В отличие от бумажной, размер Web-страницы не ограничен ни по горизонтали, ни по вертикали. Тем не менее, ни в коем случае не делайте страниц, ширина которых превышает ширину экрана. Длина страницы менее критична, но оптимальная величина — два-три экрана. Поскольку изображения на Web-странице предназначены только для просмотра на экране, их разрешение должно совпадать с разрешением экрана, а размеры не должны превышать его Разрешение мониторов варьируется в широких пределах, так же, как и диагональ экрана — на какие же параметры рассчитывать Web-дизайнеру9 На практике страницы проектируются исходя из средних величин Наиболее типичное разрешение мониторов на сегодня 72 пиксела/дюйм (800х600 пикселов), а диагональ 15 дюймов (видимая область 14 дюймов или 35 см) Из этих размеров следует вычесть площадь, занимаемую элементами интерфейса самого браузера. Кроме того, большинство пользователей предпочитают открывать окно браузера не на весь экран, чтобы иметь возможность быстро переключаться между несколькими одновременно открытыми его копиями В результате получится примерно 600х400 пикселов (рис 9.1).

Размеры разрешения форматы

Размеры, разрешения, форматы

Эти основные параметры в приложении к документам, предназначенным для электронного распространения, имеют свою специфику. Подавляющее большинство пользователей Internet до сих пор применяют в работе обыкновенные коммутируемые телефонные линии и модемы, поддерживающие низкую (28800—56000 бод) скорость передачи данных. Скорость передачи зачастую лимитируется качеством телефонных линий и высокой загрузкой внешних каналов, что особенно актуально для нашей страны. В этом случае, скорость падает даже ниже номинальной скорости модема.
Скорость передачи графической информации значительно ниже, чем текстовой. Это определяет необходимость разумного подхода при создании изображений для распространения по сети. Размеры графических файлов должны быть не слишком велики, чтобы пользователь-читатель не покинул страницу потому, что ему надоело ждать окончания ее загрузки.
Время загрузки изображений пропорционально размеру их графических файлов. Можно выделить три способа минимизации этих размеров:
§ Снижение размеров и разрешения изображений
§ Уменьшение количества цветов в изображении
§ Использование сжатых и специальных форматов файлов, их оптимизация
Все эти способы используются при подготовке изображений для Web-страниц. Важно найти компромисс между скоростью и качеством изображения, чтобы, не утомляя пользователя длительным ожиданием, представить эффектную и информативную страницу.

Photoshop широко используется при создании

Резюме

§ Photoshop широко используется при создании изображений для WWW. Эта работа имеет свою специфику, связанную с невысокой скоростью передачи данных по коммутируемым линиям. Она требует минимизации размеров и количества изображений на Web-странице.
§ Поскольку изображения на Web-странице предназначены исключительно для экранного просмотра, они должны иметь разрешение экрана монитора, 72 пиксела/дюйм. При создании Web-страниц вместо пары размер/разрешение удобнее использовать одну единицу измерения — пиксел.
§ Все браузеры позволяют просматривать Web-страницы с изображениями в форматах GIF и JPEG. Эти форматы используют эффективные алгоритмы сжатия, значительно сокращающие размеры графических файлов. При этом формат GIF поддерживает только индексированные, а JPEG и полноцветные изображения. Уменьшить размер GIF-файла можно сократив количество цветов в изображении. Формат JPEG позволяет управлять сжатием, но его увеличение приводит к снижению качества изображения-
§ Формат GIF позволяет создавать изображения с прозрачными областями и несложную анимацию. Используйте Photoshop для создания отдельных кадров анимации и специальные программы-аниматоры для сборки кадров в один файл GIF.
§ С помощью Photoshop легко создавать и специфические элементы дизайна Web-страниц: фоновые текстуры и кнопки.
§ С помощью специального фильтра можно внедрить в изображение цифровую метку, позволяющую автору "подписывать" свои работы. Для получения собственной метки обратитесь на сервер http://www.digimarc.com/.
§ Любой графический файл Photoshop позволяет снабдить исчерпывающей информацией о находящемся в нем изображении. Используйте эту возможность при передаче файлов другим лицам и для систематизации своих архивов.

Размер

Рис 9.1. Размер

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

Еще несколько советов по оптимизации загрузки изображений:
§ Одно большое изображение грузится быстрее, чем несколько маленьких (не пересылается дополнительная служебная информация), поэтому используйте изображения-карты ссылок (image maps).
§ Указывайте в ссылках на изображение его размеры — браузеру потребуется меньше времени на загрузку изображения и он сразу построит для него правильную рамку.

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

Способы сглаживания при индексации цветов

Рис 9.2. Способы сглаживания при индексации цветов

1. Откройте файл plane l.tif.
2. Создайте копию файла командой Duplicate... меню Image.
3. Выберите режим Indexed Color... из списка Mode, находящемся в меню Image.
4. Перед вами диалоговое окно Indexed Color. Здесь вам необходимо выбрать палитру изображения, глубину цвета, метод сглаживания, качество сглаживания и точность цветопередачи. В списке палитр выберите палитру Web.
5. В списке Dither выберите вариант Diffusion. Как уже упоминалось, наиболее приемлемый вариант.
6. Переключатель Color Matching переведите в положение Best и установите флажок Preserve Exact Colors, чтобы достичь максимального качества.
7. Нажмите кнопку ОК.
8. Проделайте шаги 3—8 с дубликатом изображения, только на шаге 4 выберите палитру Adaptive. Сравните получившиеся индексированные изображения (чтобы различия были очевидны, увеличьте масштаб отображения документов).
9. Несомненно, адаптированная палитра дает намного более качественный результат. Особенно это сказывается на изображениях с большим количеством оттенков нескольких цветов, поскольку в палитре Web много цветов, но мало оттенков. Убедитесь в этом, открыв палитру командой Color Table... того же списка Mode меню Image.
10. Закройте оба изображения не сохраняя.

Особенно удачно использование индексированных изображений для отображения текстовой информации и рисунков. В этом случае 256 цветов даже излишни — можно обойтись и меньшим их количеством. Индексированные форматы предоставляют вам такую возможность. Photoshop автоматически вычисляет количество цветов в индексированном изображении и округляет его до ближайшей степени двойки: 2, 4, 8, 16, 32, 64, 128. Меньшее количество цветов позволяет создавать графические файлы меньшего размера.

Изображение с прозрачными областями в окне браузера

Рис 9.4. Изображение с прозрачными областями в окне браузера

Вторым форматом графических файлов в WWW является JPEG, уникальный алгоритм которого позволяет добиваться 15-кратной плотности сжатия Высокие плотности сжатия достигаются ценой качества изображения, что неприемлемо для издательских систем, но абсолютно несущественно для Web-страниц. В формате JPEG можно хранить полноцветные и полутоновые изображения, что великолепно дополняет возможности формата GIF Оба формата, GIF и JPEG, поддерживают чересстрочную развертку Это выглядит так, будто по мере загрузки с границы изображение становится более четким и подробным Такой способ демонстрации заключается в загрузке изображения не подряд, а через несколько (2—5) строк.

1. Откройте файл chart.ai из вашей рабочей папки командой Open из меню File.
2. В открывшемся диалоговом окне Rasterize Generic EPSFormat оставьте предлагаемые размеры и разрешение 72 dpi, а цветовую модель в списке Mode установите RGB Color.
3. Выберите команду Flatten Image из меню Layer, чтобы документ получил слой Background.
4. Выберите команду Save A Copy меню File.
5. В открывшемся диалоговом окне выберите формат сохранения JPEG (расширение jpg).
6. Нажмите кнопку Save.
7. Перед вами диалоговое окно JPEG Options (Рисунок 9.5).

Диалоговое окно JPEG Options

Рис 9.5. Диалоговое окно JPEG Options

8. В поле Image Options устанавливается степень сжатия файла. Чем сильнее сжатие, тем меньше получающийся файл, и ниже его качество Параметр имеет 10 градаций (от 0 до 10) и четыре предопределенных варианта: 1 Low, 3 Medium, 6 High и 8 Maximum. Выбирайте степень сжатия исходя из сюжета изображения. Поначалу обязательно открывайте полученный JPG-файл и оценивайте его качество. Скоро у вас появится опыт, чтобы сделать правильный выбор этого параметра. Пока установите качество Low.
9. В поле Format Options устанавливаются параметры, связанные с особенностями формата. Переключатель Baseline ("Standard") соответствует самому распространенному варианту формата. BaselineOptimized является слегка оптимизированной версией первого, а выбор переключателя Progressive позволяет создавать изображения с чересстрочной разверткой. Если установлен последний вариант формата, то становится доступным список с фактором чередования строк. Выберите переключатель BaselineOptimized.
10. Нажмите кнопку ОК. Копия документа сохранена в файле chart copy jpg.
11. Сохраните еще одну копию документа в формате TIFF с помощью команды Save A Copy.
12. Сравните размер chart copy-tif с размером файла chart copy jpg. Первый занимает на диске 240 Кбайт, а второй 24 Кбайт — в 10 раз меньше!
13. Откройте файл chart copy.tif и сравните с оригиналом. Никаких отличий нет.
14. Теперь откройте файл chart copy.jpg и внимательно просмотрите изображение под увеличением (Рисунок 9.6). Заметили характерную "грязь" и нарушения цветопередачи. Такое изображение непригодно для высококачественной печати, но для Web-страницы вполне подойдет.

Изображение до и после сохранения в формате JPEG

Рис 9.6. Изображение до и после сохранения в формате JPEG

Невозможность создания полноцветных изображений с прозрачными участками в рамках форматов GIF и JPEG привела к появлению нового формата. Формат PNG был разработан в качестве альтернативы формату GIF и для представления изображений в сети World Wide Web и в других электронных сетях. Этот формат сохраняет всю цветовую информацию и один альфа-канал изображения, а также для минимизации объема файла применяется алгоритм уплотнения, не приводящий к потере данных. Альфа-канал используется браузером в качестве маски прозрачности. Плотность сжатия PNG-файлов аналогична плотности TIFF-файлов, поскольку применяются сходные алгоритмы, которые не приводят к снижению качества изображений К сожалению, старые версии некоторых браузеров не поддерживают этот формат, но если вы ориентируетесь на Internet Explorer или Netscape Navigator, то можете смело им пользоваться.

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

Часто бывает необходимо опубликовать на Web-странице изображение, которое имеет ценность само по себе: художественная фотография, картина, фотографический результат исследований (например, рентгенограмма), карта и т. п. Для того чтобы зритель мог рассмотреть его фрагменты более крупным планом, приходится создавать серию этих "крупных планов" и делать ссылки на них с полного изображения Неудобство и несовершенство такого метода бросается в глаза. Уже сейчас предлагается два варианта решения этой проблемы. Первый заключается в создании графического формата, поддерживающего значительное масштабирование с минимальными потерями качества. Второй вариант решения предполагает создание формата, позволяющего пользователю самому выбирать разрешение для просмотра, наподобие формата PCD. Первым путем пошли разработчики формата FIF (компания Altamira), а вторым — FPX (компании Hewlett Packard, Kodak). На сайтах этих компаний вы можете найти соответствующие фильтры импорта и экспорта для Photoshop. Пока данные разработки находятся в стадии эксперимента, и для просмотра результатов их работы требуются специальные дополнения для браузеров или серверов. Широкое использование этих форматов пока еще дело будущего.

Диалоговое окно GIF89a Export Options

Рис 9.7. Диалоговое окно GIF89a Export Options

6. Перед вами диалоговое окно фильтра экспорта (Рисунок 9.7). Поле TransparencyFrom является серый цвет (R:192, G:192, В:192). Выбор цвета никак не отразится на виде изображения в браузере: на месте этого цвета будет фоновый цвет Web-страницы- Выбор цвета имеет смысл только для оценки качества произведенного выделения прозрачных областей. Из этих соображений удачным считается выбор контрастного цвета, не встречающегося в самом изображении. Щелкните мышью на образце цвета. В открывшемся диалоговом окне Color Picker выберите ярко-синий цвет. Щелчок на кнопке ОК позволит вернуться в диалоговое окно фильтра экспорта. Образец цвета отобразит выбранный цвет.
7. Ниже расположен раскрывающийся список для выбора палитры индексированного изображения: адаптированной или системной. Чаще всего оставляйте значение по умолчанию — Adaptive. Если же для вас важна адекватная цветопередача на компьютерах разных платформ, то используйте палитру Web, которую необходимо загрузить. Нажмите кнопку Load в правой части диалогового окна. Это позволит вам выбрать произвольную палитру. Найдите на жестком диске папку, в которой установлен Photoshop. Из нее перейдите во вложенную папку Goodies\Color Palettes. В раскрывающемся списке типов палитр выберите вариант Swatches (*.АСО), а затем файл Web Safe Colors.aco. Нажмите кнопку Open
.
Примечание
Примечание
Кроме палитр, находящихся в папке Color Palettes, при экспорте в формат GIF вы можете выбрать любой другой набор цветов, созданный в палитре Swatches. Также можно выбрать любую палитру, созданную средствами Windows; этому типу соответствует вариант Microsoft Palette® (*.PAL) Вы можете использовать палитру любого другого индексированного изображения, если предварительно сохранили ее из диалогового окна ColorTable.

8. Перед вами снова диалоговое окно фильтра экспорта. В списке палитр указана выбранная палитра. Список Colors позволяет выбрать количество цветов индексированного изображения. Выберите минимальное количество цветов, при котором результат будет удовлетворительным. Пока оставьте в списке значение по умолчанию, 256.
9. Качество получающегося изображения можно оценить с помощью окна предварительного просмотра (Рисунок 9.8). Откройте его нажатием кнопки Preview.

Окно делится на две области: в верхней представлен результат преобразования, а в нижней — палитра изображения. Справа от окна предварительного просмотра находятся кнопки двух инструментов — Hand и Zoom. Они используются для масштабирования и прокрутки изображения в окне просмотра. Пользуйтесь ими так же, как аналогичными инструментами из палитры инструментов главного окна Photoshop. Нажатие кнопки ОК позволит вернуться в диалоговое окно фильтра экспорта.

Окно предварительного просмотра

Рис 9.8. Окно предварительного просмотра

10. Установите флажки Use Best Match для более точного соответствия цветов изображения цветам палитры и Interlaced для создания изображения с чересстрочной разверткой.
11. Нажмите кнопку ОК. В следующем диалоговом окне оставьте имя GIF-фаила по умолчанию и нажмите кнопку Save.
12. Откройте полученный файл в браузере и оцените результат.

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

1. Откройте файл plane.tif.
2. Выделите фон, загрузив маску из альфа-канала.
3. Установите чистый желтый основной цвет и залейте им выделенную область.
4. Отмените выделение командой Deselect меню Select или комбинацией клавиш <Ctrl>+<D>.
5. Выберите команду Indexed Color... из списка Mode, находящегося в меню Image.
6. В открывшемся диалоговом окне оставьте все установки по умолчанию и нажмите кнопку ОК. Изображение переведено из RGB в индексированный цвет. На этой стадии вы можете осуществить любое дополнительное редактирование и при этом быть абсолютно уверенным в том, что изображение, которое вы видите на экране, будет находиться и в GIF-файле и при просмотре в браузере.
7. Выберите команду Export из меню File и в открывшемся вложенном меню команду GIF89a Export....
8. Открывшееся окно GIF89a Export Options выглядит несколько по-другому, поскольку вы экспортируете уже индексированное изображение (Рисунок 9.9). Оно напоминает окно предварительного просмотра (Рисунок 9.8) Отличие в том, что в него перенесены настройки цвета прозрачных участков и флажок способа развертки. Также добавлен инструмент Eyedropрег, который предназначен для задания цветов, которые отмечают прозрачные области. Последовательно выбирая несколько цветов, вы объявляете их все "прозрачными". Выбирать цвет можно как в расположенной в нижней части окна палитре, так и непосредственно на изображении. Щелкните на желтом фоне в окне предварительного просмотра или на желтом образце в палитре изображения. Цвет фона в окне предварительного просмотра стал серым, так как именно таким определен цвет прозрачных областей.

Диалоговое окно GIF89a Export Options

Рис 9.9. Диалоговое окно GIF89a Export Options

9. Нажмите кнопку ОК. Введите имя GIF-файла, например planel.gif, и нажмите кнопку Save.
10. Откройте полученный файл в браузере и оцените результат. Как и следовало ожидать, он совпадает с полученным первым способом.

Если вам кажется все это слишком сложным, то воспользуйтесь для экспорта изображений мастером Export Transparent Image. Мастер шаг за шагом предоставит вам инструкции по выполнению экспорта изображения.

1. Откройте файл plane.tif.
2. Загрузите маску фона из альфа-канала.
3. Инвертируйте выделенную область командой Inverse меню Select.
4. Выберите команду Export Transparent Image... меню Help.
5. Перед вами первое окно мастера экспорта (Рисунок 9.10). В нем необходимо указать, что мастер должен принимать за прозрачные области. В действительности у вас имеется два варианта: предварительно выделить эти области (I have selected the area to be made transparent) или разместить объект на прозрачном слое (My image is on a transparent background). При выборе третьего варианта (I need to select the area to be made transparent) просто закроется окно мастера. В данном случае годится первый вариант. Выберите его.

Первое диалоговое окно

Рис 9.10. Первое диалоговое окно мастера Export Transparent Image.

Выбор прозрачных областей
6. Нажмите кнопку Next. Мастер создаст копию экспортируемого изображения и далее будет работать только с этой копией.
7. Второе окно мастера экспорта предлагает вам выбрать применение изображения: для печати (Print) или для Web-страницы (Online). Выберите второй вариант (Рисунок 9.11).

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

Второе диалоговое окно

Рис 9.11. Второе диалоговое окно мастера Export Transparent Image.

Выбор назначения изображения

8. Нажмите кнопку Next
9. Третье окно мастера экспорта (Рисунок 9.12) позволяет вам выбрать формат файла для размещения на Web-странице. Поскольку браузеры поддерживают прозрачность только для двух форматов (GIF или PNG), выбор невелик. Пойдем по более длинному пути: выберите формат GIF.

Третье диалоговое окно

Рис 9.12. Третье диалоговое окно мастера Export Transparent Image.

Выбор формата файла

10. Четвертое окно предупреждает вас о том, что формат GIF поддерживает только восьмибитные изображения и следующим шагом будет сокращение числа цветов в изображении.
11. Нажмите кнопку Next.
12. Перед вами знакомое окно преобразования полноцветного изображения в индексированное. По умолчанию мастер устанавливает палитру Web и случайное сглаживание. Оставьте значения по умолчанию.
13. Нажмите кнопку ОК.
14. В появившемся стандартном окне сохранения файлов укажите имя GlF-файла и папку, в которую его следует поместить.
15. Нажмите кнопку Save.
16. Следующее окно тоже вам знакомо и предлагает выбрать способ развертки изображения в браузере, нормальный (Normal) или чересстрочный (Interlaced). Если бы на 9-м шаге вы выбрали формат PNG, то следующим после него шагом сразу был этот, поскольку для формата PNG не требуется преобразование в индексированный цвет.
17. Нажмите кнопку ОК.
18. Последнее окно мастера поздравляет вас с успешным экспортом изображения. Нажмите кнопку Finish.
19. Мастер экспорта оставляет открытым окно с рабочей копией изображения. Его можно закрыть без сохранения.

В новой версии Photoshop появился модуль Save For Web, который сильно облегчает работу, обеспечивает большую гибкость и лучшее качество экспорта изображений в форматы GIF, JPEG и PNG. Главное окно модуля изображено на Рисунок 9.13. Оно открывается одноименной командой из меню File.

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

§ Original. Изображение в исходном виде.
§ Optimized. Вид изображения после оптимизации. Именно так оно и будет выглядеть в браузере.
§ 2-Up. Одновременный просмотр оригинала и оптимизированного изображения. Впрочем, оба окна в области просмотра могут отображать оптимизированное изображение, но с различными параметрами оптимизации.
§ 4-Up. В этом режиме область просмотра делится на четыре окна, в которых можно заказать демонстрацию оригинала и оптимизированного изображения с разными параметрами оптимизации. Такой режим удобно использовать для выбора наилучших параметров. Он позволяет визуально оценивать влияние сжатия или уменьшения палитры на качество изображения и его размер.

Окно фильтра экспорта Save For Web

Рис 9.13. Окно фильтра экспорта Save For Web

Управление масштабом отображения в области просмотра организовано так же, как и в самом Photoshop: с помощью списка масштабов в левом нижнем углу окна и инструментов Zoom и Hand.
Под каждым окном области просмотра указываются формат файла изображения (GIF, JPEG или PNG), параметры оптимизации, размер файла и время его загрузки в браузер при заданной скорости модема Выберите ее в меню просмотра, открывающегося нажатием круглой кнопки с треугольной стрелкой. Там же вы найдете и варианты отображения цветов:
§ Uncompensated Color. Цвета отображаются в области просмотра "как есть", без поправок.
§ Standard Windows Color. Таким образом отображаются цвета на мониторах компьютеров, работающих под управлением системы Windows.
§ Standard Macintosh Color. На компьютерах Macintosh изображения выглядят несколько светлее, поскольку MacOS использует иное значение гаммы (1,8), чем Windows (2,2). Выбрав этот вариант, вы сможете оценить, как будет выглядеть изображение для пользователей Macintosh.
§ Photoshop Compensation. Вид изображения корректируется в соответствии с установками системы управления цветом, сделанными в Photoshop.

Опробуем новый фильтр экспорта в действии на изображении самолета из файла plane.tif.

1. Откройте файл plane.tif.
2. Выберите команду Save For Web из меню File.
3. Выберите режим 2-Up, перейдя на соответствующую вкладку.
4. Увеличьте масштаб демонстрации в области просмотра до 300%. Это позволит лучше оценить качество оптимизации.
5. В правой части окна находятся элементы управления параметрами экспорта. В списке Settings выберите формат сохранения JPEG (Рисунок 9.14).

Установки экспорта в

Рис 9.14. Установки экспорта в формат JPEG модуля Save For Web

6. Список Compression quality предлагает несколько типичных значений качества изображения от Low до Maximum. Более тонкая регулировка осуществляется ползунком Quality, расположенным правее. Для начала установите с его помощью максимальное качество, 100%. При столь высоком значении изображение в правой части области просмотра (оптимизированное) практически не отличается от оригинала в левой части. Взгляните на информационные поля в соответствующих частях области просмотра. Оригинал, не сжатое изображение, занимает 120 Кбайт, а сжатое — 34,54 Кбайт. Даже столь низкий коэффициент сжатия обеспечивает почти четырехкратный выигрыш в размере файла.
7. Посмотрите на оценку времени загрузки сжатого изображения. Оно составит 13 секунд при скорости модема 2,88 Кбайт/сек. Теперь представьте себя читателем Web-страницы, на которой находится пять таких изображений. Будете ли вы дожидаться пока страница загрузится целиком? Скорее всего нет. Чтобы удержать читателя, требуется делать изображения как можно более компактными. В случае формата JPEG нужно просто понизить качество, увеличив коэффициент сжатия. Установите ползунок Quality посередине, примерно на 50%. Очевидно, качество ухудшилось, появилась характерная "грязь". Но так ли уж плохо дело?
8. Установите масштаб отображения 1:1 двойным щелчком на инструменте Zoom. Даже внимательный просмотр не позволяет обнаружить различия между оригиналом и сжатым изображением.
9. Уменьшайте качество изображения с помощью ползунка Quality до тех пор, пока не заметите отличий от оригинала. Это должно произойти при качестве приблизительно 20%. Заметьте, что размер файла с таким сжатием составляет всего 5 Кбайт, а время загрузки сократилось до 3 секунд!
10. Теперь отыграем еще одну секунду для читателя Web-страницы. Коэффициент сжатия можно повысить за счет предварительного размывания изображения. Ползунок Blur в области Settings избавит от необходимости покидать окно фильтра экспорта. Разумеется, размывка должна быть не слишком значительной, чтобы качество изображения не пострадало. Значение 0,2 вполне удовлетворяет этому требованию.
11. Еще уменьшите качество изображения с помощью ползунка Quality до 15—18%. Это сократит размер файла еще на килобайт, а время загрузки на секунду. Теперь самому нетерпеливому посетителю вашей Web-страницы будет не в чем упрекнуть ее автора.
12. Флажок Progressive задает чересстрочную развертку изображения при загрузке в браузере. Она слегка увеличивает размер файла, но и дает возможность читателю страницы самому определять, стоит ли дожидаться полной загрузки. Установите его.
13. Флажок ICC Profile позволяет внедрить в файл изображения цветовой профиль. Устанавливайте этот флажок только если у вас есть для этого весьма веские причины, поскольку внедренный профиль увеличивает размер файла на 3—4 килобайта.
14. Флажок Optimized включает дополнительную оптимизацию внутренней структуры JPEG, что иногда еще сильнее сокращает размер файла. Побочный эффект оптимизации может сказаться только при использовании очень старых версий браузеров. Все новые браузеры нормально обрабатывают такие файлы.
15. Правильность сделанных установок легко проверить, загрузив готовое изображение в браузер. Для этого вам даже не придется покидать окно модуля экспорта. Нажмите кнопку Preview in <имя браузера>, и модуль откроет браузер с загруженным в него изображением. Ниже изображения вы увидите HTML-код, который сгенерирован модулем экспорта для демонстрации этой страницы (Рисунок 9.15). Цвет фона страницы можно предварительно задать с помощью списка Matte.

Примечание
Примечание
Если вы занимаетесь Web-дизайном, то, скорее всего, на вашем компьютере установлены как минимум два браузера: Internet Explorer и Netscape Communicator Кнопка Select Browser Menu, расположенная рядом с кнопкой Preview in, открывает меню, позволяющее выбрать для просмотра любой из установленных на компьютере браузеров.

Предварительный просмотр

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

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

1. Откройте меню Optimize Menu щелчком на кнопке с треугольной стрелкой в области Settings.
2. Выберите команду Save Settings Она открывает диалоговое окно Save As, позволяющее сохранить настройки в файл. Введите какое-нибудь имя в поле File name, например "JPEG 18", и нажмите кнопку Save. Теперь в списке Settings появилось введенное имя. При обработке следующего файла будет достаточно выбрать его из списка. Обратите внимание, что список уже содержит несколько наиболее типичных вариантов настроек, предопределенных разработчиками.

Примечание
Примечание
Не нужные более наборы установок, удлиняющие список Settings, легко удалить командой Delete Settings меню OptimizeMenu. Эта команда удаляет текущий набор установок

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

Как уже отмечалось, для размещения на Web-странице изображений с прозрачными участками используется формат GIF, поддерживающий исключительно индексированные цвета. Модуль экспорта Save For Web позволяет сохранять изображения и в этом популярном формате.

1. Убедитесь, что текущим документом является plane.tif.
2. Преобразуйте слой Background изображения в обычный слой.
3. Загрузите из дополнительного альфа-канала маску, очерчивающую контур самолета.
4. Удалите фоновые пикселы, выбрав команду Clear из меню Edit, или просто нажав клавишу <Delete>. Теперь изображение самолета размещено на прозрачном фоне.
5. Выберите команду Save For Web из меню File.
6. В списке Optimized file format выберите формат GIF (Рисунок 9.16).

Установки сохранения

Рис 9.16. Установки сохранения в формат GIF модуля Save For Web

7. Наиболее существенный параметр индексированного изображения — это количество цветов в его палитре. Оно задается в поле Colors и должно создавать компромисс между качеством и компактностью. Изображение самолета содержит совсем немного цветов и 16-цветной палитры будет для него вполне достаточно.
8. Список Color reduction algorithm содержит перечень алгоритмов генерации индексированной палитры изображения. Все они уже обсуждались в гл. 3, Заметим лишь, что по умолчанию предлагается вариант Selective, дающий наилучшие результаты для изображений, содержащих значительное пространство, заполненное близкими цветами. Изображение самолета как раз и попадает в эту категорию. В нем преобладают оттенки серого и красного цветов.
9. Отсутствующие в палитре изображения цвета имитируются сочетанием нескольких соседних пикселов близких цветов. Алгоритм имитации выбирается в списке Dithering algorithm. В большинстве случаев используются варианты Noise и Diffusion, не дающие регулярного узора, как Pattern. Алгоритм Diffusion лучше использовать для фотографических изображений, a Noise — для фоновых текстур и градиентов. Выберите в списке алгоритм Diffusion.
10. Величина сглаживания задается ползунком Dither, расположенным правее. Установите ее такой, чтобы передача оттенков была удовлетворительной. Помните, что чем выше сглаживание, тем больше размер результирующего файла.
11. Модуль Save For Web предлагает уникальный алгоритм предварительной обработки изображения, повышающий эффективность сжатия. Он управляется ползунком Lossy. Большие значения этого параметра существенно снижают качество изображения. Если же установить его в пределах от 5 до 15%, то снижение качества будет практически незаметным, а размер файла может сократиться на 5—40%. Установите ползунок Lossy на отметку 15%.
12. Флажок Transparency обеспечивает преобразование прозрачных участков слоя Photoshop в прозрачность GIF-файла. Установите его, иначе прозрачные участки окажутся заполненными сплошной заливкой.
13. Список Matte обеспечивает незаметный переход кромки изображения к фоновому цвету страницы. Пикселы кромки выделенного объекта, как правило, полупрозрачные, а это не поддерживается форматом GIF. В результате, при экспорте изображения в формат GIF, вокруг объектов на прозрачном фоне возникает характерное "гало". Чтобы избежать его появления, установите в списке Matting цвет фона Web-страницы. Полупрозрачные пикселы будут окрашены программой в этот цвет.

Примечание
Примечание
При сброшенном флажке Transparency цвет, заданный в списке Matting, считается фоновым и заполняет все прозрачные участки изображения.

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

1. В полуавтоматическом режиме приведение цветов к палитре Web осуществляется ползунком Web Snap. Он задает процент приведенных цветов палитры изображения. Попробуйте перемещать этот ползунок и наблюдайте за изменениями цветов изображения.

Текущая палитра изображения показана на вкладке Color Table, расположенной в правом нижнем углу окна Save For Web. При изменении значения параметра Web Snap происходящие изменения также отображаются в палитре изображения. Вы наблюдаете изменение некоторых цветов палитры и появление на их образцах белых кружков. Последние помечают цвета, приведенные к палитре Web. Вкладка Color Table полезна не только для наблюдения. Она позволяет управлять отдельными цветами изображения. Это гораздо более хлопотный, но и гибкий способ управления.

2. Верните ползунок Web Snap в нулевое положение, чтобы получить возможность ручного редактирования цветов.
3. Если вы хотите избежать существенных цветовых сдвигов в любых брау-зерах, но не хотите приводить все цвета к палитре Web, то имеет смысл сделать это выборочно. Особенно важно сохранить цвета, превалирующие в изображении. Чтобы определить, какие это цвета, задайте режим сортировки Sortby Popularity одноименной командой из меню панели. Наиболее часто встречающиеся цвета расположатся слева.
4. Щелкните мышью на втором слева образец в палитре. Образец получит белую рамку, показывающую, что он выделен. В строке состояния, расположенной в нижней части окна, отметьте значение компонентов выбранного цвета. Очевидно, он близок к белому, который, конечно, входит в палитру Web.
5. Чтобы избежать цветового сдвига, приведем цвет к белому. Photoshop может сам выбрать наиболее близкий к выделенному цвет из палитры Web- Для этого надо щелкнуть на пиктограмме с изображением кубика в нижней части панели или выбрать команду Web Shift/Unshift Selected Colors из ее меню. Образец окрасится в белый цвет и на нем появится белый кружок, говорящий о том, что цвет входит в палитру Web Белый квадратик в левом нижнем углу образца указывает, что цвет блокирован. Блокированные цвета сохраняются в неприкосновенности при сокращении цветов в палитре изображения и при просмотре в браузере. Чтобы снять блокировку, щелкните на пиктограмме с изображением замка в нижней части панели.
6. Приведение цветов к палитре Web можно проделать и полностью вручную с помощью окна Color Picker. Выделите все цвета в палитре командой Select All Colors из меню панели и щелкните на пиктограмме приведения цветов. Все цвета изображения приведены к палитре Web.
7. Среди цветов изображения вы заметите неверные пурпурные цвета. Исправим их вручную. Сделайте на одном из таких образцов в палитре двойной щелчок мышью. Перед вами появилось знакомое окно Color Picker. Убедитесь, что флажок Only Web Colors в нем установлен. Выберите ближайший к текущему цвету оттенок серого и закройте окно нажатием кнопки ОК. Цвет отредактирован (Рисунок 9.17). Если вы находите его тоже неудачным, снова откройте окно Color Picker и подберите другой.

Обозначения на образцах

Рис 9.17. Обозначения на образцах в палитре цветов (слева направо):
цвет приведен к палитре Web, цвет блокирован, цвет отредактирован,
цвет выделен

Примечание
Примечание
Многочисленные команды меню панели Color Table позволяют вам быстро выделять в ней приведенные (Select All WebSafe Colors), не приведенные (Select All Non-Web Safe Colors) и вообще все цвета (Select All Colors) Команды блокировки Lock/Unlock Selected Colors и Unlock All Colors снимают блокировку с выделенных и со всех цветов палитры соответственно. Аналогично команды Web Shift/Unshift Selected Colors и Unshift All Colors возвращают выделенные и все приведенные цвета, соответственно, к оригинальным значениям. Режимы сортировки цветов в палитре не исчерпываются критерием распространенности (Sort by Popularity). Их можно оставить без сортировки (Unsorted) и отсортировать по цвету (Sort by Hue) или яркости (Sort by Luminosity).

Если после автоматического приведения цветов оказалось, что часть их избыточна, или напротив, каких-то не хватает, то панель предлагает команды дополнения палитры и удаления из нее лишних цветов. Они реализованы в виде пиктограмм с изображением чистого листа и мусорной корзины внизу панели и команд New Color и Delete Color в меню панели. Команда New Color дополняет палитру текущим цветом пипетки. Его образец находится непосредственно под этим инструментом. Задать этот цвет можно непосредственно (двойной щелчок на образце открывает ColorPicker) или взяв образец цвета с оригинального изображения пипеткой.

1. Отредактируйте палитру изображения любым из перечисленных приемов.
2. Сохраните сделанные установки в файле. Они должны появиться в списке Settings.
3. Нажмите кнопку ОК..
4. В открывшемся стандартном диалоговом окне выберите вашу рабочую папку и нажмите кнопку Save. Изображение экспортировано.

Последний обсуждаемый формат — PNG. Это достаточно новый формат, но уже поддерживаемый большинством современных браузеров. Он поддерживает как индексированные, так и полноцветные изображения. Алгоритм сжатия не приводит к потерям графической информации, поэтому плотность сжатия полноцветных изображений оказывается существенно ниже, чем у JPEG. Модуль Save For Web реализует экспорт в форматы PNG-8 для индексированных изображений и PNG-24 для полноцветных. Параметры экспорта PNG-8 абсолютно аналогичны GIF, и вам не составит труда разобраться с ними самостоятельно. PNG-24 вообще предлагает только переключение режимов прозрачности (Transparency), чересстрочной развертки (Interlaced) и параметров Matting.

В заключение раздела отметим еще одну полезную функцию модуля Save For Web — масштабирование изображений при экспорте. Наиболее часто изображения изготавливают в увеличенном масштабе, чтобы были видны все детали, а затем их уменьшают и экспортируют в формат GIF или JPEG. Модуль Save For Web избавляет вас от необходимости многократного открытия диалогового окна Image Size для подбора нужного размера. Аналогичные возможности предоставляет его вкладка Image Size (Рисунок 9.18). На ней вы найдете поля ввода высоты (Height) и ширины (Width) изображения и коэффициента масштабирования (Percent) в процентах. Установленный флажок Constrain Proportions задает режим пропорционального масштабирования. Задайте требуемые размеры изображения и нажмите кнопку Apply — в области просмотра вы сразу увидите, как будет выглядеть изображение is новом размере.

Рисунок 9.18. Вкладка Image Size модуля Save For Web

Документmarble jpg с

Рис 9.19. Документmarble jpg с текстурой мрамора в окне браузера

Откройте файл marblejpg Это изображение еще нельзя использовать в качестве текстуры. Если не верите — попробуйте. Результат будет таким, как на Рисунок 9.19. Проблема в том, что правая сторона должна "подходить" к левой, а верхняя к нижней. Для этого нужно перенести нижнюю часть изображения вверх, а левую — вправо. Затем "замазать" образовавшиеся стыки инструментом RubberStamp

1. Определим ширину переносимых фрагментов Для этого выберите в палитре инструментов инструмент Measure. Инструмент предназначен для измерения расстояния между любыми двумя точками изображения.
2. Откройте палитру Info и выберите в ней единицу измерения "пикселы". Для этого щелкните мышью на пиктограмме с изображением знака "плюс" и сделайте нужный выбор в открывшемся списке.

Диалоговое окно Offset

Рис 9.21. Диалоговое окно Offset

3. Поместите курсор инструмента на правом крае изображения Нажмите клавишу <Shift> и левую кнопку мыши Перемещайте курсор влево примерно на 1/5 ширины изображения. Отпустите кнопку мыши и клавишу <Shift> Посмотрите на значение W в палитре Info Оно должно быть в районе 50 пикселов (Рисунок 9.20)
4. Выберите фильтр Offset... из группй фильтров Other. Как вы помните, почти все фильтры находятся в меню Filter.
5 Открывшееся диалоговое окно фильтра (Рисунок 9.21) позволяет указать смещение изображения (или его активного слоя) по горизонтали и вертикали Особенно важно, что при этом указывается, что надо делать с образовавшимися пустыми участками (поле Undefined Areas). Можно выбрать между заливкой .и фоновым цветом (переключатель Set to Background), заполнить их пикселами краев изображения (переключатель Repeat Edge Pixels) или переместить туда фрагменты, вышедшие за пределы холста (переключатель Wrap Around) Выберите последний вариант
6. В поля Horizontal и Vertical введите значение 50 пикселов
7. Нажмите кнопку ОК Вы видите результат перестановки полос шириной 50 пикселов с правого края изображения в левый и с нижнего края вверх. Теперь можно быть уверенными, что противоположные края этих изображений совпадут при состыковке. Осталось только сделать незаметными переходы между полосами и остальной частью изображения. Используйте для этого инструмент RubberStamp. Обработайте им границы полос. Для достижения плавных переходов цвета меняйте свойство прозрачности инструмента соответствующим ползунком в палитре свойств (рис 9.22)
8. Текстура готова. Опробуйте ее в качестве фоновой на Web-странице (Рисунок 9.23).

Документ marble jpg с

Рис 9.23. Документ marble jpg с готовой текстурой мрамора в окне браузера

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

1. Выберите команду New... меню File, которая позволит открыть диалоговое окно создания нового документа (Рисунок 9. 24) Клавиатурный эквивалент этой команды <Ctrl>+<N>
2. Введите в поле Name имя создаваемой текстуры, например, "line".

Диалоговое окно New

Рис 9.24. Диалоговое окно New

3. Ниже расположены поля ввода ширины, высоты и разрешения нового изображения Справа от них находятся раскрывающиеся списки с единицами измерения Для размеров выберите в качестве единиц измерения пикселы (pixels), а для разрешения — пикселы/дюйм (pixels/inch)
4. В поле Width введите значение 1024 пиксела Это максимальная ширина экрана для офисных мониторов
5. В поле Height введи re 1 пиксел — будем экономить
6. В списке типов изображений Mode установите RGB Color
7. В поле Contents оставьте переключатель White Этот переключатель определяет цвет, которым будет залито вновь создаваемое изображение Если бы был установлен переключатель Background Color, то для заливки использовался бы текущий фоновый цвет, а выбор переключателя Transparent привел бы к созданию документа из единственного прозрачного слоя В данном случае весь холст будет залит белым цветом.
8. Нажмите кнопку ОК Документ создан.
9. Выберите инструмент Gradient из палитры инструментов.
10. В палитре свойств этого инструмента выберите растяжку от основного к фоновому цвету.
11 Откройте палитру Color. С ее помощью установите основной (R: 0, G :75; В :75) и фоновый (R: 225, G: 225, В: 218) цвета.
12. Включите отображение линеек командой Show Rulers меню View, если они отсутствуют в окне документа.
13. Отступите 100 пикселов от левого края изображения и проведите горизонтально линию градиента длиной 10 пикселов
14. Переведите изображение в индексированный цвет командой IndexedColor... из списка Mode, вложенного в меню Image Вам будет предложена только палитра Exact, так как количество цветов в RGB-изображении всего 14, и все они будут точно переданы в индексированном цвете. Согласитесь со всеми установками в диалоговом окне щелчком на кнопке ОК.
15. Сохраните документ в вашей рабочей папке и используйте его как фон для Web-страницы (Рисунок 9.25). В браузере вы увидите светло-желтую страницу с зеленой полосой по левому краю. Полоса плавно переходит в желтый цвет за счет растяжки.
16. Посмотрите, каков размер файла фоновой текстуры. Всего 200 байт!

Текстура line gif в окне браузера

Рис 9.25. Текстура line gif в окне браузера

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

Диалоговое окно эффекта Bevel and Emboss

Рис 9.26. Диалоговое окно эффекта Bevel and Emboss

10. Отдельно для светов и теней определяются непрозрачности растяжек. Для уменьшения контраста установите в обоих полях Opacity значение 65%.
11. Список Style определяет вид рельефа, который, в свою очередь, определяется видом растяжек, имитирующих света и тени Выберите стиль Inner Bevel.

Примечание
Примечание
Стиль Inner Bevel соответствует приданию рельефа самому объекту Растяжки при этом накладываются на края самого объекта Стиль Outer Bevel имитирует рельеф лежащего под объектом фона Растяжки проводятся наружу от краев объекта Стиль Emboss является промежуточным между первыми двумя Растяжки проходят как по объекту, так и по фону Стиль Pillow Emboss создает иллюзию того, что рельефный объект вдавлен в фон Такой эффект достигается противоположными растяжками от краев объекта к его центру и от центра.

12. Установите высоту рельефа Depth 16 пикселов.
13. Задайте значение 14 для размытия рельефа Blur.
14 Значение по умолчанию для угла Angle, под которым направлен свет, подходит для данной задачи. Значение 120° соответствует направлению света слева сверху. В этом поле можно установить июбое значение угла. Если при этом расположенный рядом флажок Use Global Angle установлен, то введенное значение распространяется на все слои эффектов в изображении Такой принцип вполне оправдан, поскольку направление света, как правило, едино для всего изображения. Глобальный угол можно изменить и с помощью специальной команды Global Angle... меню Effects.
15. Переключатели Up и Down предназначены для быстрого изменения угла падения света на 180°. Оставьте активным переключатель Up.
16. В раскрывающемся списке эффектов выберите эффект Drop Shadow....
17. Создайте тень с параметрами по умолчанию.
18. Нажмите кнопку ОК.
19. Выберите команду Equalize из списка Adjust меню Image.
20. Загрузите маску слоя щелчком на ее миниатюре при нажатой клавише <Ctrl>.
21. Выберите команду Contract... из списка Modify, вложенного в меню Select.
22. Уменьшите выделенную область на 15—16 пикселов
23. Скопируйте выделенную область на новый слой командой Layer Via Copy, находящейся в списке New, вложенном в меню Layer. Быстро этого можно добиться нажатием клавиш <Ctrl>+<J>. Обратите внимание, что выделенная область скопировалась вместе с эффектами, приложенными к исходному слою.
24. Сделайте двойной щелчок мышью на пиктограмме эффектов слоя в палитре Layers.
25. В открывшемся окне Effects отмените эффект Drop Shadow, сняв флажок Apply в соответствующем разделе диалогового окна.
26. Перейдите в раздел Bevel and Emboss диалогового окна Effects. Измените тип рельефа на Outer Bevel и уменьшите высоту до 10 пикселов. Установите переключатель Down. Нажмите кнопку ОК. Кнопка приобрела рельефную окантовку, как пуговица.
27. Сделаем мрамор кнопки более темным и придадим ему зеленый оттенок. Создайте новый корректирующий слой щелчком на пиктограмме нового слоя в палитре Layers при нажатой клавише <Ctrl>. Тип слоя установите Hue/Saturation. Нажмите кнопку ОК.
28. Измените тон обоих нижележащих слоев на темно-зеленый (Hue: -44; Saturation: +37; Lightness: -17). Нажмите кнопку ОК.
29. Сделаем очень темной среднюю часть кнопки. Создайте новый корректирующий слой щелчком на пиктограмме нового слоя в палитре Layers при нажатой клавише <Ctrl>. Тип слоя установите Brightness/Contrast.
Нажмите кнопку ОК.
30. Уменьшите почти до минимума яркость и контраст. Нажмите кнопку ОК.
31. Для того чтобы коррекция яркости действовала только на нужный слой (Layer 2), сгруппируйте с ним корректирующий слой. Напомним, что сделать это быстрее можно посредством всего одного щелчка на границе этих слоев в палитре Layers при нажатой клавише <Alt>.

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

1. Выберите инструмент Type.
2. Выберите шрифт Windings, кегль 120 пунктов и темно-зеленый цвет (например, R:0; G:77; B:32).
3. Введите символ, соответствующий заглавной букве N.
4. Нажмите кнопку ОК.
5. С помощью инструмента Move установите пиктограмму по центру кнопки.
6. Выберите Outer Glow... меню Effects
7. Создайте эффект свечения, установив 100%-ную непрозрачность, размытие на 12 пикселов с интенсивностью 56, чистого зеленого цвета.
8. Нажмите кнопку ОК. Кнопка полностью готова (Рисунок 9.27). Убедительно, не правда ли?

Кнопка готова

Рис 9.27. Кнопка готова

9. Пересчитайте изображение на размер 60х60 пикселов с помощью команды Image Size... меню Image.
10. Отключите видимость слоя Background.
11. Экспортируйте документ в формат GIF с помощью команды GIF89a Export... меню Export, вложенного в меню File. Применение фильтра экспорта необходимо для сохранения прозрачных областей изображения. При экспорте используйте адаптированную палитру.

Диалоговое окно File Info

Рис 9.28. Диалоговое окно File Info

Примечание
Примечание
В диалоговом окне GIF89a Export Options (Параметры экспорта GIF89a) есть флажок Export Caption. Он становится доступным только, если заполнено поле Caption в диалоговом окне FileInfo В этом случае содержимое поля помещается в поле заголовка GIF-фаила и отображается в программах анимации

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

Сжатые форматы файлов

Как только передача графической информации по глобальным сетям стала обычным делом, компания CompuServe (крупнейшая онлайновая служба) предложила формат GIF, в основе которого лежит эффективный (в отличие от более ранних форматов, например, PCX) алгоритм сжатия. Этот формат используется в Internet и по сегодняшний день. Он позволяет сохранять только индексированные изображения.

Особенно интересно уникальное применение данного формата для создания анимационных эффектов. Формат GIF позволяет хранить в одном файле несколько изображений, а браузеры могут их поочередно демонстрировать. Для каждого изображения можно указать время его демонстрации. Если каждое из изображений, хранящееся в файле GIF, представляет фазу анимации, то браузер покажет маленький "мультфильм". Эта особенность формата GIF нашла очень широкое применение в Web-дизайне. Такие анимационные эффекты можно встретить практически на каждой странице WWW. Особенно часто анимированные изображения используются в баннерах (от английского banner, плакат), рекламных объявлениях.

Другая полезная для Web-дизайнера особенность формата GIF в том, что он поддерживает "прозрачность". Любые участки изображения, хранимого в этом формате, могут быть прозрачными. В браузере через эти участки будет "просвечивать" фон. Особенно часто подобный ход применяется для размещения на странице непрямоугольных изображений. Механизм создания прозрачности в GIF-файлах несколько отличен от используемого в Photo-shop. Поскольку изображение является индексированным, дизайнер должен выбрать "прозрачный цвет". Это может быть любой из цветов палитры изображения. В результате браузер будет трактовать данный цвет как прозрачный участок (Рисунок 9.4)