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

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

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

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

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

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

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

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

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

Программа Easy GIF Animator

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, нажмите здесь.

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

easy gif animation

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

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

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

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

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

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

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

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

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

Сюжет для баннера

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

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

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

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

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

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

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

Первый баннер для анимации

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

Второй баннер для анимации

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

Третий баннер для анимации

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

Четвёртый баннер для анимации

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

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

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

animation

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

Анимация

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

Вставить анимацию

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

Кстати, почитайте эту статью тоже:   Как сжать картинку и фотографию онлайн до 83% без потери качества. Обзор 7 лучших сервисов

Анимированный баннер в программе Easy GIF Animator

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

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

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

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

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

Вот и всё!

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

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

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

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

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

Если вам понравилась статья - поделитесь ею в социальных сетях с друзьями!

Подпишитесь на обновления блога!

Введите свой e-mail адрес

К записи "Как сделать анимированный gif баннер за 5 минут и утереть всем дизайнерам нос" оставлено 68 коммент.
  1. Игорь, ну надо же. я только вчера установила себе эту программу. И даже попробовала сделать баннер. Получилось смешно, я методом тыка все делала. с твоей помощью разберусь, там и правда, не совсем сложно.

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

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

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

    • Галка, давай я тебе бесплатно сделаю картинки в фотошопе? А ты уж забацаешь их в анимацию. Только опиши, что ты хочешь, ок?

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

  2. Игорь, привет! Интересная програмка, но я так понял что она почти такая как есть у меня08 принцип работы тот же, разве что возможностей поболе.

  3. Молодец, Игорь, не стоишь на месте!!! Скачаю и буду гифки в твоей проге пулять, а то в фотошопе — долго… Спасибо!!!!14

  4. Ещё не пробовал делать баннеры. Нужно будет попробовать.

    • Привет Александр! Вопрос или тебе нужно делать баннеры? Мне до недавнего времени это было не важно, так я и не интересовался. Попробуй сделать по моим инструкциям, может быть тебе понравится делать баннеры и станешь профессионалом 07

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

  5. Неплохая программка, надо взять тоже на вооружение.

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

  7. Извиняюсь, всё увидел!13

    • Здравствуй Денис! Ну…увидел? И как? Есть потенциал или…

      • Признаться честно я не люблю анимацию в баннерах, так как это отвлекает от чтения блога,  я помню ещё 10 лет тому назад когда занимался чатами, тоже делал баннеры, правда маленькие 88×30/
        В вашем случае я бы убрал синюю рамку, она лишняя, да и баннер сам смотрится намного лучше, чем те, что я встречал ранее, где всё сделано тяп ляп и как сказал Азамат Ушанов  «…ну Г**** полное…»  или наоборот, качественно, но вес в 1 мб, тихий ужас для мобильного трафика.

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

  8. Игорь, привет! За программу спасибо, как раз хотел сделать пару баннеров для партнерок, а то у них они какие-то скучные и невзрачные, да и примелькались у же в интернете.
    Вот если бы ты написал еще как делать флэш баннеры, то точно можно было из нескольких страниц твоего блога  составить учебное пособие по разработке всевозможных баннеров.

  9. Игорь, неплохой получился баннер! Хотя мне баннеры пока не нужны, но статью беру на заметку. Мало ли что )

  10. Отличная программа. Все очень просто и понятно. Возьму себе на заметку.

  11. Игорь, привет! Хорошие функциональные программы практически все платные. У бесплатных возможностей намного меньше и всегда чего-то не хватает.
    Easy GIF Animator, судя по всему — классная программа. Как возникнет необходимость делать какую-либо анимацию, то я знаю теперь, где взять для этого программу. 46

    • Здравствуй Александр! В основном так и есть…в бесплатных программах функционал не полный, но чаще всего этого функционала хватает для использования базовых и самых важных функций. Несмотря на то, что этого функционала хватает, но всегда хочется большего, недоступного…02 
      Рад, что моя статья возможно понадобится вам в будущем 

  12. Хорошая программка.
    А я пользуюсь онлайн сервисом gifovina . ру. Там онлайн можно гиф сделать и скачать. Всё бесплатно и не требует установки.
    Но программку все равно скачала) Мало ли, может и пригодится.

    • Здравствуй Людмила! С сервисом Gifovina я знаком и работал с ним тоже. Мне понравился сервис, но в программе намного больше опций и обширней функционал. В принципе, на начальных порах будет вполне достаточно использовать этот сервис.
      Спасибо Людмила за дополнение к статье

  13. seoonly.ru:

    Спасибо, сделал себе!)))

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

  15. Спасибо за информативную статью, я уже пошёл пробовать делать банер.
    Уютный блог у вас )

    • Здравствуй Виталий! Я рад, что ты положительно оценил информацию этой статьи. Надеюсь у тебя получатся отличные и качественные банеры!

       Уютный блог у вас )

       
      Спасибо большое! Мне приятно это слышать.

  16. Ну что то тебя в художества понесло. Баннер оно конечно хорошо, однако дёргающийся и мелькающий по моему перебор. Мне это зизеры напоминает, ну типа сиськи трясутся или целлюлит…
    Чего то ты блог свой слабо оцениваешь, ссылки по двенадцать рублей фугуешь. Ай-я-яй. Если честно, я такого ещё не видел. Если только в сапе.

    • Привет Женя. Да никуда меня не понесло. Просто делюсь своим опытом и навыком (хоть они и не такие большие, но все же..)
      Мне показалось, что это может многих заинтересовать, вот и все.

       Мне это зизеры напоминает, ну типа сиськи трясутся или целлюлит…

       
      А мне никапли не напоминает! Во всяком случае мой баннер не напоминает. По моему, он не трясется, а плавно переходит с картинки на картинку!

       Чего то ты блог свой слабо оцениваешь, ссылки по двенадцать рублей фугуешь. Ай-я-яй. Если честно, я такого ещё не видел. Если только в сапе.

       
      Женя, это в каком то смысле эксперимент. Цена будет все время меняться. Но как ни странно, на очень дешевую цену никто не обращает внимание. Завтра подниму и посмотрим что из этого выйдет.
      Я ведь установил эту опцию в сайтбар не для того, чтобы начать зарабатывать, а чисто ради эксперимента.
      Так что…я свой блог оцениваю нормально.

      • А, ну ясно. А цена в двенадцать рублей за ссылку действительно подозрительно выглядит, да и нелепо. Это я тебе, как сторонний наблюдатель говорю. Зашёл на твой блог, увидел цену и поперхнулся. Думал ты ошибся, ноль в конце не дописал.
        Игорь, у твоего блога тиц есть, так что можно за ссылку цену выставлять поприличнее. 
        Я тебе на своём примере скажу. У меня на блоге ценник за вечную ссылку 300 рублей стоит и знаешь покупают. Пусть не часто но покупают. У меня ещё тица не было покупали за такую цену, а теперь и подавно, чего скромничать.
        Так что не смеши людей, выстави серьёзную цену.
        Ещё смотрю ты через какой то сервис ссылки продаёшь, нафига? Проще сделать страницу Реклама или Услуги и всё. Чего мудрить.

        • Да ты прав Женя, это выглядит нелепо. Ну я уже поменял цену и посмотрим что из этого выйдет.

          Ещё смотрю ты через какой то сервис ссылки продаёшь, нафига? Проще сделать страницу Реклама или Услуги и всё. Чего мудрить.

          Не знаю…не хочу заморачиваться с приёмом оплаты и т.д. А там всё просто и не надо никому ничего объяснять.

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

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

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

        • Спасибо Надежда. Конечно же я к вам буду заходить и не только на досуге! У вас очень хороший и полезный блог. Я уже почерпнул для себя некоторые моменты из ваших постов.

  18. Игорь, спасибо за полезную программу. Вы помогли не одному человеку сэкономить лишний рубль. Только вот вопрос, а есть в ней русский язык? Я пока только скачал ее, и буду разбираться со всеми ее премудростями по вашим советам. Что-то пока не добрался до языков.

    • Пожалуйста Алексей! Я рад, что вы оценили по достоинству эту статью и информацию в ней.
      По поводу русского языка…внутри папки есть файл с русским языком. Плпробуй его установить как написано в инструкции (инструкция тоже в этой папке) у меня не получилось, но я не пример, так как операционная система моего компьютера на иврите и поэтосу не все программы у меня переводятся на русский

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

  20. Интересная прога! Я баннеры с помощью фотошопа делаю, даже статейку, буквально сегодня ночью, написал на своем блоге.

    • Здравствуй Наиль! Согласен, прога интересная. Я еще в начале статьи сказал, что если человек является экспертом в профессинальных программах типа Фотошоп, то конечно же ему не понадобятся проги и онлайн сервисы, но я таковым не являюсь, поэтому ищу достойные альтернативы. А вашу статью обязательно прочитаю. Спасибо

  21. Марина:

    Здравствуйте! Скажите пожалуйста а как ссылку на переход в анимированный баннер добавить??

    • Здравствуй Марина! Для того, чтобы вставить ссылку на переход, вам нужно повторить все действия, описанные в моей прошлой статье про статичные баннеры.
      Перейдите по это ссылке http://igorchernomoretz.com/kak-sdelat-samomu-banner-online.html, спуститесь по статье почти в самый низ и там будет подзаголовок «Как установить баннер на сайт» 
      Если появятся вопросы, то спрашивайте без стеснения!

  22. Галина:

    Здравствуйте! Первый раз попадаю на близкий мне по душевному настрою блог,даже просмотрев в скоростном режиме странички. (поэтому добавила в закладки.чтобы не потерять и вернуться ).Попала к Вам на сайт случайно-в поисках не сложной программы по изготовлению баннеров.Попыталась скачать  Easy GIF Animator Pro,но что-то не получилось-сижу,заморачиваюсь вторые сутки.А застряла я вот здесь:Скопируйте файл из папки gifan.exe в папку с установленной программой и согласитесь на замену.(файла я там не нашлаЯ в интернете новичок (чайник),стала заниматься всерьез пытаясь найти подработку — поэтому для меня всё очень сложно! Может быть кто-нибудь на пальцах мне объяснит — что делать дальше?Буду очень Всем благодарна!!!!!!!!!!!!

    • Здравствуйте Галина!
      Я очень рад, что мой блог и информация в нем вам оказалась интересна.
      По поводу программы…
      Я обязательно постараюсь вам помочь. У меня как раз новый компьютер и я еще не успел установить программу на него. Когда буду за компьютером и проделаю все действия для установки и активации программы, сразу же вас уведомлю что и как надо делать. Просто сейчас пишу через смартфон.
      Надеюсь, что до завтра напишу вам полную инструкцию. Напишу это скорей всего на ваш email. Хорошо? Подождете?

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

Поиск по сайту
Следите за новостями блога

Подпишитесь на обновление блогa и получайте первыми на ваш Email, новые статьи!


Реклама
© 2016    Блог Игоря Черноморца    //    Войти   //    Вверх
Яндекс.Метрика