Как создать анимированный gif баннер своими руками пошагово

Всем привет дорогие читатели! В сегодняшнем уроке я покажу вам как реально сделать анимированный gif баннер для сайта в фотошопе cs5 своими собственными силами без проблем.

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

Применение всегда одно – привлечь внимание посетителей, чтобы они перешли на вашу страницу.

Мы будем создавать стандартный баннер, размеры которого 468×60 пикселей. Пример того как сделать рекламный баннер я выкладывал в этой статье.

Итак начнем создавать новый документ Файл — > Новый. Вы можете не придерживаться стандартов и выбрать любые размеры длины и высоты или можете выбрать размер из выпадающего списка пресетов фотошопа.

Если вы хотите заказать профессиональный дизайн для своего баннера, то можно воспользоваться услугами сайта [urlspan]http://www.20dollarbanners.com/[/urlspan] За приемлемую цену они исполнят любую вашу идею. Единственный минус, вы должны отлично знать английский, чтобы вести с ними переписку, или обратиться на сайт fl.ru и выбрать исполнителя там.

Перво наперво что мы должны с вами сделать это задать с вами обводку вокруг баннера в 1 пиксель.

• Создаем новый слой, называем его «Рамка»
• Нажимаем CTRL+A, чтобы выбрать все. Затем идем в пункт Редактирование — > Обводка. Применяем следующие настройки:

Длина: 1 пиксель, цвет: черный, расположение (Location): по центру, режим смешивания (blendingmode):нормальный, Непрозрачность (Opacity): 100%

Это дает нам четкую однопиксельную границу вокруг нашего баннера. Теперь все последующие слои будут накладываться друг на друга, но самый главный слой всегда будет оставаться видимым. Что мы и сделали.

 

Двигаемся дальше. Мы будем создавать наш анимированный gif баннер для сайта tutorialwiz.com. Перейдя на него вы увидите много уроков по фотошопу. В основе будет лежать картинка логотип, размещенная справа.

Теперь нам нужно воспользоваться инструментом ellipse shape tools (попросту Овал и придать ему черный цвет), он будет находиться справа. В этой области будет помещаться наш рекламный текст. Ее надо сделать большой, примерно в половину от общего размера самого баннера.

Теперь мы должны задать цвет- градиент этой овальной области. Идем в раздел меню Layer (Слои) -> Стиль слоя — > Градиентная заливка. Я использую настройки по умолчанию следующих цветов:

Также применяю небольшую внутреннюю тень. Просто измените непрозрачность до 20%

Дальше мы создаем еще одну скругленную область, которая будет располагаться под нашим логотипом. Примените градиентную заливку следующих цветов:

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

Читайте также заметку — произвольный сменный фон для сайта WP

А сейчас приступаем к самой интересной части дизайна нашего баннера – анимации.

Чтобы вы имели представление в нашей основной области будет размещено два блока с текстом, т.е они будут попеременно мигать, сначала один, потом другой, это и будет анимацией баннера.

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

Теперь скрываем этот слой с текстом и добавляем второй слой, используя уже другой текст, добавляя его туда, где был первый.

Выбрав второй слой с текстом мы получим следующее:

Теперь мы уже полностью готовы к анимации, переключимся в режим Image Ready, кликнув на соответствующую кнопку.

В image Ready вы увидите следующую палитру слоев для анимации, как показано ниже:

Кликните на иконку «Новый Фрейм» (или новая рамка), тем самым вы продублируете выбранный слой.

Начиная со 2 выбранного слоя, выберите слой с видимым текстом из палитры слоев и переместите его на пикселя (нажмите стрелку вверх дважды).

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

Теперь дублируем последний кадр, а затем используем стрелку вниз и двигаем текстовой слой примерно на 10 пикселей и установим непрозрачность слоя до 70%

Снова дублируем последний фрейм, перемещая текстовой слой вниз на 15 пикселей и установим непрозрачность слоев на 40%

Теперь работаем со второй текстовой областью.

Скрываем предыдущую текстовую область и перейдем к другому слою, сделав его видимым. Двигаем его также как и предыдущий, т.е на 10 пикселей и делаем непрозрачность в 40%

Клонируем последний кадр.

Перемещаем слой этот слой с текстом приблизительно  до 15 пикселей вверх и устанавливаем непрозрачность в 70%

Снова клонируем последний фрейм.

Сейчас двигаем текстовой слой выше примерно на 10 пикселей и устанавливаем непрозрачность анимированного gif баннера на 100%

Клонируем фрейм.

Теперь перемещаем текстовую область ниже на 2 пикселя.

 

А сейчас нужно все повторить, начиная с 8 шага, спустив этот слой, а другой слой вновь поднять.

Если вы все сделали правильно, то у вас должно получиться примерно 14 кадров.

В нижней части каждого фрейма вы увидите «0 сек». Это время задержки между кадрами.

Установите на все эти кадры задержку в 0,05 или 0.1, в зависимости от того, с какой скоростью вы хотите, чтобы работал баннер.

Чтобы установить значение в 0.05 нажмите на стрелочку рядом с 0 секунд и выберите «Другое», затем введите нужную цифру.

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

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

проделывается с 8 шага).

Если для вас урок показался трудным, то ниже я прикрепляю исходник с баннером.
[sociallocker id=»3259″]

Скачать Исходники

[/sociallocker]
На этом все. В этом уроке я хотел показать как на простом примере чисто технически сделать анимированный gif баннер для сайта в фотошопе, а уже дизайн и стиль вы продумываете самостоятельно, по крайней мере, додумайте лучше, чем есть в этом примере. Спасибо за внимание.