- •Содержание
- •Глава 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
IV. Создание теней, отражений
ЗАДАНИЕ.
Создание
тени на земле (или
на стене).
Откройте фото Смеётся.jpg. Нужно отделить фигуру (от которой отбросим тень) от фона и вставить её на отдельный слой. Поэтому выделите фигуру человека (легче сначала выделить фон и инвертировать выделение). Нажмите Скопировать, затем Вставить (фигура вставится на отдельный слой).
2. Нажмите Слой /Стиль слоя /Тень. Откроется окно, настройте параметры обычной тени-ореола с размытыми краями (например, Смещение 20/10/25).
3. Оставаясь в палитре Слои на этом же слое, нажмите: Слой /Стиль слоя / Образовать слой. Эффект тени перейдёт в отдельный слой `Падающая тень`.
4. Куда отбросить тень - сзади на стену или пол, либо спереди? Она должна падать от фигуры в противоположную сторону от освещенной стороны.
Перейдите на слой `Падающая тень`. Изменим форму и положение тени (положим тень сзади на пол): нажмите Редактирование/Трансформация / Искажение. Перетащите верхний средний маркер рамки так, чтоб тень легла на пол. Но следите - низ тени всегда должен исходить из-под ног фигуры. Боковыми маркерами задают искажение, перспективу тени. Чтоб применить искажение, нажмите Enter.
5. Сделаем тень размытой по краям, и осветлим при удалении от фигуры.
Выделите тень (удерживая Ctrl, щелкните в окне Слои по миниатюре слоя с тенью). Нажмите Выделение /Растушевка =7.
Нажмите Слой /Новый слой (а видимость слоя `Падающая тень` отключите, щелкнув ). Надо залить выделение для тени черно-серым градиентом. Назначьте текущий цвет темно-серый, цвет фона - серый; инструментом Градиент залейте выделение в направлении - у ног темнее, далее - светлее.
Снимите выделение. В окне Слои уменьшите непрозрачность слоя.
ЗАДАНИЕ. Создание отражения в воде (или на стеклянной поверхности).
1. Откройте фото Девушка.jpg - её нужно скопировать в фото с берегом.
Выделите девушку (сначала выделите фон Волш. палочкой =32 и Выделение /Инверсия). Чтоб её контур был не так резок: Выделение/ Растушевка =1.
Нажмите Копировать. Откройте файл Берег.jpg и нажмите Вставить.
Переместите
девушку на
берег как на образце. Ступню ноги (в
месте соприкосновения с песком) чуть
размойте
инструментом Размытие
2. Создаём отражение. В окне Слои щелкните по слою с девушкой и нажмите Слой /Создать дубликат; щелкните по нижнему слою-дублю и Редактирование /Трансформация/ Отразить вертикально,
переместите дубль, чтоб ступня в отражении прикоснулись со ступнёй;
в окне Слои уменьшите непрозрачность слоя с отражением (»70%);
чуть размойте отражение: Фильтр /Размытие в движении (=2);
имитируем рябь воды: Фильтр /Искажение /Рябь (Distorts/Ripple), -37, Medium
ЗАДАНИЕ. Имитация водоёма. Откройте пейзаж.jpg Вместо травы сделаем отражение пейзажа в воде.
1.
При
желании фото можно увеличить вниз
(инструментом
Выделите Лассом контур будущего водоёма - контур |
|
поляны с травой (см. рис.). Включите режим Быстрой маски (внизу панели инструментов ) - поправьте выделение линии берега. Выйдите из режима
2. Создайте новый слой, назовите `Пруд`. Слой пустой, но в нём действует выделение под водоём, заполним его заливкой (для тонирования воды).
Задайте цвета для тонирования воды: для текущего цвета снимите Пипеткой с фото темный оттенок, для цвета фона снимите самый светлый цвет неба. Инструментом Градиент залейте выделение (на слое `Пруд`) от темного внизу к светлому вверху. Сымитируйте рябь, соринки на воде: Фильтр /Шум |
|
/ Добавить шум, опция Uniform (равномерно) =5-7. Отмените выделение.
3. Строим отражение. Отражение - это то же изображение, но `вверх ногами`. Поэтому слой Фон продублируем и повернем `вверх ногами`:
в окне Слои выделите нижний слой-фон и Слой /Создать дубликат. Новый слой `Фон копия` в окне Слои перетащи наверх и Трансформация/ Повернуть вертикально. Отражение (`Фон копия`) сместите вниз »на 2/3 строго по вертикали (для этого удерживайте Shift). Позже его положение подправим.
Из слоев `Пруд`, `Фон копи` сделаем срезаемую группу - чтоб отражение вре-
залось в подготовленную область Пруд: удерживая Alt, в окне Слои наведите мышь на линию, разделяющую
эти
слои.
Как курсор примет вид
Слой `Фон копи` врезался в форму пруда, значит `Фон копи` можно на фото двигать - от слоя будет |
|
видна лишь та часть, что попадает в форму пруда. Попробуйте: сдвиньте слой `Фон копия` выше-ниже, чтоб поправить положение отражения.
4. Создание реалистичных оттенков. В окне Слои для слоя `Фон копия` смените режим наложения Нормальный на Умножение (Multiply) - он затемняет.
Объединим слои `Пруд`, `Фон копия`. Сначала сделаем Фон невидимым: в окне Слои щелкните по глазу слоя `Фон`. Нажмите Слой /Объединить видимые.
Отражение размоем: Фильтр /Смазывание /Смазывание движением, угол 900 (смажется по вертикали), дистанция 5. Уменьшите непрозрачность слоя -90%

,
щелкните там.