Анімований юзербар 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).


Показати / Приховати текст

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

Переходимо на вкладку 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://jak-namaljuvaty.pp.ua


Намалюй разом з нами таке
Додавання коментаря

Ім'я:*
Напівжирний Нахилений текст Підкреслений текст Перекреслений текст | Вирівнювання по лівому краю По центру Вирівнювання по правому краю | Вставка смайликів Вибір кольору | Прихований текст Вставка цитати Перетворити вибраний текст з транслітерації в кирилицю Вставка спойлера
Введіть код: *