Простая текстовая анимация
В этом уроке по работе с фотошопом будет показан способ создания простой текстовой анимации, которую можно с успехом использовать на сайте.
Подобные публикации:
- Плавная анимация текста в фотошопе
{smooth-scroll-top}
Создадим новый документ произвольного размера - Ctrl+N (размер с учётом размещения анимации на сайте). Выберем инструмент "Текст" с подходящими параметрами и напишем какое-нибудь слово.
В палитре "Слои" сейчас два слоя.
Создадим новый слой, для чего щёлкнем по второй справа иконке в палитре "Слои".
В качестве цвета переднего плана установим цвет, которым будет отображаться тест (я выбрал красный). Нажмём сочетание клавиш Alt+Backspace.
Верхний слой зальётся цветом переднего плана (красным).
Правой кнопкой мыши щёлкаем по красному слою и в появившемся списке выбираем "Создать обтравочную маску".
Вот так сейчас выглядит палитра "Слои".
Надпись стала красного цвета.
Сделаем активным текстовый слой и щёлкнем по второй иконке слева в палитре "Слои". В раскрывшемся списке выбираем "Обводка".
Во вкладке "Обводка" я изменил цвет обводки на чёрный и уменьшил её размер до 2 пикселов.
Дальше я сделал активной вкладку "Наложение градиента", выбрал градиент "От основного к прозрачному", поставил галочку "Инверсия" и немного "поигрался" параметрами "Режим", "Непрозрачность", "Масштаб". Подберите параметры, которые Вам подходят.
На вкладке "Тень" подрегулируйте параметры тени.
Вот что у меня получилось.
Откроем палитру "Анимация" - "Окно - Анимация".
В палитре "Анимация" мы увидим только один слой.
Создадим копию выделенного кадра, для чего нажмём на вторую справа иконку.
Делаем активным первый кадр в палитре "Анимация". Включаем видимость всех слоёв в палитре "Слои".
Делаем активным второй кадр в палитре "Анимация" и убираем видимость верхнего слоя.
Удерживая клавишу Ctrl, щёлкаем по первому кадру (выделяем оба кадра) и щёлкаем по чёрной стрелочке в поле "0 сек". В появившемся списке выбираем время задержки 0,5 сек.
Сделаем анимацию более красивой. Делаем активным второй кадр в палитре "Анимация" и в палитре "Слои" - активным средний слой. Правой кнопкой мыши щёлкаем по этому слою и выбираем "Жёсткое сглаживание".
Делаем всё то же самое, только при активном первом кадре в палитре "Анимация".
Наша анимация готова. Нажимаем "Play" и любуемся полученным результатом. Сохраняем полученный результат - "Файл - Сохранить для Web и устройств...".
В появившемся окне выбираем формат файла "Gif", 256 цветов. Смотрим, что оригинал у нас "весил" 87,9 Кб, а оптимизированный - 9,62 Кб. Прекрасный результат. Нажимаем "Да".
В окне сохранения документа даём имя анимации, место сохранения файла и тип файла (Gif), нажимаем "Сохранить".
Для того чтобы анимацию в дальнейшем можно было изменить, сохраним наш файл ещё в формате PSD - "Файл - Сохранить как..."
Опять даём название файлу и определяем место сохранения файла и выбираем тип файла PSD.
Появляется окно "Параметры формата Photoshop", нажимаем "Да". Наш файл сохранён в двух форматах - Gif и PSD.
{smooth-scroll-top}