Анимированный юзербар 5 (динамика)

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

Натсу без заднего фона

 

 

Создаем новый документ (Ctrl + N), размером 350х40px. Заливаем его черным цветом.

Заливаем его черным цветом

  

 

Перемещаем вырезанного персонажа на созданный юзербар и устанавливаем его в левом углу. А затем переименовываем его в «Natsu1»

Натсу на юзербаре

 

  

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

 Выбираем инструмент Paint Bucket (Заливка). В параметрах выставляем Pattern (Узор) и выбираем в выпадающем списке текстуру. Заливаем слой и выставляем параметры для слоя Multiply (умножение), Opacity(прозрачность) 80% и Fill 35%.

Создание юзербара

  

 

Пишем любой текст, любым шрифтом.

Пишем любой текст, любым шрифтом

  

 

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

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

  

 

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

Переходим на слой «Natsu1» и дублируем его, нажав клавиши Ctrl+J, а затем переименовываем дубликат в «Natsu2».

 Оставаясь на слое «Natsu2» заходим в меню Filter>Blur>Motion Blur (Фильтр > Размытие > Размытие в движении), установите параметр Distance (Смещение) на 10px и Angle (Угол) на 0.

подготовим слоя для создания динамики движения

  

 

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

Розмытый юзербар

  

 

Теперь начнем создавать саму анимацию.

 Переходим на слой  «Natsu1» и отключаем слой «Natsu2»

Теперь начнем создавать саму анимацию

  

 

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

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

 

На втором кадре отключаем слой с текстом и нажимаем на кнопку создания промежуточных кадров. В окне выставляем количество кадров – 5.

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

  

 

Создаем новый кадр (8), отключаем слой «Natsu1» и включаем «Natsu2». С помощью стрелок на клавиатуре перемещаем слой «Natsu2» немного правее.

создаем кадр для юзербара

  

 

Создаем новый кадр (9), и с помощью стрелок на клавиатуре перемещаем слой «Natsu2» еще немного правее.

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

  

 

Опять создаем новый кадр (10), и с помощью стрелок на клавиатуре перемещаем слой «Natsu2» еще немного правее.

стрелок на клавиатуре перемещаем слой

  

 

Теперь делаем 11 кадр и отключаем слой «Natsu2» и включаем «Natsu1» и перемещаем с помощью стрелок на клавиатуре в правый угол.

Теперь делаем 11 кадр и отключаем слой

  

 

Теперь таким же способом двигаем Natsu назад в левый угол.

Создаем 12 кадр, отключаем  слой «Natsu1» и включить «Natsu2. На созданном 13 и 14 кадре также двигаем «Natsu2». А на 15 отключаем  «Natsu2» и включаем «Natsu1».

Теперь таким же способом двигаем Natsu назад в левый угол
  

 

Теперь подкорректируем время на кадрах.

 На 1 кадре выставляем 0,5 сек.

Теперь подкорректируем время на кадрах

  

 

На 11 кадре выставляем 0,2 сек.

юзербар с Натсу

  

 

И на последнем 15 кадре выставляем 0,2 сек.

И на последнем 15 кадре юзербара

  

И сохраняем!

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

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

Сохранение анимации 

  

 

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

 

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

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

+ +62 -
Комментарии к Анимированный юзербар 5 (динамика)
Офлайн
rash6484 22 февраля 2013 10:45
+ 0 -
как ставить юзербары на этом сайте
Офлайн
Prince Bell
Prince Bell 14 августа 2012 18:22
+ 0 -
Спасибо! Очень интересный урок delighted


Animan-kryt,
в СS4 железно можно сделать
Офлайн
InFerNal
InFerNal 1 августа 2012 06:16
+ 0 -
Очень хороший урок! все очень доступно рассказано.
Вот что у меня получилось)
У меня на картинки очень высокие потери так как не смог уложится в лимит одного сайта пришлось увеличить потери :-)
Офлайн
Animan-kryt
Animan-kryt 24 июля 2012 17:18
+ 0 -
Какая версия Фотошопа al
Офлайн
Sket
Sket 16 апреля 2012 21:29
+ 0 -
Большое спасибо за урок. love
- Результат:
Офлайн
Mugityan 5 февраля 2012 19:13
+ 0 -
У меня просто супер получилось!
--------------------
Лучшим каждому кажется то, к чему он имеет охоту
Офлайн
Mira_tan
Mira_tan 17 декабря 2011 06:36
+ 0 -
спс за урок и,адменистраторы,пожалуйста покажите урок с новыми анимаиями))очень прсим))
Офлайн
Жестко
Жестко 20 сентября 2011 17:17
+ 0 -
это где
know2 ao sleep furious cc
Офлайн
Yuzuru
Yuzuru 16 июля 2011 20:04
+ 0 -
Аригато за урок
Офлайн
TsuXna 21 мая 2011 19:08
+ 0 -
простите Prescilla-сан не подскажите че эт за шриф которим написали бакемоно ?
Офлайн
Xenon
Xenon 8 марта 2011 18:45
+ 0 -
Спс биг вот что у меня получилось вроде прикоольно
Офлайн
Византия
Византия 27 февраля 2011 15:05
+ 0 -
Спасибо отпадный урок love
Офлайн
Hazama
Hazama 27 февраля 2011 14:34
+ 0 -
Ох!! Спс. Хоть тут есть для CS4!!!!
Офлайн
energizer
energizer 10 февраля 2011 00:01
+ 0 -
ay классный урок и лёгкий и занятный...+ можно применять по разному...что оч полезно для обучения
Офлайн
Prescilla 6 февраля 2011 22:34
+ 0 -
Цитата: Gumi
а почему у меня в ФШ нету панели анимации

Gumi, в более ранних версиях анимация делается через ImageReady.
Более подробно как переходить из Photoshop в ImageReady, а так же как там сохранить анимацию, прочитайте тут

--------------------
Офлайн
Gumi
Gumi 6 февраля 2011 22:15
+ 0 -
а почему у меня в ФШ нету панели анимации cheers
Офлайн
HAKK28
HAKK28 1 февраля 2011 05:45
+ 0 -
сложновато но за урок большущий респект !!!!
Офлайн
LA Mossa
LA Mossa 13 января 2011 17:54
+ 0 -
Прочитала урок и загорелась желанием освоить фитошоп!!
Первые работы^^

Офлайн
TsuXna 29 декабря 2010 11:39
+ 0 -
круто)) попробую самому сделать))
Офлайн
Kaiser
Kaiser 26 декабря 2010 00:35
+ 0 -
Hi there..
Thanks for the Tuts..



But not as Beautiful as you made bj

When I watch the video, i notice.. it seem i forgot something kill

http://www.youtube.com/watch?v=-NckZMnJFWc

Офлайн
Prescilla 16 декабря 2010 00:33
+ 0 -
Цитата: DaDahAka
Не очень хорошо вышло

я бы немного подняла картинку с Луффи вверх
--------------------
Офлайн
DaDahAka
DaDahAka 29 ноября 2010 23:26
+ 0 -




Не очень хорошо вышло
Офлайн
darkdampir
darkdampir 29 ноября 2010 23:11
+ 0 -

Получилось не очень Т_Т
Но мы будем стараться и рваться к звёздам!
Офлайн
Nagato
Nagato 27 ноября 2010 23:05
+ 0 -
Prescilla скачаю с удовольствием
Офлайн
Prescilla 27 ноября 2010 18:15
+ 0 -
Цитата: Nagato
если несикрет чё за шрифт хочу скачать?

как называется, не помню... но скоро выложу на сайте, что бы можно было скачать.
--------------------
Офлайн
Nagato
Nagato 27 ноября 2010 15:12
+ 0 -
Пробую сделать иесли несикрет чё за шрифт хочу скачать?


Вот
Офлайн
MAKS anime fan
MAKS anime fan 27 ноября 2010 00:33
+ 0 -
Ништяк.Будет чем заняться.Спасибо.
Добавить комментарий
    • bxbybzcacb2cc2cd
      cecfcgchcicjck
      clcmcpcsctcucv
      cwdadbdcsleepaoknow2
      burpfuriousccazslobbersm32bj
      arfearfeelbusm28sm16be
      killshyslapfascinatedalnotlove
      helloakangrybbapeaylol
      kisssmilecbdelightedyesknowwhat
      ancheerseh