Анимационный баннер. Как сделать анимированный GIF баннер.

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

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

На сегодняшний день, самые популярные баннеры, принимаемые практически на всех веб-сайтах и на всех баннерообменных сетях являются баннера основанные на gif или flash анимации стандартного размера: 468х60, 100х100, 120х60, 88х31.

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

Итак, первое, что нужно сделать, это определиться с тем, как бы Вы хотели, чтобы Ваш баннер выглядел в конечном итоге. Придумать текстовую часть и саму концепцию движений слов, картинок и др. Пытаться создать анимацию не продумав её от начала до конца - гиблое дело.

Как видно на примере, баннер совсем не сложный, и имеет три этапа подачи информации.

1. Первый текстовый блок "Создать свой сайт" подразумевающий вопросительную информацию.

2. Второй текстовый блок "Может каждый" как бы ответ на него.

3. Сама информационная суть банера. То есть четко сформулированный ответ, где этому научиться))

Думаю теории хватит. Практика Господа!

Создадим новый документ с размерами 468х60 пикселей.

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

Также, нам понадобится пара фоновых изображений, в нашем случае это текстура с синеватыми разводами. Её тоже располагаем на отдельные слои.

Теперь идем в выпадающее меню window и включаем панель Animation.

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

В развернутом состоянии каждый слой имеет несколько параметров.

Position - отвечает за перемещение картинки находящейся на данном слое.

Opaсity - отвечает за прозрачность

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

Text wrap (если это текстовый слой) Предназначен для искривления текста.

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

Метод построения анимации прост до безумия. К примеру, нам нужно, чтобы картинка двигалась слева на право. Для этого нажимаем на часы рядом с надписью Position, после чего перемещаем бегунок справа в нужную точку временной шкалы и просто тащим картинку в сторону. Программа сама добавит все нужные кадры. Вам останется всего лишь отрегулировать промежуток времени, при помощи маркеров на временной шкале. Таким же образом работает прозрачность, добавление стилей и искривление текста.

Ниже приведен пример для свойства прозрачность(Opacity).

Проделайте этот шаг с анимацией изчезновения текста на первом слое "Создать свой сайт". Если Вы внимательно посмотрите на банер вверху урока, то заметите что помимо изчезновения текста там присутствует еще и засветка. Анимация засветки аналогична действиям прозрачности, но при включенном эффекте засветки outer glow в свойствах слоя. Начальный кадр - засветка с параметром = 0, а в конечном:

Также, на слое есть эффект inner glow, он отвечает за внутреннюю засветку текста. Выполняемые действия идентичны. Начальный кадр - маленькое значение, конечный - большое.

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

И еще один, последний слой под номером 3, на временной шкале начинает действовать, когда второй стал полностью прозрачным.

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

После того как каждая из частей будет четко соответсвовать своему участку времени, можете считать, что все готово. Теперь нажимаем Ctrl+Shift+Alt+S(Save for Web) и сохраняем наш баннер в формате GIF, он как Вы уже знаете, поддерживает сохранение анимации.

Привет друзья! Сегодня мне пришла мысль рассказать о том, как создать анимацию или в фотошопе. Для чего это вам нужно? Если вы зарабатываете на своем блоге с помощью , то обычно это происходит с помощью баннеров.

Большинство инфо-бизнесменов предоставляют своим партнерам уже готовые баннеры, как анимированные, так и в виде простой картинки с вашей партнерской ссылкой. Остается только скопировать код и установить его на своем блоге.

А что делать, если вы решили не ставить картинку предоставленную хозяином партнерской программы, в котором вы участвуете, а сделать свою? Или этот человечек не предоставил вам ничего кроме партнерской ссылки. Да, и так бывает.

Думаю, многие согласятся со мной, что внимание посетителей блога лучше привлекают именно анимированные картинки, чем обычная . Тем самым увеличивая конверсию переходов и продаж.

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

И так, запускаем программу фотошоп. Надеюсь, что она у вас установлена.

У меня установлен русифицированная версия фотошопа (CS6), поэтому я буду делать свою анимацию, и рассказывать, как это делается именно в ней.

В меню выбираем "Файл - Создать" , для того, чтобы создать новый документ.

В открывшемся окне устанавливаем наши настройки будущего анимированного баннера. Рекомендую, размеры (высота, ширина) устанавливать не наугад, а выбрать стандартные. Я, для примера, выберу один из стандартных размеров баннера, это 468 на 60 пикселей. Нажимаем "ОК".

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

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

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

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

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

Наши слои для создания анимации (анимированного баннера) готовы. Теперь перейдем к созданию сомой анимации, и оживим наш баннер.

В меню заходим по вкладке "Окно" и ставим галочку рядом с пунктом "Шкала времени".

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

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

Сделайте клик на первом кадре, тем самым мы его выделяем. Теперь открываем окно с нашими слоями, и оставляем иконки глазика только рядом с теми, которые должны быть на кадре. В моем случае это надпись "Делаем анимированный баннер" и слой с фоном.

Далее выделяем второй кадр, кликнув по нему. Опять переходим в слои, и включаем те слои, которые должны быть на втором кадре. Лишние выключаем. В моем случае это опять фоновый слой и вторая надпись "В программе фотошоп". Слой "Делаем анимированный баннер" я отключаю, так как на втором кадре его недолжно быть.

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

Нам надо время показа каждого кадра изменить. Для этого нажимаем на треугольник, рядом со счетчиком времени, и в открывшемся списке выбираем то время, которое нам нужно. Я поставил 2 сек. для каждого кадра.

Теперь снова запускаем нашу анимацию, и смотрим результат. Если вас все устраивает, тогда можете переходить к сохранению нашего анимированного баннера.

Вот что получилось у меня по ходу этого урока.

Для более лучшего понимания как создать анимацию в фотошоп, я записал урок в видео формате. Смотрите и оставляйте свои комментарий 🙂

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

На этом все! До новых встреч.

Из которого вы узнаете, как сделать анимированный GIF баннер для сайта . Кроме этого, в уроке будет рассмотрен процесс оптимизации графической анимации и вопрос установки баннера на сайт. Так что, будет интересно. Поехали.

Каждый день мы видим огромное количество всевозможных баннеров, не только в интернете, но и в реальной жизни. В любом городе можно встретить придорожные плакаты с рекламой – это тоже своеобразные баннеры. Реклама, реклама, куда не глянь реклама. Что же такое баннер? Давайте узнаем.

Что такое баннер?

Как гласит одна умная вики энциклопедия, то

Таким образом, баннер служит вроде «наживки» для клиента, чтобы тот кликнул по нему и попался «на удочку» . От сюда следует вывод, баннер должен притягивать наш взгляд и вызывать эмоцию. Но об этом чуть-чуть ниже.

Какие существуют размеры графических баннеров?

Существует бесчисленное множество разных форматов баннеров. Приведу вам лишь неполный список стандартных размеров баннеров :

88×31, 100×100, 100×200, 120×60, 120×90, 120×240, 120×600, 125×125, 125×250, 160×60, 160×120,160×240,160×600, 240×400, 250×250, 336 x 280, 460×60, 728 x 90 и многие другие.

Как видите, размеров очень много — выбирай не хочу! . Кроме выше представленного списка вам не кто не мешает сделать баннер по своим неповторимым размерам.

Баннер – как психологический тригер

Реклама, реклама, но куда без нее. Реклама – как говорят, это двигатель торговли, и чтобы заставить рекламу работать, нужен эффективный баннер , такой, чтобы притягивал. Чтобы нам хотелось тот товар и услугу, что рекламирует баннер.

Как же сделать цепляющий баннер ? А это друзья — целая наука. Не верите? Тогда обязательно найдите и прочитайте книги Виктора Орлова (магия твоих текстов, суперзаголовок, сам себе копирайтер, волшебные слова). После прочтения которых, у вас не останется сомнений, как правильно составит рекламный текст для баннера.

Если описать кратно, то привлечение клиента идет несколькими шагами:

• Обозначаем проблему в вопросе (болит голова? Нужны деньги? Нужен сайт? и т.п.)
• Сообщаем, что ЕСТЬ волшебная таблетка
• Хочешь узнать больше? И призываем к действию (Купи, кликай, заказывай, смотри здесь, кликай по ссылке и т.п.)

Ни чего не напоминает? Ага, тот самый магазин на диване. Просто все построено на психологии человека и поэтому — это работает. Видите друзья, эта целая наука. Так что, кому интересно, бежим за книгами Вика Орлова в магазин или ищем в интернете.

А как эта наука применима к нашему уроку? Все просто, мы сделаем анимированный баннер , который будет состоять из трех разных слайдов. Каждый слайд – это отдельный шаг из выше представленного списка. Уловили момент? Уже готовы сделать свой цепляющий баннер? Тогда начинаем и и для этого нам понадобится всего лишь один .

Как сделать анимированный gif баннер в GIMP?

Шаг 1. Запускаем редактор GIMP и создаем новый проект. Для данного примера я выбрал размеры баннера 468×60 пикселей. Вы же, можете выбрать и другой, какой вам приглянется больше всего.

Шаг 2. Как я уже упомянул выше, наш баннер будет состоять из трех кадров, т.е. мы должны с вами создать три отдельных слоя. Помните, как мы с вами делали ? Теперь, за место слоев с цифрами, у нас будут слои с текстовыми надписями, разницы в принципе не какой нет.

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

Для создания текстовой надписи, выбираем инструмент «Текст» и создадим надпись

Шаг 3. Теперь нужно объединить текстовый слой с нижним белым. Щелкаем по верхнему слою правой кнопкой мыши и выбираем «Объединить с предыдущим».

Шаг 4. Вот так, первый кадр, обозначающий проблему, у нас готов. Идем дальше и создаем новый слой с белой заливкой нажав на пиктограмму «создания нового слоя»

Далее, вновь выбираем инструмент «Текст» и пишем надпись вида

Также, объединяем текстовый слой с белой подложкой. На данный момент у нас уже есть два отдельных слоя в панели слоев.

Шаг 5. Создаем еще один белый слой и текстовый. В этот раз я выбрал цвет текста черный, а не красный.

Изменяем цвет переднего плана на синий.

Выбираем инструмент «Кисть» и закрашиваем синим цветом надпись «здесь». Вот что у меня получилось.

Объединяем слой с текстом и белым фоном, как это мы делали выше. В результате этих действий у нас готово три кадра, нашего будующего анимированного баннера . Также, для простоты можно переименовать слои, например вот так:

Шаг 6. Теперь, для пущего стимулирующего эффекта, добавим с помощью вот этих кистей , небольшой курсор руки под надписью «Здесь». Как устанавливать новые кисти в редактор гимп, можете .

Курсор, добавляем на самый верхний слой