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

Создание анимированного юзербара

 

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

 

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

 

Первая картинка должна быть крупной, что бы четко были видны глаза и черты лица.

Она может быть вырезанной или быть на белом фоне.

девушка с синим глазом

  

 

Вторая картинка должна быть меньше первой (смотрите по лицу).

Она может быть вырезанной или быть на цветном фоне.

девушка аниме с рогами и мечом

  

 

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

 

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

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

  

 

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

как картинка будет располагаться на юзербаре

 


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

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

  

 

Создаем новый слой и заливаем его любым градиентом (если у вас вторая картинка без заднего фона).

заливаем его любым градиентом

 

 

 Переносим вторую картинку, поверх слоя с градиентом. И устанавливаем ее самое нижнее положение.

Переносим вторую картинку, поверх слоя с градиентом

 

 

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

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

  

 

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

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

Заливаем новый слой. И выставляем параметры для слоя Multiply (умножение) и Fill 35%.

И выставляем параметры для слоя Multiply

 

  

Теперь пишем любой текст, любым шрифтом. Цвет выбираем любой, кроме белого.

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

  

 

Для текста делаем белую обводку любым способом (можно на новом слое, можно с помощью стилей слоев).

Для текста делаем белую обводку

 

 

Создаем новый слой и делаем на нем эффект объема (более подробно как его делать написано в уроке Создание юзербара в программе Photoshop).

Создаем новый слой и делаем на нем эффект объема

 

 

Все подготовки закончены и теперь мы приступим к созданию анимации!

 


Отключаем ненужные слои (слой с текстом, слой с градиентом, слой с BlackGold).

И включаем слой BlackRockShooter.

 Отключаем ненужные слои



Запускаем панель анимации. Выставляем для первого кадра - время 0,2сек. Затем создаем еще один кадр.

 Запускаем панель анимации в Фотошопе

  

 

Для второго кадра опускаем девочку вниз (Опускайте аккуратно с помощью клавиши вниз на клавиатуре).

Для второго кадра опускаем девочку вниз

 

 

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

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


 

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

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

  

 

Опять создаем новый кадр и опускаем девочку вниз (Опускайте аккуратно с помощью клавиши вниз на клавиатуре). После опять нажимаем на кнопку создания промежуточных кадров. И выставляем количество кадров – 10.

Опускайте аккуратно с помощью клавиши вниз на клавиатуре

  

 

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

Для этого мы переходим на 13 кадр и ничего не меняем.

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

  

 

Затем идем на 14 кадр и отключаем обводку. 15 кадр - не трогаем, 16 - отключаем и так далее до 23 кадра (23 кадр с обводкой).

Затем идем на 14 кадр и отключаем обводку.

  

 

Переходим на 24 кадр и делаем новый 25 кадр, затем возвращаемся на 24 и отключаем обводку. Переходим на 25 кадр и выставляем время 0,1сек.

 

Создаем новый 26 кадр и нажимаем на кнопку создания промежуточных кадров. И выставляем количество кадров – 10.

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

  

 

После переходим на 26 кадр и отключаем обводку. 27 кадр - не трогаем, 28 - отключаем и так далее до конца.

 

И сохраняем!

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

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

 Сохранение анимации в Photoshop CS5

   

 

Юзербар

 

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

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

+ +66 -
Комментарии к Анимированный юзербар 1
Офлайн
Асуна 1 августа 2013 19:41
+ 0 -
Большое спасибо :смиле:
Офлайн
L.E.F.T.
L.E.F.T. 8 марта 2013 11:50
+ 0 -
Получилось с первого раза! Оказывается, я не такой уж и бездарь))) feel
Офлайн
Vanilla_girl
Vanilla_girl 11 февраля 2013 12:42
+ 0 -

Воть)) Что получилось)
Офлайн
Yuki-can
Yuki-can 6 ноября 2012 11:56
+ 0 -
Получилось) Большое спасибо))
Офлайн
Anglichanka
Anglichanka 15 июня 2012 11:13
+ 0 -
Всё вышло! Спасибо, за урок!
Офлайн
Shadow090102 31 мая 2012 13:43
+ 0 -
Спс вот что получилось ...
Офлайн
L-ка
L-ка 5 мая 2012 16:37
+ 0 -
я новенький .а как добавлять юзербар к себе в профиль? what извиняйте за тупой вопрос sm28
Офлайн
Grom
Grom 13 марта 2012 18:27
+ 0 -
Классный урок спс sleep Еще хочу уроки еще
Офлайн
yachiru 8 октября 2011 17:22
+ 0 -
Отличный урок furious ,у мну получилсь класно(точно такой же юзербар) sm16
Офлайн
Zurik
Zurik 7 сентября 2011 18:57
+ 0 -
А можно с таким же успехом зделать аватар yes
Офлайн
Маленькая позитифка
Маленькая позитифка 30 апреля 2011 12:13
+ 0 -
Аригато за такой отличный урок ^______^

Офлайн
Essa 22 марта 2011 18:47
+ 0 -
спасибушки :3
отличный урок
Офлайн
stalfox
stalfox 18 января 2011 06:19
+ 0 -
уряяяя !!!! получилось az
Офлайн
CATAHA
CATAHA 13 января 2011 20:01
+ 0 -
Прикольно) я учиться) ape
Офлайн
Tachkent
Tachkent 13 января 2011 09:35
+ 0 -
Спасибо, мне понравилось) az Вот что у меня получилось:
Офлайн
ТаКЕШКА
ТаКЕШКА 26 ноября 2010 16:55
+ 0 -
круто! оч круто! furious
Офлайн
Prescilla 14 ноября 2010 13:04
+ 0 -
Aloed и ISE Rose

Если при сохранении для вэб фотошоп слетает или выдает ошибку - то проблема чаще всего кроется в том, что вы используете кривой русификатор.

Достаточно вернуть назад родной языковой файл tw10428 в папке Adobe\Adobe Photoshop CS3\Required и будет работать, как положено.

--------------------
Офлайн
ISE Rose
ISE Rose 14 ноября 2010 12:30
+ 0 -

Prescilla,
у меня Adobe Photoshop CS3
Офлайн
Prescilla 14 ноября 2010 10:02
+ 0 -
Цитата: Aloed
я создаю, сохраняю как веб і меня выкідывает із программы((

у меня никогда такого не было... возможно у тебя что то с фотошопом, попробуй установить паралельно другую версию (например Adobe Photoshop CS 8.0, там анимация через ImageReady)

Цитата: ISE Rose
меня тоже..я какой раз пытаюсь сохранить..а мне просто ошибку выдает и всё(((((

ISE Rose, какая версия фотошопа?
--------------------
Офлайн
ISE Rose
ISE Rose 14 ноября 2010 09:33
+ 0 -
меня тоже..я какой раз пытаюсь сохранить..а мне просто ошибку выдает и всё(((((
Офлайн
Aloed
Aloed 9 ноября 2010 21:41
+ 0 -
я создаю, сохраняю как веб і меня выкідывает із программы((
Офлайн
Altin^Gul
Altin^Gul 9 ноября 2010 01:34
+ 0 -
Prescilla, спасибо всё получилось furious , я поняла свою ошибку. eh
Офлайн
Phantom_of_Smile(
Phantom_of_Smile( 9 ноября 2010 00:58
+ 0 -
Полезный урок, спасибо)
Офлайн
Prescilla 9 ноября 2010 00:52
+ 0 -
Цитата: Altin^Gul
А по какой причине она может не опускаться???

Что бы передвигать картинку клавишей вниз на клавиатуре нужно:
1. выбрать слой, который хочешь передвинуть
2.выбрать в панели инструментов Muve Tool (перемещение, клавиша V)
--------------------
Офлайн
Altin^Gul
Altin^Gul 9 ноября 2010 00:44
+ 0 -
Для второго кадра опускаем девочку вниз (Опускайте аккуратно с помощью клавиши вниз на клавиатуре)
what У меня не опускается картинка((( Из-за чего это может быть??? (возможно ли такое из-за того, что обе картинки с фоном, но однотонным)
Офлайн
Prescilla 8 ноября 2010 21:53
+ 0 -
Цитата: XDLIS
а где эта панель анимации ?


Заходишь в Window -> Animation (Окно>Анимация)
--------------------
Офлайн
XDLIS
XDLIS 8 ноября 2010 21:10
+ 0 -
клас ща попробую

а где эта панель анимации ? know2
Офлайн
Angel_of_Light
Angel_of_Light 8 ноября 2010 21:05
+ 0 -
Спасибо, классный урок yes
Офлайн
Altin^Gul
Altin^Gul 7 ноября 2010 23:54
+ 0 -
ОГРОМНОЕ СПАСИБО fascinated
Офлайн
zerozold 7 ноября 2010 22:11
+ 0 -
Хороший урок. Можно еще плавный переход сделать с первой картинки на вторую
--------------------
Downloading free anime - You downloading communism!

I'm always on the positive

Добавить комментарий
    • bxbybzcacb2cc2cd
      cecfcgchcicjck
      clcmcpcsctcucv
      cwdadbdcsleepaoknow2
      burpfuriousccazslobbersm32bj
      arfearfeelbusm28sm16be
      killshyslapfascinatedalnotlove
      helloakangrybbapeaylol
      kisssmilecbdelightedyesknowwhat
      ancheerseh