- •Содержание
- •Глава 1. Виды компьютерной графики, их характеристика 6
- •Глава 2. Графический редактор adobe photoshop 19
- •Глава 3. Подготовка графики для web и мультимедиа 81
- •Глава 4. Основы web-дизайна. Язык html 90
- •Глава 5. Сайтостроение в Macromedia Dreamweaver 103
- •Глава 6. Проектирование web-сайта 122
- •Введение
- •Глава 1. Виды компьютерной графики, их характеристика
- •I. Растровая, векторная, фрактальная графика
- •II. Разрешение растровых изображений
- •1. Разрешение экрана монитора:
- •III. Изменение размеров, разрешения изображения
- •IV. Программы – графические редакторы двумерной графики
- •V. Форматы графических файлов
- •1. Критерии выбора формата файла
- •2. Методы сжатия информации (используемые в разных форматах файлов)
- •3. Виды форматов графических файлов
- •Глава 2. Графический редактор adobe photoshop
- •I. Выделение областей в Photoshop
- •4. Выводы: что можно делать с выделенной областью?
- •II. Инструменты рисования. Выбор цвета
- •III. Многослойные изображения
- •IV. Создание теней, отражений
- •V. Цветокоррекция
- •Цветокоррекция с помощью Пипеток
- •Особенности действия Пипеток :
- •Цветокоррекция Белой и Черной пипетками
- •VI. Ретушь – устранение дефектов фото
- •Типы дефектов: технические дефекты (царапины, пятна, отслоение эмульсии) и художественные (неправильная композиция, освещенность, неудачный фон).
- •1. Инструменты ретуши, коррекции
- •1.1. Инструмент `Штамп`
- •1.2. Инструмент `Восстанавливающая кисть`
- •1.3. Инструмент `Заплатка` (Patch)
- •1.4. Инструментом `Красные глаза` убираем дефект
- •1.5. Инструмент `Замена цвета`
- •1.6. Инструменты Размытие , Палец (Размазывание) , Резкость
- •1.7. Инструменты Осветлитель , Затемнитель , Губка
- •1.8. Инструмент Обрезка (Рамка)
- •2. Увеличение резкости
- •2.1. Инструменты увеличения резкости отдельных элементов (вручную)
- •2.2. Фильтры для увеличения резкости
- •2.2.1. Автоматические фильтры
- •2.2.2. Настраиваемые фильтры
- •3. Профессиональная ретушь фото:
- •Этап I. Создание снимков фото в палитре История
- •Этап II. Фильтр `Пыль и царапины`
- •Этап IV. Удаляем крупные дефекты Штампом
- •Этап V. Завершение ретуши: фильтр `Контурная резкость`
- •Методика использования фильтра `Контурная резкость`
- •VII. Использование каналов
- •2. Использование альфа-каналов
- •3. Создание рамок для фото, используя альфа-каналы
- •4. Получение черно-белых изображений (из цветных)
- •VIII. Векторные инструменты, контуры в Photoshop
- •2. Работа с контурами (Paths): обводка, заливка и пр.
- •3 . Векторные инструменты группы Перо (Pen)
- •С Установка стиля нового слоя вободное перо : создание контуров, выделений
- •Инструменты редактирования контуров
- •Глава 3. Подготовка графики для web и мультимедиа
- •I. Оптимизация – уменьшение объема файла
- •Х Таблица 5 арактеристики растровых форматов файлов
- •II. Создание рисунка на прозрачном фоне (без фона)
- •III. Анимация: разработка анимированных баннеров
- •Глава 4. Основы web-дизайна. Язык html
- •I. Основные понятия. Редакторы html
- •II. Структура html-кода страницы
- •III. Html-теги и атрибуты
- •Обязательные тэги
- •Форматирование абзацев, заголовков
- •Создание гиперссылок
- •Форматирование шрифта
- •Вставка изображения
- •Создание списков
- •Создание таблиц
- •Описание фреймов
- •Комментарии
- •Глава 5. Сайтостроение в Macromedia Dreamweaver
- •I. Интерфейс Dreamweaver. Начало работы
- •Начало работы в Dreamweaver
- •II. Принципы языка html и работа в режиме html-кода
- •III. Работа в режиме дизайна: форматирование текста
- •Форматирование абзацев
- •Создание списков
- •IV. Создание сайта в Dreamweaver
- •1. Настройки окна `Определение сайта`
- •2) В категории Удалённая информация (Remote Info)
- •3) В категории Примечания к дизайну (Design Notes)
- •2. Установка параметров страницы и русской кодировки
- •3. Разметка макета web-страницы
- •4. Настройка цвета страницы
- •5. Вставка рисунков
- •6. Ввод текста web-страницы
- •7. Настройка гиперссылок
- •Создание остальных страниц сайта и настройка ссылок
- •Рисунки в качестве ссылок. Карты изображений
- •Глава 6. Проектирование web-сайта
- •Этапы проектирования сайта
- •Содержание этапов работы по проектированию сайта
- •Рекомендуемая литература
- •241036, Г. Брянск, ул. Бежицкая, 14
II. Разрешение растровых изображений
Основная характеристика растровой графики – разрешение. Это понятие идентично понятию "качество" для растровой графики. Ведь от разрешения зависит, насколько четким, детальным является изображение.
Разрешение (resolution) изображения – это количество точек, приходящихся на 1 см (или 1 дюйм) изображения. Размер этих точек (зерен) в зависимости от разрешения меняется. При более высоком разрешении на 1 см рисунка приходится больше точек, т.е. они более мелкие, значит, у рисунка прорисованы все мельчайшие детали.
Разрешение изображений обозначают в следующих единицах: dpi (dots per inch – точек на дюйм) или ppi (pixel per inch - пикселей на дюйм).
Н
а
рис. 3 фото слева имеет более высокое
разрешение, чем справа. Оно более четкое
и имеет больше мелких деталей (сравните
четкость надписей, ресниц).
Рис. 3. Изображение в высоком и низком (справа) разрешениях
Следует четко различать:
разрешение экрана (устройства отображения)
разрешение принтера (печатающего устройства)
разрешение изображения.
Эти понятия относятся к разным объектам. Отсюда проблема: оптимальные разрешения для экрана и для принтера разные (т.е. рисунки для экрана и для печати должны иметь разное разрешение!). Это нужно учитывать, и настраивать для рисунка разрешение, ориентированное на то устройство, для которого он готовится (для показа на экране или для печати).
Ведь от разрешения зависит, какая получится четкость у рисунка при распечатке, или какой будет его размер и четкость на экране (и сколько места займёт файл на диске)
Рассмотрите и запомните стандартные значения разрешений разных объектов.
1. Разрешение экрана монитора:
Физическое разрешение экрана – это количество пикселей, приходящихся на 1 дюйм экрана. Оно равно 72 или 96 ppi (96 пикселей на дюйм).
Настраиваемое разрешение экрана – это количество пикселей по ширине и высоте экрана, которое может отображать монитор (задаются в настройках экрана). Это разрешение определяет максимальный размер картинки, которая можно поместиться на экране целиком (в масштабе 100%). Например, 12801024 (т.е. на экране вместится картинка максимум в 1280 пикселей по горизонтали и 1024 по вертикали).
Разрешение определяется физическими возможностями монитора и видеокарты
2. Разрешение принтера – это свойство принтера, отражающее количество точек, которые могут быть напечатаны на 1 см (или дюйме). Разрешение измеряется в dpi (точки на дюйм). Стандарт печати (стандартное разрешение принтера) - 300 dpi.
Указание dpi позволяет "привязать" изображение, размеры которого задаются в относительных единицах (пикселях) к физическим – дюймам.
3. Физический размер изображения может измеряться и в пикселях, и в единицах длины - см, дюймах (сначала рассмотрим параметр `размер`, т.к. от он связан с разрешением)
1) Если изображение готовят для демонстрации на экране, то его ширину и высоту задают в пикселях, чтоб знать, какую часть экрана оно займет.
Экранные пиксели можно перевести в обычные единицы длины (дюймы, см), чтоб узнать, какого размера данный рисунок получится при распечатке на бумаге. Так, экранный рисунок размером 10050 пикселей при распечатке займет на бумаге:
ширина 100 пикс : 96 ppi 1 дюйм |
Напомним: 1 дюйм = 2,54 см |
высота 50 пикс : 96 ppi = 0,5 дюйма |
Разрешения монитора - 96 ppi. |
Итак, рисунок при распечатке на бумаге займёт: 10,5 дюйма = 2,51,3 см
2) Если изображение готовят для печати, то его размер сразу задают в единицах длины (см, дюймы), чтобы знать, какую часть листа бумаги оно займет.
Какое разрешение нужно задавать для рисунков для печати, какое для экрана?
З
Таблица 1
Разрешение |
Сфера применения |
72 dpi или 96 dpi |
С таким разрешением сохраняйте рисунки для показа на экране. Разрешение выше 96 для экранных картинок задавать нет смысла (ведь само разрешение экрана – максимум 96 ppi), это только бесполезно увеличит объём файла в байтах |
200 dpi |
Среднее разрешение, применяемое при некачественной печати. Так печатается большинство газет |
300 dpi |
Стандарт качественной печати (так печатаются цветные глянцевые журналы, календари и пр.) |
600 dpi |
Очень качественная полиграфическая (печатная) продукция |
Можно было бы всегда задавать самое высокое разрешение - 600 dpi, но почему его задают только, когда стоит требование – высококачественная печать? Причина:
чем выше разрешение, тем больше объём файла, в байтах (т.к. при более высоком разрешении компьютеру нужно хранить больше точек, их характеристик) - (таблица2).
С
Таблица
2
Размер отпечатка |
Разрешение 75 dpi |
Разрешение 150 dpi |
Разрешение 300 dpi |
Разрешение 600 dpi |
1015 см фото |
380 Кбайт |
1,5 Мбайт |
6 Мбайт |
24 Мбайт |
2530 см обложка журнала |
1.9 Мбайт |
7,5 Мбайт |
30 Мбайт |
120 Мбайт |
5030 см разворот журнала |
3.8 Мбайт |
15 Мбайт |
60 Мбайт |
240 Мбайт |
Напомним: 1 Кбайт 1000 байт, 1 Мбайт 1000 000 байт
Размер, разрешение задаются при создании рисунка и хранятся в его файле.
