Анимационные тексты как их сделать


Анимационные тексты как их сделать

Анимационные тексты как их сделать

Анимационные тексты как их сделать



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

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

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

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

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

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

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

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

TEXT.RU - 100.00%


Источник: http://gallora.com/kak-sdelat-banner-dlya-sajta-chast-2.html


Анимационные тексты как их сделать фото


Анимационные тексты как их сделать

Анимационные тексты как их сделать

Анимационные тексты как их сделать

Анимационные тексты как их сделать

Анимационные тексты как их сделать

Анимационные тексты как их сделать

Анимационные тексты как их сделать

Далее: