Графика и дизайн -> Photoshop -> Photoshop для подготовки WEB-графики

Photoshop для подготовки WEB-графики

Сохранение файлов в форматах GIF и JPEG

• Сохранение в формате GIF
• Сохранение в формате JPEG
• Сохранение с помощью команды Save For Web... (Сохранить для Web...)
• Экспорт файлов GIF для Web
• Экспорт контуров в Adobe Illustrator
• Мастер экспорта прозрачных изображений
• Что нового мы узнали?

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

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

Выбор делается в пользу формата GIF, если сохраняемое изображение имеет хотя бы одну из ниже перечисленных позиций:

• прозрачные области;
• анимация;
• использование не больше 256 цветов палитры RGB;
• использование режимов Grayscale (Оттенки Серого) или Indexed Color (Индексированный Цвет).

Следовательно, изображение типа «логотип» идеально подходит для сохранения в формате GIF.

Фотографии и многоцветные картинки, не содержащие слоев и альфа-каналов, хранят в формате JPEG.

Теперь мы умеем классифицировать изображения, использующиеся в web-графике. Рассмотрим процедуру сохранения в форматах GIF и JPEG.

Сохранение в формате GIF

Чтобы сохранить цветное изображение в формате GIF, необходимо преобразовать его к цветовой модели RGB с помощью команды Image > Mode > RGB (Изображение > Режим > RGB), а затем воспользоваться командой Image > Mode > Indexed Color... (Изображение > Режим > Индексированный Цвет...).

ПРИМЕЧАНИЕ. Основным свойством индексированного изображения, сохраненного в формате GIF, является возможность включения в него прозрачных областей без создания новых слоев.

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

Рис. 8.1. Вид диалогового окна команды Image > Mode t Indexed Color...

Вкладка Palette (Палитра) позволяет выбрать способ вычисления цветов по таблице поиска. Существуют следующие режимы:

• Exact (Точный). Используется по умолчанию, если изображение содержит менее 256 цветов (в том случае, если оно высококонтрастное или черно-белое);
• System (Системный). Представлен в двух вариантах: Windows и Mac OS. Используется при создании фоновых рисунков, обоев или других элементов рабочего стола;
• Web. Используется браузерами, применяется для вывода изображения на 8-битовый монитор. Включает те 216 цветов, значения R, G и В которых нацело делятся на 51, то есть эта 216-цветная таблица LUT является пересечением множеств цветов палитр систем Windows и Macintosh;

  ПРИМЕЧАНИЕ. Таблица LUT (lookup table) — таблица поиска цвета — генерируется PhotoShop. Она служит предметным указателем или индексом, поэтому процесс называется индексированием.
  
  

• Uniform (Однородный). Создает однородное распределение цветов спектра. Практически не используется;
• Local (Локальный). Используется при работе с фотографическими изображениями, когда необходимо высокое качество цветопередачи. В этом режиме выделяется три вида алгоритмов сокращения количества цветов:
  • Perceptual (Перцепционный). Создает заказную таблицу поиска цвета, отдающую приоритет тем оттенкам, которые четко различает человеческий глаз;
  • Selective (Избирательный). Создает таблицу поиска цвета, похожую на перцепционную, но основанную на ключевых цветах изображения. Предпочтение отдается web-цветам;
  • Adaptive (Адаптивный). Создает заказную таблицу из тех цветов спектра, которых больше в изображении. Игнорирует все палитры системы и web-палитру;

СОВЕТ. Наиболее приемлемые результаты обычно дает режим Local (Adaptive) (Локальный (Адаптивный)).

• Master (Главный). Становится доступным при двух и более одновременно открытых файлах. Применяется для создания таблицы поиска цвета, в которой содержатся цвета всех открытых изображений. Используется для пакетной обработки изображений, которые впоследствии могут быть записаны на компакт-диск или другой носитель информации. Работает по тем же алгоритмам сокращения количества цветов, что и режим Local (Локальный);
• Custom (Заказной). Позволяет пользователю создать самому таблицу поиска или загрузить ее с диска. Используется при создании изображений для мультимедийных приложений, в web-графике почти не применяется. При выборе этого режима появляется диалоговое окно Color Table (Таблица поиска цвета), где можно выбрать следующие варианты:
  • Custom (Заказная) — предоставляет возможность самостоятельного создания таблицы;
  • Black Body (Темный фон) — уничтожает цвета сине-зеленой части спектра, оставляя черный, красный, оранжевый, желтый и белый.
  • Grayscale (Оттенки Серого) — изображение становится полутоновым;
  • Spectrum (Спектральная) — оставляет только цвета спектра;
  • System (Системная) — системная таблица Windows или Mac OS;
• Previous (Предыдущий). Этот режим использует последнюю таблицу поиска, созданную командой Indexed Color... После использования режима Master (Главный) становится режимом по умолчанию. Подходит при необходимости создания нескольких изображений, выдержанных в едином стиле.

ПРИМЕЧАНИЕ. До применения команды Indexed Color... в текущем сеансе работы режим Previous (Предыдущий) недоступен.

ВНИМАНИЕ. После перевода изображения в режим индексированных цветов его нельзя редактировать. Большинство инструментов и команд не работают или работают не так, как того следовало ожидать.

Изменяя параметр Colors (Цвета), мы можем выбрать количество используемых цветов. Чем меньше используется цветов, тем меньше будет размер файла.

Параметр Forced (Защищенные) позволяет принудительно ввести в таблицу некоторые цвета. Они не изменяются при выборе остальных цветов.

Возможные значения:

• None (Отсутствует) — предустановленные цвета в таблицу не вводятся. Для цветов, сформированных на основе изображения, в палитре остается больше позиций;
• Black and White (Черный и белый) — в палитре в любом случае будут присутствовать черный и белый цвета;
• Primaries (Основные) — в палитру вводятся восемь основных цветов: черный, белый, красный, зеленый, синий, голубой, темно-красный и желтый;
• Web — палитра будет содержать 216 цветов web-палитры (безопасной палитры).

Флажок Transparency (Прозрачность) позволяет сохранить прозрачные области изображения. Для их обозначения выделяется один из цветов палитры. Обратите внимание: так как прозрачность обозначается одним цветом, то плавное изменение прозрачности пикселов в режиме индексированных цветов невозможно. Вторая группа параметров — Options (Настройки).

Параметр Matte (Кайма) доступен при наличии прозрачности и используется совместно с флажком Transparency (Прозрачность). Если этот флажок установлен, то указанный цвет заполнит и полупрозрачные, и прозрачные пикселы.

СОВЕТ. Лучше всего выбрать цвет, соответствующий фону web-страницы.

Параметр Dither (Сглаживание) определяет стиль удаления «лишних» цветов. Искажения, возникающие при сглаживании, наиболее заметны при использовании web-палитры. Поскольку мы делаем акцент на web-графике, рассмотрим подробнее и проиллюстрируем режимы сглаживания.

Возможные режимы (рис. 8.2):

• None (Отсутствует) — не контролирует корректную цветопередачу, подходит для «простых» изображений, не содержащих теней и плавных тональных переходов;
• Diffusion (Диффузия) — распределяет цвета по специальному алгоритму, не создающему узора и размывает переходы между различными цветами;
• Pattern (Узор) — сглаживает цвета с помощью геометрического узора (этот узор может довольно четко проступить на результирующем рисунке);
• Noise (Шум) — хаотически смешивает пикселы по всему изображению, не создавая узора.

Параметр Amount (Степень) доступен в случае использования режима сглаживания Diffusion (Диффузия) и позволяет контролировать его степень. Чем меньше значение, тем меньше количество используемых цветов и, соответственно, размер файла.

а	б
в	г

Рис. 8.2. Вид изображения с применением различных режимов: при отсутствии сглаживания (а); режим Diffusion (б); режим Pattern (а); режим Noise (г)

Флажок Preserve Exact Colors (Сохранить точные цвета) доступен в случае исполь зования режима сглаживания Diffusion (Диффузия) и сохраняет области одина нового цвета неразмытыми.

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

Сохранение в формате JPEG

Для хранения изображений фотографического качества формат JPEG обеспечи вает минимальный размер файла, но за это удовольствие приходится расплачи ваться потерей качества. Утешением может служить то, что сжатие в формате JPEG искажает внешний вид изображения меньше, чем сокращение палитры цветов. При сохранении JPEG-изображений на экран выводится (рис. 8.3) диалоговое окно JPEG Options (Настройки JPEG).

Рассмотрим параметры, указанные в диалоговом окне, и их влияние на изображение.

• Matte (Кайма). Уместнее было бы название «имитация прозрачности». Пара метр становится доступным для изменения, если изображение содержит про зрачные области. В отличие от GIF, формат JPEG не поддерживает прозрачности и мы должны указать Adobe PhotoShop, каким цветом эти области залить. Соответствующий цвет можно выбрать из раскрывающегося списка.

  

  Рис. 8.3. Вид диалогового окна при сохранении изображения в формате JPEG

• Image Options (Настройки изображения). Изменяемым параметром является Quality (Качество). Он служит для задания степени сжатия изображения. Чем ниже значение параметра, тем выше сжатие (меньше размер файла). Качество изображения может значительно ухудшиться при увеличении степени сжатия.

  СОВЕТ. В большинстве случаев оптимальной является степень сжатия около 7. Однако в каж-дом случае ее стоит подбирать индивидуально. Этому способствует то, что во время выбора параметров формата JPEG в окне изображения отображается, как сжатие скажется на рисунке. При помощи мыши вы можете «прокручивать» изображение в окне. Щелкая мышью при нажатой клавише Сtrl, можно увеличить изображение, а при нажатой клавише Alt — уменьшить.
  
  

• Format Options (Настройки формата). Большинство web-браузеров поддерживает два варианта формата JPEG: базовый и прогрессивный (расширенный). Базовый, или последовательно отображаемый формат, создает изображения путем построчного вывода на экран, а прогрессивный выводит изображения на экран за несколько проходов. Формат Baseline Optimized (Оптимизированный базовый) отличается от Baseline («Standard») (Базовый стандартный) тем, что за счет использования улучшенного способа кодирования Хаффмана позволяет уменьшить размер файла на 5-10%. При выборе формата Progressive (Расширенный) изображение будет выводиться на экран не построчно, а за несколько проходов. На каждом из проходов выводится полное изображение, качество которого от прохода к проходу улучшается. Параметр Scans (Сканирование) задает число проходов. Чем выше значение этого параметра, тем более плавно улучшается качество изображения. Кроме того, при большем числе проходов файл занимает немного меньше места.
• Size (Размер) — вы можете оценить размер файла до его записи на диск. Из раскрывающегося списка вы можете выбрать скорость передачи данных. Рядом со списком отображается время, которое потребуется для загрузки изображения на компьютер пользователя. Если вы недовольны скоростью загрузки изображения, придется пожертвовать качеством и уменьшить параметр Quality (Качество).

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

Сохранение с помощью команды Save For Web... (Сохранить для Web...)

Главным достоинством команды Save For Web... (Сохранить для Web...) является возможность предварительного просмотра изображения и автоматическая подготовка HTML-кода, позволяющего установить изображение на web-страницу. Эта команда позволяет сравнить различные группы параметров и выбрать ту, которая обеспечивает оптимальное соотношение качества изображения и размера файла. Например, сравнить различные индексированные палитры цветов, параметры JPEG-сжатия, форматы GIF и JPEG. При этом исходное изображение остается неизменным и можно легко к нему вернуться.

С помощью этой команды за одну операцию можно провести индексацию цветов, добавить прозрачность и сохранить изображение в формате GIF или JPEG, что избавляет от необходимости предварительно использовать команды Indexed Color... (Индексированные цвета...) или Color Table (Таблица цветов).

На рис. 8.4 представлено диалоговое окно команды Save For Web... (Сохранить для Web...).

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

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

1. Original (Оригинал) — просмотр оригинального изображения без влияния изменений;
2. Optimized (Оптимизированное) — вид оптимизированного изображения без оригинала;
3. 2-Up (2 вида) — оригинал и один из оптимизированных вариантов;
4. 4-Up (4 вида) — оригинал и три варианта оптимизации, естественно, это самый наглядный режим.

Рис. 8.4. Диалоговое окно команды Save For Web...

Команда Save For Web... (Сохранить для Web...) предоставляет в ваше распоряжение обычный «джентльменский набор» инструментов: Hand (Рука), Slice Select (Выбор фрагмента), Zoom (Лупа) и Eyedropper (Пипетка). Никаких новых свойств они приобрести не успели, а описание их работы представлено в соответствующей главе.

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

Первая группа содержит единственную команду Browser Dither (Результат сглаживания), которая связана с флажком Web Snap (Цвета для Web) и позволяет посмотреть, как изображение будет выглядеть на 8-битовом мониторе. Вторая группа управляет компенсацией цвета, то есть дает возможность «увидеть» изображение на различных мониторах в различных системах. Третья группа команд определяет скорость загрузки, с которой будет отображаться изображение, причем выбранное значение относится ко всем вариантам оптимизации.

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

Следующее меню, которое мы рассмотрим, это меню параметров. Кнопка меню параметров находится в верхнем правом углу вкладки Settings (Настройки). Внешний вид этого меню представлен на рис. 8.6.

Рис. 8.5. Меню выбора режима предварительного просмотра

Рис. 8.6. Вид и расположение меню параметров

В этом меню собраны команды работы с настройками, команда Repopulate Views (Перемещение видов) и Optimize To File Size... (Оптимизировать размер файла...). Последнюю команду мы рассмотрим подробнее ввиду ее исключительной полезности (рис. 8.7.). Для web-графики, в которой идет жесткая борьба за каждый килобайт, возможность автоматически «отвоевать» уменьшение размера файла лишней не является. Для работы этой команды требуется:

Рис. 8.7. Диалоговое окно команды Optimize To File Size...

• задать желаемый размер файла, не забывая, конечно, что от него зависит качество;
• выбрать, будет ли работа происходить с текущими настройками (в этом случае автоматически изменяться будут параметры выбранного вами формата), или предоставить PhotoShop определить нужный формат;
• указать параметры использования фрагментов изображения, определенных при помощи инструмента Slice (Нож).

Далее перейдем к вкладке Settings (Настройки). Она предусматривает два способа оптимизации: автоматическую и ручную (рис. 8.8.).

Рис. 8.8. Слева изображены настройки для GIF, справа — для JPEG

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

При ручной оптимизации формата GIF можно задать алгоритм сокращения количества цветов, алгоритм сглаживания, прозрачность, чересстрочную загрузку, степень сглаживания (в процентах), цвет, которым следует заполнить прозрачные пикселы. Эти параметры рассмотрены выше (в разделе «Сохранение в формате GIF»). Дополнительными параметрами являются Lossy (Потери) и Web Snap (Цвета для Web).

СОВЕТ. При установке значения Lossy (Потери) около 30% размер файла значительно уменьшается, а качество остается приемлемым. Чем меньше значение параметра Web Snap (Цвета для Web), тем меньше степень соответствия используемых цветов web-цветам. Значение 100% говорит о том, что используются только web-цвета.

При выборе формата JPEG следует обратить внимание на следующие отличия от обычного окна сохранения:

1. в меню Quality (Качество) показатель изменяется в пределах от 0 до 100;
2. возможно использование цветового профиля (флажок ICC Profile (Профиль ICC));
3. появился параметр Blur (Размытие), который упрощает сжатие.

ВНИМАНИЕ. Для обработки цветовых профилей web-браузеру необходимы дополнительные модули, к тому же включение цветового профиля увеличивает размер файла на 3-4 Кбайт. При использовании размытия изображения обеспечивается уменьшение размера файла, но удаляются его детали.

Следующие две вкладки — Color Table (Таблица поиска цветов) и Image Size (Размер изображения) — аналогичны командам Image > Mode > Color Table... (Изображение > Режим > Таблица поиска цветов...) и Image > Image Size... (Изображение > Размер изображения...), рассмотренным в предыдущей главе.

В правом верхнем углу вкладки Color Table (Таблица поиска цветов) (рис. 8.9) расположена кнопка меню управления цветом.

Рис. 8.9. Вид и расположение меню управления цветом

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

И, наконец, финальным аккордом является кнопка Output Settings (Выходные настройки).

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

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

Рис. 8.10. Внешний вид диалогового окна для настройки HTML

Рис. 8.11. Внешний вид диалогового окна для настройки фона

Внешний вид диалогового окна при настройке HTML показан на рис. 8.10. Для настройки HTML задаются следующие группы параметров:

1. Formatting (Форматирование). Из четырех ниспадающих меню выбираются варианты написания тегов (Tags Case (Регистр тегов) и Attribs Case (Регистр атрибутов)), значения параметра Indent (Абзац) и Line Ending (Окончание линии). Флажок Always Quote Attributes (Всегда использовать кавычки) указывает на то, что значения параметров тегов следует заключать в кавычки;
2. Coding (Кодирование). Флажок Include Comments (Включить комментарии) добавляет комментарии к коду HTML;
3. Slice Output (Выходные параметры фрагментов). Каскадная таблица стилей генерируется при выборе переключателя Generate CSS (Сгенерировать CSS), при этом требуется указать, по какому признаку следует вызывать элементы web-страницы. Это задается при помощи параметра Referenced (Ссылки по): «By ID» («По идентификатору»), «Inline» («Встроенный стиль») или «By Class» («По классу»). При выборе переключателя Generate Table (Сгенерировать таблицу) создается таблица. Ее параметры выбираются из трех ниспадающих меню: Empty Cells (Пустые ячейки), TD W&H (Высота и ширина ячейки) и Spacer Cells (Ячейки-разделители).

СОВЕТ. Для параметров ТD W&H (Высота и ширина ячейки) и Spacer Cells (Ячейки-разделители) лучше установить значение Always (Всегда) вместо установленного по умолчанию Auto (Авто).

Параметры фона генерируемой web-страницы задаются в окне, показанном на рис. 8.11.

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

Внешний вид диалогового окна при настройке параметров сохранения файлов показан на рис. 8.12.

В этом диалоговом окне вашему вниманию предлагаются три вкладки:

• File Naming (Название файла). Определяет принцип присвоения названия файлу;
• Filename Compatibility (Совместимость названий файлов). Указывает, в каких системах, кроме Windows, может использоваться файл;
• Optimized Files (Оптимизировать файлы). Упрощает рутинную работу: копирует фоновый рисунок, записывает рисунки в одну папку и добавляет знак авторского права.

Внешний вид диалогового окна при настройке параметров сохранения фрагментов изображения, определенных при помощи инструмента Slice (Нож) показан на рис. 8.13.

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

Рис. 8.12. Внешний вид диалогового окна для настройки сохранения файлов

Рис. 8.13. Внешний вид диалогового окна для настройки сохранения фрагментов рисунка

Экспорт файлов GIF для Web

Файлы GIF экспортируются командой File > Export > GIF89a Export (Файл > Экспорт > Экспорт GIF89a).

ВНИМАНИЕ. В Adobe PhotoShop 7 фильтр экспорта GIF89a по умолчанию не устанавливается, его нужно переписать из папки Goodies дистрибутива в папку исполняемых модулей. Файл имеет название GIF89a Export.Sbe.

Изображения, созданные с помощью этой команды, могут быть:

• полупрозрачными;
• чересстрочными;

Они поддерживают следующие цветные режимы:

• Indexed Color (Индексированные цвета);
• RGB.

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

В этом окне можно задать следующие параметры:

• Palette (Палитра). Может принимать значения Adaptive (Адаптивная) и System (Системная). Как подробно разбиралось выше, палитра Adaptive (Адаптивная) основана на преобладающих цветах изображения, а палитра System (Системная) — на цветах, использующихся в Windows или Mac OS. При указании палитры System (Системная) становится доступным флажок Use Best Match (Использовать наиболее похожие), который позволяет заменить цвета изображения на близкие им цвета системной палитры;
  
  
• Color (Цвет). Из раскрывающегося списка необходимо выбрать количество цветов, которое будет содержаться в сохраняемом изображении;
• флажок Interlaced (Чересстрочный) управляет чересстрочной загрузкой изображения;
• флажок Export Caption (Добавить подпись) указывает, надо ли добавлять к экспортируемому изображению подпись, которая извлекается из сведений о файле (команда File > File Info... (Файл > Сведения...)).

Кнопка Load (Загрузить) загружает сохраненную ранее палитру.

Оценить результаты работы позволяет кнопка Preview (Предварительный просмотр).

Кроме вышеперечисленных параметров, здесь можно указать:

• цвет прозрачных пикселов при предварительном просмотре (по умолчанию серый, что не всегда удачно);
• какие цвета сделать прозрачными (при помощи инструмента Eyedropper (Пипетка));
• если изображение содержит канал маски, то она может быть использована для определения прозрачных областей (поле Transparency From (Прозрачность из)).

ВНИМАНИЕ. Черный цвет маски определяет прозрачность, белый — непрозрачность. Для фор-мата GIF не существует переходных состояний прозрачности: область либо прозрачна, либо нет. Темно-серый цвет маски станет прозрачным, а светло-серый — непрозрачным.

Экспорт контуров в Adobe Illustrator

В программу Adobe PhotoShop, являющуюся, по сути, растровым редактором, внедрены некоторые элементы векторной графики. Возможно, вы захотите, использовав при работе над изображением векторный объект, перенести его в векторный редактор для дальнейшей обработки. Воспользуйтесь командой File > Export > Paths to Illustrator... (Файл > Экспорт > Контуры в Illustrator...). Она позволяет сохранить векторные объекты (контуру) в формате векторной графики .AI, используемом программой Adobe Illustrator. Диалоговое окно этой команды представлено на рис. 8.14.

СОВЕТ. Программы семейства Adobe во многом схожи и совместимы между собой. Поэтому вы можете легко переносить между ними изображения и другие объекты при помощи буфера обмена Windows. Разумеется, каждая из программ будет представлять переданный ей объект в меру своих возможностей.

Рис. 8.14. В диалоговом окне команды Export > Paths to Illustrator... необходимо указать название файла и экспортируемые контуры

Мастер экспорта прозрачных изображений

Этот мастер быстрой подготовки изображений для Web запускается командой Help > Export Transparent Image... (Помощь > Экспорт прозрачных изображений...). Рисунки, которые вы сохраняете с его помощью, могут содержать прозрачные области.

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

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

   

   Рис. 8.15. Окно мастера экспорта прозрачных изображений при выполнении первого шага
   
   

2. На втором шаге (рис. 8.16) необходимо указать, для чего предназначено экспортируемое изображение: для печати (Print) или для размещения в Сети (Online). В зависимости от ответа Adobe Photoshop определит нужное разрешение: для web-графики достаточно 72 dpi, а для печати в большинстве случаев требуется гораздо большее разрешение. При выборе параметра Print (Печать) работа мастера на этом шаге заканчивается и вам будет предложено стандартное окно сохранения, где от вас требуется только ввести название файла.

   

   Рис. 8.16. Окно мастера экспорта прозрачных изображений при выполнении второго шага
   
   

3. На третьем шаге (рис. 8.17) нужно выбрать формат экспортируемого изображения. При выборе формата GIF за счет индексации мы потеряем некоторое количество цветов, а формат PNG до сих пор не поддерживается многими браузерами или же в них реализуются далеко не все его возможности. При выборе формата PNG работа мастера на этом шаге заканчивается и вам будет предложено сохранить файл.
   
   

   

   Рис. 8.17. Окно мастера экспорта прозрачных изображений на третьем шаге при выборе параметра Online
   
   

4. На четвертом шаге (рис. 8.18) проводится индексация цветов при помощи ранее подробно рассмотренной команды Indexed Color... (Индексированные цвета...).

   

   Рис. 8.18. Окно мастера экспорта прозрачных изображений на четвертом шаге при выборе формата GIF

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

Что нового мы узнали?

В этом уроке мы подробно рассмотрели процедуру сохранения файлов в основных форматах web-графики — GIF и JPEG. Мы узнали, какие параметры потребуется задать при выполнении этой операции, и какими путями можно оптимизировать сохраняемое изображение. Также мы познакомились с возможностями экспорта изображений из Adobe PhotoShop векторных объектов и сохранения изображений в автоматизированном режиме при помощи команды Save For Web... (Сохранить для Web...) и Мастеров экспорта.

[ Назад | Содержание | Дальше ]