Рисуем юзербар для сайта в Photoshop

Здравствуйте, уважаемые читатели. Сегодня статья будет о том, как нарисовать юзербар для сайта в photoshop . Но хотелось бы начать с того, что же такое юзербар…

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

Итак, что такое юзербар мы узнали, теперь можем приступать к уроку….

Создаем новый документ с параметрами: 350*40 px. RGB. Прозрачный. Получается некая полоска.

Устанавливаем основные цвета: передний #898989. задний #e1e1e1.

Выбираем инструмент «Градиент» и проводим линию поперек нашей полоски.

Для того, чтобы сделать косые линии на нашем юзербаре создаем новый документ размером 5*5 px — Прозрачного цвета.

Берем инструмент «Карандаш» и проводим косую линию, как показано на рисунке:

Теперь зададим нашу «косую» линию как заливку. Для этого переходим в меню: Редактирование – Определить узор.

Переходим на наш юзербар. Создаем новый слой ( CTRL + Shoft + N ). И заливаем его нашими косыми линиями. Для этого нажимаем Shift+Backspace и выбираем нашу «косую линию».

Прозрачность слоя с линиями делаем 30%.

Красивым шрифтом пишем нашу надпись. После чего растеризуем слой с надписью (Слой – Растрировать – Слой).

Настраиваем стиль слоя. Ставим следующие настройки:

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

С помощью инструмента «Заливка» заливаем наше выделение белым цветом. После чего ставим прозрачность 50%.

Сделаем обводку всего документа. Для этого нажимаем CTRL + A. потом нажимаем Редактирование – Выполнить обводку и ставим следующие параметры:

В принципе наш юзербар готов, но мы немного его украсим.

Открываем красивую картинку. Выбираем инструмент «Прямоугольная область» и устанавливаем размеры 350*40 px. и делаем выделение на картинке:

Копируем выделенную область и вставляем на вкладке с нашим юзербаром. После чего ставим прозрачность слоя 40% и объединяем все слоя сочетанием клавиш Ctrl+Shift+E.

Смотрим на получившийся результат:

Рисуем сайт в Photoshop. Урок 5 - Фоны

Интересные записи

• Модульная сетка в Photoshop
• Купить сайт недорого
• Как создать визитку в Photoshop
• Типографический логотип в Illustrator и Photoshop
• Фотошту4ка -
• Создаём 3D анимацию логотипа в Фотошоп