Basic but very useful operations Previously on “Vector Illustration Basics for Android Developers” _It’s easier than you imagine!_hackernoon.com Vector illustration basics for Android developers - Part 1: Primitive Shapes _Again, simpler than you think_hackernoon.com Vector illustration basics for Android developers — Part 2: Strokes and paths _Still easy!_hackernoon.com Vector illustration basics for Android developers — Part 3: Boolean Operations _Fancy-sounding name, nothing complicated about it_hackernoon.com Vector illustration basics for Android developers — Part 4: z-ordering _Making text awesome!_medium.com Vector illustration basics for Android developers — Bonus part: Working With Text 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, 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. very 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 go to town, figuratively go to town. literally 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 the original. Another way to state this is to say that the original will the copy, ie. the only visible part of the copy is the part that is within the boundary of the original. inside clip 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 (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. donating any amount over $3 . 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) After its release, the book will go to its regular price of $15 when you donate so I can contact you and send you the book as soon as it’s released! IMPORTANT: Leave me a message with your email address _I'm an Android developer and designer with a love for beautiful UIs!_www.buymeacoffee.com Buy Antonis Tsagaris a Coffee - BuyMeACoffee.com

Too Long; Didn't Read

Questions about cloud security? Get answers here.

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

Too Long; Didn't Read

People Mentioned

Antonis Tsagaris

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

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

Too Long; Didn't Read

People Mentioned

Antonis Tsagaris

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES