Cooking with Inkscape : Candy Corn

A place for tutorials on how to get the most out of Flash

Cooking with Inkscape : Candy Corn

Postby Onimiv » Sat Nov 14, 2020 9:47 pm

This is a tutorial on how to use Inkscape, the "free design tool", to make a scalable vector graphic (.SVG) of Candy Corn.

Let's look at what I made for an earlier game and use it as reference:
refX.png
Reference
refX.png (2.09 KiB) Viewed 1155 times


It's mostly just a triangle with 3 colors. Should be simple so let's get to it.

1. Start by Downloading, Installing and Opening Inkscape. Those who have it should skip this step. (I'm using version 1.0.1)
By default, whenever you open Inkscape it makes a new Document.

2. I always set a few properties, the size being the only thing that changes according to my needs. This is the size you're working with and the size that the image will have when exported. (scroll down if you don't see the Magenta squares)
Spoiler (click to show/hide):

1.png
File > Document Properties
1.png (26.69 KiB) Viewed 1155 times

2.png
Document Properties
2.png (58.99 KiB) Viewed 1155 times

3. To draw a triangle, the easiest way is to use the Draw Bezier curves and straight lines (B) tool.
Just click 3 points then the first one (there's a square there and it turns red when you hover over it).
Spoiler (click to show/hide):

3.png
Line Tool
3.png (8.06 KiB) Viewed 1155 times
4.png
Triangle
4.png (11.34 KiB) Viewed 1155 times

4. To paint our new Triangle we just have to Click one of the colored squares at the bottom, pressing Shift+Click to choose the outline color.
Spoiler (click to show/hide):

5.png
Colors
5.png (11.74 KiB) Viewed 1155 times

4b. Optional.
Feel free to play with your Triangle by picking the selection tool (S or F1) then clicking it. Now you can drag one of the surrounding arrows, that show up, to scale. If you Click it again, the arrows change into Rotation and Sheer arrows.
Moving them while pressing Shift and/or Ctrl changes their behavior. Phew, what a doozie.
Spoiler (click to show/hide):

5b.png
Selection tool
5b.png (7.33 KiB) Viewed 1155 times

5c.png
Select and Scale
5c.png (8.99 KiB) Viewed 1155 times

5. Our Triangle was done in free-hand and we need it exactly where we want it. To fix that we use the Fix paths by Nodes (N or F2) tool. It's so common that it also has two shortcuts and is activated by Double-Clicking a shape.
Spoiler (click to show/hide):

6.png
Nodes
6.png (23.37 KiB) Viewed 1155 times

6. What we need to do is select each of those nodes/edges and change its X and Y values to where we want them.
Since it's 64x64 we'll use the following coordinates:
Code: Select All Code
32, 0
0, 64
64, 64

Spoiler (click to show/hide):

7.png
Corrected Triangle
7.png (13.55 KiB) Viewed 1155 times

7. To make those edges round we need to convert the nodes to symmetric ones. We do that by clicking the selecting them all and clicking Make Nodes symmetric.
Uh-oh, this makes it far bigger than we wanted so we'll need to select and move each nodes with the Arrow Keys and shrink their Handles to make them smaller.
Spoiler (click to show/hide):

8.png
Symmetric Nodes
8.png (38.05 KiB) Viewed 1155 times

9.png
Selected Nodes and Handles
9.png (29.88 KiB) Viewed 1155 times

8. Wait, with all this adjusting the Triangle is no longer centered. Thankfully that's one of the easiest things to do by using the Align and Distribute (Shift+Ctrl+A) panel, just select the shape and use the panel to center it horizontally and vertically, according to the Shape that it's relative to. Page being the visible area.
Spoiler (click to show/hide):

10.png
Option > Align and Distribute
10.png (14.5 KiB) Viewed 1155 times

11.png
Align and Distribute
11.png (19.6 KiB) Viewed 1155 times

9. Ok, we're finally ready to slice the Triangle into 3 so that we can give it different colors.
Use the Create rectangles and squares (R) tool, make sure that it's selected (not showing its Nodes), remove its outline so that it won't interfere with its size and resize it to take 64 pixels of width by 1/3 of the height (64/3).
Spoiler (click to show/hide):

12.png
Create rectangles and squares
12.png (8.62 KiB) Viewed 1155 times

13.png
New Rectangle (colored for easier viewing)
13.png (20.36 KiB) Viewed 1155 times

15.png
Resizing the selected Rectangle
15.png (4.8 KiB) Viewed 1155 times

10. Now select and put those squares under the image with Lower selection to bottom (End), duplicate (Ctrl+D) the Triangle 2 times and select each with one of the squares before doing Path > Intersection.
Spoiler (click to show/hide):

17.png
Lower selection to bottom
17.png (9.33 KiB) Viewed 1155 times

18.png
Path > Intersection
18.png (36.99 KiB) Viewed 1155 times

19.png
3 shape Triangle
19.png (19.56 KiB) Viewed 1155 times

11. We're almost there but where's the Outline? Oh right, by doing Path > Intersect the new shape inherited the properties of the lower one (green rectangle without an outline). Let's select all 3 and Shift+Click a color.
Spoiler (click to show/hide):

20.png
Outlined Segments
20.png (19.68 KiB) Viewed 1155 times

12. The outline is too thick! We need to reduce it to 1px. It's time to bring out the Object > Fill and Stroke panel.
Spoiler (click to show/hide):

21.png
Object > Fill and Stroke
21.png (44.01 KiB) Viewed 1155 times

22.png
Fill and Stroke
22.png (39.89 KiB) Viewed 1155 times

23.png
Final Triangle
23.png (18.8 KiB) Viewed 1155 times

13. Finally we'll export it into a 64x64px image to compare it with the reference.
Spoiler (click to show/hide):

24.png
File > Export PNG Image
24.png (28.06 KiB) Viewed 1155 times

25.png
Export
25.png (38.45 KiB) Viewed 1155 times


Now, let's put them together:
refX.png
Reference
refX.png (2.09 KiB) Viewed 1155 times
new+.png
Exported
new+.png (1.56 KiB) Viewed 1155 times


Easy right? Well, after getting used to Inkscape I'd say so but, if it's your first time this may seem hard.

Extra:

If you want to try out your newfound Inkscape skills here's an exercise:
- Apply the same colors as the Reference (super easy)
- Make it so there's only one outline, no lines between segments
- Curve the lines of the segments like in the Reference
"Hold me Gently, ​Kiss me Plenty!"
A.K.A. Titilonic

Find me Here
"I agree with that Onim person" ='D
User avatar
Onimiv
 
Joined: Sun Apr 28, 2019 8:56 pm

Return to Tutorials



Who is online

Users browsing this forum: No registered users