Как сделать gif баннер для сайта в фотошопе. Как сделать баннер гиф


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

После того, как баннер готов необходимо сохранить его в формате Gif, для этого в верхнем меню выбираем "Файл" - "Сохранить для Web" и в открывшемся окне выбираем настройки Gif.

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

www.pscraft.ru

Как сделать анимированный gif баннер   Блог Игоря Черноморца

Время чтения статьи: примерно 3-5 минут.

Приветствую вас друзья на этом блоге!

Недавно я опубликовал статью, в которой показал, как очень просто сделать статичный рекламный баннер онлайн для сайта. А в этой статье я покажу вам, как сделать анимированный gif баннер. Вы знаете, какая между ними разница?

Статичный баннер — это одиночное графическое изображение, без движения.

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

Баннеры с gif анимацией выглядят намного эффектней и больше притягивают внимание посетителей.

Если вы посмотрите на сайтбар, то увидите там 2 баннера с анимацией. Для себя я создал тоже анимированный баннер и сейчас я покажу вам как я это сделал.

Содержание статьи

Одна из лучших программ для создания GIF анимации Easy GIF Animator Pro

Easy GIF Animator это программа, которая предназначена для создания анимированных изображений (gif-файлов), насыщенных различными эффектами.

Программа совместима с такими операционными системами как: Windows 98, Windows Me, Windows, Windows 2000, XP, Vista, Windows 7.

Easy GIF Animator имеет сравнительно много настроек, но их легко усвоить любому пользователю компьютера, так как интерфейс программы очень понятный.

Как скачать бесплатно Easy GIF Animator Pro версия 5.0.2.42

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

Для того, чтобы скачать лицензионный ключ (кряк) и Easy GIF Animator Pro версия 5.0.2.42, нажмите здесь.

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

egifan5.exe — это и есть файл для установки программы. Установка стандартная, поэтому проблем не будет. В папке «crack» находится инструкция по авторизации и активации. Сделайте так, как там написано.

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

На самом деле в архиве, который вы скачаете, будет файл с русским языком — «rus«, но у меня почему-то программа не поменяла язык, несмотря на то, что файл установлен. Вы попробуйте и может быть вам повезёт.

Подготовка для создания анимированного баннера

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

Давайте для примера я покажу вам, как я придумал сюжет для своего gif баннера. Чтобы на него посмотреть, нажмите сюда

Как вы уже знаете, я начал рекламировать своё предложение, которое я сделал для всех посетителей блога, а именно вот что:

Я готов отдать 70% от своих комиссионных в том случае, если вы приобретёте абсолютно любой инфопродукт по моей партнёрской ссылке. Более подробней читайте здесь
Сюжет для баннера

1) Первый кадр в моём анимированном баннере будет с текстом для привлечения внимания.  Например, такой текст «Внимание! Выгодное предложение!«

2) Второй кадр будет с текстом, который раскроет это выгодное предложение и в конце будет интригующий вопрос. Например, такой «Вы можете покупать любой инфопродукт рунета с большими скидками! Вы спросите как?«

3) Третий кадр будет с текстом, который отвечает на интригующий вопрос в прошлом кадре. Он будет такой: «я отдам вам 70% моих комиссионных«

4) Четвёртый и заключительный кадр будет с текстом, который подтолкнёт к действиям посетителей. Например, такой «Нажмите и экономьте!«

А сейчас всё зависит от вашей фантазии. Вам нужно создать четыре баннера с соответствующим текстом, разбавленными с картинками. Если вы не знаете как очень просто создать статичный баннер онлайн, то добро пожаловать сюда.

И так, вот что я создал.

Первый баннер:

Второй баннер:

Третий баннер:

Четвёртый баннер:

А сейчас нам надо их соединить в один баннер и сделать из них анимацию.

Как создать gif баннер с анимацией в программе Easy GIF Animator

Заходим в программу Easy GIF Animator.

Нажимаете на значок как  показано на скрине и у вас откроется окошко, в котором вы должны указать размеры баннера. В моём случае это 240px на 400px. Нажимаем на «ok«

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

После этих действий вы увидите в левой колонке, выбранный вами баннер. Далее нажимаете на значок «Insert Blank Frame (f4)«, который находится в левой линейке и под вашим баннером появится пустой баннер такого же размера. Далее нажмите на значок «Insert Picture» и выберите второе изображение для анимации. Проделайте такие действия со всеми четырьмя баннерами. Вот что должно получится:

Обратите внимание на раздел «Frame Properties«

Рядом с опцией «Delay» вы должны поставить тот промежуток времени, при котором каждая картинка будет меняться. Время выставляется в миллисекундах, поэтому если вы хотите, чтобы картинка в gif баннере менялась каждые три секунды, то в окошке пишите цифру 300. И так делайте для каждого баннера.

Нажав на опцию «Preview Animate (F7)«, который выглядит как зелёный треугольник (Play), вы можете посмотреть как будет выглядеть вся анимация.

Если всё нормально, то нажимаете на «File» ⇒ «Save As…» и сохраните ваш баннер в любом месте на компьютере.

И вот что у меня получилось, смотрите!

Вот и всё!

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

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

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

А я с вами прощаюсь и до новых встреч. Пока-пока

С уважением, Игорь Черноморец

igorchernomoretz.com

Как сделать анимированный gif баннер • GimpArt.Org

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

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

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

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

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

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

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

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

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 и многие другие.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Далее блокируем изменение альфа-канала у текстового слоя, нажав вот на эту пиктограмму

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

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

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

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

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

Шаг 7. Добавляем к имени слоя параметр времени в круглых скобках (1000ms-это одна секунда), т.е. задаем тот интервал, который будет показываться кадр анимации. Как я уже говорил ранее, последний верхний кадр мы задержим подольше, т.е. увеличим время его показа до трех секунд (3000ms).

Теперь, нужно воспроизвести нашу анимацию и посмотреть, что у нас получилось. Для этого переходим в меню «Фильтры — Анимация — Воспроизведение» и нажимаем на кнопку «Play»

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

Шаг 8. Чтобы уменьшить размер (объем занимаемого места на диске) анимации,  воспользуемся стандартным фильтром редактора. Для этого переходим в меню «Фильтры -Анимация — Оптимизация (для GIF)»

В результате этого у нас откроется новый проект и слои в стопке слоев примут следующий вид:

Шаг 9. И в завершении, нам остается только сохранить текущий проект в формате анимации, т.е. в графическом формате GIF. Как правильно сохранить изображение в редакторе GIMP смотрите вот в этом уроке.

Так как этот урок я делал в старой версии редактора гимп 2.6, то для сохранения работы  идем в меню «Фаил — Сохранить как» и задаем имя баннера — banner.gif и нажимаем кнопку «Сохранить»

В следующем диалоговом окне выбираем пункт «Сохранить как анимацию»

И еще раз жмем «сохранить»

Как установить баннер на сайт?

После того, как мы сделали баннер в GIMP, его нужно скопировать и установить на сайт. Верно? Для этого, запускаем любой FTP менеджер (я использую FileZilla) и копирую баннер в папку картинок на сайте. Лично у меня, данная папка находится в корне сайта и называется img. Таким образом, у баннера будет следующий URL (адрес):

http://www.gimpart.org/img/banner.gif

Теперь нам остается прописать HTML код баннера в том месте, где мы хотим его

<a href=»ссылка, куда попадет человек нажавший на баннер»><img src=»img/banner.gif» /></a>

Зацените, я немного добавил кадров с курсором, и вот, что у меня получилось:

Исходник баннера оптимизированный — Скачать

Исходник баннера в формате XCF  — Скачать

Кисти курсоров в формате GBR — Скачать

На этой ноте, я завершаю урок. Надеюсь друзья, он будет вам полезен . Всем удачи и до новых встреч на Gimpart.Org.

Пожалуйста, оцените эту статью, нажав на звездочки ниже:

Загрузка...

P.S. Хотите получать АНОНСЫ НОВЫХ УРОКОВ к себе НА E-MAIL? Тогда подписывайтесь на обновления блога. Буду рад видеть вас среди своих читателей.

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

Тем самым вы мотивируете меня на создание новых уроков и поддерживаете мой проект в дальнейшем развитии. Спасибо Вам Большое!

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

Это вам также будет интересно:

www.gimpart.org

Как создать .gif баннер? Программы Easy Gif Animator и Photoshop

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

В этой статье я расскажу, как создать .gif баннер. Для создания анимированного .gif баннера нам потребуется специальная программа, в этой статье я рассмотрю две такие - это Easy Gif Animator и Photoshop.

Вообще, анимированные .gif баннеры создаются очень просто, и сейчас вы это увидите. Начну с программы Easy Gif Animator.

1. Скачайте программу Easy Gif Animator в конце этой статьи, и установите на свой компьютер.

Установили? Теперь запустите её и нажмите: «файл --> Мастер нового баннера», установите необходимый размер будущего баннера. Я чаще использую стандартные размеры, например: 468×60 px, но если вам необходимо создать .gif баннер для тизерной рекламы Bodyclick, то вам будет нужен размер 200×200 px, в этом случае установите переключатель во второе положение и поставьте необходимые размеры.

Нажмите кнопку «Далее». В следующем меню программа попросит выбрать фон будущего .gif баннера:

1. Простой баннер с настройкой фонового цвета, 2. Баннер с настройкой цвета и градиента, 3. Баннер с использованием картинок и текстур.

Собственно выбирайте, то, что вам больше нравится. Естественно картинки, градиент выглядят намного интереснее.

Опять нажимаем кнопку «Далее».

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

Вот собственно и всё! Ваш анимированный .gif баннер готов! Сохраните его в компьютер!

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

Идём дальше! Как создать анимированный .gif баннер в программе Фотошоп?

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

Итак, сначала нужно определиться, сколько слайдов  анимации будет в нашем будущем .gif баннере. Если в программе Easy Gif Animator их доступно только три, то в фотошопе число не ограничено! Я буду создавать анимацию из 5 картинок. Разумеется, сначала эти картинки нужно создать… Допустим, они у нас уже готовы, вот что у меня получилось:

Теперь нам нужно все эти картинки объединить. Просто перетаскиваем инструментом «MoveTool» сначала вторую картинку на первую, третью на первую и т.д. В итоге у нас осталась одна картинка, состоящая из пяти слоёв. Отключите видимость четырёх верхних слоёв:

Просто щёлкнув по «глазику» левой кнопкой мыши. Теперь нажимаем «Window--> Animation»

Появится вот такое окошко:

Нажмите левой кнопкой мыши на выделенную маркером кнопку. Перед вами появится панель для добавления слайдов:

На изображении я отметил маркером кнопку для добавления нового слайда. После нажатия на эту кнопку вам нужно будет включить видимость следующего слоя, нажав на панели слоёв на пустую клеточку:

Я плохой художник, не судите строго…  По этому же принципу добавляйте все остальные слои в наш анимированный .gif баннер. Вы можете задать время анимации каждого кадра (по умолчанию стоит 10 сек.), а также указать будет ли .gif баннер цикличным (Forever) или анимация баннера будет проходить только один раз, оставив в настройках значение «Once».

Ну вот, анимированный .gif баннер в программе фотошоп готов, теперь нужно его сохранить. Нажимаем «File--> Save For Web», формат баннера естественно .gif

Область применения анимированных баннеров в интернете огромна, конечно, это прежде всего реклама на таких сервисах как Bodyclick и другие.

Ух, вроде всё написал, что хотел сказать! Теперь и вы знаете, как создать .gif баннер, как создаются анимированные gif баннеры в программах Photoshop и Easy Gif Animator. Надеюсь, этот пост был вам полезен. Советую получать свежие статьи на e-mail, чтобы не пропустить много новой, интересной информации!

На этом всё. С уважением, Павел Макаров.P.S. Буду рад комментариям к этому посту.

pavelmakarov.ru

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

29.11.08    Как сделать баннер, Подробные инструкции

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

В этой статье мы научимся делать анимированные GIF-баннер средней сложности с нуля. Для этого нам понадобится немного времени и терпения, т.к. шедевр анимации у новичка за час не получится никак. Из программ мы будем использовать Adobe Photoshop CS3 – для подготовки кадров баннера и Ulead GIF Animator 5 – для создания из готовых кадров анимационного ролика в формате GIF. Если вы не знаете, где взять эти программы, рекомендую прочитать статью Чем бесплатно скачать любую информацию.

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

Этап I: Подготовка кадров баннера в программе Adobe Photoshop:

1. Выбираем размер баннера, который мы будем делать (в примере ширина баннера 468 пикселей, высота 60 пикселей). Определяемся с примерным сценарием баннера: что и как будет двигаться. Ищем в интернете нужные картинки, готовим логотип компании и другую графику, которую вы хотите вставить в свой будущий баннер.

2. Создаем в Фотошопе файл размером 468х60. Добавляем в него всю нужную графику, логотип, размещаем в нужном месте видимой области баннера, выравниваем. Чаше всего в баннерах делают тонкую рамку на границе видимой области, некоторые сайты даже не принимают рекламные баннеры, не ограниченные рамкой.

Каждый элемент располагаем на отдельном слое. Желательно группировать слои в папки, чтобы не путаться, какая графика к какому кадру относится. Подготовив один кадр, скрываем его слои для удобства и на освободившемся месте готовим другой кадр. Получится примерно так:

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

1 кадр: Спрятав все слои, кроме самого нижнего, сохраним фон нашего баннера:

2 кадр: Сохраняем файл с логотипом, но без надписи «Веб-студия»:

3 кадр: Сохраняем кадр логотипа:

4 кадр: Прячем все слои, кроме слоя с арбузом и фонового. Сохраняем предпоследний кадр анимации:

5 кадр: Делаем видимым еще и слой со слоганом баннера. Сохраняем пятый файл в gif:

В результате мы создали 5 статических GIF-файлов, из которых сейчас сделаем один файл GIF-анимации.

Этап II: Создание анимированного GIF-баннера из подготовленных кадров с помощью программы Ulead GIF Animator:

1. Открываем Ulead GIF Animator 5. Запускаем Мастер анимации (4-й пункт сверху в меню Файл). Выбираем размер баннера и нажимаем Далее:

2. В новом шаге мастера анимации добавляем созданные нами ранее 5 кадров баннера. Для этого нажимаем на кнопку «Добавить изображение» и с помощью Shift выделяем за раз все файлы и добавляем их в Мастер:

3. Работа Мастера анимации почти завершена. Осталось выбрать скорость смены кадров. Можно не менять предложенную по умолчанию скорость в четверть секунды (25 мс), позже мы все равно сделаем для каждого кадра свое время задержки. Нажимаем Далее и завершаем работу Мастера анимации.

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

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

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

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

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

6. Для того, чтобы просмотреть, как баннер будет выглядеть в анимированном виде, можно воспользоваться вкладкой Предосмотр. Если все устраивает – сохраняем баннер в формате GIF: Ctrl+Shift+S.

7. Баннер готов. Может открыть его любым браузером или программой просмотра графики. Сделанный нами GIF-баннер в конечном итоге выглядит так:

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

 

Читайте также:

www.web-article.com.ua

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

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

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

Содержание:

  1. Процесс создание баннера
  2. Настраиваем цветовую гамму
  3. Пишем текст и наполняем эффектами
  4. Установка картинки и изменение масштаба
  5. Делаем кнопку с надписью СКАЧАТЬ
  6. Настраиваем анимацию

Давайте обратимся к википедии что же такое баннер

Баннер (англ. banner — флаг, транспарант) — графическое изображение рекламного характера. Баннеры размещают для привлечения клиентов, для информирования или для создания позитивного имиджа. -Баннер — один из преобладающих форматов интернет-рекламы. Представляет собой графическое изображение, аналогичное рекламному модулю в прессе, но способное содержать анимированные (редко видео-) элементы, а также являющееся гиперссылкой на сайт рекламодателя или страницу с дополнительной информацией.

Размеры баннеров

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 и многие другие.

Что нам потребуется для баннера

  • И так прежде всего вам потребуется программа Photoshop не ниже cs 3, хотя и в более ранних версиях тоже можно сделать но немного в другим способом.
  • Конечно же вам еще потребуется изображение смотря какая у вас тематика, в моем случае мы будем создавать баннер на тему «Как создать сайт»
  • И конечно же вам потребуется немного проявить фантазии.

Процесс создание баннера

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

  1. Мы заходим в редактор «Photoshop» и нажимаем вкладку «файл»
  2. После того как мы нажали на «файл» после мы «создаем новый»
  3. И у нас появляется новое окно для определение размеров, и нужного фона.
  4. Затем вам нужно определится с размерами баннера а точнее с шириной у меня 236 px
  5. А здесь мы вписываем размер высоты, в моем случае это 400 px
  6. Мы определяем какой будет наш новый фон.
  7. После того как мы в новом окне все настроили мы нажимаем «ok»

Настраиваем цветовую гамму

  1. Для этого мы нажимаем на иконку с лева под названием «заливка»
  2. И у нас появляется новое окно с помощью чего мы выбираем нужный нам цвет.
  3. С помощью бегунка мы можем выбрать любую цветовую палитру.
  4. После того как мы выбрали цвет нажимаем «ок»

После чего нам нужно активировать наш слой для дальнейшего дизайна.

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

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

Пишем текст и наполняем его эффектами

  1. Для того что бы написать текст мы нажимаем на нужную нам вкладку а именно на букву «Т» в левой колонки.
  2. Для изменение цветовой гаммы текста мы нажимаем на квадратик который расположен внизу также левой колонки панели и так же бегунком определяем нужный нам цвет.
  3. Для того что бы изменить какой ни будь текст, картинку и.т.д мы наводим курсор на нужный слой и нажимаем на него, после чего появляется панель внешних эффектов и выбираем нужную нам настройку и колдуем)). ( Смотрим ниже )

Установка картинки и изменение масштаба

Затем как мы написали текст и вставили эффекты для баннера нам нужно теперь вставить картинку, для этого мы нажимаем на «файл» и затем «открыть». Далее нам нужно выбрать нужную нам картинку к примеру я выбрал 3-D картинку кстати в моей статье вы можете посмотреть как ее можно сделать буквально за 2 минуты.

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

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

Так как в этой статье я показываю как создавать баннер упираясь на нишу по «создание сайта» то для этого мне потребуется кнопка с надписью «скачать» и ее мы тоже сделаем в Фотошопе. Для начала мы переходим в «файл» и нажимаем «создать» по умолчанию все наши размеры сохранились но нам нужно поменять лишь одну строчку в новом окне. В место «белого» фона нужно поставить «прозрачный» (смотрим ниже)

Делаем кнопку с надписью скачать

Кнопка делается очень просто для этого мы нажимаем с левой стороны панели на (2) квадратик и вы выбираете какой формой будет кнопка прямоугольная или с округленными углами либо круглая, после того как вы выбрали нам нужно теперь выбрать (3) цвет кнопки, ранее мы эту процедуру уже выполняли вам ее нужно повторить и в этот раз.

И вот уже кнопка почти готова не хватает только надписи и мы снова нажимаем на букву (1) Т и пышем слово на кнопке, к примеру «скачать» далее мы настраиваем эффекты под свой вкус кнопки и текста.

После этого мы нажимаем на инструмент (6) рамка это пятая функция с левой стороны панели с верху, обрезаем нашу кнопку после сохраняем. После сохранение мы сразу же ее открываем в в файле, и так же отрываем от панели и вставляем на наш баннер.

Настраиваем анимацию

Подходим к заключительному этапу настраиваем анимацию, для этого мы переходим на вкладку «Окно» и нажимаем «Анимация»

    1. После этого у вас внизу появится новое дополнительное окно это и есть анимационная функция для нашего баннера.
    2. После мы нажимаем на папку расположенная внизу окна, эта функция позволяет приумножить наш файл для дальнейшей работы (смотрим ниже)
    3. Так же если к примеру вы размножили большое количество файлов то вы с легкостью можете их удалить нажав на корзинку.
    4. И теперь переходим к главному для того что бы наш баннер выглядел нужным нам образом нам нужно поочередно нажимать на глазок (4) там где отображается глазок и будет отображаться на нашем баннере.
    5. После вам нужно определить время, поставленные вами секунды и будут отображать интервал анимационного эффекта.
    6. Данная функция позволяет воспроизвести то , что у вас получилось.
    7. Так же вы можете задать время на свое усмотрение.

вернуться к содержанию

Рекомендую посмотреть видео

-Рекомендую ознакомиться с похожими моими статьями-

maxim-zelentsov.ru

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

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

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

Любой баннер можно заказать у фрилансера, но зачем тратить деньги, если он делается очень просто. Я считаю, что с фрилансерами нужно работать обязательно, но лучше поручать им такую работу, с которой вы точно не справитесь самостоятельно или которая отнимет у вас много времени. Баннер можно сделать за полчаса, а опытному дизайнеру — за несколько минут :smile:.

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

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

Баннер – это изображение, которое используется для того, чтобы привлечь посетителей на сайт. По созданию баннеры можно поделить на три типа:

  1. Статичные – это обычное изображение, которое можно сделать в фотошопе. Такой баннер очень легко создать, да и посетителям он нравится, поскольку не мигает перед глазами :smile:. Если вы еще не научились делать баннеры такого типа, то ничего страшного, сегодня мы затронем эту тему :smile:.
  2. Gif-баннеры содержат несколько растровых изображений, которые по очереди меняются через определенный промежуток времени. Такие баннеры сегодня мы как раз таки и будем делать.
  3. Flash – баннер создается в программе Adobe Flash. Его создать сложнее всего, но зато и пользы можно получить от него намного больше.

Итак, давайте вернемся к вопросу, как сделать рекламный баннер. Делать мы будем вот такой gif-баннер.

Как видите он состоит с двух изображений, которые через 2 секунды меняются, чтобы привлечь на себя внимание. Мы можем сделать так, что и 3 и 4 и 10 изображений будут меняться, это не имеет значения. Кроме этого, время, через которое меняются фото, также можно легко настроить.

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

Для работы я использую программу Adobe Photoshop CS5 Extended на русском языке. Для того чтобы создать обычную картинку, нажимаем «Файл» -> «создать», указываем ширину и высоту, (в моем случаи это 468 на 60) и нажимаем «ок».

Мы получили белый фон, теперь наша задача, как-то разукрасить его. Можем написать какой-нибудь текст, вставить изображение и т. д. Я всегда стараюсь делать баннер так, чтобы он хорошо вписывался в дизайн сайта. Если мой сайт зеленый, значит, баннер делаю такого же цвета. После того, как вы создали картинку, просто сохраните ее на своем компьютере («Файл» -> «Сохранить для web и устройств…»). О том, как сохранять изображения без потери качества я писал тут.

Точно также создаем вторую картинку, а если нужно то и третью, четвертую и т. д. После создания открываем все картинки в фотошопе. Для этого нажимаем «Файл» -> «Открыть» находим папку, где вы сохранили все изображения, выделяем их и нажимаем «открыть».

Вот у меня есть 2 изображения в фотошопе:

Теперь я делаю активным второе фото и нажимаю комбинацию клавиш CTRL +A для того, чтобы его выделить. Потом CTRL +С для того, чтобы скопировать слой. Дальше делаю активным первое изображения и нажимаю CTRL +U для того, чтобы вставить слой. Второе фото я могу закрыть, оно мне не нужно. Если вы создали больше изображений, то аналогично копируйте их и вставляйте.

В какой последовательности вы будете вставлять слои, в такой они потом будут показываться. Здесь очень важно все спланировать. Например, на первом слои можно написать: «как сделать красивый баннер» на втором — «бесплатно» на третьем — «в фотошопе» на четвертом «за 5 минут» :smile:. Потом второй слой нужно обязательно скопировать и вставить в первый, дальше третей в первый, и наконец, четвертый в первый. После этого второй третей и четвертый слои закрываем, так как они нам больше не нужны. У меня получилось только 2 слоя наложены друг на друга.

Сейчас нам нужно сделать так, чтобы эти изображения, когда мы их сохраним, поочередно менялись. Для этого нажимаем «Окно» -> «Анимация»:

Потом нажимаем в правом верхнем углу анимации на специальную кнопку и выбираем пункт «создать кадры из слоев»:

У нас открылись два слои, ниже которых мы можем заметить надпись «0 сек».

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

И так нужно указать ниже каждого слоя. Можно сделать везде одинаковое время, а можно, например, между первым и вторим слоем указать 2 секунды, а между вторим и третьем 5 секунд (если у вас есть 3 слоя). Делайте, как считаете нужным.

Вот и все, баннер сделан. Теперь просто сохраняйте его в gif – формате. Для этого нажмите («Файл» -> «Сохранить для web и устройств…») и укажите обязательно gif – формат, иначе баннер работать не будет.

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

На этом все на сегодня. Теперь вы знаете, как сделать баннер в фотошопе для сайта. Всем пока ;-).

vachevskiy.ru