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

Чтобы сделать анимированный баннер, мне потребовалось минут 15, все элементарно, просто надо знать, что делать и куда клацать .
Вот мой первый анимированный баннер:

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

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

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

Я использую adobe photoshop CS2, если у вас другая версия, ничего страшного.
Итак, приступим!

Шаг 1

Сначала создаем файл. “Файл – Новый” (ctrl+N) и выбираем размер баннера.
Прямоугольный баннер (вывешивается в шапках) – это 460 на 60 пикселей.
Так же можно сделать квадратные 125×125 или 200×200, выбирайте сами.

Вот тут вы можете посмотреть стандартные размеры баннеров.

Мы делаем 460×60, выставляем такие настройки:

Кликаем “ок”.

Шаг 2

После того как мы создали файл, мы должны видеть следующее:

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

Теперь нам надо создать новый слой, делается это в разделе “слои”, которые должны находится в правой колонке. Чтобы создать новый слой, достаточно нажать Ctrl+J и мы можем видеть, как создался новый слой.

Если комбинация Ctrl+J почему-то не работает, кликайте на кнопочку, которую я обвел красным кружочком на рисунке слева.

“Слой 1” – это то, что мы создали. Значок глаза означает, что этот слой отображается или проще говоря то, что мы можем его видеть, если убрать значок то все, что мы нарисовали на “Слой 1” мы не будем видеть. Я рассказал вам это потому, что мы буде использоваться это дальше, чтобы сделать анимированный баннер.

Шаг 3

Теперь нам надо подумать то, что будет изображаться на нашем баннере. Если вы не придумали “сюжет”, дальше идти нет смысла, думайте! .

Если придумали, идем дальше…

Рисуем на “слой 1” то, что задумали. (Используем увеличение для удобства)
Давайте проявим вежливость и не будем обращать внимание, что я не умею рисовать .

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

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

Получается такое:

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

Шаг 4

После того, как вы нарисовали все кадры для нашего баннера, переходим к следующему шагу.

Выполняем цепочку: “Изображение – Режим” и ставим птичку на “8бит/канал”.

Идем редактировать нашу работу в Image Ready, для этого нажмите Ctrl+Shift+M или на изображение, на рисунке ниже:

Кликаем на значок, выделенный цветами.
Нас перекидывает в другую программу.

Теперь убираем значок глазика со всех слоев, кроме первого.
Если вы видите, что первый кадр изображен так, как вы хотите его видеть, нажимаем “Создать дубликат текущего слоя” (Убедитесь, что стоит птичка возле слова “Анимация” в категории “Окно” в верхнем меню).

Затем ставим/убираем значок глаза так, чтобы вы видели следующий кадр и так же создаете дубликат. Таким образом, по очереди создаете дубликаты ваших слоев.
Создаем дубликаты всех слоев и нажимаем на значок “Воспроизводить” и о чудо, работает, картинка двигается!

Но это не все, нам надо сделать так, чтобы она двигалась с определенным интервалом времени, это легко делается. Под каждым дубликатом слоя есть время, видите на картинке выше “0 с”? Это значит, что задержка будет 0 секунд.
Настраиваем время задержки, смотрим, чтобы все работало как вам нравится и сохраняем вашу работу.

Кликаем “Файл – Сохранить оптимизированный как…” и выбираем куда сохранить.
Это все, ваш баннер готов!

У меня получился такой баннер:

P.s. Написал «Насильству» так как родом из Украины, это наше слово, заметил ошибку поздно

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

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

Кстати, если кто-то не читает меня в Twitter, сообщаю здесь, что я уже отобрал 5 блогов для участия в акции “Пинок” и скоро они получат рекомендацию по улучшению их детища. Что такое акция “Пинок”?

Так же хочу сообщить, что набор на акцию “Пинок” будет проводиться 1 или 2 раза в месяц, чтобы не пропустить свой пинок, подпишитесь на обновление блога, а так же не забывайте, следуйте за мной в Twitter, там я сообщаю все детали.
На этом все, желаю вам удачи, до новых встреч!

Коржики на сегодня:

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