Создаем шар маны в Inkscape

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

Создаем шар маны в Inkscape
1

Итак, приступим.
Нарисуйте круг (удерживая при этом Ctrl, чтобы это была именно окружность, а не эллипс). Залейте его синим радиальным градиентом с значением цветового тона (hue) 150. Светлоту (lightness) установите в значение 128 по центру и 32 у краев.

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

Активируйте инструмент Градиент и переместите центральный узел вниз, как на рисунке (для перемещения строго по вертикали удерживайте Ctrl).

Манипуляции с радиальным градиентом в Inkscape
3

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

Создание дубликата круга в Inkscape
4

Теперь растяните белый кгруг по ширине, как на рисунке. Это можно сделать при помощи соответствующего инструмента (Object → Transform → Scale, либо Shift+Ctrl+M). Сделайте так, чтобы ширина полученной фигуры составляла примерно 120% от ее высоты.

Растягивание круга в Inkscape
5

Выберите инструмент редактирования нодов (узлов). Это можно сделать при помощи кнопки на панели инструментов, либо клавишей F2 (или N). Выделите нижний узел и подвиньте его немного вниз, удерживая Ctrl для вертикального перемещения мышью.

Преобразование круга в контур в Inkscape
6

В качестве заливки назначьте нашему деформированному кругу линейный градиент, как на рисунке (опять же, удерживайте Ctrl для строго вертикального перемещения узлов).

Заливка с линейным градиентом в Inkscape
7

Еще раз продублируйте синий (нижний) круг и назначьте ему белый радиальный градиент в качестве заливки. При помощи инструмента трансформации измените его ширину и высоту до 22% и 30% соответственно (от первоначальных).

Трансформация объекта в Inkscape
8

В том же диалоге трансформации при помощи вкладки Вращение (Rotate) поверните полученную фигуру на 60°. Теперь вручную передвиньте полученный блик в верхний правый край нижнего круга.

Создание блика в Inkscape
9

И снова продублируйте нижний круг. На этот раз добавьте ему синюю обводку с значением светлоты 16 и удалите заливку.

Создание каемки в Inkscape
10

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

Добавление стоп-точки для градиента в Inkscape
11

Удерживая Ctrl, вы можете передвигать узлы градиента, чтобы получить эффект ассиметричного отражения.

Добавление эффекта хромирования к обводке в Inkscape
12

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

Трансформация с сохранением формы и симметрии в Inkscape
13

Теперь выделите наружную каёмку и отразите ее по горизонтали (H).

Создание двойной каемки в Inkscape
14

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

Перемещение узла радиального градиента в Inkscape
15

Не снимая выделения, нажимайте Page Down до тех пор, пока наш новый круг переместится под отражение. Примените к полученной фигуре фильтр колеблющейся жидкости (выберите в меню Filters → Overlays → Shaken Liquid).

Фильтр колеблющейся жидкости (Shaken Liquid) в Inkscape
16

Уменьшите непрозрачность последней фигуры до 50% (или еще меньше).

Уменьшение непрозрачности объекта в Inkscape
17

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

Эффект отсвечивания в Inkscape

Поздравляю, наш шарик готов.

Финальное изображение шара маны в Inkscape

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

Использование полученного в Inkscape изображения шара маны

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

Вы можете поэкспериментировать с другими фильтрами в Inkscape для получения интересных текстур. Важный момент: текстура закрепляется не за объектом, а за холстом. Соответственно, при перемещении объекта его текстура будет меняться. Это тоже можно использовать в своих целях.

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