Анимированный юзербар 6 (вращение)

Анимация вращение

В этом уроке мы рассмотрим, как создать анимированный юзербар с помощью программы Photoshop. В данном уроке будет использоваться Фотошоп С5 / Photoshop CS5 (подойдут так же версии CS2, CS3, CS4).

 

Для создания анимированного юзербара нам потребуются картинка без заднего фона из аниме Black Rock Shooter

Если вы не хотите возиться с картинкой, удаляя задний фон, то выберите картинку в скрап наборе Black Rock Shooter

 

Для этого урока Я выбрала такую картинку:

Анимация вращение

 

 

 

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

Анимация вращение

 

 

 

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

Анимация вращение

 

 

 

Теперь нарисуем звезду.

Создаем новый слой «звезда». Теперь нажимаем клавишу U и выбираем Custom Shape Tool (Инструмент "Произвольная фигура"), затем выбираем фигуру звезды и рисуем ее.

Анимация вращение

 

 

 

Примечание: Если вы не нашли фигуры звезды, поставьте в настройках функцию показать все элементы

Анимация вращение

 

 

 

Заливаем звезду голубым цветом:

  1. Выбираем с помощью инструмента пипетка голубой цвет.
  2. Переходим на вкладку Paths / Контуры
  3. Заливаем голубым цветом звезду, нажав на закрашенный кружок.
    Анимация вращение
     

 

Обводим звезду черным цветом:

  1. Выставляем в палитре черный цвет.
  2. Выбираем инструмент кисть с четкими краями и размером 1 px.
  3. Обводим звезду черным цветом, нажав на кружок с одним контром.
Анимация вращение

 

 

 

Должен получиться следующий вариант:

Анимация вращение

 

 

 

Теперь добавляем с правой стороны любой текст.

Анимация вращение

 

 

 

Задний план можно усложнить, так как вы хотите. Можно вставить любую текстуру, залить цветом или же нарисовать самим с помощью кистей и пера. Главное в этом шаге не забыть делать задний план под всеми ранее сделанными слоями.

Анимация вращение

 

 

 

Я предпочла нарисовать задний план с помощью пера.

Анимация вращение

 

 

 

Так же по желанию задний фон можно усложнить с помощью заливки.

Я использовала заливку, взятую с набора Photoshop Smexy Patterns

Подробней как использовать заливку вы можете посмотреть в уроке Создание юзербара в программе Photoshop

Анимация вращение

 

 

 

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

Для начала создадим новый слой «объем». Затем выберем инструмент овальное выделение. Сделаем частичное выделение в верхней части юзербара.

Анимация вращение

 

 

 

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

Анимация вращение

 

 

 

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

Анимация вращение

 

 

 

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

Анимация вращение

 

 

 

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

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

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

Анимация вращение

 

 

 

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

Анимация вращение

 

 

 

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

Анимация вращение

 

 

 

Теперь создадим новый документ (Ctrl+N), размером  320*140px.

Выберем инструмент кисть в форме цепи и нарисуем две цепи черного цвета на двух разных слоях.

 

Если у вас нет таких кистей, то их можно установить из архива Ropes / Chains 

Анимация вращение

 

 

 

Переносим слоя с цепями на наш юзербар под слой «звезда».

Анимация вращение

 

 

 

Переходим на слой «звезда» и копируем его 2 раза, нажав Ctrl+J. В итоге у нас получиться 3 слоя с одинаковыми звездами.

Анимация вращение

 

 

 

Теперь первую звезду не трогаем. Отключаем видимость «звезда 3».

Переходим на слой «звезда 2». Включаем трансформацию Ctrl+T и немного поворачиваем звезду по часовой стрелке.

Анимация вращение

 

 

 

Переходим на слой  «звезда 3» и включаем его видимость. Затем с помощью трансформации поворачиваем звезду по часовой стрелке, так что бы вышло как на скрине.

Анимация вращение

 

 

 

Теперь отключаем «звезда 2» и «звезда 3».

Анимация вращение

 

 

 

Теперь займемся цепями.

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

Анимация вращение

 

 

 

А слой с маленькой цепью устанавливаем так, что бы ее верхний конец касался верхней части баннера.

Анимация вращение

 

 

 

Запускаем панель анимации Window -> Animation (Окно>Анимация). Выставляем для первого кадра - время 0,1сек. Затем создаем еще один кадр.

Анимация вращение

 

 

 

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

Большую цепь вниз.

Анимация вращение

 

 

 

А маленькую вверх.

Анимация вращение

 

 

 

Совет: при передвижении цепей старайтесь передвигать их аккуратно по одной траектории.

 

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

Нажимаем на кнопку показанную на скрине.

Анимация вращение

 

 

 

В отрывшемся окне настроек выбираем число кадров 7

Анимация вращение

 

 

 

Теперь возвращаемся на первый кадр и займемся анимацией для звезды.

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

Выставляем следующие настройки для кадров:

1 кадр - «звезда 1»

2 кадр - «звезда 2»

3 кадр - «звезда 3»

4 кадр - «звезда 1»

5 кадр - «звезда 2»

6 кадр - «звезда 3»

7 кадр - «звезда 1»

8 кадр - «звезда 2»

9 кадр - «звезда 3»

 

И сохраняем!

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

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

Анимация вращение

 

 

 

У нас получается такой результат!

Анимация вращение

 

 

 

Вместо звезды можно использовать любой элемент, например манету, цветок, букву и др.

Желаю вам успехов и отличных работ!

 

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

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

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

+ +68 -
Комментарии к Анимированный юзербар 6 (вращение)
Офлайн
мика-тян 9 января 2013 18:30
+ 0 -
Уняня клаасный урок Домо аригатооо^^ А кстати вот мой юзербар

Офлайн
Prescilla 30 августа 2012 07:51
+ 0 -
Цитата: Н.А.З.
хм у меня cs6 не подойдет ?-_-

подойдет da

Цитата: L-ка
создание эффекта обьёма неполучается!

почему? что именно не получается?
--------------------
Офлайн
Н.А.З.
Н.А.З. 26 августа 2012 19:47
+ 0 -
хм у меня cs6 не подойдет ?-_-
Офлайн
Prince Bell
Prince Bell 13 августа 2012 22:11
+ 0 -
Спасибо, круто вышло:
Офлайн
L-ка
L-ка 3 мая 2012 20:45
+ 0 -
создание эффекта обьёма неполучается! bj
Офлайн
Raiken
Raiken 7 апреля 2012 14:10
+ 0 -
Кэ рэ У тЬ) Воошпе коол СаЙт furious
Офлайн
Мимика
Мимика 8 марта 2012 21:34
+ 0 -
Класно! Надо бы попробовоть! sm16 yes
Офлайн
Rokana
Rokana 3 марта 2012 11:59
+ 0 -
Спасибооо cu Очень познавательно
Офлайн
KainLied
KainLied 2 марта 2012 17:12
+ 0 -
arigatougozaimasta!!!!! az здесь очень много полезных уроков)
Офлайн
nemo
nemo 2 марта 2012 15:42
+ 0 -
=о, замечательный урок=)))спасибо БОЛЬШОЕ=) обязательно попробую))))
Добавить комментарий
    • bxbybzcacb2cc2cd
      cecfcgchcicjck
      clcmcpcsctcucv
      cwdadbdcsleepaoknow2
      burpfuriousccazslobbersm32bj
      arfearfeelbusm28sm16be
      killshyslapfascinatedalnotlove
      helloakangrybbapeaylol
      kisssmilecbdelightedyesknowwhat
      ancheerseh