Простая текстовая анимация
В этом уроке по работе с фотошопом будет показан способ создания простой текстовой анимации, которую можно с успехом использовать на сайте.
Подобные публикации:
- Плавная анимация текста в фотошопе
{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}
Временно закрыто комментирование для гостей, нужна обязательная регистрация, ввиду засилья спамботов.
зарегистрируйтесь на сайте, что бы оставлять комментарии!
Комментарии
Попробуйте сделать так, как описано здесь:
www.photoshopsunduchok.ru/animaciy/213-web.html
Дальше я сделал активной вкладку "Наложение градиента", выбрал градиент "От основного к прозрачному", поставил галочку "Инверсия" и немного "поигрался" параметрами "Режим", "Непрозрачность", "Масштаб". Подберите параметры, которые Вам подходят.
можешь в скринах объяснить?)) просто не так понятно активной вкладку наложение градиента((
там есть только: HTML AND IMAGES, ONLY IMAGES, ONLY HTML... ПОМОГИТЕ, ЧТО НАДО СДЕЛАТЬ, ЧТОБЫ ПРАВИЛЬНО СОХРАНИТЬ...
после того как делаю невидимым 1 слой(красный), то во 2 кадре остаётся всё без изменений( не переключается на изначальный цвет текста)
админ подскажи в чём проблема?
ставлю на аватарку а она не мигает как я сделал почему помогите плиз заранее спасибо :sad: :sad: :cheer:
www.photoshopsunduchok.ru/animaciy/213-web.html
Можно ли как-то по-другому сохранить ?
АААА :sad:
Уважаемый администратор,вы не могли бы выложить урок тоже по созданию анимации,только с другим эффектом.Не знаю даже,возможен ли другой эффект анимации,просто у меня друг делал всплывающий текст в Adobe Photosop CS3.Если это возможно,выложите пожалуйста.Буду очень благодарна!!!Спасибо .
А вообще полученный файл необходимо сохранять через "Файл - Сохранить для Web и устройств..." и дальше, как описано в уроке выше.