Для створення анімованого юзербара вам знадобиться зображення і шрифт Visitor, адже саме він найчастіше використовується в написах. Якщо у вас цього шрифту немає, пошукайте його в інтернеті. Зверніть увагу на те, що картинка повинна бути розміром 350х19 пікселів. Потім візьміть друге зображення, тобто те, яке буде рухатися і створювати ефект анімації.

Відкрийте програму Photoshop, виділіть зображення, натиснувши поєднання клавіш Ctrl + A, а потім скопіюйте його за допомогою Ctrl + C. Перейдіть на юзербар і вставте скопійоване картинку, натисканням Ctrl + V. Клацніть правою кнопкою миші і виберіть опцію під назвою «Вільне трансформування» (Free Transform). Тепер слід регулювати зображення під потрібний розмір (якщо тільки початковий малюнок йому не відповідає).

Створіть новий шар, затиснувши клавіші Ctrl + Shift + N або просто клікнувши на вкладку «Шар» (Layer, якщо у вас англомовна версія програми), а потім вибравши графу «Новий шар» (New Layer). Даний шар залийте візерунком, зробленим самостійно. Створіть нове прозоре зображення розміром всього 3х3 пікселя.

Виберіть інструмент «Олівець» (Pencil) і поставте чорний колір. По діагоналі намалюйте три квадрата. Вгорі ви побачите кнопку «Редагувати» (Edit), а потім - «Визначити візерунок» (Define pattern). Натисніть на кнопку OK. Тепер можете залити новий шар юзербара візерунком. Для цього натисніть сполучення Shift + F5, клікніть на створений вами візерунок. Не забудьте встановити пункт «Прозорість» на 21%.

Встановіть в параметрах білий колір, а потім виберіть фігуру прямокутник. Намалюйте її досить витягнутої (так, щоб вона закрила по ширині всю шапку картинки). Правою кнопкою миші клікніть по зображенню. Перед вами з`явиться меню, в якому ви повинні вибрати пункт «Опції шару» (Belinding Options).

Скористайтеся інструментом «Текст» (Text), в меню шрифтів виберіть потрібний і встановіть бажаний текст юзербара. Зайдіть у вкладку «Вікна» і виберіть розділ «Анімація». Перший кадр фіксується натисканням кнопки на панель анімації, розташовану знизу.

Далі вам знадобиться інструмент «Пересування». Затисніть на клавіатурі стрілку «вниз», і рухайте малюнок, поки він не дійде до кінця. Для збереження анімації відкрийте вкладку «Файл» і виберіть команду «Зберегти для веб і додатків».

Запустіть програму 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»).