Photoshop for WEB

       


Отличия инструментов и команд PhotoShop и ImageReady


Программы, безусловно, похожи, но не являются сестрами-близнецами. Рассмотрим, чем отличаются друг от друга инструменты и команды меню PhotoShop и ImageReady (рис. 9.1, табл. 9.1).

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

Таблица 9.1. Отличия функций инструментов рисования программах PhotoShop и ImageReady



PhotoShop ImageReady
Можно использовать инструменты рисования для создания контуров Контур создать нельзя
На одном слое можно нарисовать много фигур и потом указать, как они должны перекрываться На слое можно нарисовать только одну фигуру
После того, как фигура нарисована, ее можно редактировать Фигуры можно только двигать и изменять

а б

Рис. 9.1. В PhotoShop (а) и ImageReady (6) панели инструментов немного отличаются друг от друга

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

К различиям между командами также стоит отнестись внимательно, чтобы не стало сюрпризом, что какая-либо известная из PhotoShop команда работает не так или не совсем так, как ожидалось. И, естественно, рассмотрим работу команд, которые есть только в ImageReady.

1. Меню File (Файл) (рис. 9.2).

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

СОВЕТ. Если ImageReady не позволяет сохранить файл в том формате, который вам нужен, всегда можно сделать это в программе PhotoShop.

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


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

а б
Рис. 9.2. Внешний вид меню File для PhotoShop (а) и ImageReady (б)



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

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

  • тип файла: HTML — код и изображения (*.html), только изображения (*.gif) и только HTML — код (*.html);


  • настройки: заказные, фонового изображения, по умолчанию и другие;


  • нарезку: все фрагменты или выделенные.


  • Команда File > Output Settings (Файл > Выходные настройки) отличается от соответствующей команды Photoshop только пунктом Image Maps... (Карты-изображения...), который подробно будет рассмотрен ниже (см. урок 12 «Карты-изображения в ImageReady»).

    Команда File > Update HTML... (Файл > Обновить HTML...) предназначена для обновления связей в файлах HTML (рис. 9.4).



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

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

    Команды File > Place... (Файл > Поместить...) внешних различий не имеют, но если в Photoshop помещать можно только файлы форматов *.ai, *.eps, *.pdf и *.pdp, то ImageReady разрешает помещать файлы любых читаемых форматов.

    Команда File > Import... (Файл > Импорт) позволяет получить файлы из внешних источников: импортировать папку с рисунками как кадры (подробно этот процесс рассмотрен ниже, импортировать изображение PDF, сканировать изображение и выбрать сканер.

    Команда File > File Info... (Файл > Информация о файле...) гораздо скромнее, чем в Photoshop, можно указать только заголовок и автора.

    Команда File > Preview In (Файл > Просмотр в) предоставляет возможность просмотреть изображение в любом установленном браузере.

    а б
    Рис. 9.5. Внешний вид меню Edit для PhotoShop (a) и ImageReady (б)

    2. Меню Edit (Правка)

    Команды подменю Edit > 0Copy HTML Code (Правка > Копировать HTML-код) обеспечивает копирование HTML-кода для всех нарезанных фрагментов изображения (Copy All Slices (Копировать все фрагменты)) или выделенных фрагментов (Copy Selected Slices (Копировать выделенные фрагменты)), а также соответствующего фрагментам изображения блоков программ JavaScript (Copy Preloads (Копировать программы)).



    Команда Edit > Copy Foreground Color as HTML (Правка > Копировать текущий цвет как HTML) возвращает шестнадцатеричное значение текущего цвета. Команда Edit > Fill... (Правка > Заливка...) в отличие от подобной команды в Photoshop не позволяет использовать заказной узор.

    3. Меню Image (Изображение)

    Основное отличие заключается в количестве команд подменю Adjustments (Коррекция). Как видно из рисунка, большинство команд коррекции изображения в ImageReady отсутствует.



    а



    б

    Рис. 9.6. Внешний вид меню Image и подменю Adjustments для PhotoShop (a) и ImageReady (б)



    Рис. 9.7. Диалоговое окно команды Image > Adjustments > Gamma...

    Команда Image > Adjustments > Gamma... (Изображение > Коррекция > Гамма...) позволяет настроить яркость изображения с учетом используемой системы (рис. 9.7).

    ПРИМЕЧАНИЕ. Параметр гамма измеряет яркость полутонов, отображаемых монитором. ОС Windows использует значение гамма выше, чем Mac OS, поэтому одно и то же изображение темнее для Windows, чем для Macintosh. Изображения, созданные в Photoshop 4.0 или более ранней версии, используют по умолчанию значение гамма, равное 1,8 (системное значение Mac OS) и должны быть скорректированы для Windows. Изображения, созданные в Photoshop 5.0 или более поздней версии, используют по умолчанию значение гамма, равное 2,2 (системное значение Windows), поэтому коррекции не требуют.

    Как видно из рисунка, можно провести автоматическую настройку для переноса изображения из Windows в Macintosh и обратно.

    ВНИМАНИЕ. Изменения, проведенные с помощью команды Image > Adjustments > Gamma... (Изображение » Коррекция > Гамма...), изменяют величину пикселов. Команды же из меню View > Preview корректируют параметр гамма, не изменяя величину пикселов изображения.

    Команда Image > Duplicate Optimized... (Изображение > Повторить оптимизированное...) делает копию оптимизированного изображения, в отличие от команды Image > Duplicate... (Изображение > Повторить...), которая делает копию оригинала.



    Команда Imaget Image Size... ( Изображение > Размер изображения...) позволяет изменить размер изображения, не теряя качества и предоставляет дополнительные настройки (рис. 9.8).

    Вкладка Current Size (Текущий размер) носит чисто информативный характер, на вкладке New Size (Новый размер) задаются нужные параметры: ширина, длина или процентное соотношение. Флажок Constrain Proportions (Сохранить пропорции) не позволяет только удлинять или только расширять изображение. Из меню Quality (Качество) можно выбрать способ искажения пикселов (бикубический или «ближайший сосед»).

    Поскольку изменение размеров изображения — часто используемый шаг обработки, его можно автоматизировать с помощью вкладки Action Options (Настройки действия). Для этого нужно записать указанную ниже последовательность действий.

  • Начать запись действия.


  • Выполнить команду Image > Image Size... (Изображение > Размер изображения...), задав нужные параметры изображения.


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






  • а



    б

    Рис. 9.8. Диалоговые окна команд Image > Image Size... в PhotoShop (а) и ImageReady (б)

  • Из меню Fit Image By (Подогнать рисунок по) выбрать подходящий параметр подгонки: ширину, длину, ширину и длину вместе или процентное соотношение.


  • Флажок Do Not Enlarge (He увеличивать) позволяет запретить увеличение изображения в том случае, если его текущие габариты меньше установленных в параметрах команды.


  • Закончить запись действия.


  • Команда Image > Variables > Define... (Изображение > Переменные > Определить...) используется при создании нескольких изображений на основе одного шаблона (рис. 9.9). Переменные определяют динамические элементы шаблона. Тип переменной обусловливает тип данных, которые должны меняться. Типы могут быть следующими:

  • переменные видимости. Позволяют скрыть или отобразить содержимое слоя;




  • переменные замещения пикселов. Позволяют заменить пикселы слоя на пикселы из другого изображения;


  • текстовые переменные. Позволяют заменить одну текстовую строку другой.




  • Рис. 9.9. Диалоговое окно команды Image > Variables > Define...



    Рис. 9.10, а. Режим замещения пикселов Fit



    Рис. 9.10, б. Режим замещения пикселов Fill



    Рис. 9.10, в. Режим замещения пикселов As Is

    В этом диалоговом окне можно назвать, переименовать или переместить переменные, а также задать метод перемещения пикселов для этого типа.

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

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


  • Fill (Залить). Иллюстрация к этому методу представлена на рис. 9.10, б. Изображение с сохранением пропорций помещается в заданные границы по ширине. Флажок Clip to Bounding Box (Обрезать по рамке) позволяет обрезать области изображения, не помещающиеся в рамку;


  • As Is (Как есть). Иллюстрация к этому методу представлена на рис. 9.10, в. Изображение помещается в заданные границы без изменения размера, лишнее можно обрезать, установив флажок Clip to Bounding Box (Обрезать по рамке);


  • Conform (Согласовать). Иллюстрация к этому методу представлена на рис. 9.10, г. Изображение помещается в заданные границы без сохранения пропорций.



    Рис. 9.10, г. Режим замещения пикселов Conform

    Команда Image > Variables > Data Set... (Изображение > Переменные > Набор данных...) определяет набор данных, который представляет собой совокупность переменных и связанных данных. Переключение между наборами данных позволяет оперировать различными данными в одном шаблоне (рис. 9.11).

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

    Над набором данных производятся следующие действия:

  • создание набора данных. Для этого предназначена кнопка
    ;


  • редактирование набора данных. Данные переменных видимости, характеризует которые значок
    слева от названия, можно изменять с помощью переключателей Visible (Видимый) и Invisible (Невидимый). Для переменных замещения пикселов (значок
    ) с помощью команды Browse... (Поместить. ..) указывается необходимый файл. Для текстовых переменных строка вводится в соответствующее текстовое поле;




  • сохранение набора данных. Созданный набор сохраняет кнопка
    ;


  • переименование набора данных. Введение нового имени в соответствующее текстовое поле вкладки Data Set (Набор данных);


  • удаление набора данных. Для этого служит кнопка
    ;


  • перемещение по набору данных. Если в документе несколько наборов, можно использовать кнопки
    .




  • Рис. 9.11. Диалоговое окно команды Image > Variables > Data Set...

    Команда Image > Preview Document (Изображение > Просмотр документа) позволяет посмотреть анимированное изображение, анимированные кнопки или внешний вид в целом.

    Подменю Master Palette (Главная палитра) содержит команды работы с заказной палитрой, которая используется для пакетной обработки изображений. Команда Image > Master Palette > Add To Master Palette (Изображение > Главная палитра > Добавить в главную палитру) добавляет в главную палитру всю информацию о цвете текущего изображения.

    Команда Image > Master Palette > Build Master Palette (Изображение > Главная палитра > Сделать главную палитру) создает новую таблицу поиска цвета на основе информации, собранной при помощи предыдущей команды. Команда Image » Master Palette > Clear Master Palette (Изображение > Главная палитра > Очистить главную палитру) позволяет не включать цвета из предыдущих изображений в новую палитру.

    Команда Image > Master Palette > Save Master Palette (Изображение > Главная палитра > Сохранить главную палитру) предназначена для того, чтобы назвать файл главной палитры и выбрать место его размещения. По умолчанию, такой файл имеет расширение *.act (Adobe Color Table).

    ПРИМЕЧАНИЕ. Если вы хотите получить доступ к своей палитре при оптимизации GIF или PNG изображений, сохраните ее в папке Adobe PhotoShop > Presets > Optimized Colors. Чтобы применить к изображению свою палитру, нужно найти ее название в меню алгоритма сокращения количества цветов панели оптимизации. Подробнее этот вопрос будет рассмотрен дальше (см. Оптимизация изображений).



    a б
    Рис. 9.12. Внешний вид меню Layer для PhotoShop (a) и ImageReady (б)

    4. Меню Layer (Слой)

    Команда Layer > Layer Options... (Слой > Настройки слоя...) ImageReady по принципу действия напоминает команду Layer > Layer Properties... (Слой > Свойства слоя...) PhotoShop (рис. 9.13, а и б),

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



    Рис. 9.13, а. Диалоговое окно команды Layer > Layer Properties... из PhotoShop



    Рис. 9.13,б. Диалоговое окно команды Layer > Layer Options... из ImageReady

    Команда Layer > New Layer Based Image Map Area (Слой > Новый слой, основанный на карте-изображении) позволяет создать слой на основе карты-изображения. Подробнее работа этой команды рассмотрена ниже (см. Карты-изображения в ImageReady).

    Команда Layer > Match... (Слой > Подогнать...) позволяет применить текущие настройки слоя к слоям, входящим в другие элементы (рис. 9.14).



    Рис. 9.14. Диалоговое окно команды Layer > Match...

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

    В группу команд монтажа, выравнивания и распределения внесена команда Layer > Set Layer Position... (Слой > Установить расположение слоя...), диалоговое окно которой показано на рис. 9.15.

    Эта команда определяет смещение слоя по горизонтали и вертикали.

    Команда Layer > Lock All Layers In Set... (Слой > Закрепить все слои в наборе...) фиксирует следующие параметры в наборе слоев: прозрачность, изображение, расположение или все параметры сразу (рис. 9.16).



    Рис. 9.15. Диалоговое окно команды Layer > Set Layer Position...



    Рис. 9.16. Диалоговое окно команды Layer > Lock All Layers In Set...



    Рис. 9.17. Внешний вид меню Slices (Нарезка)



    5. Меню Slices (Нарезка)

    Фрагменты нарезки принадлежат к одному из трех типов:

  • созданные автоматически;


  • созданные пользователем;


  • созданные на основе слоя.


  • Следует обратить внимание на то, что некоторые команды не работают с некоторыми из этих типов.

    Команда Slices > Create Slices from Guides (Нарезка > Разрезать по направляющим) создает фрагменты нарезки из фрагментов изображения, заключенных между направляющими.

    ВНИМАНИЕ. При разрезании по направляющим все уже существующие фрагменты удаляются.

    Команда Slices > Duplicate Slice (Нарезка > Повторить фрагмент нарезки) делает копию фрагмента нарезки.

    Команда Slices > Combine Slices (Нарезка > Объединить фрагменты нарезки) соединяет несколько фрагментов в один. Объединенный фрагмент становится фрагментом пользовательского типа, хотя входить в него может и созданный автоматически.

    ВНИМАНИЕ. Нельзя объединить фрагменты нарезки, основанные на слое.

    Команда Slices > Divide Slice... ( Нарезка > Разделить фрагменты нарезки...) делит каждый фрагмент нарезки на заданное количество частей, каждая из которых в свою очередь становится полноценным фрагментом (рис. 9.18).



    Рис. 9.18. Диалоговое окно команды Slices > Divide Slice...

    В этом диалоговом окне можно задать количество частей, на которое нужно разделить фрагмент, или размер нового фрагмента в пикселах. Делить можно и по горизонтали, и по вертикали.

    Команды Slices > Delete Slice (Нарезка > Удалить фрагмент нарезки) и Slices > Delete All (Нарезка > Удалить все) предназначены для удаления соответствующих элементов.

    Группу команд для связывания и разъединения образуют Slices > Link Slices (Нарезка > Связать фрагменты нарезки), Slices > Unlink Slices (Нарезка > Разъединить фрагменты нарезки), Slices > Unlink Set (Нарезка > Разъединить набор) и Slices > Unlink All (Нарезка > Разъединить все).

    Команда Slices > Promote to User Slices (Нарезка > Перевести в пользовательские фрагменты нарезки) предназначена для того, чтобы присвоить фрагментам, созданным автоматически или основанных на слое, статус созданных пользователем. Это необходимо для выполнения команд из следующих подменю: Slices > Arrange (Нарезка > Монтаж), Slices > Align (Нарезка > Выравнивание) и Slices > Distribute (Нарезка > Распределение).



    ВНИМАНИЕ. Нельзя выровнять или распределить фрагменты нарезки, основанные на слое или созданные автоматически, а также изменить порядок их следования.

    Команда Slices > Save Slice Selection... (Нарезка > Сохранить выделение фрагмента нарезки...) позволяет назвать выделенные фрагменты. Подменю Slices > Load Slice Selection (Нарезка > Загрузить выделение фрагмента нарезки) и Slices > Delete Slice Selection (Нарезка > Удалить выделение фрагмента нарезки) соответственно загружают или удаляют сохраненное ранее выделение.

    6. Меню Select (Выделение)



    а



    б

    Рис. 9.19. Внешний вид меню Select для PhotoShop (а) и ImageReady (б)

    Команды Select > Create Selection from Slices (Выделение > Создать выделение из фрагментов нарезки) и Select > Create Slice from Selection (Выделение > Создать фрагмент нарезки из выделения) используются для преобразования выделения в фрагмент нарезки и наоборот.

    Команда Select > Create Image Map from Selection... (Выделение > Создать карту-изображение из выделения) позволяет создать карту-изображение на основе выделенной области (рис. 9.20).

    При выборе многоугольной формы карты-изображения параметр Quality (Качество) определяет степень приближения многоугольника к выделенной области. Подробнее этот вопрос рассмотрен в уроке «Карты-изображения в ImageReady».



    Рис. 9.20. Диалоговое окно команды Select > Create Image Map from Selection...

    Подменю Select > Delete Channel (Выделение > Удалить канал) позволяет удалить ненужный канал, имя которого выбирается из списка.

    7. Меню Filter (Фильтр).



    а



    б

    Рис. 9.21. Внешний вид меню Filter для PhotoShop (а) и ImageReady (б)

    Команда Filter > Last Filter (Фильтр > Последний фильтр) в ImageReady разделилась на две: Filter > Apply Last Filter (Фильтр > Применить последний фильтр), обеспечивающую повторение предыдущего фильтра с теми же параметрами, и Filter > Last Filter... (Фильтр > Последний фильтр...), вызывающую повторно диалоговое окно последнего фильтра.



    Из рис. 9. 21 видно, каких групп фильтров и команд не хватает. Состав некоторых оставшихся групп фильтров сокращен. Посмотрим, что осталось.

    В группе Blur (Размытие): Gaussian Blur... (Размытие по Гауссу...), Radial Blur... (Радиальное размытие...) и Smart Blur... (Интеллектуальное размытие...).

    В группе Pixelate (Оформление): Color Halftone... (Цветовые полутона...), Crystallize... (Кристаллизация...), Mezzotint... (Меццо-тинто...) и Pointillize... (Пуантилизм...).

    В группе Sharpen (Резкость): Unsharp Mask... (Контурная резкость...).... В группе Stylize (Стилизация): Extrude... (Тиснение...), Glowing Edges... (Свечение краев...), Solarize... (Соляризация...), Tiles... (Фрагменты...), Wind... (Ветер...).

    В группе Other (Другие): Offset... (Смещение...).

    Добавился фильтр Filter > Other > Tile Maker... (Фильтр > Другие > Фрагменти-рование...).



    Рис. 9.22. Диалоговое окно фильтра Filter > Other > Tile Maker...

    а б
    Рис. 9.23. Результат работы фильтра Tile Maker...: использован переключатель Blend Edges, значение Width взято равным 20%, флажок Resize Tile to Fill Image установлен (a); использован переключатель Kaleidoscoge Tile (б)

    Фильтр Tile Maker (рис. 9.22 и 9.23) облегчает подготовку фонового рисунка для web-страниц. Он позволяет стереть границы рисунка для создания бесшовной текстуры или применить калейдоскопический эффект для создания абстрактного фона.

    Для использования фильтра необходимо выполнить следующие действия:

  • Выделить на рисунке область, из которой предполагается сделать фоновый рисунок.


  • Выполнить команду Filter > Other > Tile Maker... (Фильтр > Другие > Фрагментирование...).


  • Выбрать Blend Edges (Стереть границы), если нужно сделать из выделения фрагмент фона. В текстовое поле Width (Ширина) требуется ввести ширину стираемой границы в процентах (оптимальным является значение в диапазоне от 5% до 15%). Флажок Resize Tile to Fill Image (Увеличить фрагмент до размера изображения) снимается, если нужно создать фрагмент меньшего размера, чем оригинальное выделение.




  • Выбрать Kaleidoscope Tile (Калейдоскопический эффект), если нужно создать абстрактный рисунок. В этом случае выделение сместится, повторится по горизонтали и вертикали и границы растушуются.


  • 8. Меню View (Вид).



    а



    б

    Рис. 9.24. Внешний вид меню View для PhotoShop (а) и ImageReady (б)

    Подменю View > Preview (Вид > Предварительный просмотр) управляет отображением цветов и позволяет увидеть, как изображение будет выглядеть в ситуациях выбора следующих режимов (рис. 9.24): Browser Dither (Сглаживание в браузере), Uncompensated Color (Некомпенсированные цвета), Standard Windows Color (Стандартные цвета Windows), Standard Macintosh Color (Стандартные цвета Macintosh) и Use Embedded Color Profile (Использовать внедренный цветовой профиль). При переключении режима просмотра само изображение не изменяется.

    Команда View > Resize Window to Fit (Вид > Изменить размер окна по изображению) изменяет размер окна, чтобы оно соответствовало размеру изображения.

    Команды подменю View > Show (Вид > Показать), помимо основных дополнительных элементов, таких как фрагменты нарезки и границы выделения, отображают специфические дополнительные элементы: карты-изображения, границы текстовых блоков, базовые линии текста и выделение в тексте.

    Подменю View > Snap To (Вид > Привязать к), в отличие от подобного подменю PhotoShop, позволяет выполнить привязку только к направляющим и фрагментам нарезки.

    Команда View > Create Guides... (Вид > Создать направляющие...) автоматически создает нужное количество направляющих (рис. 9.25).



    Рис. 9.25. Диалоговое окно команды View > Create Guides...

    На вкладке Horizontal Guides (Горизонтальные направляющие) задается либо количество направляющих, либо расстояние между направляющими в пикселах, либо количество пикселов сверху (в этом случае создается одна направляющая). Те же параметры можно задать для вертикальных направляющих на вкладке Vertical Guides (Вертикальные направляющие). При необходимости используется флажок Clear Existing Guides (Удалить существующие направляющие).


    Содержание раздела