- •Содержание
- •Глава 1. Виды компьютерной графики, их характеристика 6
- •Глава 2. Графический редактор adobe photoshop 19
- •Глава 3. Подготовка графики для web и мультимедиа 81
- •Глава 4. Основы web-дизайна. Язык html 90
- •Глава 5. Сайтостроение в Macromedia Dreamweaver 103
- •Глава 6. Проектирование web-сайта 122
- •Введение
- •I. Растровая, векторная, фрактальная графика
- •Глава 1. Виды компьютерной графики, их характеристика
- •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
V. Форматы графических файлов
Формат графического файла – это способ организации информации внутри файла. Какой формат имеет файл – это отражается в названии файла (в виде расширения имени файла). Так, файлы рисунок.bmp, рисунок.gif, рисунок.jpg имеют соответственно форматы: bmp, gif, jpg.
Знания о форматах нужны и при сохранении изображений на промежуточных стадиях обработки, и при сохранении готовых изображений, и при их переводе из формата в формат, при подготовке рисунков к печати или для показа на экране и пр.
1. Критерии выбора формата файла
Проблема всех изображений – прямая зависимость: чем выше качество изображения (его разрешение, цветность), тем больше объем его файла (в байтах). А если файл имеет большой объём, он занимает много места на диске, `не подходит` для Интернета и электронных продуктов, возникают трудности при его передаче по сети и пр.
Поэтому многие форматы предусматривают сжатие, компрессию данных - уменьшение объёма файла изображения (в байтах). Поскольку разные форматы используют различные способы кодирования информации, то и дают разную степень сжатия, сжимают объём файла с потерей качества изображения или без потерь.
КАКОЙ ФОРМАТ ВЫБРАТЬ?
1. Формат нужно выбирать в зависимости от назначения изображения (для печати, для экранного представления и Интернет, или для временного рабочего хранения):
В web-дизайне главное - файлы должны быть малого объёма, чтобы обеспечить высокую скорость передачи данных по сети. Поэтому для экранных изображений используют форматы со сжатием, причем чаще за счет потери части информации (сжатие с потерями). Это приводит к некоторому снижению их качества, но на экране это чаще мало или почти не заметно.
Изображения для печати (полиграфии) не надо постоянно передавать с одного ПК на другой, поэтому объём файла большого значения не имеет. Зато потери качества недопустимы, при распечатке это очень заметно. Поэтому подходят форматы со сжатием без потерь качества или вообще без сжатия.
На промежуточных этапах обработки изображений для их сохранения используются форматы, не вносящие искажения, - без сжатия. Но в конце обработки файл преобразуют в другой `конечный` формат хранения (его выбирают в зависимости для чего предназначено изображение - для печати или показа на экране).
2. При выборе формата также учитывают:
количество цветов, цветовых переходов в изображении (рисунок это или фото),
совместимость формата с др. программами (откроется ли файл в др. программе),
возможно ли преобразование изображения из одного формата в другой.
2. Методы сжатия информации (используемые в разных форматах файлов)
Перед изучением форматов файлов рассмотрим, какие в них используются методы (алгоритмы) сжатия данных. Этим форматы отличаются друг от друга.
Вообще сжатие данных применяется для более компактного их хранения на цифровых носителях и быстрой передачи по сети.
Процедура сжатия объёма файла называется оптимизацией.
Сжатие основано на устранении избыточности информации в исходных данных. Так, в несжатом фото есть множество оттенков цветов, часть их можно удалить незаметно для нашего зрения.
Методы сжатия бывает 2х видов – с потерей качества изображения и без потерь.
Сжатие без потерь – это когда файл рисунка сжимается и так хранится, а при воспроизведении рисунка его исходные данные восстанавливаются без искажений.
Сжатие с потерями – это когда сжатый файл восстанавливается с искажениями, но они несущественны (незаметны или почти незаметны на глаз). Степень сжатия (и значит, степень потери качества) пользователь может задавать сам. При этом достигается компромисс между размером файла и качеством изображения.
Конечно, сжатие с потерями эффективнее (даёт большую степень сжатия).
В таблице 3 указано, какие методы сжатия используют разные форматы файлов.
Таблица 3
Формат файла |
Метод сжатия |
Влияние на качество |
GIF |
LZW |
без потерь |
PNG |
Deflate |
без потерь |
JPEG |
JPEG |
с потерями |
BMP |
RLE (редко) |
без потерь |
TIFF |
без сжатия, LZW, RLE, ZIP, JPEG |
без потерь |
PSD |
RLE |
без потерь |
TGA |
RLE |
без потерь |
LZW, RLE – универсальные методы сжатия без потерь, используются во многих форматах файлов. Эти методы лучше сжимают изображения, в которых есть большие одноцветные участки, т.е. чертежи, рисунки, но не фото.
LZW даёт большее сжатие, чем RLE (но работает медленнее).
RLE (Run Length Encoding - групповое кодирование). Есть разные варианты алгоритма RLE.
1й - самый простой (применен в формате файлов PCX). 2й даёт большую степень сжатия (применяется в форматах TIFF, TGA); в формате TIFF он называется PackBits и применяется по желанию (если в окне сохранения файла отметить PackBits).
LZW (Lempel-Ziv-Welch) назван по именам изобретателей (Лемпель, Зив, Велч); разработан в 1984. Применяется в форматах GIF, TIFF.
В чем идея сжатия? Эти методы относят к LZ-алгоритмам сжатия (LZW, RLE, LZ77), использующим словарный метод сжатия. Он основан на поиске в рисунке одноцветных областей. Они имеют одинаковые, повторяемые коды. Алгоритм эти повторяемые коды-цвета рисунка (фразы) заменяет на короткие № (индексы), и заносит эти индексы в словарь. В итоге сжатие выполняется заменой длинных повторяемых кодов цветов (фраз) их короткими индексами из словаря. Чем больше одноцветных областей, тем больше эффект сжатия
Алгоритмы LZ используют и в программах архивации данных.
Deflate – метод сжатия без потерь, очень эффективный (используется в формате PNG). Deflate – разновидность словарного метода LZ 77.
JPEG (как метод сжатия; не путать с JPEG как форматом файла) – это метод сжатия с потерями, эффективно сжимает фото (до 200 раз!).
