оформление меток на сайте (web tags)

Часто вебмастера используют метки(Web Tags) на своих сайтах для того чтобы сортировать посты по тематикам. Выглядит это обычно так:

оформление меток на сайте (web tags)
Нажав на метку «3ds Max» пользователь увидит все статьи, содержащие данный тег, то есть статьи, в которых упоминается 3ds Max. Очень удобно.
В сегодняшнем уроке я расскажу о том, как при помощи программы GIMP 2.8 сделать красивое оформление этих самых меток. Сразу замечу, что данный урок будет полезен в первую очередь вебмастерам.

Создадим изображение размером размером 1000х80px.
В качестве основного и фонового цветов выберем: #219b87 и #156356 соответственно (позже цвет можно будет изменить на любой другой).

оформление меток на сайте (web tags)
Инструментом — «градиент» зальем изображение сверху вниз.
Потянув за край линейки, добавим горизонтальную и вертикальную направляющие. Обе они должны пересекать изображение на отметке в 40px (так мы получим угол в 45 градусов).

оформление меток на сайте (web tags)

оформление меток на сайте (web tags)
Используя свободное выделение выделим углы так, как показано на рисунке и удалим их (Del).

оформление меток на сайте (web tags)

оформление меток на сайте (web tags)

При помощи эллиптического выделения создадим отверстие в месте пересечения направляющих.

оформление меток на сайте (web tags)
Получим вот что:

оформление меток на сайте (web tags)
Инструментом — «масштаб» уменьшим слой до размеров: 875x70px и разместим его в центре холста.

оформление меток на сайте (web tags)

оформление меток на сайте (web tags)
Кликнем правой кнопкой мыши по слою и выберем пункт — «альфа-канал в выделение».

оформление меток на сайте (web tags)
Преобразуем выделение в границу (выделение>граница), со значением 2.

оформление меток на сайте (web tags)
Создадим новый прозрачный слой и убедимся в том, что он активный.оформление меток на сайте (web tags)
Зальем выделенную область цветом: #156356.

оформление меток на сайте (web tags)
Отверстие стало недостаточно округлым. Создадим эллиптическое выделение, как на рисунке:

оформление меток на сайте (web tags)
Инвертируем(выделелие>инвертировать) его и удалим все лишнее при помощи ластика.

оформление меток на сайте (web tags)

оформление меток на сайте (web tags)
Добавим фаску со значением 2(фильтры>декорация>добавить фаску), галочку возле пункта «работать с копией» нужно убрать.

оформление меток на сайте (web tags)
Добавим тень(фильтры>свет и тень>отбрасываемая тень) с такими параметрами:

оформление меток на сайте (web tags)
Объединим все видимые слои (ПКМ>объединить видимые слои).
Теперь изменим ее цвет на другой.

Сперва обесцветим(цвет>обесцвечивание>светимость).

оформление меток на сайте (web tags)
Создадим новый слой и зальем его нужным цветом.

оформление меток на сайте (web tags)
В качестве режима смешивания слоев выберем «цвет». Для изменения насыщенности просто меняем значение — «непрозрачность».

оформление меток на сайте (web tags)

оформление меток на сайте (web tags)
Добавим фоновый слой для бирки, он должен совпадать с фоном того места на сайте, где будут располагаться метки.
Уменьши изображение, до 279x25px(изображение>размер изображения).

оформление меток на сайте (web tags)
Теперь нашу бирку необходимо разделить на две части, иначе мы не сможем использовать ее в css.
Левую часть сделаем короткой и сохраним ее как: tags_left.png

оформление меток на сайте (web tags)
Правую часть оставим длинной и сохраним как: tegs_right.png

оформление меток на сайте (web tags)
Ну и собственно код css3 для создания фона:
background:
url(http://site.ru/images/tags_left.png) 0px 0 no-repeat,
url(http://site.ru/images/tags_right.png) 100% 0 no-repeat;

Метки, оформленные таким образом выглядят куда приятнее, чем обычный набор букв.