Разрезание готового макета
Предположим, вы создали макет вашего сайта в программе Photoshop и сохранили его в формате .psd. Для того, чтобы перенести его в HTML, вам понадобится разрезать ваш макет на отдельные фрагменты. Сделать это аккуратно и поможет ImageReady.
Откройте ваш подготовленный макет в программе ImageReady:
В данном случае требуется разрезать макет по направляющим на 7 фрагментов. Для этого на панели инструментов возьмем инструмент ножик (Slice Tool):
Теперь подведем курсор мыши в верхний левый угол нашего макета, нажмем на левую клавишу мыши (курсор примет вид ножика) и, не отпуская, растянем рамочку до нижнего правого угла первого фрагмента:
Теперь таким же образом выделим и остальные фрагменты:
Теперь нужно настроить параметры оптимизации, для этого выберем вкладку 2-Up. Это позволит нам одновременно видеть оригинал и оптимизированное изображение.
Внизу каждого окна мы можем видеть размер файла и время его загрузки. Параметры оптимизации рассмотрим чуть ниже, а пока выберем оптимизированный вариант (щелкнем по окошечку) и сохраним его с помощью команды меню Save Optimized As.
В открывшемся окне, кроме места куда сохранить, нужно указать также:
Жмем сохранить. Готово. ImageReady создал папку images с набором заданных фрагментов.
Параметры оптимизации
По сути, оптимизация - это компромисс между размером файла и качеством изображения. При этом происходит сокращение размера файла без уменьшения самого изображения.
Параметры оптимизации можно настроить в палитре Optimize (Оптимизация).После выбора формата файла вид панели меняется и становятся доступны параметры оптимизации под конкретный формат.
Параметры сохранения GIF:
Этапы оптимизации
1. Открываете любое изображение в ImageReady.
2. Выбираете подходящий режим просмотра (например, 2-Up или 4-Up), чтобы сразу видеть результат ваших действий.
3. Настраиваете параметры оптимизации.
4. Когда размер файла и качество вас устраивают, сохраняете его с помощью команды меню Save Optimized As.
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
Главная → Графика для Web → Подготовка графики с помощью ImageReady
Подготовка графики с помощью ImageReady
ImageReady - компонента известного графического редактора фирмы Adobe - Photoshop. Возможности этой компоненты следующие:- Разрезание готового макета сайта и оптимизация отдельных фрагментов.
- Создание анимированных GIF-изображений.
- Создание карт-ссылок на основе изображений.
Разрезание готового макета
Предположим, вы создали макет вашего сайта в программе 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- режимы.
- 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
www.site-do.ru
Главная → Графика для Web → Подготовка графики с помощью ImageReady
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.