Graf-Art форум графики

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Graf-Art форум графики » Текстовые уроки » Анимация "Точка"


Анимация "Точка"

Сообщений 1 страница 19 из 19

1

Урок достаточно простой, хоть и требует терпения и времени.

Итак, начнем с того, что создадим новый документ, в моем случае 150*50 рх.
Заливаем его любым цветом (я выбрала популярный черный).
Пишем наш текст. Я выбрала название нашего форума "Graf-Art.ru".
Применяем к нему стили. Уменя получился вот такой обычный цветной текст - для урока этого достаточно.

http://s6.uploads.ru/5h7Tk.png

Теперь переходим в окно слоев и поверх имеющихся двух слоев с заливкой и текстом, создаем еще один новый слой "точка"

http://s7.uploads.ru/EnRIK.png

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

Кликаем по краю первой буквы текста. Вы можете поиграть с режимом наложения точки - выбрать "Перекрытие", "Мягкий свет" и др. подходящее к вашему текста.

http://s6.uploads.ru/BuCtb.png

Со слоями мы закончили. Переходим к созданию анимации.
Сейчас у нас в окне анимации стоит всего лишь один кадр.

http://s7.uploads.ru/n1vJl.png

Добавьте к нему еще один.

http://s6.uploads.ru/yr3xu.png

У кадра 1 отключите слой с точкой.
У кадра 2 включите слой с точкой.

Проверьте кадры:

кадр 1 без точки

http://s7.uploads.ru/lDMeG.png

кадр 2 с точкой

http://s6.uploads.ru/qWY8d.png

Добавляем еще один кадр.
Начинается самое интересное. Выбираем инструмент перемещение. Начинаем двигать нашу точку постепенно по контуру нашего текста. Можете использовать мышку. Можете использовать стрелки на вашей клавиатуре, как я.
Итак на третьем кадре мы переместили нашу точку немного вниз строго по контуру нашей буквы

http://s6.uploads.ru/Ne5kf.png

Создаем 4 кадрый и по аналогии перемещаем нашу точку дальше.

http://s7.uploads.ru/eM8KC.png
http://s7.uploads.ru/xD3pN.png

И так до конца первой буквы.

http://s7.uploads.ru/rPOTQ.png

Добавляем 9 кадр. Отключаем слой с точкой.
Добавляем 10 кадр. Включаем слой с точкой и перемещаем в начало следующей буквы

http://s7.uploads.ru/DRgEv.png

Далее проделываем все тоже самое, что и с первой буквой. Ну, и по аналогии поступаем так с каждой следующей буквой.

Когда вы дойдете до конца текста, то создайте еще один кадр и отключите слой с точкой.

Время перемены кадров с 1 до предпоследнего - 0,1 сек.
На последнем кадре поставьте 1 или 2 сек.
Жмем пуск в окне анимации и смотрим как движется наша точка.

http://s7.uploads.ru/eHtPo.gif

Желаю терпения, усидчивости и успехов в выполнении урока.

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

+3

2

Лимонад
а я такое через градиент делала http://uploads.ru/i/c/L/Y/cLYve.gif по этому уроку мне кажется, что проще твой способ http://uploads.ru/i/i/W/R/iWRfk.gif

0

3

Теория Хаоса
ну ты попробуй и реши для себя, что проще.
тут путь точнее виден.

0

4

Как-то не так вроде  http://uploads.ru/i/C/J/U/CJUIV.gif http://s6.uploads.ru/t/wtQbd.gif

+1

5

http://s6.uploads.ru/1XVhA.gif

+1

6

АлЁнКа
все так, только шрифт не совсем удачный. лучше тонкий для такой анимации выбирать.

Теория Хаоса
ну недочет мы еще вачера поправили. молодчинка.

0

7

Лимонад написал(а):

все так, только шрифт не совсем удачный. лучше тонкий для такой анимации выбирать.

или точку пожирнее http://uploads.ru/i/i/W/R/iWRfk.gif

0

8

Спасибо за урок, http://uploads.ru/i/o/0/L/o0L6e.gif  попробую сделать) http://uploads.ru/i/O/E/P/OEPG5.gif

0

9

спасибо) http://s9.uploads.ru/t/r50q8.gif

+1

10

Урок интересный спасибо))Правда запуталась в кадрах анимации  http://uploads.ru/i/c/L/Y/cLYve.gif
http://sa.uploads.ru/t/hyTaI.gif

+1

11

Fear
ну судя по иконке, рас путалась)

0

12

Лимонад написал(а):

Fear
ну судя по иконке, рас путалась)

дааааааа  http://uploads.ru/i/O/E/P/OEPG5.gif

0

13

http://sa.uploads.ru/t/xcN48.gif
http://s1.uploads.ru/i/NcTCb.gif спасибо за урок http://uploads.ru/i/O/E/P/OEPG5.gif

+1

14

Charming
очень не плохо.
но дам несколько советов, а там уж тебе решать, прислушаться или нет.
1. Я бы точку для такого шрифта сделала маленькую и пустила ее прям по краю букв.
2. Делай шаг на каждом новом кадре в два-три пикселя (нажатия на стрелку), тогда точка будет бежать более медленно и анимация будет более плавной.
примерно так. весь ник не стала анимировать. для примера двух букв хватит
http://sa.uploads.ru/Z1xpS.gif

Отредактировано Лимонад (2014-12-07 16:32:22)

0

15

ну как то так http://uploads.ru/i/q/o/N/qoNF9.gif
http://sa.uploads.ru/t/mDePi.gif

+1

16

Absents
ну получилось же)
и тоже, если движение сделать в два-три пикса, то анимация будет смотреться плавнее.
мордаха смешная такая на графе  http://uploads.ru/i/c/L/Y/cLYve.gif

0

17

http://s9.uploads.ru/t/Mr4pb.gif
О богиии. Это моя первая анимация.

0

18

http://s2.uploads.ru/t/Yg3o8.gif

как-то так пока  http://s5.uploads.ru/PJuOB.gif

+1

19

Hard Kiss
я бы путь движения точки по буквам немного изменила, а еще движения шака в 2-3 шага дела. то есть точку передвигаю на 2-3 раза, тогда анимация плавнее смотрится.
Правда я немного накосячила на букве "А", а моя анимация смотрится вот так:
http://sh.uploads.ru/TK5M8.gif

а вообще у тебя анимация удалась, молодец.

Отредактировано Лимонад (2017-08-22 10:54:58)

+1


Вы здесь » Graf-Art форум графики » Текстовые уроки » Анимация "Точка"