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

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

Голосов: 7

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

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

                                                                     Таблица 2
    Связь между линейным размером иллюстрации и размером файла при разных
разрешениях отпечатка
   Размер  Разрешение –         Разрешение –      Разрешение –   Разрешение –
 отпечатка     75 PPI              150 PPI           300 PPI        600 PPI
 10×15 см     380 Кбайт           1,5 Мбайт         6 Мбайт        24 Мбайт
фотоснимок
 25×30 см
  обложка     1,9 Мбайт            7,5 Мбайт        30 Мбайт       120 Мбайт
  журнала
 50×30 см
 разворот     3,8 Мбайт            15 Мбайт         60 Мбайт       240 Мбайт
  журнала
                       Масштабирование изображения
   Масштаб просмотра никак не влияет на размеры изображения. При необхо-
димости изменения размера надо обратиться к специальной команде Image Size
                                           (Размер изображения), находя-
                                           щейся в меню Image (Изображе-
                                           ние).
                                             В окне Image Size (Размер
                                           рисунка) (Рис. 14) в поле Pixel
                                           Dimensions (Размер в пикселях)
                                           по умолчанию отображаются раз-
                                           меры изображения в пикселях.
                                           Рядом с заголовком области Pixel
                                           Dimensions (Количество пиксе-
                                           лей) указан объем дисковой и
                                           оперативной памяти, занимаемый
                                           изображением. В группе парамет-
                                           ров Document Size (Размер доку-
                                           мента) геометрические размеры
                                            изображения, которые оно будет
    Рис. 14. Окно настройки размера изображения
              в программе Photoshop         иметь при отпечатке на принтере.
                                            Ниже, в поле Resolution (Разре-
шение), указано разрешение в пикселях на дюйм. Диалоговое окно Image Size
(Размер рисунка) позволяет не только узнавать, но и изменять параметры доку-
                                           20


мента. При этом возможны два варианта, определяющихся состоянием флажка
Resample Image (Тип масштабирования):
    · Если флажок установлен, размер и разрешение изображения варьируются
независимо. При этом Photoshop удаляет из изображения пиксели или добавляет к
нему новые. Цвета добавляемых пикселей вычисляются с помощью интерполя-
ции.
    · Если флажок сброшен, «абсолютный» размер изображения в пикселях фик-
сируется. Изменение размера приводит к изменению разрешения и наоборот. По
существу, при этом с изображением не производится никаких действии, а только
запоминаются новые значения размеров и разрешения.
     Интерполяция(дискретизация) – это математический способ увеличения ко-
                          личества пикселей в растровом изображении, который
                          используется в графических пакетах. Посмотрите на
                          Рис. 15.
                              Изображение выше, обозначает масштабирование
                          растровой картинки из четырех пикселей в два раза, ко-
                          личество пикселей никак не изменилось, а размер кар-
                          тинки увеличился за счет увеличения количества точек,
                          отводимых под отображение одного пикселя.
                              Нижнее изображение иллюстрирует интерполяцию,
     Рис. 15. Масштабиро- кроме четырех исходных пикселей, появилось еще две-
 вание и интерполяционное надцать интерполяционных. Их «додумал» компьютер
        увеличение        на основе одной из пяти схем.
     Рассмотрим более подробно предлагаемые способы дискретизации изображе-
ния.
    · Бикубическая интерполяция. Способ, требующий от компьютера макси-
мальной мощности и дающий лучший результат в случае с изображениями, со-
держащими фотографические, со сложными переходами формы и цвета.
    · Билинейная интерполяция. Способ, дающий средний результат при
меньших затратах системных ресурсов.
    · По соседним точкам. Интерполяция, подходящая для одноцветных, про-
стых форм, для которых важно, чтобы они не были размыты. Пример – чертежи.
    · Бикубическое сглаживание. Способ впервые появившийся в Photoshop CS.
Предназначен для изображений высокого качества при увеличении их размеров.
    · Бикубическая резкость. Дискретизация изображения предназначенная для
обработки качественных изображений при уменьшении их размеров.
                                ПРИМЕЧАНИЕ
    Не стоит воспринимать интерполяцию как хорошее средство. Если полигра-
фическое бюро требует разрешение 300 PPI, то увеличение его в картинке, только
что скачанной из Интернета и имеющей всего 72 PPI, ничего не даст. Мелкие де-
тали, которые были бы в «настоящих» 300 PPI, не появятся – увеличатся только
те, что были видны на исходном изображении.


                                        21


                           ВЫПОЛНИТЕ УПРАЖНЕНИЕ
                Подготовим изображение для публикации в Интернете
    1. Откройте программу Photoshop. Зайдите в меню Файл и откройте изобра-
жение.
    Подрежем изображение. Для этого выберите инструмент Прямоугольное вы-
деление. выделите часть изображения и скопируйте выбранную область в буфер
обмена. В меню редактирование укажите команду Копировать или нажмите на
сочетание клавиш Ctrl+Shift. (Рис. 16).
                                                  2. Зайдите в меню Файл и выбе-
                                               рите команду Новый или сочетание
                                               клавиш Ctrl+N. В окне форматов
                                               файлов выберите буфер обмена и
                                               нажмите на ОК.
                                                  3. Появится новая чистая область,
                                               нажмите на сочетание клавиш
                                               Ctrl+V или команда Вставить из
                                               меню Редактирование.
                                                  4. Исходное изображение можно
                                               закрыть. В меню Изображение вы-
                                               берите команду Размер изображе-
     Рис. 16. Использование инструмента Прямо- ния. Окно показано на Рис. 17. На-
               угольное выделение              значьте новое разрешение 72 PPI. Не
                                               забудьте проставить галочки и ука-
зать тип интерполяции. По окончанию нажмите ОК. Сохраните фотографию в
формате JPEG. Информация по выбору формата изложена ниже.




    Рис. 17. Изменение размера
         изображения



                                    Рис. 18 Оптимизация изображения для Интернета
                                 в программе Photoshop



                                            22


    Возможен и другой вариант сохранения изображения для Интернета.
    Зайдите в меню File (Файл), выберите команду Save for Web (Сохранить
изображение для Web) или воспользуйтесь комбинацией клавиш
Alt+Shift+Ctrl+S. вызванное окно (                                Рис. 18) по-
зволяет, без изменения геометрических размеров изображения, сократить размер
файлов за счёт: использования специальных форматов файлов GIF, JPEG, PNG,
WBMP, позволяющих сжимать изображения; уменьшения количества цветов в
изображениях; удаления избыточной графической информации из изображений;
раздельному хранению фрагментов изображений с различными параметрами сжа-
тия. Подберите оптимальные настройки оптимизации: в информационной строке
отображается объём файла и время загрузки (в секундах) изображения при вы-
бранной скорости интернет-соединения. В данном примере оригинал имел размер
9,1 М, после оптимизации его размер составляет 791,9 К. Изображение, при мо-
демном соединении ограниченном по скорости 28,8 Кбит/с, будет загружаться в
браузер                               в                              течение
153 с. Сохраните полученное изображение (Safe).
                         Основные форматы растровых файлов
    Несмотря на то, что в основе растровой графики лежит одна и та же матрица
пикселей, форматов для записи растровых файлов существует достаточно много.
Рассмотрим некоторые из них, которые реально используются в работе5.
       1. PSD (Photoshop document)
    Собственный формат Photoshop. Основное достоинство – позволяет сохранять
абсолютно все, что можно создать в данной программе (слои, дополнительные ка-
налы, комментарии, пути). Это полезное свойство, так как часто работа над одним
изображением ведется в течение нескольких дней.
    В настоящее время данный формат поддерживают практически все програм-
мы редактирования растровой графики.
    В PSD используется стандарт компрессии RLE, что делает его размеры не-
сколько меньше без потери качества.
    RLE (Run Length Encoding) – один из методов компрессии графических фай-
лов. Он основан на поиске совпадений в строках изображений. То есть если под-
ряд идет 40 черных пикселей, то записаны они будут не как «черный», «черный»,
«черный»…, а как «40 черных». Этот метод эффективен только в случае доста-
точной повторяемости, то есть одноцветности областей изображения. Однако при
использовании RLE, в отличие от JPEG, качество самого изображения не ухудша-
ется.
    PSD – идеальный формат для хранения растровых изображений.
       2. BMP (Windows Device Independent Bitmap)
    Собственный формат операционной системы Windows. Специально для неё
разработан программистами компании Microsoft. Поддерживает индексированную
256-цветовую палитру и RGB-цвет. Данный формат понимают абсолютно все
(графические и не только) редакторы, работающие под Windows.

   5
       Материал изложен на основе данных, взятых из энциклопедии (Википедия)
                                               23


    На этом немногочисленные достоинства BMP заканчиваются и начинаются
многочисленные недостатки:
   · абсолютно не подходит для Интернета;
   · крайне неудачный выбор для последующей распечатки;
   · это аппаратно зависимый формат;
   · некорректно использует RLE-сжатие;
   · занимает неоправданно много места на диске.
    Использование BMP будет ошибкой в любом случае, за исключением даль-
нейшего использования в программах, которые никаких других форматов не по-
нимают.
       3. GIF (CompuServe Graphics Interchange Format)
    Изображение в формате GIF хранится построчно, поддерживается только
формат с индексированной палитрой цветов. Стандарт разрабатывался для под-
держки 256-цветовой палитры.
    Недокументированной, но поддерживаемой возможностью является сохране-
ние большего количества цветов с помощью анимированного GIF с нулевой за-
держкой между кадрами. При этом каждый кадр содержит свою палитру.
    Один из цветов в палитре может быть объявлен «прозрачным». В этом случае
в программах, которые поддерживают прозрачность GIF (например, большинство
современных браузеров), сквозь пиксели, окрашенные «прозрачным» цветом, бу-
дет виден фон. «Полупрозрачность» пикселей (технология альфа-канала6) не под-
держивается.
    Формат GIF допускает чересстрочное хранение данных. При этом строки раз-
биваются на группы и меняется порядок хранения строк в файле. При загрузке
изображение проявляется постепенно, в несколько проходов. Благодаря этому,
имея только часть файла, можно увидеть изображение целиком, но с меньшим
разрешением.
    В чересстрочном GIF’е сначала записываются строки 1, 5, 10 и т. д. Таким об-
разом, загрузив 1/4 данных, пользователь будет иметь представление о целом изо-
бражении. Вторым проходом следуют строки 3, 7, 12, разрешение изображения в
браузере ещё вдвое увеличивается. Наконец, третий проход передаёт все недос-
тающие строки (2, 4, 6…). Таким образом, задолго до окончания загрузки файла
пользователь может понять, что внутри, и решить, стоит ли ждать полной загруз-
ки изображения. Чересстрочная запись (Interlaced7) незначительно увеличивает
размер файла, но это, как правило, оправдывается приобретаемым свойством.


    6
      Альфа-композиция обозначает процесс комбинирования изображения с фоном для соз-
дания эффекта частичной прозрачности. Этот метод часто применяется для многопроходной
обработки изображения по частям с последующей комбинацией этих частей в единое двумерное
результирующее изображение.
     Термин альфа-канал впервые введён в оборот Алви Смитом в конце 1970-х.

    7
       Чересстрочная развёртка – метод отображения, передачи или хранения изображений
(как правило, движущихся), при котором каждый кадр разбивается на два полукадра (или поля),
составленные из строк, выбранных через одну.
                                             24


    Формат GIF поддерживает анимационные изображения. Фрагменты пред-
ставляют собой последовательности нескольких статичных кадров, а также ин-
формацию о том, сколько времени каждый кадр будет показан на экране. Анима-
ция может быть закольцована, тогда после последнего кадра будет вновь показан
первый и так далее.
    В GIF используется LZW-компрессия, что, в сочетании с индексированными
цветами, делает этот формат идеальным для хранения и передачи изображений
с малым количеством цветов.
    LZW – компрессия – еще один вид сжатия изображений, близкий RLE. Идет
поиск так называемых «фраз» (повторяющихся комбинаций разных цветов), кото-
рые записываются в виде ключей. В дальнейшем для кодирования изображения
используются уже созданные ключи. Этот метод гораздо совершеннее RLE для
областей с переходами цветов, однако кодировка в LZW требует больше систем-
ных ресурсов.
    Анимация, прозрачность, чересстрочная развертка сделали GIF одним из са-
мых используемых в Интернете форматов. Но отображение ограничено 256
цветами.
       4. JPEG (Joint Photographic Experts Group)
    Несмотря на то, что рассматриваем JPEG как графический формат, на самом
деле это один из самых распространенных в настоящее время принципов ком-
прессии.
    При сжатии изображение переводится в цветовую систему YCbCr [12]. Далее
каналы изображения Cb и Cr, отвечающие за цвет, уменьшаются в два раза (по
линейному масштабу). Уже на этом этапе необходимо хранить только четверть
информации о цвете изображения.
    Реже используется уменьшение цветовой информации в четыре раза или со-
хранение размеров цветовых каналов как есть. Количество программ, которые
поддерживают сохранение в таком виде, относительно невелико.
    Далее цветовые каналы изображения, включая черно-белый канал Y, разби-
ваются на блоки 8 на 8 пикселей. Каждый блок подвергается дискретному коси-
нусному преобразованию. Полученные коэффициенты подвергаются квантованию
и упаковываются с помощью кодов Хаффмана.
    Матрица, используемая для квантования коэффициентов, хранится вместе с
изображением. Обычно она строится так, что высокочастотные коэффициенты
подвергаются более сильному квантованию, чем низкочастотные. Это приводит к
огрублению мелких деталей на изображении. Чем выше степень сжатия, тем более
сильному квантованию подвергаются все коэффициенты.
    Progressive JPEG – такой способ записи сжатого изображения в файл, при ко-
тором старшие (низкочастотные) коэффициенты находятся в начале файла. Это
позволяет получить уменьшенное изображение при загрузке лишь небольшой
части файла и повышать детализацию изображения по мере загрузки оставшейся
части. Поэтому Progressive JPEG получил широкое распространение в Интернете.
В целом алгоритм основан на дискретном косинусоидальном преобразовании
(ДКП), которое является разновидностью дискретного преобразования Фурье,
применяемом к матрице изображения для получения некоторой новой матрицы
                                       25


коэффициентов. Для получения исходного изображения применяется обратное
преобразование. ДКП раскладывает изображение по амплитудам некоторых час-
тот. Таким образом, при преобразовании получаем матрицу, в которой многие ко-
эффициенты либо близки, либо равны нулю. Кроме того, благодаря несовершен-
ству человеческого зрения, можно аппроксимировать коэффициенты более грубо
без заметной потери качества изображения. Для этого используется квантование
коэффициентов. В самом простом случае – это арифметический побитовый сдвиг
вправо. При этом преобразовании теряется часть информации, но могут дости-
гаться большие коэффициенты сжатия.
     Процесс сжатия по схеме JPEG включает ряд этапов:
    · преобразование изображения в оптимальное цветовое пространство;
    · субдискретизация компонентов цветности усреднением групп пикселей;
    · применение дискретных косинусных преобразований для уменьшения из-
быточности данных изображения;
    · квантование каждого блока коэффициентов ДКП с применением весовых
функций, оптимизированных с учетом визуального восприятия человеком;
    · кодирование результирующих коэффициентов (данных изображения) с
применением алгоритма группового кодирования и алгоритма Хаффмана для уда-
ления избыточности информации.
     К недостаткам формата следует отнести то, что при сильных степенях сжатия
дает знать о себе блочная структура данных, изображение «дробится на квадрати-
ки». Этот эффект особенно заметен на областях с низкой пространственной часто-
той (плавные переходы изображения, например, чистое небо). В областях с высо-
кой пространственной частотой (например, контрастные границы изображения),
возникают характерные «артефакты» – иррегулярная структура пикселей иска-
женного цвета и/или яркости. Кроме того, из изображения пропадают мелкие
цветные детали. Не стоит также забывать и о том, что данный формат не поддер-
живает прозрачность.
     Однако, несмотря на недостатки, JPEG получил очень широкое распростра-
нение из-за высокой степени сжатия.
        5. JPEG 2000 (jp2)
     Новый формат, который вместо дискретного косинусного преобразования,
характерного для JPEG, использует технологию вейвлет-преобразования, основы-
вающуюся на представлении сигнала в виде суперпозиции некоторых базовых
функций – волновых пакетов.
     В результате такой компрессии изображение получается более гладким и чёт-
ким, а размер файла по сравнению с JPEG при одинаковом качестве уменьшается
ещё на 30 %. JPEG 2000 полностью свободен от главного недостатка своего пред-
шественника: благодаря использованию вейвлетов, изображения в этом формате
не содержат знаменитой «решётки» из блоков по 8 пикселей. Новый формат таже,
как и JPEG, поддерживает так называемое «прогрессивное сжатие», позволяющее
по мере загрузки видеть сначала размытое, но затем всё более чёткое изображе-
ние.


                                       26


     В данное время этот формат мало распространён и поддерживается не
всеми современными браузерами (среди поддерживающих jp2 – Safari, Mozilla
Firefox (через Quicktime)).
        6. PCX
     PCX – стандарт представления графической информации. Использовался
графическим редактором ZSoft PC Paintbrush (одной из первых популярных гра-
фических программ) для MS-DOS 8компании Microsoft , текстовых процессоров и
настольных издательских систем типа Microsoft Word и Ventura Publisher, разра-
ботанный компанией ZSoft Corporation (г. Мариэтта, штат Джорджия, США).
     Тип формата – растровый. Большинство файлов такого типа использует стан-
дартную палитру цветов, но формат был расширен из расчета на хранение 24-
битных изображений. PCX – аппаратнозависимый формат. Предназначается для
хранения информации в файле в таком же виде, как и в видеоплате. Для совмес-
тимости со старыми программами необходима поддержка EGA-режима видеокон-
троллером. Алгоритм такого сжатия очень быстрый и занимает небольшой объём
памяти, однако не очень эффективен, непрактичен для сжатия фотографий и более
детальной компьютерной графики.
     Отрицательные стороны формата:
    · не поддерживает изображения с оттенками серого или таблицы коррекции
шкалы серого;
    · не поддерживает цвета CMYK или другие системы, отличные от RGB. Опи-
сание перечисленных цветовых моделей смотрите на странице 37;
    · многочисленные варианты, особенно при работе с цветами, могут делать
работу с файлом невозможным;
    · неудобная схема сжатия в действительности может увеличивать размеры
некоторых файлов.
     Положительные стороны формата:
    · создание ограниченной палитры цветов (лучше всего 16 или 256);
    · не может включать в себя изображение с плохим сжатием, например, отска-
нированное;
    · поддерживается большим количеством приложений.
     PCX поддерживает RLE-компрессию. Лучше этот формат не использовать.
Его прекрасно заменит более распространенный TIFF.
        7. PICT (Macintosh QuickDraw Picture Format)
     Формат, использующийся в основном на компьютерах Macintosh. Поддержи-
вается всеми программами на этих компьютерах и даже служит стандартом буфе-
ра обмена. При сохранении в PICT можно использовать цветовые режимы Bitmap,
Grayscale, Indexed colors, RGB, CMYK. В RGB-файле можно сохранить один аль-
фа-канал, в остальных режимах – несколько.

   8
     MS-DOS (сокр. от англ. Microsoft Disk Operating System – дисковая ОС от Microsoft) –
коммерческая операционная система для персональных компьютеров фирмы Microsoft.
MS-DOS – самая известная ОС из семейства DOS, ранее устанавливаемая на большинство PC-
совместимых компьютеров. Со временем она была вытеснена Microsoft Windows и позже
Windows NT.
                                             27


    PICT способен хранить векторную информацию, текст и звук. Этот фор-
мат имеет достаточно неплохие возможности для сжатия при условии наличия
больших областей одного цвета (RLE-компрессия).




                                    28


       8. PXR (Pixar)
     Формат предназначен для обмена со специализированными графическими
станциями Pixar, ориентированными на трехмерное моделирование и анимацию.
Поддерживаются только полутоновые и полноцветные RGB-изображения с един-
ственным альфа-каналом.
     Формат, предназначенный для работы с графическими станциями Pixar (рабо-
чие станции Hi-End уровня).
       9. PNG (Portable Network Graphics)
     Третий кит (первые два – это JPEG и GIF), на котором держится графика в
Интернете. Самый перспективный формат для развития всемирной сети. PNG –
это молодой формат, специально разработанный в качестве замены для GIF.
     Он имеет следующие основные преимущества перед GIF:
    · практически неограниченное9 количество цветов в изображении (GIF ис-
пользует в лучшем случае 8-битный цвет);
    · опциональная поддержка альфа-канала;
    · возможность гамма-коррекции10;
    · двумерная чересстрочная развёртка.
     Формат PNG заслуживает внимания тех, чьи работы предназначены для
дальнейшего использования в Интернете.
       10. RAW
     Самый гибкий формат для обмена изображениями между компьютерами раз-
ных платформ. Можно сохранять изображения в любой цветовой модели, включая
Lab и мультиканальный, поддерживает альфа-каналы.
     Работа с RAW достаточно сложна и требует специальных знаний, в работе
с данным форматом.
       11. TIFF (Tagged Image File Format)
     Самый распространенный на сегодняшний день растровый графический фор-
мат в издательском деле. Основные его достоинства следующие:
    · TIFF аппаратно независим, поэтому многие специально используют его для
переноса изображений с PC на Macintosh и наоборот;
    · TIFF очень надежный формат, практически все программы понимают его
без проблем;
    · этот формат поддерживает все цветовые модели, включая CMYK и
PANTONE. Информацию по цветовым моделям смотрите на странице 37;
    · в TIFF может нести в себе дополнительную информацию, к примеру, о кон-
турах или альфа-каналах;
    · TIFF поддерживает LZW-компрессию;
    · TIFF – лучший выбор для тех, чьи работы предназначены для печати.


   9
      В PNG количество цветов всё же имеет предел, но, в отличие от GIF, оно ограничено 248
цветами (3×16 бит).
    10
       Гамма-коррекция – система коррекции яркости изображения по отношению к хранимым
или передаваемым данным.

                                              29



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