- •Содержание
- •Глава 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. Выводы: что можно делать с выделенной областью?
удалять (клавишей Delete);
перемещать только контур выделения, не изменяя самого рисунка (перетаскивать мышкой при включенном инструменте выделения);
перемещать выделенный фрагмент рисунка (включить инструмент Перемещение и переместить);
копировать (так же, как и перемещать, но ещё удерживать Alt);
трансформировать - масштабировать, искажать, поворачивать и пр. (нажав в меню Редактирование / Трансформация).
Т
акже
в верхней строке меню Photoshop
есть команда Выделение.
Она открывает подменю с операциями – что можно делать с выделенной областью:
отменить выделение (или Ctrl+D);
инвертировать выделение (Инверсия) – выделенная область станет невыделенной, и наоборот - что за пределами выделения, станет выделенным;
растушевать границу выделения на заданное число пикселей (Растушевка);
выделить границу заданной толщины (нажав Модификация /Граница);
расширить или сжать выделенную область на заданное количество пикселей (Модификация /Расширить или Сжать);
сгладить границу (нажав Модификация /Оптимизация);
расширить, включив в выделение смежные пиксели по цвету (в пределах допуска Волшебной палочки) – нажав Смежные пиксели;
подобные оттенки выделить – включить в выделение все (не только соседние!) пиксели в пределах допуска Волшебной палочки);
сохранить выделенную область.
Выделение сохранится в спец. альфа-канал – черно-белый полутоновой рисунок, который изображает выделение. В нём каждый пиксель имеет оттенок от 0 (черный, не выделен) до 255 (белый, выделен полностью);
загрузить выделение из канала. Если уже какая-то область выделена, то можно указать, чтобы загружаемое выделение было добавлено или вычтено из уже существующего выделения.
II. Инструменты рисования. Выбор цвета
1
.
Выбор цвета.
Инструменты Кисть, Карандаш, Штамп узоров, Ластик.
Инструменты Заливка, Градиент.
1. Выбор цвета. В Photoshop используется 2 цвета - основной и фоновый. Их устанавливают на панели инструментов, внизу: основной цвет – в верхнем квадрате, фоновый – в нижнем.
Если
рядом щелкнуть на стрелке
,
основной и цвет фона поменяются местами.
Если
щелкнуть по
,
зададутся цвета по умолчанию - черный
основной, белый фон
Щелчок по квадрату открывает окно Сборщик цветов для выбора нового цвета.
В окне можно сделать следующее:
|
|
(щелкнув
по
,
можно выбрать ближайший цвет, входящий
в цвета CMYK).
получить предупреждение (знаком
)
– цвет не входит в безопасную web-палитру
(щелкнув по
,
можно выбрать ближайший цвет из
web-палитры).
Цвета задают в режиме RGB чаще тогда, когда рисунок готовят для показа на экране.
В этом режиме цвет каждого пикселя образуется путём смешения 3х цветов - R,G,B (Red, Green, Blue - красный, зеленый, синий). Многообразие цветов получается, т.к. каждый из 3х составляющих цвета (R, G, B) может принимать разные значения яркости - от 0 до 255. Эти 3 числа и вводят в окне Сборщика цветов, когда надо задать точный оттенок цвета.
Цвет в режиме RGB можно ещё задать, если ввести в поле RGB-код цвета: каждая из 3х составляющих цвета (R, G, B) задаётся двузначным 16-ричным числом.
Цвета задают в режиме CMYK, когда рисунок готовят для печати. В этом режиме цвет каждого пикселя образуется из 4х составляющих цветов – C,M,Y,K. Каждый из них тоже может принимать разные значения яркости.
В режиме HSB цвет пикселя составляется из H -тона, S - насыщенности, B - яркости.
В режиме Lab цвет пикселя составляется из L -яркости, a, b - цвет. параметров.
Инструмент
Пипетка
(Eyedropper).
Если на фото уже есть нужный
цвет, инструментом Пипетка
можно щелкнуть на фото по нему - и этот
цвет задастся как основной (если
удерживать Alt - как
фоновый цвет). Пипетку можно временно
включить при работе любого инструмента,
нажав Alt.
2. Инструменты Карандаш, Кисть. Эти инструменты связаны с одной кнопкой. |
|
Карандаш
наносит
резкие чертёжные линии (твердость 100%).
Поэтому его удобно использовать для
изменения
цвета отдельных пикселей
рисунка.
Вверху, на панели
настроек кнопка
даёт выбрать диаметр (размер)
инструмента, форму мазка, твердость.
А у Кисти
есть ещё много настроек, их можно
изменить, щелкнув кнопку
вверху на панели настроек, справа.
ЗАДАНИЕ: сделайте, чтоб у кисти ширина мазка уменьшалась. |
|
Создайте новый рисунок (нажав Файл /Новый) 300500 пикс., фон белый.
Включите
Кисть
,
возьмите форму с ровными краями
.
Вызовите настройки Кисти, щелкнув вверху
по
.
В настройках выберите слева раздел
Динамика
формы. Справа
в поле Управление
выберите режим Переход
(или
Сглаживание,
Затухание),
рядом введите количество шагов, за
которое
диаметр кисти уменьшается до 0. Нарисуйте мазки.
ЗАДАНИЕ: настроим точечные линии. Возьмите Кисть с ровными краями. Отключите раздел Динамика формы, щелкните по разделу Форма кисти. Включи- |
|
те внизу опцию Интервал, настройте интервал выше 110. Нанесите мазки (а).
Возьмите
Кисть с мягкими краями
.
Включите
слева опцию Шум
- мазки будут
разбрызгиваться
по краям (б).
Включите опцию Мокрые края (Шум отключите) - по краям будет темнее (в).
ЗАДАНИЕ: настроим пунктирные чертежные линии. Включите Карандаш . Вызовите настройки, щелкнув по . В настройках в разделе Форма кисти задайте Форма (скругление)=10%, Интервал 1000%. Нарисуйте линию, держа Shift
Ч
ем
выше задать Форму,
тем реже будут штрихи пунктира.
Если Угол задать выше 00, штрихи будут повернуты. ЗАДАНИЕ: Художественные кисти. Настроим, чтобы Кисть наносила мазки в форме фигур (звезды, листья, цветы и пр. - см. справа). Вверху, на панели настроек |
|
Кисти щелкните кнопку . Откроется панель; прокрутите её - увидите разные формы кистей; выбирайте фигурные формы и наносите ими мазки.
Можно
открыть другие
наборы
кистей:
в этой же панели настроек, вверху нажмите
кнопку
.
Откроется меню, там другие наборы кистей
(так,
вызовите набор Special
Effect
Brushes).
Чтоб
настроить кисти по
умолчанию,
нажмите `Сбросить
кисти`.
ЗАДАНИЕ: создайте творческую композицию кистями разных форм (в том числе художественными). Примеры работ см. в презентации.
Инструмент
Штамп узоров
– используют,
чтоб мазки кисти заливались
не
одним цветом, а узором.
Попробуйте: включите
,
на горизонтальной панели настроек, в
поле Кисть
задайте размер
и форму
кисти (как обычной Кисти); в поле Модель
выберите узор,
которым будет рисовать кисть.
Инструмент
Ластик
(Eraser)
для стирания.
На панели настроек можно выбрать 3
режима: Кисть,
Карандаш,
квадратный
Блок.
Фактически Ластик - один из 3х
перечисленных инструментов, рисующий
фоновым
цветом.
Если рисунок имеет прозрачный фон, Ластик делает пиксели прозрачными.
Также есть
ещё
Стиратель
фона
и Волшебный
ластик
.
Они
- для
создания рисунков с
прозрачными
областями:
удаляет пиксели фонового
слоя и заменяет
их на прозрачные,
удаляет
похожие
цвета.
3. Инструмент Заливка (Paint Bucket) – для заливки выделенной области цветом или узором. Инструмент имеет такую панель настроек (см. рис.):
Заливку можно выбрать из 2х видов: Основной цвет (заливка основным цветом) и Шаблон (заливка узором, узор выбирается рядом - ).
Чтобы добавить свой узор, надо нарисовать его, выделить прямоугольник и нажать в меню Редактирование /Определить узор.
Непрозрачность задаёт, насколько непрозрачной будет заливка (на 100-0%)
Допуск – чем выше число (до 250), тем больше оттенков сразу заливается. Если выделенная для заливки область пёстрая, то при низком Допуске одним щелчком зальются не все цвета этой области. При Допуске =250 одним
щелчком сразу зальётся любая область.
Инструмент
Градиент
|
|
Он заливает градиентом выделенную область (или весь рисунок, если ничего не выделено). Градиент - это плавный переход между 2мя или несколькими цветами. По умолчанию инструмент заливает 2мя цветами - основным и цветом фона. Инструмент на панели имеет настройки (см. рис.):
В поле
можно выбрать стандартные
цветовые градиенты.
Если щелкнуть не по стрелке , а по самому переходу цветов , откроется окно – там можно настроить свой многоцветный градиент.
Тип
перетекания градиента
выбирают
в
кнопках
:
линейный градиент, радиальный
(круговой),
угловой,
цилиндрический,
ромбовидный.
Флажок Прозрачность надо отметить, если в градиенте есть полупрозрачные области (напр., переход от основного цвета к прозрачности).
ЗАДАНИЕ: создайте новый рисунок (нажав Файл /Новый) 300500 пикс., фон белый. Выделяйте области и применяйте разные градиенты -см. презентацию.
