Задача: создать рекламный анимированный баннер

Создаем новое изображение размером 160х60 px. 

Разрешение обязательно ставим 72 пикс./дюйм. 

Это своего рода стандарт для изображений, которые предназначены не для печати, а для показа на мониторе компьютера. 

Рисуем рамочку. 

Цвет для рамки  выберите серый. 

С помощью Плоской заливки , потом Выделить все (Ctrl+A), Уменьшить выделение на 1 пикс. и удалить выделенную область (клавишей Delete). 

 

Если при этом фон остался непрозрачным, значит нужно (не снимая выделения) добавить Альфа-канал (в контекстном меню списка слоев или через главное меню Слой - Прозрачность - Добавить Альфа-канал), и еще раз нажать Delete.

Слой с рамкой мы оставим самым верхним и больше трогать его не будем. 

!!!Каждый новый элемент баннера (да и любого другого изображения) следует создавать на новом слое. 

Это позволит в любой момент поменять, подвигать или вообще убрать этот элемент. 

На новом слое создадим фон для баннера, поместим его в самый низ списка слоев. 

Все остальные слои будем создавать с прозрачным фоном и помещать межу существующими двумя слоями (рамкой и фоном). 

Для покраски фона вместо Плоской заливки использовать Градиент.

Следующий элемент (слой) - фон для надписи с адресом. 

 Выберем Прямоугольное выделение   и зададим радиус скругление углов около 15 пикс.

Переместим выделение вот сюда:

Теперь выделенную область можно закрасить.

Создаем надпись. 

Для нее не нужно создавать отдельный слой, т.к. текст уже сам по себе создается на отдельном слое.

Слева от адреса у нас осталось свободное место. 

Используем его эффективно. Стрелки создайте либо как графические объекты, либо как символы.

Теперь добавим самый важный элемент баннера - иллюстрацию (Выберите её самостоятельно из папки Files). 

Для удаления фона используйте инструменты Выделение по цвету и быструю маску. 

Итак, переключаемся из простого выделения в режим Быстрой маски нажав на маленький значок, который есть в каждом окне с изображением в нижнем левом углу, либо комбинацией клавиш Shift+Q.

Берем жесткую черную кисть, а еще лучше карандаш и зарисовываем то, что недовыделилось Выделением по цвету. 

Снова переключаемся в режим выделения (тем же способом) и клавишей Delete легко избавляемся от фона. 

Помещаем картинку в нужное место инструментом Перемещение .

Подумайте сколько кадров анимации вы хотели бы использовать, что на них будет изображено. 

Сделаем  4 кадра. 

Первые 3 кадра будут чисто текстовыми, четвертый с иллюстрацией, чтобы не примелькалась. 

Сделайте  4 кадра по образцу рисунков:

 

 

 

Порядок действий:

• Пишем очередную надпись и временно делаем невидимым этот слой
• Пишем следующую надпись и т.д. 

Когда у вас все элементы, используемые в анимации, будут готовы - сформировать отдельные кадры. 

Это можно сделать несколькими способами.

 Например:

Делаем видимыми все элементы первого кадра и сохраняем изображение в отдельный файл одним слоем. 

То же проделываем с остальными кадрами, и в конце открываем все изображения в одном окне через меню Файл \ Открыть как слои.

Чтобы вы ни выбрали - в конце подготовки у вас должны в списке слоев остаться только слои с готовыми отдельными кадрами (их 4).

Теперь можно сделать Оптимизацию кадров для GIF через меню Фильтры - Анимация, а простыми словами - вырезать из кадров повторяющиеся фрагменты, с целью уменьшения размера файла. 

Теперь можете посмотреть анимацию перед сохранением через проигрыватель, который находится в том же меню. 

По умолчанию задержка между кадрами устанавливается в 100мс (0,1 секунды). Чтобы задать нормальную задержку, поменяйте в названии каждого слоя с кадрами число 100 на большее.

Надеюсь все помнят, что 1000мс = 1 секунда. 

Когда проигрыватель (который можно при этом даже не останавливать) наконец покажет то, что вы задумали, анимацию можно сохранить как GIF-файл.

Рисование баннеров довольно прибыльное дело. Спрос на простую GIF-анимацию будет существовать еще довольно долго.