В этом уроке мы рассмотрим, как можно создать шар маны в Inkscape. Вы же поняли, о чем речь? Те самые индикаторы в играх, которые показывают, сколько у персонажа осталось жизней или магической силы. Впрочем, полученный результат вполне можно использовать и в других целях. Например, после небольшой доработки из полученного объекта вполне может получиться симпатичный шар для боулинга.
Итак, приступим.
Нарисуйте круг (удерживая при этом Ctrl, чтобы это была именно окружность, а не эллипс). Залейте его синим радиальным градиентом с значением цветового тона (hue) 150. Светлоту (lightness) установите в значение 128 по центру и 32 у краев.
Активируйте инструмент Градиент и переместите центральный узел вниз, как на рисунке (для перемещения строго по вертикали удерживайте Ctrl).
Продублируйте круг (Ctrl+D). Преобразуйте полученный дубликат в контур (Shift+Ctrl+C) и залейте его белым цветом. Затем уменьшите его и прижмите к верхней границе нижнего круга. Чтобы сделать это быстро и просто, двигайте нижнюю управляющую стрелку вверх, удерживая при этом клавишу Ctrl.
Теперь растяните белый кгруг по ширине, как на рисунке. Это можно сделать при помощи соответствующего инструмента (Object → Transform → Scale, либо Shift+Ctrl+M). Сделайте так, чтобы ширина полученной фигуры составляла примерно 120% от ее высоты.
Выберите инструмент редактирования нодов (узлов). Это можно сделать при помощи кнопки на панели инструментов, либо клавишей F2 (или N). Выделите нижний узел и подвиньте его немного вниз, удерживая Ctrl для вертикального перемещения мышью.
В качестве заливки назначьте нашему деформированному кругу линейный градиент, как на рисунке (опять же, удерживайте Ctrl для строго вертикального перемещения узлов).
Еще раз продублируйте синий (нижний) круг и назначьте ему белый радиальный градиент в качестве заливки. При помощи инструмента трансформации измените его ширину и высоту до 22% и 30% соответственно (от первоначальных).
В том же диалоге трансформации при помощи вкладки Вращение (Rotate) поверните полученную фигуру на 60°. Теперь вручную передвиньте полученный блик в верхний правый край нижнего круга.
И снова продублируйте нижний круг. На этот раз добавьте ему синюю обводку с значением светлоты 16 и удалите заливку.
Если вы хотите, чтобы обводка вокруг шара имела эффект хромирования, назначьте обводке линейный градиент с полной непрозрачностью крайних точек. Добавьте третью (центральную) стоп-точку с цветом a6cae2ff.
Удерживая Ctrl, вы можете передвигать узлы градиента, чтобы получить эффект ассиметричного отражения.
Продублируйте полученную обводку-каёмку и уменьшайте ее размер (удерживая Ctrl и Shift для симметрии и сохранения формы) до тех пор, пока наружная граница дубликата совпадет с внутренней границей первоначальной каёмки.
Теперь выделите наружную каёмку и отразите ее по горизонтали (H).
Наконец, мы придадим нашему шарику эффект наполнения жидкостью. Продублируйте нижнюю окружность и переместите центральный узел градиента заливки вверх, как на рисунке.
Не снимая выделения, нажимайте Page Down до тех пор, пока наш новый круг переместится под отражение. Примените к полученной фигуре фильтр колеблющейся жидкости (выберите в меню Filters → Overlays → Shaken Liquid).
Уменьшите непрозрачность последней фигуры до 50% (или еще меньше).
Чтобы придать картинке более интересный вид, можно добавить эффект отсвечивания, изменив тон синего градиента заливки нижнего круга до 140. Напомню, для выделения элементов, перекрытых другими фигурами, кликайте по ним с зажатой клавишей Alt.
Поздравляю, наш шарик готов.
Теперь его можно встраивать в интерфейс нашей игры, либо использовать в любых других целях.
Совет:
При работе с цветовыми градиентами используйте натуральные цвета, а также используйте различные тона на одном и том же градиенте.
Например, если вы хотите получить светящийся красный объект — используйте жгучий оранжевый тон для блика. Примерно так, как в этом уроке использовался аква-синий в последнем шаге.
Совсем небольшой сдвиг в тонах способен вдохнуть жизнь в ваши произведения.
Вы можете поэкспериментировать с другими фильтрами в Inkscape для получения интересных текстур. Важный момент: текстура закрепляется не за объектом, а за холстом. Соответственно, при перемещении объекта его текстура будет меняться. Это тоже можно использовать в своих целях.
При необходимости вы можете скачать SVG-исходник урока.
Оставить комментарий