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 слоя.

4. Создадим gif-анимацию. Перейдите в программу Image Ready – внизу панели инструментов щелкните по . Там зайдите в палитру Анимация

(если её нет на экране, нажмите Окно /Анимация). В палитре справа вверху нажмите и в меню выберите Сделать кадры из слоёв (Make Frames into Layers). В итоге в палитре Анимация каждый слой разместится как отдельный кадр.

 Для каждого кадра внизу назначьте время его показа на экране (например, по 0.2 сек.). Чтоб анимация повторялась постоянно, внизу палитры выберите `Всегда` (а не `1 раз`). Внизу нажмите кнопку Play (Проиграть).

5. Сохраните анимацию в оптимизированном виде: Файл /Сохранить оптимизированный как (File/Save Optimized as). Откроется окно - выберите свою пап­ку, дайте файлу имя и выберите формат Gif - он может хранить анимацию.

ЗАДАНИЕ. Создадим анимированный баннер с рисунком и надписями,

из 3 кадров: 1)на белом фоне дети (см. ниже); 2) этот же кадр, но с надписью `Детская студия творчества`; 3) этот же кадр, но с надписью `Радуга`.

1. Создадим 1 кадр. Создайте новый файл, 46860, белый фон. Откройте Лена.jpg.

Выделите все, скопируйте, вставьте в новый баннер; уменьшите размер, сместите вправо.  Аналогично вставьте Двое.jpg.  Введите мелко надпись www.raduga.ru.  Соедините все слои: нажмите Слой /Объединить слои.

2. Создадим 2 кадр. Дублируйте созданный слой: Слой /Дублировать Введите

текст `Детская студия творчества`. Соедините текстовый слой и нижележащий

3. Создадим 3 кадр. В палитре Слои щелкните по нижнему слою, дублируйте, пере

тащите наверх. Введите текст `Радуга`. Соедините текст. слой и нижележащий.

4. Создадим gif-анимацию. Перейдите в Image Ready, там зайдите в палитру Анимация, нажмите и Сделать кадры из слоёв. Из 3 слоёв получим 3 кадра.  Внизу назначьте время показа кадров (1^й и 2^й кадры – по 1 сек, 3^й кадр – 2 сек.на экране); опцию `Всегда` и нажмите Проиграть.

 Сохраните анимацию: Файл /Сохранить оптимизированный как. Откроется окно - выберите свою пап­ку, дайте файлу имя, выберите формат Gif .

ЗАДАНИЕ. Создайте анимированный баннер. Сначала спланируйте его: какой будет текст (слоган), какая картинка, какого цвета будет фон, какого буквы? Какова будет схема анимации (какие кадры)? Реализуйте план.