It’s easier than you imagine!
Read part 2 of this five-part series, “Strokes and Paths”, HERE!
Read part 3, “Boolean Operations”, HERE!
Read part 4, “z-ordering”, HERE!
Read part 5, “basic transformations”, HERE!
Read the bonus part, “working with text”, HERE!
Introduction
Take it from me: having basic vector illustration skills, even if you’re a developer (especially a solo app developer) can come in really handy.
As a basic rule, I always suggest the use of a single icon pack for a single app, for consistency’s sake.
But what if the icon pack you’re using doesn’t have icons for objects or concepts that you really need? What if you need an icon for ‘crown’? Or an icon for ‘avocado’? Or an icon for ‘sphincter’?
Then you’d really be in trouble if (or more realistically, when) the Royal Academy of Constipated Avocado Eaters asked you to create their app.
The thing is, creating basic vector icons and illustrations in a specific style is much easier than you think. In fact, I’m convinced that by mastering five essential concepts, you’ll be able to create most of what you need by yourself.
In this five-part series, I’ll highlight one concept at a time and give you examples of how to use that concept efficiently.
These five concepts are:
- Primitive shapes
- Strokes
- Boolean operators
- Z-ordering
- Basic transformations
- (Bonus concept!) Working with text
For this series, I’ll be using a fantastic vector tool called Gravit Designer. Gravit Designer is available for the browser, Windows, Mac, Linux and Chrome OS so you’ll be able to run it whatever you’re using. It’s also completely free and very powerful.
Of course, you can also use Inkscape, Illustrator, Affinity Designer or any other vector design tool out there.
Concept 1: Primitive Shapes
Here’s a folder icon I created earlier today
To create it, I used nothing but primitive shapes.
Some of you may be asking “what exactly do you mean by primitive shapes”, although as Android developers you (probably) instantly knew what I meant.
If you’ve ever used an XML drawable, you’ve written something like this
<shape xmlns:android=”http://schemas.android.com/apk/res/android"android:shape=”oval” >
<solid android:color=”#FFffff” />
</shape>
The android:shape part defines a primitive shape, in this case an oval, which is what we use to create a circular or elliptical shape. Other valid values in Android are rectangle, line and ring.
A primitive shape, then, is a basic, simple shape that we can use to (in combination with other shapes) create more complex shapes.
Thankfully, illustration applications are not limited to the meagre selection that Android offers.
For example, Gravit Designer offers line, rectangle, ellipse, triangle, star and polygon shapes. Other illustration programs offer an even bigger selection of basic shapes, like crescents, tears and speech bubbles.
Here is an outline view (no fills, only strokes) of the folder example I showed above so you can see what’s really happening
As you can see, the folder icon was created using just rounded rectangles. Of course, “rounded rectangle 3” has a piece cut out of it on its top right corner but that’s something you’ll learn to do in Part 3: “Boolean Operators”. And again, it’s going to be simpler than you think.
I’d be remiss to end this part without mentioning that, in general, these primitive shapes have attributes that are customizable in all vector illustration tools.
In our example, the rectangles were rounded but they don’t have to be. In fact, in Gravit Designer, the preset shape is a regular rectangle with sharp corners. To make it rounded, you manipulate one of its attributes called ‘corner’.
Altering those attributes can lead to dramatic transformations in shape. Below, you can see an overview of the primitive shapes in Gravit Designer and in each row you’ll see some variations of them, based on manipulated attributes:
As you can see, in some cases the difference is so dramatic that the original shape is barely recognizable. This is something that we’ll use to out advantage many times.
For now, I suggest that you open Gravit Designer (or your favorite vector illustration program) and start playing around with shapes and their attributes. 30 minutes should be enough for you to get familiar with the basic shapes and their attributes.
Then as an exercise, see if you can use those simple shapes to start creating something more complex by combining them like, say, a pencil. If you do create a nice (or horrible, doesn’t matter) looking pencil, please share it with me in the comments below.
Helpful tip about shapes: Holding down Shift before clicking and dragging to draw the shape will let you create perfect circles and squares. Otherwise, you’ll be drawing regular rectangles and ellipses.
I’ll see you back tomorrow for part 2 of this short series, called “Strokes”. Not the band.
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