Анимированный юзербар 4 (дождь)

Анимированный юзербар на котором будет идти дождь

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

\"аниме

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

\"Создаем

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

\"Пишем

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

Создаем новый слой (можно как поверх слоя с буквами, так и под) и заливаем его черным цветом. Затем переименовываем его в «дождь 1».

\"Теперь

Идем в меню Filter -> Noise -> Add Noise (фильтр>шум>добавить шум). И выставляем следующие параметры (как на скрине): Amount – 400%, Distribution – Gausian(отмечаем) и внизу отмечаем галлочку Monochromatic.

\"выставляем

Идем в меню Filter ->Blur ->Motion Blur (фильтр>размытие>размытие в движении). Значение Angle выбираем по вкусу (от него зависит направление дождя), Distance ставим в районе 35.

\"направление

Теперь настроем дождик…

Для слоя с дождем выставляем прозрачность 70% и пробуем разные режимы наложения слоев. Он может быть разный, в зависимости от выбранной картинки. В моем случае- это Screen.

Если вас не устраивает густота дождя, можно изменить ее с помощью меню Image -> Adjustmens -> Levels (Ctrl+L), где с помощью ползунков регулируем плотность дождика по вкусу.

\"густота

Создаем еще 2 слоя «дождь 2» и «дождь 3» и повторяем все операции как со слоем «дождь 1». Меняя только Distance (в Blur ->Motion Blur) на 45 и 55.

Однако, помните если вы захотите схалтурить и скопируете слой «дождь 1» два раза у вас ни чего не получиться, потому как дождь будет на всех слоях одинаковый .

Затем переходим на слой «дождь 1» и отключаем «дождь 2» и «дождь 3».

\"настройки

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

\"Анимация

Для второго кадра включаем слой «дождь 2» и отключаем «дождь 1» и «дождь 3».

\"кадры

Создаем еще один, третий кадр, и включаем слой «дождь 3» и отключаем «дождь 1» и «дождь 2».

\"рисуем

И сохраняем!

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

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

\"Как

\"юзербар

\"юзербар

\"юзербар

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

Рейтинг
( Пока оценок нет )
Понравилась статья? Поделиться с друзьями:
Bakemono.RU
Комментарии: 73
  1. Angel prihoti

    Ну у меня как то так х)

  2. InFerNal

    Отличный урок) вот что у меня получилось)

  3. Inoe

    Вот чё у меня

  4. SARGTY


    как-то так

  5. Splendid.

    Цитата: Prescilla


    все понял, спасибо большое)

  6. Prescilla

    Цитата: Splendid.
    простите, я вот недавно только фотошоп установила. Но у меня кажется что то не то с анимацией. Это можно настроить как нибудь? о.оскрин:


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

  7. Splendid.

    простите, я вот недавно только фотошоп установила. Но у меня кажется что то не то с анимацией. Это можно настроить как нибудь? о.о
    скрин:

  8. Gumi

    ниче если я вашу картинку взяла..
    но у меня бред получился

  9. Halibel

    спс за урок_ правд мало похоже на дождь, но мне нравится

  10. Юса

    я графник сделала…….только жаль весит очень много,

    Tachkent,а мне нравиться az

  11. Tachkent

    Решил попробовать, получилась лажа bu

  12. Prescilla

    йа_Пе4еньkО_о картинка тут

    Цитата: NarratoR
    при изменение в Filter ->Blur ->Motion Blur параметра Distance 35 на 45 и на 55 этот параметр меняется на всех слоях, а не только на том который хочу поменять((( что делать?

    NarratoR, попробуй создать новый слой под слоем с настройками дождя. А затем слить их (Ctrl+E). Так проделай с каждым слоем дождя.
    Так же не пугайся, если при слитии слоев у тебя обнуляться настройки прозрачности и режимы наложения слоев, их можно возобновить. Главное чтобы слой присвоил настройки фильтра.

  13. Skelet

    спасибо !!!
    Отличный и полезный урок
    У меня так получилось, норм???

  14. Archi

  15. Nagato

    У меня чтото типо этого

  16. Dbaks

    Ню что-то типа того) Спасибки за урок) yes

  17. Animeshka kawaii

    shy
    какой то не такой у меня дождик получился…(

  18. Krakan

    Цитата: Nastya011108
    Проблемка: у меня Photoshop CS6, когда захожу в "Окно" там нет "Анимации".
    Что делать и где найти? al

    В правом верхнем углу, выбрать режим Motion

  19. Nastya011108

    Проблемка: у меня Photoshop CS6, когда захожу в "Окно" там нет "Анимации".
    Что делать и где найти? al

  20. kiritokun

    ну вот что типо этого

  21. SielKA2003

    Подскажите пожалуйста шрифт ci

  22. Wolfick

    fascinated Урок просто отличный и очень полезный:33….вот только как в сообщения анимацию вставлять?:D

  23. мика-тян


    С обводкой текста получилось случайно .Но кажется это даже прикольно )

  24. Yuki-can

    всё получилось)спасибо большое)

  25. InuKenNur92

    Уряяяяяяя))) cheers
    У меня всё получилось….аригато за чудесный урок…3 часа мучилась be
    Правда у меня немножко чёрненький дождик вышел cl …ну ничего. love ..мне лично нравится delighted ,а Вам? fascinated

  26. Prince Bell

    Спасибо, очень увлекательный урок, вот, что вышло:

  27. Kisonika

    Спасибо получилось:з cb shy

  28. Proud KotE

    У меня не получается почему то…вроде всё правильно всё верно но не то…помогите пожалуйста fascinated

  29. Madness Silvia


    А вот что у меня!
    Ну как?
    (Просто я делала не юзербар, а баннер)

    Archi, а почему без анимации?

  30. affka

    спасибо за урок.
    вроде нормально получилось
    http://radikal.ru/F/s019.radikal.ru/i621/1204/06/79e413ec3ead.gif.html

  31. Hideyasu yuki

    ВиккиТут, у тебя просто яркость одного слоя с дождём больше, чем у другого. Из-за этого у тебя не очень хорошо получилось…

    Alice888, ты напиши , на какой пункт в файле ты сохраняешь.

  32. PalmaSama

    спасибо за урок db

    вот, что получилось *—*

  33. Ren Mitsuko

    Krakan,
    Сделала на Фотомонстре, ибо на Радикале не получается
    Все равно, спасибо fascinated

  34. Krakan

    Цитата: Ren Mitsuko
    Есть вопрос: почему я не могу загрузить свой юзербар?


    Залейте его на radikal.ru, а потом вставьте сюда ссылку

  35. Ren Mitsuko

    Спасибо за урок az
    Есть вопрос: почему я не могу загрузить свой юзербар? cj

  36. Krakan

    Цитата: Hitomi
    можно вопрос у администратора а как сделать вобще какую програму качать


    Photoshop CS5

  37. Hitomi

    можно вопрос у администратора а как сделать вобще какую програму качать

  38. Krakan

    Цитата: Inudzuki_San
    А что это за программа


    Photoshop CS5

  39. Inudzuki_San

    А что это за программа……. what …..

    А дайте пожалуйсто…. kiss

  40. Sirinn

    Помогите:

  41. moni-chan

    У меня не получаеться анимацией сделать eh поэтому только так)

  42. Last Exile


    Думаю на первый раз сойдет

  43. karina o.o

    аа пасип ._. пичаль конечно щас уберу его

  44. Krakan

    Цитата: karina o.o
    ._. у меня вообще при сохранении закрывается фш оО


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

  45. karina o.o

    ._. у меня вообще при сохранении закрывается фш оО

  46. KeltikA

    А как сделать юзебар на Uhlead Photoimpact 12? Все смогла сделать, а где из всего этого анимацию слепить не нашла…( КТО ЗНАЕТ, ПОМОГИТЕ!

  47. Prescilla

    Цитата: Sakurai Yuriko
    я сделала но как сюда кинуть никак не пойму(((


    выкладывай на radikal.ru, а потом ссылку картинки сюда

  48. Sakurai Yuriko

    я сделала но как сюда кинуть никак не пойму(((

  49. Bankeko

    Спасибо за урок очень интересно

  50. mikitosina

    чумаааааааа!!!! афигенски =Ь пасиба башоя,думаю пригодится

  51. Maka Sensei

    оооо..супер=)
    получилось круто.. slobber

  52. vlaov.vano

    spasibo klass! мне очень помогло!!!

  53. Византия

    урок прикольный ay cb
    у меня всё получилось

  54. row

    спасиб за помощь воть вроде чтото получилось feel

  55. Prescilla

    Цитата: •Queen•Violet
    ….у меня все плохо…как толькро я нажимаю Файл/ сохранить для Web фотошоп закрывает свое окно…Проблема:что я сделала ни так?


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

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

  56. •Queen•Violet

    ….у меня все плохо…как толькро я нажимаю Файл/ сохранить для Web фотошоп закрывает свое окно…
    Проблема:что я сделала ни так?

  57. NarratoR

    при изменение в Filter ->Blur ->Motion Blur параметра Distance 35 на 45 и на 55 этот параметр меняется на всех слоях, а не только на том который хочу поменять((( что делать?

  58. йа_Пе4еньkО_о

    Prescilla,а картинку эту можно здесь скачать?очень понравилась delighted

  59. Altin^Gul

    Огромное спасибо за урок fascinated furious az

  60. Prescilla

    Цитата: Skelet
    У меня так получилось, норм???


    получилась хорошая анимация ay

  61. Prescilla

    Цитата: Alice888
    Вообще не двигается == хотя делала тоже самое что вы и говорили


    Не смотря на то что анимация кажется достаточно простой, она требует внимания… А допустив малейшую ошибку на любом этапе, может привести к такой проблеме.
    Главная ошибка это когда копируют слой «дождь 1» (на любом этапе) вместо создания нового…или же неправильно включают слоя для кадров.

  62. Alice888

    Вообще не двигается == хотя делала тоже самое что вы и говорили

  63. Prescilla

    Цитата: Alice888
    анимация не работает перед сохранением

    Если анимация не работает перед сохранением, то что то напутано со слоями!
    На 1 кадре должен быть включен только «дождь 1»
    На 2 кадре только «дождь 2»
    На 2 кадре только «дождь 3»

    Цитата: Alice888
    я создаю кадр с дождь1, потом переключаю на дождь2 и создаю второй кадр, правильно?

    Создаешь кадр 1 с «дождь 1», потом создаешь кадр 2 и только потом переключаешь на «дождь 2»

    Прочитай внимательно урок, там все написано и даже скрины есть

    Цитата: Nagato
    Скажите а какие кисти сдесь используются

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

  64. Nagato

    Скажите а какие кисти сдесь используются

  65. Alice888

    Prescilla/ Как раз таки анимация не работает перед сохранением. Но вот я создаю кадр с дождь1, потом переключаю на дождь2 и создаю второй кадр, правильно?

    извиняюсь, чот текст сполз оо

  66. Prescilla

    Alice888, у меня не было никогда проблем при сохранении в CS5… Проверь внимательно, правильно ли ты выставил все кадры и работает ли у тебя анимация перед сохранением.

  67. ВиккиТут

    Prescilla хорошо еще раз попробую_)

  68. Prescilla

    Animeshka kawaii, попробуй поставить другие параметры в Angle и Distance ( Filter ->Blur ->Motion Blur)

    ВиккиТут, прочитай внимательно урок. У тебя в анимации меняется не только дождь, но и сама фоновая картинка! На последнем кадре вообще не видно фоновой картинки, а лишь капли дождя

  69. ВиккиТут


    чет не получилось

  70. Alice888

    А я сохраняю как GIF, а она всё равно не двигается .-. (Adobe Photoshop CS5)

  71. Dbaks

    Цитата: MAKS anime fan
    У тя ливень прям


    Нормально, мне нрава))

  72. MAKS anime fan

    Цитата: Dbaks
    Ню что-то типа того) Спасибки за урок)


    У тя ливень прям (спасибо) всё получается но пихать сюда впадлу так бы показал чё получилось.

  73. sk66

    Animeshka kawaii попробуй снова, со временем получиться))
    ну а по теме то я давно хотел научиться делать подобную анимацию на баре,так что огромное спасибо))

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:
Нажимая на кнопку "Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности.