Не знаешь с чего начать? Тогда раздел "Учебник" для тебя! =)

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

Просмотров:3 684



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

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

Мой первый баннер

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

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

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

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

Шаг 1

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

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

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

460x60

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

Шаг 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, там я сообщаю все детали.
На этом все, желаю вам удачи, до новых встреч! Улыбка

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

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





Вам понравилось?

>>> Почему надо подписаться на обновления? <<<

Буду благодарен за ретвит и клацанье по кнопочкам. Спасибо :)



 

Есть вопросы? Напишите в комментариях, всем отвечу :)

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



11 комментариев к “Как сделать анимированный баннер за 10 минут?”

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

    Я как раз собираюсь познавать «ФотоШоп» [для того, чтоб в будущем сайт создать]. Или не стоит над єтим париться, а лучше, все-таки обратиться к вєб-мастеру?

    2. Даже не обратил внимание на «насильство». Что значит: из соседние области :)

    3. В таком стеклянном мире и глаза у всех должны быть стеклянными. И, как-то мало они в этом мире едят — яблоко на завтрак. А каша, мясо, рыба, молоко? Мне и этот мир — вроде, ниче :)

    4. Шо-то перестали перетаскиваться смайлики в комментах (см. www.kolobochek.ru/cel-6-p... -1#comment-22401)

    [Ответить]

    Sergio Reply:

    1. Нет, дизайн делал сам. Использовал специальные кисти и немного воображения =)

    Можно иметь самый обычный дизайн и иметь отличный блог.

    2. Да я тоже по привычке написал «насильство», потом исправлять было поздно =)

    3. Да, я на яблоках долго не проживешь =))))

    4. Я исправил эту ошибку, теперь их можно не перетаскивать, а просто кликать =) 8) :( ;) :P :-D =-O :-! *IN LOVE* %) *CRAZY*

    [Ответить]

  2. Не смешите мой хвост www.kolobochek.ru/wp-cont...smiles/laugh.gif

    Я вегетерианец, на яблоках проживёшь долго, если добавить ещё два три вида растительной пищи. А парировать это выдуманной диетологами чушью про невосполнимые микроэлементы и остальной лабуды, не стоит. Достаточно посмотреть на спортсменов сидящих на подобной диете. Если бы хотя бы часть того что говорят врачи и диетологи была бы правдой — их бы в спорте вообще не было! И завоёвывают они не последние места)

    А молоко в природе пьют только детёныши. Но мы то от вкусненького не откажемся)

    Спасибо за статью. Меня как раз мучал этот вопрос про анимированные баннеры.

    [Ответить]

    Sergio Reply:

    Лис, ты все больше и больше меня удивляешь =) Не обычная ты личность, люблю таких людей =)

    Молочко я после тренажерки пью.

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

    [Ответить]

  3. Хороший пост, кстати впервые слышу про слово «насильство» :-D

    [Ответить]

    Sergio Reply:

    Это чисто украинское слово =) Кстати, на украинском оно так и пишется ;)

    [Ответить]

  4. Тема поста — «Насильство и варианты правописания слова в различных частых мира» =)

    [Ответить]

    Sergio Reply:

    Хаха =)) Точно-точно. Это обсуждается больше чем баннер :P

    [Ответить]

  5. Очень здорово объяснили! Доступно, тактично и интересно. Рисуете Вы, кстати, неплохо!)

    [Ответить]

    Sergio Reply:

    Спасибо, Владимир :)

    [Ответить]

  6. Прикольно,мне понравилось.Особенно про «насильству». :-D :P %)

    [Ответить]

Написать ответ


31 запросов. 0,207 секунд.