Простой юзербар

Юзербар – небольшое изображение, предназначенное в основном для размещения в подписи на форумах. Юзербар может выражать увлечения или вкусы человека: фильм, игру, музыкальную группу, природу и тому подобное.

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

Приступим.

Первым делом нужно выбрать исходник для будущей подписи. Это должно быть изображение большого размера и хорошего качества. Я остановился на таком:

​

Откройте ваш исходник в Photoshop’e и с помощью инструмента «Кадрирование/Crop Tool» вырежьте кадр, который будет изображен на юзербаре.

​

Если хотите, можете изменить размер вашего кадра до стандартного размера юзербара в интернете – 350х19 пикселей, а также отредактировать яркость/контраст/цвета.

​

Далее нужно добавить внутреннюю тень, для того чтобы юзербар смотрелся объемно и отчетливо на фоне веб-страничек. На панели слоев выберите единственный слой с изображением и кликните по нему двойным щелчком левой кнопки мыши, откроются параметры наложения слоя.
Перейдите в раздел «Внутренняя тень/Inner Shadow» и выставьте примерно такие параметры:

​

Непрозрачность можно ставить и другую, в зависимости от яркости изображения. Однако, я не рекомендую ставить выше 50%, иначе тень будет бросаться в глаза.

И добавим обводку, выставив такие параметры:

​

Также вы можете поэкспериментировать с градиентами, тиснением или глянцем.
Вы наверняка замечали, что на многих юзербарах есть штриховка. Она придает некую изюминку, делает юзербар художественно богаче и интереснее. Однако если вы не хотите добавлять штриховку, следующий шаг вы можете пропустить.

Создайте новый документ размером 3х3 пикселя с прозрачным фоном. Если изображение светлое, выберите черный цвет, если темнее, то белый, и, используя инструмент «Карандаш/Pencil» размером 1 пикселей, аккуратно проведите линии следующим образом:

​

Чем тоньше линии, тем мельче будет штриховка, и наоборот.

Примечание: для того чтобы было лучше видно,я сделал штриховку розовым цветом, но для юзербара нужно обязательно использовать белый или черный.

Когда закончите, выберите в главном меню «Редактирование - Определить узор/Edit - Define Pattern» и сохраните штриховку. Теперь файл можно закрыть без сохранения, он нам больше не понадобится.

Вернитесь к юзербару и создайте новый слой. Возьмите инструмент «Заливка/Paint Bucket Tool» , в верхнем меню выберите «Узор/Pattern» и вашу текстуру с штриховкой. Режим заливки поставьте на «Мягкий свет/Soft Light» с непрозрачностью около 40-60 процентов.

​

Вот что получилось у меня:

​

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

Итак, создайте новый слой и с помощью инструмента «Прямоугольная область» или «Овальная область» (на вкус) выделите зону будущего блика.

​

Снова выберите инструмент «Заливка/Paint Bucket Tool» и, на этот раз уже используя режим заливки «Основной цвет/ Foreground» и режим наложения «Мягкий свет/Soft Light», заполните область блика белым цветом.

​

Ну и последний штрих – текст. Обычно ставится в нижнем углу юзербара или же по центру, но тогда лучше сделать его анимированным. Вы можете поставить свое авторство или же просто подписать название вашей работы (желательно одним словом, не нужно делать надписи на пол юзербара).
Лучше всего использовать шрифт

Скрытое содержание:

**Скрытое содержание: Содержание скрытого текста может увидеть только (группы пользователей: Администратор, Куратор, Модератор, Разработчик, СоАдминистратор, Юзер).**

, скачать который вы можете здесь. В архиве есть русский и английский варианты.

Итак, добавив в левом нижнем углу надпись «Nature», у меня получилось вот что:

​

Кстати, с текстом можно производить те же операции, что и с обычными слоями: добавлять тени, менять непрозрачность и т.п.

Таким образом, можно всего за несколько минут создать простой юзербар. Ничего сложного в этом нет, главное практика

© SepTembeR
Корректура: Dara_Savelly
Перезалив: Dobromyra
Копирование и публикация
данного материала запрещены!
​

 

SepTembeR, привет. В этом уроке многие скрины побились. Загляни, пожалуйста, и оповести, если сможешь/не сможешь их восстановить. Будем решать.

 

Dobromyra, от черт. Пожалуй, единственный способ это исправить - по этому же уроку все повторить с новым изображением) Правда мне сейчас совсем с учебой не до этого ближайший месяц точно... вообще в этом разделе создали еще один урок по юзербару, который куда большей популярностью пользовался, поэтому этот наверняка никому и не нужен)

 

SepTembeR, то, что урок не пользовался популярностью, не значит, что он не нужен. ;) Как ты посмотришь на такой вариант — я перезалью скрины, а ты, если будет неправильно, поправишь?

 

Dobromyra, хорошо, вполне устраивает!

 

SepTembeR, не прошло и года.. В смысле, готово, я старалась, хотя и запуталась, загляни.

 

Dobromyra, все прекрасно, вроде как) Спасибо большое!