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

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

Голосов: 7

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

Приведенный ниже текст получен путем автоматического извлечения из оригинального PDF-документа и предназначен для предварительного просмотра.
Изображения (картинки, формулы, графики) отсутствуют.
                                 1.2.2. Векторная графика
     Векторное представление изображения кардинально отличается от растрово-
го. Его принцип состоит в том, что описываются только основные точки изобра-
жения, а все промежуточные достраиваются между ними по определенным мате-
матическим законам. Например, если необходимо нарисовать отрезок прямой,
можем указать только координаты концов отрезка, а также сделать пометку о том,
что соединяющая их линия – прямая. Для описания окружности достаточно задать
ее центр, указать радиус и сделать пометку «окружность». Аналогичным образом
кодируются цвет объекта, толщина линий и др. В таком виде информация хранит-
ся в файле, а когда приходит время отобразить графический элемент на мониторе,
бумаге или другом носителе, выводное устройство само построит элементы изо-
бражения в соответствии с инструкциями.
                                  Кривые Безье
    Для описания векторного графического объекта существует множество спо-
собов. Самый удобный и распространенный из них – это так называемые «кривые
Безье». Придумал эту модель в 1968 году французский инженер-математик Пьер
Безье для решения узкоспециальной задачи – простого описания криволинейных
фигур для машин по обработке листового металла. Способ оказался настолько
удачным, что очень скоро завоевал популярность далеко за пределами инженер-
                                      ной графики.
                                          Суть его сводится к следующему:
                                      геометрическая фигура разбивается на не-
                                      сколько относительно простых участков,
                                      которые называются сегментами. Каждый
                                      сегмент начинается и заканчивается осо-
                                      бой якорной точкой. В файле описываются
                                      координаты якорных точек, а также первая
                                      и вторая производная выходящего из них
                                      сегмента. На Рис. 19 показан фрагмент
                                      кривой Безье, как она выглядит в Corel-
                                      DRAW.
           Рис. 19. Кривые Безье          Якорные точки – это маленькие белые
квадратики (1), из которых выходят вспомогательные прямые отрезки (2). Эти от-
резки называются Control Handle (Направляющая линия). Каждая направляющая
заканчивается черной точкой – маркером (3), ее длина и направление как раз и со-
ответствуют первой и второй производным. Чтобы изменить кривизну сегмента,
достаточно потянуть за маркер соответствующей направляющей.
                         Растрирование и векторизация
    Растровая и векторная графика могут превращаться друг в друга. Процесс пе-
ревода векторной картинки в точечное изображение называется растрированием,
обратный – векторизацией или отрисовкой.
    Получить векторное изображение из растрового, а также осуществить обрат-
ный процесс можно с помощью редактора CorelDRAW. В состав меню – растро-
вое изображение CorelDRAW X3 – входят операции: преобразовать в растровое
                                        30


изображение и трассировать растровое изображение, которые соответственно по-
зволяют получить растровое или векторное изображение.
                               ПРИМЕЧАНИЕ
    Практически невозможно получить точно такое же растровое изображение из
векторного элемента и наоборот без потери качества, поэтому к смене вида гра-
фики для изображения нужно подходить осторожно.
                       ВЫПОЛНИТЕ УПРАЖНЕНИЕ
     Создание пригласительной открытки в программе CorelDRAW Х3
(см. Рис. 27)
   1. Запустите программу CorelDRAW. Задайте размер макета открытки на па-
нели Свойств – А6 (Рис. 20) (можно выбрать нестандартный формат изображе-
ния).




                               Рис. 20. Панель свойств
    2. На инструментальной панели выберите инструмент Прямоугольник, ука-
зав верхний левый угол, не отрывая мыши, переместитесь в правый нижний угол
формата. В результате получите прямоугольник, по размеру формата. Он будет
фоном открытки. Создайте градиентную заливку. Для этого поместите указатель
мыши на инструмент Заливки (ведро с краской), при нажатии и удержании ука-
зателя на инструменте откроется вкладка, где спрятан инструмент Градиентная
заливка. Установите указанные на рисунке настройки (Рис. 21) По окончании
нажмите ОК.




                    Рис. 21. Диалоговое окно Градиентной заливки
   3. выберите инструмент Художественное оформление (Рис. 22).


                   Рис. 22. Инструмент Художественное оформление

                                         31


   В меню Эффекты выберите команду Художественное оформление. В докере
(окне) укажите соответствующие мазки кисти, указателем мышки рисуйте кри-
вую (траектория расположения мазков) (Рис. 23). На открытке появились листья.




                       Рис. 23. Окно Художественное оформление
   4. выбрав инструмент Текст, напишите текст «Приглашаем на «Осенний
бал», щёлкнув мышью по полю рисунка. Создав текст, следует его повернуть.
Перейдите на инструмент Указатель, двойной щелчок по тексту предоставляет
возможность трансформировать объект. Удерживая указателем угол объекта,
придайте ему необходимый угол наклона (Рис. 24). Для придания цвета тексту,
необходимо его выделить и выбрать подходящие цвета контура и заливки, после-
довательным нажатием левой и правой клавиш мыши на цветовой палитре.


                  Рис. 24. Инструмент Текст. Поворот текстового блока
    Текстовую информацию можно поместить иначе. выберите инструмент Текст
и, удерживая указатель мыши, слева направо, по диагонали создайте поле для по-
следующего заполнения текстом. В данном примере это информация о месте и
времени проведения торжества. Чтобы текст заполнил всё выделенное простран-
ство, выведите на экран подменю, нажав правую клавишу мыши, и укажите ко-
манду Текст в рамку (Рис. 25). В результате проделанной операции текст равно-
мерно распределится по всей рамке.




              Рис. 25. Заполнение текстом выделенного под него пространства
   Каждый созданный объект помещается программой на новый слой. Слоями
можно управлять с помощью команды Порядок, которую можно вызвать из ме-
ню Упорядочить или вызвав подменю правой клавишей мыши, для конкретного
объекта (Рис. 26).


                                           32


                            Рис. 26. Упорядочивание объектов
    5. Завершите выполнение открытки (Рис. 27). Сохраните полученный резуль-
тат. Меню Файл, команда Сохранить как, название файла «Открытка», расши-
рение *.cdr. Информация по векторным форматам изложена ниже.




                         Рис. 27. Приглашение на «Осенний бал»
   Векторное изображение можно перевести в растровое. Процесс получил на-
звание растрирование. Обратный процесс перевода растрового изображения в
векторное – векторизация или трассировка (отрисовка). Данные команды по-
мещены в меню Растровые изображения (Рис. 28)




         Рис. 28. Преобразования изображения в растровое и векторное в CorelDRAW
   Углубить знания в области векторной графики поможет книга Александра
Шапошникова «CorelDRAW 10 – художнику» [24].


                                           33


                        Основные векторные форматы
    Первым популярным форматом для представления векторной графики следу-
ет считать HPGL, разработанный компанией Hewlett-Packard для семейства своих
плоттеров. Плоттер (графопостроитель) – это устройство для нанесения изобра-
жения на бумагу. Его перо в каждый заданный момент может двигаться только по
прямой. Поэтому объекты в HPGL разбивались на отрезки и в таком виде записы-
вались в файл. Способ оказался весьма простым и эффективным, хотя и громозд-
ким. HPGL в измененном и усложненном виде дожил до наших дней.
    Однако сегодня наибольшее распространение получили другие, более совер-
шенные форматы представления векторной графики.
       1. Adobe PostScript (EPS, PDF)
    В настольных издательских системах (DeskTop Publishing -DTP) фактически
является стандартом отрасли. Первоначально он был разработан как язык пред-
ставления страницы для высококачественных выводных устройств (лазерных
принтеров и фотонаборных автоматов), но сегодня широко применяется и в про-
граммах верстки, и в графических пакетах. Использует как векторный, так и рас-
тровый способы записи информации. Последняя версия языка (Level 3) позволяет
работать с такими сложными эффектами, как прозрачность, Hi-Fi-печать (в том
числе Pantone Hexochrome), поддерживает 4096 градаций каждого цвета и т. д.
Существует несколько «диалектов» PostScript, самый известный из которых
Encapsulated PostScript (EPS). Другой, бурно развивающийся сегодня вариант
языка, – Portable Document Format (PDF), формат пакета Adobe Acrobat. По су-
ти, он представляет собой упрощенную и оптимизированную версию PostScript.
Документ Adobe Illustrator также является PostScript-файлом.
       2. Drawing eXchange Format (DXF)
    Формат, предназначенный для использования в системах автоматизированно-
го проектирования, прежде всего AutoCAD. В DXF реализованы многие возмож-
ности, отсутствующие в большинстве других форматов, например, хранение
трехмерных объектов.
       3. Windows MetaFile (WMF)
    WMF (англ. Windows MetaFile) – универсальный формат векторных графиче-
ских файлов для Windows – приложений. Используется для хранения коллекции
графических изображений Microsoft Clip Gallery. Формат разработан Microsoft и
является неотъемлемой частью Windows, так как сохраняет последовательность
аппаратнонезависимых функций GDI (Graphical Device Interface), непосредствен-
но выводящих изображение в заданный контекст графического устройства (на эк-
ран, на принтер и т.п.). Очень часто WMF неявно используется для сохранения
образа окна вывода программы и его последующего восстановления, а также при
переносе информации через буфер обмена (clipboard). Из MS Windows запись и
чтение в файл этого формата осуществляются чрезвычайно просто и быстро, в
других операционных системах поддержка этого формата бесполезна. Его пони-
мают некоторые программы для Macintosh. На платформе Macintosh аналогичную
роль играет формат PICT.


                                       34


       4. PICT
    Аналог формата WMF для платформы Macintosh. Имеет все те же недостатки,
что и его собрат по Windows, помноженные на малую распространенность ком-
пьютеров Apple.
       5. SVG
    SVG (от англ. Scalable Vector Graphics – масштабируемая векторная графика;
произносится [эс-ви-джи́]) – язык разметки масштабируемой векторной графики,
созданный Консорциумом Всемирной паутины (W3С) 11и входящий в подмноже-
ство расширяемого языка разметки XML, предназначен для описания двухмерной
векторной и смешанной векторно-растровой графики в формате XML. Поддержи-
вает как неподвижную, так анимированную и интерактивную графику – или, в
иных терминах, декларативную и скриптовую.
       6. DjVu
    DjVu (от фр. déjà vu – «уже виденное») – технология сжатия изображений с
потерями, разработанная специально для хранения сканированных документов –
книг, журналов, рукописей и пр., где обилие формул, схем, рисунков и рукопис-
ных символов делает чрезвычайно трудоёмким их полноценное распознание.
Также является эффективным решением, если необходимо передать все нюансы
оформления, например, исторических документов, где важное значение имеет не
только содержание, а цвет и фактура бумаги; дефекты пергамента: трещинки, сле-
ды от складывания; исправления, кляксы, отпечатки пальцев; следы, оставленные
другими предметами.
    DjVu стал основой для нескольких библиотек научных книг. Огромное коли-
чество книг в этом формате доступно в файлообменных сетях.
    Формат оптимизирован для передачи по сети таким образом, что страницу
можно просматривать ещё до завершения скачивания. DjVu-файл может содер-
жать текстовый (OCR) слой, что позволяет осуществлять полнотекстовый поиск
по файлу. Кроме того, DjVu-файл может содержать встроенное интерактивное ог-
лавление и активные области – ссылки, что позволяет реализовывать удобную на-
вигацию в DjVu-книгах.
    Разработчики программ векторной графики (CorelDRAW, Macromedia
FreeHand и т.д.) создают собственные форматы представления данных. Хотя в ос-
нове каждого из них лежит всё та же идея кривых Безье, конкретные варианты
могут настолько отличаться друг от друга, что встает проблема совместимости
форматов.

                             1.3. ТЕКСТ И ШРИФТЫ
                      1.3.1. Основные типы компьютерных шрифтов
    Немаловажную роль в компьютерной графике занимают шрифты. От умелого
их использования зависит привлекательность графической работы.

   11
      Консо́рциум Всеми́рной паути́ны (англ. World Wide Web Consortium, W3C) – организа-
ция, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины.
Консорциум возглавляет Тим Бернерс-Ли, изобретатель HTTP, HTML, URI и автор множества
других разработок в области информационных технологий.
                                             35


     Компьютерный шрифт – понятие специфическое. Он представляет собой ко-
дированный набор символов, отображаемых на выводном устройстве (экране или
принтере), а также ряд специальных неотображаемых символов (конец строки,
пробел и т. д.). С некоторой долей условности все компьютерные шрифты можно
поделить на три типа.
     Экранные шрифты. Используются для отображения текста на мониторе.
Каждый символ представляет собой двуцветную матрицу экранных пикселей. Как
правило, в каждом шрифте представлено несколько фиксированных по размеру
наборов символов. Это позволяет более гибко изменять размер символов в зави-
симости от разрешения. Данный тип шрифтов оптимален для применения в слу-
жебных элементах интерфейса – диалоговых окнах, панелях, палитрах, меню и т. д.
При выводе на печать экранные символы выглядят крайне непрезентабельно.
     Принтерные шрифты. Подгружаются непосредственно в память печатного
устройства, а иногда сразу «зашиты» в памяти принтера. Это позволяет макси-
мально ускорить процесс печати, но создает серьезные неудобства из-за невоз-
можности увидеть текст на экране. Теоретически идеальной является связка «эк-
ранный шрифт – принтерный шрифт того же названия». На практике часто оказы-
вается, что экранная и принтерная версия реализованы по-разному, из-за чего
текст «плывет», некоторые символы исчезают и т. д.
     Универсальные шрифты. Предназначены как для вывода на экран, так и для
печати. В отличие от предыдущих типов шрифта, всегда представляют собой на-
бор векторных объектов, которые растрируются только в момент отображения на
выводном устройстве. Это позволяет добиваться максимального качества отобра-
жения символов, а также гарантирует идентичность экранного и отпечатанного
текста. Главный недостаток – требует дополнительных вычислительных ресурсов
для растрирования «на лету» при выводе на экран.
     В настоящее время наиболее распространены два формата универсальных
компьютерных шрифтов.
     Adobe Type 1
     Шрифты формата PostScript. Изначально существовали как принтерные
шрифты для PS-устройств, однако бурное развитие допечатных технологий при-
вело к созданию специальных системных утилит для отображения шрифтов Ту-
ре 1 на экране. Лучшей в этой области является программа Adobe Type Manager.
     True Type
     Наиболее распространенный сегодня векторный шрифтовой формат. Облада-
ет некоторой избыточностью в описании. Непрофессионально сделанные шрифты
True Type часто приводят к сбоям при выводе на PostScript-устройства.
                               ПРИМЕЧАНИЕ
    Часто при выводе на профессиональных PostScript-устройствах (например, на
фотонаборных автоматах) возникает необходимость подгружать все используе-
мые шрифты в RIP (Raster Image Processor) устройства. Тонкость состоит в том,
что в принтерный PS-файл может быть включен только PostScript-шрифт, поэтому
шрифты True Type преобразуются в формат Туре 1, иногда даже не информируя
об этом пользователя. Если True Type сделан неаккуратно, может возникнуть
                                        36


серьезная ошибка, которая в лучшем случае не позволит завершить работу RIP, а в
худшем – заставит перевыводить фотоформы.
    Особо следует сказать о таком экзотическом типе компьютерных шрифтов,
как Multiple Master. Это шрифты Туре 1, обладающие определенными свойствами.
В частности, пользователь может плавно изменять толщину штриха и ширину
символа. Для этого можно использовать Adobe Type Manager или палитру ММ
Design (Настройка Multiple Master) в Adobe Illustrator.
    Надо отметить, что векторный компьютерный шрифт – это не просто таблица
символов, а небольшая, но достаточно сложная программа. Обилие доступных
программ для шрифтовой генерации и конвертации привело к тому, что появилось
огромное количество некачественных шрифтов, которые, на первый взгляд, вы-
глядят вполне прилично, но на завершающей стадии работы приводят к катастро-
фическим результатам. В первую очередь это относится к результатам неумелой
русификации True Type.
    Рекомендуется тщательно подбирать шрифты и использовать только легаль-
ные шрифтовые коллекции, например, Para Туре.
                          1.3.2. Основные термины шрифтов
                                                 Немаловажную роль при созда-
                                             нии документов играет набор и ре-
                                             дактирование текста. Вот некоторые
                                             термины, которые нужно усвоить
                                             для того, чтобы уверенно работать с
                                             текстовыми объектами (Рис. 29).
                                             Шрифт – графическая форма зна-
                                             ков (букв, цифр, специальных сим-
                                             волов)     определенной    системы
                                             письма.
                                                 Кегль – размер шрифта по его
                                             высоте, как правило, измеряемый в
                                             пунктах.
                                                 Начертание – вариант рисунка
        Рис. 29. Метрические атрибуты шрифта шрифта. Начертания классифици-
                                             руются по плотности (узкое, нор-
мальное, широкое), по насыщенности (светлое, полужирное, жирное), по наклону
(прямое, курсивное, наклонное).
     Гарнитура – комплект шрифтов различных начертаний, насыщенности, кегля
и плотности, объединенных общностью рисунка очка. Гарнитуры шрифтов имеют
определенные названия, например, Литературная, Arial, Times.
     Кернинг – изменение расстояния между буквами, входящими в определен-
ные пары.
     Трекинг – изменение расстояния между всеми символами выделенного тек-
ста.
     Базовая линия – линия, на которой располагаются символы строки.
     Интерлиньяж – расстояние между базовыми линиями соседних строк.
                                        37


    выключка – способ выравнивания текста; может быть левой (строки вырав-
ниваются только по левому краю), правой (только по правому краю), центральной
(по центру), полной (по левому и правому краю одновременно, кроме последней
строки, которая выравнивается по левому краю) и форсированной (по левому и
правому краю выравниваются все строки, включая последнюю).
    Существуют две системы типографских измерений: англо-американская сис-
тема или система Пика (Pica), и система Дидо (Didot) (табл. 2 ).
    Система Пика применяется в Великобритании, Америке и в большинстве
стран остального мира, кроме континентальной Европы. Система Дидо применя-
ется в большинстве стран континентальной Европы и в России. В обеих системах
основной единицей измерения является типографский пункт (point); но в то время
как в англо-американской системе он равен округленно 0,351 мм, пункт в системе
Дидо чуть больше – округленно 0,376 мм [16].
                                                                    Таблица 2
                          Стандартные размеры шрифтов
         Размер в   Aнгло-американская сис-        Система Дидо
         пунктах      тема (система Пика)
                    Миллиметры      Дюймы      Миллиметры Дюймы
             1          0,351       0,013837      0,376   0,0148
             3          1,054       0,041511      1,128   0,0444
             6          2,109       0,083022      2,256   0,0888
             7          2,460       0,096859      2,631   0,1036
             8          2,812       0,110696      3,007   0,1184
             9          3,163       0,124533      3,383   0,1332
            10          3,515       0,138370      3,759   0,1480
            11          3,866       0,152207      4,135   0,1628
            12          4,218       0,166044      4,511   0,1776
            14          4,920       0,193718      5,263   0,2072
            18          6,326       0,249066      6,767   0,2664
            24          8,435       0,332088      9,022   0,3552

                         1.4. ОПИСАНИЕ ЦВЕТОВ
                    1.4.1. Цветовой охват и модели цвета
    При работе с растровыми изображениями на компьютере совершаются опера-
ции с цветом: ретушь, операции, связанные с цветовой коррекцией или обычная
подготовка web-страницы, содержащей фон и текст, и т. п.. При этом пользова-
тель стремится добиться идентичности созданного на своём компьютере, а
затем представленного для визуального обзора другим (в печатном или элек-
тронном виде). Для достижения поставленной цели необходимо разобраться в ин-
терпретации цвета различными устройствами.
    Число цветов безгранично. Одни устройства могут воспринимать цвета – это
глаза человека и некоторых животных, фотопленка, сканер, другие их воспроиз-
водят офсетная машина, монитор, фотобумага. При каждом из этих процессов
                                       38


число цветов хоть и велико, но меньше всего диапазона. Так, глаз не воспринима-
ет цвета ультрафиолета и инфракрасного излучения. Фотоаппарат бессилен перед
очень темными оттенками. Традиционная офсетная печать не передает очень
светлые и яркие тона.
                                              Диапазон цветов, который может быть
                                          воспроизведен, зафиксирован или описан
                                          каким-либо способом, называется цвето-
                                          вым охватом. Следовательно, цветовой
                                          охват монитора, офсетной машины и глаза
                                          разный, причем у глаза он наибольший.
                                          Часть из того, что воспринимает глаз, мо-
                                          жет передать монитор (на экране нельзя
                                          точно воспроизвести, например, чистые
                                          голубой или желтый цвета). Часть из того,
                                          что передает монитор, можно напечатать
                                          (например, при полиграфическом исполне-
    Рис. 30. Цветовой охват человеческого нии совсем не воспроизводятся цвета, со-
         глаза и разных устройств         ставляющие которых имеют очень низкую
плотность). Разность цветовых охватов устройств вывода и человеческого глаза
представлена схемой (Рис. 30). Каждый из охватов может быть выражен моделью
цвета.
    Для математического описания цвета было предложено несколько цветовых
моделей. Устройство моделей одинаково: в каждой из них принято несколько ба-
зовых компонентов, и каждый базовый компонент вносит вклад в создание кон-
кретного цвета. Базовые компоненты модели называются каналами. Цвета, кото-
рые можно описать, используя данную модель, входят в ее цветовой охват или,
говоря иначе, образуют цветовое пространство модели. Все модели имеют раз-
личный цветовой охват.
                  Рассмотрим наиболее известные цветовые модели
                                      Модель RGB (Red – красный, Green – зеле-
                                   ный, Blue – синий) описывает излучаемые цве-
                                   та. Базовыми компонентами модели являются
                                   три цвета лучей – красный, зеленый, синий.
                                   При восприятии цвета человеком именно они
                                   непосредственно воспринимаются глазом. Ос-
                                   тальные цвета представляют собой смешение
                                   трех базовых в разных соотношениях. При
                                   сложении (смешении) двух лучей основных
                                   цветов результат светлее составляющих. Цвета
                                   этого типа называются аддитивными (Рис. 31).
     Red    Magenta
                       Blue        RGB – трехканальная цветовая модель. В моде-
         Yellow       Cyan         ли RGB кодирует изображение сканер и ото-
                                   бражает экран монитора.
             Green
      Рис. 31. Аддитивные цвета           39



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