- •Содержание
- •Глава 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
2. Использование альфа-каналов
ЗАДАНИЕ. Слияние 2-х фото. Для слияния 2х фото поместим каждое на отдельный слой. В альфа-канале сделаем плавное выделение половины фото, чтоб потом в фото на верхнем слое это выделение удалить. Тогда под удалением плавно проступит часть фото на нижнем слое. |
|
1. Откройте фото 1.jpg, 2.jpg. Все фото 1 выделите, скопируйте. Вставьте его в фото 2.jpg (на верхний слой). 2. Откройте палитру Каналы (Channels). Щелкнув там кнопку , нажмите Новый канал. Он отразится черным рисунком, а в палитре Каналы появится канал Альфа 1 3. Инструментом Градиент залейте его линейным черно-белым градиентом (перетащив мышь слева направо) |
|
Удерживая Ctrl, щелкните в палитре Каналы по альфа-каналу. Таким приёмом мы в альфа-канале активизировали выделение - получили плавное выделение части слоя (такое же плавное, как плавно переходят цвета в черно-белой заливке канала; то что выделение плавное, убедитесь позже). Благодаря чему?
Альфа-канал используют для создания выделений в виде черно-белых рисунков. Черные области означают `не выделено`, белые -`выделено`, серые -`частично выделено`. Поэтому мы применили в канале плавную черно-белую заливку – при её выделении выделилась лишь белая область, с плавным переходом в частично выделенную область (залитую серым); черная часть не выделилась.
4. В палитре Слои щелчком перейдите на верхний слой (лес). Благодаря черно-белой заливке альфа-канала получили плавное выделение половины леса.
Нажмите Delete - выделенная часть леса удалится, причем плавно, а под удалением будет видна часть фото нижнего слоя. Смотрится как слияние 2х фото.
Меняя направления градиента в альфа-канале, можно получать другие результаты. От размера градиента тоже зависит степень прозрачности объектов.
ЗАДАНИЕ. Выполните слияние других фото (они в папке Другие варианты).
ЗАДАНИЕ. Вычитание из 1го выделения другого. Откройте бежит.jpg.
Надо верхнюю и нижнюю части фона обработать отдельно (верхнюю фильтром, нижнюю - залить), и чтоб части фона соединялись плавно. Поэтому создадим и сохраним в альфа-каналах 2 выделения: 1) бегуньи; 2) плавное выделения половины фото. Затем из выделения половины фото вычтем выделение бегуньи. Останется выделена только половина фона - её зальём. Инвертируем выделение - выделится другая часть фона, к ней применим фильтр.
1. Используя Лассо, выделите бегунью примерно, насколько удастся.
Сделаем контур выделения точным: щелчком по внизу панели инструментов перейдите в режим Быстрая маска. Заметьте: в палитре Каналы появился новый канал Быстрая маска. В этом режиме невыделенная часть фото защищена маской - закрыта розовой пленкой; без плёнки - выделенная область. Важно: режим позволяет подрисовать форму выделения (форму плёнки): где надо плёнку дорисуйте Кистью, где надо сотрите Ластиком.
Но сначала настройте (ведь мы рисуем выделение в канале):
- Цвета текущий и фоновый – черный и белый! Ведь невыделенную часть (пленку) дорисовывают Кистью черного цвета, а стирают - увеличивают площадь выделения Ластиком (он `рисует` фоновым белым цветом).
- Чтоб рисовать точно, для Кисти на панели настроек установите всё по 100%, форма кисти - с жесткими краями. Аналогично настройте Ластик: кисть жесткая, всё 100%.
Уточнение маски. Иногда мелкие дефекты маски (плёнки) незаметны в режиме маски. Их легко заметить и убрать, оставив на экране только маску как черно-белый рисунок. Для этого в палитре Каналы отключите канал RGB (щелкнув по глазу у канала RGB), доработайте маску Кистью, Ластиком. |
|
Выйдите из режима маски (щелкнув ). Что не было закрыто плёнкой, будет областью выделения. Но если на контуре выделения увидели неточности, опять зайдите в режим маски и подправьте.
В обычном режиме сохраните выделение как альфа-канал (нажав Выделение /Сохранить выделение), дайте каналу имя Бежит.
Снимите выделение (Выделение/Убрать выделение или Ctrl+D).
2. Создайте новый канал, щелкнув кнопку внизу окна Каналы. Залейте его градиентом от белого внизу к черному вверху, чтоб потом получить выделение половины фото (белая часть выделится, с плавным градиентным переходом в частично выделенную часть - серую). Смените имя нового канала на Градиент (дважды щелкнув на имени канала, введите новое).
Вернитесь в обычный цветной канал RGB (щелкните по нему).
3. Загрузите выделение из канала Градиент (нажав Ctrl, щелкните по каналу). Из этого выделения половины фото вычтем выделение бегуньи: нажмите Выделение /Загрузить выделение. Откроется окно: выберите канал Бежит, действие – Вычитание из канала. В итоге останется выделена половина
фона, без бегуньи (далее изменения её не затронут) -см.рис. На границе выделения пиксели выделены на 50%, низ фото на 100% 4. Выделенную часть фона залейте белым цветом. 5. Выделим другую часть фона. Загрузите выделение из канала Градиент: нажав Выделение/Загрузить выделение, в окне отметьте Инверсия. Так загрузится обратное выделение - не |
|
нижняя, а верхняя часть фото. И опять Выделение /Загрузить выделение, в окне укажите канал Бежит, действие – Вычитание из канала.
Выделилась верхняя часть фона, примените к ней Фильтр /Имитация/ Цветные карандаши (Artistic /Colored Pencil), выбрав параметры по вкусу.
6. Внизу инструментом Т сделайте надпись `Спорт 2014` - см. презентацию.
