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

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

 

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

Анимированный музыкальный юзербар K-ON

 

 

 

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

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

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

 

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

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

Анимированный музыкальный юзербар K-ON

 

 

 

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

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

Анимированный музыкальный юзербар K-ON

 

 

 

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

Анимированный музыкальный юзербар K-ON

 

 

 

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

Анимированный музыкальный юзербар K-ON

 

 

 

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

Анимированный музыкальный юзербар K-ON

 

 

 

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

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

Анимированный музыкальный юзербар K-ON

 

 

 

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

Анимированный музыкальный юзербар K-ON

 

 

 

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

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

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

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

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

Анимированный музыкальный юзербар K-ON

 

 

 

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

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

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

Анимированный музыкальный юзербар K-ON

 

 

 

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

Анимированный музыкальный юзербар K-ON

 

 

 

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

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

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

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

Анимированный музыкальный юзербар K-ON

 

 

 

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

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

Анимированный музыкальный юзербар K-ON

 

 

 

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

Анимированный музыкальный юзербар K-ON

 

 

 

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

Анимированный музыкальный юзербар K-ON

 

 

 

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

 

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

Анимированный музыкальный юзербар K-ON

 

 

 

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

Анимированный музыкальный юзербар K-ON

 

 

 

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

Анимированный музыкальный юзербар K-ON

 

 

 

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

Анимированный музыкальный юзербар K-ON

 

 

 

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

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

Анимированный музыкальный юзербар K-ON

 

 

 

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

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

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

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

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

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

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

 

 

 

 

Переходим на вкладку Paths / Контуры.

Заливаем цветом, нажав на закрашенный кружок.

Анимированный музыкальный юзербар K-ON

 

 

 

Такие же действия проделываем с оставшимися 3 слоями. Рисуем на каждом слое ноту разных ярких цветов с помощью Custom Shape Tool (Инструмент "Произвольная фигура").

У нас должен получиться примерно  такой результат:

Анимированный музыкальный юзербар K-ON

 

 

 

Теперь создаем новую папку под названием «Кадр 1» и переносим туда все 4 слоя.

Анимированный музыкальный юзербар K-ON

 

 

 

Затем дублируем папку «Кадр 1» семь раз.

Для этого мышкой перетягиваем папку на значок нового слоя.

Анимированный музыкальный юзербар K-ON

 

 

 

В итоге у нас получиться 8 папок с названиями «Кадр 1», «Кадр 2», «Кадр 3», «Кадр 4», «Кадр 5», «Кадр 6», «Кадр 7», «Кадр 8».

Все 8 папок переносим в одну под названием «ноты».

Папку «ноты» и «гитара» я пометила цветами, так как именно эти слои будут участвовать в анимации.

Анимированный музыкальный юзербар K-ON

 

 

 

Теперь отключаем папки с нотами («кадр 2», «кадр 3», «кадр 4», «кадр 5», «кадр 6», «кадр 7», «кадр 8»), оставляем включенной только «кадр 1». Устанавливаем ноты в самом начале вспомогательной линии.

Примерно так  «кадр 1»:

Анимированный музыкальный юзербар K-ON 

 

Для этой папки я сделала прозрачность всех слоев в 50 %.

 

 

Затем постепенно редактируем каждую папку с помощью перемещения и трансформации, меняя расположение, размер и поворот нот.

«кадр 2»:

Анимированный музыкальный юзербар K-ON

 

 

 

«кадр 3»:

Анимированный музыкальный юзербар K-ON

 

 

 

«кадр 4»:

Анимированный музыкальный юзербар K-ON

 

 

 

«кадр 5»:

Анимированный музыкальный юзербар K-ON

 

 

 

«кадр 6»:

Анимированный музыкальный юзербар K-ON

 

 

 

«кадр 7»:

Анимированный музыкальный юзербар K-ON

 

 

 

«кадр 8»:

Анимированный музыкальный юзербар K-ON

 

 

 

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

После удаляем слой со вспомогательной линией и отключаем все папки с нотами, кроме «кадр 1».

Запускаем панель анимации Window -> Animation (Окно>Анимация).

Выставляем для первого кадра - время 0,1сек, включенную папку  «кадр 1» и 1 слой с гитарой.

Анимированный музыкальный юзербар K-ON

 

 

 

Затем создаем еще 8 кадров. Всего у нас получиться 9 кадров.

Для 2 кадра включаем папку  «кадр 2» и 2 слой с гитарой.

Анимированный музыкальный юзербар K-ON

 

 

 

Для 3 кадра включаем папку  «кадр 3» и 3 слой с гитарой.

Для 4 кадра включаем папку  «кадр 4» и 1 слой с гитарой.

Для 5 кадра включаем папку  «кадр 5» и 2 слой с гитарой.

Для 6 кадра включаем папку  «кадр 6» и 3 слой с гитарой.

Для 7 кадра включаем папку  «кадр 7» и 1 слой с гитарой.

Для 2 кадра включаем папку  «кадр 8» и 2 слой с гитарой.

Для 9 кадра отключаем  папку  «ноты» и включаем 3 слой с гитарой.

 

И сохраняем!

Заходим File /Save for Web( Файл/ сохранить для Web) (Alt+Shft+Cntr+S).

И в параметрах выставляем Gif

Анимированный музыкальный юзербар K-ON

 

 

 

У нас получается такая анимация:

Анимированный музыкальный юзербар K-ON

 

Вот еще несколько примеров:

Анимированный музыкальный юзербар K-ON

 

 

 

Анимированный музыкальный юзербар K-ON

 

 

 

Анимированный музыкальный юзербар K-ON

 

 

 

Анимированный музыкальный юзербар K-ON

 

 

Автор урока: Prescilla

Данный материал подготовлен для Вас командой сайта http://bakemono.ru

Данный материал предоставлен владельцами сайта Bakemono.RU и имеют на него полные авторские права. При копировании или частичном использовании данных новостей на других сайтах, в обязательном порядке уведомить автора данной новости "Prescilla" и разместить активную ссылку на источник.

+ +68 -
Комментарии к Анимированный юзербар 7 (музыкальный)
Офлайн
Veronika00 19 октября 2013 17:26
+ 0 -
первый раз в фотошопе работаю и не получилось
Офлайн
Вроде бы получилось :D
--------------------
Офлайн
мика-тян 8 января 2013 01:26
+ 0 -

Вот вроде норм ^^"
Офлайн
мика-тян 7 января 2013 16:29
+ 0 -
Ммм классно я тоже хочу так сделать только с персами аниме Поющий принц)). А кстати у кого есть исходники по Поющему принцу ?? Если есть у кого то киньте пожалуйста.
Офлайн
nastyausako142 18 ноября 2012 16:16
+ 0 -
супер урок. мне он очень нравится



у меня такой юзебар!



спасибо вам за это урок ещё раз!
--------------------
Irma Funny - позитивная
Офлайн
Prince Bell
Prince Bell 13 августа 2012 21:30
+ 0 -
Спасибо! Мой первый юзербар! :3 Крутой урок!
Офлайн
ka27gl
ka27gl 26 июля 2012 12:47
+ 0 -
Ну мне с вами канешн не сравнится но я решила попробовать сдлать такую же анимацию, вот только не знаю как загрузить ._.
Офлайн
ka27gl
ka27gl 25 июля 2012 23:06
+ 0 -
Восхитительно у вас вышло!!! *О* Завтра попробую сделать =3
Офлайн
Firezis 16 июля 2012 15:18
+ 0 -
классный урок, спасибо))
Офлайн
Anglichanka
Anglichanka 15 июня 2012 11:44
+ 0 -
юзербар вообще штука прикольная! я раньше блин думала, как они на форумах такие подписи делают... теперь сама умею)
Офлайн
annetylonen
annetylonen 14 июня 2012 12:38
+ 0 -
Отличный урок! Спасибо огромное!)
Никак не могла понять, как сделать анимацию, а после вашего урока всё получилось очень просто легко))
--------------------
Офлайн
Neriko
Neriko 1 мая 2012 10:37
+ 0 -
Спасибо за урок)) Очень полезный)) Я тут совместила несколько уроков.. но конечно получилось не очень, но всё же все мы только учимся ....
Офлайн
Prescilla 29 марта 2012 17:53
+ 0 -
Всегда пожалуйста delighted
Жду ваших работ! cb
--------------------
Офлайн
Lemonchik 29 марта 2012 16:12
+ 0 -
виииииии delighted спасибки огромное))))
Офлайн
ADaM_GoRdoN
ADaM_GoRdoN 29 марта 2012 09:28
+ 0 -
Отличный урок cb ay !!!!
Офлайн
Kio Teru
Kio Teru 14 марта 2012 11:39
+ 0 -
Спасибо большое! Шикарный урок delighted
Офлайн
Ren Mitsuko
Ren Mitsuko 11 марта 2012 18:01
+ 0 -
Аригато ** Сегодня же выложу hello
Добавить комментарий
    • bxbybzcacb2cc2cd
      cecfcgchcicjck
      clcmcpcsctcucv
      cwdadbdcsleepaoknow2
      burpfuriousccazslobbersm32bj
      arfearfeelbusm28sm16be
      killshyslapfascinatedalnotlove
      helloakangrybbapeaylol
      kisssmilecbdelightedyesknowwhat
      ancheerseh