Как нарисовать Userbar в Photoshop

Не так давно на форуме моего сайта была поднята тема "Статьи на какую тематику вы хотели бы прочитать". Мнения разделились: кому-то хочется поработать с фотографиями, кому-то порисовать. Предложения стали поступать даже по e-mail. Я постараюсь учесть мнение всех приславших комментарии. А сегодня мы остановимся на предложении, пришедшим мне по e-mail: "Здравствуйте, видел на Вашем сайте, что можно подкидывать темы для уроков… Вот и хочу попросить, чтоб Вы показали, как сделать достойный юзербар, на мой взгляд, тема юзербаров сейчас актуальна.. Вот было бы здорово получить мастер-класс от Вас. Спасибо!"

Действительно, тема юзербаров в последнее время приобрела большую популярность в связи с развитием всевозможных форумов, ЖЖ, блогов и т.д. Многие хотят отнести себя к определенной группе, как-то выделиться из толпы и используют для этого userbar'ы. Но это все понятно людям, знакомым с тем, что данное слово под собой подразумевает, поэтому будет правильнее дать ему определение. Это небольшие изображения размером 350x20 или 350x19 пикселей, которые, как правило, ставят в своей подписи. Сам юзербар должен отражать взгляды, интересы, убеждения и т.д. человека, устанавливающего его себе.

Перво-наперво

Сделать такое чудо в Photoshop не составляет больших трудностей. Схема работы проста. Создаем основную картинку, подбираем цвет, делаем паттерн, заполняем им изображение, добавляем логотип или фирменный текст + текст в правой части, отражающий вашу принадлежность к чему-либо. Итак, начнем. Создаем новое изображение посредством команды File > New, вводим размеры 350x19, в качестве единиц измерения используем pixels. Background Contents выберите Transparent. Нажмите OK. Теперь заполните единственно доступный слой выбранным вами цветом. По большому счету, не важно, каким, если вы не собираетесь изменять режимы смешивания или непрозрачность применяемого далее стиля. Я заполнил данный слой цветом #05438c. Теперь нам нужно наложить на слой градиент. Чтобы быстро и эффективно сделать это, необходимо позаботиться об этом заранее, а именно установить цвет переднего плана и фоновый цвет. В данном случае я использовал #033274 и #a1c8fb соответственно.

Для того, чтобы нам не пользоваться инструментом Gradient и иметь возможность динамически изменять положение градиента, выполняем команду Layer > Layer Style > Gradient Overlay и устанавливаем параметры как на рисунке. В процессе редактирования я пришел к выводу, что более эффектно будет смотреться темный оттенок справа, а светлый слева, и, чтобы не переделывать цвета в градиенте, просто поставил в настройках стиля флажок Reverse, который сделал зеркальное отражение градиента. Напомню вам преимущество данного метода наложения градиента. Оно состоит в том, что мы в любой момент можем поменять как положение градиента, точно подстраивая и угол и масштабирование, так и цвета в нем — модифицировать градиент как нашей душе угодно.

Рисуем диагональные линии

Так уж повелось, что большинство юзербаров содержит диагонально расположенные линии — пришло время создать этот "незаменимый" атрибут. Чтобы успешно сделать это, нам нужно создать паттерн, которым в дальнейшем мы и заполним наше изображение. Создайте новое изображение размером 6x6 пикселей с прозрачным фоном, как в прошлый раз. Теперь в палитре Navigator (Window > Navigator) перетащите вправо ползунок до упора, чтобы отмасштабировать наше изображение до 1600%. В панели инструментов выберите инструмент Pencil, в его настройках установите размер кисти (Mater Diameter) 1px, Hardness установите на 100% и поставьте 6 точек по диагонали.

Теперь выполняем команду Edit > Define Pattern. В появившемся диалоговом окне задайте имя новому образцу и нажмите OK. Все, теперь мы готовы к заполнению слоя паттерном. Переходим к работе с изображением юзербара (Window > имя вашего изображения). Сделаем новый слой посредством команды Layer > New > Layer и выполним заполнение командой Edit > Fill, где нужно в раскрывающемся списке Use выбрать пункт Pattern, а в поле Custom Pattern указать созданную вами текстуру.

Затем установите Opacity слоя на 28% (или подберите собственное — в данном случае следует в первую очередь опираться на исходное изображение). Создадим стеклянный отблеск на нашем юзербаре — для этого выберем из панели инструментов Elliptical Marquee и растянем эллиптическое выделение как показано на рисунке.

Нажимаем на клавиатуре D для перезагрузки цветов, затем X, чтобы поменять местами цвета, выбираем из панели инструментов Gradient, в его настройках выбираем градиент Foreground to Transparent и заполняем им наше выделение на новом слое (не забудьте перед заполнением создать его). Измените непрозрачность слоя в меньшую сторону, установив Opacity 78%. Должно получиться что-то аналогичное рисунку.

Добавление объекта в левой части юзербара

Теперь нужно добавить ваш фирменный логотип или текст в левую часть юзербара. Каких-то конкретных советов давать практически не стану, поскольку все строго индивидуально. Тем не менее, нужно, чтобы то, что вы помещаете сюда, гармонировало с тем, что вы сделали. Чем давать советы, приведу пример добавления своего элемента. Честно говоря, я долго сомневался и пробовал различные варианты — никак не мог определиться, что лучше: добавить текст или какой-то объект, но так как с текстом справится любой, я решил рассмотреть пример добавления фотографии, а именно лица.

Итак, я взял одну из фотографий. С помощью инструмента Move я перетащил фотографию на изображение юзербара. Photoshop автоматически выделит для него отдельный слой. Переместите его ниже слоя. Как вы понимаете, фотография больше, чем юзербар, поэтому нажимаем Ctrl+T и изменяем размер и положение фотографии.

Так как фотография удачная, можно и ее оставить и закончить на том, чтобы добавить текст справа. Так и сделаю для своего личного юзербара:). Но остановиться на этом было бы неправильно по отношению к читателю, поэтому продолжим. Оставим здесь видимой только голову, воспользуемся дл этого маской слоя. Для этого нажмем в палитре Layers кнопку и с помощью инструмента Brush сотрем все лишнее. Обратите внимание: чтобы более мягко вырезать объект, используйте кисть с Hardness 0.

Также напомню вам, что черный цвет переднего плана выполняет операцию стирания, а белый — восстановление стертой области маски, что мы в дальнейшем и используем. По завершении добавим стиль Outer Glow (Layer > Layer Style > Outer Glow) для добавления внешнего света вырезанной области.

Так как на фото преобладают красные оттенки, в данном случае целесообразнее изменить оттенок и насыщенность данного слоя, и лучше это сделать с помощью корректирующего слоя. Почему? Во-первых, мы в любой момент можем изменить параметры оттенка и насыщенности. Во-вторых, потому, что он также имеет маску слоя, с которой мы можем проводить дополнительные манипуляции. Итак, чтобы применить корректировку только к нашему объекту, а не ко всему изображению, щелкаем по маске слоя с фотографией и выполняем команду Layer > New Adjustments Layer > Hue/Saturation и в появившемся диалоговом окне устанавливаем следующие параметры: Hue: 213; Saturation: 34; Lightness: -2. Теперь установите флажок Colorize. После нажатия OK я взял кисть, установил белый цвет и провел инструментом по стеклам очков.

Текст справа

Теперь осталось добавить текст справа. Как правило здесь используют гарнитуру Visitor BRK. Скачать ее можно отсюда: сайт Напишите свой текст с помощью инструмента Type. Размер шрифта установите 10 pt, цвет белый. Затем щелкните по кнопке Toggle the Character and Paragraph palettes и установите ширину 25 (см. скриншот).

И наконец выполните команду Layer > Layer Style > Stroke: Size: 1; Color: черный; Position: Outside; Blend Mode: Normal; Opacity: 100%.



Ну, а на этом все. Жду новых предложений на форуме сайта сайт

Сергей Топорков