Инструменты редактирования контуров

Ÿ Если объект выделился пером неточно, инструментом Белая стрелка подправляют контур выделения, перемещаяточкиконтура.

Если надо перетащить сразу несколько точек, их обводят и перетаскивают.

Ÿ Инструменты , . Когда подправляете контур и не можете скорректировать - не хватает точек для изгиба, нужно добавить точку на кривой (или наоборот удалить). Тогда инструментом щелчком добавляют точку (а инструментом щелкают по ненужной точке).

Ÿ Инструмент Преобразование точек. Им можно корректировать участки контура. `Хвататься` надо не за точки, а за отрезок. Также он делает из кривых прямые (если дважды щелкнуть по точке кривой).

Ÿ Инструмент Чёрная стрелка - для перемещения всего контура и для трансформации контура (применимы все операции трансформации Редактирование /Трансформация …).

ЗАДАНИЕ. Выделим Свободным пером животное.

1.Откройте свин.jpg. Увеличьте масштаб в3раза. Включите Свободное перо, вверху - режим , þ Магнитный (1 /20 /10/70). Обведите свинью.

Двигайте мышь медленно (чтоб инструмент успевал всё фиксировать), не нажимая. Но щелкайте в углах (ставьте точки) и если перо пошло не туда, щелкните по нужному контуру. Если, перемещая мышь, сделали лишний отрезок, нажмите Del.

2. Где контур неточен, Белой стрелкой подправьте. Но где не получается изогнуть кривую как надо - не хватает точек для изгиба, добавьте точку инструментом . Где лишние ответвления контура, там точки удалите .

3. Сохраните контур (щелкнув в окне Контуры по `Рабочий контур` и введите новое имя `Мой контур`). Преобразуйте контур в выделение: в окне Контуры нажмите и выберите Образовать выделенную область.

Выделенный объект вставьте в другое фото, создав коллаж. Если по контуру увидите лишние пиксели, сотрите их Ластиком.

Вывод: Свободное перо, контуры хорошо применять для создания выделений. Если выделенный объект потом вставить на однотонный фон, то края выделенного объекта будут гладкие, плавные, без рваных кромок (как при использовании др. способов выделения).

ЗАДАНИЕ. Используем Перо для рисования - нарисуем бокал (описание технологии с рисунками см. в папке Векторные инструменты).

ЗАДАНИЕ. Создадим Пером кривую, чтобы вдоль неё разместить надпись. Из папки /фото_текст по кривой откройте любое (но сначала технологию создания посм. в видео-ролике). Инструментом Перо вокруг персонажа создайте кривую (напр., вокруг фруктов), на ней потом разместим надпись.

Делайте кривую плавной, без острых углов - над ними текст будет неразборчив (или в тексте там сделаете пробелы). Подправьте кривую Белой стрелкой.

Если хотите удалить незаконченный контур, нажмите дважды Esc.

Включите инструмент ТТекст, вверху настройте размер, цвет текста и пр. Подведите курсор к краю кривой (в начало текста), когда курсор примет вид , тогда щелкните и введите свой текст.

Если место под текст будет ограничено точкой o, включите инструмент Черная стрелка,подведите к точке o, дождитесь черной стрелочки и перетащите точку-ограничитель дальше по кривой. Так можно изменить и точку начала текста Å (дождавшись черной стрелки, щелкнуть где нужно).

Чтобы кривая исчезла, в окне Контуры щелкните вне контура.

Примените к тексту эффекты: Слой /Стиль слоя /Тень (или др. эффекты).

ЗАДАНИЕ. Создайте надпись вокруг виньетки. Подберите любое фото. Если надо, инструментом увеличьте фото по периметру (добавив фон). Сделаем из фото виньетку. Для инструмента задайте растушевку »15 пикс. и выделите персонаж.

Инвертируйте выделение и удалите части вне овала (нажав Del).

Строим овальный контур, по нему расположим текст. Для этого легче выделение овала преобразовать в контур. Инвертируйте выделение (выделится персонаж); расширьте выделение: Выделение/ Модификация /Расширить, »20 пикс. В окне Контуры нажмите и выберите Создать из выделения контур

Включите инструмент ТТекст. Подведите курсор к кривой (в начало текста), когда курсор примет вид , щелкните и введите текст.

Инструментом Черная стрелка перетащите точку начала текста Å на кривой и точку конка текста так, чтоб надпись была симметрична с разрывом внизу.

Глава 3. ПОДГОТОВКА ГРАФИКИ ДЛЯ WEB и МУЛЬТИМЕДИА

I. Оптимизация – уменьшение объема файла

(для его публикации в Интернете, в мультимедиа-продуктах)

Чтобы подготовить изображение не для печати, а для электронного представления - для публикации в Интернете, вставки в мультимедиа-продукт, - его объём (в байтах) надо уменьшить - оптимизировать, чтоб снизить время загрузки графики. Для этого при сохранении графики нужно:

1) правильно выбрать формат для хранения файла,

2) в окне сохранения файла сделать правильные настройки оптимизации, чтоб и объём файла уменьшить, и внешние качество рисунка оставить хорошее.

Большой объём (в байтах) имеют растровые картинки, прежде всего. Поэтому для их сохранения в сжатом оптимизированном виде используют спец. форматы – GIF,JPEG,PNG (они позволяют уменьшить объём файла).

Но на промежуточных стадиях обработки графики используют другие форматы (так, если рисунок обрабатывают в Photoshop, на промежут. стадиях его хранят в формате PSD - позволяет хранить рисунок, разрезанным на слои, с альфа-каналами и пр.).

Чтобы правильно выбрать формат, в таблице 5 указаны назначение, характеристики популярных растровых форматов файлов.

Также при настройке изображений надо знать, какие можно применять к рисунку цветовые режимы. От этого зависит объём файла и степень многоцветности рисунка. Цветовые режимы делят на:

а) полноцветные – режимы RGB, CMYK. Изображение в таком режиме может отображать 16,7 млн. разных цветов и выше (т.е. каждая точка фото может быть одного цвета из 16,7 млн. цветов);

б) неполноцветные. Изображения в таких режимах могут отображать только 256 разных цветов и менее (есть 2-цветный черно-белый режим как чертеж).

Глубина цвета (ГЦ) – это сколько бит отводится на хранение цвета каждого пикселя рисунка. Чем выше ГЦ, тем больше оттенков может иметь рисунок.

Чтоб оптимизировать цветную графику, можно уменьшить количество цветов в её палитре. Так, полноцветную графику (16,7млн. цветов) при подготовке для Интернет можно перевести в цв. режим Индексированный (256 цветов), причем в нём выбрать Безопасную Web-палитру(Web Safe Color Library).

В чем её безопасность? Даже если в рисунке не больше 256 цветов, нет гарантии, что при просмотре любым пользователем Интернет все эти цвета будут в палитре его браузера. Ведь если на странице несколько рисунков с разными палитрами, браузер составляет 1 общую палитру, и какие-то цвета могут выпасть (исказиться).

Проблема решается Безопасной (safe) web-палитрой для Интернет. При переводе в неё все цвета рисунка заменяются цветами из этой web-палитры, и на любом ПК рисунок отобразится также, как и на вашем мониторе!

При этом, если исходный рисунок содержит больше цветов, чем есть в web-палитре, применится дизеринг - отсутствующие цвета заменятся узором из пикселей других самых близких цветов, что есть в web-палитре.

В Photoshop для перевода рисунка в этот режим надо в меню выбрать: Изображение /Режим /Индексированный. Откроется окно, там задать Палитра - Web.

Если сами создаете рисунок для web или окрашиваете часть, сразу используйте безопасные цвета из web-палитры (как минимум, в областях большой площади). Для этого в окне выбора цвета отметьте þ Только web-цвета.

А если выбирать цвета из обычной полноцветной палитры RGB, то в этом окне рядом с образцом выбранного цвета может возникнуть знак Это предупреждение: цвет не входит в безопасную web-палитру. Тогда щелкнув по , можно выбрать ближайший цвет из web-палитры.

Сохранять рисунок в таком режиме (256 цветов) надо в формате GIF

ЗАДАНИЕ. Оптимизация фото путём его сохранения в формате JPEG.

Файл чай.tif (сканированное фото) обработайте и сохраните в формате JPEG в оптимизированном виде (т.е. уменьшите его объём в байтах). Причина - фото надо подготовить для электронной публикации (не для печати),.

1. Откройте фото чай.tif и обработайте (обрежьте по краям белые части).

2. Для экранных рисунков достаточно разрешения 96 пикс/дюйм (см. гл.I). Поэтому нажмите Изображение /Размер изображения. Откроется окно, там внизу отметьте флажки þ (см. рис. 5 б), выберите нужный Тип масштабирования - интерполяции (см. стр.10) и задайте разрешение 96 пикс/дюйм.

Если не устраивает ширина, высота рисунка в пикселях, введите нужный размер.

3. Оптимизация файла: сохраним файл в формате, который умень­шит его объём (в байтах). Для этого нажмите Файл/ Сохранить для Web(File/Save for Web).. Откроется окно оптимизации (см. ниже). Вверху выберите вкладку 2 варианта (2-Up) - слева будет вид фото в несжатом виде (Оригинал), справа - в оптимизированном виде (что получим в итоге). В этом окне нужно:

а) правильно выбрать, в каком форматесохранить рисунок - JPEG,GIF,PNG или WBMP. Эти форматы позволяют уменьшить объём файла; б) подобрать такие настройки, чтоб и размер файла умень-

шить, и качество рисунка оставить приемлемым, т.е. надо найти компромисс.

Выберите формат JPEG. Он лучше всех сжимает фото, сохраняет полно­цвет. палитру из 17 млн. цветов (сохранятся плавные переходы цветов фото).

На шкале Качество (Quality) передвигайте бегунок от 100% влево. При этом качество фото (фото справа) будет снижаться, за счет этого уменьшится объём файла, в байтах. Снижение качества до »60-80% на глаз чаще незаметно, но с какого-то % уже становится заметно. Поэтому остановите бегунок на минимальном %, где качество фото на глаз ещё остаётся хорошим (т.е. шкала позволяет найти компромисс между качеством фото и объёмом файла).

Под правым фото отразится, какой объём у фото будет после сжатия, при заданном % качества (в нашем примере при 60% качества объём будет 35 Кб, а несжатый оригинал занимал 350 Кб; т.е. сжали »в 10 раз). Сохраните файл

Под фото отражается и время загрузки (в сек., при выбранной скорости соединения).

Если отметить þ Постепенно (Progressive), фото в Интернет-браузере будет появляться постепенно (сначала грубое, по мере загрузки качество будет улучшаться).

Параметр Blur (Размытие) обозначает степень дополнительного размытия фото. При увеличении размытия размер файла уменьшается.

Если в фото удалили фон (а JPEG не может хранить прозрачный фон), то в поле Подложка(Matte) задают цвет, которым зальются прозрачные области. Задавайте цвет фона сайта /кадра (куда вставите рисунок), тогда фон рисунка на сайте будет не виден.

ЗАДАНИЕ. Оптимизация рисунка путём его сохранения в формате GIF.

Форматы GIF,PNG-8 (в отличие от JPEG) могут хранить рисунки с палитрой не более 256 цветов (поэтому они подходит не для фото, а для рисунков). Зато GIF, PNG могут хранить прозрачные области.

Откройте файл прости.tif.Оптимизируем его для публикации в Интернете.

Для перевода рисунка в цветовой режим, который оптимизирует количество цветов и подбирает их из спец. палитры для Интернет, нажмите: Изображение /Режим /Индексированный. Откроется окно, там задайте Палитра – Web, Размытие - Нет.

Нажмите Файл/ Сохранить для Web. В окне оптимизации выберите вкладку 2 варианта: слева будет оригинал, справа - сжатый рисунок. Выберите формат Gif

Чтоб сжать GIF-рисунок, в этом окне нужно уменьшить количество цветов.

В поле Цвета (Colors) стоит максимум - 256 цветов. Пробуйте их уменьшить до 128, 64, 32, …, чтоб уменьшить объем файла. Но от этого качество рисунка может снижаться, поэтому остановитесь на том минимальном числе цветов, когда качество рисунка на глаз ещё хорошее.

Под рисунком смотрите, как снижается объём файла (в байтах) при уменьшении количества цветов/ Опишем другие настройки GIF: В поле Потери (Lossy) задают допустимые потери при сжатии (от 0 до 100%).

Список под форматом GIF определяет, как выбираются цвета в палитре:

- Перцепционная (Perceptual) - в 1 очередь выбираются лучше воспринимаемые цвета.

- Селективная (Selective) - в 1 очередь выбираются цвета, охватывающие большие области

- Адаптивная (Adaptive) - в 1 очередь выбираются цвета, что встречаются чаще всего.

- Ограниченная Web (Restrictive Web) - используются только цвета из безопасной web-палитры, их браузеры не искажают.

Если отмечено þ Прозрачность (Transparency), прозрачные области рисунка сохранятся, если нет - зальются цветом, выбранным в поле Подложка(Matte)

Если исходный рисунок содержит больше цветов, чем есть в GIF-палитре, применяется дизеринг - отсутствующие цвета заменяются узором из пикселей других цветов, что есть в палитре. В поле Дизеринг(Dither) задают % использования таких узорных заливок: при 100% `узоры` применятся везде, при 0% отсутствующие цвета заменятся просто ближайшими из палитры.

Совет: дизеринг лучше использовать для рисунков с переходами цветов.

ЗАДАНИЕ. Откройте файл дети.bmp. Оптимизируйте файл для публикации в сети. При этом выберите нужный цветовой режим, формат и параметры так, чтобы сохранить качество и максимально уменьшить размер фото.

ЗАДАНИЕ. Стилизация фото путём перевода в палитру из 256 цветов.

Фото обычно имеет палитру 16,7 млн. цветов. Но иногда фото переводят в режим из 256 цветов, чтоб стилизовать – придать рисованный стиль, сделать тонированным рисунком, придать эффект пылающего и пр.

Откройте фото барьер.jpg. Стилизуем его: нажмите Изображение /Режим /Индексированный (этот режим переводит рисунок в палитру из 256 цветов).

Откроется окно, в списке Палитра выберите Заказная. Таблицу цветов выберите Абсолютно черное тело(палитра пылающих цветов,Black Body). Внизу в 1^м окне в поле Размытие выберите Шум (если выбрать Диффузия эффект будет другой).

II. СОЗДАНИЕ РИСУНКА НА ПРОЗРАЧНОМ ФОНЕ (без фона)

Зачем фон рисунка делать прозрачным? Например, надо оформить сайт (или

презентацию) рисунком. У сайта (презентации) есть свой цвет фона. Поэтому у рисунка, который хотят вставить, фон убирают (дела­ют прозрачным). Тогда прямоугольные границы рисунка на сайте не видны; и персонаж рисунка органично вписывается в фон сайта (слайда). Пример: справа – 2 слайда. На нижнем слайде рисунок (цыпленок) вставлен без фона, он органично вписался в фон слайда. Такое дизайн-оформление слайда более профессионально. Если же в кадр вставить рисунок, имеющий свой фон (верхний слайд), то рисунок смотрится в кадре прямоугольным "инородным" объектом, необработанным. Это непрофессионально.

ПРАВИЛО: рисунок, в котором удалили фон, нужно сохранить в формате GIF (если это рисованная картинка), или в формате PNG (если фото). Напр., файл цыпленок.gif. Форматы GIF, PNG могут хранить прозрачные области.

ЗАДАНИЕ. В рисунке птица.gif синий фон надо убрать - сделать прозрачным. Ход работы: выделить персонажа (птицу), скопировать, создать новый файл с прозрачным фоном и вставить туда птицу. Сохранить в формате GIF

1) Откройте птица.gif. Чтоб выделить птицу, сначала Волшебной палочкой выделите одноцветный фон и нажмите Выделение/ Инверсия – в итоге выделится не фон, а уже птица. 2) Скопируйте птицу (Редактирование /Копировать).

3) Создайте новый файл с прозрачным фоном: нажмите Файл/Новый. В открывшемся окне в поле "Содержимое фона" установите "Прозрачный".

4) Появится новый рисунок с прозрачным фоном (он показан как серая шашка). Вставьте туда птицу (Редактирование /Вставить).

5) Сохраните файл: нажмите Файл /Сохранить как. В окне сохранения, в строке `Тип файла` выберите формат GIF (этот формат может хранить рисунки с прозрачными областями). Откроется окно `Цвет с индексом`, отметьте в нём опцию þ Прозрачность.

2й способ создания рисунка на прозрачном фоне.

Открыть рисунок. Фоновый слой всегда непрозрачен, поэтому надо его преобразовать в обычный слой: в окне Слои щелкнуть дважды по слою Фон (Задний план).

(Но если слой называется Индекс, перевести рисунок в обычный полноцвет. режим: Изображение /Режим /RGB). Появится окно Новый слой, в поле `Цвет` выбрать `Нет`

Теперь удаляя участки рисунка (напр., стирая Ластиком фон), эти участки не будут заливаться цветом фона, а станут прозрачными (отразятся серой клеткой).

Сохранить в формате GIF; в окне `Цвет с индексом` отметить þ Прозрачность.

СОВЕТ: Если при удалении фона вокруг персонажа осталась кайма цвета фона (она будет некрасиво видна при вставке рисунка на сайт), удалите её: нажмите Слой / Обработка краев /Устранить кайму

(команда удаляет кайму у вырезанного объекта на отдельном слое).

III. АНИМАЦИЯ: разработка анимированных баннеров

Для разработки анимации вместе с Photoshop поставляется программа Image Ready (а с версии Photoshop CS3 всё встроено в сам Photoshop).

Анимация - `оживление` рисунков - строится по принципу: в файле хранятся несколько рисунков. Они сменяют друг друга через малые промежутки времени. В итоге создаётся иллюзия движения объектов (как в мультике).

Чтобы движение сделать более плавным, нужно увеличивать количество кадров, но это увеличивает объём файла. Поэтому разработчик ищет компромисс между качеством анимации и объёмом файла.

Анимация по слоям. Для создания анимации в Photoshop нужно построить многослойный рисунок, причем каждый слой будет соответствовать кадру. Потом дать команду: превратить слои в кадры и задать для каждого кадра продолжительность его показа.

ЗАДАНИЕ. Создадим текстовый анимированный баннер,размер468´60 пикс. При анимации на пустом фоне будет постепенно появляться надпись (рекламирует институт). Спланируем кадры баннера – он будет из 4 кадров:

1) просто фон, 2) надпись неяркая (только проявляется), 3) надпись яркая, 4) надпись неяркая (исчезает). Причем кадры 2 и 4 одинаковые.

1. Создайте рисунок: Файл /Новый, размер 468´60 пикс, разрешение 72, режим RGB.

Инструментом Градиент залейтефон от темно-зеленого к зеленому.

Введитетекст желтый. На панели настроек задайте ему фигурную форму

2.Чтоб буквы проявлялись постепенно, в кадре 2 уменьшим прозрачность текста

Создайте дубль слоя с текстом(Слой /Дублировать). Теперь есть 2 слоя с текстом. Назовите верхний слой `Текст яркий`, нижний - `Текст неяркий`.

Щелкните по глазу верхнего слоя `Текст яркий` - он станет невидим. Перейдите на видимый слой `Текст неяркий`, уменьшите прозрачность до 50%

Для слоя `Текст неяркий` нажмите Слой /Дублировать. Новый слой `Текст неяркий копия` перетащите наверх (чтоб посередине стал слой `Текст яркий`).

Можно выключать-включать "глаз" поочередно на каждом текстовом слое и

уже видеть, какая получится анимация. 3.Пока надписи созданы на прозрачных слоях без фона; сделаем им тоже зеленый фон. Под каждым слоем с текстом надо создать копию слоя-фона (зеленого): выделите слой Фон и 3 раза нажмите Слой /Дублировать. Перетащите слои, чтоб под каждым текстовым слоем был зеленый слой-фон (см. рис. справа)

Склеим каждую надпись с лежащим под ней зеленым слоем:

видимость всех слоёв отключите (отщелкните глаза ), кроме 2х слоёв – верхнего текста и под ним `Фон копия`. Для этих 2х видимых слоёв нажмите: Слой /Склеить видимые - эти 2 слоя склеятся в 1. Повторите операцию склеивания еще для 2х других надписей. В итоге получим 4 слоя.