Подготовка графики для Web
На этом занятии поговорим об основах теории цвета, различных графических форматах затронем вопросы подготовки графики в растровых и векторных графических редакторах, а также вопросы оптимизации иллюстраций, предназначенных для публикации в Интернете.
Почему трава зелёная
Известно, что белый цвет представляет собой смесь всех
цветов. Это легко увидеть, если пропустить луч света («белый цвет») через
стеклянную призму. Так как лучи, соответствующие разным цветам, имеют разные
углы преломления, мы увидим все составляющие белого цвета по отдельности.
Условно эти цвета разбивают на семь групп («цвета радуги») (рис. 5.1):
Рис. 5.1. Белый цвет является смесью всех цветов
Только не надо думать, что белый цвет состоит всего из семи цветов! Просто в семь групп собраны все оттенки красного, оранжевого, жёлтого, зелёного, голубого, синего и фиолетового цветов. А на рисунке каждая группа условно изображена одним «чистым» цветом.
В солнечном свете мы видим траву зелёной, потому что наши
глаза воспринимают часть солнечных лучей, соответствующую зелёному цвету (трава
отражает только эти лучи, а остальные она поглощает). А песок выглядит жёлтым
потому, что он отражает только часть солнечных лучей, соответствующую жёлтому
цвету, а остальные — поглощает (рис. 5.2).
Рис. 5.2. Цветные поверхности
Если осветить газон светом, в составе которого нет зелёной составляющей (например, пурпурным), то мы увидим траву чёрной.
Мы видим свет, когда он попадает на светочувствительные клетки глаза (сетчатку). Эти нервные клетки разделяются на колбочки и палочки. Палочки более светочувствительны, но не различают цвета. На эти клетки ложится основная нагрузка в вечернее и ночное время (когда все кошки нам кажутся серыми). Колбочки менее чувствительны к свету, зато способны воспринимать цвета.
Колбочки, в свою очередь, разделяются на три группы: «красные» (воспринимают только красный цвет), «зелёные» (воспринимают только зеленый цвет), «синие» (воспринимают только синий цвет).
Информация от колбочек поступает в зрительный нерв, где суммируется, и человек видит цвет как смесь красной, зелёной и синей составляющей. Получается, что любой цвет мы воспринимаем как смесь трёх основных цветов — красного, зелёного и синего. Какой именно оттенок мы видим, зависит от пропорций, в которых смешиваются основные цвета.
Смешивая в равных количествах красный, зелёный и синий
цвета, получаем белый цвет. Смесь красного и зелёного цветов дает жёлтый цвет
(рис. 5.3).
Рис. 5.3. Состав белого и жёлтого цветов
Равные количества красного и синего цветов дают пурпурный
цвет, а равные количества зелёного и синего — голубой (рис. 5.4):
Рис. 5.4. Состав пурпурного и голубого цветов
Если взять синий цвет и добавить 75% от его количества
красного, то получается фиолетовый цвет. Оранжевый цвет состоит из красного
цвета и 50% от его количества зелёного (рис. 5.5).
Рис. 5.5. Состав фиолетового и оранжевого цветов
Цветное изображение на экране монитора также получается смешиванием цветов. Каждый пиксел состоит из трёх крупинок люминофора — красного, зелёного и синего цвета. Получается, что механизм цветопередачи монитора практически повторяет устройство сетчатки человеческого глаза.
Компьютерные цвета
Система кодирования цвета при помощи трёх составляющих — красной, зелёной и синей — носит название RGB (от Red — красный, Green — зелёный, Blue — синий).
Число возможных цветов на экране компьютера зависит как от физических характеристик самого монитора, так и от количества памяти, расположенной на видеокарте. Как правило, монитор можно настроить на разные режимы работы.
.
Конструирование цвета
RGB-модель, основанная на физических свойствах света, не слишком удобна для практического цветового конструирования. Поэтому все графические редакторы снабжаются перцепционной (ориентированной на восприятие) системой цветового кодирования HSB. В этой системе в качестве цветовых координат выступают:
q цветовой тон, или оттенок (Hue);
q насыщенность, или контрастность (Saturation);
q яркость (Brightness).
Перемещение движка цвета по горизонтали меняет оттенок (H), по вертикали — контрастность (S). Перемещение треугольного движка (по отдельной вертикальной линейке) меняет яркость (B).
Оттенок (тон) — это цвет на радуге.
Контрастность (насыщенность) — это содержание в цвете серой примеси. Цвет максимальной насыщенности не содержит серого вообще, а при нулевой насыщенности все цвета — серые.
Яркость — это интенсивность, с которой излучается цвет. При максимальной яркости все цвета превращаются в белый цвет, при нулевой — в чёрный.
Алгоритм подбора цвета показан на рис. 5.17.
Рис. 5.17. Алгоритм конструирования цвета
Сначала выбирается цвет на радуге (слева направо), потом устанавливается его контрастность (сверху вниз), а затем отдельным движком задаётся яркость.
Рекомендации по работе с цветом
Человеческий глаз устроен таким образом, что одни и те же
цвета могут восприниматься по-разному. При уменьшении площади, занимаемой
цветом, оттенки становятся малоразличимыми и цвета визуально «теряют»
насыщенность. Это особенно хорошо заметно на цветных текстах (рис. 5.24):
Рис. 5.24. Буквы того же цвета, что и прямоугольник
Практическая рекомендация: для объектов с маленькими
закрашенными площадями нужно выбирать яркие цвета (6 основных цветов радуги
плюс белый и чёрный цвета), а для сложных цветов со слабонасыщенным
тоном — использовать большие площади (рис. 5.25).
Рис. 5.25. Буквы ярких цветов
Чёрные и белые цвета «не терпят» примесей в небольших количествах. Лучше использовать их в «натуральном» виде. К белому можно добавлять немного «синьки».
Чёрный и белый цвет являются особыми цветами. Их нет в радуге, но в то же время любой цвет превращается в чёрный при уменьшении яркости до нуля и в белый — при увеличении яркости до максимального значения. Эти цвета наиболее часто используются в дизайне, т. к. они хорошо сочетаются с большинством других цветов.
Если вы чувствуете себя не совсем уверенно в цветовом
пространстве, — возьмите за основу чёрный и белый цвета, добавьте к ним
красный — эта палитра вас не подведёт (рис. 5.26).
Рис. 5.26. Чёрный + белый + красный = отличная сочетаемость
Цвета, расположенные рядом, выглядят несколько иначе, чем взятые по отдельности, кроме того, вид цвета зависит от площади, которую он занимает.
Например, маленький объект тускло-синего цвета внутри
большого ярко-зелёного приобретает зелёный оттенок (рис. 5.27):
Рис. 5.27. Визуальное изменение цвета
Соприкасаясь, цвета меняют свой вид. Тёмный цвет рядом со
светлым становится ещё темнее, а светлый — ярче (рис. 5.28):
Рис. 5.28. Изменение цвета на границах областей
Анатомия графических форматов
Способ организации информации (в файле или в памяти) называется форматом.
Представление о графических форматах поможет серьёзному дизайнеру получать иллюстрации хорошего качества с небольшим килобайтным весом файла, в котором хранится изображение.
Формат BMP
Это формат не применяется на web-страницах, но поучительно именно с него начать рассмотрение графических форматов.
Пусть в графическом редакторе нарисован маленький флаг
России. Рассмотрим его пикселы в увеличенном виде (рис. 5.29).
Рис. 5.29. Флажок на экране в увеличенном виде
Нарисованный флажок образует таблицу из 12 строк и 10
столбцов. В видеопамяти компьютера картинка хранится как последовательность
этих табличных строк.
Формат GIF
В Интернете популярен формат GIF (Graphic Interchange Format, формат обмена графическими данными).
Само изображение кодируется, как и в формате BMP, по
строкам, но вместо кода цвета указывается номер этого цвета в построенной
палитре. Для четырёх цветов в качестве такого номера достаточно использовать
две двоичные цифры.
Если в картинке использовано более 256 цветов, графический
редактор перед записью картинки в файл заменяет в ней «лишние» цвета близкими
из 256-цветной палитры. Картинка, конечно, записывается с искажением. Но при
использовании формата GIF с 256-цветной палитрой ухудшение качества часто
практически незаметно (рис. 5.38).
Рис. 5.38. Преобразование формата BMP в 256-цветный формат GIF
Формат JPEG
Еще один графический формат очень популярен в Интернете — формат JPEG (файлы с расширением jpg или jpeg).
Сокращение JPEG происходит от названия группы, разработавшей этот формат, — Joint Photographic Experts Group (Объединенная группа экспертов по машинной обработке фотографических изображений).
Файл в формате JPEG содержит 24-битную информацию о цвете
пиксела, но при формировании графического файла используется метод сжатия, при
котором часть цветов просто отбрасывается.
Рис. 5.42. Сравнение размеров файлов GIF- и JPEG-изображений при одинаковом качестве
Даже при очень сильном JPEG-сжатии исходного изображения
сохраняется много цветов картинки, чего нельзя сказать про GIF-файл того же
размера.
Какой формат выбрать
Формат JPEG хорош для больших изображений, а также для фотографий и рисунков с плавными цветовыми переходами.
Для маленьких изображений, а также для картинок с чёткими цветовыми границами и однотонными областями больше подходит формат GIF.
На приведённой иллюстрации изображение в
формате JPEG имеет явные погрешности, а размер его файла в три раза больше, чем
у рисунка в формате GIF:
Рис. 5.45. Для картинок с малым количеством цветов формат GIF явно лучше (пример 2)
Растровая и векторная графика
Растровый рисунок — это просто набор точек (пикселов)
на экране. Этими точками можно нарисовать мышку (рис. 5.46).
Рис. 5.46. Маленькая мышка
Но растровый редактор по-прежнему будет «видеть» на экране
только точки. При увеличении рисунка растровый редактор будет увеличивать не
мышку как объект, а число точек рисунка. Редактор заменяет старые точки большим
количеством новых, подбирая для них цвета, близкие к цветам прежних точек.
Качество, конечно, страдает (рис. 5.47).
Рис. 5.47. Увеличенная растровая мышка
Векторный редактор хранит не точки рисунка, а объекты.
Для него мышка — это объект. Увеличение объекта даже улучшает мелкое
изображение, т. к. можно использовать больше экранных пикселов для
прорисовки деталей (рис. 5.48).
Рис. 5.48. Увеличенная векторная мышка
Как же работает векторный редактор?
В наборе его инструментов те же линии, прямоугольники, эллипсы, что и в растровом редакторе. И приёмы построения этих элементов одинаковы. Но, построив, например, круг, растровый редактор «забывает» математику этой фигуры. Он хранит не круг, а цвета пикселов рабочего поля.
Векторный редактор, напротив, запоминает фигуру как набор
данных для построения: координаты центра, радиус, толщину контура, цвет контура
и цвет внутренней части.
Преимущества векторной графики
1. Преобразования рисунка и его частей (масштабирование, повороты, наклоны) выполняются без искажений.
2. Графический файл в векторном формате по объёму гораздо меньше файла в растровом формате.
3. Рисовать быстрее и проще: рисунок получается конструированием объекта из деталей — других объектов.
4. Любую часть рисунка (объект) в любой момент можно редактировать независимо от других частей (объектов).
5. Векторные редакторы способны прорисовывать детали с большой точностью (до миллиона точек на дюйм — сотые доли микрона).
6. Векторные редакторы быстрее, чем растровые, выполняют редактирующие операции.
Недостатки векторной графики
1. Векторная графика ограничена в живописных средствах: получить изображение, подобное художественным полотнам или фотографиям, в векторном редакторе непросто.
2. Векторная графика «страдает» чрезмерной правильностью форм, линий, заливок. В векторных редакторах есть даже специальные инструменты, «ухудшающие» качество изображения. Работая такими инструментами, можно добиться более реалистичного вида векторных объектов.
Как использовать векторные рисунки для Web
Векторные графические редакторы позволяют экспортировать графику во множество растровых форматов, в том числе в популярные форматы GIF и JPEG.
В векторном редакторе можно рисовать картинку, практически не заботясь о её размерах на web-странице. Необходимое масштабирование выполняется без потерь качества перед экспортом картинки в растровый формат.
Анимированные изображения
Следует очень умеренно использовать анимированные картинки. Ведь движение — сильный раздражитель. Это самый заметный способ выделения элемента на экране.
Проведите такой эксперимент. Попробуйте прочитать текст, рядом с которым беспрерывно в цикле анимируется «зайчик-попрыгайчик» (рис. 5.59). Вы сразу оцените воздействие анимации на ваши глазные рецепторы. Зайчик с периферии вашего внимания упорно скачет в её центр. Сосредоточиться на тексте невозможно. Колбочки и палочки беснуются вместе с зайчиком!
Рис. 5.59. Анимированный зайчик
Анимация не будет мешать восприятию информации, если она:
q не прокручивается в бесконечном цикле;
q запускается и отключается по желанию пользователя
Есть и еще одна причина для отказа от анимации — неразумное «утяжеление» файла (в котором, вместо одного, хранится целый набор изображений). Это существенно при проектировании сайта, когда приходится бороться за каждый килобайт, — лишний «вес» уменьшает приток посетителей.
Оптимизация графики
Уменьшение размера графического файла имеет особое значение в сайтостроении.
Выбирая «сетевой» графический формат, надо остановиться на том, который для данной конкретной картинки даст файл наименьшего размера при приемлемом качестве изображения.
Дело в том, что посещаемость сайта (при прочих равных условиях) тем выше, чем быстрее он просматривается. Пользователь любит быстрое обслуживание и не хочет тратить лишние деньги.
Якоб Нильсен в своей замечательной книге «Веб-дизайн» пишет, что на сайте www.provenedge.com размер страницы сначала ограничивался 40 килобайтами. При этом число пользователей, не дождавшихся загрузки, составляло 25–30%. Когда объем графики был уменьшен, число нетерпеливых снизилось до 7–10%.
Первое, что можно сделать, это уменьшить геометрические размеры изображения. Если вы работаете в векторном графическом редакторе, то эта операция происходит безболезненно — качество масштабированного рисунка практически не меняется. Уменьшив картинку до оптимальных геометрических размеров, можно сохранить её в формате, в котором предусмотрено сжатие.
Замечание
Если для исходной картинки нужно получить уменьшенную копию в формате GIF или JPEG, то сначала обязательно выполните масштабирование и только потом преобразуйте формат, — качество результата будет выше.
В формате JPEG реализовано сжатие с потерями (часть цветов изображения просто отбрасывается).
Формат GIF реализует сжатие без потерь (если в GIF-палитре используются все цвета исходной картинки).
На практике запись картинки и в формате JPEG, и в формате GIF почти всегда приводит к потерям графической информации. Для JPEG потери определяются параметром сжатия, а для GIF — размером палитры, число цветов в которой редко совпадает с числом цветов исходного изображения.
Потери графической информации не всегда означают визуальное ухудшение качества изображения, но позволяют в десятки раз уменьшить размер графического файла. Именно поэтому важно уметь на практике выбрать правильный формат, установив в нём нужный параметр, отвечающий за отношение качество картинки/размер файла.
Оптимизацию можно выполнятьнапример, в редакторе Photoshop.
Картинки как «заплаты»
Посмотрите на рис. 5.62. Замечательная обезьянка,
правда? Но что-то в этой иллюстрации не так. Не вписывается она в страницу,
смотрится как «заплата». Причина в том, что фон, на котором нарисовано
животное, отличается от фона страницы, вступает с ним в противоречие.
Рис. 5.62. Картинка как «заплата»
Что же делать? Есть два противоположных рецепта. Можно отделить картинку от фона страницы, а можно, наоборот, попытаться слить её с ним.
Отделение
Выделим картинку при помощи рамки (рис. 5.63). Теперь
она смотрится гораздо лучше! Именно так поступают художники, когда размещают на
стенах свои шедевры. Они заключают холсты в декоративные рамы.
Рис. 5.63.Отделение от фона рамкой
Используя «строгие» рамки, не увлекайтесь их толщиной, а
то картинки будут напоминать траурные портреты (рис. 5.64).
Рис. 5.64. «Траурная» рамка
Для «толстых» рамок лучше использовать декоративное
обрамление. Оно, конечно, должно соответствовать общему стилю страницы (рис. 5.65).
Рис. 5.65. Декоративная рамка
Тень позволит картинке эффектно «всплыть» над страницей
(рис. 5.66).
Рис. 5.66. Отделение при помощи тени
Соединение
Иллюстрацию можно «подружить» с фоном страницы,
растушевывая её края (рис. 5.67).
Рис. 5.67. Совмещение с фоном при помощи растушевки (смазывания) краев
Кардинальный способ соединения фона картинки с фоном
страницы — их полное совпадение (рис. 5.68). Смотрится великолепно!
Рис. 5.68. Фон картинки совпадает с фоном страницы