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

КОМПЬЮТЕРНАЯ
ГРАФИКА 
И WEB-ДИЗАЙН
Т.И. Немцова, Т.В. Казанкова, А.В. Шнякин
Под редакцией Л.Г. Гагариной
Рекомендовано Научно-методическим советом
федерального государственного автономного
образовательного учреждения высшего профессионального
образования «Национальный исследовательский университет
«МИЭТ» в качестве учебного пособия для студентов,
обучающихся по направлению подготовки 09.03.04
«Программная инженерия»
УЧЕБНОЕ ПОСОБИЕ
Москва 
ИНФРА-М
2026

УДК  004.921(075.8) 
ББК 85.15я73 
 
Н50
Немцова Т.И.
Н50  
Компьютерная графика и web-дизайн : учебное пособие /
Т.И. Нем  цова, Т.В. Казанкова, А.В. Шнякин ; под ред. Л.Г. Гагариной. — Москва : ИНФРА-М, 2026. — 400 с. + Доп. материалы [Электронный ресурс]. — (Высшее образование).
ISBN 978-5-16-021098-8 (print) 
ISBN 978-5-16-101286-4 (online)
Учебное пособие «Компьютерная графика и web-дизайн» посвящено 
работе с компьютерной графикой, включая создание анимации, а также 
основам web-дизайна. Книга знакомит с работой в следующих программах: 
Adobe Photoshop CS5, Adobe Flash CS5, а также c созданием web-страниц 
с помощью программы Блокнот.
Предложен теоретический и практический материал. В теоретической части рассматриваются различные аспекты компьютерного дизайна 
и современные подходы к созданию web-страниц. В практической части 
описываются основные приемы работы в изучаемой программной среде 
и задания с подробными инструкциями по выполнению. Дополнительные материалы, иллюстрирующие теоретическую часть учебника, и материалы, необходимые для выполнения практических заданий, представлены в электронно-библиотечной системе Znanium.com.
Пособие предназначено для студентов, изучающих дисциплину «Информатика», преподавателей, слушателей курсов повышения квалификации, а также для широкого круга пользователей персональных компьютеров, самостоятельно изучающих программные продукты.
УДК 004.921(075.8)  
ББК 85.15я73 
Р е ц е н з е н т ы:
доктор технических наук, профессор кафедры «Информатика 
и программное обеспечение вычислительных систем» федерального 
государственного автономного образовательного учреждения высшего 
профессионального образования «Национальный исследовательский 
университет «МИЭТ» О.И. Лисов;
кандидат технических наук, доцент Института государственного 
управления, права и инновационных технологий А.В. Барышев
ISBN 978-5-16-021098-8 (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