- •Содержание
- •Глава 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. Цветокоррекция
Каков основной критерий высокого качества фото? Хорошая видимость всех деталей. Для этого в фото должен быть баланс по тону (т.е. присутствовать и самые светлые участки, и самые темные, и средние тона) и баланс по цвету (нет излишнего преобладания 1-го цвета над остальными).
Перечислим недостатки, которые нужно исправлять. Фото излишне:
тёмное – многие детали исчезли в гуще черных тонов,
яркое – многие детали засвечены, не видны,
тусклое, выцветшее – преобладают средние тона, нет контраста,
с неестественным преобладанием 1-го цвета (напр., синего) над остальными.
Поэтому выделяют две разновидности работ по цветокоррекции:
Тоновая коррекция |
Цветовая коррекция |
Цель: обеспечить баланс тонов |
Цель: настроить баланс цветов |
Для анализа распределения тонов - яркостей пикселей фото - нажимают Окно /Гистограмма. Гистограмма покажет, какие оттенки (тени, света, средние тона) преобладают в фото и что нужно исправить, т.к. это не всегда понятно на глаз. В гистограмме тени показаны слева, света - справа.
Так, гистограмма выше показывает: в фото преобладают средние тона – фото тусклое, нужно увеличить контраст (добавить самых светлых и темных тонов). Для коррекции этого фото можно нажать Коррекция /Уровни. Откроется гистограмма, но уже с движками на шкале. Движками перераспределяют яркости, чтоб увеличить тени и света, фото станет контрастнее. |
Избыток 1-го цвета влечет изменение других цветов фото. Для наведения баланса руководствуются цветовым кругом. Он отражает взаимосвязь цветов и показывает, как установить баланс: чтоб уменьшить избыток какого-то цвета в фото, нужно добавить цвет, расположенный в круге напротив.
Так, если в фото избыток синего цвета (всё синеватое), то для настройки баланса надо добавить желтый (см. круг – напротив синего - желтый). |
В Photoshop для коррекции в меню Изображение /Коррекция есть команды: |
|
Уровни (Levels) Кривые (Curves) Яркость /Контраст (Brightness /Contrast)
|
Цветовой баланс (Color Balance) Оттенок /Насыщение (Hue/Saturation) Варианты (Variations) Они открывают окна, где настраивают цветовой баланс согласно цвет. кругу. |
ЗАДАНИЕ. Выполните тоновую коррекцию фото. Откройте фото олень.jpg.
Командой Окно/Гистограмма вызовите Гистограмму. Она покажет: участок теней (он слева) не заполнен, все пиксели - в светлом участке, т.е. фото излишне светлое, засвеченное. Значит, нужно уменьшить его яркость.
1. Перед коррекцией любого фото продублируйте его, чтоб постоянно сравнивать результаты работы с оригиналом: открыв фото, нажмите Изображение /Дублировать. Появится 2-е фото (копия), с ним и работайте.
2. Для коррекции нажмите Изображение/ Коррекция /Уровни (Levels). Диаграмма Уровни тоже покажет: в фото участок теней (слева) не заполнен; надо убрать участок без теней (сбалансировать тени и света). |
|
Для этого левый бегунок оттащите вправо к точке, где начинаются 1-ые темные пиксели фото (см. рис.). Также можно средний бегунок (отвечает за средние тона) чуть передвинуть вправо – немного затемнятся и средние тона.
Работая в разных диалоговых окнах (напр., в окне Уровни), Вы изменяете настройки. Если хотите вернуть настройки к исходным внутри окна, нажмите Alt. При этом кнопка Отмена (Cancel) сменится на Сброс (Reset), на которую и надо нажать.
ЗАДАНИЕ. Скорректируйте зубы - отбелите (осветлите). 1. Откройте файл зубы.jpg. Выделите зубы Волшебной палочкой (можно уточнить выделение в режиме Быстрой маски). |
|
2. Чтобы коррекция зубов не очень бросалась в глаза, сделайте выделение чуть расплывчатым: Выделение /Растушевка на 1-2 пикс.
3. Для коррекции нажмите Изображение /Коррекция /Кривые.
Откроется окно Кривые (Curves). Как деформировать кривую для эффективной коррекции? Нижняя левая часть кривой отвечает за тени, центральная – за средние тона, верхняя правая – за светлые участки фото. Поясним 3 базовые положения кривой |
|
(зная их, сможете осознанно деформировать кривую).
Для усиления яркости темного фото кривую делают выпуклой (кривая 1).
Для уменьшения яркости светлого фото кривую делают вогнутой (кривая 2).
Для усиления контраста (для коррекции тусклого фото, преобладают средние тона) кривую делают S-образной формы (кривая 3).
Итак, для повышения яркости нашего фото кривую надо `выпучить` вверх: щелкните чуть выше середины кривой - добавится точка, оттащите её вверх.
ЗАДАНИЕ. Выполните коррекцию по тонам и по цветам. 1. Откройте авто.jpg. Для коррекции тонов нажмите Изображение /Коррекция /Кривые. С помощью кривой разберите тени; для этого |
|
левую часть кривой (она отвечает за тени) подымите, выгните вверх - см.рис.
2. Для коррекции цветов нажмите Изображение /Коррекция /Варианты; добавьте в фото зеленый цвет и желтый.
ЗАДАНИЕ. Выполните цветокоррекцию фото. Откройте файл собака.jpg.
1. Нажмите Изображение /Коррекция /Кривые. С помощью кривой разберите тени (кривую в центре приподнимите вверх, сделав её выпуклой).
2. Нажмите Коррекция /Варианты: сбалансируйте фото по цветам.
3. Нажав Коррекция /Оттенок -Насыщение, увеличьте насыщенность цветов
ЗАДАНИЕ. Замените цвет помады. Откройте фото в папке Перекрась.
Выделите рот. Для удобства сначала увеличьте масштаб.
Нажмите Изображение /Коррекция /Баланс цветов. В окне отметьте Сохранять яркость цвета. Передвигая движки на шкалах, подберите новый цвет помады.
