Анимированный баннер в фотошопе. Анимированный рекламный баннер

Как сделать Gif баннер в фотошопе

В данном уроке будет рассмотрен метод сотворения анимированного баннера методом покадровой анимации. Данные баннеры употребляются в качестве маркетинговых на разных веб-сайтах, в соц сетях и т.п..

Поскольку требования к маркетинговым баннерам у различных веб-сайтов свои, то в каждом случае придется подстраиваться. Для того, чтоб Gif баннер был очень “легким” и быстро грузился его нужно делать с наименьшим количеством кадров (анимации), потому в качестве анимация соответственно тоже будет смотреться наименее прекрасно, чем Flash.

В Gif можно сделать прекрасную и живую анимацию, не уступающую Flash, но схожий ролик будет очень томным, для использования его в качестве маркетингового баннера.

Баннер я буду делать для собственного заказчика, которому он нужен для рекламы собственного продукта – учебного курса. В моем распоряжении имеется два предложения, которые нужно расположить на баннере и нужные размеры. Баннер должен быть очень обычным, понятным и легким (о чем говорилось ранее).

1) Создаем новейший файл нужного нам размера, для это в верхнем меню избираем “Файл” – “Создать” и в появившемся окне выставляем нужные размеры баннера, в моем случае – это 970х250px.

2) Получив новейший холст нужного размера перемещаем на него вторым слоем картину нашего кара с запчастями, и делаем еще 2 новейших слоя с записями (слоганами баннера). Шрифты, размеры и цвет надписей настраиваем по усмотрению.

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

Читайте также  Как сбросить пароль на самсунг j1. Что делать, если забыли пароль на Samsung: способы сброса ключа и числовой комбинации в 2020 году

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

Первый кадр у нас есть – это просто авто с запчастями по середине сцены (холста). По сценарию анимации у нас 1-ый слоган баннера “Дорогие запчасти для иномарок?” будет вылетать слева, долетать до кара и совместно с ним пролетать далее в правую сторону баннера, скрываясь из вида.

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

Выбираем последующий кадр (2-й), выделяем в слоях слоган, так же кликнув по нему левой клавишей мыши и перемещаем данный слогам до кара. Потом создаем 3-ий кадр и выбрав его перемещаем в нем слоган далее, тем самым создавая движение этого слогана.

Таким образом делаются все следующие кадры. Сущность заключается в том, что вы делаете в каждом кадре какое-то изменение (движение объекта), тем самым создается по-кадровая анимация с различными переходящими картинами. Чем больше кадров – тем плавнее и динамичнее анимация, но тем больше она весит.

3) Опосля того, как вы сделаете все нужные кадры необходимо будет настроить время данных кадров. Я выставил время каждого кадра анимации по 0,5 сек, а на тех кадрах, где нужно сделать маленькую паузу, чтоб гость веб-сайта сумел успеть прочитать слоган, выставил время 2 секунды и на втором – 5 секунд.

Читайте также  Не удается удалить с флешки файлы. Как убрать с флешки защиту от записи и удалить файлы

4) По умолчанию у вас в настройках шкалы времени стоит повтор анимации “Однократно”, в итоге что анимация проигрывается один раз и останавливается на крайнем кадре. Нам же нужен баннер, который будет повсевременно работать, а не останавливаться, потому необходимо зациклить анимацию. Для этого под шкалой времени избираем настройку “Постоянно”.

После того, как баннер готов нужно сохранить его в формате Gif, для этого в верхнем меню избираем “Файл” – “Сохранить для Web” и в открывшемся окне избираем опции Gif.

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

Анимированный маркетинговый баннер

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

Конечный результат:

Шаг 1. Откройте програмку Фотошоп и сделайте новейший документ Ctrl + N, размером 250х250 пикселей с разрешением 70 пикс/дюйм. При помощи инструмента Paint Bucket Tool (G) (Заливка) заполните фон цветом #f2f2f2.

Шаг 2. Разместите логотип в верхней центральной части документа.

Шаг 3. Под логотипом напишите слоган при помощи инструмента Horizontal Type Tool (T) (Горизонтальный текст).

Шаг 4. На панели инструментов выберите Rectangular Marquee Tool (M) (Прямоугольная область) и на новеньком слое сделайте выделение, как на изображении ниже. Заполните его цветом #b90909.

Откройте окно стилей слоя, для этого сделайте двойной клик по слою с красноватой полосой и примените такие стили:

Drop shadow (Тень):

Gradient Overlay (Наложение градиента):

Читайте также  Обновление по самсунг галакси s7. Обновление телефона Samsung Galaxy S7 32Gb

Stroke (Обводка):

Шаг 5. Добавьте еще текст на различных слоях. В данном случае я написал такие слова: Tutorials, Articles, Tips, Freebies, Basix, Videos, Premuim. Смотрите изображение ниже.

Растрируйте все текстовые слои, для этого сделайте клик правой клавишей мыши по текстовому слою и из меню выберите команду Rasterize Text (Растрировать текст), а потом сделайте для их обтравочную маску, зайдя в меню Layer > Add Clipping Mask (Слои – Сделать обтравочную маску). Отключите видимость этих слоев, не считая слоя Tutorials, нажав на значок глаза слева от наименования слоя.

Шаг 6. Добавьте какой-либо симпатичный значок. Я избрал значок PSDTUTS, вы сможете выбрать хоть какой другой.

Шаг 7. В нижней части баннера напишите какой-либо текст.

Шаг 8. На новеньком слое сделайте овальную область и заполните ее цветом #fdfcfc.

К приобретенной форме примените такие стили:

Drop Shadow (Тень):

Inner Glow (Внутреннее свечение):

Gradient Overlay (Наложение градиента):

В редакторе градиентов установите такие цвета: слева – #990505, справа #ffffff.

Шаг 9. Наш баннер готов! Сейчас приступим к работе над анимацией. Для начала откройте панель анимации Window > Animation (Окно – Анимация). Я буду работать с временной шкалой, (не с покадровой анимацией).

Примечание: данная функция доступна лишь для Photoshop Extended.

Сделайте все слои видимыми и понизьте значение Opacity (Непрозрачность) до 0%.

Шаг 10. Делая упор на изображения ниже, вставьте главные кадры и где необходимо повысьте значение непрозрачности.

Шаг 11. Опосля проделанной работы наша временная шкала обязана смотреться так:

Шаг 12. Анимация готова! Нажмите Play, чтоб узреть итог. В случае необходимости вы сможете ее поменять. Чтоб сохранить собственный баннер, перейдите в меню File > Save for Web & Devices (Файл – сохранить для Web и устройств). Установите характеристики, как показано ниже и нажмите Save (Сохранить).

Конечный результат:

Ссылка на источник урока.

Оставьте комментарий