Playcast

Открытка (плейкаст) «Валентинка. Урок Photoshop.»

olbor , 7 февраля 2011 года, 22:53


Валентинка. Урок  Photoshop. Валентинка. Урок  Photoshop.

Урок для начинающих любителей программы Photoshop,

в котором я расскажу о некоторых приёмах оформления фона и 

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


В уроке использаны:

1.Картинка PNG (клипарт): сердечки – розы – голуби.

2.Шрифт «Ribbon Heart – Бантик и Сердечки»” из набора Александры Гофманн «Винтажные русские шрифты. Часть 5.»


Все дополнения к уроку написаны мной и опубликованы на личном сайте "Фотошоп + Я" 

в разделе "Советы начинающим"


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

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


2.Открываем палитру цветов (клик по иконке основного цвета в панели инструментов) и выбираем цвет.

В моём случае это веб цвет 3366ff. Скриншот.


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


4.Открываем клипарт (меню – файл – открыть), находим клипарт на компьютере и жмём на «открыть».Скриншот.


Клипарт очень большой и нужно его уменьшить. Для этого топаем в меню – изображение – размер изображения. Изменяем значения разрешения и размерности.Скриншот.

Как изменить разрешение и размер читайте пункты 1 и 2 ЗДЕСЬ.


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


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


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


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


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


10.К слою с нарисованной обводкой клипарта применяем размытие.

Для этого топаем в меню – фильтр – размытие – размытие по гауссу и устанавливаем радиус 40-50 пикселей.

Я поставила 42пикс. Скриншот.


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


12. К полученному слою добавляем немного «шума».

Для этого топаем в меню – фильтр – шум – добавить шум с настройками:

Эффект -2%

Распределение – равномерное

Галочка на «монохромный». Скриншот.

   Зачем я добавила «шум» на фон?

Это не только оформление фона, но и маленькая хитрость для анимации. Дело в том, что при создании анимации фон без «шума» может «поехать. Это хорошо видно на скрине.

Сравните оригинал и гиф вариант. Разница очевидна. Скриншот.

«Шум» позволит сохранить оригинальный вид фона при добавлении анимации.


13.Пишим текст. Настройки шрифта на скриншоте.


14. Рамка.


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


2)Топаем в меню – редактирование - выполнить обводку. Параметры:

Ширина - 2 пикселя.

Расположение – по центру. Скриншот.

Снимаем выделение (меню – выделение – отменить выделение или сочетание клавиш Ctrl+D).


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


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


5) Копируем полученное выделение на новый слой

(меню – выделение – скопировать на новый слой или сочетание клавиш Ctrl+J).

Отключив видимость слоя с обводкой, получаем уголок. Скриншот.


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


7)Закрепляем стиль слоя, преобразовав его в смарт – объект.

Для этого делаем клик правой кнопкой мыши по слою и в выпавшем меню активируем позицию «Преобразовать в смарт – объект». Скриншот.

Зачем нужно закрепить стиль слоя?

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


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


9) Активируем инструмент «перемещение» и перемещаем дубликат в правый угол.

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


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


11)Дублируем полученный слой и отображаем его по вертикали.

Перемещаем дубликат вниз. Слой с обводкой удаляем, а все слои, кроме слоя с клипартом объединяем в один, предварительно выделив их.

О способах выделения и объединения слоёв читайте ЗДЕСЬ.

В панели слоёв после объединения стало два слоя – с фоном и клипартом. Скриншот.

Почему я не объединила все слои?

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


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

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


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


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

1. Создаём 3 новых слоя и в панели слоёв располагаем их над слоем с клипартом.

Называем слои «кисточка 1», «кисточка 2» и «кисточка 3».  Скриншот.


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


3.Находясь на слое «кисточка 1» делаем клики левой кнопкой мыши кисточкой в разных местах.Цвет кисти белый.

Совет. Если отображение кисти слабое, то по каждой позиции делайте 2 клика подряд.

Получаем такой вид. Скриншот.


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


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

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


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


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


3)Применяем ко второму кадру промежуточные слои (третья иконка справа внизу панели анимации). Я поставила 1 промежуточный кадр. Скриншот.

После применения промежуточного кадра в панели анимации образовалось 3 кадра.


4)Создаём следующий кадр – четвёртый. Для этого кадра в панели слоёв отключаем видимость слоя «кисточка 2» и включаем видимость слоя «кисточка 3». Скриншот.

К 4 кадру применяем промежуточный слой. После применения в панели анимации образуется 5 кадров.


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

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


Зачем при создании анимации я добавляю промежуточные кадры?

Конечно, можно этого не делать. Но посмотрите на две анимации. Скриншот.

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

Для первого кадра – видимость слоя «кисточка 1» Скриншот.

Для второго кадра - видимость слоя «кисточка 2» Скриншот.

Для третьего кадра – видимость слоя «кисточка 3» Скриншот.


Мне больше нравится вариант с промежуточными кадрами.

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


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

После того, как создали по кадровую анимацию кистями, добавим к ней анимацию «блик»

Все дальнейшие изменения советую делать при активном первом кадре в панели анимации.Скриншот.


1. Создаём 3 дубликат слоя с клипартом.

1)К первому дубликату применяем фильтр «блик».

Для этого топаем в меню – фильтр – рендеринг – блик, находим точку, на которой хотим сделать сверкание (в моём случае это брюлик в сердечке) и устанавливаем следующие параметры:

Яркость – 35%

Тип объекта – начало ролика.Скриншот.


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


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


2. Расставим видимость слоёв с клипартом по кадрам в панели анимации.

1)Для первого кадра видимость оригинала слоя с клипартом.Скриншот.

2)Ко второму кадру видимость слоя «клипарт копия»  Скриншот.

3) К третьему кадру видимость слоя «клипарт копия 2». Скриншот.

4)К четвёртому кадру видимость слоя «клипарт копия 3». Скриншот.

5)К пятому кадру видимость слоя «клипарт копия 2». Скриншот.

6)К шестому кадру видимость слоя «клипарт копия» Скриншот.

Таким образом, мы создали плавное свечение блика.


Вот и всё. Сохраните файл в формате gif.


С теплом, Ольга Бор.



Звук:James Last - I\'ll Be There. Composed By Hal Davis / Berry Jr. Gordy / Willie Hutch / Bob West - www.allmusic.com
Изображение: Картинка в PNG - сердечки - www.lenagold.ru Скриншоты автора плэйкаста olbor (Ольги Бор)
Текст:Татьяна Лаврова - Валентинка - www.boxter.org + olbor (Ольга Бор)