Компьютерная графика и web-дизайн

УДК 342.9(075.32)
ББК 67.401я723
Н50

Рецензенты:
доктор технических наук, профессор кафедры «Информатика
и программное обеспечение вычислительных систем» федерального
государственного автономного образовательного учреждения высшего
профессионального образования «Национальный исследовательский
университет «МИЭТ» О.И. Лисов;
кандидат технических наук, доцент Института государственного
управления, права и инновационных технологий А.В. Барышев

Немцова Т.И., Казанкова Т.В., Шнякин А.В.
Н50
Компьютерная графика и webдизайн: учебное пособие / Т.И. Немцо-
ва, Т.В. Казанкова, А.В. Шнякин / под ред. Л.Г. Гагариной. — М. :
ИД «ФОРУМ» : ИНФРАМ, 2014. — 400 с. — (Профессиональное обра-
зование).

ISBN 9785819905937 (ИД «ФОРУМ»)
ISBN 9785160098173 (ИНФРАМ)

Учебное пособие «Компьютерная графика и webдизайн» посвящено ра-
боте с компьютерной графикой, включая создание анимации, а также осно-
вам Webдизайна. Книга знакомит с работой в следующих программах:
Adobe Photoshop CS5, Adobe Flash CS 5, а также создание webстраниц с по-
мощью программы Блокнот.
Предложен теоретический и практический материал. В теоретической
части рассматриваются различные аспекты компьютерного дизайна и со-
временные подходы к созданию webстраниц. В практической части описы-
ваются основные приемы работы в изучаемой программной среде и задания
с подробными инструкциями по выполнению. Компактдиск, прилагаемый
к книге, содержит материалы, иллюстрирующие теоретическую часть учеб-
ника, и материалы, необходимые для выполнения практических заданий.
Пособие предназначено для студентов и школьников, изучающих дис-
циплину «Информатика», преподавателей, слушателей курсов повышения
квалификации, а также для широкого круга пользователей персональных
компьютеров, самостоятельно изучающих программные продукты.

УДК 342.9(075.32)
ББК 67.401я723

ISBN 9785819905937 (ИД «ФОРУМ»)
ISBN 9785160098173 (ИНФРАМ)

© Немцова Т.И., Казанкова Т.В.,
Шнякин А.В., 2014
© ИД «ФОРУМ», 2014

Предисловие

Учебное пособие «Компьютерная графика и webдизайн» отража-
ет технологию работы в наиболее распространенных на сегодняшний
день программных продуктах.
Книга предназначена для тех, кто хочет получить навыки работы
с компьютерной графикой, включая создание анимации, а также по-
знакомиться с основами webдизайна.
Цель учебного пособия — научить:
• основным понятиям компьютерной графики, а также основам
построения композиции и подбора цвета;
• создавать растровые изображения и проводить коррекцию изо-
бражений средствами программы Adobe Photoshop CS5;
• создавать webсайты, используя текстовый редактор Блокнот,
учитывая современные требования в области webдизайна;
• разрабатывать анимацию средствами программы Adobe Flash
CS5.
В данном пособии возможности программных продуктов вы ос-
ваиваете, сочетая изучение теоретического материала с практически-
ми заданиями, что является наиболее эффективным способом изуче-
ния нового материала.
Материал пособия разбит на четыре главы. Первая глава посвя-
щена основам работы в программе. Во второй главе рассматриваются
профессиональные приемы коррекции фотографий в программе
Adobe Photoshop CS5. Третья глава посвящена разработке webсайтов.
Четвертая глава знакомит с принципами создания анимации в про-
грамме Adobe Flash CS5. Все главы книги состоят из занятий, которые
необходимо выполнять последовательно, не пропуская предыдущие.
Каждое последующее занятие раскрывает дополнительные возмож-
ности изучаемых программных продуктов, основываясь на знаниях,

полученных при изучении материала предыдущих занятий. Целью
любого занятия является постепенное, шаг за шагом, освоение техно-
логии работы в изучаемой программной среде.
Каждое занятие пособия состоит из теоретической и практиче-
ской частей. В теоретической части излагаются сведения, необходи-
мые для получения практических навыков в программной среде.
Практическая часть делится на два раздела: основные приемы работы
и задания.
Раздел «Основные приемы работы» представляет собой краткую
справку, в которой описывается выполнение тех команд, которые
нужно освоить в данном занятии.
В разделе «Задания» подробно описывается технология работы
для достижения поставленной в задании цели. При возникновении
вопросов в процессе выполнения задания рекомендуется вновь обра-
щаться к разделу «Основные приемы работы».
В конце занятия даются контрольные вопросы для закрепления
материала.
Компактдиск, прилагаемый к книге, содержит иллюстрации, до-
полняющие теоретическую часть пособия. Также на диске располага-
ется материал, необходимый для выполнения практических заданий.
Методика, которая положена в основу изложения материала, по-
зволяет существенно ускорить процесс освоения программной среды,
достаточно быстро сформировать целостное представление о техно-
логии работы и ее возможностях для решения профессиональных за-
дач. Выполнив все задания пособия, вы приобретете устойчивые на-
выки работы в изучаемой программной среде.
Книга рекомендуется в качестве пособия по курсу «Информати-
ка» для средних и высших учебных заведений. Она также может ис-
пользоваться как самоучитель, с помощью которого за короткое вре-
мя вы самостоятельно освоите актуальные компьютерные техноло-
гии, поймете, где и как их применять в своей деятельности.
Данное пособие является результатом многолетней методической
и преподавательской работы в Центре компьютерного обучения Мос-
ковского института электронной техники (WWW.ckomiet.ru).

4
Предисловие

Глава 1
РАСТРОВАЯ ГРАФИКА. ADOBE PHOTOSHOP,
ЧАСТЬ 1

Фирма Adobe Systems Incorporated является лидером на рынке
программного обеспечения для настольных издательских систем.
Особое место среди продуктов фирмы занимает программа Photoshop.
Эту программу ежедневно используют в своей работе и дизайнеры, и
фотографы, и специалисты по рекламе, и работники сети Интернет.
Сфера применения программы столь же широка, как и ее распростра-
нение.
Глава 1 посвящена изучению основных возможностей и задач
программы Photoshop. Рассматриваются все необходимые для работы
инструменты — вы научитесь выделять изображение, работать со
слоями, освоите технику рисования в этой программе. Большое вни-
мание уделено общим вопросам компьютерной графики. В теорети-
ческой части введены определения понятий, которые должен знать
каждый работающий в области компьютерного дизайна.
В практической части даны не только советы по работе с графи-
кой, но также приведены подробные объяснения выполнения раз-
личных операций по созданию и обработке изображений.
Разделы «Основные приемы работы» могут быть использованы
как справочное пособие.
Изучив эту главу, вы научитесь:
• проводить трансформацию изображения (изменять размер, по-
ворачивать, обрезать);
• работать с фрагментами изображения (выделять, трансформи-
ровать);

• создавать изображение с помощью инструментов рисования и
заливки;
• применять эффекты к слоям;
• работать с текстом в растровом изображении;
• использовать векторные возможности программы Photoshop.

1.1. ЗАНЯТИЕ 1
Понятие компьютерной графики

Цель занятия: 1) познакомиться с видами и особенностями ком-
пьютерной графики; 2) освоить основные приемы работы в програм-
ме Photoshop.

ТЕОРЕТИЧЕСКАЯ ЧАСТЬ. Виды компьютерной графики.
Размер и разрешение растровых изображений.
Интерфейс программы Adobe Photoshop CS5

1. Виды компьютерной графики

Компьютерная графика — раздел информатики, который изучает
средства и способы создания и обработки графических изображений
при помощи компьютерной техники. Различают два основных вида
компьютерной графики. Это растровая графика и векторная графика.
Отдельно стоят фрактальный тип представления данных и трехмер-
ная графика. Все виды графики отличаются принципами формирова-
ния изображения при отображении на экране монитора или при пе-
чати на бумаге.
Растровая графика. Растровое изображение — это прямоугольная
(растровая) сетка пикселей на компьютерном мониторе, бумаге и
других отображающих устройствах и материалах.
Пиксель (англ. pixel, сокр. от англ. PICture'S ELement, элемент изо-
бражения) — это мельчайшая единица цифрового изображения в рас-
тровой графике. Он представляет собой неделимый объект прямо-
угольной (обычно квадратной) формы, обладающий определенным
цветом. Любое растровое компьютерное изображение состоит из пик-
селей, расположенных по строкам и столбцам. При увеличении изо-
бражения видны ряды пикселей.

6
Глава 1. Растровая графика. Adobe Photoshop, часть 1

Максимальная детализация растрового изображения задается при
его создании и не может быть увеличена. Если увеличивается мас-
штаб изображения, пиксели превращаются в крупные зерна и напо-
минают мозаику. Никаких дополнительных деталей при увеличении
растрового изображения рассмотреть не удается. От количества пик-
селей зависит детальность изображения. Чем больше количество пик-
селей и чем меньше их размеры, тем лучше выглядит изображение.
Пиксели, сливаясь на расстоянии, создают ощущение цветовых пере-
ходов.
Достоинства растровой графики:
• можно воспроизвести любой рисунок — и условный, схематич-
ный, и фотографического качества;
• растровая графика используется сейчас практически везде —
от маленьких иконок до плакатов.
Недостатки растровой графики:
• большой размер, занимаемый файлами;
• потеря качества изображения при операциях трансформиро-
вания.
Форматы растровых графических файлов:
• PSD (PhotoShop Document) — формат файла для редактирова-
ния в Photoshop. В этом формате сохраняются все слои рисунка;
• JPEG (Joint Photographic Expert Group — название организации,
которая разработала этот стандарт) — сжатый формат для раз-
мещения рисунка на webстранице. В формате JPEG сохраня-
ются фотографии, рисунки с большим количеством цветов и
плавными переходами цветов (градиентная заливка);
• GIF (Graphic Interchange Format — формат графики компании
CompuServe) — сжатый формат для размещения рисунка на
webстранице и для анимационных рисунков. В формате GIF
сохраняются рисунки с небольшим количеством цветов и рез-
кими границами между цветами (типа мультика), а также ри-
сунки, содержащие много текста. Формат GIF поддерживает
только 256 цветов, но позволяет сохранять прозрачный фон ри-
сунка;
• PNG (Portable Network Graphics — портативная сетевая графи-
ка) — улучшенный формат, замена JPEG (PNG24) и GIF
(PNG8). В формате PNG нельзя сохранить анимацию.
Векторная графика. Векторное изображение представляет собой
набор объектов — линий или примитивных геометрических фигур

1.1. Понятие компьютерной графики
7

(окружности, прямоугольники). Этим объектам присваиваются атри-
буты — форма линии, ее толщина, цвет, характер линии (сплошная,
пунктирная и т. п.) и цвет заполнения. Векторный рисунок хранится
в файле как набор координат, векторов и других чисел, характеризую-
щих объекты рисунка.
Все современные компьютерные видеодисплеи способны отобра-
жать информацию только в растровом формате. Для отображения
векторного формата на растровом используются преобразователи,
программные или аппаратные, встроенные в видеокарту. Также су-
ществует узкий класс устройств, ориентированных исключительно на
отображение векторных данных. К ним относятся графопостроители,
а также некоторые типы лазерных проекторов.
Векторные изображения используются при компьютерном черче-
нии, создании технической иллюстрации, деловой графики, шриф-
тов, векторной анимации.
Достоинства векторной графики:
• небольшой размер файла;
• нет потери качества при операциях трансформирования объ-
ектов;
• векторные изображения на растровых устройствах выводятся с
максимальным качеством, доступным на этом устройстве.
Недостатки векторной графики:
• не каждый объект может быть изображен в векторном виде, на-
пример фотографии;
• чем больше число объектов, тем больше памяти и времени тре-
буется на отображение и обработку векторного рисунка.
Фрактальные изображения. Фрактал — это рисунок, который со-
стоит из подобных между собой элементов. Построение фрактального
рисунка осуществляется по какомулибо алгоритму или путем авто-
матической генерации изображений при помощи вычислений по
конкретным формулам. Изменения значений в алгоритмах или коэф-
фициентов в формулах приводят к модификации этих изображений.
Главным преимуществом фрактальной графики является то, что в
файле фрактального изображения сохраняются только алгоритмы и
формулы.
3Dграфика. Трехмерная графика (3Dграфика) изучает приемы и
методы создания объемных моделей объектов, которые максимально
соответствуют реальным. Такие объемные изображения можно вра-
щать и рассматривать со всех сторон.

8
Глава 1. Растровая графика. Adobe Photoshop, часть 1

2. Размер и разрешение растровых изображений

Растровое изображение (растровая сетка) содержит цифровую
информацию о цвете каждой точки изображения — пикселя. Растро-
вые изображения хранятся в памяти компьютера в цифровой форме.
Параметры растровых изображений:
• размер растровой сетки (количество пикселей);
• разрешение устройства вводавывода (размер элемента изобра-
жения).
Устройства вывода. Изображение отображается устройствами вы-
вода: монитором или принтером. Элементы растровой сетки монито-
ра также называются пикселями. В принтере растровую сетку форми-
руют пятна краски или тонера, эти пятна называются точками.
Устройства ввода. В память компьютера изображения могут по-
падать через сканер или цифровую камеру. Сканер измеряет размер
бумажного оригинала в точках по горизонтали и вертикали. В цифро-
вой камере также фиксируется свет, но отраженный не от бумаги или
пленки, а от реальных предметов.
Все растровые устройства используют регулярную (то есть с одина-
ковыми интервалами) прямоугольную растровую сетку. Поэтому все
растровые изображения имеют прямоугольную форму, которую мож-
но измерить в пикселях по ширине и высоте, например: 800×600,
1024×768.
Разрешение — это основная характеристика устройств ввода и вы-
вода, которая показывает, сколько точек растровой сетки приходится
на единицу длины (сантиметр или дюйм). Разрешение измеряется в
точках на дюйм (dpi — dot per inch) или точках на сантиметр (dpc —
dot per centimeter).
Пример. Если принтер может печатать с максимальным разреше-
нием 1200 dpi, то это значит, что он на одном дюйме (2,54 см) может
уместить 1200 цветных пятен. Если 1200 dpi — это максимальное раз-
решение сканера, это значит, что на одном дюйме сканируемого ри-
сунка сканер способен различить 1200 цветных точек. В мониторах
стандартным является разрешение 72 или 96 dpi.
Размер изображения. Точки и пиксели в устройствах ввода и выво-
да имеют строго определенный размер. Чем выше разрешение уст-
ройства, тем мельче точки растра. Мелкие детали изображения пере-
даются лучше, если разрешение устройства высокое, а значит, точки
растра мелкие.

1.1. Понятие компьютерной графики
9

Определение физического размера изображения. Вычисляется физи-
ческий размер по следующей формуле: ширина в пикселях / разреше-
ние. Результат получается в дюймах. Если разрешение монитора
96 dpi, то изображение 100×100 пикселей будет иметь размеры
2,65×2,65 см. Например, при разрешение 72 dpi то же изображение
имело бы другой размер — 3,53×3,53 см. Вывод: чем больше разреше-
ние изображения, тем меньше его физический размер. Если вы ска-
нируете рисунок, который будет использоваться на webстраницах,
разрешение изображения может быть от 72 до 150 dpi. Но если вы го-
товите изображение для полиграфической печати, то его разрешение
должно быть от 150 до 300 dpi.

3. Интерфейс программы Adobe Photoshop CS5

Adobe Photoshop — известный графический редактор, предназна-
ченный для создания и редактирования графики. В нем можно сде-
лать различные текстовые эффекты, коллажи из фотографий, графи-
ку для сайтов (webдизайн), различные фантастические изображения,
спецэффекты, фоновые изображения и так далее. Окно программы
Photoshop CS5 представлено на рис. 1.1.

10
Глава 1. Растровая графика. Adobe Photoshop, часть 1

Рис. 1.1. Окно программы Photoshop