Глянцевая кнопка в Inkscape

Графический пользовательский интерфейс (GUI) — это визуальный интерфейс, позволяющий пользователям взаимодействовать со своими электронными устройствами. И приятная работа с этим интерфейсом обеспечивается не только удобством использования, но и внешним видом элементов интерфейса. В этом уроке в пошаговом режиме при помощи Inkscape будет создана глянцевая кнопка, которая сможет послужить настоящим украшением графического интерфейса.

Глянцевая кнопка в Inkscape
1

Первым делом нарисуйте квадрат. Удерживайте Ctrl в процессе рисования прямоугольника, чтобы стороны получились равными. Скруглите углы квадрата. Точное значение радиуса скругления можно задать (при выделенном квадрате) на верхней панели.

Рисование квадрата в Inkscape
2

В качестве цветовой заливки квадрата выберите радиальный градиент и переместите центральный узел градиента поближе к нижней границе (удерживайте при этом Ctrl для строго вертикального перемещения). Я установил светлоту (lightness) в значение 128 в центре и 64 для внешних узлов. Вы можете установить те же значения, либо поиграться с ними на свой вкус.

Радиальный градиент в Inkscape
3

Продублируйте полученную фигуру (Ctrl+D). Уменьшите ее высоту на половину. Для этого переместите центральную нижнюю управляющую стрелку вверх, удерживая Alt (удержание клавиши позволит двигаться не плавно, а пошагово). В процессе обратите внимание, чтобы обведенная красным кнопка на панели не была активирована (см. рисунок).

Дублирование объектов в Inkscape
4

Удалите обводку у верхней фигуры и измените цвет заливки на белый. В качестве цветовой заливки выберите линейный градиент.

Удаление обводки в Inkscape
5

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

Перетягивание узлов градиента в Inkscape
6

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

Выделение перекрытых фигур в Inkscape
7

Уменьшите размер фигуры с белым градиентом до 94% ее первоначального размера (Object → Transform). Продублируйте квадрат с красным градиентом и удалите обводку у нижней фигуры.

Уменьшение (трансформация) объектов в Inkscape
8

Залейте последнюю фигуру линейным градиентом от белого (снизу) к прозрачному (сверху). Как и в предыдущих шагах, приведите узлы градиента в соответствие с приведенной иллюстрацией.

Заливка градиентом от белого к прозрачному в Inkscape

Поздравляю, ваша глянцевая кнопка готова к использованию!

Финальное изображение глянцевой кнопки в Inkscape

Теперь вы можете экспортировать полученное изображение в png-формат (в желаемом разрешении) и использовать его на свое усмотрение, например для игрового интерфейса.

Естественно, вы можете на свое усмотрение менять цвета, формы, обводку. Таким образом количество возможных вариаций ограничено только вашей фантазией. Вы можете располагать на кнопке свое лого, текст и любые другие элементы.

Совет:
Когда вы экспериментируете с цветами и их насыщенностью, рекомендую проверять, как ваши изображения смотрятся не только на белом, но и на нейтральном сером цвете.

При необходимости вы можете скачать SVG-исходник урока.