Подготовка графики с помощью 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.
Источник: www.site-do.ru
Разрезание готового макета сайта и оптимизация отдельных фрагментов.
Создание анимированных 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.
Источник: www.site-do.ru
Теги:
Похожие новости:
Комментарии:
Нету комментариев для вывода...