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

КОМПЬЮТЕРНАЯ

ГРАФИКА 

И WEB-ДИЗАЙН

Т.И. Немцова, Т.В. Казанкова, А.В. Шнякин

Под редакцией Л.Г. Гагариной

Рекомендовано Научно-методическим советом

федерального государственного автономного

образовательного учреждения высшего профессионального

образования «Национальный исследовательский университет

«МИЭТ» в качестве учебного пособия для студентов,

обучающихся по направлению подготовки 09.03.04

«Программная инженерия»

УЧЕБНОЕ ПОСОБИЕ

Москва 

ИД «ФОРУМ» — ИНФРА-М

2022

УДК  004.921(075.32) 
ББК 85.15я723 
 
Н50

Немцова Т.И.

Н50  
Компьютерная графика и web-дизайн : учебное пособие  /

Т.И. Нем  цова, Т.В. Казанкова, А.В. Шнякин ; под ред. Л.Г. Гагариной. — Москва : ИД «ФОРУМ» : ИНФРА-М, 2022. — 400 с. + Доп. материалы [Электронный ресурс]. — (Высшее образование).

ISBN 978-5-8199-0703-0 (ИД «ФОРУМ») 
ISBN 978-5-16-013255-6 (ИНФРА-М, print) 
ISBN 978-5-16-101286-4 (ИНФРА-М, online)

Учебное пособие «Компьютерная графика и web-дизайн» посвящено 

работе с компьютерной графикой, включая создание анимации, а также 
основам web-дизайна. Книга знакомит с работой в следующих программах: 
Adobe Photoshop CS5, Adobe Flash CS5, а также c созданием web-страниц 
с помощью программы Блокнот.

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

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

УДК 004.921(075.32) 

ББК 85.15я723 

Р е ц е н з е н т ы:

доктор технических наук, профессор кафедры «Информатика 

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

кандидат технических наук, доцент Института государственного 

управления, права и инновационных технологий А.В. Барышев

ISBN 978-5-8199-0703-0 (ИД «ФОРУМ») 
ISBN 978-5-16-013255-6 (ИНФРА-М, print) 
ISBN 978-5-16-101286-4 (ИНФРА-М, online)

Материалы, отмеченные знаком 
, 

доступны в электронно-библиотечной системе Znanium

© Немцова Т.И., Казанкова Т.В., 

Шнякин А.В., 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