Главная → Графика для Web → Подготовка графики с помощью ImageReady

Подготовка графики с помощью ImageReady

ImageReady - компонента известного графического редактора фирмы Adobe - Photoshop. Возможности этой компоненты следующие:

  • Разрезание готового макета сайта и оптимизация отдельных фрагментов.


  • Создание анимированных GIF-изображений.


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


Главное окно программы ImageReady очень похоже на окно Photoshop, но имеет ряд особенностей. Это и несколько специальных инструментов на панели инструментов и дополнительные палитры:


Разрезание готового макета

Предположим, вы создали макет вашего сайта в программе Photoshop и сохранили его в формате .psd. Для того, чтобы перенести его в HTML, вам понадобится разрезать ваш макет на отдельные фрагменты. Сделать это аккуратно и поможет ImageReady.

Откройте ваш подготовленный макет в программе ImageReady:


В данном случае требуется разрезать макет по направляющим на 7 фрагментов. Для этого на панели инструментов возьмем инструмент ножик (Slice Tool):


Теперь подведем курсор мыши в верхний левый угол нашего макета, нажмем на левую клавишу мыши (курсор примет вид ножика) и, не отпуская, растянем рамочку до нижнего правого угла первого фрагмента:


Теперь таким же образом выделим и остальные фрагменты:


Теперь нужно настроить параметры оптимизации, для этого выберем вкладку 2-Up. Это позволит нам одновременно видеть оригинал и оптимизированное изображение.


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

В открывшемся окне, кроме места куда сохранить, нужно указать также:

  • имя файла - имя для фрагментов. Например, если задать имя img, то фрагменты будут называться img_01.gif, img_02.gif и т.д.

  • тип файла - если выбрать Images Only (*.gif), то сохранятся только фрагменты. Если выбрать HTML and Images (*.html), то кроме картинок будет создан html-файл c автоматически сгенерированной таблицей для фрагментов (т.е. уже готовая страница).



Жмем сохранить. Готово. ImageReady создал папку images с набором заданных фрагментов.

Параметры оптимизации

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

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


Параметры сохранения GIF:

  • Color table - таблица цветов:

    • Reduction - способ выбора цветов из изображения в палитру (perceptual - цвета, к которым наиболее восприимчив человеческий глаз, selective - предпочтение отдается цветам, которые чаще всего встречаются в оригинале, adaptive - только те цвета, которые превалируют в оригинале).

    • Colors - количество цветов, которое будет выбрано.

  • Dither - параметры сглаживания:

    • Method - указывает как будут замещаться цвета изображения, не попавшие в таблицу цветов (diffusion - диффузия, наиболее приближен к оригиналу; pattern - узор, отсутствующие цвета заменяются "узором" пикселов, имеющихся в таблице цветов; noise - шум, узор пикселов менее заметен).

    • Amount - степень сглаживания. Чем сильнее сглаживание, тем больший диапазон цветов может передать изображение (оптимально - 75%).

  • Transparency - прозрачность:

    • Установите флажок, если нужно сохранить прозрачность.

    • Matte - позволяет выбрать цвет фона, если он был прозрачным.

  • Options- режимы.

Параметры сохранения JPEG:


  • Quality - качество. Доступны качественные значения (low - низкое, medium - среднее, hight - высокое) и количественные.

  • Transparency - прозрачность.

  • Options- режимы.



Этапы оптимизации

1. Открываете любое изображение в ImageReady.

2. Выбираете подходящий режим просмотра (например, 2-Up или 4-Up), чтобы сразу видеть результат ваших действий.

3. Настраиваете параметры оптимизации.

4. Когда размер файла и качество вас устраивают, сохраняете его с помощью команды меню Save Optimized As.

21.06.2009
www.site-do.ru





Главная → Графика для Web → Подготовка графики с помощью ImageReady


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


Уроки PHP Код кнопки:

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