"Валентинка" с анимацией "блёстки".
Урок для начинающих.
Дорогие друзья!
Скоро праздник всех влюблённых и я предлагаю начинающим любителям Photoshop урок по созданию открытки "Валентинка" с анимацией "блёстки".

Результат урока.
[550x500]

В уроке использаны:
1.Картинка PNG (клипарт): сердечки – розы – голуби.
2.Шрифт «Ribbon Heart – Бантик и Сердечки»” из набора Александры Гофманн
«Винтажные русские шрифты. Часть 5.»
Все дополнения к уроку написаны мной и опубликованы на личном сайте "Фотошоп + Я"
в разделе "Советы начинающим"

Создание Валентинки.

1.Открываем новый документ (меню – файл – создать) 550х500пикс., фон прозрачный.
[250x141]

2.Открываем палитру цветов (клик по иконке основного цвета в панели инструментов) и выбираем цвет.
В моём случае это веб цвет 3366ff.
[250x167]

3.Активируем инструмент «заливка» (иконка ведёрка) в панели инструментов и заливаем документ.
[250x246]

4.Открываем клипарт (меню – файл – открыть), находим клипарт на компьютере и жмём на «открыть».
[250x157]
Клипарт очень большой и нужно его уменьшить. Для этого топаем в меню – изображение – размер изображения. Изменяем значения разрешения и размерности.
[169x264]
Как изменить разрешение и размер читайте пункты 1 и 2 ЗДЕСЬ.

5.Активируем инструмент «перемещение» и перетаскиваем клипарт на наш документ, а файл с клипартом закрываем без сохранения изменений.
[250x116]

6. На созданном документе у нас сейчас два слоя – один с заливкой, другой с клипартом. Создаём новый (пустой) слой между этими слоями (вторая иконка справа внизу палитры слоёв).
[250x238]

7.Опять открываем палитру цветов (как в пункте 2 данного урока) и выбираем цвет светлее фонового. В моём случае это веб цвет ccffff.
[250x164]

8.Активируем инструмент «кисть» в левой панели инструментов и выбираем мягкую кисточку радиусом 100пикселей из стандартного набора «основные кисти».
[250x234]

9.Находясь на новом пустом слое, обводим активированной кисточкой клипарт.
[250x247]

10.К слою с нарисованной обводкой клипарта применяем размытие.
Для этого топаем в меню – фильтр – размытие – размытие по гауссу и устанавливаем радиус 40-50 пикселей.
Я поставила 42пикс.
[250x201]

11.Соединяем слой с обводкой со слоем с заливкой (меню – слои – объединить с предыдущим).
[156x264]

12. К полученному слою добавляем немного «шума».
Для этого топаем в меню – фильтр – шум – добавить шум с настройками:
Эффект -2%
Распределение – равномерное
Галочка на «монохромный».
[250x222]
Зачем я добавила «шум» на фон?
Это не только оформление фона, но и маленькая хитрость для анимации. Дело в том, что при создании анимации фон без «шума» может «поехать. Это хорошо видно на скрине.
Сравните оригинал и гиф вариант. Разница очевидна.
[250x239]
«Шум» позволит сохранить оригинальный вид фона при добавлении анимации.

13.Пишим текст. Настройки шрифта на скриншоте.
[269x212]
Применяем к тексту стиль слоя «наложение градиента» (вторая иконка слева внизу панели слоёв – выбрать «наложение градиента»). Градиент из стандартного набора «Простые».
[250x207]

14. Рамка.
1)Создаём новый слой (в панели слоёв он должен быть расположен над слоем с фоном), активируем инструмент «прямоугольная область» и, отступив от края, делаем выделение.
[250x243]

2)Топаем в меню – редактирование - выполнить обводку. Параметры:
Ширина - 2 пикселя.
Расположение – по центру.
[250x182]
Снимаем выделение (меню – выделение – отменить выделение или сочетание клавиш Ctrl+D).

3)Опять делаем выделение инструментом «прямоугольная область», но кусочка созданной обводки.
[250x252]

4) Меню – выделение – модификация – растушёвка. Радиус устанавливаем 15 пикселей.
[373x107]

5) Копируем полученное выделение на новый слой
(меню – выделение – скопировать на новый слой или сочетание клавиш Ctrl+J).
Отключив видимость слоя с обводкой, получаем уголок.
[250x259]

6) Активируем стиль слоя «наложение градиента», создаём из того же градиента, который применяли к тексту градиент с розовыми концами и белой серединой (как создавать градиент читайте ЗДЕСЬ), угол минус 50, масштаб 150.
[250x241]

7)Закрепляем стиль слоя, преобразовав его в смарт – объект.
Для этого делаем клик правой кнопкой мыши по слою и в выпавшем меню активируем позицию «Преобразовать в смарт – объект».
[154x264]
Зачем нужно закрепить стиль слоя?
Дело в том, что этот уголок нам нужно расставить по всем краям файла. Если мы будем отражать по горизонтали слой с незакреплённым стилем, то угол отображения останется прежним и выглядеть это будет не очень эстетично.

8) Дублируем преобразованный слой (CTRL+J) и поворачиваем дубликат по горизонтали. Для этого топаем в меню – редактирование – трансформирование – отобразить по горизонтали.
[250x260]

9) Активируем инструмент «перемещение» и перемещаем дубликат в правый угол.
Чтобы уголок переместить на нужное место, включаем видимость слоя с обводкой.
[250x241]

10)Выделяем слои с обводкой (при активном дубликате, удерживая клавишу Shift, клик левой кнопкой мыши по оригиналу преобразованного слоя) и топаем в меню – слои – объединить слои. Активность слоя определяется наличием синего цвета на иконке слоя.
[250x217]

11)Дублируем полученный слой и отображаем его по вертикали.
Перемещаем дубликат вниз. Слой с обводкой удаляем, а все слои, кроме слоя с клипартом объединяем в один, предварительно выделив их.
О способах выделения и объединения слоёв читайте ЗДЕСЬ.
В панели слоёв после объединения стало два слоя – с фоном и клипартом.
[300x154]
Почему я не объединила все слои?
Дело в том, что я хочу применить на клипарте для анимации фильтр «блик», а он подразумевает дубликат изображения, на котором применяется фильтр. Чтобы не утяжелять конечный гиф файл, я оставила клипарт на отдельном слое.

Анимация «БЛЁСТКИ»

Существуют плагины для создания анимации «блёстки», в частности плагин Xenofex 2 от Alien Skin, но при невозможности преобретения и установки плагиов на компьютер и в программу я предлагаю сделать такую анимацию стандартными возможностями Photoshop.

Рассмотрим 2 варианта анимации.

Вариант 1. Анимация с использованием кистей.

1. Создаём 3 новых слоя и в панели слоёв располагаем их над слоем с клипартом.
Называем слои «кисточка 1», «кисточка 2» и «кисточка 3».
[344x289]

2.Активируем инструмент «кисточка», выбираем кисть «звёздочка маленькая» из стандартного набора «разные кисти».
[250x210]

3.Находясь на слое «кисточка 1» делаем клики левой кнопкой мыши кисточкой в разных местах.Цвет кисти белый.
Совет. Если отображение кисти слабое, то по каждой позиции делайте 2 клика подряд.
Получаем такой вид.
[250x254]

4. На втором и третьем слое для кисточек также добавляем звёздочки, но в других местах, чтобы при анимации у нас создалось мерцание. У меня, при видимости всех слоёв со звёздочками получился такой вид.
[250x259]

Приступаем к анимации.

1)Активируем панель «анимация» (меню – окно – анимация) задержку времени ставим на 0,1сек., в панели слоёв и закрываем видимость у всех слоёв со звёздочками, кроме слоя «кисточка1». Такое расположение видимости слоёв будет для первого кадра анимации.
[250x129]

Будьте, пожалуйста, внимательны при распределении видимости слоёв для кадров в панели анимации. Не путайте значение «слой» с значением «кадр». Слои в панели слоёв, а кадры в панели анимации.

2) Создаём новый кадр (вторая иконка справа внизу панели анимации). На этом кадре открываем видимость слоя «кисточка 2», а видимость слоя «кисточка 1» закрываем.
[250x176]

3)Применяем ко второму кадру промежуточные слои (третья иконка справа внизу панели анимации). Я поставила 1 промежуточный кадр.
[250x150]
После применения промежуточного кадра в панели анимации образовалось 3 кадра.

4)Создаём следующий кадр – четвёртый. Для этого кадра в панели слоёв отключаем видимость слоя «кисточка 2» и включаем видимость слоя «кисточка 3».
[250x151]
К 4 кадру применяем промежуточный слой. После применения в панели анимации образуется 5 кадров.

5) Создаём 6 кадр. Для этого кадра закрываем видимость слоя «кисточка 3» и открываем видимость слоя «кисточка 1».
[250x162]

6)Применяем к 6 кадру промежуточный кадр. В панели анимации образовалось 7 кадров. Но видимость седьмого кадра одинакова с видимостью первого кадра, поэтому седьмой кадр удаляем (иконка корзинки внизу панели анимации).
Зачем при создании анимации я добавляю промежуточные кадры?
Конечно, можно этого не делать. Но посмотрите на две анимации.
[250x128]
На изображении слева я применила промежуточные кадры, на изображении справа создала три кадра в панели анимации и для каждого кадра открыла видимость одного из слоёв со звёздочками.

Для первого кадра – видимость слоя «кисточка 1»
[250x232]

Для второго кадра - видимость слоя «кисточка 2»
[250x232]

Для третьего кадра – видимость слоя «кисточка 3»
[250x232]

Мне больше нравится вариант с промежуточными кадрами.
Итак, когда видимость слоёв расставлена по кадрам, сохраните файл в формате gif. Как это сделать читайте ЗДЕСЬ.


Вариант 2. Анимация с использованием фильтра «блик».

После того, как создали по кадровую анимацию кистями, добавим к ней анимацию «блик»
Все дальнейшие изменения советую делать при активном первом кадре в панели анимации.
[425x119]

1. Создаём 3 дубликат слоя с клипартом.
1)К первому дубликату применяем фильтр «блик».
Для этого топаем в меню – фильтр – рендеринг – блик, находим точку, на которой хотим сделать сверкание (в моём случае это брюлик в сердечке) и устанавливаем следующие параметры:
Яркость – 35%
Тип объекта – начало ролика.
[250x169]

2) Переходим на второй дубликат и применяем тот же фильтр. Изменяем только настройки яркости на 70%.
[250x175]

3)К третьему дубликату также применяем фильтр «блик», настройки яркости фильтра 100%
[250x183]

2. Расставим видимость слоёв с клипартом по кадрам в панели анимации.
1)Для первого кадра видимость оригинала слоя с клипартом.
[250x189]

2)Ко второму кадру видимость слоя «клипарт копия»
[250x189]

3) К третьему кадру видимость слоя «клипарт копия 2».
[250x189]

4)К четвёртому кадру видимость слоя «клипарт копия 3».
[250x189]

5)К пятому кадру видимость слоя «клипарт копия 2».
[250x189]

6)К шестому кадру видимость слоя «клипарт копия»
[250x189]
Таким образом, мы создали плавное свечение блика.
Вот и всё. Сохраните файл в формате gif.

С теплом, Ольга Бор.
Плэйкаст версия урока.
МОИ УРОКИ.

Серия сообщений "ФШ анимация":

Часть 1 - Урок-как добавить в фотошопе анимашку
Часть 2 - Урок "Оживляем лицо и предметы"
...
Часть 62 - Урок анимации "Падающий снег" от Ольги Бор
Часть 63 - Как делать анимацию.Урок.
Часть 64 - "Валентинка" с анимацией "блёстки".