В этом уроке мы рассмотрим, как создать анимированный юзербар с помощью программы Photoshop. В данном уроке будет использоваться Фотошоп С5 / Photoshop CS5.
Для создания анимированного юзербара нам потребуются две картинки и немного времени.
Первая картинка должна быть крупной, что бы четко были видны глаза и черты лица.
Она может быть вырезанной или быть на белом фоне.
Вторая картинка должна быть меньше первой (смотрите по лицу).
Она может быть вырезанной или быть на цветном фоне.
Создаем новый документ (Ctrl + N), размером 350х40px.
Перетаскиваем первую картинку на созданный документ и устанавливаем ее самое нижнее положение. Я решила, что мое нижнее положение будет начинаться с собачки замка кофты.
Если рассмотреть, как картинка будет располагаться на юзербаре, то получиться следующее: красная рамка – начальное положение, а все что находиться на желтом фоне, находиться за пределом юзербара и будет в дальнейшем опускаться при анимации.
Теперь отключаем слой с картинкой.
![\"Теперь](https://bakemono.ru/uploads/posts/2010-11/1289155794_6.jpg "\\"Теперь")
Создаем новый слой и заливаем его любым градиентом (если у вас вторая картинка без заднего фона).
Переносим вторую картинку, поверх слоя с градиентом. И устанавливаем ее самое нижнее положение.
Расположение картинки на юзербаре: красная рамка – начальное положение, а все что находиться на желтом фоне, находиться за пределом юзербара и будет в дальнейшем опускаться при анимации.
Создаём новый слой.
Выбираем инструмент Paint Bucket (Заливка). В параметрах выставляем Pattern (Узор) и выбираем в выпадающем списке текстуру. Выставляем Opacity(прозрачность) 60%.
Заливаем новый слой. И выставляем параметры для слоя Multiply (умножение) и Fill 35%.
Теперь пишем любой текст, любым шрифтом. Цвет выбираем любой, кроме белого.
Для текста делаем белую обводку любым способом (можно на новом слое, можно с помощью стилей слоев).
Создаем новый слой и делаем на нем эффект объема (более подробно как его делать написано в уроке Создание юзербара в программе Photoshop).
Все подготовки закончены и теперь мы приступим к созданию анимации!
Отключаем ненужные слои (слой с текстом, слой с градиентом, слой с BlackGold).
И включаем слой BlackRockShooter.
![\"Отключаем](https://bakemono.ru/uploads/posts/2010-11/1289155800_14.jpg "\\"Отключаем")
Запускаем панель анимации. Выставляем для первого кадра – время 0,2сек. Затем создаем еще один кадр.
![\"Запускаем](https://bakemono.ru/uploads/posts/2010-11/1289155787_15.jpg "\\"Запускаем")
Для второго кадра опускаем девочку вниз (Опускайте аккуратно с помощью клавиши вниз на клавиатуре).
Теперь нажимаем на кнопку создания промежуточных кадров. И выставляем количество кадров – 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
![\"Сохранение](https://bakemono.ru/uploads/posts/2010-11/1289155776_23.jpg "\\"Сохранение")
Автор урока: Prescilla
Данный материал подготовлен для Вас командой сайта https://bakemono.ru
Спасибо, мне понравилось)
Вот что у меня получилось:
Большое спасибо :смиле:
Получилось с первого раза! Оказывается, я не такой уж и бездарь)))
Воть)) Что получилось)
Получилось) Большое спасибо))
Всё вышло! Спасибо, за урок!
Спс вот что получилось …
я новенький .а как добавлять юзербар к себе в профиль?
извиняйте за тупой вопрос 
Классный урок спс
Еще хочу уроки еще
Отличный урок
,у мну получилсь класно(точно такой же юзербар) 
А можно с таким же успехом зделать аватар
Аригато за такой отличный урок ^______^
спасибушки :3
отличный урок
уряяяя !!!! получилось
Прикольно) я учиться)
круто! оч круто!
Aloed и ISE Rose
Если при сохранении для вэб фотошоп слетает или выдает ошибку – то проблема чаще всего кроется в том, что вы используете кривой русификатор.
Достаточно вернуть назад родной языковой файл tw10428 в папке Adobe\\Adobe Photoshop CS3\\Required и будет работать, как положено.
Prescilla,
у меня Adobe Photoshop CS3
у меня никогда такого не было… возможно у тебя что то с фотошопом, попробуй установить паралельно другую версию (например Adobe Photoshop CS 8.0, там анимация через ImageReady)
ISE Rose, какая версия фотошопа?
меня тоже..я какой раз пытаюсь сохранить..а мне просто ошибку выдает и всё(((((
я создаю, сохраняю как веб і меня выкідывает із программы((
Prescilla, спасибо всё получилось
, я поняла свою ошибку. 
Полезный урок, спасибо)
Что бы передвигать картинку клавишей вниз на клавиатуре нужно:
1. выбрать слой, который хочешь передвинуть
2.выбрать в панели инструментов Muve Tool (перемещение, клавиша V)
[hide] Для второго кадра опускаем девочку вниз (Опускайте аккуратно с помощью клавиши вниз на клавиатуре) [/hide]
У меня не опускается картинка((( Из-за чего это может быть??? (возможно ли такое из-за того, что обе картинки с фоном, но однотонным)
Заходишь в Window -> Animation (Окно>Анимация)
клас ща попробую
а где эта панель анимации ?
Спасибо, классный урок
ОГРОМНОЕ СПАСИБО
Хороший урок. Можно еще плавный переход сделать с первой картинки на вторую