Логотипчик



Назад


Создание анимированного баннера №1 в Adobe Photoshop

В данной статье о Photoshop мы узнаем, как создать анимированный баннер для вашего сайта или для рекламы вашего продукта.

Откроем фотошоп. Затем создадим новый файл в Adobe Photoshop (фотошопе). Перейдем Файл>>Новый…

Вкладка создания нового файла

Возьмем такие размеры нашего будущего баннера - 200х80 пиксель.

Окно с параметрами нового файла

1. Создадим сначала все необходимое для последнего кадра.

Идем в палитру со слоями. Дважды щелкаем по слою Задний план, тем самым преобразуем его в простой слой. Скопируем этот слой один раз для других кадров.

Создадим внутреннюю обводку нашему слою. Для этого еще раз щелкаем по слою или, выделив наш слой, идем в Слои>>Стиль слоя>>Параметры наложения... или, нажав правой кнопкой мыши по нашему слою, выбираем Параметры наложения.

Вкладка для параметров наложения

В появившемся окне выбираем слева, самый нижний пункт Обводка. Задаем такие параметры и жмем кнопку Да.

Окно для задания параметров обводки

Получим такой слой

Слой с обводкой

Добавим теперь к данному слою текст. Для этого воспользуемся инструментом «Горизонтальный текст». Применим также некоторые возможности форматирования, доступные для данного инструмента, например цвет текста. Для передвижения текста можно использовать инструмент «Перемещение». В итоге получим такую картинку

Слой с обводкой и с текстом

Причем текст находится на отдельном слое.

2. Создадим теперь первые кадры. Перейдем к копии основного слоя. Снимем глазок с остальных слоев.

Разделим слой, залив нижнюю часть желтым цветом. Для этого выделим нижнюю половину с помощью инструмента «Прямоугольная область». Затем зальем ее с помощью инструмента «Заливка». Получим следующую картинку

Слой с заливкой

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

Слой с заливкой и с двумя текстовыми строками

Скопируем слой с текстом «Информации».

Применим к остальным копиям основного слоя тот же фильтр, уменьшая каждый раз значение параметра Size Variation на 10.

3. Работаем с копией слоя с текстом «Информации». Выделяем его, все остальные слои скрываем. Идем в меню Фильтр>>Размытие>>Размытие в движении… .

Вкладка с фильтром «Размытие в движении»

В появившемся окне ставим значения параметров Угол – 0, Смещение - 10.

Окно с параметрами фильтра «Размытие в движении»

Нажимаем на кнопку Да.

Получаем такую картинку (совместно с фоновым слоем для первых кадров)

Слой с заливкой и с размытым нижним текстовым слоем

3. Теперь, когда для анимации все готово, идем в меню Окно>>Анимация. Ставим глазки у слоя с желтой половиной и у слоя с текстом «много полезной»

Палитра слоев

Далее делаем копию кадра: нажимаем на кнопочку Создание копии выделенных кадров внизу окна анимации.

Настраиваем анимацию для второго кадра. Включаем копию слоя с размытым текстом «информации». Анимацию можно просмотреть в любой момент, нажав на кнопку Запуск воспроизведения анимации.

Опять делаем копию кадра. Теперь уже включаем неразмытый слой с текстом “информации”, а размытый слой выключаем. После этого выбираем 2-й и 3-й кадры (выделяем с нажатой клавишей Shift) и жмем кнопку Создание промежуточных кадров.

В появившемся окне указываем количество кадров – 5 и нажимаем кнопку ОК. Это даст плавный переход между кадрами.

Окно для создания промежуточных кадров

Копируем последний кадр. Оставляем включенными слой с обводкой и слой с текстом “мой сайт ….», остальные слои отключаем. Все наши кадры готовы. В итоге у меня получилось 9 кадров. Остается только подобрать время показа для каждого кадра. Под каждым кадром есть вкладка, где можно указать время его показа кадра. Если в списке нет времени, которое вам подходит, воспользуйтесь пунктом Другое.

Например зададим временные отрезки так

Окно анимации со всеми кадрами

Далее сохраняем нашу анимацию. Для этого идем Файл>>Сохранить для Web и устройств… и сохраняем в формате gif.

Вкладка для сохранения анимации

В итоге у нас получился такой анимированный баннер:

Анимированный gif баннер

Укажем также код HTML необходимый для размещения баннера gif на своем сайте



К верху страницы


<- К предыдущей статье   К следующей статье ->

Низ сайта