Как сделать анимированный юзербар?

Юзербар представляет собой графическое изображение, помещенное в подписи на форуме для определения принадлежности к различным интересам, убеждениям или группам. Такое изображение можно сделать при помощи анимации.
Создать сайт самостоятельно с Wix.com

Инструкция

Запустите программу Photoshop. Осуществите создание нового объекта необходимого размера, нажав «Файл» и «Новый», если вы используете русскую версию, или «File», а затем «New», если у вас английская версия программы. Заполните документ черным цветом, нажав «Редактирование», «Выполнить заливку» и «Черный» («Edit», «Fill» и «Black»).

Нажав на иконку «Прямоугольная область» («Rectangular Marquee Tool») сделайте выделение так, чтобы около всех краев осталась невыделенная область толщиной в один пиксель. Удалите выделенную область, нажав «Delete» на клавиатуре. Отмените выделение нажатием клавиш «Ctrl» + «D». Выполните создание нового слоя, нажав вкладку «Слой», «Новый», «Слой» («Layer», «New», «Layer»). На панели слоев поместите новый объект ниже слоя с рамкой. Сделайте перемещенный слой активным и заполните его серым цветом, нажав «Редактирование», «Выполнить заливку», «Серый 50%» («Edit», «Fill», «50% Gray»).

Сделайте новый слой, переместите его на панели объектов выше слоя с серой заливкой. Залейте созданный слой любым понравившимся вам цветом. Щелкните по объекту правой кнопкой мыши и зайдите в меню «Параметры наложения» («Blending Options»). В открывшемся окне кликните на пункт «Наложение градиента» («Gradient Overlay») и установите значения: «Режим» - «Жесткий цвет» («Blend mode» - «Hard Light»), «Прозрачность» - «45%» («Opacity» - «45%»), «Градиент» - «Металл» - «Стальной прут» («Gradient» - «Metals» - «Steel Bar»). Нажмите «Ok».

Создайте новый слой и поместите его после слоя с рамкой. Залейте его любым цветом. Зайдите в «Параметры наложения» («Blending Options») и в пункте «Внутреннее свечение» («Inner Glow») установите параметры: «Режим» - «Линейный свет» («Blend mode» - «Linear Dodge»), «Непрозрачность» - «100%» («Opacity» - «100%»), «Цвет» - «Белый» («Color» - «White»), «Размер» - «4» («Size» - «4»).

Выполните создание нового объекта размером 1 на 2 пикселя. Выберите «Кисть» («Pencil Tool»). Сбросьте цвета, нажав клавишу «D». Поставьте точку в верхнем пикселе документа, нажмите «Редактирование» - «Определить узор» - «Ok» («Edit» - «Define Pattern» - «Ok»). Закройте файл, не сохраняя его, и перейдите к документу с юзербаром.

Создайте новый слой, поместите его выше всех слоев, кроме объекта с рамкой. Залейте новый слой созданной текстурой. Для этого нажмите «Редактирование» - «Выполнить заливку». Кликните по кнопке «Узор». Выберите вашу текстуру: она должна быть последней в списке («Edit» - «Fill», «Use» - «Pattern», «Custom Pattern» - кликнете на нее).

Выберите инструмент «Горизонтальный текст» («Horizontal Type Tool»). Напишите нужную надпись подходящего размера, с помощью шрифта из списка доступных.

Соедините три нижних слоя. Для этого на панели слоев нажмите на иконке глаза рядом со слоями, не подлежащими объединению, сделав их невидимыми. Выберите «Слой» - «Объединить» («Layer» - «Merge Visible»).

Создайте новый слой, он должен размещаться над самым нижним. На этом слое создайте анимацию. Для этого сделайте дубликат слоя, нажав «Слой» - «Дубликат» («Layer» - «Duplicate Layer»). На дубликате зайдите в «Параметры наложения» («Blending Options») и установите значения: «Режим» - «Осветление» («Blend mode» - «Lighten»). Откройте окно анимации, выбрав «Окно» - «Анимация» («Window» - «Animation»). Сделайте необходимое количество дубликатов кадра, выставьте видимость слоя и необходимое время.

Сохраните получившийся юзербар, нажав «Файл» - «Сохранить для Web» («File» – «Save for web»).

Оцените статью!