Рисуем юзербар

[Skif]

Очень редкий форумчанин обходится без аватарки. Но далеко не каждый ставит себе юзербар. И это немудрено - отыскать свой "портрет" в Сети просто. Юзрбар же - вещь более индивидуальная, раскрывающая увлечения, хобби, привязанности своего владельца. Попробуй такое найти! Гораздо проще и интереснее сделать самому. Чем мы сейчас и займёмся.

Творить будем в простом и отзывчивом редакторе Paint.Net. Владельцы фотошопа без труда повторят аналогичными инструментами и эффектами.

Классическим размером для бара считается - 523х19 пикселей. Для простенькой и лаконичной надписи на однотонном фоне вполне достаточно. Но мы для примера и фон возмём поинтереснее, и нарисовать что-нибудь попробуем. Потому остановимся на габаритах 350х50.

Определимся с тематикой и надписью. Некоторые ресурсы предлагают всем желающим брать, кроме баннеров, ещё и бары с надписью типа: "Я с <<ресурса>>!" Вот и мы сделам сейчас что-то патриотичное. Учитывая тематику нашего форума, фоном возьмём что-либо компьютерное, а надпись пусть будет: "Обитатель СофтФорума".

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

Добавляем новый слой, на нём делаем надпись. Цвет, шрифт - на выбор каждого. Мне показались увестными строгий чёрный и Aksent. Буквы сливаются местами с фоном, потому обведём их контуром-тенью. Тут цвет - также на усмотренье.

Давайте как-то обозначим этого "обитателя". Можно поискать в Сети. А мы нарисуем. Глаза. В баре их рисовать сложно из-за размера. Давайте нарисуем их отдельно большими, а потом уменьшим. Создаём новую заготовку - 300х300. Заливаем её каким-нибудь тёмным цветом для контрастности. Сверху создаём новый слой и "овалом" рисуем глаз и заливаем его чуть-чуть серым цветом (чисто белый будет слишком "пёстрым").

Придадим ему объёма с помощью эффекта Bevel Selection, предварительно выделив наш овал "волшебной палочкой".

Нам нужно два глаза. Копируем имеющийся слой с овалом и размещаем их под углом друг к другу. Левый глаз в нашей перспективе будет немного меньше, потому уменьшим соответствующий слой с помощью "Поворот и масштаб".

Чтобы не выглядело, будто один глаз налез на второй, сотрём ластиком границу между ними, нарисуем новую прямую линию и размажем её "пальцем".

Не очень аккуратно, но значительное уменьшение скроет это. Осталось добавить зрачки. Добавляем новый слой, рисуем овал чёрного цвета и закрашиваем его. Копируем этот слой, располагаем их под углом и не забываем уменьшить левый зрачок.

Накладываем все слои кроме фона (теперь его можно удалить). Уменьшаем глаза до размеров бара, копируем и вставляем как новый слой в бар. Глаза, висящие над фоном смотрятся не очень эстетично. Давайте они будут выглядывать из "нашего" ноутбука. Отыскиваем подходящий, уменьшаем и новым слоем размещаем под слой с глазами.

Всё тем же эффектом Bevel Selection можно сделать цветной контур или придать юзербару вид клавиши.

Дело вкуса и фантазии. Главное - создать свой индивидуальный юзербар совсем не сложно. Важна идея!

Edited March 9, 2013 by Skif

[Skif]

Пройдёмся по шаблонам и сделаем традиционный узенький бар.

Учитывая ограниченность по высоте, народ, в большинстве случаев, лукаво не мудрствует и фоном берёт что-то одного цвета. Фанаты игрушек впихивают узнаваемые (ими) логотипы и персонажи. Романтики фоном берут силуэт города (или дымящий завод в кислотном смоге).

Чем мы не романтики? Всем... Но не суть!

Итак, находим симпатичную (или не очень) панораму города, уменьшаем и обрезаем.

Продолжим эксплуатировать тему форума. Сделаем небо немного "нашим", добавив синие и небесные квадратики с шапки. Но сначала продублируем слой с городом. Сделаем нижний слой невидимым, а с верхнего уберём "волшебной палочкой" небо. Для облегчения процедуры сделаем картинку контрастнее.

Отрежем кусочек от шапки и вставим меж двух слоёв. Квадраты плохо читаются, поэтому сделаем их поконтрастнее.

Вернём нижнему слою видимость, а слою с квадратами зададим режим "перекрытие".

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

Ну и какой же настоящий крутой бар обходится без светлого пятна сверху?!

Создаём новый слой и инструментом "овал" наносим белое пятно.

Заходим в "свойство слоя" и снижаем его видимость на свой вкус.

Последний творческий штрих - каёмочка!

Круть! :)