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

Привет всем! Сегодня у меня не совсем обычная тема пост, я расскажу о том, как сделать анимированный баннер! Рекламный баннер получить бесплатно, а не заказывать у кого-то за деньги. Все делается очень просто и даже человек с минимальными знаниями сможет сделать анимированный баннер бесплатно, следуя инструкциям к статье, я уже сделал!
Чтобы сделать анимированный баннер, мне потребовалось минут 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, там я сообщаю все детали.
На этом все, желаю вам удачи, до новых встреч!
Коржики на сегодня:
Видеоролик, который показывает каким может быть будущее, мне очень понравилось, советую посмотреть.
>>> Почему надо подписаться на обновления? <<<
Буду благодарен за ретвит и клацанье по кнопочкам. Спасибо :)
Tweet
Как установить такие комментарии вконтакте себе на сайт?
1. Исходя из сказанного Вами («рисовать как и работать в фотошопе я не умею») предполагаю, что вэб-дизайн своего сайта Вы заказывали. -?-
Я как раз собираюсь познавать «ФотоШоп» [для того, чтоб в будущем сайт создать]. Или не стоит над єтим париться, а лучше, все-таки обратиться к вєб-мастеру?
2. Даже не обратил внимание на «насильство». Что значит: из соседние области
3. В таком стеклянном мире и глаза у всех должны быть стеклянными. И, как-то мало они в этом мире едят — яблоко на завтрак. А каша, мясо, рыба, молоко? Мне и этот мир — вроде, ниче
4. Шо-то перестали перетаскиваться смайлики в комментах (см.www.kolobochek.ru/cel-6-p... -1#comment-22401 )
[Ответить]
Sergio Reply:
февраля 17, 2012 at 19:10
1. Нет, дизайн делал сам. Использовал специальные кисти и немного воображения
Можно иметь самый обычный дизайн и иметь отличный блог.
2. Да я тоже по привычке написал «насильство», потом исправлять было поздно
3. Да, я на яблоках долго не проживешь =))))
4. Я исправил эту ошибку, теперь их можно не перетаскивать, а просто кликать
[Ответить]
Не смешите мой хвостwww.kolobochek.ru/wp-cont...smiles/laugh.gif
Я вегетерианец, на яблоках проживёшь долго, если добавить ещё два три вида растительной пищи. А парировать это выдуманной диетологами чушью про невосполнимые микроэлементы и остальной лабуды, не стоит. Достаточно посмотреть на спортсменов сидящих на подобной диете. Если бы хотя бы часть того что говорят врачи и диетологи была бы правдой — их бы в спорте вообще не было! И завоёвывают они не последние места)
А молоко в природе пьют только детёныши. Но мы то от вкусненького не откажемся)
Спасибо за статью. Меня как раз мучал этот вопрос про анимированные баннеры.
[Ответить]
Sergio Reply:
февраля 18, 2012 at 0:53
Лис, ты все больше и больше меня удивляешь
Не обычная ты личность, люблю таких людей
Молочко я после тренажерки пью.
Пожалуйста за статью, которая ответила на вопрос, который тебя мучал
[Ответить]
Хороший пост, кстати впервые слышу про слово «насильство»
[Ответить]
Sergio Reply:
февраля 18, 2012 at 0:54
Это чисто украинское слово
Кстати, на украинском оно так и пишется
[Ответить]
Тема поста — «Насильство и варианты правописания слова в различных частых мира»
[Ответить]
Sergio Reply:
февраля 19, 2012 at 3:43
Хаха =)) Точно-точно. Это обсуждается больше чем баннер
[Ответить]
Очень здорово объяснили! Доступно, тактично и интересно. Рисуете Вы, кстати, неплохо!)
[Ответить]
Sergio Reply:
апреля 19, 2013 at 11:41
Спасибо, Владимир
[Ответить]
Прикольно,мне понравилось.Особенно про «насильству».
[Ответить]