Vector illustration basics for Android developers — Part 5: Basic Transformations

Basic but very useful operations

Previously on “Vector Illustration Basics for Android Developers”

Vector illustration basics for Android developers - Part 1: Primitive Shapes_It’s easier than you imagine!_hackernoon.com

Vector illustration basics for Android developers — Part 2: Strokes and paths_Again, simpler than you think_hackernoon.com

Vector illustration basics for Android developers — Part 3: Boolean Operations_Still easy!_hackernoon.com

Vector illustration basics for Android developers — Part 4: z-ordering_Fancy-sounding name, nothing complicated about it_hackernoon.com

Vector illustration basics for Android developers — Bonus part: Working With Text_Making text awesome!_medium.com

Before you read the rest of this article, I want you to do one thing: go in your vector graphics software and enable snapping. It’s usually represented by a magnet-shaped icon. In Gravit Designer, it looks like this

Snapping is very, very useful. It snaps the elements to a grid and also shows guidelines whenever you move objects in relation to each other. Trust me, it’s a huge help.

Snapping enabled? Let’s move forward.

Rotation

This is an easy one: to rotate a shape, grab its rotation handle and go to town. Not literally go to town, figuratively go to town.

I made a picture for you to make sure that you could find the handle.

Click on the handle and drag the mouse. This will rotate the shape.

Flip vertical & horizontal

Flipping helps a lot when you’re trying to create symmetrical shapes. It lets you create half a shape and then flip it, join it with the other half et voila! Symmetrical as can be.

To demostrate this, I’ll use flipping to create a leaf. I’ll start by creating a curved stroke with the pen tool. To do this, just click on a point in the canvas with the pen tool. Then, click directly beneath it (holding Shift will make this much easier to do, as it will snap the angle) at a respectable distance but do not release the mouse button. Instead, drag it to create a curve like this

and then release it.

Next, click on the shape to select it, copy and paste it by using Ctrl+C and Ctrl + V and then flip it horizontally (this will flip either the original or the copy, depending on what you have selected — doesn’t matter). The flip tools look like this

After you flip the curve horizontally using the tool on the left, you should have something that looks like this

Now drag the shape on the right to bring it edge to edge with the non-flipped copy. Notice that a light blue line will appear as soon as the shapes are edge to edge. This is the snapping functionality helping you see that you have brought the two curves together.

Now you have a barebones leaf shape

Trying to do something as symmetrical as this using only the pen tool would be nigh-on impossible.

Merge

Let’s keep going with out leaf. This is still not a unified object. To be able to treat it as one (with an integrated stroke and fill) you need to do one more thing.

Select both of the shapes and then select Modify → Merge.

You now have a unified shape that you can fill and generally manipulate as one object.

Change the fill color to a light green and maybe the stroke color to a deeper green and your basic leaf is ready!

Paste Inside

Oh, this is my favorite!

Do you want to give the leaf a bit more personality with a highlight? If you chose “no” WTF is wrong with you? If you chose “yes”, your mom would be proud of you.

Select the entire leaf, copy and paste it, and move it to the right. Now remove the stroke from the copy by selecting it, going at the Borders section and entering 0 (zero) for the stroke size.

Select a lighter green for the copy’s fill. Here’s what you should have now

Now, move the copy and cover the original like so

This looks horrible, obviously. And now for the good part.

The good part

First, select the original and go to Modify → Convert to Path. Then do the same for the (altered) copy. This will now truly convert each leaf to an integrated shape.

Until now, you had individual access to the flipped and non-flipped half of each leaf. You will now lose access to the individual parts and get a single path for each leaf but this will allow us to perform a cool trick.

Select the copy and then press Ctrl-C and Ctrl-X (copy and cut, that is). Then, select the original and then go to Edit →Paste Inside Selection.

This will paste the copy inside the original. Another way to state this is to say that the original will clip the copy, ie. the only visible part of the copy is the part that is within the boundary of the original.

Neat, huh? I have also gone ahead and removed the border from the original that I only kept in so far for clarity’s sake.

Practice this trick and keep it in mind because it will allow you to create detail in your work. It’s a bit complicated the first time you do it but it will quickly become second nature with some practice.

And that’s it for our show!

Or is it? I have decided to write an extra, final part on working with text which will be published by the end of the week. Until then, keep practicing!

Today’s homework

Try to create an illustration of a speaker. I mean the device, not a human that speaks. Post it in the comments and I’ll get back to you ASAP with a critique. if you get stuck, let me know!

HOLY UPDATE, BATMAN!

Due to the overwhelmingly positive reaction to this series and the requests of various readers (thank you, your messages made my day!), I have started working on a book version of this series, with expanded content and various exercises that will get you started quickly and efficiently.

The book will be released mid-March but you can pre-order it now by going to my BuyMeACoffee page (link below) and donating any amount over $3 (including $3, obviously). Donating $6 or $9 will also get you e-mail support from me while you’re working on the exercises! Stuck? Shoot me an e-mail and I’ll respond at breakneck speed.

After its release, the book will go to its regular price of $15 and stay there forever (or at least until Michael Bay makes a good movie, which is practically forever), so if you enjoyed these articles and want a gorgeous-looking version with expanded content and more awful jokes, you know what to do! (hint: click the link below)

IMPORTANT: Leave me a message with your email address when you donate so I can contact you and send you the book as soon as it’s released!

Buy Antonis Tsagaris a Coffee - BuyMeACoffee.com_I'm an Android developer and designer with a love for beautiful UIs!_www.buymeacoffee.com