Анимированный юзербар 7 (музыкальный)

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

Анимированный юзербар 7 (музыкальный)

Приветствую всех любителей анимированных юзербаров и фанатов очаровательных девушек из группы K-ON! Этот урок мы посвятим именно им! Хотя принцип создания юзербаров подойдет для любого музыкального аниме (например: можно использовать красавцев из аниме Uta no Prince-sama)

И так давайте же приступим и сделаем вместе отличный юзербар для форумов!

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

Я предпочитаю работать в Photoshop CS5, однако этот урок подойдет и для таких версий как Photoshop CS2, CS3, CS4.

Открываем программу Photoshop и создаем новый документ с размерами 350*40 px.

Выбираем в палитре цветов любой нежный цвет (я взяла нежно розовый, в палитре RGB – fabdbd). При помощи инструмента заливка, заливаем выбранным цветом наш документ.

Создаем новый слой. Выбираем инструмент Заливка с настройками Узор (Pattern). Узор устанавливаем в виде кружочков и заливаем.

Этот узор вы найдете в наборе заливок Photoshop Smexy Patterns.

Выставляем для слоя с узором прозрачность слоя на 45% и смешивание слоев меняем на Divide (это необходимо для того что бы черные кружочки заливки стали белыми)

Создаем новый слой и с помощью прямоугольного выделения в нижней части документа выделяем небольшую полосу по всей длине. Затем выбираем немного темнее цвет от основного (в моем случае это розовый – f78f8f) и заливаем выделенную часть.

Теперь нам пригодиться логотип группы K-ON!. Его можно скачать в архиве в начале урока. Переносим логотип на наш документ, уменьшаем размер с помощью трансформации (Ctrl+T) и устанавливаем его в правой части баннера.

Теперь не считая слоя background («задний план ») у нас должно получиться четыре слоя. Чтобы в дальнейшем они нам не мешали, мы создаем папку и перетаскиваем все 4 слоя туда.

Папку назовем «фон»

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

Теперь рядом с логотипом поставим любую подпись. Я предпочла поставить оригинальную подпись группы K-ON! И ниже ее надпись bakemono.ru.

Оригинальную подпись группы K-ON! Вы так же сможете найти в архиве, который я предоставила в начале урока.

Вы так же можете вместо моего варианта придумать свой. Например: написать свое имя или имя персонажа или д.р.

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

Так как обычно для таких подписей используется много слоев и что бы в дальнейшем они нам не мешали, мы так же помещаем их в папку и вешаем на нее замок.

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

Я выбрала Yui и удалила задний фон. Заметьте, что для юзербара нам будет достаточно, верхней части тела.

Если вы не хотите тратить время на удаление заднего фона, то можно скачать набор подготовленных картинок в скрап наборе K-On

Переносим выбранную картинку на созданный документ. Если необходимо уменьшаем размер с помощью трансформации (Ctrl+T). Картинку устанавливаем в левом углу.

Теперь сделаем эффект объема.

Для начала создадим новый слой. Затем выберем инструмент овальное выделение. Сделаем частичное выделение в верхней части юзербара. Выставляем в палитре белый цвет. Выбираем инструмент заливка и заливаем выделенную область.

Ставим прозрачность слоя на 50%.

У нас получается следующие:

Теперь сделаем обводку в 1px.

Создаем новый слой «обводка» поверх всех слоев. Выделяем наш юзербар, нажав на клавиши Ctrl+A. Не снимая выделения, выбираем инструмент выделения и нажимаем правой кнопкой мыши по юзербару. В открывшемся выпадающем списке выбираем Stroke / Обводка

Теперь в открывшемся окне настроек выставляем черный цвет и размер обводки в 1 px.

Опять создаем папку под названием «верх» и переносим туда слой с объемом и обводкой в 1px.

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

Теперь нам понадобиться гитара Yui. Все музыкальные инструменты группы K-ON!  вы найдете в архиве в начале урока.

Переносим гитару на наш документ под слой Yui. Дублируем слой с гитарой еще два раза (Ctrl+J). Создаем папку под названием «гитара» и переносим все три слоя туда.

Теперь 1 слой с гитарой оставляем неизменным. 2 слой немного наклоняем по часовой стрелке и 3 слой наклоняем еще ниже по часовой стрелке.

У нас должно получиться следующие:

Отключаем видимость 2 и 3 слоя. Переходим к созданию нот.

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

Создаем ноты.

Для нот создаем 4 новых слоя, каждый слой будет соответствовать одной из нот.

Переходим на 1 слой.

Выбираем яркий цвет (в моем случае это зеленый).

Выбираем инструмент Custom Shape Tool (Инструмент “Произвольная фигура”).

В выпадающем списке выбираем фигуру любой ноты.

Примечание. Если у вас нет в выпадающем списке фигур нот, тогда поставьте в настройках функцию – показать все элементы(All).