Урок по 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) и все. Ваш юзербар готов.

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

[показать]