Графика для Интернет

Глава 1. Растровая графика и Adobe Photoshop

Предисловие

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

-----------------------------------------------------------------------------------------------------------------------------------------------

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

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

Adobe Photoshop для WWW

Adobe Photoshop — наилучшая из программ для тех, кто создает свои страницы в WWW (World Wide Web). Язык описания Web-страниц, HTML (Hypei-Text Markup Language), поддерживает использование только точечных изображений, а лучший редактор точечных изображений, конечно Photoshop. Разработчики из Adobe с каждой новой версией вводят в программу все большие возможности, ориентированные на Web-дизайнеров. Это такие возможности Adobe Photoshop, как:

Фильтры экспорта в основные форматы WWW: GIF, JPEG, PNG;Специальная палитра цветов, обеспечивающая их одинаковую передачу на компьютерах разных платформ (разных операционных систем) и с разными браузерами;Возможность оптимизации изображений для их размещения в Интернете;Карты ссылок (image map);Ролловеры и др.

Далее мы рассмотрим применение этих возможностей при создании изображений, предназначенных для World Wide Web.

Цвета в HTML

Говоря о компьютерной графике для Интернет необходимо знать, как кодируются отображаемые браузером цвета. Монитор для отображения цветов на экране использует цветовую модель RGB (Red, Green, Blue, т.е. Красный, Зеленый, Синий). Однако в HTML для задания цвета используется шестнадцатеричная система счисления.

В системе координат RGB черный цвет представляется последовательностью 0, 0, 0, а белый — 255, 255, 255. Шестнадцатеричные цвета представляют собой наборы из трех двузначных шестнадцатеричных чисел. Каждое отдельное число соответствует значениям R, G и В, общее количество символов в наборе равно шести. Например, 000000 соответствует черному. Другое крайнее значение — FFFFFF, т. е. максимальная интенсивность всех трех цветов соответствует белому цвету. Более подробная информация на эту тему будет представлена в главе 5.

Размер Web-страницы на экране монитора

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

“Физическое” снижение размеров и разрешения изображений;Уменьшение количества цветов в изображении;Использование сжатых и специальных форматов файлов.

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

Для бумажных листов существуют размеры A3, A4, A5 и т.д. Для электронных станиц жестких стандартов на размеры нет. Тем не менее, рекомендуется не делайть страниц, ширина которых превышает ширину экрана, а длина — два-три экрана.

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

Как вывод из сказанного — несколько советов по оптимизации загрузки изображений:

Для убыстрения загрузки ваших web-страниц используйте вместо градиентной заливки сплошную. Используйте текстовые гиперссылки вместо графических. Не злоупотребляйте применением на вашем сайте графической анимацией.Из-за пересылки служебной информации одно большое изображение грузится быстрее, чем несколько маленьких, поэтому используйте изображения-карты ссылок (image maps).Размеры изображений на странице определяются ее дизайном. Если у вас есть возможность упростить дизайн страницы то, готовя изображение для WWW обязательно сделайте это.

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

В сетевой графике большое значение имеет число битов, используемых для представления каждого цвета изображения, известное также как глубина цвета или битовая глубина (bit depth) файла. Изображения с восьмью битами цветовой информации на пиксел позволяют обеспечить 256 различных цветов. Цветовая палитра, представляющая собой набор из 256 цветов (точнее – 6´6´6 = 216) которые оптимально воспроизводится на большинстве браузеров называется безопасной или сетевой (safety palette).

Для представления графики в Internet широко используются индексированные изображения, построенные на использовании безопасной палитры цветов. Они позволяют передавать до 256 фиксированных цветов. Набор цветов изображения (палитра) хранится в файле вместе с изображением и используется браузером для демонстрации.

Изображения с индексированным цветом получают из полноцветных изображений путем уменьшения количества цветов. Как же передать 16 млн. цветов полноцветного изображения 256 цветами индексированного? Для этого существует операция, называемая сглаживанием (dithering). Сглаживание построено на том же обмане зрения, что и типографская печать: несколько расположенных рядом точек разных цветов, будучи достаточно мелкими, производят впечатление точки "суммарного" цвета. Отличие изображения после типографской печати от индексированного только в том, что в первом случае используются четыре краски, а во втором — 256.

Photoshop в диалоговом окне Indexed Color, которое появляется после выполнения команды Image 4Mode 4Indexed Color позволяет выбрать один из трех вариантов сглаживания (dither) т.е. настройки цветов для web-изображений (рис. 3.1).

Рис. 3.1. Окно Indexed Color

Вариант Pattern. Каждому из 16 млн. цветов сопоставляется определенная комбинация пикселов, имеющихся в палитре индексированного изображения. При пристальном рассматривании такая имитация выглядит как узор из цветных точек (рис. 3.2)

Рис. 3.2. Сглаживание (Вариант Pattern)

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

Рис. 3.3. Сглаживание (Вариант Diffusion)

Вариант Noise. Как и Diffusion, этот алгоритм сглаживания изображения дает случайное распределение пикселов, но гарантирует от проявления "узоров" в плавных градиентных переходах и погрешностей по краям изображения (рис. 3.4).

Рис. 3.4. Сглаживание (Вариант Noise)

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

Рис. 3.5. Сглаживание (Вариант None)

Резюме

При подготовке изображения для Internet в программе Adobe Photoshop в диалоговом окно Indexed Color необходимо выбрать палитру изображения (Web) и метод сглаживания (Diffusion - наиболее приемлемый вариант). При использовании индексированных форматов изображений Photoshop автоматически вычисляет количество цветов в индексированном изображении и округляет его до ближайшей степени двойки: 2, 4, 8, 16, 32, 64, 128. Меньшее количество цветов позволяет создавать графические файлы меньшего размера.

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

Формат GIF (Graphics Interchange Format - Формат обмена графическими данными) — это формат для изображений, содержащих 256 или менее цветов. Формат популярен в Сети и обычно используется для изображений, содержащих в основном ровные цвета, например, таких, как иллюстрации. GIF также поддерживает прозрачность и чересстрочное отображение. В настоящее время используются две модификации GIF-файлов: GIF87a и GIF89a. Они отличаются минимальными требованиями к программам, работающим с данным файлом. Так, модификация GIF89 имеет расширенные возможности управления выводом кадров изображений. Формат GIF следует использовать для изображений, создаваемых в графических редакторах программным путем (диаграммы, рисунки, текст и т.д.). GIF использует алгоритм сжатия LZW (Lempel-Ziv-Welch) с хорошей степенью сжатия.

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

JPEG

Формат JPEG (Joint Photographic Experts Group - Объединенная экспертная группа по фотографии) — это масштабируемый упакованный формат, обеспечивающий высокую степень сжатия с очень небольшим снижением качества изображения. Для изображения в электронной форме не является необычным некоторая потеря четкости, особенно при преобразовании из одного формата в другой. Исходя из того, что JPEG объединяет в себе хорошую степень сжатия и незначительную потерю качества, он является идеальным форматом для среды Web-сайта, в которой изображения часто масштабируются, преобразовываются или изменяются иным образом. Формат JPEG наиболее подходит для фотографий с количеством цветов более 256, т.е. изображений, имеющих глубину цвета 24 бита (16,7 миллионов цветов).

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

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

PNG

Невозможность создания полноцветных изображений с прозрачными участками в рамках форматов GIF и JPEG привела к появлению формата PNG. Этот формат сохраняет всю цветовую информацию и один альфа-канал изображения. Для минимизации объема файла применяется алгоритм уплотнения, не приводящий к потере данных. Альфа-канал используется браузером в качестве маски прозрачности.

В формате PNG-8 максимально возможное количество цветов оптимизированного изображения - 256, этот формат похож на GIF. В формате PNG-24 у изображения могут быть миллионы цветов, этот формат, в свою очередь, похож на JPEG. В форматах PNG используется метод сжатия без потерь данных. Оба формата PNG могут сохранять полупрозрачные области (например, смягченные растушеванные границы), используя метод под названием альфа-прозрачность. В этом случае у точки может быть 256 уровней непрозрачности, начиная с полной прозрачности и заканчивая полной непрозрачностью.

Формат PNG занимает промежуточное положение между GIF и JPEG. Однако в формате PNG-8 нельзя создать анимацию (а в формате GIF можно), а файлы в формате PNG-24 больше по размеру аналогичных JPEG-файлов.

Сравнение графических форматов для веб-страниц

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

Рис. 3.6. Фотографии наиболее подходит для сжатия в JPEG или PNG-24 форматах

Иллюстрации с малым количеством цветов, четкими линиями или мелкими деталями, например, содержащие текст, должны быть оптимизированы в формате GIF или PNG-8 (рис. 3.7).

Рис. 3.7. Для графических иллюстраций (рисунков) приемлемы форматы GIF или PNG-8

мер 3.1. Знакомство Формат JPEG

Давйте сравним JPEG формат с широко применяемым в полиграфии форматом TIFF.

1.Командой File (Файл)4Open (Открыть) откройте в программе Adobe Photoshop какой-либо профессиональный графический файл (в нашем случае это векторное изображение adobe.ai) из коллекции изображений (Clipart), поставляемых на лазерном диске (рис. 3.8).

Рис. 3.8. Исходное изображение

2.В открывшемся диалоговом окне Rasterize Generic EPS Format (рис. 3.9) оставьте предлагаемые размеры и разрешение 72 dpi, а цветовую модель в списке Mode установите RGB Color. Нажмите ОК.

Рис. 3.9. Окно Rasterize Generic EPS Format

3.Выберите команду Flatten Image (Свести слои) из меню Layer (Слой), чтобы документ получил слой Background (Фон).

4.Выполните сохранение данного изображения на жесткий диск командой File (Файл) 4Save As (Сохранить как) и установите в окне сохранения графического файла флажок Save As a Copy (Сохранить Как Копию).

5.В списке Format выберите формат сохранения JPEG и нажмите на Save (Сохранить). Появиться диалоговое окно JPEG Options (рис. 3.10).

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

6.В поле Image Options (Параметры изображения) устанавливается степень сжатия файла. Чем сильнее сжатие, тем меньше получающийся файл, и ниже его качество Параметр имеет 10 градаций (от 0 до 10) и четыре предопределенных варианта (Low, Medium, High и Maximum). При регулярной работе у вас быстро появится опыт, чтобы сделать правильный выбор этого параметра. Для начала поставьте Medium – среднюю степень сжатия вашей графики.

7.В поле Format Options) Параметры формата) устанавливаются параметры, связанные с особенностями формата JPEG (Standard, Optimized, Progressive). Выберите переключатель Baseline “Standard” соответствующий самому распространенному варианту формата и нажмите кнопку ОК. Копия изображения будет сохранена.

Сохраните еще одну копию документа в формате TIFF с помощью той же команды File (Файл)4 Save As (Сохранить Как) — рис. 3.11. Настройки этого окна по умолчанию менять не нужно.

Рис. 3.11. Окно TIFF Options

9.Теперь сравните размер файла adobe.tif с размером файла adobe.jpg. Первый занимает на диске 549 Кбайт, а второй 32 Кбайт, то есть в 17 раз меньше!

10.Откройте файл adobe.tif и сравните с оригиналом adobe.ai. Никаких визуальных отличий нет.

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

Создание интерактивных графических элементов для WWW. Программа Adobe ImageReady

По мере парадного шествования по миру Интернет, разработчики программных продуктов все больше стали ориентировать свои программы на работу с Интернет. Не исключением стала и фирма Adobe, которая в каждой новой версии Photoshop, добавляла ему все больше новых инструментов для профессионального Web-дизайна. Это инструменты для создания анимационных GIF-изображений, интерактивных элементов навигации, карт ссылок на основе изображений, инструменты разрезания изображений на фрагменты (ломтики)[1], их независимая обработка и последующая сборка на Web-странице и ряд других.

В первых версиях Photoshop для решения подобных задач Web-дизайнеру приходилось использовать либо подключаемые модули сторонних фирм (Plug-ins), либо вообще использовать другие программы. Фирма Adobe, зная о нуждах Web-дизайнеров, предложила им отдельный редактор точечных изображений ImageReady. Он представлял собой Photoshop, облегченный за счет изъятия некоторых полиграфических инструментов и функций (цветовой и тоновой коррекции, управлению цветом, работе с каналами, печати). Однако первая версия ImageReady 1.0 стала последней ее самостоятельной версией. Новый вариант ImageReady 2.0 стал частью Photoshop. Таким образом, пользователям Photoshop не пришлось расставаться с любимой программой для реализации недостающих ей web-функций. На сегодня последняя версия ImageReady, как и Photoshop, снабжена не номером версии, а буквенным сочетанием “CS”, что переводится как “Набор для творчества”.

Интерфейс ImageReady

Перед вами главное окно Image Ready (рис. 3.12.). В первый момент его легко перепутать с Photoshop, однако здесь есть несколько особых инструментов, на которых мы и остановимся.

Рис. 3.12. Интерфейс программы Image Ready

Инструмент Slice (Ломтик)

Инструмент Slice (Ломтик) предназначен для разрезания изображений на прямоугольные фрагменты, a Slice Select (Выделить ломтик) — для выделения таких фрагментов. Кроме того, на панели инструментов имеется интерактивная кнопка Toggle Slices Visibility для переключения режимов отображения. Нажатая кнопка соответствует режиму Show Slices (Показать ломтики), а отжатая — режиму Hide Slices (Скрыть ломтики). В первом режиме отображаются границы фрагментов, на которые разрезано изображение, а во втором — нет (рис. 3.13).

Рис. 3.13,а

Рис. 3.13,б

Рис. 3.13. Режимы отображения фрагментов Hide Slices (a) и Show Slices (б)

ПРИМЕЧАНИЕ

Если выбрать инструмент Slice (Ломтик) или Slice Select (Выделить ломтик), то режим показа фрагментов включается автоматически.

Редактор ImageReady имеет и несколько особых палитр. Палитра Optimaze (Оптимизация) содержит параметры оптимизации изображений для экспорта в выбранный формат и аналогична команде Save For Web (Сохранить для Веб) в Adobe Photoshop (рис.3.14).

Рис. 3.14. Палитра Optimize

Вкладка Info идентична одноименной вкладке в программе Photoshop.

Палитра Animation (Анимация) содержит перечень всех кадров анимации и управляет их очередностью и просмотром (рис. 3.15).

Рис. 3.15. Палитра Animation

Другие вкладки этой палитры:

Вкладка Slice (Ломтик) предназначена для установки параметров отдельных фрагментов, на которые изображение разрезано с помощью инструмента Slice.Вкладка Rollover (Ролловер) хранит варианты изображения, демонстрируемого в браузере в зависимости от того, находится ли на нем курсор и нажата ли кнопка мыши.

Пример 3.2. Оптимизация изображения в программе Adobe Photoshop

Предположим, что в программе Adobe Photoshop вы получили сканированное изображение и сохранили его с “родным” для этой программы расширением PSD. Полученное изображение непригодно для использования в Internet, поскольку находится в формате PSD и данный графический файл по меркам www имеет слишком большой размер. В этом практическом примере мы займемся его оптимизацией, а затем экспортируем в один из графических форматов, поддерживаемых браузерами. Таким образом, мы подготовим сканированное изображение для его применения в Интернет.

1.В программе Adobe Photoshop выполните команду File (Файл)4Save For Web (Сохранить для Веб) и в окне Save For Web перейдите на вкладку Original (Оригинал) — рис. 3.16. В нашем случае сканированное оригинальное изображение girl.psd имеет размер 607 Мб.

Рис. 3.16. Окно Save For Web, вкладка Original

2.Теперь перейдите на вкладку Optimized (Оптимизация). Перед вами результат оптимизации изображения в соответствии с параметрами, установленными в данном окне по умолчанию. Изменение этих параметров приведет к немедленному обновлению изображения на вкладке Optimized в окне документа.

3.В списке Optimized file format (Оптимизированный формат файла) выберите формат JPEG.

4.Перемещайте ползунок Quality справа (высокое качество) налево (низкое качество) до тех пор, пока не заметите появления нежелательных артефактов (характерной "грязи" в изображении).

5.Попытайтесь удалить артефакты предварительным размыванием изображения с помощью ползунка Blur (Размытие). Следите за тем, чтобы изображение не слишком потеряло в резкости. Приемлемой величиной размывания будет 0,1—0,15 пиксела.

6.Взгляните на строку состояния в окне документа. Там отображается текущий размер оптимизированного нами файла (18 Кбайт) и оценка времени его загрузки (7 сек) при выбранной скорости модема (28,8 Кбит/сек).

Итак, в результате оптимизации мы получили весьма существенный (94%) выигрыш в размере файла, сохранив приемлемое качество изображения. Но наилучшим ли способом проведена оптимизация? Может быть лучше использовать формат GIF? Рассмотрите этот вариант самостоятельно.

СОВЕТ

Перейдите на вкладку 2-Up в окне документа. Перед вами одновременно оригинал (слева) и оптимизированное изображение (справа). Имея перед глазами результат одновременно двух вариантов оптимизации, вы можете выбрать наиболее подходящий. При сравнении вариантов можно воспользоваться функцией предварительного просмотра изображения в браузере. Для этого следует нажать в нижней правой части окна кнопку Preview in. Она открывает список браузеров, установленных на вашем компьютере. При нажатии этой кнопки Adobe Photoshop автоматически создаст временный оптимизированный файл изображения и необходимый для его демонстрации HTML-код, который и загрузит в браузер.

Разрезание изображений на фрагменты (Деление изображения на ломтики)

Операция разрезания изображения на ломтики (slice) состоит в том, что изображение делится на отдельные зоны. На Web-страницах изображения, поделенные на ломтики, часто используются для организации меню. Щелчок в разных участках изображения приводит в действие различий гипертекстовые ссылки. После того как изображение разрезано, его можно собрать на странице, используя таблицы HTML Выполнение такой работы вручную весьма длительная и нетворческая работа. ImageReady может выполнить это за вас. Ломтики, создаваемые в программе Adobe ImageReady при помощи инструмента Slice (Ломтик), называются “пользовательскими ломтиками”. Программа ImageReady делит оставшуюся часть изображения на” автоматически создаваемые ломтики”, которые имеют метки серого цвета. Ломтики можно создавать, выделять, редактировать и просматривать как в программе ImageReady, так и в программе Photoshop.

Пример 3.3. Определение фрагментов для ломтиков, свойства ломтиков

Для более близкого знакомства с ломтиками проделайте следующее:

1.Откройте изображение sobaka.psd (или аналогичное) и сохраните его под именем sobaka_sliced.psd в папке Мои документы.

2.Включите режим отображения кусочков нажатием кнопки Slice Tool (Ломтик) на палитре инструментов. Как видите на рис. 3.17, даже если изображение не разрезано, ImageReady считает его разрезанным, правда на единственный "кусок" Об этом говорит окаймляющая его рамка с порядковым номером фрагмента 01 и специальной пиктограммой фрагмента.

Рис. 3.17. Рамка фрагмента 01

3.Выберите инструмент Slice (Ломтик) на палитре инструментов и поместите курсор инструмента Slice в левый верхний угол изображения.

4.Нажмите левую кнопку мыши и перемещайте курсор вправо и вниз до тех пор, пока внутри рамки не окажется вся область надписи “Designer’s best friend”. Затем отпустите кнопку мыши (рис 3.18). Вы определили фрагмент, который хотели бы иметь в виде отдельного изображения (и файла). Поскольку фрагменты могут иметь только прямоугольную форму, программа автоматически создала еще два фрагмента.

Рис. 3.18 Разрезание изображения на “ломтики”

5.Фрагменты, созданные пользователем (пользовательские - 03) и автоматические (01,02,04,05), имеют для ImageReady разные свойства. Программа не может изменить расположение и размер тех фрагментов, которые создал пользователь. За размером и размещением автоматических фрагментов следит сама программа. Если вы измените размер пользовательского фрагмента, то все соседние автоматические фрагменты сами изменятся таким образом, чтобы не возникало "дырок" (перекрывания областей). Автоматические фрагменты имеют в левом верхнем пиктограммы серого цвета, а пользовательские — других цветов. Автоматические фрагменты отображаются более приглушенными цветами, чем пользовательские. Границы между автоматическими фрагментами отображаются линией с маркерами, а между пользовательскими — сплошной линией.

Давайте продолжим пример и углубим наши сведения о работу над ломтиками на практике:

6.Выберите на палитре инструментов инструмент Slice Select Tool (Выделить ломтик). Он используется для уточнения размеров и положения фрагментов (ломтиков).

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

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

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

10.Автоматический ломтик можно легко преобразовать в пользовательский. Выделите автоматический ломтик 02 и из контекстного меню, открывающегося щелчком курсором с помощью правой кнопки мыши, выберите команду Promote to User Slice. Фрагмент приобретет манипуляторы масштабирования (маркеры), и пиктограммы в его левом верхнем углу перекрасились в синий цвет.

Организация ссылок

Когда изображение разрезано на требуемое количество фрагментов, их надо ассоциировать с соответствующими документами. Для этого предназначена специальная палитра Slice (Ломтик) — рис. 3.20.

Рис. 3.20. Вид палитры Slice

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

Список Type (Тип) задает тип фрагмента. В большинстве случаев это тип Image (Изображение), но возможен и альтернативный вариант No Image (Не изображение). Он предполагает отсутствие изображения на месте выбранного фрагмента. Такое "пустое" место (в HTML-коде это пустая ячейка таблицы) может быть заполнено произвольным текстом на фоне со сплошной заливкой. Цвет заливки определяется списком BG в правом верхнем углу палитры. Для типа Image цвет, выбранный в списке BG, используется для заполнения прозрачных областей фрагмента.В поле Name (Имя) вводится имя выделенного фрагмента. Поскольку придумывание индивидуальных имен фрагментам в большинстве случаев не имеет смысла, Image Ready сама генерирует имена для фрагментов.

Для каждого фрагмента может быть определена единственная гипертекстовая ссылка, которая вводится в поле URL палитры Slice. Список Target, расположенный ниже, позволяет определить фрейм, в котором появится ресурс, задаваемый ссылкой, или открыть его в новом окне браузера.

Определим гиперссылки для ломтиков 02 и 04:

1.На палитре Slice нажмите на черную треугольную кнопку (стрелку) справа и из выпадающего при этом списка выберите команду Show Options (Показать параметры).

2.Выберите инструмент Slice Select (Выделить ломтик) на палитре инструментов и выделите им фрагмент 02, в который попадает голова собаки. В палитре Slice (Ломтик) вы увидите имя фрагмента sobaka_slice_02, скомпонованное из имени документа и номера фрагмента.

3.В поле URL введите адрес гиперссылки, например www.adobe.come. Это будет имя документа, который откроется в браузере по щелчку на этом фрагменте.

4.В поле Message (Сообщение) вводится текстовое сообщение, которое будет отображаться в строке состояния браузера, когда курсор мыши окажется на выбранном фрагменте.

5.Проделайте аналогичную операцию по заполнению полей с фрагментом 04.

Оптимизация ломтиков

Зададим единые параметры оптимизации для всех фрагментов. Для этого:

1.Перейдите на вкладку Optimize (Оптимизация) в окне документа.

2.В палитре Optimize выберите формат GIF, палитру Selective (Выбор), режим сглаживания Diffusion (Диффузия) и степень сглаживания (Dither) равной 100%, количество цветов равным 128 — рис. 3.21.

Рис. 3.21. Настройки палитры Optimize

3.Удерживая нажатой клавишу Shift, выделите мышкой все фрагменты изображения (01-06) или выполните команду Select (Выделить)4All Slices (Все ломтики).

4.Спрячьте границы фрагментов нажатием клавиши <Q> на клавиатуре и посмотрите на результат оптимизации. Границ фрагментов не должно быть видно.

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

Итак, ваше изображение разрезано. Функция Preview in программы Image Ready позволяет протестировать сборку изображения и гиперрссылки на нем еще до экспорта вашей работы в HTML-код. Для предварительного просмотра результата вашей работы в браузере:

1.Выберите установленный на вашем компьютере браузер из списка Preview in (Предварительный просмотр), находящегося в меню File (Файл). ImageReady запустит выбранный браузер и загрузит в него изображение по фрагментам. Ниже изображения вы увидите HTML-код, сгенерированный программой Image Ready (рис. 3.22).

Рис. 3.22. Просмотр изображения и ссылок в MSIE

2.Подведите курсор мыши к любой из гиперссылок — он примет вид, характерный для гипертекстовой ссылки, т.е. курсор будет в форме пальца руки. Рядом с курсором возникнет фраза из текста, который вы ввели в поле Message (Сообщение) палитры Slice (Ломтик).

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

Сохранение ломтиков

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

Выберите команду Save Optimized As (Сохранить оптимизированное как) из меню File (Файл). Команда открывает диалоговое окно Save Optimized As, изображенное на рис. 3.23.

Рис. 3.23. Окно Save Optimized As

2.В поле Имя файла (File name) уже введено имя файла, соответствующее названию документа ImageReady. Это имя будет использовано при формировании имен файлов отдельных фрагментов и имени HTML-документа. Оставьте его таким, какое предлагается по умолчанию.

3.В поле Тип файла выберите вариант HTML and Images, этот вариант включает сохранение кода, необходимого для сборки фрагментов и функционирования ссылок, в HTML-документ и сохранение изображений.

4.Список Settings (Установки) оставьте с установками по умолчанию.

5.В списке Slices (Ломтики) вы можете выбрать для сохранения все ломтики или только выделенные (Selected Slices). При этом необходимо предварительно выделить с помощью инструмента Slice Select те фрагменты, которые вы хотите сохранить.

6.Нажмите кнопку Сохранить (Save). ImageReady сохранит HTML-документ в выбранную папку под именем, которое было введено в поле File name (Имя файла) диалогового окна Save Optimized As. Все фрагменты и текущая фоновая текстура будут сохранены в каталоге images.

7.Откройте файл sobaka_slice.html в браузере, чтобы увидеть результат вашей работы.

Создание карты ссылок изображения

Изображения на Web-страницах часто используются как карта ссылок (image map). Щелчки курсором мыши в окне браузера на различных участках такого изображения приводят к загрузке разных адресов страниц (URL). Для реализации этого механизма отдельным фрагментам изображения необходимо сопоставить различные гипертекстовые ссылки.

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

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

Проделаем операции по созданию такой карты ссылок:

1.Откройте в программе ImageReady документ sobaka_slice.psd и сохраните его под именем sobaka_map.psd с помощью команды Save As (Сохранить как) из меню File (Файл).

2.Посредством инструмента Slince Select (Выделить ломтик) выделите фрагмент 02 (с головой собаки) и выполните команду Select (Выделить)4Create Selection from Slice (Создать выделение из ломтика).

3.Теперь командой Select (Выделить)4Create Image Map from Selection (Создать карту ссылок из выделения) преобразуйте выделенный фрагмент изображения в карту ссылок.

4.В палитре Create Image Map (Создать карту ссылок) вы можете задать форму ссылок — рис.3.24. Поле Shape (Форма) предоставляет выбор формы области изображения, откликающегося на щелчок курсором мыши в браузере. Это может быть прямоугольник (Rectangle), круг (Circle) или многоугольник (Polygon). Оставьте форму прямоугольной (Rectangle) и нажмите кнопку ОК.

Рис. 3.24. Окно Create Image Map

5.Перейдите на палитру Image Map и создайте в списке URL гиперссылку для фирмы PANTONE (рис. 3.25).

Рис. 3.25. Вкладка Image Map палитры Animation

Список Target (Цель) становится доступным для ввода информации только после того, как был введен адрес в поле URL. Запись в поле Target (Цель) сообщает браузеру, в какой HTML-фрейм загрузить содержимое ссылки и какие HTML-фреймы сохранить. В раскрывающемся списке из выпадающего меню выбрать один из следующих пунктов:

_blank (Пустой) - открыть новое окно браузера для содержимого ссылки;_self (Сам) - загрузить данные ссылки в HTML-фрейм ломтика;_parent (Предок) — заменить текущие HTML-фреймы данными ссыл ки;_top (Верхний) - загрузить содержимое ссылки в окно браузера (эта опция похожа на опцию _parent).

Заполнение поля Alt является необязательным.

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

Когда Карта ссылок определена, функция Preview in (Предварительный просмотр) позволяет протестировать карту ссылок еще до ее экспорта HTML-кода и самого изображения на локальный диск. После того, как карта ссылок оттестирована и найдены параметры оптимизации изображения, можно выполнить команду File (Файл)4 Save Optimized As (Сохранить оптимизированное как). После выбора параметров сохранения карты ссылок и нажатия кнопки Сохранить (Save), файлы графических фрагментов и HTML-код будут сохранены на диск.

Основные достоинства и недостатки карт-ссылок изображений

Применение карт-изображений имеет как свои плюсы, так и минусы.

Плюсы:

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

Минусы:

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

Резюме

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

Ролловеры

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

Обработка событий

Интерактивные элементы дизайна изменяют свое состояние (внешний вид) в браузере в зависимости от обработки программой нескольких возможных событий:

Отсутствие событий — событие Normal.Курсор мыши находится на интерактивном элементе — событие Over.Курсор мыши находится на элементе и нажата левая кнопка мыши — событие Down.Курсор мыши находится на элементе, левая кнопка мыши отпущена — событие Click (или Hit).

ПРИМЕЧАНИЕ

На английском языке такие интерактивные элементы дизайна web страниц называются rollovers (roll over = перекатываться, переворачиваться). В русском языке прямой эквивалент этого термина “ролловер” отсутствует. Ролловер представляет собой несколько (до четырех) изображений, связанных с определенными событиями. При возникновении вышеперечисленных событий браузер заменяет одно из этих изображений другим. С каждым событием ассоциируется одно изображение. Совершенно не обязательно обрабатывать все четыре события и создавать четыре изображения. На практике чаще всего обходятся двумя: событиями Normal и Over. Обработкой этих событий, их регистрацией и загрузкой изображений, как раз и занимается сценарий JavaScript. Пример сайта с использованием ролловера вы можете посмотреть по адресу http://www.pratt.edu — рис. 3.26.

Рис. 3.26. Пример ролловера на сайте http://www.pratt.edu

Подготовка изображений для ролловера

Для создания ролловера требуется создание серии изображений, демонстрирующих различные события. Для примера добавим ролловеры к уже знакомому нам изображению собаки. Пусть при размещении курсора мыши в браузере над кусочками изображений появляются рекламные фотографии с видами вееров фирмы PANTONE. Эти фотографии мы взяли на сайте фирмы и назвали их pantone1jpg, pantone2.jpg, и pantone3.jpg (рис. 3.27).

Рис. 3.27. Изображения для ролловера

Для создания ролловера:

1.Откройте в программе ImageReady документ sobaka_slice.psd и сохраните его под именем sobaka_ rollover.psd с помощью команды Save As (Сохранить как) из меню File (Файл).

2.Сведите слои изображения командой Flatten Image из меню Layer.

3.Откройте все три рекламных файла с видами вееров pantone и скопируйте каждый из них на отдельный слой документа sobaka_sliced.psd. При этом вам понадобяться манипуляции инструментами Slince Select (Выделить ломтик) и инструментом Move (Двигать) из палитры инструментов.

4.На палитре слоев дайте каждому слою имя, совпадающее с названием веера (Pantone1, Pantone2 и Pantone3). Слой с картой назовите Sobaka. На эти имена и будем ссылаться в дальнейшем (рис. 3.28).

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

5.Для точного размещения рекламных изображений командой View (Просмотр)4 Create Guides (Создать направляющие) можно построить несколько направляющих. (рис. 3.29).

Рис. 3.29. Окно Create Guides

6.Диалоговое окно Create Guides (Создать направляющие) имеет две идентичные области Horizontal Guides (Горизонтальные направляющие) и Vertical Guides (Вертикальные направляющие), отвечающие за построение горизонтальных и вертикальных направляющих, соответственно. Размещение нескольких направляющих по обоим направлениям можно производить одним из двух способов, равномерным распределением (guides, evenly spaced), с заданным интервалом (pixels between guides) Также можно разместить и одиночную направляющую, указав ее координату по вертикали (командой pixels from top4single guide) или по горизонтали (командой pixels from left4single guide). Выбор определяется положением переключателя в соответствующей области. В поле рядом с активной позицией переключателя вводят численные значения в пикселах. Если в диалоговом окне Create Guides установить флажок Clear Existing Guides, то перед размещением все уже существующие в документе направляющие будут удалены

7.Давайте равномерно разместим по вертикали две направляющие линии. Для этого установите флажок Vertical Guides (Вертикальные направляющие) и сбросьте флажок Horizontal Guides (Горизонтальные направляющие). Затем установите переключатель в верхнее положение. (guides evenly spaced) и в соседнее поле введите 2. Чтобы заранее просмотреть результат размещения направляющих в окне документа, установите флажок Preview (Предварительный просмотр). Затем нажмите кнопку ОК.

8.С помощью инструмента Move (Двигать) разместите фотографии с видами рекламных вееров фирмы PANTONE на слоях изображения с картой, как показано на рис 3.30.

Рис. 3.30. Размещение рекламных фотографий с видами вееров pantone

ПРИМЕЧАНИЕ

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

9.Поскольку JavaScript целиком меняет изображение ролловера, для создания нескольких ролловеров на одном изображении нам его придется предварительно разрезать, т.е. ввести дополнительные ломтики для самих ролловеров (области, отведенные под каждый ролловер, должны составлять отдельные фрагменты) — рис. 3.31. Как видно из этой иллюстрации часть фрагментов, которая у нас была ранее теперь приведена в порядок и к ним добавились еще два (для ролловеров). Созданы они, как и прежде, инструментом Slice Tool (Ломтик).

Рис. 3.31. Изображение разрезано на фрагменты

Подобная работа была выполнена следующими командами:

10.Для отображения фрагментов переключитесь в режим показа фрагментов кнопкой Toggle Sices Visibility в панели инструментов.

11.Инструментом Slice (Ломтик) создайте ломтики двух ролловеров (фрагменты 03 и 04).

12.Инструментом Slice Select (Выделить ломтик) из палитры инструментов можно корректировать положение границ фрагментов.

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

ВНИМАНИЕ

Следите за тем, чтобы фотографии не пересекали границ фрагментов. В противном случае впоследствии вы получите лишние ролловеры.

14.В конечном результате у вас должно получиться 5 фрагментов, как показано на рис. 3.31. Два из них (по числу рекламных фотографий с видами pantone-вееров) должны быть пользовательские, а три (01,02,05) — автоматические. Лишние пользовательские фрагменты выделяйте инструментом Slice Select (Выделить ломтик) и удаляйте командой нажатием клавиши <Delete>.

Определение состояний ролловеров

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

1.В палитре Layers (Слои) отключите видимость всех слоев изображения, за исключением слоя Pantone2 для фрагмента 04.

Рис. 3.32. Иллюстрация к операции отключения видимости слоев

2.Выведите на экран палитру Rollover (Ролловер) командой Window (Окно)4 Rollovers (Ролловеры) — рис. 3.33.

Рис. 3.33. Палитра Rollovers

3.Основное пространство палитры занимают миниатюры состояний ролловера. Всегда определено только одно из них — Normal. В нижней части палитры находятся кнопки создания нового состояния (с изображением страницы), удаления существующего (с изображением мусорного ведра) и кнопка списка фрагментов.

4.В списке фрагментов находятся несколько фрагментов, соответствующих будущим ролловерам. Иструментом Slice Select (Выделить ломтик) выберите фрагмент 04.

5.Нажмите кнопку создания нового состояния или выберите команду New Rollover State (Новое состояние ролловера) из меню палитры. Рядом с миниатюрой состояния Normal появится миниатюра нового состояния Ove. Пока оно идентично состоянию Normal. Наша задача сделать так, чтобы в этом состоянии показывалась другая фотография.

6.Включите на палитре Layers (Слои) видимость слоя Sobaka. Теперь в палитре Rollover (Ролловер) миниатюра состояния Over показывает другую фотографию и состояние определено.

7.Снова нажмите кнопку создания нового состояния или выберите команду New Rollover State (Новое состояние ролловера) из меню палитры. Рядом с миниатюрой состояния Over появится миниатюра нового состояния Down. Пока оно идентично состоянию Over.

8.Отключите видимость слоя Pantone2 щелчком на пиктограмме "Глаз" в палитре Layers (Слои). Так будет определено третье состояние — Down (рис. 3.36).

Рис. 3.36. Состояние Down определено

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

ВНИМАНИЕ

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

Все три состояния ролловера, созданные нами в этом упражнении, показаны на рис. 3.37:

Рис. 3.37,а. Курсор вне фрагмента 04 (Normal)

Рис. 3.37,б. Курсор на фрагменте 04, левая кнопка мыши отжата (Over)

Рис. 3.37,в. Курсор на фрагменте 04, левая кнопка мыши нажата (Down)

10.В заключение этого практического примера нужно проделать оптимизаци. ролловеров и запись результата на диск. Эти операции не отличается от уже рассмотреных нами случанв оптимизации обычных изображений и карт ссылок. Проделайте эту работу самостоятельно, выбрав при оптимизации формат JPEG и выполнив сохранение ролловеров командой Save Optimized As (Сохранить оптимизированным как) из меню File (Файл).

11.Загрузите сгенерированный HTML-файл в браузер и проверьте функционирование всех ссылок.

ПРИМЕЧАНИЕ

При организации гипертекстовых ссылок на ролловеры ссылки назначаются ломтикам. Чтобы назначить адреса ссылок, используйте палитру Slice (Ломтик) точно так же, как вы делали, изучая разрезание изображений. Так как при организации ролловеров мы использовали изображение с уже готовыми ссылками неудивительно, что эти ссылки были назначены и ролловерам.

СОВЕТ

Если вы планируете вставить код ролловеров в готовую web страницу, то воспользуйтесь для этого командой Copy HTML Code из меню Edit. В открываемом ею списке вы можете выбрать, какую часть кода хотите получить: код для всех ломтиков (Copy All Slices) или только для выделенных ломтиков (Copy Selected Slices), или исключительно код Java Script для создания ролловеров (Copy Preloads).

Пример 3.4 Компьютерная обработка изображений при подготовке элементов растровой графики для Интернет

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

Шаг 1 - Kадрирование изображения (Croop)

Редко когда сюжет идеально расположен на фотографии. Поэтому первое, что необходимо сделать с изображением при его обработке в Adobe Photoshop – кадрировать изображение инструментом Croop Toll (Обрезка). При кадрировании нужно учесть законы композиции, правило "золотого сечения", динамику, цветовую "нагрузку" и т.п. (см. главу 6) — рис.3.38.

Рис. 3.38, а. Оригинальное изображение до его обрезки

Рис. 3.38,б. Изображение кадрировано

Шаг 2 - Цветокоррекция (adjustments)

Следующий шаг - цветокоррекция (adjustments) изображения. В этом процессе важно не потерять детали, подправить нужные цвета, не затронув остальные. Если изображение слишком темное или светлое или имеет явный цветовой сдвиг применяйте инструмент Levels (Уровни), а для более тонкой настройки — инструмент Curves (Кривые) — рис.3.39.

Рис. 3.39. Оригинальное изображение после его цветовой коррекции

Шаг 3 - Ретушь (retouch)

На следующем этапе следует провести ретушь изображения. При этом общая чистка изображения (устранение следов пыли и царапин) довольно часто выполняется с помощью фильтров: Dust&Stretch. Более тонкую (локальную) ретушь изображений можно выполнить инструментами Clone Stamp (Клонирующий штамп) или Healing Brush (Кисть здоровья). Пример ретуши лица рыбака инструментом Clone Stamp (Клонирующий штамп) приведен на рис. 3.40.

Рис. 3.40. Изображение отретушировано

Шаг 4 - Тонирование (Hue)

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

Шаг 5 - Резкость/размытие (sharpen/blur)

Неудачную фокусировку фотоизображения в программе Adobe Photoshop можно исправить с помощью маски нерезкости (unsharp mask). Так, на фото ниже, в качестве примера, для повышения резкости применена команда Filter (Фильтр)4Sharpen (Резкость)4Sharpen more (Увеличить резкость).

Рис. 3.41. Пример усиления резкости фотографии фильтром Sharpen more

Шаг 6 – Удаление дефекта "красных глаз"

При известном дефекте “глаз вампира”, образуемом фотовспышкой, нужно инструментом Elliptical Marquee Tool (Эллиптическое выделение) выделить зрачки (именно они имееют красный цвет), а затем выполнить команду Image (Изображение)4Adjastments (Настройка)4Hue/Saturation (Тон/Насыщение) и изменением положения ползунков подбираем должный цвет глаз.

Рис. 3.42. Окно Hue/Saturation

Шаг 7 – Сохранение готовой работы на диск

Заключительным этапом вашей работы с изображением в Adobe Photoshop является запись файла изображения на диск. При этом, если:

Файл предназначен для типографии, то разрешение такого изображения должно быть не ниже 300 dpi. Формат файла - только TIFF. Цветовое пространство CMYK.Файл предназначен для веб просмотра на мониторе (для показа в Интернет), то разрешение изображения задается 72-96 dpi, формат файла выбирается JPEG или GIF. Цветовое пространство RGB (безопасная палитра). И обязательно проведите оптимизацию изображения командой Save for web (Сохранить для веб).

Некоторые важные замечания

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

Характер изображения определяет наиболее подходящий для его записи на диск формат файла. Сохранив файл в формате GIF или JPEG, можно значительно уменьшить его размер, так как эти форматы содержат встроенные алгоритмы сжатия. Если изображение содержит однотонные области, то рекомендуется GIF-формат (например, для web-заголовка сайта). Если изображение имеет плавные переходы цветов, то рекомендуется JPEG – формат (например, для фото).Просмотрите изображение с помощью Web-браузера на чужом компьютере, чтобы оценить, насколько быстро оно загружается и насколько хорошо выглядит.Для того чтобы определить фактический размер файла, щелкните правой кнопкой мыши по имени файла в окне Explorer (Проводник) и из всплывающего меню выберите пункт Properties (Свойства).Для определения времени загрузки по Сети вашего графического файла откройте его в программе ImageReady и выберите пункт Image Information (Информация об изображении)4Size/Download Time (Размер/Время загрузки). Так вы получите информацию о загрузке вашей графики в Сети с учетом разных скоростей модема.

Материал для повторения

Размытие (dithering) - перемешивание двух цветов из палитры для имитации третьего. Данный метод используется, когда необходимо, чтобы изображение с ограниченным количеством цветов (256 или менее) содержало большее количество оттенков. Обычно он применяется к изображениям с плавным переходом цветов, чтобы увеличить диапазон используемых оттенков, но в жизни ничего не дается даром, и поэтому после применения данного метода изображение может покрыться точками.Оптимизация - процесс выбора такого формата файла, его размера и цветовых параметров, которые позволяют в максимально возможной степени сохранить качество изображения, но при этом обеспечить высокую скорость загрузки его по сети.Ломтики, создаваемые при помощи инструмента Slice (Ломтик), называются “пользовательскими ломтиками” и имеют метки синего цвета. При создании ломтиков программа ImageReady делит оставшуюся часть изображения на “автоматически создаваемые ломтики”, которые имеют метки серого цвета.Использующий эффективный алгоритм сжатия формат GIF разработала компания CompuServe. Этот графический формат позволяет сохранять только индексированные изображения, т.е. количество цветов в таком изображении не может быть более, чем 256. Формат GIF очень хорош для изображений, содержащих однотонные области и фигуры с четко определенными границами, например, для текста.Формат JPEG может быть лучшим вариантом для точной передачи изображений с плавным переходом цветов (то есть для изображений фотографического типа). Преимущество формата JPEG заключается в том, что он сжимает 24-битное изображение так же эффективно, как формат GIF сжимает 8-битное. Недостатки JPEG состоят в следующем: JPEG-файл нужно распаковывать при просмотре Web-страницы, что требует времени. JPEG - не самый лучший вариант для изображений, содержащих однотонные области или текст, так как подобный метод сжатия вносит искажения на четко определенных границах изображений такого сорта.К ломтику можно прикрепить ссылку (URL) на какую-либо Web-страничку. Если щелкнуть по этому ломтику, то пользователь автоматически будет попадать на Web-страничку, которая имеет соответствующий URL-адрес. Обычно ломтики со ссылками создаются поверх графических элементов (кнопок, слов или значков), так чтобы пользователь Internet с легкостью мог их обнаружить.Карта изображения (image map) содержит ”кнопки” произвольной формы, каждая из которых имеет собственную URL-ссылку. Программа ImageReady позволяет создавать карты изображений при помощи слоя или инструмента. Карта на основе слоя, включающая в себя все непрозрачные фрагменты слоя, автоматически обновляется каждый раз, когда редактируется слой. Карты, созданные при помощи инструментов, могут быть выровнены по общей границе или распределены вдоль одной оси. Несложно превратить карту, созданную на основе слоя, в карту, созданную при помощи инструмента.Rollover (Ролловер) изображения представляет собой элемент web дизайна как некое событие, которое происходит при щелчке мышью или перемещении курсора над какой-либо областью Web-изображения, содержащей встроенные варианты собственных модификаций. В ImageReady все, на что способен ролловер - это показать или скрыть некоторые слои в соответствии со встроенными инструкциями. Для того чтобы создать ролловер, необходимо сначала разделить изображение на ломтики. В ImageReady можно создать ролловеры трех основных типов:изменение области изображения (например, изменение цвета или эффекта слоя);замена одного изображения другим;появление текста или графического объекта в другой части окна браузера, когда указатель мыши наведен на кнопку, ключевое слово или значок.Программа ImageReady по умолчанию автоматически связывает состояния курсора и кнопки мыши с миниатюрами ролловеров в такой последовательности: Over (Над), Down (Нажатие) и Click (Щелчок):Over - курсор находится над ломтиком, кнопка мыши не нажата;Down - курсор находится над ломтиком, кнопка мыши нажата;Click - щелчок кнопкой мыши по указанному ломтику (кнопка нажата и отпущена). При этом браузер попытается установить связь в сети, используя URL-адрес, прикрепленный к данному ломтику.

Вопросы для самоконтроля

Какие графические форматы применяются в Интернет? Почему?Что такое индексированное изображение?Для чего применяется сглаживание (dithering) изображений?Какую палитру называют безопасной или сетевой (safety palette)?Назовите главные элементы интерфейса программы ImageReady?Каково назначение “ломтиков” изображений?Каков алгоритм cозданиz карты ссылок изображения,Что вы знаете о ролловерах?Перечислите возможные состояния ролловеров в программе ImageReady?Почему для Internet применяют не векторную, а растровую графику?Каковы особенности (достоинства и недостатки) форматов изображений GIF и JPG?Какой размер файла веб-страницы с графикой (в Кб) рекоммендуется для Интернет?Перечислите по шагам алгоритм подготовки изображений для показа в Интернет в программе Adobe Photoshop?

[1] Здесь и далее слова “фрагмент” и “ломтик” мы употребляем как синонимы.