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

Недавно меня спросили, что такое глиттеры, и я решила рассказать о них подробнее. Глиттер (glitter) – по-английски означает «блеск», «блёстки», «сверкание». В нашем случае «глиттеры» — это блестящие изображения в формате gif, обычно состоящие из трех слоев. Например:

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

Самые различные надписи и картинки с анимацией можно найти и скачать в интернете, но гораздо интереснее создавать их самому! К тому же это так просто!.. Подобная анимация всегда привлекает внимание; можно воспользоваться этим, создав свой неповторимый сверкающий баннер или подпись.

Открыв анимированный глиттер-файл в программе Photoshop, увидим, что секрет сказочного сияния заключается в смене слоев, на которых блестки (попросту яркие звездочки или точки) расположены в разном порядке.

Открыв панель  Шкала времени (Timeline) командой Окно (Window) => Анимация  (Animation)  (в CS6 — Шкала времени), увидим, что каждому слою соответствует один кадр анимации. Сейчас выделен кадр №1, при этом виден только слой 1, а в остальных слоях видимость отключена. На кадре №2 будет видимым только слой 2, на кадре №3 — соответственно слой 3. Скорость мерцания зависит от времени отображения кадров, в данном глиттере оно равно 0,08 секунды. Это время можно менять по собственному усмотрению.

Начнем!

Создаем новый документ в Фотошопе по желаемому размеру надписи, у меня — 500 на 156 пикселей. Иногда лучше создать документ большего размера, а в конце обрезать его по размеру надписи; чуть ниже расскажу, почему.

Важно установить прозрачный фон, если вы хотите создать надпись без фона!

Затем выбираем подходящий шрифт — для нашей цели подойдет шрифт с широкими буквами, чтобы было что заполнять узором). Например, такие гарнитуры шрифта:

Гарнитуру Bodoni Nova и много других красивых гарнитур шрифтов можно скачать на страничке ИСХОДНИКИ.

Как добавить гарнитуру шрифта в Фотошоп (и не только), можно прочесть здесь.

В своем примере я использую гарнитуру Chocogirl. Чтобы сделать буквы шире, можно воспользоваться палитрой Символ/Абзац (Symbol/ Paragraph) при активном инструменте Текст (Type):

Как видим, я изменила масштаб по горизонтали до 190%, отчего буквы стали шире. Подробнее о настройках палитры Символ/Абзац рассказано в уроке Текст в Фотошоп. Пишем надпись:

Я добавила к тексту эффекты: белую обводку и тиснение для объема. Цвет текста не всегда важен: заполнив его узором из глиттеров, мы скроем первоначальный цвет надписи. Теперь откроем понравившийся файл с глиттерами. В моем примере он состоит из трех слоев. Каждый слой мы сохраним в наборе узоров программы Фотошоп. Убедитесь, что включена видимость слоя 1, и выберите команду Редактирование (Edit) => Определить узор… (Define pattern…):

При этом программа предложит нам выбрать имя узора. Можно ничего не менять, узор сохранится под именем файла с глиттером, но тогда у нас получится три разных узора с одинаковым названием. Можно запутаться. Поэтому к имени файла просто добавляю единичку (поскольку активен слой №1):

Проделываем процедуру «определить узор» еще дважды, включая видимость слоя №2 и добавив к имени файла цифру 2, а затем включая видимость слоя №3 и добавив к имени файла цифру 3. Теперь мы можем увидеть добавленные узоры  в наборе программы Фотошоп, для этого выберем команду Редактирование (Edit) => Наборы (Presets) => Управление наборами… (Preset Manager…).

И в открывшемся окне управления наборами выбрать Узоры (часто пишут «паттерны»):

Видим после всех образцов узоров наши три глиттера, при наведении курсора всплывет подсказка с именем и размером файла.

Узоры, которые не используются, лучше удалять из набора, поскольку большое их количество замедляет работу программы.

Теперь вернемся к нашей надписи. Файл с глиттером можно закрыть, он больше не понадобится. Создаем новый слой над слоем с текстом и выбираем команду Редактирование (Edit) => Выполнить заливку (Fill) (Shift+F5).

В окне заливки выбираем заливку узором, в моей версии Фотошопа это называется почему-то «регулярный» . В окошке узора выбираем первый узор с глиттером и жмем ОК. Новый слой теперь заполнен узором и текста не видно! Чтобы узором была заполнена только надпись, создаем обтравочную маску. Для этого удерживаем Alt и кликаем по линии между слоями, при этом вместо курсора появляется значок со стрелкой. Теперь узор заполняет только надпись, а рядом с миниатюрой слоя появилась прямоугольная стрелка — знак обтравочной маски .

Создаем еще один новый слой и повторяем заливку узором, но в качестве образца выбираем второй узор с глиттером (с цифрой 2). Точно так же создаем этому слою обтравочную маску. Создаем еще один новый слой и заливаем узором с глиттером №3; вновь добавляем обтравочную маску. Теперь палитра слоев выглядит так:

Включаем анимацию!!!

Предлагаю сохранить созданный документ, так, на всякий случай))).

Открываем палитру Шкала времени: Окно (Window) => Шкала времени  (Timeline) и нажимаем кнопку Создать анимацию кадра.  Отключаем видимость слою 3 и слою 2, оставив видимым только слой с текстом и слой с узором №1. Первый кадр анимации готов; нажимаем кнопку Новый кадр внизу палитры Шкала времени и включаем видимость слою №2, отключив видимость слоя 1. Опять нажимаем кнопку Новый кадр и включаем видимость только слою №3. Получилось три кадра:

Теперь нужно задать повторение анимации Постоянно и выбрать время отображения кадров. Сейчас оно равно 0. Чтобы изменить время отображения, нужно выделить все кадры и нажать треугольник внизу миниатюры кадра. Выберите время из списка или введите свое значение, нажав надпись «Другое…». Я оставлю значение 0. Нажмите кнопку воспроизведения на Шкале времени, чтобы увидеть, как выглядит анимация надписи с глиттерами.

Сохраняем документ в формате GIF с помощью команды Файл (File) => Сохранить для Web (Save for Web) (или комбинация клавиш Alt+Shft+Ctrl+S).

Присмотревшись, можно заметить, что узор не бесшовный и оттого видна граница соединения прямоугольников с глиттерами (на букве С и Б). Чтобы избежать этого, нужно после заливки слоя узором и создания обтравочной маски выбрать инструмент Перемещение (Move) (M) и подвигать слой, заполненный узором, так, чтобы линии соединения не были видны. Для этого хорошо, чтобы размер созданного документа был больше самой надписи: у нас будет простор для перемещения слоя. Поскольку я создала документ строго по размеру надписи, пришлось найти другой выход: я просто перевернула каждый слой с узором на 180 градусов командой Трансформирование. Получилось немного лучше:

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

В этом случае сохраняется первоначальный цвет надписи. Можно еще попробовать режим наложения Перекрытие или Мягкий свет.

В зависимости от цвета текста и выбранного глиттера можно получить разные эффекты, поэкспериментируйте!

Где же взять сияющие файлы с блестками? Правильно, скачать на страничке ИСХОДНИКИ .

Теперь вы сами можете создавать невероятно красивую анимацию с глиттерами, а, однажды попробовав, остановиться бывает сложно))). Поэтому…