- •Содержание
- •Глава 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
4. Получение черно-белых изображений (из цветных)
Переводить цветной рисунок в черно-белый можно напрямую командой Изображение /Режим /Градации серого. Но профи считают: так не всегда получается лучший вариант. Мы будем использовать каналы режимов Lab, RGB.
ЗАДАНИЕ. Переведите фото в черно-белый режим разными способами, выберите лучший вариант. Откройте файл пират.jpg. Нажмите Изображение /Дублировать, повторите дублирование 3 раза. Дубли сверните вниз.
1 способ. Переведите рисунок в черно-белый режим напрямую: Изображение /Режим /Градации серого. Получился далеко не лучший вариант.
2 способ. Перейдите в цветное фото-дубль. В окне Каналы щелкните по , откроется меню - выберите Разделить каналы. Цветное RGB-фото преобразовалось в 3 черно-белых: фото канала R (красного), фото канала G (зеленого), канала B (синего). Выберите лучший вариант (R), другие закройте.
3 способ. Перейдите в цветное фото-дубль. Нажмите Изображение/ Коррекция / Микширование каналов (Смешение), отметьте Монохромный. Можно чуть отрегулировать положение движков - ещё улучшить фото.
Способ позволяет не просто выделить 1 канал (как в способе 2, 4), а смешать разные каналы в нужных пропорциях.
4 способ. Преобразуйте фото в режим Lab, нажав Изображение/Режим /Lab.
В режиме Lab фото кодируется в 3 каналах: два цветовых (каналы a и b) и канал L обозначает яркость. Именно канал L используют для получения черно-белого фото.
В палитре Каналы удалите канал b, перетащив его вниз, на кнопку . Фото перейдёт в режим многоканальный, в палитре Каналы – 2 канала: Альфа 1 (бывший L) и Альфа 2 (бывший канал a). Также удалите канал Альфа 2.
Преобразуйте фото в полутоновое: Изображение /Режим /Градации серого.
Сравните черно-белые версии. Для каждого фото лучшим бывает 1 из 4 способов. Для идеального результата надо пробовать все, выбрать лучший.
VIII. Векторные инструменты, контуры в Photoshop
1. Работа с векторными фигурами (Shape) С появлением в Photoshop средств для создания векторных объектов он стал универсальным редактором графики. Векторные инструменты в Photoshop разделены на 3 типа (см. рис.):
|
|
|
Рассмотрим инструменты группы Фигуры. Чтоб их открыть, на панели инструментов нажмите кнопку . Она открывает группу инструментов для получения фигур (см. справа). Но это ещё не весь их набор. ЗАДАНИЕ. Откроем весь набор векторных фигур. Выберите в группе Фигуры инструмент . Вверху на панели настроек в поле Фигуры: нажмите Откроется небольшой набор фигур. Чтоб открыть весь, нажмите там , откроется меню, выберите Все (All). Эти заготовки удобно применять для вставки рамок вокруг рисунков, вставки готовых векторных фигур, или для обрезки рисунка по контуру выбранной формы
ЗАДАНИЕ.
Рисовать
любую векторную фигуру можно в
одном из 3
режимов.
Для
установки нужного режима вверху на
панели настроек есть 3 кнопки
1. Создайте новый рисунок на белом фоне 500500 пкс. |
Инструменты Фигуры
|
|
Выберите в наборе
фигур
.
Включите вверху 1й
режим
Слой-фигура
и нарисуйте
бабочку. В этом режиме фигура создается
в новом
слое (в
окне Слои
появился новый слой).
Заливается она текущим цветом или
стильной заливкой
(если
включен стиль в поле Стиль
слоя).
Примените
любой стиль.
Также можно нажать Слой /Стиль слоя и настроить разные тени, эффекты.
2
.
Включите
вверху 2й
режим
Контуры.
Нарисуйте бабочку - фигура создалась
только как
рабочий контур
и не
заливается сразу. Откройте
окно
Контуры
(оно
рядом с окном Слои)
- там
появился новый
Рабочий
контур.
3.
Включите
вверху 3й
режим
Выполнить
заливку.
Нарисуйте бабочку - фигура рисуется
прямо в активном слое (а
не
в отдельном, как в 1 режиме
).
Залилась она тоже стильной заливкой
(т.к. вы рисуете в слое, к которому до
этого применили стиль. заливку). Если
нужна фигура с обычной заливкой –
перейдите в обычный слой без стиля
(например, в нижний слой Фон).
ЗАДАНИЕ. Инструментом Линия создайте линии, стрелки, заливка - стильная
