Создаем юзербар - полосу-подпись на форуме…

пример линейки
Этот урок будет посвящен созданию графических полосок,что ныне так распространены на различных форумах - и красиво и ссылку можно сделать оригинальную и вообще приложить фантазию как только заблагорассудится. Более того, я покажу как сделать эту полоску достаточно оригинально и непохоже на всех остальных (правда это до поры до времени оригинально - потом наверняка найдутся последователи:))
Итак приступим. Для начала нам необходимо определиться с дизайном самой подписи - тут даем волю своей фантазии но сильно - все же в размерах изображения мы ограничены. После того как Вы определили что хотите увидеть на полоске - смело собираИтак приступим. Для начала нам необходимо определиться с дизайном самой подписи - йте информацию - то есть ищите нужные изображения (особенно о качестве можно не заботиться, но все же лучше найти хорошие). Я сразу выберу изображение, которое потом добавит оригинальности нашей подписи. Учитывая, что в качестве приера я буду делать подпись к линуксовому форуму - значит придется использовать изображение пингвина :-)
пример линейки
В фотошопе выделяем фигурку пингвина и удаляем весь фон, кроме этой фигурки. Нам нужно чтобы изображение получилось на прозрачном фоне. Все пока оставляем пингвина в покое. Далее непосредственно процесс создания самой линейки.
  1. Создаем новый документ с параметрами как на картинке. Получится узенькая полосочка длиной 500 пикселей и высотой 20 пикселей.

    пример линейки
  2. Далее используя инструмент Gradient и его настройки создаем бирюзово-черный образец градиента. Включаем режим - линейный градиент, и заливаем получившуюся полоску протянув инструмент сверху вниз.
    пример линейки
  3. Создаем подсвеченную оласть верху надпись- если внимательно присмотреться - она овальная. Для этого берем инструмент Эллиптическое выделение (Elliptical Marquee Tool) и рисуем выделение на НОВОМ СЛОЕ от левого верхнего угла картинки до правого нижнего. Сейчас выделение занимает всю область полоски. Не меняя инструмента сдвигаем выделенную область вверх так, чтобы на картинке осталась только половина эллипса. Теперь опять берем Gradient, делаем для него следующие настройки
    пример линейки

    и заливаем выделение на всю высоту линейки - растягиваем градиент от самого верха до самого низа. Беспокоиться о том, что градиент зальет ненужные области нечего - он будет работать только в пределах выделения. Не забудьте, что все эти операции нужно производить на новом слое и потом для этого слоя установить непрозрачность в пределах - 50-70%. В результате должна получиться вот такая полоса

    пример линейки
  4. Однако, Вы возможно заметили что фигурка пингвина должна выходить за пределы полосы - значит необходимо увеличить холст. Почему это не бвло сделано сразу при создани файла? Просто так намного проще сделать полоску залитую градиентом - не надо считать пиксели, подгонять размер выделения, которое собираемся заливать. Чтобы увеличить холст воспользуемся командой Image->Canvas Size
    пример линейки

    В результате по обе стороны полоски получатся две свободные от пикселей зоны - именно в пределах этой зоны иwidth=600px будет располагаться наш пингвин.

    пример линейки
  5. Теперь копируем нашего пингвина на новый слой в файле линейки и при необходимости уменьшаем его в размерах, так чтобы он полностью отображался. Если необходимо развернуть его в другую сторону (а мне пришлось это делать), то придется воспользоваться командой Edit -> Transform -> Flip Horizontal. Выделяем слой и применяем команду. Пингвин развернулся так как надо. На этом этапе наша линейка выглядит уже так
    пример линейки
  6. Следующим этапом будет создание текста. Выбираем инструмент Horizontal Type Tool, устанавливаем точку вставкии вписываем текст, который Вы хотите видеть на подписи. Однако это еще не все. Подбираем настройки текста так, чтобы он был нормально виден - в моем случае это: кегль - 12 пунктов, и гарнитура шрифта - Arial. Выбирать нужно всегда рубленые гарнитуры, так как остальные просто не читабельны при таком малом размере.
  7. Продолжаем работать с текстом. Теперь добавим ему необходимые эффекты. Это будет эффект Outer Glow и Stroke. ервый нужен для того чтобы текст не скрадывался на фоне линейки, а второй для того чтобы подчеркнуть символы.
    пример линейки
  8. Ну, собственно и все - дальше осталось только сохранить в формате GIF или PNG (если Вы помните то у нас есть прозрачные пиксели на изображении) и вставить нашу линейку себе в подпись на любимом форуме:-)
пример линейки