Спиннер (Fidget Spinner)
Для начала нам понадобится круг. Казалось, что логично использовать инструмент "Эллипс" для этой цели. Но в операции Disivion круг поведёт себя неправильным образом. Поэтому мы пойдём другим путём.
Создадим квадрат размером 160 на 160 пикселей. Установим радиус закругления 80 пикселей. Получим круг. Далее выполним операцию Path | Object to Path. Созданный круг будет центральным объектом игрушки.
Продублируем круг (бывший квадрат) и установим для него размеры 200 на 200 пикселей - это будет лепестком спиннера. Разместим его над центральным кругом. Можно воспользоваться выравниванием по вертикальной оси (Center on vertical axis) и по краям (Align bottom edges of objects to the top edge of anchor).
Далее следует создать копии верхнего лепестка и распределить их равномерно вокруг центрального круга. Можно сделать следующим образом. Сначала активируйте режим Snap an item's rotation center. Затем сделайте двойной щелчок на верхнем круге, чтобы появился крестик центра оси фигуры. Перетащите его в центр нижнего круга (благодаря включенному режиму центр будет найден автоматически).
Вызываем диалоговое окно Object | Transform.... Выбираем вкладку Rotate и устанавливаем значение 120 градусов по часовой стрелке. Дублируем верхний круг и нажимаем кнопку Apply.
Продублируем новый круг и снова нажимаем кнопку Apply. Получится первый рабочий эскиз спиннера.
Продублируем центральный круг и поместим копию в центр верхнего лепестка, используя выравнивание по осям.
Дважды щелкаем по малому кругу в верхнем лепестке и смещаем центральную ось в центр основного круга (как мы делали с большим кругом). В диалоговом окне Transform выставляем 60 градусов, дублируем круг и размещаем копию в новом месте. Снова дублируем и смещаем на 60 и еще раз на 60 градусов, чтобы круг оказался не внутри большого круга, а на свободном месте. Повторим операцию ещё раз.
Верхний зелёный круг можно удалить, должно остаться три больших и четыре маленьких круга.
Выделяем все объекты, дублируем их и отводим в сторону, используя Ctrl. Применяем к копии операцию Path | Union.
Рисуем прямоугольник, закрывающий всю фигуру из предыдущего шага. Опускаем прямоугольник под фигуру.
Выделяем прямоугольник и фигуру и применяем операцию Path | Division.
Снимаем выделение и снова щёлкаем по прямоугольнику, нажимаем клавишу Delete. Останется "ромашка". Если бы мы в самом начале урока использовали круг вместо квадрата, то в этом месте происходит ошибка.
Снова щёлкаем по ромашке и нажимаем Delete. Останется следующая фигура.
Выделим все части этой фигуры и объединим через Path | Union. Условно назовём её шестерёнкой.
Продублируем позабытую фигуру из семи кругов и отложим в сторону.
Далее шестерёнку нужно поместить в центр композиции из кругов. Для вертикального выравнивания можно использовать верхний большой круг. По горизонтали фигуры должны идеально совпасть, если вы до этого использовали клавишу Ctrl (я просил об этом).
Удаляем все маленькие круги, кроме центрального. Затем выделяем все объекты фигуры и объединяем через Path | Union. У нас появилась заготовка для спиннера.
Возвращаемся к фигуре из кругов. Выделим все круги, кроме верхнего, и зададим им один серый цвет.
Продублируем центральный круг и поместим копию в центр верхнего цветного круга.
Закрасим этот круг другим цветом, продублируем и копию отложим в сторону. Размер круга должен быть 160х160 пикселей. Уменьшим до 140х140 пикселей.
Продублируем его и изменим до 80х80 пикселей.
Продублируем и этот круг и установим размер 60х60 пикселей.
Все созданные круги помещаем в центр верхнего круга фигуры.
Выделяем верхний круг со всеми вложенными кругами и дублируем его. К созданной копии применяем Path | Exlusion.
Получится набор колец, но они все являются одним целом. Нам нужно разбить фигуру на отдельные кольца. Применяем знакомую технику. Рисуем подложку из прямоугольника, опускаем её за кольца. Затем выполняем операцию Path | Division, удаляем подложку. Все кольца стали независимыми. Закрасим их в разные цвета.
Сгруппируем кольца и поместим их в верхнюю часть спиннера, используя выравнивание. Снова дублируем и размещаем в нижних частях спиннера, активно используя выравнивание по краям основной фигуры.
Снимите группировку у всех колец. Удалите внешнее кольцо. С остальными кольцами поработайте на своё усмотрение. Можно изменить прозрачность, а также вырезать самое маленькое кольцо, чтобы получились отверстия. Также можно добавить обводку к некоторым кольцам.
Выходим на финишную прямую. Возвращаемся к набору кругов и дублируем центральный круг. Переносим его на спиннер и центрируем. Меняем цвет, добавляем обводку и т.д. Также можно добавить обводку ко всей фигуре.
Итоговый результат в SVG.
На основе видеоурока Fidget Spinner Design Tutorial in Inkscape
В планах:
- создать интерактивную веб-страницу с JavaScript. Сделано!
- написать Android-приложение
Не переключайтесь!