Онлайн учебник по работе
с программой ImageReady

Создание графики для сайта

Приведение цвета однотонных областей к Web-цветам

Скажем, у вас есть изображение, которое необходимо оптимизировать в формате GIF с использованием палитры Perceptual (Учитывающая восприятие), Selective (Селективная) или Adaptive (Адаптивная), но в изображении есть однотонные области, цвет которых не входит в палитру Web. Прежде чем загружать изображение в сеть, можно заменить цвета таких областей близкими Web-цветами.

1. Откройте изображение в программе ImageReady и произведите его оптимизацию в формате GIF.
2. Выберите инструмент Eyedropper (Пипетка).
3. Щелкните по однотонной области, цвет которой следует заменить Web-цветом (рис. 23.56).
4. Откройте таблицу цветов. Образец цвета, по которому вы только что щелкнули, будет выделен (рис. 23.57).
5. Щелкните по кнопке Web Snap (Приведение к палитре Web) в нижней части палитры. На выделенном образце цвета появится значок в виде алмаза -это означает, что цвет был изменен на эквивалентный ему Web-цвет.
6. По желанию. Щелкните по кнопке Lock Color (Заблокировать цвет), чтобы сохранить данный элемент в таблице цветов, даже если количество цветов в палитре GIF будет сокращено.

Предварительный просмотр результатов возможного размытия оптимизированного изображения в браузере

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

В соответствии с данными, опубликованными на сайте Websnapshot.com. примерно у 10% пользователей Internet 8-битный монитор, который отображает максимум 256 цветов. С другой стороны, все графические браузеры используют палитру из 216 цветов. Для имитации цветов, не входящих в эту палитру, но содержащихся в изображении, используется метод размытия.

1. Откройте изображение в программе ImageReady и вызовите, по крайней мере, одно оптимизированное изображение в главном окне.
2. Выполните команды View > Preview > Browser Dither (Вид > Предварительный просмотр > Размытие в браузере) или нажмите комбинацию клавиш Ctrl+ Shift+Y - см. рис. 23.58 и 23.59. В результате миллионы цветов изображения будут сокращены до 8-битной цветовой палитры.

Рис. 23.58. Оптимизированное JPEG-изображение, опция Browser Dither выключена

Рис. 23.59. То же изображение с включенной опцией Browser Dither

Управление размытием

При оптимизации изображения в программе ImageReady применяется метод размытия для имитации цветов, содержащихся в исходном изображении, но отсутствующих в цветовой палитре оптимизированного изображения. Можно контролировать степень размытия, используя поле Dither (Размытие) на палитре Optimize (Оптимизация). Если увеличить его значение, то цвета оптимизированного изображения будут более точно воспроизводить цвета исходного, но размер файла немного увеличится.

Значение параметра Web Snap (Приведение к палитре Web) на палитре Optimize (Оптимизация) также влияет на степень размытия изображения в браузере. Чем выше это значение, тем меньше будет размыто изображение и тем меньше окажется размер файла. Чем больше цветов оптимизированного изображения соответствует 8-битной палитре браузера, тем меньше изменится изображение при включении опции Browser Dither (Размытие в браузере). Некоторая степень размытия приемлема и для изображений с плавным переходом цвета, поскольку тогда они выглядят лучше, чем при разбиении изображения на полосы, вызванном высоким значением параметра Web Snap (Приведение к палитре Web).

Предварительный просмотр изображения

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

Перейдя в режим предварительного просмотра изображения в программе ImageReady, выполните команду Standard Windows Color (Стандартные цвета Windows), чтобы имитировать контрастность изображения.

Воспользуйтесь командой View> Preview > Uncompensated Color (Вид > Предварительный просмотр > Не компенсировать цвет), чтобы предварительно просмотреть изображение без компенсации гаммы.

Включите опцию Embedded Color Profile (Встроенный цветовой профиль), чтобы привести изображение в окне предварительного просмотра в программе ImageReady (для RGB-монитора) в соответствие с профилем, включенным в изображение в программе Photoshop. Эта опция будет недоступна, если в изображении нет профиля.

Нажимая сочетания клавиш Ctrl+Alt+Y, можно попеременно переключать четыре опции предварительного просмотра. Но очень сложно уследить за тем, какой вариант предварительного просмотра отображается в данный момент.

Рис. 23.60. Диалоговое окно Gamma

Рис. 23.61. Темное изображение

Рис. 23.62. Светлое изображение

Изменение гаммы оптимизированного файла

1. Перейдя в режим предварительного просмотра оптимизированного изображения в ImageReady, воспользуйтесь командами Image > Adjustments > Gamma (Изображение > Корректировки > Гамма).
2. Щелкните по кнопке Windows to Macintosh (Из Windows в Macintosh), чтобы изменить установленное значение гаммы на гамму Mac OS (рис. 23.60). Изображение будет выглядеть темнее (рис. 23.61).

   Можно поступить и иначе. Щелкните по кнопке Macintosh to Windows (Из Macintosh в Windows), чтобы изменить установленное значение гаммы изображения на гамму Windows. В системе Mac OS изображение будет выглядеть светлее (рис. 23.62).

   В каждом случае особенности платформы компенсируются при помощи затемнения или осветления изображения.

3. Щелкните по кнопке ОК.

Также можно передвинуть ползунок, чтобы вручную установить значение гаммы между значениями, определяемыми кнопками Windows to Macintosh и Macintosh to Windows, либо указать другое значение гаммы для любой из платформ. Значение гаммы -относительная величина. Если изменить ее, закрыть, а затем снова открыть диалоговое окно, то настройка примет свое первоначальное значение равное 1.

Сохранение кода

Существует два метода копирования исходного кода из программы ImageReady в любой HTML-редактор. Первый: выделите исходный код, который расположен в нижней части окна браузера, щелкнув мышью и перетаскивая курсор (рис. 23.63), затем скопируйте и вставьте его в HTML-редактор или программу создания Web-страниц. Второй: в программе ImageReady воспользуйтесь командами Edit > Сору HTML Code > For All Slices (Правка > Копировать HTML-код > Для всех ломтиков) применительно к открытому файлу, затем вставьте исходный код в HTML-редактор или программу создания Web-страниц.

Предварительный просмотр оптимизированного изображения в браузере

Для более точной имитации вида изображения в сети щелкните по кнопке Preview in Browser (Предварительный просмотр в браузере) в программе ImageReady. Можно выбрать любой браузер среди тех, которые установлены в вашей системе.

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

1. Открыв оптимизированное изображение в программе ImageReady, щелкните на панели инструментов по кнопке Preview in Browser (Предварительный просмотр в браузере), либо нажмите соответствующую кнопку и выберите браузер из подменю.

Рис. 23.63. Изображение и исходный HTML-код в программе ImageReady

Рис. 23.64. Диалоговое окно Save

2. Браузер будет запущен, и изображение загрузится в окно (рис. 23.63). Созданные в ImageReady GIF-анимация и ролловеры также будут отображены на экране.
3. Если необходимо, закройте браузер и затем щелкните по любой палитре или окну ImageReady, чтобы вернуться в эту программу.

Предварительно просмотрите ваши файлы, загрузив их через сеть, на обеих компьютерных платформах с использованием различных мониторов.

Если глубина цвета на мониторе выше, чем 8 бит, а необходимо увидеть, как будет выглядеть изображение на 8-битном браузере, то сначала сократите количество цветов до 256 и затем загрузите браузер. Данный метод и предварительный просмотр с помощью опции Browser Dither (Размытие в браузере) в программе ImageReady отличаются незначительно.