Let's look at what I made for an earlier game and use it as reference:
- Reference
- refX.png (2.09 KiB) Viewed 789 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):
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):
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):
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):
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. 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. 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. 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):
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):
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):
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):
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):
13. Finally we'll export it into a 64x64px image to compare it with the reference.
Spoiler (click to show/hide):
Now, let's put them together:
- Reference
- refX.png (2.09 KiB) Viewed 789 times
- Exported
- new+.png (1.56 KiB) Viewed 789 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
