Руководство по созданию глянцевых кнопок в Inkscape

Давно хотелось научиться делать симпатичные кнопки для веб-страниц. И совсем недавно нашла статью с довольно подробным руководством, как это можно сделать в свободном графическом редакторе  Inkscape, чему несказанно была рада. Кстати, в этом редакторе рисовать кнопки намного проще, чем в Photoshop. Ознакомиться с этой статьей можно здесь. А тут я приведу её вольный перевод.


Простая 3D-кнопка   


Начнём с простейшей кнопки, которая будет многократно использоваться позже для других стилей кнопок.
Используя инструмент Прямоугольник (Rectangle Tool), нарисуем прямоугольник и заполним его любым приятным цветом. Скруглим углы (радиусом примерно 16px):


Дублируем прямоугольник (Ctrl+D), заполним копию градиентом от частично прозрачного чёрного до полностью прозрачного чёрного. Поместим копию на оригинал.

Снова дублируем прямоугольник, сдвигаем его немного вправо и вниз, сделаем его чёрным, применим небольшое размытие (Объект → Заливка и обводка → Размывание) и передвинем его вниз стека (Объекты → Опустить на задний план либо кнопкой на панели инструментов). Тем самым получим небольшую тень под кнопкой. Это заготовка кнопки

С помощью инструмента Текст (Text Tool) сделаем надпись на кнопке. Выберем шрифт, размер и цвет. Копируем текст, делаем копию чёрного цвета, приеменим фильтр размытия, сдвинем его немного вправо и вниз. Передвиним его вниз под исходную надпись, чтобы она выглядела объёмно, как 3D-текст:



Можно делать множество различных кнопок, только изменив цвет исходного прямоугольника:
Аква-кнопки

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

Меняем белую область на градиент от частично прозрачного белого до полностью прозрачного белого. Сделаем еще одну освещенную область, закрасим её сплошным белым. Сделаем её ниже по высоте, поместим в нижнюю часть кнопки и применим размытие (Объект → Заливка и обводка → Размывание):

Сделаем тень у кнопки, а также небольшое размытие верхнего блика:

Можно добавить надпись с тенью:

Кристальная кнопка

Применим эффект кристалла или стекла к простой 3D-кнопке.

Начнём с простой кнопки и изменим вертикально ориентированный градиент: Дублируем базовый прямоугольник и заполним его белым цветом. Используя Безье линии (Bézier Lines), нарисуем полигон через верхнюю левую часть и пересечём её с белым прямоугольником (для этого выделим белый прямоугольник и кривую Безье, зажав Shift; в меню выберем Контур → Пересечение).

Приведем в порядок нижнюю грань кривой освещённой области и применим градиент от частично прозрачного белого до полностью прозрачного белого:

Тень снизу

Используем Аква-кнопку без тени. Дублируем закруглённый прямоугольник, заполним его чёрным цветом, изменим высоту и сдвинем в нижнюю часть кнопки. Применим размытие, изменим прозрачность и опустим его вниз под кнопку:



Отражение

Снова начнем с Аква-кнопки без тени. Дублируем цветной закруглённый прямоугольник и сдвинем его вниз под кнопку, он будет отражением:

На цветной прямоугольник наложим градиент от полной непрозрачности до полной прозрачности того же цвета. По желанию можно добавить тень:

Различные состояния кнопок

Для веб-сайта могут быть нужны различные состояния кнопок: активная, неактивная или нажатая.

Начнём с финальной версии Аква-кнопки. Изменим цвет заднего фона (основной цвет кнопки). Выберем тень надписи и трансформируем её в свечение, заменив чёрный цвет на белый и увеличив размытость:

Ниже представлено 3 состояния кнопок: активная, выделенная и неактивная. Неактивная кнопка была получена изменением цвета заднего фона и цвета надписи на серый:

Надеюсь, теперь вы сможете создавать свои кнопки без особых хлопот :)