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

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

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

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

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

\"девушка

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

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

\"девушка

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

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

\"создание

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

\"как

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

\"Теперь

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

\"заливаем

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

\"Переносим

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

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

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

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

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

\"И

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

\"Теперь

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

\"Для

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

\"Создаем

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

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

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

\"Отключаем

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

\"Запускаем

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

\"Для

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

\"Теперь

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

\"

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

\"Опускайте

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

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

\"Теперь

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

\"Затем

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

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

\"Создаем

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

И сохраняем!

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

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

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

\"Юзербар\"

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

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

    Спасибо, мне понравилось) az Вот что у меня получилось:

  2. Асуна

    Большое спасибо :смиле:

  3. L.E.F.T.

    Получилось с первого раза! Оказывается, я не такой уж и бездарь))) feel

  4. Vanilla_girl

    Воть)) Что получилось)

  5. Yuki-can

    Получилось) Большое спасибо))

  6. Anglichanka

    Всё вышло! Спасибо, за урок!

  7. Shadow090102

    Спс вот что получилось …

  8. L-ка

    я новенький .а как добавлять юзербар к себе в профиль? what извиняйте за тупой вопрос sm28

  9. Grom

    Классный урок спс sleep Еще хочу уроки еще

  10. yachiru

    Отличный урок furious ,у мну получилсь класно(точно такой же юзербар) sm16

  11. Zurik

    А можно с таким же успехом зделать аватар yes

  12. Маленькая позитифка

    Аригато за такой отличный урок ^______^

  13. Essa

    спасибушки :3
    отличный урок

  14. stalfox

    уряяяя !!!! получилось az

  15. CATAHA

    Прикольно) я учиться) ape

  16. ТаКЕШКА

    круто! оч круто! furious

  17. Prescilla

    Aloed и ISE Rose

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

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

  18. ISE Rose

    Prescilla,
    у меня Adobe Photoshop CS3

  19. Prescilla

    Цитата: Aloed
    я создаю, сохраняю как веб і меня выкідывает із программы((


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

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


    ISE Rose, какая версия фотошопа?

  20. ISE Rose

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

  21. Aloed

    я создаю, сохраняю как веб і меня выкідывает із программы((

  22. Altin^Gul

    Prescilla, спасибо всё получилось furious , я поняла свою ошибку. eh

  23. Phantom_of_Smile(

    Полезный урок, спасибо)

  24. Prescilla

    Цитата: Altin^Gul
    А по какой причине она может не опускаться???


    Что бы передвигать картинку клавишей вниз на клавиатуре нужно:
    1. выбрать слой, который хочешь передвинуть
    2.выбрать в панели инструментов Muve Tool (перемещение, клавиша V)

  25. Altin^Gul

    [hide] Для второго кадра опускаем девочку вниз (Опускайте аккуратно с помощью клавиши вниз на клавиатуре) [/hide]
    what У меня не опускается картинка((( Из-за чего это может быть??? (возможно ли такое из-за того, что обе картинки с фоном, но однотонным)

  26. Prescilla

    Цитата: XDLIS
    а где эта панель анимации ?

    Заходишь в Window -> Animation (Окно>Анимация)

  27. XDLIS

    клас ща попробую

    а где эта панель анимации ? know2

  28. Angel_of_Light

    Спасибо, классный урок yes

  29. Altin^Gul

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

  30. zerozold

    Хороший урок. Можно еще плавный переход сделать с первой картинки на вторую

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

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