Анимация печатного текста, Урок Image Ready Опции

[Ego]

Ну вот и я созрела для своего урока. Принимайте.

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

(IMG:http://s39.radikal.ru/i084/0904/58/a40f6d5f7b5a.gif)

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

(IMG:http://i066.radikal.ru/0904/20/2c3bb7a5c1dbt.jpg)

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

(IMG:http://s57.radikal.ru/i156/0904/8b/cf6f5225948dt.jpg)

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

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

(IMG:http://i066.radikal.ru/0904/7f/8c57c81b743d.jpg)


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

(IMG:http://s48.radikal.ru/i119/0904/35/f0cc79eb7101.jpg)

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

(IMG:http://s46.radikal.ru/i114/0904/e8/b9e74f3f392a.jpg)

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

(IMG:http://s40.radikal.ru/i088/0904/ba/e2121ca055b9t.jpg)

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

(IMG:http://s45.radikal.ru/i108/0904/9c/f1add2432191t.jpg)

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

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

(IMG:http://s61.radikal.ru/i174/0904/5b/1ec51ce8ecd1t.jpg)

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

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

(IMG:http://s48.radikal.ru/i121/0904/f8/605a54eb1edct.jpg)

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

(IMG:http://s58.radikal.ru/i159/0904/18/98892a15dc36t.jpg)

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

(IMG:http://s49.radikal.ru/i126/0904/4a/1bc6c28ae5aft.jpg)

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

(IMG:http://s54.radikal.ru/i143/0904/12/32389088619at.jpg)

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

(IMG:http://s55.radikal.ru/i148/0904/44/139d63f5a36ft.jpg)

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

(IMG:http://i056.radikal.ru/0904/8c/22566b78cdb8.jpg)

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

(IMG:http://s58.radikal.ru/i160/0904/4d/048651643ad8.jpg)

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

(IMG:http://i035.radikal.ru/0904/14/83424f4ecb8dt.jpg)

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

(IMG:http://s39.radikal.ru/i084/0904/58/a40f6d5f7b5a.gif)

[Малютик]

Всегда хотела этому научиться в фотошопе