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

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

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

А ещё быть может вы хотите привлечь внимание к своему инфопродукту. В любом случае, если нужно сделать баннер, то это можно сделать в графическом редакторе Photoshop.

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

Я же хочу рассказать, как сделать баннер своими ручками от А до Я в графическом редакторе Photoshop.

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

Прежде всего, вам потребуется сам редактор Photoshop, версия не ниже CS3. Хотя, и в более ранних версиях, можно сделать анимированный баннер, но немного иным способом.

Разумеется, вам потребуется изображение. Изображение – это основа всех баннеров. В зависимости от тематики баннера, изображения легко найти в интернете.

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

Выбор размера баннера

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

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

88 x 31;  100 x 100;  120 x 60;  120 x 90;  125 x 125;  120 x 240;  120 x 600;  160 x 600;  180 x 150;  234 x 60;  240 x 400;  250 x 250;  300 x 250;  300 x 600;  336 x 280;  468 x 60;  500 x 100;  600 x 90;  728 x 90; 970 x 90.

Размеры приведены в пикселях (px). Первая цифра – ширина, вторая – высота. Выбирайте размер исходя из расчёта размещения баннера.

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

Итак, допустим, я решил сделать баннер 300 x 300 для своего бесплатного курса «Как набрать текст голосом». Это нестандартный размер, но для своего блога я могу использовать этот размер, так как знаю где его разместить.

Открываем графический редактор фотошоп и создаём новое изображение с размерами 300 х 300 пикселей.

Пункт меню «Файл»«Новый» — задаёте размер и жмёте кнопку «Да» или «ОК».

Создать новое изображение
Создать новое изображение

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

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

Я создал 4 слоя с изображениями. Точнее, одно с изображением и три с текстом.

Готовим слои для анимации
Готовим слои для анимации

Теперь нужно включить отображение панели «Анимация». Для этого открываем пункт меню «Окно»«Анимация».

Подключаем панель анимации
Подключаем панель анимации

Примечание: В зависимости от версии и перевода этот пункт может называться «Шкала времени» или ещё как-нибудь.

В панели «Анимация» будет отображаться один кадр с текущим слоем. Отображение остальных слоёв следует временно отключить (убрать пиктограмму «глаз» напротив слоя).

 

Первый кадр
Первый кадр

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

Второй кадр
Второй кадр

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

Промежуточные кадры
Промежуточные кадры

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

Промежуточные кадры
Промежуточные кадры

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

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

Итак, для сохранения анимированного баннера нужно открыть пункт меню «Файл»«Сохранить для Web».

Сохранение баннера
Сохранение баннера

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

Выбор формата gif
Выбор формата gif

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

Готовый баннер

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

Мало сделать красивый баннер. Его нужно ещё установить на сайт. Для этого сам баннер нужно загрузить на ваш сайт. Сделать это можно с помощью файлового менеджера хостинга или через FTP-соединение.

Теперь в том месте сайта, где необходимо показывать баннер вставляете вот этот код:

<!-- Баннер в сайтбаре -->
<p style="text-align:center;"><a href="ССЫЛКА С БАННЕРА" target="_blank" rel="nofollow"><img src="ССЫЛКА НА БАННЕР" width="300" height="300" border="0" alt="голосовой набор текста"/></a></p>
<!-- Баннер в сайтбаре -->

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

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

Для этого открываем административную панель WordPress – «Внешний вид»«Виджеты» — тип виджета «Текст».

Виджет
Виджет

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

Вставка кода в виджет
Вставка кода в виджет

Готово, — наслаждаемся плодами своего труда.

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

Друзья, на этом сегодня всё. Я желаю вам удачи и хорошего настроения! До встречи в новых статьях.

С уважением, Максим Зайцев.

Понравилась статья? Поделиться с друзьями:
Комментарии: 33
  1. Сергей Саранчин

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

    1. Максим Зайцев (автор)

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

  2. Ivan

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

    Надо будет испытать, спасибо Максим.

    1. Максим Зайцев (автор)

      Иван, привет. Фотошоп, очень мощная программа. А какие вещи это редактор вытворяет при нарезки шаблона для вёрстки. Обалдеть!

      1. Ivan

        Максим, ну я с фотошопом на Вы. Пока максимум это демотиваторы и рамочки, раньше пытался обучиться, да забросил.

        Конечно фотошоп это полезная вещь, аналогов не существует, а если и есть — они по функционалу серьёзно уступают.

        1. Максим Зайцев (автор)

          Да, фотошоп отличный редактор. И его стоит изучать. Эти знания всегда будут востребованы.

          1. Иван

            Даже через сто лет?) Представляю сидит чел в экзоскилете и создаёт баннер))

          2. Максим Зайцев (автор)

            Прикольная фантазия!

  3. Vlad

    Если ты не против, то я одолжу твой баннер на баннербро?

    Еще бы можно дописать «вместо 3490 руб» или что-то в этом роде…

    Самому лень делать, хотя данная затея может привлечь клиента… =)

    1. Максим Зайцев (автор)

      Влад, конечно бери. А на счёт правки по цене, посмотрю. Может подправлю.

  4. Виктория Карпова

    Привет, Максим:) Тоже как-то пробовала делать анимированный баннер в фотошопе — мне понравилось, да и вообще он мне нравится. Вот только бы времени побольше, чтобы и в нем разобраться и в других интересных для себя вещах.
    А твоя статья и урок, как всегда полезны и понятны. Спасибо!

    1. Максим Зайцев (автор)

      Вика, привет. Очень рад видеть тебя в гостях. Ты права, программа действительно очень интересная и полезная. Конечно на изучение нужно время, но это того стоит. А времени, его походу, всегда не хватает. Так же очень многое хочется сделать, а на всё времени нет. Но, каждый день стараюсь двигаться в заданном направлении. Хотя и не всегда получается ;-)

  5. Николай Вилков

    Максим, ты как всегда на высоте. Эта информация мне пригодится, я раньше делал анимированный баннер при помощи Easy GIF Animator 5 Pro, получалось нормально.

    1. Максим Зайцев (автор)

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

  6. Лидия

    Спасибо,Максим, все хотела сделать банер- руки не доходили :) , видимо пора, раз попалась такая информация !

    1. Максим Зайцев (автор)

      Здравствуйте, Лидия. Обязательно попробуйте, не откладывайте. Такой навык всегда пригодится. Желаю удачи!

  7. Маргарита Сизонова

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

    1. Максим Зайцев (автор)

      Здравствуйте, Маргарита. Мыслей читать не умею, хотя иногда было бы интересно. ;-) Фотошоп очень функциональная и интересная программа. И навыки работы с ней всегда пригодятся. Удачи в создании баннеров!

  8. Лариса

    Здравствуйте, Максим! По Вашему уроку сделала баннер. Раньше делала их онлайн в спец. программе, результат не устраивал. В фотошоп получилось отлично. Конечно, еще необходимы доработки, но принцип ясен, теперь дело быстрее пойдет :-) Благодарю.

    1. Максим Зайцев (автор)

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

  9. Анатолий

    Добрый день, а вы планируете сделать урок про flash баннеры? Я просто часто заказываю их тут: http://gobanner.ru и выходит иногда довольно дорого. А как их делать в интернете информации вообще нету. Хотелось бы узнать и делать самому, хотя бы простенькие.

    1. Максим Зайцев (автор)

      Здравствуйте, Анатолий. Вообще в планах есть такая статья, но публикация её запланирована в двадцатых числах мая. Так что заходите числа 23, постараюсь раскрыть все доступные способы создания flash баннеров.

    2. Vlad

      Анатолий, может плохо искали? ;)

  10. Илья

    Максим, спасибо за подробную инструкцию! У меня такой вопрос, можно сделать такой банер в онлайн-фотошопе?:)

    1. Максим Зайцев (автор)

      Илья, к сожалению, в онлайн-фотошопе анимацию сделать не получится. Но, вы всегда можете установить пробную версию фотошопа и в течении 30 дней можно намучиться делать отличные баннеры. А вообще на просторах интернета можно найти практически всё, в том числе и фотошоп ;-)

  11. Татьяна

    Большое спасибо! У меня всё получилось! Думала, что это сложнее. Вы всё прекрасно объяснили и показали.

    1. Максим Зайцев (автор)

      Здравствуйте, Татьяна. Я рад, что смог вам помочь и у вас всё получилось. :-)

  12. Юлия

    Очень полезная статья и подробное описание! Огромное спасибо! Сейчас буду делать такой баннер!!!

    1. Максим Зайцев (автор)

      Юлия, добрый день. Рад, что статья вам понравилась. Пробуйте, делайте, а будут вопросы пишите. Кстати, в завтра выйдет новая статья по созданию баннеров в новом формате HTML5. Так что приглашаю, будет интересно. Желаю удачи!

  13. Олег

    Хороший урок.

    1. Максим Зайцев (автор)

      Спасибо! ;-)

  14. Юлия

    Все очень просто. Век живи век учись. Спасибо за статью

    1. Максим Зайцев (автор)

      Пожалуйста, Юлия!

Добавить комментарий