Как сделать баннер для сайта. Часть 2.
Продолжаем урок по созданию баннеров. Сегодня мы рассмотрим, как можно сделать анимационный баннер для своего сайта.
В предыдущем уроке мы рассматривали основное отличие анимационного баннера от статического, указывая на его преимущества и недостатки.
Акцентирую ваше внимание на том, что в своих уроках по созданию баннеров я не рассматриваю сам сценарий и разработку идеи баннера. Это очень важный и, я бы даже сказала, основной этап, ведь без точного знания, ЧТО именно вы хотите сказать своим баннером и КАК вы себе это представляете, начинать делать баннер не имеет никакого смысла.
Поэтому я говорю только о технической стороне создания баннеров и о том, что если есть идея и сценарий, то сам баннер сделать самостоятельно под силу каждому.
Анимационный баннер можно сделать не только в фотошопе, и в других специально приспособленных для этого программах, которых великое множество. О них мы тоже поговорим, но чуть позже. А пока все же начнем создание баннера в моем любимом фотошопе.
Как сделать анимационный баннер в фотошопе.
Вариант 1.
Анимационный баннер, полученный в результате простой смены картинок ( фонов, рекламных объявлений). Для этого нам надо сделать всего три простых шага:
Шаг 1. Подготовительный.
• выбираем размер баннера ( в нашем случае 468х60 ) и создаем пустой файл
• берем подготовленные заранее для нашего баннера картинки, которые уже приведены к нужному размеру баннера, копируем их и каждую из них вставляем в наш файл в виде отдельного слоя (открываем картинку- выделяем ее -копируем Ctrl+C — переходим в наш файл- вставляем Ctrl+V) . Для своего баннера я подготовила 3 картинки ( картинка А).
Шаг 2. Делаем обводку для баннера:
• Выбираем слой 1. Двойным щелчком по слою вызываем меню «Стиль слоя» и в этом меню выбираем «Обводка».
• Выбрав ширину обводки, ее положение и цвет, зафиксируем эти параметры, нажав на кнопочку «Применить по умолчанию». Цвет обводки должен выделять четко контуры нашего баннера, а это означает, что он должен быть в меру ярким и контрастным по отношению и к фонам картинок и к фону вашего сайта.
• Переходим на слой 2 . Щелкаем по нему дважды и в окне «Стиль слоя» просто выбираем «Обводка» и нажимаем ОК. ( настройки стиля обводки мы оставляем неизменными)
• Аналогично обводим и последний третий слой-картинку.
Шаг 3. Создаем непосредственно анимацию для нашего баннера.
• Выбираем в верхнем меню фотошопа «Окно»-«Анимация» и выбираем покадровую анимацию. На картинке Б подробно показано, что обозначает каждая отдельная кнопочка на панельке анимации.(картинка Б)
• Создаем кадры анимации: первый кадр создается, когда мы становимся на слой первой картинки, для создания второго кадра нажимаем на кнопочку 7(картинка Б) и переходим на второй слой, для создания третьего кадра мы снова нажимаем на кнопочку 7 (картинка Б) и «включаем» третий слой — слой нашей третьей картинки.
• Определяемся со временем анимации. Выставляем время на каждом кадре и нажимаем на кнопочку 4, чтобы посмотреть, как получается. Если что-то не устраивает – корректируем время. Если устраивает и больше ничего мы не хотим менять, то сохраняем полученный простейший анимационный баннер.
• Сохраняем баннер: Файл- Сохранить для веб-устройств — формат gif и выставляйте параметры в выпавшей табличке как на картинке. Это, на мой взгляд, самые оптимальные настройки, хотя вы можете и поэкспериментировать.
Здесь я привожу только описательную часть данного шага, посмотреть ее можно в видео, которое размещено в конце урока.
Все, простейший анимационный баннер в фотошопе готов.
Когда будете смотреть видео, то обратите внимание, что на создание его фактически ушло примерно 3 минуты.
Вариант 2. Анимационный баннер, полученный в результате наложения на один и тот же фон-заготовку разных текстовых сообщений (или можно каких-то изображений).
Принцип создания такого баннера описывать не буду, он в основном аналогичен варианту 1, отличие лишь в формировании анимации кадров:
1 кадр — фон+первый текст
2 кадр — фон+второй текст
3 кадр- фон+третий текст
На видео вы все сможете рассмотреть в реальном исполнении.
Анимация текста для создания анимационного баннера.
И еще в видео я показала, как сделать анимацию текста для анимационного баннера. Показан последовательный процесс формирования «рекламного» текста. Вначале показано, как сделать, чтобы первый текст перемещался снизу-вверх, затем второй текст перемещается справа-налево, как бы «выпрыгивая», и последний текст добавляется просто как кадр.
Будут вопросы- спрашивайте, обязательно отвечу подробно.
Пожалуй и все на сегодня. Пробуйте, экспериментируйте! Вот и обещанное видео!!!
Вообще, создание анимационных баннеров в фотошопе- увлекательный процесс. Но если не захочется заморачиваться и экспериментировать, то в следующий раз мы поговорим о специальных программах по созданию анимационных баннеров, в которых вам вообще надо иметь в наличие только идею и сценарий, а все анимационные манипуляции делаются как по мановению волшебной палочки! И также расскажу, как вставить баннер на свой сайт, и даже постараюсь показать, как сделать анимационный и флэш- баннер в программе Easy Gif-Animator.
И еще… Уроки по созданию анимационных баннеров пригодяться вам не только для создания баннеров для вашого сайта, но и для создания любой анимации, Ведь принцип анимации останется таким же, изменится лишь размер картинки!
Поделиться в соц. сетях
© 2023 Взгляд на мир
Все права защищены. При копировании материалов с сайта обязательно ставьте активную ссылку на первоисточник
Уважайте, пожалуйста, авторские права и чужой труд.
Я баннеры делаю в другой программе, но тема анимации в фотошопе мне очень интересна, поэтому я даже на обновления подписалась!
Ксения, есть несколько уроков по анимации в фотошопе на моем форуме http://gallora.com/forum/index.php?board=15.0
Если интересно- посмотрите)) Может быть, вам понравится и что-то пригодится!!!
Вот пока читаешь и смотришь — все понятно…а как начинаешь делать — так мозги кипят…
Это только в первый раз)) Когда хотя бы раз какой-то подобный процесс пройден от и до, все укладывается по своим «полочкам»))) Главное- понять принцип, а потом можно уже и импровизировать)))
Хотя может быть еще дело и в то, как объясняют…) Ведь когда все знаешь сам, то кажется и другим все понятно… Так что если что-то непонятно будет — пишите, отвечу, помогу и даже в онлайн режиме можем пересечься))
Лора, огромное вам спасибо за такой урок. Я не знала, что в фотошопе можно создать такую красоту. Мне баннер-анимацию делали в специальной программе. Положу вашу статью в закладки и буду теперь пробовать сама такую красоту создавать.
Мы же вроде бы на «ты»))) Пожалуйста, Леночка!!! Я рада буду, если этот урок поможет тебе!! А в фотошопе много всего можно сотворить!!
Тем, наверное, он и интересен мне, что столкнувшись с какой-то оформительской проблемой, я нахожу в нем ответ)))
Если будут вопросы- задавай!!! Всегда помогу чем смогу, расскажу,поясню, отвечу!!!
Лора, взяла информацию в закладки, обязательно пригодится. Спасибо!
Пожалуйста!! буду рада, если мой урок поможет и пригодится!!
Ой, урок хороший какой, а я сама мучилась, пока научилась…
зато теперь ты знаешь как все делать на собственном опыте, а собственный опыт всегда дороже!!!
Лора, урок замечательный! Думаю, многим он пригодится. Главное, не бояться делать. Мне в первый раз создание анимации показалось чем-то таким долгим и трудным, т.к. разбиралась методом тыка. Но зато теперь сделать баннер — легко. Главное, чтобы была идея. Вот это точно!
Я тоже учусь сама, но очень уж хотелось анимацию освоить))) Теперь все кажется легко и просто, хотя в принципе еще так многого я еще не умею и не знаю!
Согласна с тобой, Леночка, главное не бояться, пробовать и экспериментировать, потому что иначе сложно чему-то научиться бед практики))
Все подробно и обстоятельно, буду воплощать в жизнь
Успехов вам!! И благодарю за визит и отзыв!!!
Лора, после кулинарной копилки, которую, кстати, я раньше и не видела, я забежала в Вашу мастерскую… Обожаю фотошоп! Раньше училась по курсу и очень серьёзно — делать сайты самостоятельно, и застряла в фотошопе. Тот случай — зайти-зашла, а выйти не смогла…
И анимацию тоже люблю, но владею слабо, хотя принцып понятен. Жаль, блог на Вордпрессе — не умею туда красоту прицепить.
Разве что, открытки можна друзьям высылать….
Мне сердечки глазик намылили…
Благодарю!
Я фотошопом увлеклась давненько, года 4 назад, когда впервые попала на ярушку и захотелось делать коллажи для своих стихов. Процесс увлекательный и учусь с удовольствием, хотя думаю, что еще многих секретов фотошопа еще не знаю)))
А что касается блога- так у меня блог тоже на ворпресс)) И кнопочки и баннеры для конкурса или для информационного продукта вполне можно сделать именно в фотошопе))) Любая обложка, любое объявление тоже в фотошопе можно оформить, да и шапку для сайта сделать тоже!
Рада, Галина, что сердечки вам тоже понравились)) Да, их можно подарить друзьям!!! И отправить по почте можно и использовать в поздравлении с наступающим праздникм святого Валентина))
Я обложки тоже сама делаю. И картинки меняю: что-то убираю, что-то добавляю.А как в теме, через редактор, всё остальное изменить — не знаю…
Конечно, через четыре года научусь — мне семь месяцев только, как блогеру. И пришла я в интернет круглым чайником-самоваром, не зная даже, как архивировать… Многому учусь на ходу….
И мне это нравится! Очень… И блог люблю…
Галина, моему блогу чуть больше года)) Но прежде чем его создать, я много изучала всего… И строение своего блога знаю, потому что в нем практически все теперь мое)) Да и html и css знаю неплохо, и даже php пришлось немного освоить))
Согласна, если у человека есть желание учиться- то всему можно научиться и все освоить!!! А к созданию своего блога я шла долго.. раздумывая и осознавая, что именно я хочу и как это будет)))
В теме через редактор можно многое изменить, только экспериментировать все же лучше на поддомене, чтобы не сломать основной блог. Я например так делаю)) Создаете поддомен на своем хостинге, закрываете его от индекса и читателей и устанавливаете на нем свою тему блога. ну, и меняете все, что хотите. А потом то, что получилось и понравилось, повторяете на блоге)) так и опыт работы с редактором темы появляется и в то же время основной блог всегда в порядке!
Вопрос от самовара: через новфаловинг? (закрываете от индексации).
Нет. Поддомен полностью закрывается от индексации в настройках ворпресса, в панельке управления( админке). заходите в админку поддомена ( или сайта, который вы хотите закрыть от индексации )и в боковом меню выбираете меню Параметры/Настройки чтения и ставите галочку возле фразы: Попросить поисковые системы не индексировать сайт.
Вы таким образом закрываете сайт от посещения роботов поисковиков. Или можно создать robots.text и в нем запретить полностью индексацию поддомена.
для закрытия сайта от посетителей ( если вы не хотите, чтобы кто-то видел, что происходит на вашем экспериментальном полигоне) есть специальный плагин (Maintenance Mode). Устанавливается он как и все плагины в админку поддомена, настраивается ( можно не настраивать, просто текст сообщения будет на английском), но надо НЕ забыть поставить галочку возле Включить плагин и все.
Благодарю! Буду пробовать. Скопировала себе в папочку «Сделать».
Если будут вопросы- обращайтесь без стеснения!!!
Спасибо за статью.
Вроде все понятно, буду пробовать.
Давно хотел научиться делать анимацию в фотошопе, да все руки не доходили.
Да кстати, подскажите как добавить инструменты в фотошоп и где их можно скачать. Я так понимаю у меня только минимальный набор сейчас загружен.
Заранее спасибо.
Если будут вопросы- задавайте! Постараюсь помочь)
Что касается инструментов… Фотошоп изначально укомплектован определнным набором инструментов, которых не так уж и мало. и ими можно делать большое количество разнообразных анимаций, не прибегая к дополнительным инструментам.
Еще можно установить в фотошоп разнообразные плагины, экшены(операции) кисти, текстуры, фигуры… Каждый вид устанавливается своим способом, и в комментарии на этот вопрос не ответить. Я планирую продолжить уроки по фотошопу, заглядывайте)