Практикум по информатике

ПРАКТИКУМ 

ПО ИНФОРМАТИКЕ

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

И WEB-ДИЗАЙН

Т.И. Немцова, Ю.В. Назарова

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

Допущено Министерством образования и науки Российской Федерации

в качестве учебного пособия для студентов учреждений

среднего профессионального образования

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

Москва 

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

2021

УДК  004.92(075.32)
ББК 32.973я723 
 
Н50

Немцова Т.И.

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

учебное пособие / Т.И. Немцова, Ю.В. Назарова ; под ред. Л.Г. Гагариной. — Москва : ИД «ФОРУМ» : ИНФРА-М, 2021. — 288 с. + Доп. 
материалы [Электронный ресурс]. — (Среднее профессиональное образование).

ISBN 978-5-8199-0800-6 (ИД «ФОРУМ») 
ISBN 978-5-16-013989-0 (ИНФРА-М, print) 
ISBN 978-5-16-105768-1 (ИНФРА-М, online)

Практикум по информатике посвящен работе с компьютерной графи
кой, включая создание анимации, а также основам web-дизайна. Практикум 
знакомит с работой со следующими программами: Adobe Photoshop CS2, 
CorelDRAW 13, Macromedia Flash 8 и Macromedia Dreamweaver 8.

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

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

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

УДК  004.92(075.32)

ББК  32.973я723  

Р е ц е н з е н т ы:

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

и программное обеспечение вычислительных систем» (НИУ МИЭТ) 
О.И. Лисов;

кандидат педагогических наук, доцент кафедры «Прикладная ин
форматика в социально-культурной сфере» (Институт искусств и информационных технологий (филиал СПбГУП)) А.А. Петров

ISBN 978-5-8199-0800-6 (ИД «ФОРУМ») 
ISBN 978-5-16-013989-0 (ИНФРА-М, print) 
ISBN 978-5-16-105768-1 (ИНФРА-М, online)

© Немцова Т.И., 

Назарова Ю.В., 2015

© ИД «ФОРУМ», 2015

Материалы, отмеченные знаком 
, доступны 

в электронно-библиотечной системе Znanium.com

Предисловие

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

Практикум разделен на две части. Первая часть практикума посвящена базовой компьютерной подготовке и предназначена для 
начинающих пользователей. В ней рассмотрены операционная система Microsoft Windows XP, программные продукты, входящие в состав пакета Microsoft Office 2003, а также технология работы в Интернет. Вторая часть практикума предназначена для тех, кто хочет 
получить навыки работы с компьютерной графикой, включая создание анимации, а также познакомиться с основами web-дизайна.

Цель второй части практикума — научить:
• основным понятиям компьютерной графики, а также основам построения композиции и подбора цвета;

• создавать растровые изображения и корректировать фотографии в программе Adobe Photoshop CS2;

• подготавливать различные виды рекламных и иллюстративных материалов, используя возможности редактора векторной графики CorelDRAW 13;

• разрабатывать анимацию средствами программы Macromedia 
Flash 8;

• создавать web-сайты, используя редактор Macromedia 
Dreamweaver 8, учитывая правила и рекомендации, наработанные в области web-дизайна.

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

Как в практикуме представлен материал. Практикум разбит 
на 4 главы. Первая глава посвящена работе в программе Adobe 
Photoshop. Во второй главе рассматриваются возможности программы CorelDRAW. Третья глава знакомит с принципами соз

Предисловие

дания анимации в программе Macromedia Flash. Четвертая глава 
посвящена разработке Web-сайтов в программе Macromedia 
Dreamweaver. Главы практикума состоят из занятий, которые необходимо выполнять последовательно, не пропуская предыдущие. Каждое последующее занятие раскрывает дополнительные 
возможности изучаемых программных продуктов, основываясь 
на знаниях, полученных при изучении материала предыдущих 
занятий. Целью любого занятия является постепенное (шаг за 
шагом) освоение технологии работы в изучаемой программной 
среде.

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

Материалы, находящиеся на компакт-диске, доступны в онлайн-версии в электронно-библиотечной системе znanium (www. 
znanium.com). Они содержат задания с подробными инструкциями 
по их выполнению, иллюстрации, дополняющие теоретическую 
часть практикума. Используя электронные материалы и материалы 
практикума, можно проводить интересные, насыщенные лекции в 
мультимедийном классе, оснащенном проектором.

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

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

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

Данный практикум является результатом многолетней методической и преподавательской работы в Центре Компьютерного Обучения Московского института электронной техники.

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

Фирма Adobe Systems, Inc. является лидером на рынке программного обеспечения для настольных издательских систем. 
Особое место среди продуктов фирмы занимает программа 
Photoshop. Эта программа предназначена для обработки растровых изображений. Большинство профессионалов и множество 
любителей приняло Photoshop как основное средство подготовки 
графики как для печатных публикаций, так и для web-сайтов.

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

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

Разделы «Основные приемы работы» могут быть использованы как справочное пособие.

Изучив эту главу, вы научитесь:
• проводить трансформацию изображения (изменение размера, повороты, обрезка);

• работать с фрагментами изображения (выделение, монтаж);
• улучшать качество изображения (тоновая и цветовая коррекция);

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

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

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

Цель занятия: 1) познакомиться с видами и особенностями 
компьютерной графики; 2) изучить базовые модели цвета и типы 
растровых изображений; 3) освоить основные приемы работы в 
Photoshop; 4) познакомиться с возможностями создания изображений в Photoshop.

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

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

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

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

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

Достоинства растровой графики:
• можно воспроизвести любой рисунок — и условный, схематичный, и фотографического качества;

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

• растровая графика используется сейчас практически везде — от маленьких иконок до плакатов.

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

Форматы растровых графических файлов:
• PSD (PhotoShop Document) — формат файла для редактирования в Photoshop или ImageReady. В этом формате сохраняются все слои рисунка;

•  JPEG (Joint Photographic Expert Group — название организации, которая разработала этот стандарт) — сжатый формат для размещения рисунка на web-странице. В формате 
JPEG сохраняются фотографии, рисунки с большим количеством цветов и плавными переходами цветов (градиентная заливка);

•  GIF (Graphic Interchange Format — формат графики компании CompuServe) — сжатый формат для размещения рисунка на web-странице и для анимационных рисунков. 
В формате GIF сохраняются рисунки с небольшим количеством цветов и резкими границами между цветами (типа 
мультика), а также рисунки, содержащие много текста. 
Формат GIF поддерживает только 256 цветов, но позволяет 
сохранять прозрачный фон рисунка;

•  PNG (Portable Network Graphics — портативная сетевая графика) — улучшенный формат, замена JPEG (PNG-24) 
и GIF (PNG-8).

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

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

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

относятся графопостроители, а также некоторые типы лазерных 
проекторов.

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

Достоинства векторной графики:
• небольшой размер файла;
• нет потери качества при операциях трансформирования 
объектов;

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

Недостатки векторной графики:
• не каждый объект может быть изображен в векторном 
виде, например фотографии;

• чем больше число объектов, тем больше памяти и времени 
требуется на отображение и обработку векторного рисунка.

2. Модели цвета

Цветовой охват и модели цвета. Число цветов безгранично. 
Одни устройства воспринимают цвет — это глаза человека и некоторых животных, фотопленка, сканер. Другие воспроизводят 
цвета — офсетная машина, монитор, фотобумага.

Существуют ограничения при работе с цветом:
• человеческий глаз не воспринимает цвета ультрафиолетового и инфракрасного излучения.

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

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

Модель цвета — это математическое описание цвета. Ни 
одна из моделей неидеальна, поэтому на практике применяют ту 
или другую подходящую для данного случая.

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

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

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

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

Существуют три базовых канала модели RGB:
• Red (R) — красный;
• Green (G) — зеленый;
• Blue (B) — синий.
Эти три цвета человек воспринимает непосредственно, остальные цвета получаются смешением базовых. Например, смешение красного и зеленого дает желтый цвет. При сложении 
двух базовых каналов результат получается светлее. Цвета RGB 
складываются как лучи света.

Результат смешивания каналов RGB:
• при полном отсутствии света (нулевые значения каналов) 
получается черный цвет (ночь);

• смешивание всех каналов в равной пропорции дает серый 
цвет (сумерки);

• максимальные значения всех каналов дают белый цвет (луч 
солнца = день).

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

Имеются четыре базовых канала модели CMYK:
• Cyan (С) — голубой (белый минус красный);
• Magenta (M) — пурпурный (белый минус зеленый);

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

• Yellow (Y) — желтый (белый минус синий);
• Black (K) — черный.
Результат смешивания каналов CMYK:
• смешивание максимальных значений трех каналов (CMY) 
должно давать черный цвет (смешайте все темные краски 
на бумаге!), но в реальности получается грязно-коричневый оттенок, поэтому на практике добавляют чистую черную краску, поэтому модель называется CMYK;

• при полном отсутствии краски (нулевые значения каналов) 
получается белый цвет (белая бумага);

• смешивание всех цветов в равных пропорциях дает оттенок 
серого цвета.

3. Типы растровых изображений

Монохромные изображения состоят из одного канала и двух 
цветов — черного и белого. Монохромные изображения еще называют Bitmap (карта битов).

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

Полноцветные изображения в моделях RGB, CMYK или Lab 
состоят из нескольких цветовых каналов. Каждый канал — это 
полутоновое изображение, содержащее 256 оттенков базового 
цвета.

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

4. Размер и разрешение изображений

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

Параметры растровых изображений:
• размер растровой сетки (количество пикселей);

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

• разрешение устройства ввода-вывода (размер элемента изображения);

• глубина цвета (размер изображения в байтах).
Устройства вывода. Изображение отображается устройствами вывода: монитором или принтером. Элементы растровой сетки монитора также называются пикселями. В принтере растровую 
сетку формируют пятна краски или тонера, эти пятна называются точками.

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

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

Разрешение — это основная характеристика устройств ввода и 
вывода, которая показывает, сколько точек растровой сетки 
приходится на единицу длины (сантиметр или дюйм). Разрешение измеряется в точках на дюйм (dpi — dot per inch) или точках 
на сантиметр (dpc — dot per centimeter).

Пример. Если принтер может печатать с максимальным разрешением 1200 dpi, то это значит, что он на одном дюйме 
(2,54 см) может уместить 1200 цветных пятна. Если 1200 dpi — 
это максимальное разрешение сканера, это значит, что на одном дюйме сканируемого рисунка сканер способен различить 
1200 цветных точек. В мониторах стандартным является разрешение 72 или 96 dpi.

Размер изображения. Точки и пикселы в устройствах ввода и 
вывода имеют строго определенный размер. Чем выше разрешение устройства, тем мельче точки растра. Мелкие детали изображения передаются лучше, если разрешение устройства высокое, 
а значит точки растра мелкие.

Определение физического размера изображения. Если разрешение монитора 96 dpi, то изображение 100 х 100 пикселов будет