Единое окно доступа к образовательным ресурсам

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

Голосов: 7

Учебное пособие содержит основные понятия, терминологию и справочные материалы. Изложен теоретический материал по растровой и векторной графике. Рассмотрены особенности подготовки графики для печати и web-изданий в профессиональном редакторе Photoshop. Пособие предназначено для студентов второго курса специальностей 030602 "Связь с общественностью" и 030901 "Издательское дело и редактирование" вечернего, заочного и дневного отделений, а также может быть полезно студентам других гуманитарных специальностей.

Приведенный ниже текст получен путем автоматического извлечения из оригинального PDF-документа и предназначен для предварительного просмотра.
Изображения (картинки, формулы, графики) отсутствуют.
    0


      Федеральное агентство по образованию
   Государственное образовательное учреждение
   высшего профессионального образования
«Омский государственный технический университет»




                О.В. Томилова




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


               Учебное пособие




                     Омск
              Издательство ОмГТУ
                     2008
                       1


   УДК 004.92(075)
   ББК 85.15+32.973.202я73
       Т56

                                    Рецензенты:
   В.Я. Волков, д-р техн. наук, проф. каф. «Начертательная геометрия, инженер-
                      ная и машинная графика» СибАДИ;
     Ю.Ф. Савельев, канд. техн. наук, доцент, зав. каф. «Инженерная графика»
                                   ОмГУПС

   Томилова, О.В.
Т56 Компьютерная графика и web-дизайн.: учеб. пособие./О.В. Томилова –
Омск. Изд-во ОмГТУ, 2008.-103 с.

   ISBN 978-5-8149-0578-9

    Учебное пособие содержит основные понятия, терминологию и справочные
материалы. Изложен теоретический материал по растровой и векторной графике.
Рассмотрены особенности подготовки графики для печати и Web-изданий в про-
фессиональном редакторе Photoshop.
    Предназначено для студентов второго курса специальностей 030602 «Связь с
общественностью» и 030901 «Издательское дело и редактирование» вечернего,
заочного и дневного отделений, а также может быть полезно студентам других
гуманитарных специальностей.


           Печатается по решению редакционно-издательского совета
             Омского государственного технического университета




                                                   УДК 004.92(075)
                                                   ББК 85.15+32.973.202я73

                                             © О.В. Томилова, 2008
                                             © Омский государственный
ISBN 978-5-8149-0578-9                         технический университет, 2008



                                        2


                                                       ОГЛАВЛЕНИЕ
  1. КОМПЬЮТЕРНАЯ ГРАФИКА .......................................................................................... 5
  1.1. ВВЕДЕНИЕ В КОМПЬЮТЕРНУЮ ГРАФИКУ ............................................ 5
    1.1.1. Компьютерная графика. История появления и область её применения 5
    1.1.2. Источники изображений ............................................................................. 7
    1.1.3. Методы предоставления графики .............................................................. 8
    1.1.4. Программное обеспечение для работы с двумерной графикой ............. 9
    1.1.5. Обоснование выбора программного обеспечения ................................. 13
    1.1.6. Общие принципы работы в графических редакторах ........................... 13
  1.2. ОСНОВНЫЕ ВИДЫ КОМПЬЮТЕРНОЙ ГРАФИКИ,
ИХ СВОЙСТВА И ХАРАКТЕРИСТИКИ .................................................................. 17
    1.2.1. Растровая графика ..................................................................................... 17
    1.2.2. Векторная графика .................................................................................... 29
  1.3. ТЕКСТ И ШРИФТЫ ........................................................................................ 34
    1.3.1. Основные типы компьютерных шрифтов ............................................... 34
    1.3.2. Основные термины шрифтов ................................................................... 36
  1.4. ОПИСАНИЕ ЦВЕТОВ .................................................................................... 37
    1.4.1. Цветовой охват и модели цвета ............................................................... 37
    1.4.3. Переход между типами изображений ..................................................... 52
  1.5. СИСТЕМА УПРАВЛЕНИЯ ЦВЕТОМ .......................................................... 56
    1.5.1 Основные задачи и цели системы управления цветом ........................... 56
    1.5.2. Построение профилей устройств ............................................................. 58
    1.5.3. Построение профиля монитора с помощью Adobe Gamma .................. 60
    1.5.4. Настройки по управлению цветом в Photoshop...................................... 64
    1.5.5. Программная цветопроба ......................................................................... 71
  1.6. ВЫВОДЫ .......................................................................................................... 74
  2. WEB-ДИЗАЙН ........................................................................................................................ 75
  2.1. ВВЕДЕНИЕ. СТРУКТУРА И ОРГАНИЗАЦИЯ ИНФОРМАЦИИ
ИНТЕРНЕТА ................................................................................................................. 75
    2.1.1. Основные термины .................................................................................... 75
    2.1.2. Система адресации в Интернете .............................................................. 77
    2.1.3. Электронная почта .................................................................................... 78
  2.2. СТРУКТУРА И ОРГАНИЗАЦИЯ ИНФОРМАЦИИ НА САЙТЕ .............. 79
    2.2.1. Введение в web-дизайн ............................................................................. 79
    2.2.2. Web-технологии ......................................................................................... 79
    2.2.3. Web-хостинг ............................................................................................... 88
    2.2.4. Основные «постулаты» web-дизайна ...................................................... 89
    2.2.5. Технологии web-дизайна .......................................................................... 91
  2.3. ЗАКЛЮЧЕНИЕ. СОЗДАНИЕ ПРОЕКТА СВОЕГО САЙТА ..................... 97
     ПРИЛОЖЕНИЕ .........................................................................................................................100
     БИБЛИОГРАФИЧЕСКИЙ СПИСОК ..............................................................................102



                                                                       3


                               ВВЕДЕНИЕ
     Настоящее учебное пособие предназначено для студентов гуманитарных
специальностей, изучающих компьютерную графику и Web-дизайн, но также
может быть полезно другим специалистам, занимающимся подготовкой графиче-
ских изображений для печати или для web-страниц.
     Цель пособия: предоставить теоретический материал для самостоятельного
изучения, а также помочь разобраться в наиболее сложных для студентов темах
лекционного курса. С целью повышения внимания и активации интереса к изу-
чаемым разделам, в пособие включены тематические упражнения, которые явля-
ются дополнением к практическому курсу. Упражнения демонстрируют творче-
ский подход в сфере компьютерной графики.
     В пособии изложен необходимый теоретический материал по растровой и
векторной графике. Освещены современные графические редакторы. Показаны
общие принципы работы и область их использования. Рассмотрены особенности
подготовки графики для печати и web-изданий в профессиональном редакторе
Photoshop.
     Пособие состоит из двух разделов:
   1. Компьютерная графика.
   2. Web-дизайн.
     В первом разделе изложены навыки, обеспечивающие качественную печать
изображений и правильное представление цветов на экранах мониторов, для
электронных публикаций. Поэтапно расписана настройка оборудования (сканера,
монитора, принтера) для работы с изображениями. Рассмотрены важные вопросы
преобразования цветового охвата и программной цветопробы.
     Информация, представленная во втором разделе, поможет грамотно сплани-
ровать сайт и разместить его в сети. Показана структура организации информа-
ции в Интернете. Описаны современные web-технологии. Изложены основные
требования к размещению информации на сайте. Полученные знания позволяют
избежать многих ошибок при разработке сайтов.
     Материал подобран с учётом выполняемых работ в рамках данной дисцип-
лины.
     Учебное пособие содержит необходимый комплекс знаний, терминов и поня-
тий.
     В приложение включены справочные материалы, необходимые при выпол-
нении практических работ.




                                       4


                   1. КОМПЬЮТЕРНАЯ ГРАФИКА
             1.1. ВВЕДЕНИЕ В КОМПЬЮТЕРНУЮ ГРАФИКУ
1.1.1. Компьютерная графика. История появления и область её применения
     Понятие «компьютерная графика» очень часто трактуется по-разному. В од-
них источниках компьютерная графика – это область информатики, занимающая-
ся проблемами получения различных изображений (рисунков, чертежей, мультип-
ликации) на компьютере [2]. Другие авторы считают, что компьютерная графика –
это новая отрасль знаний, которая, с одной стороны, представляет комплекс аппа-
ратных и программных средств, используемых для формирования, преобразова-
ния и выдачи информации в визуальной форме на средства отображения ЭВМ, с
другой стороны, является совокупность методов и приемов для преобразования
при помощи ЭВМ данных в графическое представление[10].
     А по мнению художника Максима Викторовича Кудерского [10], члена Союза
художников России, компьютерная графика – это вид искусства. Причем по твор-
ческим затратам, по его мнению, создание произведения искусства средствами
компьютерной графики даже более трудоемкое дело, чем обычная работа живо-
писца.
    Но наиболее ёмкое и лаконичное определение приведено в энциклопедии Ви-
кипедия [12].
     Компьютерная графика (также машинная графика) – область деятельно-
сти, в которой компьютеры используются как для синтеза изображений, так и для
обработки визуальной информации, полученной из реального мира. Также ком-
пьютерной графикой называют и результаты этой деятельности.
     Интерактивная компьютерная графика предполагает воспроизведение изо-
бражений в режиме диалога пользователя с ЭВМ в реальном масштабе времени.
     Работа с компьютерной графикой – одно из самых популярных направлений
использования персонального компьютера, причем занимаются этой работой не
только профессиональные художники и дизайнеры. На любом предприятии время
от времени возникает необходимость в подаче рекламных объявлений в газеты и
журналы, в выпуске рекламной листовки или буклета. Иногда предприятия зака-
зывают такую работу специальным дизайнерским бюро или рекламным агентст-
вам. Без компьютерной графики не обходится ни одна современная программа.
Работа над графикой занимает до 90% рабочего времени программистских кол-
лективов [10], выпускающих программы массового применения. Основные трудо-
затраты в работе редакций и издательств тоже составляют художественные и
оформительские работы с графическими программами. Необходимость широкого
использования графических программных средств стала особенно ощутимой в
связи с развитием Интернета. Красочно оформленные страницы привлекают вни-
мание посетителей сети.
     Область применения компьютерной графики не ограничивается одними ху-
дожественными эффектами. Во всех отраслях науки, техники, медицины, в ком-
мерческой и управленческой деятельности используются построенные с помощью
компьютера схемы, графики, диаграммы, предназначенные для наглядного ото-
                                        5


бражения разнообразной информации. Конструкторы, разрабатывая новые модели
автомобилей и самолетов, используют трехмерные графические объекты, чтобы
представить окончательный вид изделия. Архитекторы создают на экране мони-
тора объемное изображение здания, и это позволяет им увидеть, как оно впишется
в ландшафт. Сейчас широко вошёл в нашу жизнь дизайн интерьеров. В этой об-
ласти разработано немало программ, позволяющих ещё на этапе моделирования
обустроить внутренний вид помещения, а наиболее подходящий проект воплотить
в жизнь. Информация, содержащаяся в изображении, представлена в наиболее
концентрированной форме и как правило, более доступна для анализа: для ее вос-
приятия получателю достаточно иметь относительно небольшой объем специаль-
ных знаний.
     Временем зарождения машинной графики можно считать 60-е годы прошлого
века. Первые системы машинной графики (кодирования графических объектов)
появились вместе с первыми цифровыми компьютерами. Были сформулированы
принципы рисования отрезками, удаления невидимых линий, методы отображе-
ния сложных поверхностей, определены методы формирования теней, учета ос-
вещенности сюжета. В 1963 году американский учёный Айвен Сазерленд создал
первый векторный редактор «Sketchpad». В середине 1960-х была разработана
цифровая электронная чертежная машина (фирма Itek). В 1964 году General
Motors представила свою DAC-1 – систему автоматизированного проектирования,
разработанную совместно с IBM [6].
     В 70-е годы значительное число теоретических и прикладных работ было на-
правлено на развитие методов отображения пространственных форм и объектов.
Это направление принято называть трехмерной машинной графикой. Математи-
ческое моделирование трехмерных сюжетов требует учета трёхмерности про-
странства предметов, расположения в нем источников освещения и наблюдения,
что определило необходимость разработки методов представления сложных по-
верхностей, генерирования текстур, рельефа, моделирования условий освещения.
Методы трехмерной машинной графики позволяют визуализировать сложные
функциональные зависимости, получать изображение проектируемых, еще не
созданных объектов, оценить облик предмета из недоступной для наблюдения по-
зиции и решить ряд подобных задач.
     Первоначально компьютеры не имели дисплея. Вся информация в те огром-
ные ламповые монстры загружалась на бумажных носителях, известных как пер-
фоленты и перфокарты, результат также выдавался на бумагу. Однако рост мощ-
ности компьютеров и сложности расчетов привел к необходимости разработки
более удобного способа общения с машиной. В результате появился дисплей.
     Долгое время дисплеи были текстовыми, то есть ничего кроме цифр, а позд-
нее букв, они выводить не могли. Однако уже тогда было понятно, что удобство
работы требует большего – возможности вывода изображений. И такие дисплеи
появились. Именно с этого можно начинать отсчет существования компьютерной
графики.
     Первые опыты с компьютерной графикой были проведены в компьютерных
играх. И только потом началось освоение более полезных вариантов ее примене-
ния.
                                        6


     История компьютерной графики с этой точки зрения началась намного позд-
нее, в конце 70-х – начале 80-х годов прошлого века. Важную роль в этом процес-
се сыграл выпуск компанией Apple компьютеров Macintosh. Они были для своего
времени настоящей революцией [6].
     Сегодня человек, претендующий на работу в сфере полиграфии и web-
дизайна, обязан владеть основными графическими пакетами. Даже художники
оцифровывают свои работы и проводят дополнительную правку на компьютере.
Возросший интерес многих пользователей к графическим программам обусловлен
коррекционной и художественной обработкой цифровых фотоснимков.
     Компьютерная графика является одной из научных областей деятельности. В
области компьютерной графики защищаются диссертации, а также проводят раз-
личные конференции:
    · http://www.siggraph.org/conference Конференция Siggraph (проводит США);
    · http://www.graphicon/.ru Графикон (проводится в России);
    · http://www.cgevent.ru/ CG-событие (проводится в России).
                        1.1.2. Источники изображений
    Основное отличие создания работ карандашом или кистью от работы в гра-
фических пакетах состоит в том, что в первом случае все нужно делать самостоя-
тельно, полагаясь только на себя, а во втором можно использовать готовые рисун-
ки, фотографии, шрифты и т.д. Большая часть работы среднестатистического ди-
зайнера сводится к правильной компоновке и обработке готовых фрагментов. Ис-
точниками изображений могут служить сканеры, цифровые фотоаппараты, кли-
парты, Интернет.
     Сканеры. На сегодняшний день большое распространение получили скане-
ры. Современные сканеры позволяют получить качественную цифровую копию
фотографии не только с бумажного носителя, но и с негативной фотоплёнки или
со слайда. Слайд-сканеры позволяют получать плоские изображения небольших
объёмных предметов (например, карандашей, часов, ювелирных украшений и
т.п.).
    Цифровой фотоаппарат. На сегодняшний день цифровые фотоаппараты уже
далеко не редкость, т.к. цена многих моделей доступна для рядового потребителя.
Удобство и возможности по обработке и хранению снимков заставляют людей пе-
реходить с классической фотографии на цифровую. Можно хранить тысячи изо-
бражений на жестком диске компьютера, распечатывая только самые удачные.
Современные фотолаборатории печатают с любого цифрового носителя, включая
гибкие и компакт-диски.
    Клипарты. В свободной продаже есть диски, содержащие изображения на
любую тематику. На лицензионных дисках их обычно несколько десятков, на пи-
ратских – до тысячи. Многие графические пакеты идут в комплекте с собствен-
ным клипартом. Главное достоинство этого способа получения изображения для
работы – качество материала.
    Интернет. Существует множество ресурсов, распространяющих изображе-
ния. Например, при работе в CorelDRAW можно подключаться к сетевому кли-
                                        7


парту, содержащему достаточно много векторных рисунков. Можно посетить сле-
дующие сайты:

       Платные
   1. www.apwideworld.com (Банк фотографий).
   2. www.clipart.com (3 миллиона фотографий, векторных рисунков, иконок,
шрифтов и многого другого).
       Бесплатные
   1. www.deviantart.com (Фотографии, размещенные на этом ресурсе, можно ис-
пользовать в учебных целях, не преследующих коммерческой выгоды).
   2. www.september-art.narod.ru (Большое количество бесплатных векторных
изображений).
   3. www.photobox.ru (Российский банк фотографий. Большинство изображений
бесплатны).
   4. www.logotypes.ru (Коллекция из нескольких тысяч бесплатных логотипов).

                    1.1.3. Методы предоставления графики
    По способам задания изображения компьютерную графику можно разделить
на двухмерную и трёхмерную.
     Двумерная графика классифицируется по типу представления графической
информации и следующими из него алгоритмами обработки изображений. Её раз-
деляют на векторную, растровую и фрактальную.
     Векторная графика представляет изображение как набор примитивов: точек,
прямых, окружностей, прямоугольников, а также, как общий случай, сплайны не-
которого порядка. Объектам присваиваются некоторые атрибуты, например, тол-
щина линий, цвет заполнения. Рисунок хранится как набор координат, векторов и
других чисел, характеризующих набор примитивов. При воспроизведении пере-
крывающихся объектов имеет значение их порядок [12].
     Растровая графика всегда оперирует двумерным массивом (матрицей) пиксе-
   1
лов . Каждому пикселу придаётся значение яркости, цвета, прозрачности или комби-
нация этих значений. Растровый образ имеет некоторое число строк и столбцов [12].
     Фрактал – объект, отдельные элементы которого наследуют свойства роди-
тельских структур. Поскольку более детальное описание элементов меньшего
масштаба происходит по простому алгоритму, описать такой объект можно всего
лишь несколькими математическими уравнениями.
     Более подробно представленные типы графики рассматриваются на страни-
цах 17 и 29. На рис. 1 приведены примеры рассмотренных типов изображений.




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


                                                                                    2




        Рис. 1. Слева направо изображены: векторное, растровое и фрактальное изображения
                               зображены:
    Трёхмерная графика оперирует с объектами в трёхмерном пространстве.
Обычно результаты представляют собой плоскую картинку, проекцию3. Трёхмер-
ная компьютерная графика широко используется в кино, компьютерных играх.




                              Рис. 2. Трёхмерная модель мясорубки
    В данном пособии изложены материалы по двумерной графике.
    Сейчас существует огромное разнообразие программного обеспечения. Чтобы
определиться с выбором программы, надо знать её основное назначение
                                                         назначение.
    Правильный выбор приложения определяется главным образом кругом
                                     определяется,           образом,
стоящих перед Вами задач: подготовка изображения для печати, или разработка и
создание новых шрифтов, или разработка web страниц, или все вместе. Остальное
                                       web-страниц,
уже дело индивидуальных предпочтений.

        1.1.4. Программное обеспечение для работы с двумерной графикой
                        ое                             мерной
     Программы можно дифференцировать по их назначению [6]:
     Для создания и редактирования двумерной графики – графические реда
                                                                      редак-
торы, которые подразделяются на векторные и растровые. Рассмотрим профе
                                                                    профес-
сиональные программы, которые завоевали своё место на рынке программного
обеспечения в области графики.
                            Графические редакторы
        Векторные:
    · Macromedia Flash – редактор анимированной векторной графики. Позвол
                                                                   Позволя-
ет изготавливать анимационные фильмы такого маленького размера, что их мо
                                                                       мож-
но размещать в Интернете.

    2
      Изображение взято из энциклопедии (Википедия)
    3
       Проекция (лат. projectio – выбрасывание вперёд) – изображение трёхмерной фигуры на
так называемой картинной (проекционной) плоскости.
                                                9



    
Яндекс цитирования Яндекс.Метрика