A simple but very helpful tool that is often overlooked is the 'Align and Distribute'. It's the answer to a question I have been asked a few time 'How do you place your objects precisely in line?'.
The tool can do a lot more than that by aligning not only objects but groups of objects.
In order to 'kill two birds with one stone' I am going to use and explain the tool while creating a cute animal. What defines cuteness? Cute usually is achieved by more 'child-like' proportions - round shaped heads, big eyes, small nose, small body. Perfect for my favorite start of a tutorial: "Let's create a circle" - well in this case we create three.
Let's give the lion some facial features. The mouth might like conplexe but really it's just an up-side-down Y and if the deforming of the circle looks too difficult you might try using 3 separate elliptical shapes to create the same effect.
I added another circle for the body, a deformed circle for the leg and the paw, duplicated them 3 times to create the legs and added a line with a deformed circle with a pointy edge for the tail. A simple (and in my opinion cute) little lion.
With a little bit more detail (eyelids and eyebrows) it's easy to give the lion some features and create some variations.
Variations don't stop there. Taking the basic shapes, rearranging them and changing the colours you have a whole zoo at your fingertips.
I hope you enjoyed the tutorial and start playing around with the tools inkscape (and other vector tools) have to offer to create some magic.
The tool can do a lot more than that by aligning not only objects but groups of objects.
In order to 'kill two birds with one stone' I am going to use and explain the tool while creating a cute animal. What defines cuteness? Cute usually is achieved by more 'child-like' proportions - round shaped heads, big eyes, small nose, small body. Perfect for my favorite start of a tutorial: "Let's create a circle" - well in this case we create three.
Note:
Users familiar with Adobe Illustrator or CorelDraw for example might ask why I bother with the duplication and rotation when it's already build in. You create one copy, rotate it and the next copy will be a repeated version and you can create the full circle of triangles that way.
Users familiar with Adobe Illustrator or CorelDraw for example might ask why I bother with the duplication and rotation when it's already build in. You create one copy, rotate it and the next copy will be a repeated version and you can create the full circle of triangles that way.
I find this way easier and more controlled when creating evenly spaced content for a circular shape.
Let's give the lion some facial features. The mouth might like conplexe but really it's just an up-side-down Y and if the deforming of the circle looks too difficult you might try using 3 separate elliptical shapes to create the same effect.
With a little bit more detail (eyelids and eyebrows) it's easy to give the lion some features and create some variations.
Variations don't stop there. Taking the basic shapes, rearranging them and changing the colours you have a whole zoo at your fingertips.
I hope you enjoyed the tutorial and start playing around with the tools inkscape (and other vector tools) have to offer to create some magic.
Get the source art (svg file) of this tutorial for
USD 3.00
Awesome tuturial !! As always !!
ReplyDeleteThanks for the tutorial!! I will definitely be using these in my games!
ReplyDeleteCan you give some more explanation for Step 3? How do you align the eyes with the center of the circle?
ReplyDeleteAfter you group the eyes, you select the circle. Hold shift and select the group. Now you have two 2 objects selected. Bring up the align panel (CTRL-SHIFT-A) or click on the aiignment icon. Now you get a panel and can select in the drop down what you want to align to - standard is page - change to 'first selected' (which is the circle) and then you can align horizontally and vertically.
DeleteI hope this explains it a little better.
Thanks Chris, your explanation helps a lot.
ReplyDeleteReally nice to see you post again, its been a while but as always, its worth it, hope all is good at your end. One thing ive noticed is the random changes before exporting the pngs have, lets say when i have a square of 30w and 30h , when i want to export it as png, it will export sometimes as 15x15 or 11x17 , changes eachtime
ReplyDeleteForgot about such align techniques. Do you by chance use inkscape to create sprite sheets? For example, I've been working on a standing position of a humanoid character, side profile. Now in the same image I have setup guides, and I want to do a profile image, and start creating "walking" frames, so i can create animation. I've created frame blocks by positioning guides. But i've been finding positioning the head at the same spot in each frame rather tricky.
ReplyDelete