Элективный курс «Создание web-сайтов»

Приложение 2

МЕТОДИЧЕСКОЕ ПОСОБИЕ

Компьютерная графика

к элективному курсу «Создание Web-сайтов»

Введение

Графика и компьютерная графика.

Графика – результат визуального представления реального или воображаемого объекта, полученный традиционными методами (рисование, печатание) художественных образов (гравюра, литография).

Традиционная графика – результат визуального представления изображения на двумерной поверхности (бумага, холст).

Компьютерная графика – графика, включающая любые компьютерные данные, предназначенные для отображения на устройстве вывода (экран, принтер, плоттер).

Термином компьютерная графика могут называться:

Изображения на экране
Данные в графических файлах
Изображения из графических файлов перенесенные на бумагу (печать), пленку или иной материал.

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

Файл, содержащий только графические данные, называется графическим файлом.

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

Соглашение (стандарт), определяющее какую графическую и сопутствующую информацию нужно сохранять в файле, как ее разместить там и нужна ли паковка информации и каким методом - называется графическим форматом.

Часто процесс создания изображения разнесен во времени от процесса визуализации изображения.
Растровая и векторная графика.

Все компьютерные изображения делятся на два типа: растровые и векторные.

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

Пиксель – минимальный участок изображения, которому независимым образом можно задать цвет.

Глубина цвета – количество бит для кодирования цвета пиксела.

Качество растрового изображения зависит от разрешающей способности экрана и глубины цвета. Растровые изображения очень чувствительны к масштабированию.

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

Файлы, хранящие векторные изображения, имеют сравнительно небольшой объем, а масштабирование векторных изображений происходит без потери качества, поэтому эти изображения являются оптимальным средством для хранения высокоточных графических объектов (чертежи, схемы и т.д.).

Графический редактор – специальная программа для создания, редактирования и просмотра графических изображений на компьютере.

Пиксели.

Для указания местоположения графического объекта используются математические координаты. Однако поверхность отображения устройства вывода – это реальный физический объект. Следовательно, необходимо помнить о различии между физическими и логическими пикселями.

ФИЗИЧЕСКИЕ ПИКСЕЛИ – реальные точки, отображаемые на устройстве вывода. Это наименьшие физические элементы поверхности отображения, которые можно обрабатывать аппаратным или программным способом. Так принято считать, хотя на практике устройства отображения могут формировать отдельный пиксель из нескольких более мелких элементов.

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

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

ЛОГИЧЕСКИЕ ПИКСЕЛИ – в противоположность физическим, логические пиксели подобны математическим точкам: они имеют местоположение, но не занимают физического пространства. Таким образом, при отображении значений логических пикселей из растровых данных в физические пиксели экрана должны учитываться реальные размер и расположение физических пикселей. Иначе, например, плотный и ярко окрашенный растр при отображении на слишком большой монитор может утратить эти качества, поскольку пиксели окажутся разбросанными по всему экрану.

Пиксельная глубина

Битовая (пиксельная, цветовая) глубина - количество битов для кодирования пиксельных значений. Битовая глубина определяет количество возможных цветов пикселей. Зависимость пиксельной глубины и количества цвета для пикселей определяется формулой:

K=2ⁿ , где n – количество битов для 1 пикселя (пиксельная глубина), K – кол-во цветов.

Пиксельная глубина	Кол-во цветов	Тип изображения
1	2	Черно-белые
2	4	Черно-белые и два оттенка серого
3	8	Черно-белые или цветные
4	16	Цветные
8	256	Палитровые (кол-во цветов 2-256). Градации серого (полутоновые)
15	32768	HighColor (Fullcolor)
16	6556	HighColor (Fullcolor)
24	>16 млн.	TrueColor
32	>4 млрд.	TrueColor

Чем больше количество битов в представлении пикселя, тем больше возможных цветов пикселя.

Бытует мнение, что человеческий глаз способен различать (но не воспринимать одновременно) около 2²⁴ = 16777216 цветов. Фактическое количество цветов, которое может фиксировать человеческий глаз, весьма индивидуально, и, кроме того, зависит от условий освещенности, состояния здоровья и внимания. В любом случае каждый из нас способен различать достаточно много цветов (более нескольких тысяч). Об устройствах, которые способны достичь или даже превысить возможности цветовосприятия человеческого глаза, говорят, что они отображают Ttuecolor. На практике этот термин характеризует устройства, использующие 24 бита на пиксель.

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

Что такое цвет

Цвет представляет собой единство трех сущностей: свет, объект наблюдения, наблюдатель. Человеческий глаз воспринимает цвета в соответствии с длинами волн электромагнитных колебаний, составляющих видимый свет.

Цвет, содержащий полный спектр этих колебаний в равных пропорциях, воспринимается как чистый белый. Отсутствие света воспринимается как черный цвет. Глаз воспринимает цвет как световые волны различной длины, соответствующие красному, зеленому и синему цвету.

Диапазон волн светового излучения от 380 до 770 нона метров. (Длина волны)

Излучения – синусоидные колебания, длина волны – расстояние между двумя соседними вершинами. Максимальная длина волны – красный цвет, минимальная длина волны – синий цвет.

Восприятие цвета зависит от:

поверхности объекта (разные яблоки поглощают и отражают разные волны по разному)
источника света (солнце – за тучу, яблоко - темнее)
эмоционально-психологического состояния человека (чувство голода, стресс и пр.)

Цвет как средство воздействия на подсознание

Путем многочисленных опросов и исследований психологи определили характер воздействия каждого цвета на личность. Цвет - один из основных аспектов восприятия графики. Влияние цвета неосознанно и отличается от влияния текстовой информации; кроме того, оно индивидуально для каждого человека и зачастую может предопределить общее отношение к изображенному объекту. По индивидуальному восприятию цветов и их сочетаний психологи могут с известным приближением к истине определить характер человека и его душевное состояние. Определенное отношение к спектру в каждом человеке заложено с рождения. Каждый стремится к светлому и избегает черного. Поэтому стоит задуматься, чего вы хотите добиться - чтобы от вашей картинки убегали или к ней стремились?

Черный, белый и серый - это нейтральные (ахроматические) цвета, не имеющие цветового оттенка и насыщенности. Белый и черный цвета соответствуют граничным значениям диапазона, причем черный соответствует минимальной интенсивности, а белый – максимальной. Можно считать, что гамма серого цвета точно определяет слои цветового пространства, каждый из которых состоит из точек с равной величиной трех основных цветов, не имеющих насыщенности и различающихся интенсивностью.

Цветовые системы

Весь свет, наблюдаемый в этом мире, можно разделить на два вида: свет от источников излучения и отраженный свет. Соответствующие световые системы аддитивная (суммирующая) и субтрактивная (вычитательная).

Аддитивная система – излучаемые волны от источников света складываются (солнце, лампочка, монитор и пр.)

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

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

(Основной цвет) + (Вторичный) = (Белый цвет)

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

Рисунок 1 RGB - слияние волн

(Цвет) + (Комплиментарный к нему) = (Белый цвет)

Перемешивание трех основных цветов дает Белый цвет

Основные цвета	Вторичные (Комплиментарные) цвета
Красный (Red)	Голубой (Cyan)
Зеленый (Green)	Пурпурный (Magenta)
Синий (Blue)	Желтый (Yellow)

Субтрактивная система – в основе лежат поглощающие цвета.

В этой световой системе работали ранее все художники человечества. Здесь основными считаются голубой, пурпурный (малиновый) и желтый цвета. Все остальные цвета получаются из этих. При смешивании первичных цветов получаются вторичные. Вторичный цвет является для первичного комплиментарным (дополнением) до черного.

(Основной цвет) + (Вторичный) = (Черный цвет)

Для любого цвета существует комплиментарный цвет.

Первичные цвета	Вторичные (Комплиментарные) цвета
Голубой	Красный
Пурпурный	Зеленый
Желтый	Синий

Рисунок 2 CMY - смешивание красок

Схема цветового пространства

Все цветовое пространство можно отображать по-разному. Цветовые модели позволяют создавать цвета в этом пространстве. Для облегчения понимания этого пространства воспользуемся в начале упрощенной схемой его описания. Данная в схеме последовательность расположения цветов соответствует полноценному цветовому кругу для редактора FD Painter. Для Photoshop эта схема реализована в зеркальном отражении.

Рисунок 3 Схема цветового пространства

Вершины на круге - основные и вторичные цвета для световых систем RGB и CMY. Сегмент, соединяющий две соседние или диаметрально противоположные вершины, является градиентом (направление плавного перехода одного цвета в другой). Схема позволяет визуально понять:

Комплиментарность. Любой цвет на окружности имеет свой комплиментарный цвет как диаметрально противоположный.

Следствие1. Увеличение любого цвета в изображении реализуется уменьшением комплиментарного цвета и наоборот.

Следствие2. Для увеличения цвета из аддитивной системы (например, красного) при печати (т.е. при работе в субтрактивной системе) нужно больше добавить соседних по схеме цветов из субтрактивной системы (малинового и желтого) и наоборот.

Слияние цветов в аддитивной и смешивание красок в субтрактивной системах.
Колометрические модели созданные для человека (имеющие компоненту H - тон, величина которого меняется при движении по периметру круга). Начало отсчета и направление изменение тона.

Цветовые модели

Цветовая модель позволяет создавать цвет и работать с ним, применяя свойственный для данной модели набор методов, реализованных в графических пакетах.

Рассмотрим цветовые некоторые модели.

Модель	Полное наименование модели
RGB	Red \ Green \ Blue	Красный \ Зеленый \ Синий
HLS	Hue \ Lightness \ Saturation	Тон \ Освещенность \ Насыщенность
HSB	Hue \ Saturation \ Brightness	Тон \ Насыщенность \ Яркость
LAB	Международный стандарт для аппаратно-независимых цветов.
CYMK	Cyan \ Yellow \ Magenta \ blacK	Бирюзовый \ Желтый \ Пурпурный \ Черный

Модель RGB

Эта модель является аддитивной, например, система создания цветов в мониторе, основанная на физических свойствах естественного солнечного света. В основу положен принцип: любой цвет может выть получен из красного, зеленого и синего. Монитор создает цвета, излучая три электронных луча различной яркости, подсвечивая находящиеся на внутренней стороне электронно-лучевой трубки повторяющиеся группы люминофорных точек (фосфоресцирующий материал), каждая из которых светится одним из трех цветов. Красный цвет экрана означает, что монитор работает в режиме “красного луча”, возбуждающего красные светящиеся элементы люминофора. Таким образом, получается цветной пиксель.

В этой цветовой модели каждый из цветов принимает 256 значений. Поэтому общее количество цветов будет 256х256х256= 16,7 млн.

Примеры создания основных и комплиментарных им цветов.

R	G	B	Результирующий цвет
0	0	0	Черный
255	0	0	Красный
0	255	0	Зеленый
0	0	255	Синий
255	255	0	Желтый
255	0	255	Пурпурный
0	255	255	Голубой
255	255	255	Белый

Модель CYMK

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

Отпечатанная страница не может быть источником света, поэтому модель RGB не применима для печати. В типографии используются краски, которые могут поглощать волны одной длины и отражать волны другой длины.

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

Пример. Создание основных и комплиментарных им цветов (значение в процентах).

C	Y	M	K	Результирующий цвет
0	0	0	0	Цвет бумаги
0	100	100	0	Красный
100	100	0	0	Зеленый
100	0	100	0	Синий
96	96	96	45	Черный

Определять, из каких цветов получится результирующий цвет и какие цвета поглощаются, можно и по схеме цветового пространства. Так, зеленый на бумаге будет путем смешения голубого и желтого - по субтрактивной системе. А если от бумаги исходит зеленый, значит поглощены красный и синий – по аддитивной системе.

Графические форматы.

Типы графических форматов:

растровый
векторный
метафайловый
сцены
анимации

мультимедиа
гибридные
гипертекстовые
гипермедиа
объемные

Растровые файлы

ФОРМАТ GIF (цветов: 2-256, размер изо 64k х 64k)

Растровый формат (Graphics Interchange Formar) разработан фирмой CompuServ Inc. Используется для сохранения нескольких растровых изображений в одном файле, для обмена растровыми данными между платформами и системами. Позволяет содержать хорошие изображения людей, ландшафта, машин и др.. Монохромная графика встречается редко, хотя сканеры позволяют сохранять в этом формате изображения в шкале серого цвета.

Этот формат не разрабатывался для нужд какого-либо программного приложения, однако большинство ПО сканеров, видеоустройств и программ отображения и преобразования поддерживают GIF.

ФОРМАТ TIFF (цвета от 1 до 24 бит, макс размер 2³²-1 пиксель)

Предназначен для хранения и обмена данными, используется в любых операционных системах. Поддерживается большинством программ рисования и работы с изображением, настольными издательскими системами. Является “родным” для графического интерфейса операционной оболочки WINDOWS. Способность к расширению позволяет записывать растровые данные любой пиксельной глубины, делает этот формат идеальным для хранения и обработки информации.

Этот формат имеет репутацию мощного и гибкого формата, но с другой стороны сложного и загадочного. Много случаев, когда такие файлы не читаются. Но это не значит, что они плохие. Просто приложения не предназначено для работы с иной модификацией формата.

Метод сжатия JPEG.

ФОРМАТ WINDIWS BMP (цвета: 1,4,8,16,24 или 32-бит, макс..изо 32k х 32k и 2Гх2Г пиксел)

Позволяет сохранять цветовые параметры устройства вместе с растровыми данными - это программно-независимый растр Microsoft (DIB), а записанная в файл называется растровым форматом BMP. Хороший формат для цветного и черно-белого изображения, прост и иимеет значительное распространение.

Векторные файлы

ФАРМАТ PIC (цветов: 6, макс.размер 64k x 64k)

Разработан фирмой Lotus Picture. Используется как формат обмена данными.

Метафайлы

ФОРМАТ WMF

Для хранения векторных и растровых изображений в памяти, в файле с последующим выводом на устройство вывода. Используется графическими Windows приложениями.

Анимационные файлы

ФОРМАТ FLI (цветов: 64, макс.разм 320х200)

ФОРМАТ FLС (цветов: 256, макс.разм 64k x 64k)

Dos формат, не имеет видео и аудио поддержки, хранит только последовательности неподвижных изображений. Допускает ускоренное воспроизведение анимации.

Для каждого кадра используется своя модификация палитры 256 цветов (если она изменяется от кадра к кадру). Поскольку в каждом кадре могут быть разные палитры, то фактически в файле может цветов более 256.

ФОРМАТ SWF (цветов 16 млн )

Векторый формат. Используется браузерами Netscape и Microsoft Explorer начиная с версий 4.0. Самый крутой формат сжатия. Высокого качества анимация и интерактивная графика для Web.

Графика и анимация для Интернета

Графику в Интернете можно разделить на две большие части: информативную и украшающую. Требование к информативной составляющей - быстрый и удобный доступ, декоративная же графика должна быть ненавязчивой и занимать небольшой объем.

Для информационной графики главным средством представления является возможность предварительного просмотра перед загрузкой. Это всем известные миниатюры с гиперссылками на полномасштабные файлы изображений. Кроме того, очень важно разделить функции текста и картинок. Тексты загружаются на страницу в первую очередь и быстрее и несут на порядок больше информации, чем фотографии, поэтому нужно избегать представления информации в теле рисунков без особой необходимости. Не забывайте о пользователях, отключающих отображение графики в своих браузерах, - ваш сайт должен передавать необходимую информацию в полном объеме, поэтому в параметрах изображения необходимо задавать специальный текст, который будет выводиться на странице в том случае, если рисунок отобразить невозможно. Следует помнить, что общие области и фреймы также замедляют загрузку, и применять их, только если на то есть основания.

Векторная анимированная графика позволяет добавить в информационную часть сайта настоящие мультфильмы, тем самым повысив эмоциональное воздействие на посетителя и сосредоточив его на восприятии нужной информации. Главное достоинство векторной анимации - маленький объем файлов и, соответственно, быстрая загрузка.

Декоративные графические элементы должны лишь дополнять и подчеркивать информационную составляющую сайта, не отвлекая от нее. Например, фон страницы всегда лучше брать однотонный и светлый, так как текст длиннее десяти слов на темном фоне многие пользователи уже не дочитают до конца. Объем файлов, занимаемых украшающей графикой, нужно стремиться минимизировать. Воздержитесь от того, чтобы перегружать web-узел графикой, - узел будет очень долго открываться в браузере, и многие пользователи не дождутся и уйдут навсегда.

Важным элементом страницы является ее фон. При выборе фона необходимо ориентироваться на скорость загрузки страницы в браузере пользователя. Однотонный фон будет загружаться очень быстро, можно также составить фон из маленьких квадратиков или длинных полос во весь экран, в последнем случае можно получить фон с вертикальной полосой с краю. Фон страницы следует делать таким, чтобы файл с его изображением был минимального размера или же отсутствовал вовсе, как для однотонного фона.

Векторная графика может занять достойное место в украшающей составляющей страниц сайта, если она не захватывает слишком большую площадь страницы. Она может незаметно продвигать какую-либо идею, например девиз фирмы, однако это не должно выглядеть навязчиво. Например, если вы разместите крупный рекламный слоган на первой странице, пользователи не успеют устать от мелькания, так как сразу перейдут дальше. Используя фильмы, не забудьте предусмотреть кнопку досрочного прерывания фильма, иначе вы потеряете часть посетителей узла - тех, у кого векторная анимация вообще не поддерживается или кому просто лень смотреть ваш фильм до конца.

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

Вирусы в графических файлах

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

Термин вирус взят по аналогии с биологическими вирусами. Основная цель био-вируса – воспроизведение, но самостоятельно он размножаться не может, т.к. является только фрагментом ДНК или РНК, т.е. он не является тем, что принято считать живым организмом. Из-за неспособности к самовоспроизводству био-вирус заражает некий живой организм, в котором он способен размножаться, что приводит к болезни или смерти организма.

Выполняя зараженную программу, операционная система, сама того не ведая, выполняет и вирусный код, который присоединяется к другим программам. Вирусы заражают те файлы, на инфицирование которых он ориентирован.

Сегодня вирусный код проникает в программы (com, exe, bat), в сценарий командного процессора, в загрузочные сектора жесткого и гибкого дисков, в макросы электронных таблиц и текстовых процессоров.

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

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

Объектно-ориентированные файлы, содержащие данные и код, необходимый для их воспроизведения, также относятся к этой категории. В файлах HTML графические данные не являются мишенью для вирусов, но может быть изменен код в интерпретирующем языке и использованы слабые места в его защите.

Незаражаемость большинства графических файлов не спасает их от разрушения при работе инфицированных программ. Вирус не может использовать графический файл только с графическими данными для самовоспроизводства.

Литература

Н. Петрова «Компьютерная графика и анимация», М., 1996.
С. Н. Коржинский «Настольная книга Web-мастера», М., «КноРус», 2000г.
Н. Угринович «Информатика и информационные технологии», М., АО «Московские учебники», 2001.
А. Мещеряков «Теория компьютерной графики».
Л. Татарникова «Web-конструирование», Томск, 2003.
Интернет – ресурсы:

https://www.delphimaster.ru/books/978594723124/fragment.html
Приложение 3

<предыдущая страница | следующая страница>