БЕСПЛАТНЫЕ УРОКИ. Компьютерная графика

Photoshop. Как создать самописный текст

Иногда возникает необходимость на страницу сайта установить анимированную картинку в виде самописного текста нужного содержания. Анимация текста, графики, схем, диаграмм и других объектов подчеркивает различные аспекты излагаемых материалов и делает Web-страницу более интересной и привлекательной.

В этом уроке я расскажу, как создать анимационный текст с помощью графического редактора Photoshop. В результате мы должна получить примерно такую картинку:

самописный текст

  1. Сначала нужно написать текст

    пишем текст
  2. Создаем еще один прозрачный слой помещаем туда рисунок ручки

    Создаем еще один прозрачный слой помещаем туда рисунок ручки
  3. Отключаем фон и растрируем текстовый слой 

    Отключаем фон и растрируем текстовый слой
  4. Копируем каждую букву в отдельный слой

    Копируем каждую букву в отдельный слой
  5. Отключаем видимость слоев всех букв кроме первой

    Отключаем видимость слоев всех букв кроме первой
  6. Разрезаем букву на части примерно как на рисунке:

    Разрезаем букву на части
    и помещает каждый кусок буквы в отдельный слой.

  7. Включаем панель анимации: Окна -> Рабочая среда -> Движение.

    панель анимации
  8. Отключаем видимость всех частей буквы, кроме той части, с которой начнется рисование буквы. Перемещаем ручку так, что бы ее перо было в конце видимой части буквы:

    Перемещаем ручку
  9. Добавляем новый кадр на панели анимации щелчком по копке «Создать копию кадра»

    Добавляем новый кадр
  10. Включаем видимость следующего фрагмента буквы и перемещаем ручку к концу этого фрагмента:

    видимость следующего фрагмента буквы
  11. Добавляем новый кадр
  12. И так далее, пока не появится вся буква полностью.
  13. Вышеперечисленные действия необходимо проделать с каждой буквой текста.
  14. В результате получится примерно такая картина:

    в результате получится
  15. Выделите все кадры вашей анимации и установите таймер на нужный вам интервал времени и посмотрите как будет работать ваша анимация. Для просмотра щелкните по кнопке «Воспроизвести»:

    кнопка Воспроизвести
  16. Последнее, что нужно сделать – сохранить полученную анимацию так: Файл-> Сохранить для Web-устройств. Тут можно поэкспериментировать с качеством gif-файла.

Вставляем полученную картинку на страницу сайта и любуемся своим произведением.

Добавить комментарий
  • Комментарии не найдены