Создаем юзербар (Userbar)
Автор статьи: RRRinat
Сегодня мы поговорим о создании юзербаров. Несмотря на то, что уроков в Интернете много, отличаются они лишь представленными примерами в виде картинок. Конечно сама идея везде одинакова. Я ее расширю, дополню своими заметками, пояснениями и маленькими хитростями, которые я открывал путем эксперимента при создании юзербаров, число которых насчитывает более 100 штук.
Советую не пользоваться программами типа Userbar Macker или Userbar Generator, в отличии от Photoshop их возможности сильно ограничены.
Создаем Стандартный Юзербар
И так открываем Photoshop и создаем файл размером 350 X 20.
Перед нами появилась абсолютно чистая картинка. Давайте дадим ей градиент. Проваливаемся в Layer-> New Fill Layer -> Gradyent.
Должно появится следующее меню:
y Нажимаем на Gradyent и выбираем подходящие нам цвета. Затем жмем ОК.
Наша картинка должна иметь следующий вид:
Также мы можем похимичить с настройками. Например, если поставить Scale = 150, то переход из цвета в цвет будет более плавным.
Если поставить Angle = 0, то наша картинка будет выглядеть вот так:
Давайте поэкспериментируем и создадим вот такой фон:
Для этого ставим style: Linear, Scale: 150 и ставим галочку "Reverse"
Для тех, кто что-то не понял, посмотрите на нижний рисунок:
Теперь, создав подходящий нам узор, добавим полоски или узоры.
Для того чтобы создать узор, нам необходимо создать новый файл с следующими настройками:
Затем нарисуем узор в виде полосы. Для этого увеличиваем масштаб (Ctrl + "+" несколько раз) в несколько раз и карандашом (Pencil Tool) рисуем диагональную полоску.
Далее нажимаем Edit -> Define Patern -> даем имя фону.
Теперь переключаемся к нашему старому рисунку и создаем в нем новый слой.
Затем заливаем им наш фон из рисунка 1. Для этого выбираем Paint Bucket Bucket Tool, в верхнем меню ставим "Pattern" и выбираем наш узор. (Смотрите на нажнюю картинку)
Должно получится, что то вроде этого:
Теперь давайте сделаем его более прозрачным. Для этого, в панели слоев ставим Opacity ~ 30 - 40 % на ваше усмотрение.
Лично я поставил 35 % и у меня получилось следующее:
Однако юзербары, с таким узором видны почти везде, поэтому советую поэкспериментировать в этом плане. Ниже приведу несколько результатов экспериментов:
Как видите, картинки получаются весьма разнообразными.
Также вы можете поменять сам цвет вашего узора, в случае, если он не подходит к фону.
Например, у нас такой фон:
На таком фоне мы ничего не увидим. Зато к нему идеально подходит белый узор.
Для этого заливаем также, как было расписано ранее, и проделываем некоторые операции:
В окне Layers щелкаем правой кнопкой по слою с узором и выбираем пункт "Blending Options"
Далее по знакомому нам способу выбираем Opacity и получаем что-то вроде этого:
Также, если хочется, то можно поэкспериментировать с вкладкой Gradient Overly (ниже Color Overly), иногда можно добиться интересных эффектов, придать нашему узору блеск. Принцип, такой же, что я расписывал в начале.
Вот что получилось из вышеуказанного юзербара у меня:
Выбрав подходящий фон и узор, ставим картинку.
Например: я взял две фотографии почему-то всеми нелюбимого Билла Гейста, немножко их подредактировал, убрал фон и вставил в юзербарку
Открываем файл с картинкой в фотошопе, выделяем (CTRL +C ) переключаемся на наш файл с юзербаркой.
Вставляем наш файл (Ctrl+V). Так как наш файл очень большой, то подгоняем его под нашу юзербарку. Для этого нажимаем Ctrl +T и уменьшаем наш размер.
Добавив фотографии Билла Гейста и логотип Microsoft у меня получилось что-то вроде такого:
Теперь, по желанию можно поэкспериментировать с стилем слоя, а именно с вкладкой "Bevel and Emboss"
Если мы введем следующие настройки, то получим вот такую картинку:
Однако я поставил другие настройки.
И получил следующую картинку, которая стала более объемной
А теперь можно добавить эффект стекла
Выбираем овал, рисуем его, при необходимости меняем размер нажатием клавиш Ctrl +T. Затем ставим прозрачность 30
Вот что должно у вас должно получится:
Можно опять же поэкспериментировать, например я выбрал в качестве фигуры - прямую полосу, и провел ее вдоль картинки.
Получилось следующее:
Если хочется, можно добавить внутреннее свечение
Тогда юзербар будет такой:
Так как это плохо заметно, можно еще добавить маленькую рамку
Тогда наш юзербар вместе с внутреним свечением будет выглядить так:
Здорово, неправда? Осталось теперь только справа написать какой-нибудь текст.
Для этого идеально подходят шрифты Visitor (
скачать тут) или Mini (
скачать тут)
Настройки текста должны быть следующими:
А у шрифта "mini" размер шрифта должен быть равен ~ 8 pt.
Выберем цвет шрифта, проваливаемся в настройки стиля, ставим обвод с такими настройками:
Нажимаем "ок" и любуемся нашей юзербаркой.
Автор статьи: RRRinat