Создаём анимированный текст в Фотошоп. Фотошоп анимация текста


Создаём анимированный текст в Фотошоп

​Photoshop - потрясающий инструмент для создания 2D-иллюстраций. Но с недавних пор в нем также появилась поддержка 3D. В этом уроке мы воспользуемся возможностями Photoshop CS6 и создадим анимированный 3D-текст без использования дополнительных программ.

Создаём анимированный текст в Фотошоп

Для урока нам понадобятся:

  • аудиотрэк,
  • шрифт.

Архив

Шаг  1. Создаем новый документ

Для начала нам нужно определиться с размером документа, на котором мы будем работать. Финальный результат будет визуализироваться в высоком качестве, поэтому выбирайте небольшой размер, чтобы сильно не нагружать компьютер и сократить время визуализации.

Теперь мы должны перейти на панель Timeline (Временная шкала). В Photoshop CS6 она находится в самой нижней части программы.

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

Шаг 2. Текстовый слой

Теперь добавим текст. Для этого воспользуемся инструментом Text tool (Текст) (Т).

Пишем слово "tuts".

Используем шрифт Blippo. Убедитесь, что вы установили версию Blk BT. В Photoshop из выпадающего меню выбираем новый шрифт, чтобы изменить внешний вид текста.

Получаем вот такой результат.

Теперь, чтобы превратить текст в 3D-слой, переходим в меню 3D - New 3D Extrusion from Selected Layer (3D - Новая 3D-экструзия из выделенного слоя).

Photoshop предложит нам сменить рабочую среду для работы с 3D. Соглашаемся, так как дальнейшие действия будут проходить именно в ней.

Вуаля! Мы в 3D-среде и наш текст готов к работе.

Рядом с панелью слоев появилась новая закладка 3D, которая показывает все 3D-объекты нашей сцены.

Текстовый слой был преобразован в 3D-объект, который был поделен на несколько разделов, каждый из которых содержит в себе свой собственный материал. Выделяем все материалы из списка, как показано ниже.

Переходим на панель свойств и выбираем простой гладкий материал, указанный ниже. Затем кликаем по цветовому индикатору рядом с Diffuse (Рассеивание), чтобы выбрать цвет.

Выбираем белый цвет.

Также изменим цвет Ambient (Глобальный).

Выбираем светло-серый цвет, как показано ниже.

Мы хотим, чтобы текст лежал на плоскости, поэтому нам нужно его повернуть. На панели 3D выбираем объект "tuts".

И возвращаемся к панели свойств. Поворачиваем объект на 90 градусов по оси Х, чтобы его задняя часть лежала на плоскости.

Теперь мы должны уменьшить толщину экструзии текста. На панели свойств выбираем сетку и уменьшаем параметр Extrusion Depth (Глубина экструзии) до 48.

Закончив, переходим 3D - Snap Object to Ground Plane (3D - Привязать объект к плоскости основания), чтобы привязать текст к плоскости.

Шаг 3. Плоскость

Мы уже упоминали плоскость, но так и не создали под нее отдельный объект.

Активируем Rectangular tool (Прямоугольник) (U) и создаем прямоугольник по размеру рабочего документа.

Чтобы внедрить новый слой в наш 3D-мир, сперва его нужно преобразовать в 3D-объект. Переходим 3D - New Mesh from Layer - Depth Map to - Plane (3D - Новая сетка из слоя - Карта глубины - Плоскость).

В результате у нас появился новый 3D-слой, который содержит в себе отдельную сцену. Мы должны сделать так, чтобы плоскость и текст находились на одной сцене. Для этого выделяем оба слоя.

И переходим 3D - Merge 3D Layers (3D - Объединить 3D-слои).

Теперь, если перейти на панель 3D, то мы увидим там объект "tuts" и новый прямоугольник.

В то же время, на панели слоев находится только один слой, который содержит в себе всю 3D-сцену.

Чтобы изменить вид сцены, подкорректируем некоторые координаты.

В результате мы должны получить вид сверху.

Мы видим, что плоскость имеет темно-серый цвет (или такой, который вы выбрали, создавая ее). Нам нужно изменить его с помощью 3D-материала. Выбираем один из элементов текста.

Создаем новый материал.

Кликаем по иконке шестеренки и выбираем New Material (Новый материал).

В появившемся диалоговом окне пишем название материала и жмем OK.

Теперь переходим к материалу прямоугольной плоскости.

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

Шаг 4. Свет

Чтобы добиться желаемого результата, нам необходимо создать несколько источников света. Для начала выбираем тот, который уже есть в нашей сцене.

На сцене должны появиться сферы, с помощью которых мы можем управлять источником света. Хватаем маленькую сферу и поворачиваем, как показано ниже.

Направление света также можно настроить на панели свойств с помощью координат.

Нам нужно, чтобы тень падала по диагонали: из верхнего правого угла в левый нижний.

Теперь создадим новый источник света. Внизу 3D-панели есть кнопка, с помощью которой можно добавить свет. Выбираем New Infinite Light (Новый бесконечный свет).

Новый свет появится точно по центру сцены.

Настраиваем координаты нового источника света, как показано ниже.

Также корректируем некоторые параметры света.

Выбираем первый источник света, который уже был в нашей сцене.

Корректируем его параметры.

Создаем еще два дополнительных источника света.

Давайте изменим цвет для света №3. Кликаем по цветовому прямоугольнику.

Выбираем светло-красный цвет.

Затем настраиваем Intensity (Интенсивность) и Softness (Сглаживание), как показано ниже.

Переходим к свету №4 и также меняем его цвет.

В этот раз выбираем светло-синий, как показано ниже.

И корректируем его параметры.

Пока у нас активен свет №4, давайте изменим его координаты, чтобы он располагался напротив света №1.

Выбираем свет №3.

И меняем его координаты.

ОК, все источники света созданы и настроены. Свет №1 направлен из верхнего правого угла и дает нам основную длинную тень.

Свет №2, который уменьшает интенсивность света №1, направлен под большим углом из правой стороны и дает нам мягкую атмосферную тень вокруг текста.

Свет №3 заполняет всю сцену и имеет мягкую розоватую тонировку.

И, наконец, свет №4, который имеет мягкую синюю тонировку, направлен из нижнего левого угла. Теперь наша сцена освещена и готова к следующему шагу.

Шаг 5. Сглаживаем края

Давайте немного модифицируем текст, чтобы сгладить его края. На 3D-панели выделяем текстовый объект, как показано ниже.

Вверху, на панели свойств, кликаем по иконке Cap (Капитель) и вводим следующие параметры.

Кликаем по кнопке Contour (Контур) и в выпадающем меню выбираем круглый контур.

Результат уже виден на тексте.

Делаем быструю визуализацию и видим, что результат нас устраивает.

Шаг 6. Анимация

Теперь наша сцена готова к анимации. Открываем Timeline (Временная шкала) и жмем по кнопке в центре Create Video Timeline (Создать временную шкалу для видео).

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

В списке мы видим объекты, которые могут быть анимированы. Для начала выбираем камеру.

По умолчанию временная шкала заполняется полностью. Хватаем ползунок, который указан стрелкой.

И тянем его примерно к отметке 20f.

Теперь, когда мы установили конец нашей анимации, кликаем по маленькой иконке с секундомером. На активной линии появится желтый ромб. Это значит, что мы создали ключевой кадр.

Перетаскиваем ключевой кадр в конец анимации.

Для поворота камеры существует две опции. Вы можете воспользоваться 3D-координатами в виде стрелок (оси x, y и z) в нижней левой части сцены. Просто кликаем по координатам и, удерживая кнопку нажатой, двигаем мышкой, чтобы изменить положение камеры.

Или можете изменить значение координат на панели свойств. Второй способ подходит для более точной настройки положения камеры.

Также, при активации Move tool (Перемещение) (V), на верхней панели появляются дополнительные опции специально для 3D.

Чтобы двигать объекты с помощью Move tool (Перемещение) (V), кликните по объекту, в результате появятся специальные стрелки. Но нам нужно изменить только позицию камеры, поэтому используйте один их двух вышеописанных способов и расположите камеру так, как показано ниже на скриншоте.

Закончив, снова кликаем по секундомеру, чтобы создать первый ключевой кадр.

Затем жмем кнопку Play, чтобы воспроизвести анимацию. Если результат вас не устраивает, можете откорректировать начало и конец ключевых кадров.

Нажав кнопку Play, вы сможете покадрово посмотреть вашу анимацию с помощью специального ползунка, расположить его в конец или начало ключевого кадра, а также выбрать позицию на временной шкале, в которую хотите добавить ключевой кадр.

Шаг 7. Корректирующие слои и их анимация

Далее мы будем объединять анимацию 3D-сцены с корректирующими слоями, которые мы тоже будем анимировать. Для начала создадим слой Photo Filter (Фото-фильтр).

Выбираем Warming Filter (Теплый фильтр) и устанавливаем Density (Плотность) на 14%.

В анимации появится новый слой, который содержит фото-фильтр. Создадим ключевой кадр для Opacity (Непрозрачность) примерно на отметке 02:00f.

На этом ключевом кадре мы уменьшим непрозрачность слоя с фото-фильтром до 0%.

Затем переходим в конец анимации и создаем еще один ключевой кадр.

Увеличиваем непрозрачность фото-фильтра на этом ключевом кадре до 30%.

Выше создаем еще один корректирующий слой Photo Filter (Фото-фильтр).

В этот раз выбираем Cooling Filter (Холодный фильтр) и устанавливаем Density (Плотность) на 25%.

Переходим в начало анимации и создаем ключевой кадр для Opacity (Непрозрачность).

Убедитесь, что для этого ключевого кадра непрозрачность второго фото-фильтра установлена на 100%.

Примерно на отметке 03:00f создаем второй ключевой кадр.

Здесь уменьшаем непрозрачность до 0%.

Выше создаем новый корректирующий слой Levels (Уровни).

Настраиваем его параметры, как показано ниже.

Переходим к Opacity (Непрозрачность) на временной шкале и в начале анимации создаем ключевой кадр.

Убедитесь, что для этого кадра непрозрачность корректирующего слоя установлена на 100%.

Добавляем следующий ключевой кадр, как показано ниже.

И устанавливаем непрозрачность на 0%.

Выше создаем новый пустой слой.

Активируем Paint Bucket tool (Заливка) (G) и заливаем этот слой черным цветом.

Затем переходим Filter - Render - Lens Flare (Фильтр - Рендеринг - Блик).

Корректируем блик, как показано ниже.

Устанавливаем режим смешивания слоя на Screen (Осветление).

Возвращаемся на временную панель, создаем новый ключевой кадр примерно на отметке 01:00f.

Затем переходим к отметке 02:00f и создаем еще 5 ключевых кадров. Не нужно стараться делать одинаковое расстояние между ними.

Непрозрачность первых двух кадров оставьте на 100%. Переходим к третьему.

Устанавливаем непрозрачность на третьем ключевом кадре примерно на 23%.

Переходим к четвертому.

Устанавливаем его непрозрачность на 73%.

И переходим к пятому кадру.

Устанавливаем непрозрачность на 0%. Теперь мы можем нажать кнопку Play и посмотреть готовый результат. Если вы довольны, переходим к следующему шагу.

Шаг 8. Визуализируем и добавляем аудио

Простой шаг, в котором мы должны подготовить анимацию для визуализации. Жмем на маленькую иконку в виде стрелки.

В результате появится диалоговое окно с параметрами. Для начала пишем название видео и выбираем папку для сохранения. Затем настраиваем параметры кодировщика, как показано ниже. Далее выбираем диапазон визуализации и качество. Я сделал несколько тестовых визуализаций низкого качества, чтобы проверить правильность установленных параметров. Это заняло несколько минут. Финальный рендеринг в высоком качестве займет больше времени, в зависимости от мощности вашего компьютера и размера рабочего документа.

Дополнительно я хочу показать вам, как добавить в клип аудиодорожку.

Перемещаемся в конец временной шкалы и жмем кнопку с плюсом.

Выбираем аудиофайл и жмем Open (Открыть).

Аудиотрэк может значительно увеличить длительность вашей анимации.

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

Устанавливаем ползунок в конце анимации.

Жмем на кнопку с ножницами, чтобы обрезать аудио.

Удаляем лишнюю часть.

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

Создаём анимированный текст в Фотошоп

Вот мы и закончили создание простой 3D-анимации в Photoshop CS6. Конечно, для более серьезных проектов лучше использовать специальное программное обеспечение, например, After Effects или Nuke.

Автор: Ed Lopez.

Переводчик: Максим Енин.

photoshop-master.ru

Урок фотошопа по анимации текста для начинающих.

Урок фотошопа по анимации текста для начинающих.

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

 

Как сделать анимационный текст или бегущую строку?

 

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

 

Проделаем все на примере.

 

Определимся в первую очередь с размерами анимационной картинки-кадра. Она должна быть небольшого размера и иметь разрешение "72" пикселя на дюйм.

 

Выбираем команду "File > New" ( Файл > Новый) и устанавливаем ширину (Width) "450 pixels", высоту (Height) "100 pixels", разрешение (Resolution) "72 pixels/inch", "Color Mode" должен быть "RGB Color" и цвет фона "белый" (Background Contents - White).

 

На готовый шаблон переносим любой рисунок или фото, которое и будем превращать в красивую анимационную картинку с надписью.

 

Образец анимационной картинки в уроке фотошопа для начинающих

 

На палитре слоев видим три слоя.

 

Палитра слоев в уроке фотошопа для начинающих

 

Ставим курсор на активный слой с текстом. Нажимаем правую кнопу мыши и из контекстного меню выбираем пункт "Rasterize Layer" (Растеризация слоя).

 

В обозначении слоя буква "Т" пропадает, написанный текст превращается в рисунок. Теперь можно скопировать каждую букву на отдельный слой.

 

Выделение области в уроке фотошопа для начинающих

 

Инструментом "Polyggonal Lasso Tool" (Инструмент "Прямоугольное лассо") делаем выделенную область произвольной формы вокруг первой буквы.

 

Копируем выделенный фрагмент командой "Edit > Copy" (Редактирование> Скопировать) и вставляем копию командой "Edit > Paste" (Редактирование> Вклеить). На палитре слоев появится новый слой с копией первой буквы.

 

Делаем активным слой с исходным текстом, выделяем вторую букву. Копируем выделенный фрагмент и вставляем на новый слой.

 

Аналогично делаем копии для других букв. Работа кропотливая и требует внимания. Чем сложнее анимация, тем большее количество кадров должно быть готово.

 

Кадры анимации в уроке фотошопа для начинающих

 

Слои с буквами готовы, теперь можно переходить к анимации.

 

Нажимаем кнопку "Edit in ImageReady" и наш многослойный файл оказывается на рабочем столе программы "ImageReady".

 

Внизу в окошке анимации отражается первый кадр.

 

Анимация будет состоять из восьми кадров, которые добавляем нажатием на кнопочку "Duplicates current frame".

 

Добавление кадров анимации в уроке фотошопа для начинающих

 

Теперь займемся анимацией.

 

В кадре под номером один должен быть виден фон и первая буква.На палитре слоев отключаем слои с другими буквами (закрываем "глазик").

 

В кадре под номером два должен быть виден фон и две буквы.На палитре слоев дополнительно включаем слой со второй буквой (открываем "глазик"). И так далее. На последнем кадре только фон (слои с буквами отключены).

 

Выставляем время показа каждого кадра и жмем кнопочку "Plays \ stops animation". Анимационная картинка оживает.

 

Готовый файл в уроке фотошопа для начинающих

 

Сохраняем готовый файл командой "File > Save Optimized". Файл, будет иметь расширение "gif".

 

Если какие-то моменты в описании не понятны, вернитесь к предыдущему уроку и сделайте простую анимацию на два кадра.

 

В уроках фотошопа для начинающих показан принцип работы по созданию анимашки. Практическое выполнение простых работ позволит Вам сразу получить результат и понять технологию процесса.

 

Даже простая анимашка сделанная самостоятельно, для Вас будет гораздо милее и интереснее самой навороченной картинки. Дерзайте.

www.adobemaster.ru

PhotoshopSunduchok - Анимация текста в фотошопе

 

(Анимация с появлением и исчезновением текста)

 В этом уроке создадим интересную анимацию текста в фотошопе – эффект с появлением и исчезновением текста.

 

Создаём новый документ (Ctrl + N) размерами 1000х300 пикс.

 

 

Создадим дубликат слоя (Ctrl + J). Установим основные цвета: цвет заливки – чёрный, цвет фона - #0512bd (ну или что-либо подобное, на Ваш вкус).

 

 

Выбираем инструмент «Градиент»

и протягиваем вдоль документа, зажав клавишу Shift.

 

 

Переходим в «Меню > Фильтр > Галерея фильтров > Мокрая бумага» и устанавливаем параметры:

Длина волокна -5; Яркость – 55; Контрастность -73.

  

 

 

Выберите инструмент «Горизонтальный текст»(T) и установите шрифт «Arial Black» размером ~15 пикс. Цвет установите чуть светлее, чем в Градиенте - #4863d8.

 

 

И напишите любое слово:

 

 

Объедините все слои (Меню > Слой > Объединить слои). Скопируйте этот слой и назовите его «1». Перейдите в Галерею фильтров > Мокрая бумага и выставите параметры:

Длина волокна - 50; Яркость – 0; Контрастность – 73.

Это будет первый кадр анимации

  

 

Скопируйте слой «Слой 0» (Ctrl+J) и расположите копию выше всех слоёв. Назовите этот слой «2» и перейдите в Меню –

Фильтр – Галерея фильтров – Мокрая бумага. Параметры:

Длина волокна -50; Яркость – 20; Контрастность – 73.

 

 

Продолжайте создавать копии слоя «Слой 0», перемещая его каждый раз на самый верх  («1», «2», «3», «4» и т.д. до слоя «10»).Применяйте к каждому слою фильтр «Мокрая бумага», изменяя только параметры. Значения параметров по слоям:

 

Слой «3»: Длина волокна – 50, Яркость – 30, Контрастность-73

  

 

Слой «4»:Длина волокна-50, Яркость-40, Контрастность-73

 

 

Слой «5»:Длина волокна-50, Яркость-50, Контрастност-73.

  

 

Слой «6» (здесь начинаем уменьшать длину волокон, остальные параметры не трогаем): Длина волокон-40.

 

 

Слой «7»: Длина волокон -30.

 

 

Слой «8»: Длина волокон – 20.

 

 

Слой «9»: Длина волокна – 10.

 

 

Создайте последнюю копию «Слой 0» - «Слой 10» выше всех слоёв. Можно оставить её в том же виде, либо добавить Стиль слоя для нашего текста. Для этого необходимо выделить все наши буквы – выбираем инструмент «Волшебная палочка» с параметрами, как на фото ниже, и щёлкните по каждой букве:

 

 

Применяем стиль слоя с параметрами:

  

 

 

 

 

Удалите самый нижний слой «Слой 0».

Перейдите в «меню > Окно > Шкала времени (Анимация)». Выделите все слои  и, нажав на значок в правом верхнем углу Шкалы времени, выберете «Создать кадры из слоёв»

 

 

Нажмите ещё раз на этот же значок и выберете «Скопировать кадры», затем «Вставить кадры». В появившемся окне «Вклеить кадры» отметьте «Вклеить после выделенной области»:

  

 

Затем выбираете «Обратный порядок кадров». Вот примерный порядок действий:

 

 

Выделяете все кадры и выставляете время отображения кадра

0,1 или 0,2 сек., кроме 10-го кадра – ему ставим  0,5сек.

Нажимаем на первый кадр – должен быть открыт слой «1», нажимаем на второй – открыты слои «1» и «2» и т.д.

В итоге определяем режим проигрывания «Постоянно», проверяем результат

 

 

Для того, чтобы сохранить нашу работу, переходим «Меню Файл > Экспортировать > Сохранить для WEB» (старых версиях Фотошопа просто – Сохранить для WEB).

 

 

В открывшемся окне выбираете необходимые параметры (обязательно формат gif). Если надо, уменьшаете размер и нажимаете «Сохранить».

  

Вот наш финальный результат:

На этом урок закончен. Мы рассмотрели вопрос создания интересной анимации текста в фотошопе – эффект с появлением и исчезновением текста.

 

Удачи Вам в Вашем творчестве.

Автор – Олег Лодянов (kinoLOG)

 

Скачать урок в формате PDF и исходник к нему:

 

Чтобы получить интересные уроки на свой адрес,

введите свои данные в форму подписки ниже:

 

 

www.photoshopsunduchok.ru

PhotoshopSunduchok - Анимированный текст в фотошопе

в фотошопе

В этом уроке я расскажу вам, как делать анимированный текст в фотошопе с помощью Шкалы времени.Я сделала самую простую анимированную надпись, чтобы вам был понятен сам принцип работы.

Вот какая надпись «С Рождеством!» у меня получилась:

0

 Интересна тема анимации?

Смотреть бесплатный видеокурс по анимации

Смотреть бесплатный вебинар по анимации

 

В работе я использовала фон и кисть Звёзды, которую легко скачать в интернете.

Итак, приступим к созданию анимированной надписи.Создадим Новый документ белого цвета CTRL+N и зададим его параметры, как указано в окне:

1

2

Теперь я выполню команду Файл-Поместить и у меня открывается Проводник моего компьютера, где я нахожу папку с фоном и нажимаю ОК.

3

4

В результате фон сразу появляется на документе вместе с рамкой Трансформации.Нужно с помощью рамки Трансформации растянуть фон на всё поле документа и кликнуть дважды внутри рамки левой кнопкой мыши, после чего трансформирование применится.

5

6

7

Далее я активизирую инструмент Текст 8 и устанавливаю его параметры: выбираю шрифт, цвет и размер шрифта:

9

Теперь создаю новый слой CTRL+SHIFT+N и пишу на нём текст:

10

11

Далее создаю новый слой CNTRL+SHIFT+N и активизирую инструмент Кисть12 и выбираю в палитре кистей нужную мне кисть Звёзды и устанавливаю белый цвет:

13

14

Теперь я сделаю отпечатки кисти на надписи. Чтобы звёзды были ярче я буду делать несколько отпечатков звезды на одном месте:

15

16

Теперь опять создадим новый слой и нарисуем ещё звёзды, но в других частях текста:

17

Теперь опять создадим новый слой и нарисуем ещё звёзды так, чтобы они не перекрывали звёзды на предыдущих слоях:

18

19

Теперь будем создавать анимацию.

Выполним команду Окно-Шкала времени.В результате на нижней панели откроется Шкала времени:

20

21

Теперь нужно нажать на центральную длинную кнопку Создать временную шкалу для видео и чтобы открыть панель покадровой анимации нажмём на иконку в нижнем левом углу в виде трёх квадратиков:

22

23

В палитре Слои нужно отключить верхние слои и оставить включённый только первый слой со звёздами:

24

Таким образом у нас получился первый ключевой кадр:

25

Создадим новый кадр и щёлкнем по значку Создание копии выделенных кадров26, который находится на Шкале времени.

27

28

Теперь перейдём к палитре Слои и отключим первый слой и включим второй – таким образом у нас образовался второй ключевой кадр, на котором будут находится звёзды второго слоя:

29

Теперь создаём третий ключевой кадр и отключаем второй слой и включаем третий:

30

31

Установим время показа каждого кадра 0,1 сек.:

32

33

Чтобы кадры менялись плавно установим промежуточные кадры, для этого нужно активизировать первый слой и нажать на значок Создание промежуточных кадров 34

35

В открывшемся окне установим Добавить кадров – поставим 2 и поставим опцию Следующий кадр:

36

К первому ключевому кадру добавятся два промежуточных кадра, которые будут под номером 2 и 3:

37

Теперь перейдём ко второму ключевому кадру, который будет под номером 4, а в палитре Слои перейдём на второй слой и повторим операцию:

38

39

Далее перейдём к третьему ключевому кадру, который стал под номером 7 и так же нажмём на значок Создание промежуточных кадров и установим те же параметра за исключением верхнего параметра, где нужно поставить Первый кадр:

40

41

Теперь нажмём на стрелочку параметра Выбор параметра цикла и выберем Постоянно:

42

Теперь нажимаем на стрелочку Запуск воспроизведения анимации:

43

Выполняем команду Файл-Сохранить для Web и сохраняем нашу анимацию в формате GIF.

На этом урок Анимированный текст в фотошопе окончен.Желаю удачи!

 

 

РАСКРЫТЬ ВСЕ СЕКРЕТЫ АНИМАЦИИ

 

www.photoshopsunduchok.ru

Плавная анимация текста в фотошопе

В Интернете размещено очень много красивых анимационных картинок, и многие задаются вопросом как их создать. Ответ очень простой - в фотошопе. В этом уроке по работе с фотошопом мы научимся делать плавную анимацию текста в фотошопе.

Подобные публикации:

{smooth-scroll-top}

Недавно на сайте был опубликован урок "Как сделать в фотошопе светящийся текст", где показывалось, как создать интересный текстовый эффект, который Вы видите на скриншоте ниже. В комментариях к этому уроку задали вопрос: "А можно ли сделать анимацию так, чтобы свечение плавно нарастало, а потом уменьшалось?". Давайте попробуем сделать такую анимацию.

После выполнения урока "Как сделать в фотошопе светящийся текст" в палитре слои образовалось несколько слоёв под названием "PH", "PH (копия 2)", "PH (копия 3)", "PH (копия 4)", "PH (копия 5)", на которых постепенно увеличивается размер свечения вокруг букв. Этот момент мы и будем использовать для создания плавной текстовой анимации.

Откроем палитру "Анимация" - "Окно - Анимация".

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

Для этого кадра снимаем видимость всех слоёв, кроме самого верхнего и самого нижнего (щёлкаем по "глазикам" напротив слоёв и их видимость пропадает).

Щёлкаем по второй справа миниатюре в палитре "Анимация" - создаём второй кадр.

Для этого кадра включаем видимость слоя "PH".

Точно так же, как и описано выше, создаём третий кадр.

Для него включаем видимость слоя "PH (копия) 2".

Создаём четвёртый кадр.

Для него включаем видимость слоя "PH (копия) 3".

Создаём пятый кадр.

Для него включаем видимость слоя "PH (копия) 4".

Создаём шестой кадр.

Для него включаем видимость слоя "PH (копия) 5".

Создаём седьмой кадр.

Выключаем видимость слоя "PH (копия) 5".

Создаём восьмой кадр.

Выключаем видимость слоя "PH (копия) 4".

Создаём девятый кадр.

Выключаем видимость слоя "PH (копия) 3".

Создаём десятый кадр.

Выключаем видимость слоя "PH (копия) 2".

Делаем активным первый кадр. Теперь для плавности перехода нам необходимо создать промежуточные кадры между первым и вторым кадром. Для создания промежуточных кадров щёлкаем по третьей миниатюре справа в палитре "Анимация".

В появившемся окне проставляем цифру "7", остальные параметры оставляем по умолчанию.

Теперь в действие вступает простая арифметика. Один кадр у нас был (первый), добавили 7 промежуточных кадров, всего получилось 8 кадров. Значит следующим делаем активным 9 кадр. И опять нажимаем на иконку создания промежуточных кадров в палитре "Анимация".

Добавляем ещё 7 кадров.

Опять арифметика. Девятый кадр был активным, добавили 7 кадров, получается 16 кадров. Значит, делаем активным 17 кадр. И опять добавляем 7 промежуточных кадров.

Дальше показывать скриншоты создания промежуточных кадров не имеет смысла. Ниже приведена маленькая табличка по созданию промежуточных кадров. После получения 80 кадра останавливаемся. Всё анимация готова. Посмотрите, что у Вас получилось, для этого нажмите на кнопку "Play" (значок треугольника) в палитре "Анимация".

Теперь необходимо правильно сохранить анимацию, чтобы она проигрывалась в программах для просмотра изображений и на сайте. Для этого переходим в "Файл - Сохранить для Web и устройств".

В появившемся окне, прежде всего, выберите формат файла GIF и другие параметры, которые Вы видите на скриншоте ниже. Хочу, чтобы Вы обратили внимание на вкладку "Цвета". Я выбрал таблицу из 8 цветов. Почему? Потому, что на моём изображении фактически три основных цвета - чёрный, серый, жёлтый и несколько переходных цветов. Если у Вас на фото использовано больше цветов, то выбирайте таблицу из 256 цветов. Качество будет значительно выше, но есть и обратная сторона - с увеличением количества цветов возрастает и вес файла.

Вот такая у меня получилась плавная анимация текста в фотошопе.

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

Если Вы не хотите пропустить интересные уроки, информацию о бесплатных видеокурсах и другие новости сайта - подпишитесь на рассылку сайта. Форма для подписки находится ниже.

Кнопка для получения подарка

Скачать урок (437 Кб) в формате PDF можно здесь.

Если у Вас есть желание опубликовать на страницах сайта Ваш результат выполнения урока, то вышлите мне на адрес Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра. Вашу работу и название урока, который Вы использовали при создании своей работы и он обязательно будет опубликован на странице сайта с описанием урока.

Вот интересная работа от Aleks Ra:

Надпись Кино

{smooth-scroll-top}

www.photoshopsunduchok.ru

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

Теперь кликаем инструмент "Текст" (клавиша Т на клавиатуре), выбираем цвет текста (цветной квадратик в верхней панели примерно посередине, потом цвет текста можно будет изменить) и вводим текст. Не беда, если надпись получилась не по размеру или не в нужном месте аватарки. Если зажать клавишу 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.

rugraphics.ru

Создаём текстовую анимацию в Фотошоп

В этом уроке вы узнаете, как создать простую текстовую анимацию в Photoshop.

Шаг 1. Начинаем с создания нового документа размером 1000х300 пикселей. Заливаем его линейным градиентом от цвета #000000 к #00ae0f.

Шаг 2. Применяем Filter - Sketch - Water Paper (Фильтр - Эскиз - Мокрая бумага) с такими параметрами:

Fiber Lenght (Длина волокна) 5Brightness (Яркость) 53Contrast (Контрастность) 73

Шаг 3. Берем Horizontal Type Tool(Горизонтальный текст) (Т), используем шрифт Arial Black, размер 170pt и цвет #00b75a. Пишем что-то подобное:

Шаг 4. Объединяем все слои вместе Layer - Merge Layers (Слой - Объединить слои). Называем новый слой "Оригинал". Дублируем (CTRL+J) его и применяем Filter - Sketch - Water Paper (Фильтр - Эскиз - Мокрая бумага):

Fiber Lenght (Длина волокна) 50Brightness (Яркость) 0Contrast (Контрастность) 73

Переименовываем копию на "1". Этот слой будет первым кадром нашей анимации. Дублируем слой "Оригинал", перемещаем его в самый верх палитры слоев и называем "2". Применяем к нему Filter - Sketch - Water Paper (Фильтр - Эскиз - Мокрая бумага):

Fiber Lenght (Длина волокна) 50Brightness (Яркость) 20Contrast (Контрастность) 73

Дублируем (CTRL+J) слой "Оригинал", перемещаем копию в самый верх панели слоев и называем "3". Применяем Filter - Sketch - Water Paper (Фильтр - Эскиз - Мокрая бумага):

Fiber Lenght (Длина волокна) 50Brightness (Яркость) 30Contrast (Контрастность) 73

Дублируем (CTRL+J) слой "Оригинал", перемещаем копию в самый верх панели слоев и называем "4". Применяем Filter - Sketch - Water Paper (Фильтр - Эскиз - Мокрая бумага):

Fiber Lenght (Длина волокна) 50Brightness (Яркость) 40Contrast (Контрастность) 73

Дублируем (CTRL+J) слой "Оригинал", перемещаем копию в самый верх панели слоев и называем "5". Применяем Filter - Sketch - Water Paper (Фильтр - Эскиз - Мокрая бумага):

Fiber Lenght (Длина волокна) 50Brightness (Яркость) 50Contrast (Контрастность) 73

Теперь мы будем работать только с параметром Fiber Lenght (Длина волокна). Дублируем (CTRL+J) слой "Оригинал", перемещаем копию в самый верх панели слоев и называем "6". Применяем Filter - Sketch - Water Paper (Фильтр - Эскиз - Мокрая бумага):

Fiber Lenght (Длина волокна) 40Brightness (Яркость) 50Contrast (Контрастность) 73

Дублируем (CTRL+J) слой "Оригинал", перемещаем копию в самый верх панели слоев и называем "7". Применяем Filter - Sketch - Water Paper (Фильтр - Эскиз - Мокрая бумага):

Fiber Lenght (Длина волокна) 30Brightness (Яркость) 50Contrast (Контрастность) 73

Дублируем (CTRL+J) слой "Оригинал", перемещаем копию в самый верх панели слоев и называем "8". Применяем Filter - Sketch - Water Paper (Фильтр - Эскиз - Мокрая бумага):

Fiber Lenght (Длина волокна) 20Brightness (Яркость) 50Contrast (Контрастность) 73

Дублируем (CTRL+J) слой "Оригинал", перемещаем копию в самый верх панели слоев и называем "9". Применяем Filter - Sketch - Water Paper (Фильтр - Эскиз - Мокрая бумага):

Fiber Lenght (Длина волокна) 10Brightness (Яркость) 50Contrast (Контрастность) 73

Дублируем (CTRL+J) слой "Оригинал", перемещаем копию в самый верх панели слоев и называем "10".

Дублируем слои 1-9 и располагаем их как на скриншоте ниже.

Шаг 5. Выключаем видимость всех слоев кроме "1". Переходим Window - Animation (Окно - Анимация), чтобы открыть панель анимации. Кликаем на подсвеченную на скриншоте кнопку, чтобы перейти в покадровый режим.

Меняем параметр цикличности на Forever (Бесконечно).

Увеличиваем время отображения десятого кадра анимации на 0.2.

Сохраняем анимацию File - Save for Web And Devices (Файл - Сохранить для веб и устройств). Не забудьте, что формат изображения должен быть .gif

Автор: PhotoshopStar

photoshop-master.ru


Смотрите также