Рисуем юзербар для сайта в Photoshop
Июн 19
Здравствуйте, уважаемые читатели. Сегодня статья будет о том, как нарисовать юзербар для сайта в photoshop. Но хотелось бы начать с того, что же такое юзербар…
Юзербар — графическое изображение, предназначенное для размещения в подписи на веб-форумах, интернет-конференциях и других средствах интернет-общения. Основной целью размещение картинки-юзербара является выражение каких-либо убеждений, пристрастий, увлечений, привязанностей и даже черт характера пользователя. Встречаются также и юзербары, заявляющие об обратных чувствах своего владельца: антипатию, ненависть к какому-либо предмету действительности.
Итак, что такое юзербар мы узнали, теперь можем приступать к уроку….
Шаг №1.
Создаем новый документ с параметрами: 350*40 px, RGB, Прозрачный. Получается некая полоска.
Шаг №2.
Устанавливаем основные цвета: передний #898989, задний #e1e1e1.
Шаг №3.
Выбираем инструмент «Градиент» и проводим линию поперек нашей полоски.
Шаг №4.
Для того, чтобы сделать косые линии на нашем юзербаре создаем новый документ размером 5*5 px — Прозрачного цвета.
Шаг №5.
Берем инструмент «Карандаш» и проводим косую линию, как показано на рисунке:
Шаг №6.
Теперь зададим нашу «косую» линию как заливку. Для этого переходим в меню: Редактирование – Определить узор.
Шаг №7.
Переходим на наш юзербар. Создаем новый слой (CTRL+Shoft+N). И заливаем его нашими косыми линиями. Для этого нажимаем Shift+Backspace и выбираем нашу «косую линию».
Шаг №8.
Прозрачность слоя с линиями делаем 30%.
Шаг №9.
Красивым шрифтом пишем нашу надпись. После чего растеризуем слой с надписью (Слой – Растрировать – Слой).
Шаг №10.
Настраиваем стиль слоя. Ставим следующие настройки:
Шаг №11.
Создаем новый слой и помещаем его под слой с текстом. После чего выбираем инструмент «Овальная область» и делаем примерно следующее:
С помощью инструмента «Заливка» заливаем наше выделение белым цветом. После чего ставим прозрачность 50%.
Шаг №12.
Сделаем обводку всего документа. Для этого нажимаем CTRL+A, потом нажимаем Редактирование – Выполнить обводку и ставим следующие параметры:
В принципе наш юзербар готов, но мы немного его украсим.
Шаг №13.
Открываем красивую картинку. Выбираем инструмент «Прямоугольная область» и устанавливаем размеры 350*40 px. и делаем выделение на картинке:
Шаг №14.
Копируем выделенную область и вставляем на вкладке с нашим юзербаром. После чего ставим прозрачность слоя 40% и объединяем все слоя сочетанием клавиш Ctrl+Shift+E.
Смотрим на получившийся результат:
