ТВОИ ЛИЧНЫЕ СМАЙЛИКИ!

коллекция смайлов для вставки на форумах, в блогах, гостевых книгах и чатах

Наша кнопка
Наша кнопка

Код кнопки:

Другие кнопки и баннеры

Как сделать простейший юзербар в Adobe Photoshop

Есть несколько правил создания юзербаров, которых мы будем придерживаться на этом уроке.

  1. Размер 350х19 пикселей.
  2. Фон со штриховкой под углом 45°
  3. Шрифт Visitor
  4. Черная рамка вокруг всего изображения юзербара толщиной 1 px. Ее можно и не делать, но с черной обводкой юзербар лучше выделяется на фоне сообщения на форуме.

1. Открываем Adobe Photoshop. Создаем новый документ размером 350х19:

Создаем простейший юзербар

2. Делаем рамку: заливаем изображение черным цветом (Edit --> Fill --> Black), а затем выбираем инструмент Rectangular Marquee Tool. Выделяем часть изображения таким образом, чтобы по краям осталась невыделенная область размером в 1 пиксель. Удаляем выделенную область. После того, как мы снимем выделение (Ctrl+D), будем иметь черную рамку по периметру юзербара.

Создаем простейший юзербар

3. Создаем новый слой - для фона (Layer - New - Layer или Shift-Ctrl-N) и помещаем его ниже слоя с рамкой. Заливаем его нужным цветом

Создаем простейший юзербар

2а. Для создания черной рамки можно поступить иначе. После создания документа (см. шаг 1) заливаем его нужным цветом. Затем на панели слоёв Layers кликаем на нашем слое правой кнопкой выбираем пункт Blending Options. В появившейся панели переходим на вкладку "Штриховка" и делаем так, как показано на рисунке ниже:

Создаем простейший юзербар

Получим тот же результат, как после шагов 2 и 3.

4. Можно добавить внутреннюю тень. Переходим в то же окно, что и в пункте 2а и выбираем пункт Inner Shadow (Внутренние тени):

Создаем простейший юзербар

Не обязательно выставлять те же параметры, что и в нашем примере, можно экспериментировать.

5. Делаем штриховку. Для этого создадим новую текстуру. Это делается так.

Создадим документ размером 4х4 пикселя с прозрачным фоном.

Создаем простейший юзербар

Увеличим полученный документ до максимума (1600%), чтобы было удобнее работать. Выбераем инструмент Карандаш (Pencil) размером 1px и рисуем с его помощью линию цветом #91E780, как показано ниже:

Создаем простейший юзербар

Теперь сохраняем полученный рисунок как Шаблон (Pattern): Меню Edit --> Define Pattern и даем вашему узору какое-нибудь название:

Создаем простейший юзербар

6. Возвращаемся к нашему юзербару. Снова открываем Blending Options (см. пункт 2а), переходим на вкладку Наложение шаблона (Pattern Overlay), в пункте Pattern выбираем только что созданную нами текстуру и изменяем следующие параметры:

Создаем простейший юзербар

7. Добавляем текст. Выбираем шрифт Visitor - он хорошо читается и при малом размере (скачать шрифт). Цвет белый. После того, как наша надпись создана, применим к тексту эффект Внешней тени (Outer Shadow):

Создаем простейший юзербар

И добавим внешнее штрихование (обводку) толщиной 1 пиксель:

Создаем простейший юзербар

Результат:

Создаем простейший юзербар

8. Можно добавить к нашему изображению эффект стекла. Для этого создаем новый слой (Layer - New - Layer или Shift-Ctrl-N) над слоем с фоном, но ниже слоя с надписью. Выделяем верхнюю часть изображения инструментом Elliptical Marquee Tool и заливаем его белым цветом с помощью инструмента Paint Bucket Tool (G). Далее снижаем прозрачность этого слоя (Opacity) до 30%:

Создаем простейший юзербар

Наш юзербар готов.

 

Создаем простейший юзербар

 

Вместо эффекта стекла можно применить другой прием, который часто используется при создании юзербаров - залить фон не однородным цветом, а градиентом. Для этого выбираем два цвета для заливки фона в панели инструментов:

Создаем простейший юзербар

Затем используем инструмент Градиентной заливки (Gradient Tool). Кликаем вверху своего рисунка и, не отпуская левую клавишу мыши, проводим линию до низа документа (можно наоборот, тогда градиент пойдет в противоположном направлении).

Создаем простейший юзербар

Тогда готовый юзербар будет выглядеть так:

Создаем простейший юзербар

Вы можете скачать PSD-исходник этого юзербара, чтобы самостоятельно с ним поэкспериментировать и научиться рисовать свои юзербары. Не забудьте, что в юзербары вы можете вставлять картинки! Этим мы предлагаем вам заняться самостоятельно. ;-)