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





                КОМПЬЮТЕРНАЯ ГРАФИКА И WEB-ДИЗАЙН




ПРАКТИКУМ




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



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














Москва
ИД «ФОРУМ» - ИНФРА-М
2013

УДК 002(075.32)
ББК 32.81я723
      Н50
Рецензенты:
доктор технических наук, профессор кафедры «Информатика и программное обеспечение вычислительных
систем» (МИЭТ (ТУ)) О. И. Лисов;
кандидат педагогических наук, доцент кафедры «Прикладная информатика в социально-культурной сфере» (Институт искусств и информационных технологий
(филиал СПб ГУП)) А. А. Петров
      Немцова Т. И., Назарова Ю. В.
Н50 Компьютерная графика и web-дизайн. Практикум : учебное пособие / под ред. Л. Г. Гагариной. — М. : ИД «ФОРУМ»: ИНФРА-М, 2013. — 288 с.: ил. — (Профессиональное образование).
        ISBN 978-5-8199-0343-8 (ИД «ФОРУМ»)
        ISBN 978-5-16-003217-7 (ИНФРА-М)
        Практикум по информатике посвящен работе с компьютерной графикой, включая создание анимации, а также основам Web-дизайна. Практикум знакомит с работой со следующими программами: Adobe Photoshop CS 2, CorelDRAW 13, Macromedia Flash 8 и Macromedia Dreamweaver 8.
        В теоретической части рассматриваются различные аспекты компьютерного дизайна. В практической части описываются основные приемы работы в изучаемой программной среде. Компакт-диск, прилагаемый к практикуму, содержит задания с подробными инструкциями по выполнению. На компакт-диске также находятся материалы, иллюстрирующие теоретическую часть практикума.
        Практикум предназначен для студентов средних специальных учебных заведений, изучающих дисциплину «Информатика». Может быть рекомендован школьникам и студентам вузов (технических, экономических и других специальностей), преподавателям, слушателям курсов повышения квалификации, а также для широкому кругу пользователей персональных компьютеров.
УДК 002(075.32)
                                                     ББК 32.81я723

                                               © Т. И. Немцова, ISBN 978-5-8199-0343-8 (ИД «ФОРУМ»)              Ю. В. Назарова, 2010
ISBN 978-5-16-003217-7 (ИНФРА-М)              © ИД «ФОРУМ», 2010


Подписано в печать 25.05.2010. Формат 60x90/16.
      Печать офсетная. Гарнитура «Тайс». Усл. печ. л. 18,0. Уч.-изд. л. 18,6.
               Бумага офсетная. Доп. тираж 1500 экз. Заказ №

            Предисловие







    Практикум по курсу «Информатика» отражает технологию работы в наиболее распространенных на сегодняшний день программных продуктах.
    Практикум разделен на две части. Первая часть практикума посвящена базовой компьютерной подготовке и предназначена для начинающих пользователей. В ней рассмотрены операционная система 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. Главы практикума состоят из занятий, которые необходимо выполнять последовательно, не пропуская предыдущие. Каждое последующее занятие раскрывает дополнительные возможности изучаемых программных продуктов, основываясь на знаниях, полученных при изучении материала предыдущих занятий. Целью любого занятия является постепенное (шаг за шагом) освоение технологии работы в изучаемой программной среде.
    Каждое занятие практикума состоит из теоретической и практической частей. В теоретической части излагаются сведения, необходимые для понимания принципов компьютерной графики. В практической части описываются основные приемы работы в изучаемой программной среде.
    Компакт-диск, прилагаемый к практикуму, содержит задания с подробными инструкциями по выполнению. На компакт-диске также находятся иллюстрации, дополняющие теоретическую часть практикума. Используя материалы практикума и компакт-диска, можно проводить интересные, насыщенные лекции в мультимедийном классе, оснащенном проектором.
    В конце каждой главы даются контрольные вопросы для закрепления материала.
    Методика, которая положена в основу практикума, позволяет существенно ускорить процесс освоения программной среды, достаточно быстро сформировать целостное представление о технологии работы и ее возможностях для решения профессиональных задач. Выполнив все задания практикума, вы приобретете устойчивые навыки работы в изучаемой программной среде.
    Практикум рекомендуется в качестве пособия по курсу «Информатика» для средних и высших учебных заведений. Его также можно использовать как самоучитель, с помощью которого за короткое время вы самостоятельно освоите актуальные компьютерные технологии, поймете, где и как их применять в своей деятельности.
    Данный практикум является результатом многолетней методической и преподавательской работы в Центре Компьютерного Обучения Московского института электронной техники.

            Глава 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. Размер и разрешение изображений

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