Анимация текста на аватаре. Бегущий текст.

В этом уроке мы узнаем, как сделать аватарку с анимированным бегущим текстом из обычной картинки.

avat_polotentik.jpg аватар

Открываем в Фотошопе любую исходную картинку. В данном случае возьмём готовую аватарку 150х150 px. Открываем палитру слоёв, если на слое стоит замочек, то двойной клик по нему, затем ОК. Надо сделать так, чтоб текст выезжал не с самого края аватарки, а от некоторого расстояния от правого края, иначе выйдет некрасиво. Для этого воспользуемся инструментом "Прямоугольная область" (клавиша М). Выделим небольшой участок справа, как на рисунке. Кстати, само выделение можно трансформировать и перемещать, кликнув, как указано на рисунке:

Анимация текста на аватарке. Бегущий текст

Разобравшись с положением и размером выделения, жмём клавиши Ctrl+J. Этим действием мы клонировали на новый слой участок картинки, находившийся в зоне выделенной области.

Теперь кликаем инструмент "Текст" (клавиша Т на клавиатуре), выбираем цвет текста (цветной квадратик в верхней панели примерно посередине, потом цвет текста можно будет изменить) и вводим текст. Не беда, если надпись получилась не по размеру или не в нужном месте аватарки. Если зажать клавишу Ctrl, то вокруг текста появится рамка, и, двигая за угол рамки, можно менять размер надписи. А если отвести курсор немного от надписи, то можно менять расположение надписи. Короче, подбираем текст по картинке, затем открываем палитру слоёв (клавиша F7) и, зажав левую клавишу мышки, перетягиваем текстовый слой под слой с участком картинки.

Анимация текста на аватарке. Бегущий текст

Теперь, собственно, сама анимация. Кликаем мышкой по текстовому слою, затем на палитре инструментов выбираем инструмент "Текст" (или клавиша Т) и перетягиваем текст за пределы видимости вправо, предварительно зажав клавиши Ctrl и Shift, чтобы текст переместился точно по горизонтали.

Анимация текста на аватарке. Бегущий текст

Открываем панель анимации.

Анимация текста на аватарке. Бегущий текст

Автоматически сгенерировался первый кадр анимации аватара. Затем генерируем второй кадр, кликнув на кнопку добавления кадра в панели анимации, как показано на рисунке

photoshop-lessons13_5.jpg

Перемещаем текст на конечную точку, как в первом перемещении, только с точностью до наоборот. Должна получиться такая картинка:

Анимация текста на аватарке. Бегущий текст

Затем кликаем по этой кнопке добавления промежуточных кадров, она показана на рисунке сверху стрелочкой(1), появляется новое окошко, добавляем 10 кадров(тут кому как нравится, можно 5 или 20, кликаем на кнопку воспроизведения анимации. Если всё сделано правильно, то должна получиться примерно такая картинка

Анимация текста на аватарке. Бегущий текст

Но получилось как-то не так...

Для начала изменим настройки. Кнопка выбора параметров цикла "всегда или один раз" (1), кнопка времени отображения кадров (2), а если выделить сразу несколько кадров, зажав клавишу Ctrl, то время отображения меняется сразу на всех выделенных кадрах (3).

Анимация текста на аватарке. Бегущий текст

Цикл ставим "всегда", время отображения кадра - 0,05 сек. Время отображения последнего кадра ставим 4 сек. Уже лучше, не правда ли?

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

Выделяем последний кадр на шкале анимации, генерируем ещё один кадр.

Переносим текст за зону видимости влево, как переносили раньше. Ставим промежуточные кадры, время на них изменяем на 0,05 сек. Должно получиться что-то вроде этого:

аватар

А теперь уже можно подобрать настройки времени отображения кадра по своему вкусу.

Вроде бы всё.

Хотя нет, не всё. Кто не в курсе, как сохранять анимацию в Photoshop, рассказываю: вкладка Файл --> Сохранить для веб и устройств и выбрать формат GIF.

Помощь сайту

Понравился сайт? Уроки оказались полезными? Поддержите проект, переведите небольшую сумму на оплату серверов и чашечку кофе автору сайта! Спасибо.
Перейти на страницу помощи

Если Вам понравился материал, скажите свое "спасибо", поделитесь ссылками с друзьями в социальных сетях! Спасибо!

Похожие материалы:

Снег анимация Photoshop
В первой части этого урока мы создали снег и анимировали боковые колебания снежинок во время падения вниз. Во второй части мы анимировали...
Оптимизация анимации файлов GIF
В этом уроке мы внимательно рассмотрим все доступные варианты для преобразования видео в GIF-анимацию, и как оптимизировать размер файла. Формат GIF...
Готовый аватар
Аватар - это важный атрибут для пользователя форума или онлайн-игры. А если этот самый аватар будет анимационным и, самое главное, оригинальным, то...
В Фотошопе версий CS3 и выше видео и GIF-файлы анимации открываются не обычным способом, через Файл --> Открыть, а через Файл --> Импортировать...