Урок як зробити юзербар

[Урок] Як зробити юзербар.

Створимо новий документ з параметрами 350х19 писк. (Стандартні розміри для юзербара), RGB, Прозорий (Transparent).


Вибираємо бажані кольори. Я вибрав темно-синій і світло-синій. Після цього вибираємо інструмент Градієнт (Gradient).



Проводимо лінію зверху вниз або навпаки (як хочете). Отримуємо наступне.


Тепер створимо заготовку для виконання заливки у вигляді косих ліній. Для цього створимо новий документ з параметрами 5х5 пікс. RGB, Прозорий (Transparent).


Вибираємо інструмент Олівець (Pencil).


Малюємо діагональ як показано на малюнку.


Зробимо вийшло зображення з діагоналлю заливкою. Для цього скористаємося меню Редагування - Визначити візерунок (Edit - Define Pattern). Все наша заливка збереглася і тепер цей документ можна закрити.

Тепер створимо новий шар. Для цього натиснемо поєднання клавіш Ctrl + Shift + N, OK або натиснемо на піктограму "Новий шар" в палітрі шарів.



Тепер заливаємо новий шар нашої заготівлею з косими лініями. Для цього вибираємо інструмент Заливка. Далі робимо установку Узор (Pattern) і вибираємо нашу заготовку.


Заливаємо наш новий шар. Після цього робимо прозорість шару 30% (можете поекспериментувати з цим параметром).


В результаті у мене вийшло наступне.


Наступне що ми будемо робити - це напис. Для цього скористаємося шрифтом Vizitor (найбільш популярний шрифт при створенні юзербарів). Але ви можете використовувати і інший шрифт на ваш розсуд.

Пишемо необхідний текст шрифтом Vizitor, розміром 10 Px і маємо в своєму розпорядженні в необхідному місці (в даному випадку - це правий край).


Растріруем шар з написом. Для цього в палітрі шарів натискаємо правою кнопкою миші на наш шар з текстом і в меню вибираємо Растеризувати шар (Rasterize).


Тепер кликнемо лівою кнопкою миші на шарі з написом. Повинно відкритися вікно з установками стилів шару (Layer Style). Натискаємо на рядок Обводка (Stroke) і встановлюємо параметри як на малюнку.


Натискаємо OK. Вийде наступне.


Тепер нам треба надати нашому юзербара ефект об'ємності. Для цього створимо новий шар і помістимо його під шаром з текстом. Далі вибираємо інструмент Овальне виділення (Elliptical Marquee).


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


Далі натискаємо на праву кнопку миші (при обраному иструменте "Овальний виділення") і в меню вибираємо Виконати заливку. Робимо заливку білим кольором.


Після цього зайдемо в меню Виділення і виберемо Скасувати виділення. Далі в палітрі шарів зробимо прозорість цього шару 30%.

Наступне що необхідно - це зробити обведення. У палітрі шарів виберемо самий нижній шар (тобто фон). Далі заходимо в меню Редагування - Виконати обведення. У вікні налаштувань обведення вибираємо налаштування: ширина 1 Пікс, колір чорний.


Тепер додамо в наш юзербар будь-яку вподобану картинку. Відкриємо потрібне зображення, і просто перетягнемо його в наше вікно з юзербара.


Розташуємо шар з нашої картинкою над шаром з фоном. При натиснутій кнопці Shift (щоб зберегти пропорції) за допомогою мишки зменшимо розмір зображення до необхідних значень. Розмістимо нашу картинку відповідно до задуманого.


На додаток до цього я ще вирішив відбити картинку по горизонталі щоб елементи зображення не зливалися з написом.


І в завершенні зробимо прозорість шару з картинкою 50%.



Тепер зберігаємо отриманий результат в необхідному форматі Файл - Зберегти для Web (File - Save for Web) і все. Ваш юзербар готовий.

Вот такой вот юзербар вийшов у мене:

Схожі статті