Как сделать юзербар

Урок по Adobe Photoshop - как сделать юзербар. После прочтения этого урока вы сможете легко сделать себе необходимый юзербар в редакторе Adobe Photoshop.

Создадим новый документ с параметрами 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) и все. Ваш юзербар готов.

Вот такой вот юзербар получился у меня.



Обсуждение этого урока на нашем форуме