В этом уроке я Вам расскажу , как можно имитировать написание текста ручкой , пером , карандашом и т.д.

Все готовые картинки можете использовать для своих блогов

Открываем картинку на которой будем писать и картинку-клипарт , чем будете писать . Готовые клипарты можно взять Здесь

В окне Слои не забываем снять замочки . Активируем инструмент Перемещение и переносим Клипарт-Перо на нашу картинку . Для удобства я буду переименовывать слои , если вы не помните или незнаете как это сделать , тогда загляните Сюда

С помощью Свободного трансформирования Ctrl+T придайте Перу нужный размер (не забывайте удерживать Shift , что бы не сбить пропорции), поверните и расположите его так что бы при написании текста оно не терялось за рамками картинки (это можно будет подрегулировать когда уже будет написан текст)

В окне Слои создаём Новый слой , на нём мы будем писать Текст .

Выбираем Горизонтальный текст-маска , шрифт и размер

Кликаем на картинку и пишем



Жмём на инструмент Заливка

И заливаем нужным цветом , Ctrl+D - снять выделение .



Смотрим на надпись , представляем как будет писаться текст и примерно считаем сколько раз надо скопировать слой с текстом , если в процессе вам не хватит слоёв или окажутся лишние , то всегда можно последний слой скопировать ещё несколько раз или удалить лишние слои .
Я насчитала у себя 18 слоёв

Стоя на слое Текст жмём Ctrl+J  и копируем слои необходимое количество раз
Далее встали на слой Перо , зажали левую кнопку мыши и перетащили этот слой поверх всех слоёв .

Инструментом Перемещение установим Перо на начало текста

На время забудем про слой Перо и будем работать со слоями Текст .
Стоим на слое Текст . Активируем Ластик - жёсткость 100 % , размер - меняем по мере необходимости и удаляем часть текста , оставляя только первый отрезок буквы .

Переходим на слой Текст 2 , на предыдущем слое глазик - выкл. И снова стираем всё лишнее , оставляя уже первый и второй отрезок буквы .

Таким образом проходим по всем слоям с Текстом , удаляя лишнее и прибавляя на каждом слое по одному отрезку .
Вот так выглядит последний слой с Текстом

А теперь самое важное , будем собирать анимацию .
Активирован инструмент Перемещение .
Всегда стоим на слое Перо (горит синим цветом) - глазик вкл. всегда
Слой Картинка - глазик вкл. всегд .

1 кадр - слой Перо и слой Картинка (Перо стоит в начале текста)
2 кадр - слой Перо , слой Картинка и слой Текст
На этом кадре перемещаем Перо (не забудьте всегда активный слой Перо , меняем видимость только глазиков и перемещаем на каждом слое Перо)

3 кадр - слой Перо , слой Картинка и слой Текст 2
И снова передвигаем Перо

4 кадр - слой Перо , слой Картинка и слой Текст 3
И снова передвигаем Перо

5 кадр - слой Перо , слой Картинка и слой Текст 4
И снова передвигаем Перо

Теперь внимание : Переход на следующую букву .
6 кадр - слой Перо , слой Картинка и слой Текст 5
Передвигаем Перо на начало следующей буквы

Не меняя кадра вернём видимость передыдущему слою , т.е. слой 4 - глазик вкл. , слой 5 - глазик выкл. Таким образом Перо у нас стоит чётко на начале следующей буквы .

7 кадр - слой Перо , слой Картинка и слой Текст 5
И снова передвигаем Перо

8 кадр - слой Перо , слой Картинка и слой Текст 6
И снова передвигаем Перо

На 9 кадре выполняем переход на следующую букву , смотрите выше если забыли или не поняли как это делается . Дальше я думаю справитесь сами .

У меня получилось 28 кадров , вот так выглядит последний

Теперь зададим время передвижения кадров : последний - 3 сек., остальные по 0,1 сек.
Жмём на Запуск воспроизведения анимации


Если всё устраивает сохраняем : Файл-Сохранить для Web в формате GIF .




Уроки от Елены

Сообщество : Самая Лучшая Коллекция Анимационных Картинок и Подробные Уроки Фотошопа