Vector illustration basics for Android developers — Bonus part: Working With Text
Making text awesome!
Previously, on “Vector Illustration Basics for Android Developers”
In this bonus part of my “Vector Illustration Basics for Android Developers” series, I’m going to share some tips for making your text stand out.
Here’s a scenario for you: a friend comes to you and says “Hey, I hear you’ve been reading Antonis Tsagaris’ vector illustration basics series. What a guy. Anyway. I’ve written a musical called “Sprooglen: A Love Story”, which is about the forbidden love between a Swedish milkmaid and a kangaroo in mid-thirties Berlin and I want you to create the poster for me”.
Even though you’re quite perplexed by the plot (everybody knows kangaroos have a deep-rooted hatred of milkmaids, especially Scandinavian ones) you agree to it.
So you fire up Gravit Designer, select the Text tool
- on the top toolbar, it’s the letter “T”
…click on the canvas and start writing. You change the size of the text depending on the canvas size
- select the text, go to “Appearance” on the right panel and change the size
…and you have this starting point
That’s pretty bad. Let’s fix that.
First, select a nice font for the title and another one for the subtitle. After careful consideration I selected Cassanets for the title and Bariol Light for the subtitle, both lovely fonts by http://atipofoundry.com/
To apply a font in Gravit Designer, select the text and then on the Appearance panel, select the font you want to use from the drop-down. If you want to import a font, go to File → Import → Add fonts
Here is the poster with the fonts applied (I have also made the background color black and the text white)
Much better but… hey! I can hear you guys at the back of the class! I know you could have done this in Microsoft Word. Shut up.
Let’s do a trick you cannot do in MS Word. Probably.
Select the Pen tool and create an arc. Tap on a point on the canvas to place the first node and then, moving completely horizontally (using the Shift key down while moving the pointer will let you do that with ease) click on another point and, before you release the mouse button, drag the mouse to create the arc. It should look something like this
Here comes the cool part: select the Text tool and then click on the arc. Now start writing and something wonderful will happen
Yes! Now, let’s remove the nonsense talk and write “Sprooglen!” instead. Also, let’s apply Cassanets to the text again!
You need to watch out for something here: if the length of the text is bigger then the length of the arc, the text is going to start wrapping around the arc in some rather funky ways. To deal with something like that, either increase the size of the arc or make the text smaller.
You will also notice that when you click on the text that runs along a path, a little orange rhombus will appear at the leftmost side of the text. Use that symbol to move the text along the path.
OK, now delete the surplus “Sprooglen!” from the top and make the arc’s stroke width equal to zero to make the stroke disappear but keep the arc.
Then, move the curved “Sprooglen” to the top of the design. If you’ve been following the series so far and doing your exercises, this should be child’s play to you.
We now have this
Huh. Not half bad. But you know what would be awesome? Those “O”s in “SPROOGLEN” would look amazing if we were to enlarge them slightly to make them look like bulging eyes or something.
For that, we’re going to need the help of our old friend known as…
Convert to path
Right now, all the text is just characters.
Sure, you can do a lot with that: change their size, size, spacing etc. But to give you a taste of real flexibility, let’s convert them to a path.
Converting the text to a path means that we can manipulate it like any vector object but it also means that we lose the ability to change the typeface later (since at this point the text stops being text and becomes indistinguishable to the graphics program from any other shape). So make sure that you’re sticking to the selected font.
Ready? Select the text and then go to Modify → Path → Convert to Raw Path.
Now your text is a vector shape but you still have one step to perform before the letters are individual shapes. Right now, the entire “Sprooglen!” word is a single shape. So keep it selected and then go to Modify →Path →Split Path
Now each letter is a single shape and it’s time to get to work on those “O”s.
Double-click each “O” until the nodes pop up. Nodes specify important points in a vector shape, where the path can be manipulated. You can add nodes to any shape to make it more complex but that is beyond the scope of this series.
This is what the nodes look like on an “O”
Select the topmost node of each “O” and drag it up until you have something like this
I think the “eyes” effect is pretty cool!
Your homework for today is to fill up the bottom of the poster with a skyline. But there’s a twist! Create the skyline using manipulated letters after you’ve converted them to paths. Let’s see who’s the most creative student around.
One more thing…
OK, one more cool thing before I retire this series forever (single tear running down my cheek). I’m going to create a tribute to my hometown Larnaca while showing you how to place an image inside text.
Create a new project and write your short (preferably) text. Now apply the typeface you want and make it as big as you need it to be. I’m using Frontage Condensed 3D as my font and this is what I have
Now, convert the text to a path, just like I showed you earlier. No need to split the path like before, though.
Go to File →Import →Place image and import the image you want to place in the text. Drop it anywhere on the screen.
On the left of the screen, you should see a panel called “Layers”. It should contain two layers, one called “Compound Shape” which is the converted text and another which will be the name of the image file you imported.
We complete the trick by clicking, holding and then dragging the image layer into the text (compound shape) layer.
This is the result I got. Of course, yours will be different depending on the image you selected and then placed inside the text
And it’s a wrap, ladies and gentlemen. If you enjoyed this article and this series in general, be sure to clap and maybe even donate below. I’m creating a gorgeous book based on this series with expanded content which is now up for pre-order for the ridiculous price of a $3 donation. After release, it’ll go up to its normal price of $15 so STRIKE NOW while the iron is still hot. Very hot. (more info on the book and donation model follows below)
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!
