Анимированный юзербар 2

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

 

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

 

Итак, выбрав картинку, создаем новый документ (Ctrl + N), размером 350х40px.

Итак, выбрав картинку для юзербара

  

 

 И переносим картинку на созданный документ. Устанавливаем ее так, что бы четко было видно глаза.

Устанавливаем ее так, что бы четко было видно глаза

  

 

Создаём новый слой.

Выбираем инструмент Paint Bucket (Заливка). В параметрах выставляем Pattern (Узор) и выбираем в выпадающем списке текстуру. Заливаем новый слой. И выставляем параметры для слоя Subtract, Opacity 25% и Fill 66%.

Выбираем инструмент Paint Bucket (Заливка)
 

  

 

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

). Узор размером 450*40 и сделан специально больше для создания анимации.

узор с косыми линиями
 

  

 

Перетаскиваем узор на юзербар и устанавливаем на начало левого края.

Перетаскиваем узор на юзербар

  

 

Расположение узора на юзербаре: все, что находиться на желтом фоне, находиться за пределом юзербара и будет в дальнейшем двигаться при анимации.

Расположение узора на юзербаре

  

 

Выставляем для слоя параметры Soft Light (мягкий свет) и прозрачность слоя 70%

Выставляем для слоя параметры Soft Light

  

 

Теперь пишем любое слово, желательно шрифтом гранж.

Теперь пишем любое слово на юзербаре

  

 

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

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

  

 

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

Запускаем панель анимации Window

  

 

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

Теперь передвигаем слой с косыми линиями влево при создании юзербара

  

 

Теперь нажимаем на кнопку создания промежуточных кадров. И выставляем количество кадров – 19.

Затем идем на 21 кадр и удаляем его.

создания промежуточных кадров

  

 

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

 

Идем на первый кадр. Выбираем в палитре слоев слой с буквами и дублируем его 15 раз (всего получиться 16 слоев с текстом).

Первый слой нам понадобиться для 1,2,3,4,5,6,7,8,15,17,19,20 кадров (поэтому я его назвала BAKEMONO 8-15-17-19-20).

Второй слой – для 9 кадра (BAKEMONO 9).

Третий слой - для 9 и 18кадров (BAKEMONO 9-18).

Четвертый и пятый – для 10 кадра (BAKEMONO 10).

Шестой и седьмой - для 11 кадра (BAKEMONO 11).

Восьмой, девятый и десятый - для 12 кадра (BAKEMONO 12).

Одиннадцатый и двенадцатый - для 13 кадра (BAKEMONO 13).

Тринадцатый, четырнадцатый и пятнадцатый - для 14 кадра (BAKEMONO 14).

Шестнадцатый - для 16 кадра (BAKEMONO 16).

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

 кадры создания юзербара

 

 

Отключаем все слои кроме самого первого и переходим на него.

 

 

С 1 по 7 кадр положение букв мы не трогаем.

С 1 по 7 кадр положение букв мы не трогаем

  

 

Переходим на 8 кадр и подымаем слой с буквами вверх.

Переходим на 8 кадр и подымаем слой с буквами вверх

  

 

Переходим на 9 кадр, отключаем слой BAKEMONO 8-15-17-19-20, и включаем слои, которые соответствуют девятому кадру, то есть BAKEMONO 9 и BAKEMONO 9-18.

С помощью трансформации (Ctrl+t) выставляем положение слов как на скрине.

Для нижнего слоя (BAKEMONO 9) выставляем прозрачность 50%.

Переходим на 9 кадр, отключаем слой BAKEMONO

  

 

Переходим на 10 кадр, и включаем слои, которые соответствуют 10 кадру.

С помощью трансформации (Ctrl+t) выставляем положение слов как на скрине. Для нижнего слоя выставляем прозрачность 50%.

Для нижнего слоя выставляем прозрачность 50%.

  

 

Те же операции проводим с 11 кадром.

кадр анимации

  

 

Переходим на 12 кадр, и включаем 3 слоя, которые соответствуют 12 кадру.

С помощью трансформации (Ctrl+t) выставляем положение слов как на скрине. Для двух нижних слоев выставляем прозрачность 50%.

прозрачность юзербара

  

 

Переходим на 13 кадр, и включаем два слоя, которые соответствуют 13 кадру.

С помощью трансформации (Ctrl+t) выставляем положение слов как на скрине. Для нижнего слоя выставляем прозрачность 50%.

Переходим на 13 кадр, и включаем два слоя, которые соответствуют 13 кадру.

  

 

Переходим на 14 кадр, и включаем 3 слоя, которые соответствуют 14 кадру.

С помощью трансформации (Ctrl+t) выставляем положение слов как на скрине. Для двух нижних слоев выставляем прозрачность 50%.

С помощью трансформации

  

 

Переходим на 15 кадр и подымаем слой вверх.

Переходим на 15 кадр и подымаем слой вверх.

  

 

Переходим на 16 кадр, отключаем слой BAKEMONO 8-15-17-19-20, и включаем слой BAKEMONO 16.

С помощью трансформации (Ctrl+t) выставляем положение слов как на скрине.

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

  

 

17 кадр не изменяем.

юзербар

  

 

Переходим на 18 кадр, отключаем слой BAKEMONO 8-15-17-19-20, и включаем слой BAKEMONO 9-18.

19 и 20 кадр не изменяем.

анимированный юзербар

   


И сохраняем!

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

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

 сохранение анимации в фотошопе

  

 

 

динамический анимированный юзербар

 

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

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

+ +50 -
Комментарии к Анимированный юзербар 2
Офлайн
Sasalo4ka 19 декабря 2013 23:42
+ 0 -
Thanks you guys whos made this guide
Офлайн
Кимико 6 декабря 2013 19:30
+ 0 -
ииииииииииии ^^
Всё получилось!Я очень давольна результату!Спасибо kiss
Офлайн
Zhenyanyasha
Zhenyanyasha 27 октября 2012 14:00
+ 0 -
а можно вопрос? о.о
я фотошопе новенькая и не разбираюсь оо
я не могу найти Pattern .-.
версия cs5 ._."

у меня есть только Регулярный и Основной цвет:С
а Узор нету:ССС
Офлайн
Prince Bell
Prince Bell 14 августа 2012 21:13
+ 0 -
Prescilla, а в Photoshop CS4 как это сделать? Я делаю анимаию, а она просто переливается, а не двигается, СПАСИТЕ! kill

В общем, заняло много времени, но пусть будет не совсем так, как у вас, зато я довольна результатом... Столько мороки вызвала надпись...
В общем, вот:
Офлайн
Bakemono Angel 15 июня 2012 18:34
+ 0 -
Спасибо за урок ^^
--------------------
Офлайн
Prescilla 14 апреля 2012 00:36
+ 0 -
Se7en, рада что помогло)
--------------------
Офлайн
Se7en
Se7en 13 апреля 2012 22:37
+ 0 -
Prescilla пасибки =* помогло)))
Офлайн
Prescilla 13 апреля 2012 21:55
+ 0 -
Цитата: Se7en
Prescilla, Каким образом перетягивать ? 3 закладки, 3 разных файла, пытался, не вышло(

Заходи в пособие по Photoshop сделала для тебя инструкцию
Как перетянуть картинку в фотошопе CS5
--------------------
Офлайн
Se7en
Se7en 13 апреля 2012 21:00
+ 0 -
Prescilla, Каким образом перетягивать ? 3 закладки, 3 разных файла, пытался, не вышло(
Офлайн
Prescilla 13 апреля 2012 20:53
+ 0 -
Цитата: Se7en
Если растягивать руками картинка искажена(

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

Цитата: Se7en
перенести в оригинальном размере как нибудь можно ?

Можно. Открываешь картинку в фотошопе через файл>открыть. То есть у тебя получиться три окна: 1-твой юзербар, 2- картинка, 3- полоски.
Только потом перетягивай картинку и полоски на юзербар
--------------------
Офлайн
Se7en
Se7en 13 апреля 2012 20:38
+ 0 -
Prescilla, тогда у меня не равномерно получается, перенести в оригинальном размере как нибудь можно ?
Если растягивать руками картинка искажена( и полоски тоже искаженные (не равномерные получаются) если их после двигать влево для анимации они один в один не попадают(((
Офлайн
Prescilla 13 апреля 2012 19:31
+ 0 -
Цитата: Se7en
У меня почему то не выходит перетащить картинку, получается маленький квадрат:

Se7en, у вас все получается. Просто при таком переносе фотошоп CS5 сразу изменяет размер по вашему документу (по принципу трансформации). Вам необходимо зажать клавишу Shift и потянуть за любой угловой квадратик.
--------------------
Офлайн
Se7en
Se7en 13 апреля 2012 07:11
+ 0 -
У меня почему то не выходит перетащить картинку, получается маленький квадрат:



а если открываю как картинку, то при переносе текстуры с полосками, такая же беда выходит((((
Офлайн
Ren Mitsuko
Ren Mitsuko 17 марта 2012 20:00
+ 0 -
Получилось bx
Офлайн
Яцко Печенег
Яцко Печенег 18 февраля 2012 19:36
+ 0 -
мой юзербар - тормоз)))

Офлайн
Ket Адская Pierse 31 января 2012 12:12
+ 0 -
Prescilla,
а как добавить его на сайт себе?
Офлайн
Chail
Chail 17 августа 2011 01:17
+ 0 -
спасибо за урок smile я так ступила в начале)) я забывала переключать кадры и два раза переделывала буквы и не врубалась что такое) bb потом до меня дошло)) cc Вот что получилось ( я ешё добавила кое что из другого урока на сайте feel ) :
Офлайн
Yuzuru
Yuzuru 16 июля 2011 16:06
+ 0 -
Domo arigatou gozaimasu!
Вот оно мое творение
Офлайн
Prescilla 6 мая 2011 21:24
+ 0 -
Цитата: Sakurai Yuriko
Я не нашла текстуру такую в клеточку...где ее взять?

ТУТ
--------------------
Офлайн
Sincere 6 мая 2011 21:06
+ 0 -
Sakurai Yuriko, возможно тут есть
--------------------
Офлайн
Sakurai Yuriko
Sakurai Yuriko 6 мая 2011 20:02
+ 0 -
Я не нашла текстуру такую в клеточку...где ее взять?
Офлайн
Sincere 5 марта 2011 13:59
+ 0 -
"Идем на первый кадр. Выбираем в палитре слоев слой с буквами и дублируем его 15 раз (всего получиться 16 слоев с текстом)."
с этих слов я зависла! вообще не понимаю! что там нужно делать??


ну т.е нажимаеш на первый кадр, дальше в палитре слоев нажимаеш на слой с текстом, правой кнопкой по нему - dublicate layer..и так 15 раз)
--------------------
Офлайн
АнтиС
АнтиС 5 марта 2011 13:43
+ 0 -
ООО! Теперь получилось! спасибо Sincere!

"Идем на первый кадр. Выбираем в палитре слоев слой с буквами и дублируем его 15 раз (всего получиться 16 слоев с текстом)."
с этих слов я зависла! вообще не понимаю! ak что там нужно делать???
Офлайн
Sincere 3 марта 2011 21:15
+ 0 -
Цитата: Animeshka kawaii
"Теперь передвигаем слой с косыми линиями влево, аккуратно с помощью клавиши влево на клавиатуре...."блин у меня не двигается (фш CS4)


Что бы передвигать картинку клавишей на клавиатуре нужно:
1. выбрать слой, который хочешь передвинуть
2.выбрать в панели инструментов Muve Tool (перемещение, клавиша V)
--------------------
Офлайн
АнтиС
АнтиС 3 марта 2011 20:10
+ 0 -
Я сдесь зависла "Теперь передвигаем слой с косыми линиями влево"... как это сделать??? я не как не пойму... bj
Офлайн
Prescilla 18 февраля 2011 21:59
+ 0 -
Цитата: hardstyle1
где скачать шрифт гранж?

вообще в интернете, а тот который использовала в уроке я тут
--------------------
Офлайн
hardstyle1
hardstyle1 15 февраля 2011 20:15
+ 0 -
где скачать шрифт гранж? cheers
Офлайн
Halibel
Halibel 28 января 2011 23:22
+ 0 -
спасиб за урок
Офлайн
Tachkent
Tachkent 13 января 2011 11:29
+ 0 -
Спасибо, а где можно скачать шрифт "гранж"?
Юзербар я не делал, попробовал сделать так Аватарку, но на большом как то у меня плохо вышло...
Офлайн
Saumix 8 января 2011 16:19
+ 0 -
классный урок, но скажите плиз че это за шрифт
--------------------
Добавить комментарий
    • bxbybzcacb2cc2cd
      cecfcgchcicjck
      clcmcpcsctcucv
      cwdadbdcsleepaoknow2
      burpfuriousccazslobbersm32bj
      arfearfeelbusm28sm16be
      killshyslapfascinatedalnotlove
      helloakangrybbapeaylol
      kisssmilecbdelightedyesknowwhat
      ancheerseh