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

Урок по созданию анимированного юзербара на котором падает снег.

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

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

\"картинка

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

\"заготовка

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

\"пишем

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

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

\"создаем

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

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

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

\"заливаем

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

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

\"Расположение

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

\"Запускаем

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

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

\"как

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

\"создания

И сохраняем!

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

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

\"сохранение

\"анимированный

\"анимированный

\"анимированный 

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

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

    вот что получается

  2. FISH


    вот lol

  3. Wolfick

    Prescilla, а как вставлять анимацию в текст коментария?

  4. мика-тян

    Как то вот так ,да знаю в конце чуток опешила но думаю это простительно ))
    Аригато за урок ^^

  5. Yuki-can

    вот как-то так) спасибо большое)

  6. Prince Bell

    Спасибо, урок классный!
    Вот результат:

  7. Prescilla

    Вечная скиталица, хорошо вышло)
    Снег красиво падает.
    Только вот глаз наполовину виден, в следующий раз делайте, что бы его было видно больше или невидно вообще. Так как создается впечатление, что его случайно обрезали.

  8. Вечная скиталица

    спасибоньки за урок furious

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

    нормально??? shy

  9. Proud KotE

    Спасибо за урок^^ Вот что получилось))) Ну не могла я устоять перед этими глазами ><

  10. Yuki^^

    Аригатошеньки^^

    только вот результат не умею выкладывать((((

  11. Kawaii_Witch


    СпасибкО за урок, классный! kiss

  12. Vlada4ka

    Сяб! Круто получилось!

  13. Византия

    спасиииибо fascinated
    мне этот урок очень помог

  14. LA Mossa

    Ну вот, я сделала по инструкции.

  15. Алиса Кровавый Кроля

    Огромнейшее спасибочки bj У меня всё вышло

  16. Bes

    Вроде получилось то что хотел))) Жалко слишком размер большой получился.

  17. Bes

    Спасибо! Только у меня там ещё один файл был tw12508 я его удалил, остался только tw10428, теперь всё сохраняется, хотя я пробовал несколько разных версий, с разными русификаторами, получается оба кривые были, а я голову всю сломал.

  18. Prescilla

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

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

  19. Bes

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

    Может чего делаю не так???

  20. Prescilla

    Цитата: Bes
    Для новичка сложновато… Много моментов пропущено, куда нажимать, что выбирать, куда заходить. Было бы куда лучше если бы был видео урок.


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

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


    Да, можно.

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


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

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


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

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


    Не вижу в этом нужды.

  21. Bes

    Для новичка сложновато… Много моментов пропущено, куда нажимать, что выбирать, куда заходить. Было бы куда лучше если бы был видео урок.
    У меня есть несколько вопросов:
    1. Можно ли сделать это на CS3?
    2. При выборе кисти можно ли сделать так что бы снег автоматически рассеялся по всему слою с разным диаметром, а то самому наносить как то не особо красиво выходит.
    3. Как сделать так что бы при переносе слоя снег на юзер бар был зелёный фон? При переносе слоя снег нету зелёного фона и слой снег становится такого же размера как и юзер бар.
    4. Может ли кто-нибудь сделать видео урок и залить его на ютуб?

  22. Prescilla

    Цитата: Haruka DolL
    "Создаем новый документ (Ctrl + N), размером 350х40px и переносим туда картинку."я ваще не понимаю как перенести..херь какая-то!


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

  23. Haruka DolL

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

    я ваще не понимаю как перенести..херь какая-то! fear

  24. Arionell

    Суперский урок *-*

  25. ТаКЕШКА

    долго мучилась и втыкала sleep

  26. Skelet

    Prescilla,
    Спасибки , обязательно выложу что получилось
    вот

  27. Prescilla

    Цитата: Skelet
    Кстати как мне ее выложить , Prescilla???


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

  28. Skelet

    Я попробовал – все получилось !!!!
    Супер!!! hello
    (Кстати как мне ее выложить , Prescilla
    ??? what )

  29. OnibladeTC

    домо аригато love

  30. Nagato

    Prescilla я двигаю у меня и 1 кадр двигается

    удача

  31. Prescilla

    Цитата: Nagato
    Prescilla если я двигаю один и тодже снег то у меня сохраняется простая картинка


    Слой со снегом нужно двигать вниз, когда сделан 2 кадр и ты туда перешел. Внимательнее читай урок, там все написано.

  32. Nagato

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

  33. Prescilla

    Цитата: Nagato
    нужно новый снег передвигать или этотже?


    Nagato, этот же слой со снегом двигаем вниз (слой со снегом должен быть только 1)

  34. Nagato

    Prescilla а нужно создавать слои

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

    нужно новый снег передвигать или этотже?

  35. Prescilla

    Nagato, надпись не читается (смените цвет либо добавьте обводку), Картинка не просматривается (не понятно, что там нарисовано), а снег не идет, а мигает (я так понимаю у вас 2 слоя со снегом, один стоит на месте, а другой мигает)

  36. Prescilla

    Цитата: Nagato
    Prescilla а как перетащить снег на картинку?

    Nagato, сделала урок по работе со слоями. Тут подробно описано как перетаскивать картинку.

  37. Nagato

    Prescilla а как перетащить снег на картинку?

  38. Генерал Утюгов

    Ну как? ^^
    Я немного подругому сделал..

  39. MAKS anime fan

    Пойдёт я тож занимаюсь именно изготовлением юб.

  40. Animeshka kawaii

    Юхууууу!!получилось!!!Х))) furious

  41. Dbaks

    Круууууть) Спасибо) slobber

  42. Altin^Gul

    ОГРОМНОЕ СПАСИБО fascinated

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

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