Немцова Т.И., Назарова Ю.В. Компьютерная графика и web-дизайн
Подождите немного. Документ загружается.
ОМ
ПЬЮТЕР
ГРАФИКА
БРАЗОВАНИЕ
~~
У
ДК
002(075.32)
ББК
32.81я723
Н
50
Рецензенты:
доктор
тех11ических
наук,
nрофессор
кафедры
•Информатика
и
nрограммное
обесnечение
вычислительны
х
систем•
(МИЭТ
(ТУ))
О
.
И.
Лисов;
кандидат
nедагогических
наук,
доцент
кафедры
•Прикладная
информатика
в
социально-культурной
сфере•
(Институт
искусств
и
информационных
технологий
(филиал
СПб
ГУП))
А
.
А.
ПетfЮ8
Немцова
Т.
И.,
Назарова
Ю.
В.
Н50
Компьютерная
графика
и
wеЬ-дизаАн.
Практикум:
учебное
посо-
бие/
под
ред.
Л.
Г.
Гагариной.-
М.
:
Ид
•ФОРУМ•:
ИНФРА-М,
2010.-
288
с.:
ил.-
(Профессиональное
образование).
ISBN 978-5-8199-0343-8
(ИД
•
ФОРУМ•)
ISBN 978-5-16-003217-7
(ИНФРА
-
М)
Практикум
no
информатике
nосвящен
рабОте
с
комnьютерной
графи
кой,
включая
создание
анимации,
а
также
основам
WеЬ-дизайна.
Практи
кум
знакомит
с
работой
со
следующими
nрограммами:
Adobe
Photoshop
CS
2,
CoreiDRAW
13,
Macromedia
Flash
8
и
Macromedia Dreamweaver 8.
В
теоретической
части
рассматриваются
разли•1ные
асnекты
комnью
терного
дизайна
.
В
nракти•1еской
части
оnисываются
основные
nриемы
работы
в
изучаемой
nрограммной
среде.
Компакт-диск,
nрилаrаемый
к
nрактикуму,
содержит
задания
с
подробными
инструкциями
по
выnол
нению
.
На
комnакт-диске
также
находятся
материалы,
иллюстрирующие
теоретическую
часть
nрактикума.
Практикум
nредназначен
для
студентов
средних
специальных
учебных
заведений
,
изучающих
дисциnлину
•Информатика•.
Может
быть
реко
мендован
школьникам
и
студентам
вузов
(технических
,
экономических
и
других
сnециальностей)
,
nреnодавателям,
слушателям
курсов
nовышения
квалификации,
а
также
широкому
кругу
nользователей
nереанальных
комnьютеров.
ISBN 978-5-8199-0343-8
(ИД
•ФОРУМ•>)
ISBN 978-5-16-003217-7
(ИНФРА-М)
УДК
002(075.32)
ББК
32.81я723
©
Т.
И.
Немuова,
Ю.
В
.
Назарова,
2010
©ИД
•ФОРУМ•,
2010
Подписано
в
nечать
25
.
05
.
2010
.
Формат
60
х
90/16.
Печать
офсетная
.
Гарнитура
«Тайме
•.
Уел.
печ.
л.
18,0.
Уч.-изд.
л.
18,6
.
Бумага
офсетная
.
Тираж
500
экз.
Заказ
N.!
3475.
Отпечатано
с
готовых
диапозитивов
в
ОАО
ордена
•Знак
Почета•
•Смоленская
областная
типография
им
.
В
.
И
.
Смирнова
•.
214000
,
г
.
Смо
л
енск
,
проспект
им
.
Ю
.
Гагарина
,
2.
Предисловие
Практикум
по
курсу
<(Информатика»
отражает
технологию
работы
в
наиболее
распространенных
на
сегодняшний
день
про
граммных
продуктах.
Практикум
разделен
на
две
части.
Первая
часть
практикума
по
священа
базовой
компьютерной
подготовке
и
предназначена
для
начинающих
пользователей.
В
ней
рассмотрены
операционная
сис
тема
Microsoft Windows
ХР,
программные
продукты,
входящие
в
со
став
пакета
Microsoft
Office
2003,
а
также
технология
работы
в
Ин
тернет.
Вторая
часть
практикума
предназначена
для
тех,
кто
хочет
получить
навыки
работы
с
компьютерной
графикой,
включая
соз
дание
анимации,
а
также
познакомиться
с
основами
wеЬ-дизайна.
Цель
второй
части
практикума
-
научить:
•
основным
понятиям
компьютерной
графики,
а
также
осно
вам
построения
композиции
и
подбора
цвета;
•
создавать
растровые
изображения
и
корректировать
фото
графии
в
программе
Adobe Photoshop CS2;
•
подготавливать
различные
виды
рекламных
и
иллюстратив
ных
материалов,
используя
возможности
редактора
вектор
ной
графики
CorelDRAW
13;
•
разрабатывать
анимацию
средствами
программы
Macromedia
Flash
8;
•
создавать
wеЬ-сайты,
используя
редактор
Macromedia
Dreamweaver
8,
учитывая
правила
и
рекомендации,
нарабо
танные
в
области
wеЬ-дизайна.
В
данном
практикуме
возможности
программных
продуктов
вы
осваиваете,
сочетая
изучение
теоретического
материала
с
практическими
заданиями,
что
является
наиболее
эффективным
способом
изучения
нового
материала.
Как
в
практикуме
представлен
материал.
Практикум
разбит
на
4
главы.
Первая
глава
посвящена
работе
в
программе
Adobe
Photoshop.
Во
второй
главе
рассматриваются
возможности
про
граммы
CoreiDRAW.
Третья
глава
знакомит
с
принципами
соз-
4
Предисловие
дания
анимации
в
программе
Macromedia Flash.
Четвертая
глава
посвящена
разработке
WеЬ-сайтов
в
программе
Macromedia
Dreamweaver.
Главы
практикума
состоят
из занятий,
которые
не
обходимо
выполнять
последовательно, не
пропуская
предыду
щие
.
Каждое
последующее
занятие
раскрывает
дополнительные
возможности
изучаемых
программных
продуктов,
основываясь
на
знаниях,
полученных
при
изучении
материала
предыдущих
занятий.
Целью
любого
занятия
является
постепенное
(шаг
за
шагом)
освоение технологии
работы
в
изучаемой
программной
среде.
Каждое
занятие
практикума
состоит
из
теоретической
и
практической
частей.
В
теоретической
части
излагаются
сведе
ния,
необходимые
для
понимания
принципов
компьютерной
графики.
В
практической
части
описываются
основные
приемы
работы
в
изучаемой
программной
среде.
Компакт-диск,
прилагаемый
к
практикуму,
содержит
зада
ния
с
подробными
инструкциями
по
выполнению.
На
ком
пакт-диске
также
находятся
иллюстрации,
дополняющие
теоре
тическую
часть
практикума.
Используя
материалы
практикума
и
компакт-диска,
можно
проводить
интересные,
насыщенные
лек
ции
в
мультимедийном
классе,
оснащенном
проектором.
В
конце
каждой
гЛавы
даются
контрольные
вопросы
для
за
крепления
материала.
Методика,
которая
положена
в
основу
практикума
,
позволя
ет
существенно
ускорить
процесс
освоения
программной
среды,
достаточно
быстро
сформировать
целостное
представление
о
технологии
работы
и
ее
возможностях
для
решения
профессио
нальных
задач
.
Выполнив
все
задания
практикума,
вы
приобре
тете
устойчивые
навыки
работы
в
изучаемой
программной
среде.
Практикум
рекомендуется
в
качестве
пособия
по
курсу
«Ин
форматика)>
для
средних
и
высших
учебных
заведений.
Его
так
же
можно
использовать
как
самоучитель,
с
помощью
которого
за
короткое
время
вы
самостоятельно
освоите
актуальные
компью
терные
технологии,
поймете,
где
и
как
их
применять
в
своей
деятельности.
Данный
практикум
является
результатом
многолетней
ме
тодической
и
преподавательской
работы
в
Uентре
Компьютер
ного
Обучения
Московского
института
электронной
техники.
Гnава
1
РАСТРОВАЯ
ГРАФИКА.
ADOBE
PHOTOSHOP
Фирма
Adobe Systems, Inc.
является
лидером
на
рынке
про
граммнога
обеспечения
для
настольных
издательских
систем
.
Особое
место
среди
продуктов
фирмы
занимает
программа
Photoshop.
Эта
программа
предназначена
для
обработки
растро
вых
изображений.
Большинство
профессионалов
и
множество
любителей
приняла
Photoshop
как
основное
средство
подготовки
графики
как
для
печатнь1х
публикаций
,
так
и
для
wеЬ-сайтов.
Большое
внимание
в
главе
уделено
общим
вопросам
компь
ютерной
графики.
В
теоретической
части
введены
определения
понятий,
которые
должен
знать
каждый,
работающий
в
·
области
компьютерного
дизайна.
В
практической
части
даны
не
только
советы
по
обработке
изображений,
но
также
приведены
подробные
объяснения
вы
полнения
таких
сложных
операций
как,
например,
цветокор
рекция.
Разделы
<<Основные
приемы
работы>>
могут
быть
использова
ны
как
справочное
пособие.
Изучив
эту
главу,
вы
научитесь:
•
проводить
трансформацию
изображения
(изменение
разме
ра,
повороты,
обрезка);
•
работать
с
фрагментами
изображения
(выделение,
монтаж);
•
улучшать
качество
изображения
(тоновая
и
цветовая
кор
рекция)
;
•
применять
эффекты
слоя
и
фильтры;
•
работать
с
текстом
в
растровом
изображении
.
6
Глава
1.
Растровая
графика.
Adobe
Photoshop
1.1.
ЗАНЯТИЕ
1
Понятие
компьютерной
rрафики
Цель
занятия:
1)
познакомиться
с
видами
и
особенностями
компьютерной
графики;
2)
изучить
базовые
модели
цвета
и
типы
растровых
изображений;
3)
освоить
основные
приемы
работы
в
Photoshop;
4)
познакомиться
с
возможностями
создания
изобра
жений
в
Photoshop.
ТЕОРЕТИЧЕСКАЯ
ЧАСТЬ.
Внды
компьютернон
графнкн.
Моделн
цвета.
Тнпы
растровых
нзображеннн
1.
Виды
компьютерной
графики
Обычно
компьютерную
графику
разделяют
на
растровую
и
векторную.
Отдельно
стоят
фрактальный
тип
представления
изо
бражений
и
трехмерная
графика.
Растровая
графика.
Растровое
изображение
-
это
прямо
угольная
(растровая)
сетка
пикселей
на
компьютерном
монито
ре,
бумаге
и
других
отображающих
устройствах
и
материалах.
При
использовании
растровой
графики
важным
элементом
яв
ляется
размер
полотна,
тип
цветопередачи
(например,
RGB)
и
количество
используемых
цветов.
Пиксел
(англ.
pixel,
сокр.
от
англ.
P!Ctиre'S
ELeтent
-
эле
мент
изображения)
-
это
мельчайшая
единица
цифрового
изо
бражения
в
растровой
графике.
Он
представляет
собой
недели
мый
объект
прямоугольной
(обычно
квадратной)
формы,
обла
дающий
определенным
цветом.
Любое
растровое
компьютерное
изображение
состоит
из
пикселов,
расположенных
по
строкам
и
столбцам.
При
увеличении
изображения
видны
ряды
пикселов.
Максимальная
детализация
растрового
изображения
задается
при
его
создании
и
не
может
быть
увеличена.
Если
увеличивает
ся
масштаб
изображения,
пикселы
превращаются
в
крупные
зер
на.
От
количества
пикселов
зависит
детальность
изображения:
Пикселы,
сливаясь
на
расстоянии,
создают
ошущение
цветовых
переходов.
Достоинства
растровой
графики:
•
можно
воспроизвести
любой
рисунок
-
и
условный,
схе
матичный,
и
фотографического
качества;
1.1.
Понятие
компьютерной
графики
7
•
растровая
графика
используется сейчас
практически
вез-
де
-
от
маленьких
иконок
до
плакатов.
Недостатки
растровой
графики:
•
большой
размер,
занимаемый
файлами;
•
потеря
качества
изображения
при
операциях
трансформи
рования.
Форматы
растровых
графических
файлов:
•
PSD
(PhotoShop
Documeпt)
-
формат
файла
для
редакти
рования
в
Photoshop
или
ImageReady.
В
этом
формате
со
храняются
все
слои
рисунка;
•
JPEG
(Joiпt
Photographic Expert Group -
название
органи
зации,
которая
разработала
этот
стандарт)
-
сжатый
фор
мат для
размещения
рисунка
на
wеЬ-странице.
В
формате
JPEG
сохраняются
фотографии,
рисунки
с
большим
коли
чеством
цветов
и
плавными
переходами
цветов
(градиент
ная
заливка);
•
GJF
(Graphic Interchange Format -
формат
графики
компа
нии
CompuServe) -
сжатый
формат
для
размещения
ри
сунка
на
wеЬ-странице
и
для
анимационных
рисунков.
В
формате
G
IF
сохраняются
рисунки
с
небольшим
количе
ством
цветов
и
резкими
границами
между
цветами
(типа
мультика),
а
также
рисунки,
содержащие
много
текста.
Формат
G IF
поддерживает
только
256
цветов,
но
позволяет
сохранять
прозрачный
фон
рисунка;
•
PNG
(PortaЬle
Network
Graphics-
портативная
сетевая
гра
фика)
-
улучшенный
формат,
замена
JPEG (PNG-24)
и
GJF (PNG-8).
Векторная
графика.
Векторное
изображение
представляет
со
бой
набор
объектов
-
линий
или
примитинных
геометрических
фигур
(окружности,
прямоуrольники).
Этим
объектам
присваи
ваются
атрибуrы
-
толщина
линий
и
цвет
заполнения.
Вектор
ный
рисунок
хранится
в
файле
как
набор
координат,
векторов
и
других
чисел,
характеризующих
объекты
·
рисунка.
Все
современные
компьютерные
видеодисплеи
способны
отображать
информацию
только
в
растровом
формате.
Для
ото
бражения
векторного
формата
на
растровом
используются
пре
образователи,
программные
или
аппаратные,
встроенные
в
ви
деокарту.
Также
существует
узкий
класс
устройств,
ориентиро
ванных
исключительно
на
отображение
векторах
данных.
К
ним
8
Глава
1.
Растровая
графика.
Adobe
Photoshop
относятся
графопостроители,
а
также
некоторые
типы
лазерных
проекторов.
Векторные
изображения
используются
при
компьютерном
черчении,
создании
технической
иллюстрации,
деловой
графи
ки,
шрифтов,
векторной
анимации.
Достоинства
векторной
графики:
•
небольшой
размер
файла;
•
нет
потери
качества
при
операциях
трансформирования
объектов;
•
векторные
изображения
на
растровых
устройствах
выво
дятся
с
максимальным
качеством,
доступным
на
этом
уст
ройстве.
Недостатки
векторной
графики:
•
не
каждый
объект
может
быть
изображен
в
векторном
виде,
например
фотографии;
•
чем
больше
число
объектов,
тем
больше
памяти
и
времени
требуется
на
отображение
и
обработку
векторного
рисунка.
2.
Модели
цвета
Цветовой
охват
и
модели
цвета.
Число
цветов
безгранично.
Одни
устройства
воспринимают
цвет
-
это
глаза
человека
и
не
которых
животных,
фотопленка,
сканер.
Другие
воспроизводят
цвета
-
офсетная
машина,
монитор,
фотобумага.
Существуют
ограничения
при
работе
с
цветом:
•
человеческий
глаз
не
воспринимает
цвета
ультрафиолето-
вого
и
инфракрасного
излучения.
•
фотоаппарат
не
воспринимает
очень
темные
оттенки.
•
офсетная
печать
не
передает
очень
светлые
и
яркие
тона.
Цветовой
охват
-
это
диапазон
цветов,
который
может
быть
воспроизведен
каким-либо
способом.
Часть
из
того,
что
воспри
нимает
глаз,
может
передать
монитор
(на
экране,
например,
нельзя
точно
воспроизвести
чистые
голубой
или
желтый
цвет).
Часть
из
того,
что
передает
монитор,
можно
напечатать
(за
ис:.
ключением
очень
светлых
тонов).
Каждый
из
цветовых
охватов
выражен
своей
моделью
цвета.
Модель
цвета
-
это
математическое
описание
цвета.
Ни
одна
из
моделей
неидеальна,
поэтому
на
практике
применяют
ту
или
другую
подходящую
для
данного
случая.
1.1.
Понятие
компьютерной
графики
9
Устройство
моделей
цвета.
В
каждой
из
моделей
принято
не
сколько
базовых
компонентов
(например,
базовые
цвета).
Кана
лы
-
это
базовые
компоненты
модели.
Цвета,
которые
можно
описать,
используя
данную
модель,
образуют
цветовое
простран
.
ство
модели
(иначе
говоря,
цветовой
охват).
Самые
известные
цветовые
модели:
RGB,
СМУ
(она
же
СМУК),
Lab
(лучше
всех
описывает
человеческое
зрение),
HSB
(упрощенная
модель
RGB).
Модель
RGB
-
это
базовая
модель
компьютерного
дизайна,
потому
что
она
используется
при
цифровой
фотографии,
скани
ровании
и
выводе
рисунка
на
экран
монитора.
Модель
RG
В
описывает
излучаемые
цвета.
Существуют
три
базовых
канала
модели
RGB:
• Red (R) -
красный;
• Green
(G)-
зеленый;
• Blue
(В)
-
синий.
Эти
три
цвета
человек
воспринимает
непосредственно,
ос
тальные
цвета
получаются
смешением
базовых.
Например,
сме
шение
красного
и
зеленого
дает
желтый
цвет.
При
сложении
двух
базовых каналов
результат
получается
светлее.
Цвета
RGB
складываются
как
лучи
света.
Результат
смешивания
каналов
RG
В:
•
при
полном
отсутствии
света
(нулевые
значения
каналов)
получается
черный
цвет
(ночь);
•
смешивание
всех
каналов
в
равной
пропорции
дает
серый
цвет
(сумерки);
•
максимальные
значения
всех
каналов
дают
белый
цвет
(луч
солнца
=
день~
Модель
СМУК
используется
в
типоrрафике,
поэтому
ее
цве
товой
охват
Уже,
чем
у
RGB.
СМУК
описывает
не
излучаемые,
а
цвета,
интенсивность
которых
всегда
меньше
.
Например,
срав
ните
красную
бумагу
и
красную
лампочку:
красный
цвет
на
бу
маге
всегда
тусклее,
чем
свет
красной
лампочки.
При
смешива
нии
каналов
СМУК
результат
всегда
темнее,
поскольку
каждый
из
цвеrов
поглощает
часть
спектра.
Каналы
СМУК
образуются
в
результате
вычитания
каналов
RGB
из
белого
цвета,
т.
е.
из
пол
ного
спектра.
Имеются
четыре
базовых
канала
модели
СМУК:
• Cyan
(С)-
голубой
(белый
минус
красный);
• Magenta
(М)
-
пурпурный
(белый
минус
зеленый);
10
Глава
1.
Растровая
графика.
Adobe
Photoshop
• Yellow
(У)-
желтый
(белый
минус
синий);
• Black
(К)
-
черный.
Результат
смешивания
каналов
СМУК:
•
смешивание
максимальных
значений
трех
каналов
(СМУ)
должно
давать
черный
цвет
(смешайте
все
темные
краски
на
бумаге!),
но
в
реальности
получается
грязно-коричне
вый
оттенок,
поэтому
на
практике
добавляют
чистую
чер
ную
краску,
поэтому
модель
называется
СМУК;
•
при
полном
отсутствии
краски
(нулевые
значения
каналов)
получается
белый
цвет
(белая
бумага);
•
смешивание
всех
цветов
в
равных
пропорциях
дает
оттенок
серого
цвета.
З.
Типы
растровых
изображений
Монохромные
изображения
состоят
из
одного
канала и
двух
цветов
-
черного
и
белого.
Монохромные
изображения
еще
на
зывают
Вitтар
(карта
битов).
Полутоновые
изображения
состоят
из
одного
канала
и
256
от
тенков
серого
цвета.
Каждая
точка
полутонового
изображения
может
иметь
значение
от
черного
(0)
до
белого
(255),
все
проме
жуточные
значения
называются
серой
шкалой.
Полноцветные
изображения
в
моделях
RGB, СМУК
или
Lab
состоят
из
нескольких
цветовых
каналов.
Каждый
канал
-
это
полутоновое
изображение,
содержащее
256
оттенков
базового
цвета.
Индексированные
изображения-
это
одноканальные
изобра
жения,
содержащие
до
256
точно
определеllных
цветов.
Индек
сированные
изображения
сохраняются
в
формате
G
IF
и
приме
няются
в
wеЬ-дизайне,
поскольку
их
размеры
меньше,
чем
ана
логичные
полноцветные.
4.
Размер
и
разрешение
изображений
Растровое
изображение
(растровая
сетка)
содержит
цифро
вую
информацию
о
цвете
каждой
точки
изображения
-
пикселя.
Растровые
изображения
хранятся
в
памяти
компьютера
в
цифро
вой
форме.
Параметры
растровых
изображений:
•
размер
растровой
сетки
(количество
пикселей);