Движение огоньков по контуру текста
How to create an animated GIF - CS6
Финальное изображение
Шаг 1
Создайте новый документ (Ctrl+N) размером 800 х 500 пикселей и залейте его любым цветом. Автор работает в цветовом режиме CMYK, для перехода на который нажмите Image > Mode > CMYK Color / Изображение >Режим > CMYK. Выберите Layer > Layer Styles > Gradient Overlay / Слой > Стиль слоя > Наложение градиента и примените следующие параметры:
Style / Стиль: Radial (Радиальный)
Gradient / Градиент: от синего (#54799b) к черному (#000000)
Scaling / Масштаб: 150 %
Шаг 2
Добавьте новый слой (Ctrl+Shift+N) и назовите его «Noise». Возьмите инструмент Paint Bucket Tool / Заливка (G) и залейте новый слой черным цветом (#231f20). Оставаясь на слое «Noise», примените фильтр, пройдя Filter > Noise > Add Noise / Фильтр > Шум > Добавить шум. В появившемся окне установите следующие параметры:
Amount / Эффект: 3%
Distribution / Распределение: Uniform / Равномерная
Уберите галочку с параметра Monochromatic / Монохромный
После выставления параметров кликните по кнопке «ОК».
Шаг 3
Выберите Layer > New Adjustment Layer > Hue/Saturation / Слои > Новый корректирующий слой > Цветовой тон/Насыщенность или нажмите комбинацию клавиш Ctrl+U для того, чтобы открыть окно настроек. В открывшемся окне повысьте значение параметра Saturation/ Насыщенность до +100, а затем нажмите кнопку «ОК».
Установите Blend Mode / Режим наложения слоя на Soft Light / Мягкий свет.
Шаг 4
Выберите инструмент Horizontal Type Tool (T) / Горизонтальный текст и наберите желаемый текст. Кегль текста примерно 200-250 пунктов в зависимости от выбранного Вами шрифта. В данном примере автор использовал логотип сайта 123RF. Кликните по текстовому слою правой кнопкой мышки и выберите команду Create work path / Создать рабочий контур. Отключите видимость текстового слоя, щелкнув по значку глаза слева от иконки слоя.
Создайте новый слой (Ctrl+Shift+N) и назовите его «Text». Перейдите к инструменту Brush Tool / Кисть (В) и выберите жесткую круглую кисть (Hardness - 100%) размером 10-15 пикселей. Размер кисти стоит подобрать так, чтобы при обводке контура букв в следующем действии урока, контуры не пересекались между собой. Перейдите к инструменту Direct Selection Tool / Стрелка (А) и, кликнув по нашему изображению правой кнопкой мышки, выберите команду Stroke Path / Выполнить обводку контура. Нажмите клавишу «Enter» для того, чтобы удалить созданный контур.
Шаг 5
В этом шаге мы придадим нашему тексту светящийся эффект с помощью стиля слоя. Дважды кликните по слою «Text» для того, чтобы открыть окно настроек стиля слоя, и примените следующие параметры:
Bevel & Emboss / Тиснение:
Depth/ Глубина: 105 %
Size / Размер: 4 px
Soften / Смягчение: 1 px
Уберите галочку с параметра Use Global Light / Глобальное освещение
Angle / Угол: 128 градусов
Altitude / Высота: 38 градусов
Gloss Contour / Контур глянца: Half Round / Полукруг
Highlight Mode / Режим подсветки: Color Dodge / Осветление основы; цвет белый (#ffffff), Opacity / Непрозрачность 50%
Shadow Mode / Режим тени: Color Dodge / Осветление основы; цвет белый (#ffffff), Opacity / Непрозрачность 63%
Inner Shadow / Внутренняя тень:
Blend Mode / Режим наложения: Color Dodge / Осветление основы, цвет белый (#ffffff)
Opacity / Непрозрачность - 44%
Уберите галочку с параметра Use Global Light / Глобальное освещение
Angle / Угол: 180 градусов
Distance / Смещение: 1 пиксель
Size / Размер: 7 пикселей
Contour / Контур: Cove-Deep / Глубокая выемка
Inner Glow / Внутреннее свечение:
Blend Mode / Режим наложения: Color Dodge / Осветление основы
Opacity / Непрозрачность - 60%
Цвет – белый (#ffffff)
Source / Источник: Center / Из центра
Size / Размер: 15 пикселей
Contour / Контур: Ring / Кольцо
Color Overlay / Наложение цвета:
Blend Mode / Режим наложения: Color Dodge / Осветление основы
Цвет - #5375b6
Opacity / Непрозрачность - 20%
Outer Glow / Внешнее свечение:
Blend Mode / Режим наложения: Color Dodge / Осветление основы
Opacity / Непрозрачность - 60%
Цвет – белый (#ffffff)
Size / Размер: 48 пикселей
Drop Shadow / Тень:
Opacity / Непрозрачность - 45%
Уберите галочку с параметра Use Global Light / Глобальное освещение
Distance / Смещение: 16 пикселей
Size / Размер: 13 пикселей
Шаг 6
Теперь убедитесь в том, что находитесь на слое «Text» и понизьте значение параметра Fill / Заливка слоя до 0%.
Шаг 7
Создайте дубликат слоя «Text», нажав комбинацию клавиш Ctrl+J. Дважды кликните по копии слоя для того, чтобы открыть окно настроек стиля слоя. В появившемся окне уберите галочки с параметров Bevel & Emboss / Тиснение, Color Overlay / Наложение цвета, Outer Glow / Внешнее свечение и Drop Shadow / Тень. Измените и примените настройки двух оставшихся параметров Inner Shadow / Внутренняя тень и Inner Glow / Внутреннее свечение так, как показано ниже.
Inner Shadow / Внутренняя тень:
Opacity / Непрозрачность - 43%
Distance / Смещение: 5 пикселей
Size / Размер: 5 пикселей
Inner Glow / Внутреннее свечение
Opacity / Непрозрачность - 34%
Size / Размер – 25 пикселей
Contour / Контур: Cone / Конус
Range / Диапазон: 59%
Шаг 8
Ниже показан результат, который Вы должны получить после настройки стиля слоя.
Шаг 9
В этом шаге мы создадим движущиеся огоньки света. Создайте поверх всех слоев новые слои, количество которых должно быть равно количеству букв в вашем документе. В примере автора пять символов (буквы и цифры), поэтому он создал пять новых слоев. Переименуйте каждый слой названием букв, из которых состоит Ваше слово. В примере автора это слои 1, 2, 3, r и f. Сгруппируйте все новые слои, предварительно выделив их (Ctrl+клик по каждому слою), затем нажав комбинацию клавиш Ctrl+G. Измените название созданной группы на Light Spots. Установите Blend Mode/Режим наложения группы на Color Dodge/Осветление основы.
Встаньте на первый слой, соответствующий первой букве, в данном случае - это слой 1. Понизьте Opacity/Непрозрачность слоя до 95%. Используйте инструмент Brush Tool / Кисть (В), выберите мягкую кисть (Hardness / Жесткость – 0%) примерным размером 25-35 пикселей и белым цветом (#ffffff) поставьте отпечаток кисти в любом месте контура первой буквы. Повторите вышеописанные действия для оставшихся букв.
Шаг 10
Теперь выберите Window > Timeline / Окно > Шкала времени. Первое, что Вы заметите – это то, что все имеющиеся слои уже находятся на шкале времени. Далее будет описан алгоритм действий для первого слоя (у автора слой 1), который (алгоритм) в дальнейшем нужно будет повторить для каждого слоя с буквами.
Выберите слой 1 и убедитесь в том, что шкала времени (синий ползунок с красной линией) установлен на нулевом кадре слоя, т.е. в самом начале шкалы. Теперь разверните функции слоя, щелкнув по стрелке слева от названия слоя, и нажмите параметр Position/Позиция для создания ключевого кадра.
Шаг 11
Измените положение ползунка времени, установив его значение на 01:00f, и переместите огонек света, задавая ему направление движения. Подтвердите позицию, кликнув по кнопке Position / Позиция.
Шаг 12
В шаге 11 мы обозначили первую ключевую позицию огонька света на первой букве. Продолжайте создавать ключевые позиции анимации, передвигая шкалу времени и перемещая огонек света, после чего не забывайте нажимать параметр Position / Позиция. В конечном итоге огонек света должен «пройти» по всему контуру буквы и вернуться в исходную позицию.
Повторите действия с шага 10 по 12 для каждого слоя с буквами. На рисунках ниже представлены несколько ключевых позиций движения огоньков света по контурам символов.
Шаг 13
Вот так будет выглядеть график расположения ключевых позиций. Обратите внимание на то, что расположение и количество ключевых позиций для каждой буквы разное, в зависимости от траектории буквы.
Шаг 14
Когда Вы закончите со шкалой времени, перейдите File > Save for Web / Файл > Сохранить для WEB и примените указанные на рисунке ниже настройки. Далее нажмите Save/Сохранить и сохраните изображение в GIF формате.
Шаг 15
Мы получили финальный результат.
Автор: clair123rf
Перевод: Alysseum (demiart.ru)
