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

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

Экспорт изображений

К экспорту изображений в ImageReady можно отнести несколько групп команд. В первую очередь, это, конечно, команда File > Export Original... (Файл > Экспорт Оригинала...), затем File > Save (Файл > Сохранить), File t Save As... (Файл > Сохранить как...), File > Save Optimized (Файл > Сохранить оптимизированное) и File > Save Optimized As... (Файл > Сохранить оптимизированное как), несомненно, Edit > Copy HTML Code (Правка > Копировать код HTML) и, наконец, команды Edit > Cut (Правка > Вырезать) и Edit > Сору (Правка > Копировать). В этом уроке мы рас смотрим каждую из этих команд, чтобы разобраться, какую из них когда имеет смысл применять.

Команда File > Export Original... (Файл > Экспорт оригинала...) делает копию оригинального изображения, предварительно произведя сведение слоев и позволя ет сохранить эту копию в разных форматах файлов (рис. 13.1).

Рис. 13.1. Диалоговое окно команды File > Export Original...

Как видно из рисунка, задать можно название файла и его формат. Форматы могут быть следующими: Photoshop (*.psd), BMP (*.bmp), PCX (*.pcx), Pixar (*.pxr), Targa (*.tga) и TIFF (*.tif). Такая информация, как нарезка и параметры оптимизации, не сохраняется, если формат отличен от PSD.

Предназначение команды File > Save (Файл > Сохранить) — сохранять изменения, сделанные за некоторый промежуток времени в рабочем файле. В отличие от PhotoShop, в ImageReady эта команда сохраняет изображения только в формате РSD(рис. 13.2).

Команда File > Save As... (Файл > Сохранить как...) отличается от команды File > Save (Файл > Сохранить) тем, что позволяет задать другое название и месторасположение файла. В отличие от PhotoShop, в ImageReady эта команда не предусматривает изменение формата, и изображение может быть сохраненным при помощи этой команды только в формате PSD.

Рис. 13.2. Диалоговое окно команды File > Save совпадает с аналогичным окном команды File > Save As...

Рис. 13.3. Диалоговое окно команды File > Save Optimized совпадает с аналогичным окном команды File > Save Optimized As...

Команда File > Save Optimized (Файл > Сохранить оптимизированное) сохраняет гекущее состояние изображения с настройками, указанными при оптимизации (рис. 13.3; подробнее см. Оптимизация анимированных изображений).

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

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

• тип файла;
• настройки;
• нарезку.

Под выбором типа файла в данном случае подразумевается следующее: можно сохранить HTML-код и изображения (*.html), только изображения (*.gif) и только HTML-код (*.html).

Сохранение HTML-кода и изображения задается типом «HTML and Images (*.html)» соответствующего ниспадающего меню. В этом случае результатом является файл HTML и отдельные файлы для каждого фрагмента нарезки, имеющегося в исходном изображении. Файл HTML включает в себя код всех присутствующих «спецэффектов»: гиперссылок, карт-изображений, анимированных кнопок и изображений. Формат файлов изображений и его настройки определяются параметрами, заданными при оптимизации.

Сохранение только изображения обеспечивает тип «Images only (*.gif)». В результате получаем отдельный файл для каждого фрагмента нарезки (если таковая имеется), формат и настройки которого определяются, как и в предыдущем Случае, параметрами, заданными при оптимизации.

Для сохранения только HTML-кода используется тип «HTML only (*.html)». Результат — файл HTML, не включающий данные, относящиеся к изображению.

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

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

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

Под настройками по умолчанию подразумеваются настройки, заданные в диалоговом окне команды File > Output Settings > HTML... (Файл > Выходные настройки > HTML...). При выборе пункта «Другие» также появляется это диалоговое окно (рис. 13.4).

Эта команда полностью совпадает с аналогичной командой PhotoShop, за исключением флажка Include GoLive 5 (or Earlier) Code (Включить код GoLive 5 (или более ранней версии)). Установка этого флажка позволяет форматировать код HTML и JavaScript таким образом, что анимированные кнопки можно редактировать в программе Adobe GoLive. Естественно, эта процедура увеличивает конечный размер файла.

Далее нужно указать, какие фрагменты нарезки использовать: все вместе или только выделенные.

Рис. 13.4. Диалоговое окно команды File > Output Settings > HTML...

Следующий способ экспорта — команды подменю Edit > Copy HTML Code (Правка > Копировать код HTML). Эти команды копируют код HTML для оптимизированного изображения в буфер обмена:

• Copy All Slices (Копировать все фрагменты) — копируется код HTML всех нарезанных фрагментов изображения;
• Copy Selected Slices (Копировать выделенные фрагменты) — копируется код HTML только выделенных фрагментов;
• Copy Preloads (Копировать программы) — для выбранных фрагментов копируется сгенерированный ImageReady код JavaScript.

ПРИМЕЧАНИЕ. ImageReady генерирует и форматирует код HTML таким образом, как указано в диа логовом окне команды File > Output Settings > HTML... (Файл > Выходные настройки» HTML...).

Для вставки скопированного таким способом кода HTML необходимо открыть нужный HTML-файл (или создать новый) в соответствующем приложении и выполнить в нем команду Edit > Paste (Правка > Вставить).

ВНИМАНИЕ. При изменении месторасположения источника изображения необходимо ислользовать команду File > Update HTML... (Файл > Обновить HTMI...) для обновления связей.

В изображенном на рис. 13.5 окне задается имя файла HTML, который необходимо обновить. Флажок Save Images (Сохранить изображения) управляет доступностью кнопки Output Settings... (Выходные настройки...). При нажатии этой кнопки появляется диалоговое окно команды File > Output Settings > Saving Files... (Файл > Выходные настройки > Сохранение файлов...), показанное на рис. 13.6.

Рис. 13.5. Диалоговое окно команды File > Update HTML...

Рис. 13.6. Диалоговое окно команды File > Output Settings > Saving Files...

Как видно из рисунка, в этом диалоговом окне три вкладки:

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

Для обмена выделенными фрагментами с PhotoShop или другими приложениями используются команды Edit > Cut (Правка > Вырезать) и Edit > Copy (Правка > Копировать).

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

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

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