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

24

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

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

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

Как сделать анимационный баннер в фотошопе.
Вариант 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.

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

Так что, если вам интересна тема анимации, подписывайтесь на обновления блога, чтобы ничего не пропустить!

TEXT.RU - 100.00%

Если статья Вам понравилась, поделитесь в соц. сетях


podpiska-na-email Введите адрес вашей электронной почты:

24 комментария

  • Ксения

    Я баннеры делаю в другой программе, но тема анимации в фотошопе мне очень интересна, поэтому я даже на обновления подписалась!

  • Elenka

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

    • Лора Лора

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

  • Елена

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

    • Лора Лора

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

  • Людмила Винокурова

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

  • Laralaram

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

    • Лора Лора

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

  • Елена Голоштенко

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

    • Лора Лора

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

  • Ирина

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

  • Галина Нагорная

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

    • Лора Лора

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

  • Галина Нагорная

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

    • Лора Лора

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

  • Галина Нагорная

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

    • Лора Лора

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

  • Галина Нагорная

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

  • Дмитрий

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

    • Лора Лора

      Если будут вопросы- задавайте! Постараюсь помочь)
      Что касается инструментов… Фотошоп изначально укомплектован определнным набором инструментов, которых не так уж и мало. и ими можно делать большое количество разнообразных анимаций, не прибегая к дополнительным инструментам. Вот посмотрите мои уроки на эту тему:
      http://gallora.com/?p=1235
      http://gallora.com/?p=2595
      http://gallora.com/?p=2620
      http://gallora.com/forum/index.php?board=15.0
      Еще можно установить в фотошоп разнообразные плагины, экшены(операции) кисти, текстуры, фигуры… Каждый вид устанавливается своим способом, и в комментарии на этот вопрос не ответить. Я планирую продолжить уроки по фотошопу, заглядывайте)

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

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

Рейтинг@Mail.ru