ТЕМА 4. Основы Web-графики
План 1. 2. 3. 4. Векторная и растровая графика. Характеристика форматов графических файлов, используемых в Internet. Цвет в Web-дизайне Интерфейс и технология создания простейшей графики в программе Corel. Draw.
Благодаря WWW графика стала самым популярным сервисом Internet, именно ей мы обязаны всему тому многообразию Web-документов, которые присутствуют в Сети. Компьютерная графика является одним из старейших направлений информатики, но только с середины восьмидесятых годов начали действовать официальные группы по стандартизации графических форматов. В результате уже создано десятки различных графических форматов, а если учесть их многочисленные версии и релизы, то это число превышает сотню. В общем случае формат файла - это набор правил, соглашений, стандартов для записи и хранения информации. Любой файловый формат — это специализированный язык со своим специальным словарем, орфографией и правилами пунктуации. Форматы описания графики можно разделить на три основных класса: растровый векторный метафайлы
Векторная и растровая графика. В основе каждого из этих форматов лежит математическая модель, с помощью которой объект отображается на экране монитора. Для растровой (точечной) графики — это массив (матрица) чисел, описывающих цветовые параметры каждой точки, Для векторной графики — это система математических формул, используя которую векторная программа всякий раз пересчитывает все точки контура, исходя из новых значений, Для метафайлов это сочетание двух предыдущих моделей. Векторные изображения имеют тенденцию к компактности в описании и могут быть математически масштабируемые, однако они уступают в смысле потенциального времени визуализации и реализма (качества изображения). Растровые изображения могут быть очень детализированы, однако они очень плохо масштабируются и занимают большие объемы памяти.
Векторная и растровая графика. Растровые форматы Из всего многообразия форм и способов представления визуальной информации, которое находится в обращении в сфере машинной графики, в Сети применяются, главным образом, растровые форматы. Растровая графика подобна мозаике. В этом формате изображения представляются в виде прямоугольной матрицы, которая называется растром или битовой картой, состоящей из элементарных графических элементов (графических точек), которые называются пикселями (от англ. «picture element» — «элемент изображения» ). Линии создаются соединением пикселов, а контур и заполнение формы осуществляется пикселами. Зрительные фильтры человеческого глаза аппроксимируют и сглаживают дискретность цветовой матрицы, которая в сознании человека превращается в целостный графический образ. Растровый формат - это файл, в котором изображение хранится, как набор пикселей. В его основе лежит битовая карта (матрица), на пересечении строк и столбцов которой располагаются элементы изображения — пикселы.
Векторная и растровая графика. Все изображение по вертикали и горизонтали разбивается на достаточно мелкие прямоугольники - так называемые элементы изображения, или пикселы (от английского pixel - picture element). Чем больше пикселей в каждом квадратном дюйме на матрице, тем выше разрешение файла. Мониторы для обработки изображений с диагональю 19 -24 дюйма (профессионального класса), как правило, обеспечивают стандартные экранные разрешения 640 x 480, 800 x 600, 1024 x 768, 1280 x 1024, 1600 x 1200, 1600 x 1280, 1920 x 1440, 1920 x 1600, 2048 x 1536 точек. Почти все видеосистемы современных компьютеров позволяют изменять количество отображаемых на экране пикселей. Основной характеристикой растрового формата является глубина цвета это числовая характеристика качества растрового изображения, которая определяется количеством бит, описывающих одну точку изображения (8 (256 цветов), 16 (65536 цветов) или 24 ( 16 777 216 цветов)). Каждая точка изображения представлена числом.
Векторная и растровая графика. Кроме того, для растрового формата должно быть задано разрешение количества точек на единицу длины (DOTS PER INCH (dpi) (точек на дюйм) единица измерения разрешающей способности устройств ввода-вывода, применяемых для работы с растрированными изображениями. Главным преимуществом растровой формы представления информации является простота исходной концепции: каждый отдельный пиксел изображения представляет самого себя, вне зависимости от его положения и роли, которую он играет в рисунке. Растровые файлы можно разделить на два типа: - предназначенные для вывода на экран; - предназначенные для печати. Растровые форматы, предназначенны исключительно для вывода на экран, имеют только экранное разрешение, то есть один пиксел в файле соответствует одному экранному пикселу. На печать они выводятся также с экранным разрешением.
Векторная и растровая графика. Растровые файлы, предназначенные для допечатной подготовки изданий имеют, подобно большинству векторных форматов, параметр Print Size печатный размер. С ним связано понятие печатного разрешения, которое представляет из себя соотношение количества пикселов на один квадратный дюйм страницы (ppi, pixels per inch или dpi - dots per inch, - термин не совсем верный, но часто употребимый). Печатное разрешение может быть от 130 dpi (для газеты) до 300 dpi (высококачественная печать), больше почти никогда не нужно. Наиболее распространены следующие растровые форматы: BMP (Windows device independent Bitmap) - применяется для хранения растровых изображенией в ОС Windows. TIFF(Tagged Image File Format) - теговый формат файлов изображений. Аппаратно независимый формат. Является лучшим форматом для хранения растровых файлов в издательских системах. GIF (Graphics Interchange Format) - формат графического обмена. JPEG (Joint Photographics Group) - объединенная группа экспертов в области фотографии PNG (Portable Network Graphic) - переносимая сетевая графика. Графические компоненты всемирной Сети в подавляющем большинстве представлены тремя форматами GIF, JPEG, PNG.
Векторная и растровая графика. Объем файла для хранения точечного изображения определяется произведением его площади на разрешение и глубину цвета (если они приведены к единой размерности). Так, для изображения 300 х200 пикселей при 3 байтах на пиксель для RGB размер файла будет 300 х200 х3=180 Кбайт. Программное обеспечение любого сканера может вычислить эту величину и предсказать объем для сохранения изображения. При этом совершенно не важно, что изображено на фотографии: белый снежный пейзаж с одинокой фигуркой вдалеке, или сцена рок-концерта с обилием цвета и форм. Если три параметра одинаковы - размер файла (без сжатия), в обоих случаях будет одинаков.
Векторная и растровая графика. Векторные форматы Эти графические форматы служат для хранения сведений о векторных изображениях, которые представляют собой совокупность геометрических примитивов: линий, овалов, прямоугольников, дуг и др. Это файлы, которые хранят в себе алгоритм построения изображения, т. е. состоят либо из описаний примитивов, либо включают в себя набор инструкций и команд для построения примитивов, либо комбинация обоих способов. Проще говоря, чтобы компьютер нарисовал прямую, нужны координаты двух точек, которые связываются по кратчайшей, для дуги задается радиус и т. д. Таким образом, векторная иллюстрация - это набор геометрических примитивов. Линия - элементарный объект векторной графики. Как и любой объект, линия обладает свойствами: формой (прямая, кривая), толщиной, цветом (сплошная, пунктирная). Замкнутые линии приобретают свойство заполнения. Охватываемое ими пространство может быть заполнено другими объектами (текстуры, карты) или выбранным цветом.
Векторная и растровая графика. В векторной графике объекты создаются путем комбинации различных объектов. По своей сути любое изображение можно разложить на множество простых объектов, как то - контуры, графические примитивы и т. д. Простейший объект состоит из контура (на рисунке изображен красным цветом) и заливки (синий цвет). Преимущество векторной графики заключается в том, что форму, цвет и пространственное положение составляющих ее объектов можно описывать с помощью математических формул. Еще одно преимущество - качественное масштабирование в любую сторону. Увеличение или уменьшение объектов производится увеличением или уменьшением соответствующих коэффициентов в математических формулах. Векторное изображение - изображение, сформированное большим числом отрезков коротких прямых, каждый из которых имеет определенное направление, цвет и координаты точки, из которой он исходит, и точки, в которую входит.
Векторная и растровая графика. В векторном виде хранят информацию системы автоматизированного проектирования, например Auto. CAD, программы, которые создают иллюстративную графику, такие как Corel Draw. Плоттеры обрабатывают изображения только в векторных форматах. Векторный способ кодирования идеально подходит для рисунков, которые легко представить в виде комбинации простейших фигур, например, для технических чертежей. До 2000 года векторные изображения встречались на Web-страницах довольно редко. Сейчас ситуация стремительно меняется в связи с бурным распространением формата Shockwave Flash фирмы Macromedia. Этот богатый формат можно назвать собранием геометрических абстракций. Он специально разрабатывался для использования в Интернете и способен хранить гипертекстовые ссылки, графику, анимацию и пр.
Векторная и растровая графика. Формат векторной графики Shockwave Flash - это мощнейший мультимедийный комплект, позволяющий создавать целые фильмы со звуковым сопровождением, причем, фильмы интерактивные, реагирующие на действия пользователя. Flash-проект способен сделать Web-страницу более привлекательной и стильной, а Flash-баннер - затмить обычные анимированные GIF, тем более, что Flash-клипы можно озвучить. Векторный формат WMF использует графический язык Windows и, можно сказать, является ее родным форматом. Служит для передачи векторов через буфер обмена (Clipboard). Понимается практически всеми программами Windows, так или иначе связанными с векторной графикой (расширение имени файла. WMF). Однако, несмотря на кажущуюся простоту и универсальность, пользоваться форматом WMF стоит только в крайних случаях для передачи "голых" векторов. WMF искажает цвет, не может сохранять ряд параметров, которые могут быть присвоены объектам в различных векторных редакторах, не может содержать растровые объекты, не понимается очень многими программами на Macintosh. Из всех графических программ наиболее корректно создавать WMF-файлы может только Corel. DRAW.
Векторная и растровая графика. Особое место среди программ для работы с векторной графикой занимают шрифтовые редакторы. Одной из разновидностей векторной является трехмерная (3 D) графика. В этих файлах вводится еще одна координата, но при этом получается не изображение, а целая сцена с большим количеством нюансов, и, соответственно, большим объемом вычислений. В трехмерной компьютерной графике для создания сложных рисунков могут использоваться такие элементы как сферы, кубы. Метафайлы могут хранить информацию о растровых и векторных изображениях и о командах визуализации. В качестве примеров метафайлов можно назвать WMF, CGM, EPS. В числе немногих примеров использования метафайлов в Интернете в первую очередь следует назвать формат PDF (Portable Document Format), предложенный и активно продвигаемый фирмой Adobe.
2. Характеристика форматов графических файлов JPEG, GIF, PNG Существует множество форматов файлов растровой графики, и каждый из них предусматривает собственный способ кодирования информации об изображении. Перечислим особенности лишь наиболее распространенных форматов.
Характеристика форматов графических файлов JPEG, GIF, PNG Формат GIF (Graphics Interchange Format – формат графического обмена) — предложен фирмой Compu. Serve в 1987 году в качестве средства обмена растровыми изображениями между платформами и системами и поэтому поддерживается большинством программ, работающих с растровой графикой. Формат можно считать одним из стандартов де-факто для публикации изображений в сети Интернет. Информация об изображении в файле стандарта GIF записывается построчно, то есть представляет собой массив описаний строк высотой в один пиксел. Данный формат оперирует фиксированной, так называемой индексированной палитрой, причем число цветов в этой палитре не превышает 256, т. е. поддерживает изображения, содержащие до 256 цветов (8 -битовая палитра). Палитра - это таблица цветов, которая имеется в графическом файле и содержит все цвета, использованные в изображении.
Характеристика форматов графических файлов JPEG, GIF, PNG Формат GIF (Graphics Interchange Format – формат графического обмена) — предложен фирмой Compu. Serve в 1987 году в качестве средства обмена растровыми изображениями между платформами и системами и поэтому поддерживается большинством программ, работающих с растровой графикой. Информация об изображении в файле стандарта GIF записывается построчно, то есть представляет собой массив описаний строк высотой в один пиксел. Данный формат оперирует фиксированной, так называемой индексированной палитрой, причем число цветов в этой палитре не превышает 256, т. е. поддерживает изображения, содержащие до 256 цветов (8 -битовая палитра). Палитра - это таблица цветов, которая имеется в графическом файле и содержит все цвета, использованные в изображении. Например, если палитра (то есть таблица цветов) содержит только 2 элемента, то в изображении имеется 2 цвета (например, черный и белый либо красный и желтый). При этом для представления цвета каждого пиксела достаточно использовать 1 бит. Если же палитра содержит 256 цветов, для представления цвета пиксела необходимо использовать 8 бит данных.
Характеристика форматов графических файлов JPEG, GIF, PNG Характеристики палитр: Однобайтовая (8 бит) 28 = 256 оттенков Двухбайтовая (16 бит) 216 = 65536 оттенков Трехбайтовая (24 бита) 224 = 16777216 оттенков Сжатие информации реализовано по методу LZW. Название метода образовано по первым буквам имен авторов: Lempel, Ziv, Welch. Это эффективный метод сжатия информации, который позволяет во многих случаях сократить объем графического файла в два и более раз по сравнению с исходным изображением. Достигается это методом смешения сходных оттенков в один. Если, например, в составе рисунка имеется участок, состоящий из нескольких сходных полутонов, к примеру, голубого, светло-голубого и темно-голубого цвета, они будут кодированы одним оттенком — голубым. GIF поддерживает не больше 256 цветов, а это значит, что все изображения, которые мы сохраняем в GIF-формате, явно или неявно уменьшают количество цветов, чтобы уложиться в этот лимит (разные программы с разным успехом). А отсюда вывод - если у Вас красивая фотография с плавными переходами и едва уловимыми оттенками цвета, то после преобразования все будет гораздо хуже - оттенки перестанут быть неуловимыми, и вся фотография приобретет неестественный, нереалистичный вид.
Характеристика форматов графических файлов JPEG, GIF, PNG Формат поддерживает запись изображений с чередованием строк. Английское название этого свойства — interlacing, что иногда переводят как чересстрочная развертка. Он позволяет загружать картинку с сервера в клиентский браузер не целиком, а частями. Процедура считывания файла выглядит следующим образом: сначала на экране отображаются первая, пятая и десятая строки, составляющие изображение. Затем появляется вторая, шестая и одиннадцатая строки и т. д. Таким образом, для пользователя создается иллюзия постепенной загрузки графического элемента: картинка как бы медленно проявляется на странице, что иногда бывает очень полезно при включении в документ изображений большого размера. Психологически зрителю легче дождаться полной прорисовки иллюстрации, чем несколько минут скучать перед пустым экраном. К тому же еще до полной загрузки файла пользователь может оценить приблизительное содержимое картинки и решить, стоит ли ему дожидаться ее полной прорисовки или нет. Еще одно полезное качество этого формата — это поддержка анимированных изображений. Этот формат позволяет сохранять в файле с одним физическим заголовком несколько разных изображений, демонстрируя их на экране последовательно одно за другим, причем с возможностью специфицировать порядок их чередования и временной интервал между сменами кадра.
Характеристика форматов графических файлов JPEG, GIF, PNG Формат имеет уникальную особенность, которая называется transparency (прозрачность) и подразумевает создание для изображения прозрачного фона методом сохранения вместе с файлом так называемого альфа-канала, представляющего собой маску прозрачности рисунка. Цвета, помеченные в альфа-канале как прозрачные, станут невидимы в браузерах и большинстве других программ, предназначенных для просмотра изображений. Эта функция необходима, например, при размещении картинок неправильной геометрической формы на странице со сложным фоновым рисунком, когда корректно подогнать части изображений друг к другу не представляется возможным. Формат позволяет работать с областями прозрачности, что позволяет создавать изображения непрямоугольной формы.
Характеристика форматов графических файлов JPEG, GIF, PNG Таким образом, формат GIF: ü Поддерживает не более 256 цветов (меньше можно и часто нужно); ü Использует 8 -ми битную палитру цветов; ü Использует сжатие без потери информации по методу LZW (который подобен применяемому в архиваторе PKZIP, и, следовательно, GIF-файлы практически не сжимаются); ü Поддерживает чересстрочную развертку; ü Является поточным форматом, т. е. показ картинки начинается во время перекачки; ü Позволяет назначить одному из цветов в палитре атрибут прозрачный, что применяется при создании так называемых прозрачных GIFов; ü Имеет возможность сохранения в одном файле нескольких изображений, что находит свое применение при изготовлении анимированных GIFов; ü Поддерживает возможность вставки в файл управляющих блоков, которые позволяют вставлять комментарии в файл (например, об авторских правах), осуществлять задержку между показами изображений и т. д.
Характеристика форматов графических файлов JPEG, GIF, PNG Правила использования GIF формата: 1. Формат GIF используется в документах HTML только для отображения так называемой бизнес-графики: диаграмм, логотипов, кнопок, разделительных линий, других элементов оформления страницы. Для размещения на web-сайте фотографий, репродукций картин и изображений с большим количеством цветов и цветовых переходов необходимо использовать стандарт JPEG. В упрощенном виде данный закон web-мастерства можно сформулировать так: если изображение рисованное, его следует представлять в стандарте GIF, во всех остальных случаях лучше воспользоваться JPEG. 2. Подготавливая рисунок для сохранения его в формате GIF, необходимо избегать следующих художественных приемов: градиентных заливок, размытий, постепенных цветовых переходов с множеством оттенков, а также графических фильтров, обеспечивающих неравномерное смешение нескольких цветов на одном участке изображения, например, эффектов изменения интенсивности освещения. Это правило продиктовано тем, что алгоритм замещения схожих оттенков одним в формате GIF далеко не всегда работает корректно. Правильнее было бы, наверное, сказать работает некорректно почти всегда.
Характеристика форматов графических файлов JPEG, GIF, PNG Поэтому участки со множеством различных оттенков на небольшом физическом пространстве рисунка после сохранения изображения в индексированной палитре будут выглядеть смазанными и грязными. Этого можно избежать, применяя в своей иллюстрации по возможности однотонные и контрастные цвета. Пейзажные многоцветные фотографии с плавными цветовыми переходами, игрой света и тени потеряют большую часть своей привлекательности и приобретут значительные искажения при сохранении в этом формате.
Характеристика форматов графических файлов JPEG, GIF, PNG Формат JPEG Развитие технической базы машинной графики, бурный прогресс средств мультимедиа, автоматизация допечатной подготовки цветных изданий и некоторые другие причины вызвали быстрый рост размеров графических файлов. Счет идет на мегабайты. Профессиональные дизайнеры и художники оперируют с изображениями размером в сотни мегабайт, рядовые пользователи обмениваются графическими файлами объемом в несколько десятков мегабайт. Например, снимок экрана (screenshot), занимает 5 Мбайт. Для поиска лучшего способа записи больших объемов графической информации при международном комитете по стандартизации (750) была создана исследовательская группа Joint Photographic Experts Group (JPEG, объединенная экспертная группа по фотографии). Работа группы завершилась предложениями по созданию файлового формата с высокой степенью сжатия данных. Свое название формат унаследовал от наименования группы разработчиков. В отличие от формата GIF формат JPEG поддерживает глубину цвета в 24 бита. Это значит, что он способен отображать более шестнадцати миллионов цветов и оттенков, что сравнимо с разрешающей способностью нетренированного человеческого глаза.
Характеристика форматов графических файлов JPEG, GIF, PNG Но есть одна особенность формата JPEG, которую нельзя занести в его актив. Он не использует цветовые палитры, а записывает любой рисунок с 24 -разрядной глубиной цвета. Это расширяет изобразительные способности формата, но усложняет контроль сохранения соответствия цветов. Формат JPEG существенно отличается от других графических форматов тем, что он поддерживает сжатие информации “с потерями” качества, кодирующего не идентичные элементы, как алгоритм LZW, а межпиксельные интервалы. Этот подход позволил добиться высокой степени сжатия без заметных искажений и существенной потери качества. Алгоритм сжатия находит и удаляет ту часть графических данных, которая не оказывает существенного влияния на восприятие реального изображения. Качество сжатого изображения зависит от преобладающих в рисунке или фотографии геометрических элементов. Сжатие не влечет критических последствий для областей с однородной или плавной заливкой, фоновых элементов, у которых отсутствуют резкие границы и скачки цвета. И наоборот, четкие контуры, линии, углы, шрифты с засечками, резкие переходы цвета или тона могут в результате сжатия смазываться или просмотре создавать впечатление “вибрации”. На сегодня этот алгоритм является одним из самых эффективных (коэффициент сжатия достигает 1: 100), однако он не очень хорошо обрабатывает изображения с малым количеством цветов и резкими границами.
Характеристика форматов графических файлов JPEG, GIF, PNG Алгоритм сжатия для этого формата позволяет записать изображение в гораздо более компактной форме, нежели при сохранении в формате GIF. Но за это приходится платить немалую цену. Сильное сжатие способно внести в картинку недопустимые искажения. Каждое сохранение файла даже с небольшой степенью сжатия вносит в картинку свою толику искажений. Многократное повторение этой операции способно привести к заметной деградации изображения. Из всего сказанного можно сделать вполне очевидное заключение: JPEG оптимален для передачи фотографических изображений, а также картинок с большим количеством полутонов и цветовых переходов. Очевидно также, что чем выше степень компрессии такого изображения, тем ниже его качество. Последние версии формата разрешают сохранение и передачу по сети графических файлов в чересстрочном виде. Если рисунок в этом формате является частью гипертекстовой страницы, то его распаковку выполняет программа просмотра. Эта трудоемкая операция способна замедлить вывод на экран страницы, насыщенной графикой. GIF-формат удобен при работе с рисованными картинками. GIF-формат применяется для создания анимации и изображений с прозрачным фоном на Web-странице. Если графическое изображение содержит текст, сохраняйте его как GIF.
Характеристика форматов графических файлов JPEG, GIF, PNG Таким образом формат JPEG: 1. Позволяет сохранять полноцветные изображения с количеством цветов 16, 7 млн. цветов (или 24 bpp), причем, если в рисунке меньше цветов, то перед сохранением файла он все равно преобразуется в полноцветное изображение; 2. Использует сжатие с потерями информации, за счет чего достигает высокой степеней сжатия файлов; 3. Поддерживает прогрессивную развертку, т. е. изображение появляется вначале с плохим качеством, и в процессе загрузки постепенно улучшается. При создании иллюстрации в формате JPEG, необходимо помнить следующее правила: 1. Рекомендуется избегать использования больших участков, заполненных одним цветом, во избежание появления на изображении постороннего цветового шума и грязи. Несоблюдение этого правила может повлечь за собой ряд неприятных последствий: например, картинка в формате JPEG, содержащая достаточно большое пространство, заполненное одним цветом, будет выглядеть на экране компьютера грязно и неопрятно, фон сохраненного в JPEG логотипа, подогнанный под фоновый цвет html -документа, поплывет при изменении свойств экранной палитры.
Характеристика форматов графических файлов JPEG, GIF, PNG 2. Следует учитывать, что сжатию с наименьшей потерей качества поддаются изображения, сохраненные с высоким разрешением, от 150 до 300 dpi. 3. В процессе обработки иллюстраций лучше всего сохранять картинку в формате TIFF и переводить в JPEG лишь готовый результат, поскольку каждое промежуточное сохранение файла JPEG на диск приводит к удалению второстепенной информации и ухудшению качества рисунка. 4. Основное предназначение формате JPEG - хранение изображений фотографического качества. В большинстве программ, допускающих преобразование изображения в этот формат, степень сжатия допускает настройку. Предлагается шкала с плавным или дискретным переходом от высокого качества и слабого сжатия к противоположной точке, соответствующей низкому качеству и сильному сжатию. Проблема заключается в том, чтобы добиться компромисса между высокой степенью сжатия и приемлемым качеством. Обычно это достигается в результате экспериментов. Следует начинать со средних значений коэффициента сжатия и внимательно оценивать изображение, особенно его критичные области.
Характеристика форматов графических файлов JPEG, GIF, PNG Для оптимизации изображений нужен графический пакет или утилита, которые позволяют регулировать степень сжатия изображения. К сожалению, Photo. Shop в базовой конфигурации не позволяет свободно регулировать степень сжатия (он предлагает несколько фиксированных значений). Для оптимизации графики лучше воспользоваться программами типа Photo. Paint или Paint. Shop. Pro. В этих программах возможно регулирование степени сжатия либо заданием процента потерь, либо заданием значения качества от 0 до 255. Предлагается шкала с плавным или дискретным переходом от высокого качества и слабого сжатия к противоположной точке, соответствующей низкому качеству и сильному сжатию. Проблема заключается в том, чтобы добиться компромисса между высокой степенью сжатия и приемлемым качеством. Основным назначением графики JPEG является возможность создавать и обрабатывать фотореалистические изображения. Можно получать живописные эффекты, например, туман или дымку, добиваться тончайшей нюансировки цвета, создавать перспективную глубину, нерезкость, размытость, акварельность и т. д. JPEG не очень подходит для рисунков, содержащих прозрачные участки, мелкие детали или текст. Использование этого формата в полиграфии не рекомендуется.
Характеристика форматов графических файлов JPEG, GIF, PNG Формат PNG Во второй половине девяностых годов была создана инициативная группа программистов и исследователей, которую возглавил американский специалист по электронным технологиям Том Боутелл (Thomas Bowtell). Перед инициативной группой стояла нелегкая задача: разработать стандарт, который не только включал бы в себя все лучшие качества GIF, нo и превосходил бы его по всем характеристикам, оставаясь при этом совершенно бесплатным для пользователей. Основной областью применения данного формата должен был стать Интернет. Такой стандарт был создан и получил название Portable Network Graphics — PNG, хотя многие пользователи Всемирной сети придумали этой аббревиатуре иную расшифровку: Picture is Not GIF. Формат PNG (Portable Network Graphics) — это растровый формат, который разработан как преемник формата GIF, не защищен патентами, не требует лицензирования и финансовых отчислений. Палитра PNG не ограничивается 256 цветами, данный формат позволяет создавать изображения с глубиной цвета до 48 бит, имеет эффективный алгоритм сжатия данных “без потерь”. Вместе с графической информацией в формате PNG можно сохранить метаданные или информацию об индексировании изображения. Эти данные используются поисковыми машинами, что значительно ускоряет и облегчает поиск файлов PNG в Интернет.
Характеристика форматов графических файлов JPEG, GIF, PNG, как и GIF, поддерживает interlacing (чересстрочность), но в отличие от последнего не только по горизонтали, но и по вертикали. Поддерживается чересстрочный режим вывода по методу Adam 7. Метод назван по имени его изобретателя Адама Костелло, а цифра семь указывает на число проходов, за которые изображение полностью выводится на экран. По сравнению с чересстрочной схемой формата GIF, метод Adam 7 значительно ускоряет визуализацию растровых изображений. Он позволяет распознать транслируемую картинку после получения примерно трети графической информации, что значительно превосходит показатели формата GIF, которые равны примерно пятидесяти процентам. Также были внесены изменения в режим прозрачности графики: PNG поддерживает альфа-канал, но состоит он не из одного уровня, как альфаканал файлов GIF, а из 254 уровней для каждого элемента изображения, с диапазоном прозрачности от 0 до 99 %. Благодаря этому дизайнер получил возможность создавать картинки с переменной прозрачностью. Например, логотипы, фон которых плавно сливается с фоновым цветом html-документа, каким бы тот ни был. Помимо альфа-канала изображения PNG содержат так называемый блок описания гамма-коррекции.
Характеристика форматов графических файлов JPEG, GIF, PNG Под переменной гамма в данном случае подразумевается некая величина, выражающая зависимость яркости свечения каждой точки экрана пользователя от напряжения на электродах кинескопа, которое берется из файлов управления видеоподсистемой компьютера. Таким образом, при открытии изображения, созданного с помощью IBM-совместимой машины, на компьютере другого производителя, например на Apple Macintosh, в яркость цветопередачи вводится соответствующая поправка, и картинка отображается совершенно идентично на разных типах оборудования. Этим стандарт PNG еще более приблизился к основной идее Интернет - единообразию отображения web-страниц на компьютерах от различных производителей. Формат PNG выигрывает у GIF почти по всем показателям. Исключением является работа с анимированными изображениями, которая не предусмотрена в текущей версии формата. Фирма Macromedia, разработчик такой набирающей популярность программы, как Fireworks, сделала формат PNG внутренним форматом этого мощного редактора.
Советы по выбору графического формата На вопрос: “Какой формат выбрать? ” — трудно дать исчерпывающий ответ, т. к. любая развернутая рекомендация, претендующая на полноту и непротиворечивость, может быть опровергнута специально подобранным контрпримером. Поэтому рассмотрим лишь предельные случаи, когда выбор оптимального способа хранения диктуется не вкусами или пристрастиями, а объективными причинами: 1. Если требуется сохранить цветовую гамму пейзажной фотографии с плавными переходами красок, тонкими цветовыми нюансами, то выбор формата JPEG становится единственно возможным. Только этот формат способен обеспечить предельное сжатие рисунка в тех случаях, когда размеры файла важнее качества изображения. 2. Анимированное изображение должно быть записано в формате GIF, если только речь не идет о сложных динамических эффектах, для получения которых следует воспользоваться инструментарием языка Dynamic HTML или возможностями Flash-технологии. 3. Навигационные кнопки обычно выполняются в стиле плакатной графики. Это значит, что в их дизайне прямые линии преобладают над кривыми, зоны сплошной заливки — над цветовыми градиентами, ограниченная цветовая палитра — над красочностью полноцветных цветовых моделей. Для таких рисунков хорошим выбором будут форматы PNG или GIF.
Советы по выбору графического формата 4. Несмотря на то, что мы сохраняем изображения в GIF-файле с поддержкой 256 цветов или в JPG-файле с 16, 7 млн. цветов, работать с изображением нужно в каком-нибудь промежуточном формате, который позволяет сохранять картинку без искажений и без потери глубины цвета (например, TIFF и внутренние форматы редакторов типа PSD). Дело в том, что в процессе работы Вам понадобится многократно изменять или искажать изображение, что, в конце концов, приводит к многократной перезаписи файла. Многократная запись в формате GIF приведет к тому, что потеряются оттенки изображения, а в формате JPG - каждая новая перезапись файла будет вносить новые искажения, и через некоторое время фотография будет выглядеть ужасно. Поэтому всю работу по обработке графики делайте в промежуточном формате (и не смущайтесь огромными размерами файла) и только на самом последнем этапе преобразуйте изображение в нужный формат (часто - одновременно с оптимизацией размера файла).
3. Цвет в Web-дизайне Для того, чтобы увидеть свет, нужны две вещи: • источник света, т. е свет + освещенный им объект • приемник света ( то есть излучения) – глаз. С физической точки зрения свет является набором электромагнитных волн определенных частот, различаемых человеческим глазом. Весь видимый излучения можно разделить на семь участков, каждому из которых соответствует свой цвет. Все вместе они образуют так называемый спектр, который можно наблюдать в виде радуги. Тела, отражающие и поглощающие различные цветовые лучи в равной мере, бывают белые, серые и черные и называются ахроматические. Все прочие цветные предметы (кроме белых, серых и черных) по разному отражают различный свет. Так красные предметы много отражают красных лучей и под красным освещением выглядят очень яркими, а под зеленным – очень темными, почти черными. Поэтому тела, отражающие и поглощающие различные цветовые лучи поразному называются хроматическими. При искусственном освещении белые, серые и зеленные цвета предметов желтеют: синие сильно темнеют; фиолетовые темнеют и краснеют; тени предметов резко очерчены; предметы находящиеся в теми, плохо различимы по цвету.
Начала Web-дизайна Почему мы видим свет? Для того, чтобы «увидеть» предмет, необходимы две вещи: • Источник света (свет + освещенный им объект); • Приемник света (глаз)
Начала Web-дизайна Белый свет (вспоминаем физику) Каждый Охотник Желает Знать Где Сидит Фазан Белый свет является сложным светом, состоящим из лучей различной цветности: красного, оранжевого, желтого, зеленого, голубого, синего, фиолетового – такое разложение называется спектром. Как Однажды Жак Звонарь Городской Сломал Фонарь
Начала Web-дизайна Если белый свет падает на белый предмет, то все составляющие белого света отражаются от него, и мы видим белый цвет предмета. Если белый свет падает на зеленый предмет, то все составляющие света поглощаются поверхностью предмета, и лишь зеленая составляющая отражается, в результате чего мы видим зеленую окраску предмета. Аналогично происходит и с другими цветами: красным, синим, зеленым и т. п. Если свет падает на поверхность черного цвета, то поглощаются все составляющие спектра, и мы видим черный предмет.
Начала Web-дизайна В компьютерном дизайне различают две основные цветовые палитры (цветовые модели). Цветовая модель – это способ указания цвета при его выводе на экран или печать. Палитра RGB – это цветовая палитра, которая используется для описания реальных цветов и для их восприятия на мониторе компьютера. Палитра CMYK – используется при создании изображений, которые вы видите на бумаге, например в полиграфии. Когда солнечный свет падает на какой либо предмет, часть цветов поглощается, а часть отражается. Отраженный свет попадает в глаз и образует изображение объекта. Аналогичным образом «работают» краски на листе бумаги. Палитра CMYK содержит противоположные RGB цвета (Cyan - синий, Magenta - сиреневый, Yellow - желтый) и черный (blac. K) цвет. Палитра RGB (RED – красны, GREEN – зеленный, BLUE – голубой) названа по названиям трех базовых цветов, используемых в ней для образования всех прочих. Цветовую палитру RGB обычно иллюстрируют картинкой в виде трех пересекающихся кружков. В центре пересечения эти три цвета в сумме дают белый цвет. Попарно пересечение смежных кружков дает дополнительные цвета: Y - желтый (Yellow); C – голубой (Cyan); M – пурпурный (Magenta).
Начала Web-дизайна Каждый из трех цветовых компонентов RGB может принимать одно их 256 значений – от максимальной интенсивности (255, 255 – белый) до нулевой интенсивности (0, 0, 0), т. е. Абсолютно любой цвет и оттенок цвета в различных пропорциях. У каждого цвета есть три основных свойства: цветовой тон, насыщенность и яркость. Цветовой тон (Нue) - определяет качество цвета и его название: красный, зеленый, оранжевый, фиолетовый и т. д. Насыщенность - отражает количественный аспект: от белого, насыщенность которого равна нулю, через более густые пастельные оттенки до полностью насыщенного, например багряно-красного: Яркость - определяется амплитудой световых волн. В зависимости от этого цвет воспринимается нашим глазом с различной степенью интенсивности. Темные оттенки менее яркие, поскольку они ближе к черному. Светлые оттенки содержат больше белого, поэтому являются более яркими.
Начала Web-дизайна Цветовая модель RGB (Red – красный, Green – зеленый, Blue – синий). Цветовую модель RGB обычно иллюстрируют картинкой в виде трех пересекающихся кружков. В центре пересечения эти три цвета в сумме дают белый цвет. Попарное пересечение смежных кружков дает дополнительные цвета: Y - желтый (Yellow); C - голубой (Cyan); M – пурпурный (Magenta).
Начала Web-дизайна R Как получить нужный цвет из красного, зеленого и синего? G B = 255 + 255 R G B = 255 + 0 Каждый из трех цветовых компонентов RGB может принимать одно из 256 значений – от максимальной интенсивности (255, 255 – белый) до нулевой интенсивности (000, 000 – черный). Т. е. абсолютно любой цвет и оттенок цвета мы можем получить сочетанием красного, зеленого и синего цветов в различных пропорциях R G B = 0 + 0 R G B = 45 + 181 + 45
Начала Web-дизайна Подбор цвета в графическом редакторе Любой графический редактор позволяет определить нужный вам цвет как «на глаз» , так и задав его в формате RGB в десятичной или в шестнадцатеричной системе счисления. = (255, 255) = (255, 0) = (221, 221) = (0, 0, 0) = (240, 118, 125) = (0, 153, 0) Закрыть справку
Начала Web-дизайна Тон (hue) — одна из точек цветового круга, максимально яркая и насыщенная. Насыщенность (saturation) — соотношение основного цвета и такого же по яркости серого. Яркость (value) — общая яркость цвета (крайние позиции — черный и максимально яркий тоновый).
Начала Web-дизайна Незаменимым помощником в создании необычных и красивых сочетаний различных цветов является цветовой круг - это фигура, которая получена, если замкнуть радугу в круг, на соединении красного и фиолетового цветов. Цветовой круг применяется для образования гармоничных сочетаний из двух, трех, четырех цветовых тонов. Цветовой круг помогает решать проблему, как сделать комбинацию окрасок в виде приятного сочетания.
Начала Web-дизайна
Начала Web-дизайна Сочетаемость цветов на Webстранице Дизайн сайта www. ideo. com держится на контрасте последовательно синего обрамления с яркими, разнообразными по цвету вкраплениями фотографий.
Начала Web-дизайна Цветовое решение сайта http: //www. symbol. ru/dk /articles/www. versaware. com включает три основных тона, образующих строгую иерархию по яркости/насыщенности и, при всей внешней простоте дизайна, создающих впечатление уравновешенности и гармонии.
Начала Web-дизайна Текст и фон Пример сбалансированного цветового дизайна - сайт http: //www. symbol. ru/dk/ articles/www. chess. ibm. com. Его светлый, но притом достаточно насыщенный фоновый цвет (в шестнадцатеричной записи #CCCC 99) выразителен сам по себе и не требует поддержки со стороны текста, для которого выбран слегка смягченный черный цвет (#333333). Для ссылок использован контрастный, но равным образом смягченный синий (#0033 FF). Остальные графические элементы поддерживают эту разнообразную, но лишенную пестроты цветовую гамму.
Начала Web-дизайна Текст и фон контрастируют по тону и яркости (http: //www. symbol. ru/dk/ articles/www. verso. com)
Начала Web-дизайна Отказ от тонового компонента в цвете текста и фона компенсируется насыщенным цветом ссылок и логотипа (http: //www. symbol. ru/dk/ articles/www. bdaweb. com)
Начала Web-дизайна Дизайн и назначение Web-сайта Дизайн сайта новостей www. ntvru. com
Начала Web-дизайна Официальный сайт Санкт-Петербургского Государственного Университета www. spbu. ru
Начала Web-дизайна Сайт туристической компании www. insar. com
Начала Web-дизайна Сайты детской тематики www. deti. ru, www. child. zp. ua: 10007, www. solnyshko. ee/
