Веб-графика

БЕЛОРУССКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ
исторический факультет
кафедра источниковедения
ЭЛЕКТРОННАЯ ГРАФИЧЕСКАЯ
НАГЛЯДНОСТЬ
В ИСТОРИЧЕСКОМ ОБРАЗОВАНИИ
Адрес
тел.
факс
URL
e-mail
Красноармейская 6, к. 26, 20
(+ 375 17) 327-60-19, 209-57-06
(+ 375 17) 327-30-14
http://www.hist.bsu.by
[email protected]
1
Минск,
2013
Н. Н. Садова
СОДЕРЖАНИЕ:
Определение цифрового изображения.
Оцифровывающие устройства.
 Области применения компьютерных цифровых
изображений.
 Растровые программы, пиксель.
Векторные программы, вектор.
2
СОДЕРЖАНИЕ:
 Цветовые модели:
 модель RGB (Red, Green, Blue);
 модель CMYK;
 модели HSB,
 модель L*a*b*
 Цветовой спектральный круг
 Диапазон модели. Индексированный цвет
 Использование цифровых файловых форматов:
собственный формат файлов; EPS; TIFF; JPEG; PICT;
BMP; GIF; CPT; PDF; PCD и др.; стандарт TWAIN
3
Цифровым может быть названо изображение,
созданное с использованием компьютерной
программы, либо изображение, преобразованное в
электронную информацию для просмотра,
редактирования или управления им на экране
компьютера.
Устройства, преобразующие графические
изображения в цифровую форму, называются
оцифровывающими (сканеры, цифровые фото и
видеокамеры, рабочие станции Photo CD)
4
По способам задания изображений
графику можно разделить на категории
5
Фрактальная графика
Фрактал — объект, отдельные элементы которого наследуют
свойства родительских структур.
Поскольку более детальное описание элементов меньшего
масштаба происходит по простому алгоритму, описать такой
объект можно всего лишь несколькими математическими
уравнениями.
6
Изображения могут быть
РАСТРОВЫЕ И ВЕКТОРНЫЕ
Программы, предназначенные для создания и
обработки цифровых изображений,
подразделяются на растровые и векторные.
 Растровые программы используются
преимущественно для обработки сканированных
изображений и цифровых фотографий
 Векторные - для рисования и дизайна,
технических иллюстраций, создания диаграмм,
составления блок-схем
7
Растровое изображение
формируется из отдельных точек, называемых
пикселами. Слово «пиксел» - это от
английского «picture element» - элемент
изображения
 На экране компьютера каждый пиксел картинки
отображается в определенном месте, т.е. имеет
координаты по горизонтали и вертикали
 Растровое изображение описывается
конкретным расположением и цветом каждой
точки сетки, что создает изображение примерно
так же, как в мозаике.
 При редактировании растровой графики вы
редактируете пикселы, а не линии.
8
Недостатки растровых изображений:
 Зависимость размера файла изображения от его
графического разрешения
 Зависимость качества изображения от качества
устройств вывода.
 Зависимость качества растрового изображения от его
графического разрешения
 Зависимость качества печати изображения от
графического разрешения устройства печати
( с более низким разрешением, чем разрешение самого
изображения понижает качество печатаемого
изображения)
9
Векторная графика
 описывает изображения с помощью прямых и
произвольных линий, называемых векторами, а
также параметров, описывающих цвета и
расположение линий.
 При редактировании элементов векторной графики
вы изменяете параметры линий, описывающих
форму этих элементов.
10
Векторная графика
 Изображение может без потерь
масштабироваться, поворачиваться,
деформироваться,
 имитация трёхмерности в векторной графике
проще, чем в растровой
 Можно переносить элементы, менять их размер,
форму и цвет, и это не отразится на качестве их
визуального представления
11
Преимущества ВЕКТОРНОЙ графики
 Векторные изображения сохраняют независимость
объектов, т.е. возможность трансформации
 Имеют богатые возможности текстовых эффектов
 Небольшие объемы файлов
 Возможность создания многостраничных
документов с элементами логической разметки
12
Преимущества ВЕКТОРНОЙ графики
 Расширены интерактивные и анимационные
возможности
 Векторная графика не зависит от разрешения, т.е. может
быть показана без потери качества на разнообразных
выходных устройствах с различным разрешением
13
Основные понятия, без которых невозможно работать в
программе
Adobe Photoshop
Графическое разрешение изображения - количество
наносимых точек на линейный дюйм бумаги (если речь идет
об изображении, выводимом на печать), либо количеством
пикселей на дюйм (при отображении картинки на экране
монитора)
Это очень важная величина, так как от разрешения
изображения зависит качество его воспроизведения.
Более высокое разрешение обеспечивает лучшее качество
воспроизведения, но требует большого объема памяти.
14
Глубина цвета
Величина, определяющая количество бит цветовой
информации на один пиксел, называется глубиной
цвета или битовым разрешением.
 Если битовое разрешение равно единице, то каждый
пиксел может передавать только 21 = 2 цвета (компьютер
использует двоичную систему счисления), - черный и
белый.
 Если глубина цвета равна 8 битам, то каждый пиксел
может иметь 28 = 256 цветовых оттенков.
 Если же глубина цвета изображения составляет 24 бита,
то каждый пиксел может принимать 224 =16,7 миллиона
оттенков.
15
Размер изображения в байтах, килобайтах и мегабайтах,
полученного в результате сканирования, можно
определить по следующей формуле:
F = (A/25,4xB/25,4)xD2xC/8,
где
F - размер файла без сжатия в байтах;
 А - ширина исходного изображения в мм;
 В - длина исходного изображения в мм;
 D - графическое разрешение изображения в ppi;
 С - глубина цвета в битах.
Таким образом, если отсканировать фотографию размером
10x15 см с разрешением 150 ppi и глубиной цвета 24 бита,
то оцифрованное изображение будет занимать в
оперативной памяти =1 570 000 байт или =1,5 мегабайта
16
Размер файла растрового изображения зависит
от
 линейных размеров изображения
 графического разрешения изображения
 глубины цвета изображения.
Чем больше размер изображения и его графическое и
цветовое разрешение, тем больше размер его файла
17
Разрешающая способность монитора
 Количество пикселов в одном дюйме экрана, которые
может отображать монитор, определяет разрешающую
способность монитора..
 Она зависит 1) от размера экрана и 2) текущего
разрешения видеокарты, которое в современных
мониторах может изменяться от 640x480 до 1800х 1440
пикселов.
 В большинстве случаев монитор настраивается так, что
его разрешающая способность составляет 72 пиксела на
дюйм (ppi).
 Это означает, что при низком разрешении видеокарты 640x480 - экранные пикселы будут велики, а при высоком
-1800х 1440 - очень малы
18
Разрешающая способность принтера
 Качество напечатанного цифрового изображения
зависит от разрешающей способности печатающего
устройства - принтера
 Разрешающая способность печатающего устройства
-это количество точек, которые могут быть
напечатаны устройством на одном дюйме страницы.
измеряется в точках на дюйм (dpi - dots per inch). Чем
больше это число, тем больше мелких деталей может
быть передано и, следовательно, тем выше будет
качество печати.
 Современные цветные лазерные и струйные принтеры
характеризуются разрешающей способностью от 300600 dpi до 2800 dpi и обеспечивают хорошее качество
печати изображений.
19
Цветовые режимы и модели реализованные в
программе Adobe Photoshop

Под моделями понимаются способы описания
цвета.

Цветовые модели описывают различные способы,
с помощью которых цвет отображается на бумаге
и на экране монитора.
 Режимы - это способы работы с цветом, которые
зависят от выбранной модели
20
Основные цветовые модели
RGB (Red, Green, Blue - красный, зеленый, синий).
CMYK (Cyan, Magenta, Yellow, Black - голубой,
пурпурный, желтый, черный).
HSB (Hue, Saturation, Brightness
– оттенок,
насыщенность, яркость).
 Lab (Lightness, a x b - освещенность, координаты a и b
21
МОДЕЛЬ RGB
• т. о - черный цвет
• т. а - белый цвет
• диапазон оа - серая шкала
(256 градаций серого)
• вершины куба - чистые
исходные цвета
• Отсутствие всех цветов –
черный цвет
• Присутствие всех цветов в
равной доле – белый цвет
• При смешивании в разных
пропорциях – любые другие
цвета
22
Модель CMYK
 В модели CMYK, используемой при печати, цвета
определяются на основе содержания в них голубого,
пурпурного, желтого и черного цветов, Это четыре
основных цвета чернил, используемых в обычных
струйных принтерах, цветных лазерных принтерах
высокого разрешения, а также печатных станках,
применяемых в типографии.
 В принтерах, поддерживающих 6-цветную печать,
дополнительно применяются чернила светло-голубого и
светло-пурпурного цветов
23
МОДЕЛЬ CMYK
т. о - белый цвет
 т. а - черный цвет
 диапазон оа - серая шкала
(256 градаций серого)



Система CMYK создана и
используется для
типографской печати
вершины куба - чистые исходные
цвета
Для описания цвета используется
32 бита, разделенных на 4
канала, 8 бит на каждый канал,
но диапазон оттенков меньше,
чем в RGB
24
Цветовой спектральный круг
Cyan
BLUE
GREEN
Yellow
Magenta
RED
25
Модель HSB
Под параметром Н понимается оттенок, который
присутствует на так называемом цветовом круге. Оттенок
определяется по своему положению на круге, которое
обозначается в градусах (от 0 до 360°).
Параметр S называется насыщенностью цвета.
Насыщенность определяется как относительная доля
чистого цвета минус присутствующая в нем часть серого
цвета. Абсолютно чистому цвету соответствует 100%-ная
насыщенность. Серому цвету соответствует нулевая
насыщенность. Чем насыщеннее цвет, тем ближе к краю
цветового круга он находится.
Параметром В определяется яркость цвета, которая
соответствует его интенсивности. Яркость, как и
насыщенность, измеряется в процентах (0% - черный цвет,
100% - белый цвет)
26
Модель Lab
 Цвет модели определяется значением яркости
(luminance) и двумя цветовыми значениями - а и Ь,
которые изменяются от зеленого к красному и от
синего к желтому соответственно. Модель Lab
разрабатывалась как независимая от устройства
цветовая модель.
 в этой модели цвета не ограничиваются
диапазоном цветов, которые могут быть
напечатаны или отображены тем или иным
устройством.
27
 Режимы - это способы работы с цветом,
основанные на использовании той или иной модели
цвета.
 Моделям RGB и CMYK, в Photoshop соответствуют
свои режимы.
 Модели HSB не соответствует никакой режим
 Существуют режимы для работы с черным и белым
цветом, оттенками серого и ограниченным
набором цветов
28
Режимы, доступные в Photoshop
Меню Изображение/Режим
 Bitmap (черно-белое изображение)
 Grayscale (изображение в оттенках серого)
 Duotone (дуплексное изображение)
 Indexed Color (индексированный цвет)
 RGB Color (цветовая модель RGB)
 CMYK Color (цветовая модель CMYK)
 Lab Color (цветовая модель Lab)
 Multichannel (многоканальное изображение).
29
ИНДЕКСИРОВАННЫЙ ЦВЕТ
 256 цветов - минимальное количество для многих
компьютерных систем качества
 Индексированный режим - это
⁻ одноканальная 8-битная палитра цветов),
⁻ цветовая палитра - таблица кодировки цвета ( 256 цветов) индексаторов цветов.
 Переход к Indexed Color в программе Photoshop
происходит с помощью таблицы (Color Look Up
Table)
 Многие эффекты и фильтры Photoshop не могут
применяться в индексированном режиме, зато
этот режим уменьшает объем создаваемых файлов
30
Под форматом (выбирается при сохранении
изображения) понимается способ организации
информации об изображении в файле,
что дает возможность использовать файлы в
других приложениях или размешать их на
Web-страницах в Internet
31
ИСПОЛЬЗОВАНИЕ ЦИФРОВЫХ ФАЙЛОВЫХ
ФОРМАТОВ
 Собственный формат файлов – формат, созданный
специально для данного программного продукта PSD,
PDD PHOTOSHOP CS
 Недостаток этого формата состоит в том, что при
открытии таких файлов в других программах могут
возникнуть проблемы.
 Если вы планируете использовать файлы изображений
в разных программах, выводить их на печать или
размещать на Web-страницах, их необходимо
сохранять в одном из общепринятых форматов
32
ИСПОЛЬЗОВАНИЕ ЦИФРОВЫХ ФАЙЛОВЫХ
ФОРМАТОВ
PSD – «родной» формат программы Adobe Photoshop;
– поддерживает все типы
изображений (от штриховых до полноцветных);
– может содержать неограниченное
количество
пользовательских слоев, каждый слой – до 24
каналов;
– при сохранении в другом формате слои должны
быть сведены
33
ИСПОЛЬЗОВАНИЕ ЦИФРОВЫХ ФАЙЛОВЫХ
ФОРМАТОВ
EPS (инкапсулированный PostScript) –
поддерживается большинством графических
векторных редакторов и программ верстки,
самый надежный универсальный способ
хранения данных
Опции сохранения:
– просмотр – создание просмотрового файла
– ASCII/Binary – текстовый/двоичный формат
– DCS – цветоделение документа
34
ИСПОЛЬЗОВАНИЕ ЦИФРОВЫХ ФАЙЛОВЫХ
ФОРМАТОВ
TIFF (универсальный формат графических файлов) – формат
для изображений с цветовыми каналами,
аппаратно независим
 переносимость на платформы IBM PC и Macintosh
;
 импортируется во все программы настольных
издательских систем
;
работает в любой программе точечной графики
 чертежные программы не работают с ним;
 включает схемы LZW-сжатия.
35
ИСПОЛЬЗОВАНИЕ ЦИФРОВЫХ ФАЙЛОВЫХ
ФОРМАТОВ
JPEG –сохранение точечных
изображений со сжатием с
потерями (Lossy):
уменьшение размера файла в 100 (практически в 5 - 15)
раз;
 При сохранении в таком формате выполняется
оптимизация цветовых
параметров изображения,
создается эффект чересстрочных изображений
 Нежелателен для репродукций и цветовых нюансов
 Рекомендован для конечных вариантов работы, т.к.
«отбрасывает» информацию о цвете
.
36
ИСПОЛЬЗОВАНИЕ ЦИФРОВЫХ ФАЙЛОВЫХ
ФОРМАТОВ
 PICT – файловый

формат,
поддерживаемый
большинством
программ рисования и
обработки под
Macintosh и
программой
CorelDRAW; самый
маленький размер
файлов
PCX – формат
программы PC
PaintBrush; все
графические
приложения
импортируют его;
хорош для
изображений с
индексирован-ными
цветами
37
 BMP –
широко
используемый
файловый
формат для DOS
и Windows,
используется в
PaintBrush
ИСПОЛЬЗОВАНИЕ ЦИФРОВЫХ ФАЙЛОВЫХ
ФОРМАТОВ
GIF – был разработан для использования в CompuServe,
одной из первых коммерческих интерактивных сетей для
сжатия растровых файлов, загружаемых по телефонным
линиям; первый графический формат для использования в
WWW;
Записывает изображение через строчку (Interlaced), что
ускоряет просмотр при загрузке
 может загружать несколько картинок GIF-анимация
38
ИСПОЛЬЗОВАНИЕ ЦИФРОВЫХ ФАЙЛОВЫХ
ФОРМАТОВ
PDF – средство электронного распространения
изображений, документов для Macintosh, Windows,
Unix, DOS;
– для представления векторных и точечных
изображений;
– содержит элементы для поиска и
просмотра электронных
документов, гипертекстовые ссылки, электронное
оглавление
39
ИСПОЛЬЗОВАНИЕ ЦИФРОВЫХ ФАЙЛОВЫХ
ФОРМАТОВ
CDR является “родным” форматом CorelDRAW:
 Файлы типа СМХ использовались для хранения
коллекций векторных рисунков из поставки
CorelDRAW прежних версий;
 СРХ — разновидность формата СМХ со сжатием
файлов;
 СРТ - формат файлов программы Corel PHOTO-PAINT
с плавающими объектами.
40
ИСПОЛЬЗОВАНИЕ ЦИФРОВЫХ ФАЙЛОВЫХ
ФОРМАТОВ
 PhotoCD (PCD) - формат фирмы Kodak PhotoCD для
хранения 35-мм слайдов на компакт-дисках,
которые можно просматривать на экране обычного
телевизора, подходит для хранения цифровых
фотографий.
41
ИСПОЛЬЗОВАНИЕ ЦИФРОВЫХ
ФАЙЛОВЫХ ФОРМАТОВ
 PNG — переносимая сетевая графика. В 1994 году
понадобился новый графический формат, который
должен был быть бесплатным и лучше форматов
JPEG и GIF.
 PNG обеспечивает лучшее сжатие, чем GIF (10 — 30
%), но размер файлов больше, чем у GIF и JPEG.
 Как и GIF, это формат без потерь, но PNG- файлы не
ограничены 256 цветами.
42
ИСПОЛЬЗОВАНИЕ ЦИФРОВЫХ ФАЙЛОВЫХ
ФОРМАТОВ
 Для того, чтобы унифицировать процесс сканирования,
консорциум фирм, занимающихся разработкой
графических стандартов, разработали стандарт TWAIN.
 Любой сканер, который поддерживает этот стандарт,
работает с программным приложением,
поддерживающим этот стандарт.
 Это означает, что процесс сканирования может быть
осуществлен без выхода из программы Adobe Photoshop
43
Основные принципы работы ADOBE Photoshop
• Приложение не содержит изображения по
умолчанию, изображение либо создают в окне
диалога, либо загружают с диска, либо
импортируют со сканера или цифровой
камеры
• Для создания и редактирования изображений
используют инструменты и палитры,
управляемые командой меню ОКНО
• Кнопочный инструментарий используют для
быстрого исполнения большинства операций
(черный 3-угольник возле кнопки – раскрывает
вложенные команды)
44
Панель инструментов Adobe Photoshop
Все инструменты условно можно разделить на четыре группы.
 Инструменты выделения.
 Инструменты рисования
 Инструменты для работы с контурами,
градиентными заливками и фигурами.
 Инструменты для просмотра изображения
45
ИНСТРУМЕНТЫ ВЫДЕЛЕНИЯ
Инструменты выделения Прямоугольная область и
Эллиптическая форма используют для простой в
геометрическом отношении области - прямоугольник,
квадрат , овал (эллипс) или круг.
Используя добавление (add), вычитание (subtract) и
пересечение (intersect) областей, при помощи этих форм
можно создать и более сложную в геометрическом
отношении область выделения.
46
УПРАВЛЕНИЕ ВЫДЕЛЕННОЙ ОБЛАСТЬЮ
Если нажать клавишу Shift в процессе растягивания
прямоугольника или овала (эллипса) - результат правильный
квадрат или окружность.
Чтобы выделенная область растягивалась из центра, поместите
указатель в центр и растягивайте область при нажатой клавише
Alt.
При растягивании выделения, зажмите клавишу пробела - и
область выделения будет не растягиваться, а перемещаться.
После того как вы отпустите клавишу, растягивание
продолжится.
Если вы нажмете клавишу Shift и кнопку мыши, то
растягивание продолжится с уменьшением фигуры до
правильного квадрата или окружности. А последующее нажатие
Alt приведет к растягиванию из центра
47
ИНСТРУМЕНТЫ ВЫДЕЛЕНИЯ
Инструмент Лассо выделяет область абсолютно произвольной
формы, основываясь на мельчайших движениях мыши
Прямоугольное лассо используется для создания ПГ/П области в
виде многоугольника. Удерживая нажатой клавишу Shift, можно
фиксировать сегменты многоугольника вертикально,
горизонтально или под углом 45 град.
Магнитное лассо – инструмент распознавания краев. Это
означает, что он активно ищет края объекта, в то время как вы
двигаетесь вокруг него, затем цепляется за края выделения и
прилипает к ним, как магнит.
48
ИНСТРУМЕНТЫ ВЫДЕЛЕНИЯ И ПЕРЕМЕЩЕНИЯ
Инструмент
Волшебная палочка
позволяет выделить
однородно
закрашенную область
(например, красный
цветок) без обводки
его контура.
49
ИНСТРУМЕНТЫ РИСОВАНИЯ
 Аэрограф
(Airbrush);
 Кисть (Paintbrush);
 Ластик (Eraser);
 Карандаш (Pencil);
 Линия (Line);
 Градиент (Gradient);
 Заливка (Paint Bucket);
 Пипетка (Eyedropper).
Допускается настройка по широкому спектру
различных параметров: диаметру кисти, ее жесткости,
форме, углу наклона, степени непрозрачности мазка и т.
д
50
ИНСТРУМЕНТЫ РИСОВАНИЯ
51
Инструменты кадрирования и выделения фрагментов
52
Инструменты ретуширования
53
Инструменты ретуширования
54
Инструменты ретуширования
55
Инструменты ретуширования
56
Инструменты Рисование и Текст
57
Инструменты Рисование
58
Инструменты раскраски
59
СПИСОК ЛИТЕРАТУРЫ
 Web-дизайн. Дмитрий Кирсанов, СПб: Питер, 1999 г.
 Форматы файлов Internet. Тим Кенул, СПб: Питер, 1997 г.
 Цифровые изображения. Адель Дроблас Гринберг, Сет
Гринберг, Мн: ООО “Попурри”, 1997 г.
 Эффективная работа с Corel DRAW7. Ф. Кобурн, П. Маккормик,
СПб: Питер, 1997 г.
 Эффективная работа с Corel DRAW9. Ф. Кобурн, П. Маккормик,
СПб: Питер, 2000 г.
 Photoshop 5.5. для Windows. Библия пользователя. Дик МакКлелланд, М: Издательский дом «Вильямс», 1999 г.
60