Шаблоны для uCoz Скрипты для uCoz Главная Помощь по uCoz Форум Новое на форуме Регистрация
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Модератор форума: Rascal  
Создание анимационного текста
RascalДата: Воскресенье, 26.04.2009, 13:41 | Сообщение # 1
Web Design Master
Группа: Проверенные
Сообщений: 779
Статус:
И так для начала здравствуйте! В этом уроке я расскажу вам основные принцыпы создания анимации. Если вы уже не новичок то для вас урок от N1CE, но если же вы новичок тогда этот урок именно для вас. Готовы? Поехали!

Создание заготовок

В самом начале создания анимации нам нужно создать слои (картинки, текст и др.) которые мы будем анимировать.

Создайте новое изображение размером 300*75 и залейте его как вам больше всего нравится. Я залил его градиентом

Теперь создайте новый слой и залейте его полосами. Мы учились их делать в этом уроке.
Измените прозрачность слоя с полосками на 70%. У вас должно получится как у меня

Теперь добавим эфект стекла. Возьмите инструмент "Овальная область" и создайте выделение как на рисунке


Теперь при помощи комбинаций клавиш Ctrl+Shift+N создадим новый слой и не снимая выделения зальём его вот таким градиентом сверху вниз

У вас должно получится вот такое

Теперь напишем какой нибуть текст. Напишите любой примените к нему любые стили. Короче проявите фантазию. Я написал это

Всё создание материалов готово.

Создаем анимацию

Возьмите и передвинте слой с текстом вправо так, чтоб его не было видно. Теперь создайте новый кадр и передвинте тот же слой влево так, чтоб его тоже не было видно.
Перейдите на первый кадр и нажмите кнопку "Создание промежуточных кадров" . Поставте количество создаваемых кадров 10 (можете и больше тогда текст будет медленнее ехать). Теперь поставте седьмому кадру задержку 0,5 сек.
Теперь сохраним нашу анимацию: Файл - Сохранить для Веб и устройств - Сохранить
Всё анимация готова.

Ещё раз говорю это только основы для создания красивых текстовых анимаций используется множество эфектов и хитростей о которых я расскажу в следующих уроках.
С вами был я Rascal. До новых встречь!
Прикрепления: 8547020.jpg (19.5 Kb) · 0819432.jpg (44.0 Kb) · 9811368.jpg (47.7 Kb) · 7895269.jpg (135.2 Kb) · 1189120.jpg (38.6 Kb) · 4034813.jpg (48.0 Kb) · 3944802.jpg (10.9 Kb) · 0783477.gif (49.3 Kb)


uPub
 
dUalДата: Воскресенье, 26.04.2009, 15:27 | Сообщение # 2
правил admin
Группа: Проверенные
Сообщений: 704
Статус:
Quote (Rascal)
С вами был я Rascal. До новых встречь!

Как все та официально!


 
FoXeDДата: Воскресенье, 26.04.2009, 15:50 | Сообщение # 3
Подполковник
Группа: Проверенные
Сообщений: 243
Статус:
Rascal, урок просто клас!! всё получилось спс большое лови [img]http://razvlek.3dn.ru/smi/16.gif[/img]


 
RascalДата: Воскресенье, 26.04.2009, 16:11 | Сообщение # 4
Web Design Master
Группа: Проверенные
Сообщений: 779
Статус:
Quote (n1ce)
Rascal, покажи в картинках анимацию как делать!

там практически нечего показывать. Смотри:
На первом кадре сдвигаеш текст вправо за границы изображения (чтоб не видно было), а на втором кадре то же самое только сдвигай текст в другую сторону. Потом нажимаеш на первый кадр и потом на кнопку "Создание промежуточных кадров". Понял?


uPub
 
RascalДата: Воскресенье, 26.04.2009, 17:16 | Сообщение # 5
Web Design Master
Группа: Проверенные
Сообщений: 779
Статус:
n1ce, а где текст? Смотри как должно быть!
[spoiler]
Прикрепления: 2531864.jpg (420.4 Kb)


uPub
 
RascalДата: Воскресенье, 26.04.2009, 17:24 | Сообщение # 6
Web Design Master
Группа: Проверенные
Сообщений: 779
Статус:
n1ce, нужны такие слои:
1. Фон.
2. С штриховкой (полосами)
3. С эфектом стекла.
4. Текст


uPub
 
FoXeDДата: Понедельник, 27.04.2009, 08:53 | Сообщение # 7
Подполковник
Группа: Проверенные
Сообщений: 243
Статус:
вот смотри как получилось))
[spoiler][/spoiler]
а это с исчезновением как у тебя экспериментировал
[spoiler]





Сообщение отредактировал FoXeD - Понедельник, 27.04.2009, 08:58
 
RascalДата: Понедельник, 27.04.2009, 09:11 | Сообщение # 8
Web Design Master
Группа: Проверенные
Сообщений: 779
Статус:
FoXeD, а что прикольно получилось biggrin

uPub
 
FoXeDДата: Понедельник, 27.04.2009, 18:12 | Сообщение # 9
Подполковник
Группа: Проверенные
Сообщений: 243
Статус:
Rascal, а как эффект анимации сделать как тут
Туц-Ту





Сообщение отредактировал FoXeD - Понедельник, 27.04.2009, 18:14
 
RascalДата: Понедельник, 27.04.2009, 19:26 | Сообщение # 10
Web Design Master
Группа: Проверенные
Сообщений: 779
Статус:
FoXeD, для такого размытия текст есть специальные фильтры

uPub
 
FoXeDДата: Понедельник, 27.04.2009, 20:44 | Сообщение # 11
Подполковник
Группа: Проверенные
Сообщений: 243
Статус:
Rascal, всмысле?) это какие фильтры?) и что это такое)


 
RascalДата: Пятница, 01.05.2009, 16:27 | Сообщение # 12
Web Design Master
Группа: Проверенные
Сообщений: 779
Статус:
Quote (n1ce)
Rascal, сможешь видео урок накотать?

Ок. Зделаю!


uPub
 
FoXeDДата: Суббота, 02.05.2009, 00:17 | Сообщение # 13
Подполковник
Группа: Проверенные
Сообщений: 243
Статус:
n1ce, где?)

Добавлено (02.05.2009, 00:17)
---------------------------------------------
n1ce, у тебя несовсем то)) текст остаётся на месте, а не двигается как на примере, но урок хороший



 
FoXeDДата: Суббота, 02.05.2009, 14:07 | Сообщение # 14
Подполковник
Группа: Проверенные
Сообщений: 243
Статус:
n1ce, а ок, а то я один только скачал


 
  • Страница 1 из 1
  • 1
Поиск:
Партнеры:


Saitmap