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

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

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.

Теги:

Помощь сайту

Понравился сайт? Уроки оказались полезными? Вы можете поддержать проект, просто если скачаете и установите приложение "Фонарик" для Андроид. Приложение написал автор сайта и рассчитывает в дальнейшем публиковать свои приложения. Фонарик управляет светодиодом вспышки фотокамеры телефона, а также включает подсветку экраном на полной яркости.

Преимущества: гибкие настройки. Вы можете задать в настройках, чтобы фонарик сразу включался при запуске приложения и автоматическое включение таймера при запуске приложения. Настройки позволяют отключить блокировку экрана и блокировку фонарика кнопкой включения телефона. Также вы можете самостоятельно установить время таймера.

Если приложение наберёт популярность, это даст стимул автору на создание новых приложений с учётом пожеланий посетителей сайта.

Установить с Google Play.

Заранее благодарен, Дмитрий.

QR-код для установки:

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

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

Этот материал - продолжение статьи о создании 3D модели планеты Земля, где мы создали 3D-модель планеты, а здесь мы приступим конкретно к созданию...
В этой статье я попытаюсь рассказать об анимации с помощью нового инструмента в Adobe Photoshop CS5, именующийся "Марионеточная деформация" (Puppet...
Данная статья является продолжением урока "Создание стильного анимированного юзербара в Adobe Photosop", но может быть рассмотрена и как отдельный...
Снег анимация Photoshop
В первой части этого урока мы создали снег и анимировали боковые колебания снежинок во время падения вниз. Во второй части мы анимировали...