Анимированный юзербар 3 (снег)

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

 

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

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

  

 

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

заготовка для юзербара

  

 

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

пишем текст на юзербаре

  

 

Теперь перейдем к созданию снега.

 

Создаем еще один новый документ размером 350х160px. Фоновый слой заливаем черным цветом и создаем новый слой. Затем переименовываем его в «снег»

создаем снег на юзербаре

  

 

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

Я использовала кисть Char_Paint_Splatter hfpvthjv 50px, которую можно скачать тут.

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

заливаем кисти для юзербара

  

 

Теперь выбираем слой «снег» и перетягиваем его на юзербар. Устанавливаем его так, что бы нижний край слоя со снегом стоял внизу юзербара.

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

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

  

 

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

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

  

 

Теперь передвигаем слой со снегом вниз, аккуратно с помощью клавиши вниз на клавиатуре.

На рисунке показано, как будет располагаться слой со снегом за пределами юзербара.

как будет располагаться слой со снегом

  

 

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

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

   


И сохраняем!

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

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

 сохранение анимированного юзербара

  

 

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

 

 

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

 

 

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

 

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

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

+ +61 -
Комментарии к Анимированный юзербар 3 (снег)
Офлайн
Wolfick 29 мая 2013 09:27
+ 0 -


Prescilla, а как вставлять анимацию в текст коментария?
Офлайн
мика-тян 8 января 2013 02:49
+ 0 -
Как то вот так ,да знаю в конце чуток опешила но думаю это простительно ))
Аригато за урок ^^
Офлайн
Yuki-can
Yuki-can 5 ноября 2012 22:19
+ 0 -
вот как-то так) спасибо большое)
Офлайн
Prince Bell
Prince Bell 14 августа 2012 20:01
+ 0 -
Спасибо, урок классный!
Вот результат:
Офлайн
Prescilla 26 июля 2012 00:13
+ 0 -
Вечная скиталица, хорошо вышло)
Снег красиво падает.
Только вот глаз наполовину виден, в следующий раз делайте, что бы его было видно больше или невидно вообще. Так как создается впечатление, что его случайно обрезали.
--------------------
Офлайн
Вечная скиталица
Вечная скиталица 25 июля 2012 17:21
+ 0 -
спасибоньки за урок furious

вот что у меня получилось



нормально??? shy
Офлайн
Proud KotE 4 мая 2012 19:53
+ 0 -
Спасибо за урок^^ Вот что получилось))) Ну не могла я устоять перед этими глазами ><
Офлайн
Yuki^^
Yuki^^ 11 марта 2012 15:37
+ 0 -
Аригатошеньки^^

только вот результат не умею выкладывать((((
Офлайн
Kawaii_Witch
Kawaii_Witch 22 февраля 2012 11:30
+ 0 -

СпасибкО за урок, классный! kiss
Офлайн
Vlada4ka
Vlada4ka 26 ноября 2011 08:12
+ 0 -
Сяб! Круто получилось!
Офлайн
Византия
Византия 27 февраля 2011 16:48
+ 0 -
спасиииибо fascinated
мне этот урок очень помог
Офлайн
LA Mossa
LA Mossa 23 января 2011 17:04
+ 0 -
Ну вот, я сделала по инструкции.

Офлайн
Алиса Кровавый Кроля
Алиса Кровавый Кроля 16 января 2011 11:32
+ 0 -
Огромнейшее спасибочки bj У меня всё вышло
Офлайн
Bes
Bes 8 января 2011 22:01
+ 0 -
Вроде получилось то что хотел))) Жалко слишком размер большой получился.

Офлайн
Bes
Bes 4 января 2011 17:06
+ 0 -
Спасибо! Только у меня там ещё один файл был tw12508 я его удалил, остался только tw10428, теперь всё сохраняется, хотя я пробовал несколько разных версий, с разными русификаторами, получается оба кривые были, а я голову всю сломал.
Офлайн
Prescilla 4 января 2011 14:28
+ 0 -
Если при сохранении для вэб фотошоп слетает или выдает ошибку - то проблема чаще всего кроется в том, что вы используете кривой русификатор.

Достаточно вернуть назад родной языковой файл tw10428 в папке Adobe\Adobe Photoshop CS3\Required и будет работать, как положено.
--------------------
Офлайн
Bes
Bes 4 января 2011 14:19
+ 0 -

При сохранении конечного результата выдаёт такую ошибку и закрывается.



Может чего делаю не так???
Офлайн
Prescilla 3 января 2011 20:13
+ 0 -
Цитата: Bes
Для новичка сложновато... Много моментов пропущено, куда нажимать, что выбирать, куда заходить. Было бы куда лучше если бы был видео урок.

Не вижу ни каких пропущенных моментов... Возможно, вам стоит выучить или хотя бы ознакомиться с основами.

Цитата: Bes
1. Можно ли сделать это на CS3?

Да, можно.

Цитата: Bes
2. При выборе кисти можно ли сделать так что бы снег автоматически рассеялся по всему слою с разным диаметром, а то самому наносить как то не особо красиво выходит.

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

Цитата: Bes
3. Как сделать так что бы при переносе слоя снег на юзер бар был зелёный фон? При переносе слоя снег нету зелёного фона и слой снег становится такого же размера как и юзер бар.

А собственно, зачем вам зеленый фон? Им я обозначила, как будет выглядеть слой со снегом за пределами юзербара.

Цитата: Bes
4. Может ли кто-нибудь сделать видео урок и залить его на ютуб?

Не вижу в этом нужды.
--------------------
Офлайн
Bes
Bes 3 января 2011 19:37
+ 0 -
Для новичка сложновато... Много моментов пропущено, куда нажимать, что выбирать, куда заходить. Было бы куда лучше если бы был видео урок.
У меня есть несколько вопросов:
1. Можно ли сделать это на CS3?
2. При выборе кисти можно ли сделать так что бы снег автоматически рассеялся по всему слою с разным диаметром, а то самому наносить как то не особо красиво выходит.
3. Как сделать так что бы при переносе слоя снег на юзер бар был зелёный фон? При переносе слоя снег нету зелёного фона и слой снег становится такого же размера как и юзер бар.
4. Может ли кто-нибудь сделать видео урок и залить его на ютуб?
Офлайн
Prescilla 16 декабря 2010 20:28
+ 0 -
Цитата: Haruka DolL
"Создаем новый документ (Ctrl + N), размером 350х40px и переносим туда картинку."я ваще не понимаю как перенести..херь какая-то!

Прежде чем писать какие то возмущения по поводу урока прочтите комментарии выше. Перенос картинки уже обсуждался.
--------------------
Офлайн
Haruka DolL
Haruka DolL 16 декабря 2010 20:14
+ 0 -
"Создаем новый документ (Ctrl + N), размером 350х40px и переносим туда картинку."

я ваще не понимаю как перенести..херь какая-то! fear
Офлайн
Arionell
Arionell 9 декабря 2010 16:31
+ 0 -
Суперский урок *-*
Офлайн
ТаКЕШКА
ТаКЕШКА 5 декабря 2010 19:39
+ 0 -
долго мучилась и втыкала sleep
Офлайн
Skelet
Skelet 30 ноября 2010 19:59
+ 0 -
Prescilla,
Спасибки , обязательно выложу что получилось
вот
Офлайн
Prescilla 29 ноября 2010 20:00
+ 0 -
Цитата: Skelet
Кстати как мне ее выложить , Prescilla???

выложи на radikal.ru, а потом ссылку сюда кинь.
--------------------
Офлайн
Skelet
Skelet 29 ноября 2010 19:15
+ 0 -
Я попробовал - все получилось !!!!
Супер!!! hello
(Кстати как мне ее выложить , Prescilla
??? what )
Офлайн
OnibladeTC
OnibladeTC 26 ноября 2010 08:41
+ 0 -
домо аригато love
Офлайн
Nagato
Nagato 25 ноября 2010 20:06
+ 0 -
Prescilla я двигаю у меня и 1 кадр двигается

удача
Офлайн
Prescilla 25 ноября 2010 17:16
+ 0 -
Цитата: Nagato
Prescilla если я двигаю один и тодже снег то у меня сохраняется простая картинка

Слой со снегом нужно двигать вниз, когда сделан 2 кадр и ты туда перешел. Внимательнее читай урок, там все написано.
--------------------
Офлайн
Nagato
Nagato 25 ноября 2010 17:01
+ 0 -
Prescilla если я двигаю один и тодже снег то у меня сохраняется простая картинка
Добавить комментарий
    • bxbybzcacb2cc2cd
      cecfcgchcicjck
      clcmcpcsctcucv
      cwdadbdcsleepaoknow2
      burpfuriousccazslobbersm32bj
      arfearfeelbusm28sm16be
      killshyslapfascinatedalnotlove
      helloakangrybbapeaylol
      kisssmilecbdelightedyesknowwhat
      ancheerseh