• Авторизация


Движение текста 16-12-2011 21:45 к комментариям - к полной версии - понравилось!

Это цитата сообщения EgoEl Оригинальное сообщение

Анимация печатного текста

Урок, позволяющий анимировать печатный текст. Сайт источник - http://all-graphics.narod.ru/

Вот что у меня получилось)))
 (150x150, 31Kb)


А вот мной переработанный урок для новичков.

Для баннера или аватарки полезен рассмотренный в уроке анимированный эффект.

[показать]

1. Открываем в фотошоп любую исходную картинку. Я взяла достаточно большое изображение из которого вырежу аватарку размером 150х150 px.

[показать]

2. Берем инструмент Grop и выставляем ширину и высоту картинки в окнах Width и Height. Теперь выбираем любой интересный для нас кусочек картинки.

[показать]

Сгруппированный фрагмент можно передвигать с помощью инструмента Move. И жмем Enter. У нас получилась необходимая заготовка.

3. В окне навигатора выставляем масштаб изображения. Лучше 100%, так мы будем видеть реальную величину аватарки.

[показать]

4. Создадим рамку для аватарки. Создаем копию фона. Сделать это можно несколькими способами, рассмотрим два: 1) пр.кнопкой по слою Background – Duplicate Layer

[показать]

2) Перетащить слой Background на кнопку Create a new layer.

[показать]

5. Берем инструмент Rectangular Marquee и обводим нашу заготовку, она выделилась пунктиром.

[показать]

Layer – Layer Style – Stroke. Position – Inside. Color – выберите из палитры любой подходящий вам цвет, я взяла черно-зеленый оттенок, т.к. он подходит к исходной заготовке. Жмем кнопку Ok.

[показать]

6. Чтобы снять пунктир жмем Ctrl+D.

7. Теперь пишем текст по центру: Music style. Шрифт желательно печатный. Так эффект будет выглядеть лучше.

[показать]

Посчитаем сколько символов в нашем тексте: 10. Для каждого символа нужен свой слой. Создаем еще 9 копий текстового слоя. (См.пункт 4). В итоге их десять по количеству букв.

8. Снимем все глазки, кроме первого текстового слоя. Возьмем инструмент Horizontal Type и щелкнем по тексту сотрем (Backspace) все, кроме первой буквы.

[показать]

9. Идем в следующий текстовый слой, с первого снимем глазок. Во втором слое сотрем все буквы, кроме 2х первых. Так же поступаем с остальными текстовыми слоями. На последнем слое весь текст целиком.

[показать]

10. Снимите глазки со всех текстовых слоев. Переходим в ImageReady.

[показать]

11. Создаем копию кадра. И ставим глазок еще и на первом текстовом слое.

[показать]

12. Снова создаем копию кадра, но снимаем глазок с первого тестового слоя и ставим на втором. И так далее со всеми слоями.

[показать]

13. Установим время: на первый и последний кадр ставим 0,5 сек на все остальные 0,1 сек.

[показать]

14. Запустите анимацию (кнопка Plays) и посмотрите результат.

[показать]

15. Сохраним анимацию. File – Save Optimized as…- gif

[показать]

Наш результат:

[показать]

вверх^ к полной версии понравилось! в evernote


Вы сейчас не можете прокомментировать это сообщение.

Дневник Движение текста | ol10ga - Дневник ol10ga | Лента друзей ol10ga / Полная версия Добавить в друзья Страницы: раньше»