Как сделать баннер для сайта. Часть 2.

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

В предыдущем уроке мы рассматривали основное отличие анимационного баннера от статического, указывая на его преимущества и недостатки.

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

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

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

Вариант 1.
Анимационный баннер, полученный в результате простой смены картинок ( фонов, рекламных объявлений). Для этого нам надо сделать всего три простых шага:

Шаг 1. Подготовительный.
• выбираем размер баннера ( в нашем случае 468х60 ) и создаем пустой файл
• берем подготовленные заранее для нашего баннера картинки, которые уже приведены к нужному размеру баннера, копируем их и каждую из них вставляем в наш файл в виде отдельного слоя (открываем картинку- выделяем ее -копируем Ctrl+C — переходим в наш файл- вставляем Ctrl+V) . Для своего баннера я подготовила 3 картинки ( картинка А).

sozdanie-bannera-v-photoshop-01

Шаг 2. Делаем обводку для баннера:
• Выбираем слой 1. Двойным щелчком по слою вызываем меню «Стиль слоя» и в этом меню выбираем «Обводка».

sozdanie-bannera-v-photoshop-04

• Выбрав ширину обводки, ее положение и цвет, зафиксируем эти параметры, нажав на кнопочку «Применить по умолчанию». Цвет обводки должен выделять четко контуры нашего баннера, а это означает, что он должен быть в меру ярким и контрастным по отношению и к фонам картинок и к фону вашего сайта.
• Переходим на слой 2 . Щелкаем по нему дважды и в окне «Стиль слоя» просто выбираем «Обводка» и нажимаем ОК. ( настройки стиля обводки мы оставляем неизменными)
• Аналогично обводим и последний третий слой-картинку.

Шаг 3. Создаем непосредственно анимацию для нашего баннера.
sozdanie-bannera-v-photoshop-02
• Выбираем в верхнем меню фотошопа «Окно»-«Анимация» и выбираем покадровую анимацию. На картинке Б подробно показано, что обозначает каждая отдельная кнопочка на панельке анимации.(картинка Б)

• Создаем кадры анимации: первый кадр создается, когда мы становимся на слой первой картинки, для создания второго кадра нажимаем на кнопочку 7(картинка Б) и переходим на второй слой, для создания третьего кадра мы снова нажимаем на кнопочку 7 (картинка Б) и «включаем» третий слой — слой нашей третьей картинки.
• Определяемся со временем анимации. Выставляем время на каждом кадре и нажимаем на кнопочку 4, чтобы посмотреть, как получается. Если что-то не устраивает – корректируем время. Если устраивает и больше ничего мы не хотим менять, то сохраняем полученный простейший анимационный баннер.

sozdanie-bannera-v-photoshop-03

• Сохраняем баннер: Файл- Сохранить для веб-устройств — формат gif и выставляйте параметры в выпавшей табличке как на картинке. Это, на мой взгляд, самые оптимальные настройки, хотя вы можете и поэкспериментировать.

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

Все, простейший анимационный баннер в фотошопе готов.

баннер-1

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

Вариант 2. Анимационный баннер, полученный в результате наложения на один и тот же фон-заготовку разных текстовых сообщений (или можно каких-то изображений).

Принцип создания такого баннера описывать не буду, он в основном аналогичен варианту 1, отличие лишь в формировании анимации кадров:

1 кадр — фон+первый текст
2 кадр — фон+второй текст
3 кадр- фон+третий текст

На видео вы все сможете рассмотреть в реальном исполнении.

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

баннер-2

баннер-2
Будут вопросы- спрашивайте, обязательно отвечу подробно.

Пожалуй и все на сегодня. Пробуйте, экспериментируйте! Вот и обещанное видео!!!

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

И еще… Уроки по созданию анимационных баннеров пригодяться вам не только для создания баннеров для вашого сайта, но и для создания любой анимации, Ведь принцип анимации останется таким же, изменится лишь размер картинки!

[link]Text.ru - 100.00%[/link]

Поделиться в соц. сетях
Поделиться в Фейсбуке Поделиться записью в Твиттере Поделиться в Телеграмм Поделиться в ЖЖ Поделиться в Whatsapp Поделиться в Viber
Обсуждение: 24 комментария
  1. Я баннеры делаю в другой программе, но тема анимации в фотошопе мне очень интересна, поэтому я даже на обновления подписалась!

    Ответить
    1. Лора:

      Ксения, есть несколько уроков по анимации в фотошопе на моем форуме http://gallora.com/forum/index.php?board=15.0
      Если интересно- посмотрите)) Может быть, вам понравится и что-то пригодится!!!

      Ответить
  2. Вот пока читаешь и смотришь — все понятно…а как начинаешь делать — так мозги кипят…

    Ответить
    1. Лора:

      Это только в первый раз)) Когда хотя бы раз какой-то подобный процесс пройден от и до, все укладывается по своим «полочкам»))) Главное- понять принцип, а потом можно уже и импровизировать)))
      Хотя может быть еще дело и в то, как объясняют…) Ведь когда все знаешь сам, то кажется и другим все понятно… Так что если что-то непонятно будет — пишите, отвечу, помогу и даже в онлайн режиме можем пересечься))

      Ответить
  3. Лора, огромное вам спасибо за такой урок. Я не знала, что в фотошопе можно создать такую красоту. Мне баннер-анимацию делали в специальной программе. Положу вашу статью в закладки и буду теперь пробовать сама такую красоту создавать.

    Ответить
    1. Лора:

      Мы же вроде бы на «ты»))) Пожалуйста, Леночка!!! Я рада буду, если этот урок поможет тебе!! А в фотошопе много всего можно сотворить!!
      Тем, наверное, он и интересен мне, что столкнувшись с какой-то оформительской проблемой, я нахожу в нем ответ)))
      Если будут вопросы- задавай!!! Всегда помогу чем смогу, расскажу,поясню, отвечу!!!

      Ответить
  4. Лора, взяла информацию в закладки, обязательно пригодится. Спасибо!

    Ответить
    1. Лора:

      Пожалуйста!! буду рада, если мой урок поможет и пригодится!!

      Ответить
  5. Ой, урок хороший какой, а я сама мучилась, пока научилась…

    Ответить
    1. Лора:

      зато теперь ты знаешь как все делать на собственном опыте, а собственный опыт всегда дороже!!!

      Ответить
  6. Лора, урок замечательный! Думаю, многим он пригодится. Главное, не бояться делать. Мне в первый раз создание анимации показалось чем-то таким долгим и трудным, т.к. разбиралась методом тыка. Но зато теперь сделать баннер — легко. Главное, чтобы была идея. Вот это точно!

    Ответить
    1. Лора:

      Я тоже учусь сама, но очень уж хотелось анимацию освоить))) Теперь все кажется легко и просто, хотя в принципе еще так многого я еще не умею и не знаю!
      Согласна с тобой, Леночка, главное не бояться, пробовать и экспериментировать, потому что иначе сложно чему-то научиться бед практики))

      Ответить
  7. Все подробно и обстоятельно, буду воплощать в жизнь

    Ответить
    1. Лора:

      Успехов вам!! И благодарю за визит и отзыв!!!

      Ответить
  8. Лора, после кулинарной копилки, которую, кстати, я раньше и не видела, я забежала в Вашу мастерскую… Обожаю фотошоп! Раньше училась по курсу и очень серьёзно — делать сайты самостоятельно, и застряла в фотошопе. Тот случай — зайти-зашла, а выйти не смогла…
    И анимацию тоже люблю, но владею слабо, хотя принцып понятен. Жаль, блог на Вордпрессе — не умею туда красоту прицепить.
    Разве что, открытки можна друзьям высылать….
    Мне сердечки глазик намылили…
    Благодарю!

    Ответить
    1. Я фотошопом увлеклась давненько, года 4 назад, когда впервые попала на ярушку и захотелось делать коллажи для своих стихов. Процесс увлекательный и учусь с удовольствием, хотя думаю, что еще многих секретов фотошопа еще не знаю)))
      А что касается блога- так у меня блог тоже на ворпресс)) И кнопочки и баннеры для конкурса или для информационного продукта вполне можно сделать именно в фотошопе))) Любая обложка, любое объявление тоже в фотошопе можно оформить, да и шапку для сайта сделать тоже!
      Рада, Галина, что сердечки вам тоже понравились)) Да, их можно подарить друзьям!!! И отправить по почте можно и использовать в поздравлении с наступающим праздникм святого Валентина))

      Ответить
  9. Я обложки тоже сама делаю. И картинки меняю: что-то убираю, что-то добавляю.А как в теме, через редактор, всё остальное изменить — не знаю…
    Конечно, через четыре года научусь — мне семь месяцев только, как блогеру. И пришла я в интернет круглым чайником-самоваром, не зная даже, как архивировать… Многому учусь на ходу….
    И мне это нравится! Очень… И блог люблю…

    Ответить
    1. Галина, моему блогу чуть больше года)) Но прежде чем его создать, я много изучала всего… И строение своего блога знаю, потому что в нем практически все теперь мое)) Да и html и css знаю неплохо, и даже php пришлось немного освоить))
      Согласна, если у человека есть желание учиться- то всему можно научиться и все освоить!!! А к созданию своего блога я шла долго.. раздумывая и осознавая, что именно я хочу и как это будет)))
      В теме через редактор можно многое изменить, только экспериментировать все же лучше на поддомене, чтобы не сломать основной блог. Я например так делаю)) Создаете поддомен на своем хостинге, закрываете его от индекса и читателей и устанавливаете на нем свою тему блога. ну, и меняете все, что хотите. А потом то, что получилось и понравилось, повторяете на блоге)) так и опыт работы с редактором темы появляется и в то же время основной блог всегда в порядке!

      Ответить
  10. Вопрос от самовара: через новфаловинг? (закрываете от индексации).

    Ответить
    1. Нет. Поддомен полностью закрывается от индексации в настройках ворпресса, в панельке управления( админке). заходите в админку поддомена ( или сайта, который вы хотите закрыть от индексации )и в боковом меню выбираете меню Параметры/Настройки чтения и ставите галочку возле фразы: Попросить поисковые системы не индексировать сайт.
      Вы таким образом закрываете сайт от посещения роботов поисковиков. Или можно создать robots.text и в нем запретить полностью индексацию поддомена.
      для закрытия сайта от посетителей ( если вы не хотите, чтобы кто-то видел, что происходит на вашем экспериментальном полигоне) есть специальный плагин (Maintenance Mode). Устанавливается он как и все плагины в админку поддомена, настраивается ( можно не настраивать, просто текст сообщения будет на английском), но надо НЕ забыть поставить галочку возле Включить плагин и все.

      Ответить
  11. Благодарю! Буду пробовать. Скопировала себе в папочку «Сделать».

    Ответить
    1. Если будут вопросы- обращайтесь без стеснения!!!

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

    Ответить
    1. Если будут вопросы- задавайте! Постараюсь помочь)
      Что касается инструментов… Фотошоп изначально укомплектован определнным набором инструментов, которых не так уж и мало. и ими можно делать большое количество разнообразных анимаций, не прибегая к дополнительным инструментам.
      Еще можно установить в фотошоп разнообразные плагины, экшены(операции) кисти, текстуры, фигуры… Каждый вид устанавливается своим способом, и в комментарии на этот вопрос не ответить. Я планирую продолжить уроки по фотошопу, заглядывайте)

      Ответить

Ваш комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

  Отправляя комментарий, вы соглашаетесь с политикой конфиденциальности этого сайта *

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