Antonis Tsagaris - Quick and Easy Vector Graphics - Learn The 5 Basic Skills That Will Have You Creating Icons, Logos, Illustrations and UI in Minutes-Antonis Tsagaris (2020)
Antonis Tsagaris - Quick and Easy Vector Graphics - Learn The 5 Basic Skills That Will Have You Creating Icons, Logos, Illustrations and UI in Minutes-Antonis Tsagaris (2020)
Learn the 5 basic skills that will have you creating icons, logos, illustrations
and UI in minutes
By Antonis Tsagaris
Copyright © 2020 by Antonis Tsagaris
Cover design by Antonis Tsagaris
Also by Antonis Tsagaris
nonfiction
fiction
Prerequisites
Prior knowledge or experience in vector graphics is neither assumed nor
required. Most common terms will be defined early on and reiterated
throughout the book, so you’ll never feel lost.
Basics
The first thing you should do when you open your software is to select one
of the templates offered to you or create your own project from scratch.
Usually, this involves selecting the dimensions of your project/canvas.
Adobe Illustrator, Affinity Designer and Gravit Designer all offer a variety
of print and device templates to help you get started.
We want to create a canvas of relatively small size, since a lower resolution
means faster processing times when we’re creating our designs. Either go
for a square canvas of 768px by 768px or a landscape canvas of 1024px by
768px .
Gravit Designer lets you select your desired resolution with a pop-up dialog
that opens up as soon as you start the software and log in. Enter the
dimensions I gave you (make sure that you select px — pixels — as your
units) and click Create!
You should see a blank canvas.
Selection tools
We’ll be discussing most of the available tools in the rest of the book, but
there are two that you should be familiar with right off the bat. These tools
exist in all vector graphics programs and, while they may be named
differently, they do very similar things.
The first one of these tools is the Selection tool. The Selection tool looks
like a cursor and it lets you select, move, rotate and resize objects. Clicking
on an object with the Selection tool selects the object and lets you move it
around by dragging & dropping it where you want. The rest of the
operations facilitated by the selection tool will be described in detail later.
The second one is the Subselect tool (also known as the Direct Selection
tool in Adobe Illustrator) which lets you select an object from a group of
objects and also manipulate anchor points. A similar tool in Affinity
Designer is called the Node tool. Anchor points/nodes are points on paths
that let you modify the shape of the paths themselves, either by moving the
points, changing the point type, altering the curvature of the path between
the points or by manipulating the handles of the anchor point. See the
‘Beyond the Basics’ chapter for a more thorough discussion of anchor
points and the closely related pen tool.
Finally, I’d be remiss not to mention the Zoom tool, which looks like a
magnifying glass. You zoom in by pressing the ‘+ ’ icon on its right and
zoom out by pressing the ‘- ’ icon on the left. The Zoom tool is quite helpful
for adding details and lining up shapes, among other things.
Section One: Primitive Shapes
Shapes. All of us know what shapes are: a circle is a shape. A square is a
shape. Even a simple straight line is (arguably) a shape. Google agrees that
the definition of a shape is “a geometric figure such as a square, triangle, or
rectangle” .
Creating shapes in a vector graphic program couldn’t be easier. Most
programs will provide you with a selection of shapes to choose from and all
you have to do is pick the one you want to draw and then click and drag on
the canvas to create a shape of the desired size. The number of available
shapes varies depending on the software you use (Affinity Designer has a
staggering amount of shapes available for you to use by default, including
stuff like speech bubbles).
Shapes are underrated. Beginners in particular tend to scoff at them. What
use could a circle and a rectangle be to them? What they fail understand is
that
● Simple shapes will form the basis for most of their work in vector
graphics
● Shapes can be customized to an impressive degree by simply
changing some of their attributes
● Combining shapes and boolean operations (more on these in the
relevant chapter) can create beautiful, intricate designs
Let’s begin our examination of shapes by taking a look at the most common
ones you will encounter.
Line
I know straight lines probably don’t sound very exciting and maybe they are
not, but we’ll be examining them anyway. There’s a very good reason for
that and it’s not because I hate you: examining such a simple construct will
let us take a first look at the various attributes of paths and strokes ,
without having to worry about other aspects of the shape.
To start with, open your favorite vector graphics software and draw a line.
To draw a line in Gravit Designer, you go to your toolbar and select ‘Line’
from the Shapes dropdown menu. Here’s how it looks, with the selection
you must make highlighted in red
After you’ve selected ‘Line’, click somewhere on the canvas and, holding
down the mouse key, drag your pointer to where you want the line to end.
Once you’re there, release the kraken. Sorry, I meant the mouse key. You
should now have a straight line on your screen.
Like in many other programs, this is not the only way to create a line.
Another way would be to use the pen tool, the fountain pen-looking icon
next to the Shapes dropdown. More on the pen tool later.
Now that we have a test line down, let’s take a look at its attributes.
To start with, let’s call these lines by their proper names: strokes . A stroke
is a line that follows a path , be it a straight or a curved path. The difference
between a stroke and a path is that the path is the mathematical, abstract
representation of a line, while a stroke is the actual line that you draw on
that path . To put it in the simplest terms, when you grab a piece of paper
and a pencil to make a sketch, what you imagine that you’ll put down to
paper is the path, while the actual thing you draw is the stroke. Thankfully,
in the case of computers, what they calculate is what they display on their
screen. with no room for interpretation or trembling hands.
In the image above, you can see six strokes, with an increasing stroke
width as you move down the list. As the stroke width increases, so does the
width of the stroke. This sentence alone is probably enough to earn me a
nomination for the 2020 Captain Obvious Awards.
The 1pt stroke is black (stroke color ) and has square ends , also known as
caps (the terminal part on each side of the stroke).
Moving down the list, the 2pt stroke is purple and, again, has square caps.
Things get more interesting in the 3pt stroke, as there are a couple of new
things going on: the stroke is dashed and it has been treated with a noise
effect. Vector graphics programs let you create dashed paths by specifying a
dash width (how long each dash will be) and a gap size (how big the gap
between the dashed will be) for each stroke.
The 4pt stroke is blue and it has rounded caps/ends. I’m mainly including it
so you can understand the difference between square caps and round caps.
The 5pt stroke is gray and it has an arrow at its end cap. That arrow is part
of a collection of objects you can add to the start and/or the end of a stroke
in Gravit Designer (and all other vector graphics programs).
The 6pt stroke is, again, very interesting. You may have noticed that its
color is not uniform — instead, it gradually changes from a
pinkish/purplish hue into an orange color. This is called a gradient and you
can apply it to strokes and fills (more on fills later). Another thing you may
have noticed is that the stroke consists of dots. This is actually a dashed
path with the dash width set to 0 (zero), which is what most vector graphics
programs use to generate a dotted stroke. You’ll have to remember this one.
To recap, here’s a list of the main attributes of a stroke:
1. Stroke width (numerical value, the biggest the wider the stroke
is)
2. Stroke color (numerical value(s), uniform or gradient)
3. Type of stroke caps (square or rounded, with object added at the
caps or not)
You’re probably wondering how you can change all of these attributes. To
do that, you need to go to the stroke settings panel. In Gravit Designer, once
you’ve selected a stroke you’ll find the stroke settings on the right side of
the screen by default.
Gravit Designer calls its strokes borders . Whatever , Gravit Designer. On
this panel, you can change the color of the stroke by clicking on the colored
circle under the word ‘borders’ (arghhh, there it is again) and the width of
the stroke by changing the number on the right of the colored circle
The sliders icon on the panel (that I’ve helpfully circled in red) allows you
to enter the settings of this particular stroke and change its caps style, as
well as add objects at the start and/or end of the stroke. You can also make
the path dashed by adding values for the dash width and gap.
Strokes (lines) do not have an important attribute that other shapes have: fill
and fill color . Let’s take a look at some other shapes and explore fills in the
process.
Other shapes
An important tip for all filled shapes
Before we study each shape individually, here’s something that you need to
know: to create regular shapes, like a perfect circle or a square, first hold
down the Shift button on your keyboard and then click and drag to create
the shape you’ve selected. After you’ve created the shape, release the
mouse button and then the Shift button.
Making shapes
I’ve already shown you how to select a shape type in Gravit Designer and
it’s a similar process in all other vector graphics software. Select the Shape
tool and then the kind of shape you want to draw. Click on the canvas and
drag to make a shape that has the size you want and then release the mouse
key. Congratulations — you just created a shape!
Most shapes have their own unique attributes, in addition to some common
ones they share. For example, a circle can either be a full circle or have a
slice taken out of it, similar to a pie chart. A polygon can have five sides
(pentagon) or eight sides (octagon) or any number of sides, really (anygon
— OK, I just made this up ). A star can have five points like a pentagram
or a hundred points. Experimenting with shape attributes is a lot of fun and
can lead to happy accidents, so I encourage you to take some time to play
around with them .
To find all those shape attributes I keep mentioning, expect to see a context
panel /menu open as soon as you draw a shape, regardless of what program
you’re using. In that panel, you’ll find all the attributes you can modify. In
Gravit Designer, the context panel looks like this, in the case of a circle:
As you can see, it contains mostly ellipse-specific attributes for you to
modify. Again, take the time to draw some shapes and play around with
their attributes. You may be pleasantly surprised by the results.
You can also change the stroke color independently of the fill color, apply
effects to the stroke, etc.
Now let’s examine fills. A shape that has a stroke but not a fill is essentially
transparent, ie. if you place it over another shape, you’ll be able to see the
other shape through it. In the following example, I drew a purple circle and
then placed a rectangle I created over the circle.
On the left, the circle is visible behind the rectangle, since it has no fill. On
the right, the rectangle has a white fill, so you cannot see the circle behind
it. But watch what happens when I change the opacity of the rectangle from
100% to 75%
The shape becomes semi-transparent and the circle becomes visible. Notice
that in this case, I changed the opacity value of the entire square shape
(from its context panel AKA Appearance panel in Gravit Designer, as
shown before) so the stroke of the rectangle became dimmer too. The
opacity values of the stroke and the fill can also be adjusted independently
of each other, in their respective panels (Borders and Fills panels, as shown
below)
On this panel above, I’ve marked the entire shape’s opacity adjustment
section as 1 . I’ve also marked the Fills section, where you can make
adjustments to the shape’s fill as 2 . I also marked the Borders section as 3 .
Just to make some things clearer, I’ll explain what’s going on in this panel
in some detail.
In the Fills section, you can add a fill to the shape you’ve selected by
clicking the “+” button. If the shape had no fill when it was created, this
will add its first fill. If it already had a fill, this will place another fill on top
of the first. The second fill will cover the first fill, rendering the original fill
invisible. “Then what’s the point?” you may ask. I know. I ask myself the
same thing every day.
But enough introspection. The point is this: check out the subsection in the
Fills section that currently says “Normal”. That’s the blending mode and,
while a discussion of blending modes is outside the scope of this book, you
should know that some blending modes (of which there are many) will mix
the various layered fills in such a way as to make the ones in the back
visible. This is the reason you can add many fills to the same shape.
On the right of the blending mode dropdown, there’s a percentage that
currently says 100%. That’s the opacity value of the selected fill. If you
reduce the value, the shape’s fill will start becoming translucent, revealing
what’s behind the shape. If you drop it to 0%, and its the only fill the shape
has, the shape’s fill will become transparent. However, as I’ve already
mentioned, this won’t affect the stroke of the shape at all, if such a stroke
exists.
Next to the opacity value, there’s an eye. That turns the fill’s visibility on
and off.
On the Fills panel, you’ll also see a trash can icon and a sliders icon. The
trash can icon deletes the selected fill (to select a fill, simply click
somewhere on the fill’s panel where you won’t hit anything else). The
sliders icon sets the fill rule, which you shouldn’t concern yourself with.
We’ve already discussed the Borders panel in the Line section so I won’t
bore you (or myself) by repeating what I said. I’ll just add that, like you can
do with fills, you can apply multiple strokes of different widths to the same
shape, which can make for some funky stylings!
In this example, I didn’t use any fills just a circle with three different
strokes, each with a different color and width. Here’s the Borders panel for
this circle. I’ll show you how to do the slanted text effect later.
Gradients
Finally, let’s talk about gradients. A gradient refers to the (usually) smooth
transition of one color into another, although a more correct but less
practical definition would be color variance based on position. On our
‘Funky!’ badge above, the center of the stroke was a bit too empty and
plain, so I used a radial gradient as the fill of the circle. Here is the result:
As you can see, the central part of the fill is white but it fades into a warm
orange as it moves outwards toward the circumference of the circle.
Shortly after the 80s, gradients fell out of fashion faster than hair metal but
they’ve made a (welcome, in my opinion) return lately, as the high-res
displays we’re using these days make them look much smoother and less
horribly dithered.
There are three main types of gradient
● Linear gradient : the color changes across a straight line
● Radial gradient : the color changes across the radius of a circle
● Angular gradient: the color changes following the rotation of the
radius of a circle
This explains it more clearly:
In the case of a linear gradient, you can change the direction of the gradient
by rotating a helpful affordance that appears whenever you apply the
gradient.
The gradient affordance has a starting point and an endpoint. By clicking on
either of those points, a panel will appear that will let you change the
starting color and/or the ending color of your gradient. Clicking somewhere
in between the points will add a third (and a fourth, should you click again
and so on) color point. This means that a gradient doesn’t have to be
limited to two colors . You can change between as many as you want.
You can also rotate the affordance of a linear gradient, thus changing the
direction of the gradient too. Simply click and hold on the starting or ending
points of the affordance and drag.
Finally, gradients can also be applied to strokes and (with an intermediate
step I’ll explain later in the “Working with text” chapter) to text.
One last tip, before we move on to an example of an icon created with
primitive shapes and your exercises for this chapter: gradients work great
with noise and halftone effects . As these types of effects tend to make
gradients look less sterile and help them come alive. Here’s a sunset
illustration I created in five minutes using just shapes, gradients and the
Noise, Blur and Halftone effects, followed by a quick explanation of how I
achieved said illustration.
The sun is a circle with a linear gradient applied to it, starting with orange
at the top and ending with purple at the bottom. The sky is simply a
rectangle behind the sun, with a linear gradient from top to bottom, with
black as the starting color and deep purple as the ending color. The ocean is
again just a rectangle in front of the sun (the waves were created using
boolean operations, which is the subject of the next chapter, so don’t worry
— we’ll get there soon!) with a radial gradient, starting with blue at the
centre and fading into a deep purple at the periphery. This gives the illusion
that the ocean is being illuminated by the setting sun.
All of the objects have been heavily treated with the halftone and noise
effects. To give the sun its glow, I duplicated it and moved the copy behind
the original sun. I then applied A LOT of blur to the copy, which made it
disperse outwards and gave it the appearance of glow. If I wanted to create
more papercraft-like illustration, adding a drop shadow effect to the ocean
would help a lot. More about effects in the—you guessed it—Effects
chapter.
You can see the result of adding a drop shadow on the ocean below:
You may still have one question left for me to answer: “What do you mean
when you say that you moved this rectangle in front of the sun and the other
rectangle behind the sun?” Don’t worry, all will be explained in the chapter
about z-ordering.
A folder icon example
This is a folder icon I created using only rounded rectangles and a single
boolean operation. In order to show you how I made it, below the icon itself
I’ve added the Outline view of the icon. To access the Outline view in
Gravit Designer go to View > Outline View. The outline view in a vector
graphics program shows you the outlines of your shapes (Captain Obvious
Strikes Again!) without any fills or stroke attributes. Think of it as the
architectural plan behind the illustration itself.
The entire thing is comprised of six rounded rectangles with fills in a
particular back-to-front configuration. One of the six rectangles is missing a
piece on the upper right corner. Study it carefully because as you’ll find out,
you can make all sorts of simple icons and logos by layering shapes on top
of each other.
If you’re worried about how you’ll stack the shapes in the order you want
or how you’ll remove a piece from a shape, rest assured that those skills are
very simple to learn in a matter of minutes. You’ll just have to wait until
their respective chapters, z-ordering and boolean operations , to learn how
to do it.
Primitive Shapes: Chapter exercises
Exercise 1: Freestylin’
For this first exercise, I want you to just open your software, create a new
project (File > New… ) and start playing around with shapes and their
attributes. Make some rounded rectangles, a few perfect circles and draw
some lines.
What’s z-ordering?
Z-ordering may sound like something a nuclear physicist would do at a
particle accelerator facility but it’s probably the easiest concept to grasp in
this book.
But what exactly does it mean?
Your screen is a two-dimensional surface, so if you draw something in one
part of the screen and then draw something else that shares that part of the
screen with the first object, one of these things has to happen: either the first
object drawn will (fully or partially) cover the second one or the second
object drawn will (again, fully or partially, depending on size and location)
cover the first. What actually happens in this case is that the second object
is drawn over the first object . If you draw a third object, that object will
be placed in front of the other two and if you draw a fourth object, that one
will be placed in front of the other three and so on and so forth.
You may remember from high school math that when creating the axes of a
graph, the horizontal axis is usually dubbed the X-axis and the vertical axis
is dubbed the Y-axis. Since we live in three-dimensional space, there’s a
third axis that instead of up/down (Y) or left/right (X) refers to back/front .
That axis is called the Z-axis . This is why the order in which objects are
placed on screen (back to front by default) is called Z-ordering.
For most people, this makes intuitive sense. Somehow, if you ask people
with no experience in computer graphics which object will cover which,
most of them will assume that the second one will be drawn over the first
one—at least in my experience.
Knowing what Z-ordering is means that you are now a Knight of the Order
of Z. Congratulations! Your helmet will arrive shortly in the mail. It’s quite
heavy, so we had to charge you a bit extra for shipping.
Modifying the z-order of objects
Let’s say that you’ve drawn two objects that overlap, like so
The rectangle was drawn first, so it sits in the back like a loser while the
circle was drawn second, so it sits in front of the rectangle, all smug and
shit. But, oops—you didn’t mean to do that! Instead, you want the rectangle
to come to the front, leaving the circle in the back. There has to be a way to
do this, right? Surprisingly, there is not.
Just kidding—of course there is ! In fact, every single vector graphics
software gives you a very simple way to do it. Since this is a fundamental
skill to have, I’ll show you how to do it in all three (Adobe Illustrator,
Affinity Designer & Gravit Designer) I use. In all of them, you select the
object you want to move to the back or to the front and
● In Adobe Illustrator , you go to Object > Arrange > Bring
Forward or Object > Arrange > Send Backward
● In Affinity Designer , you go to Layer > Arrange > Forward One
or Layer > Arrange > Back One
● In Gravit Designer , you go to Modify > Arrange > Bring
Forward or Modify > Arrange > Send Backward
There are alternate ways to move objects in the z-axis in all of these
programs. All of them have icons in their toolbars or certain panels that,
after selecting the object you want to move, let you move it simply by
clicking the “forward one” or “backward one” button. Gravit Designer’s
look like this
Yet another way to do the same thing is to use the Layers panel in any of the
programs. There, you’ll be able to drag and drop entire layers or specific
objects, thereby rearranging them on the z-axis. The Layers panel in all
programs look extremely similar. This is how the Layers panel looks in
Gravit Designer
Starting from the bottom of the list, you have the object that’s the furthest
back, ie. the one that all other objects, groups of objects or layers on the list
are in front of. That’s the lone ‘Rectangle’ object. Higher on the list, you’ll
find something called a Group, which contains three ‘Rectangle’ objects.
The objects in this group are in front of the lone ‘Rectangle’ object that’s
lower on the list. Next, there’s a lone ‘Ellipse’ object, which is in front of
the Group I just mentioned. Finally, there’s a ‘Layer 0’ object that’s in front
of the rest of the objects in the panel, which contains two ‘Polygon’ objects.
Here are the most important operations you can perform on this panel:
● As I’ve already mentioned, you can drag and drop objects to change
their z-order in the hierarchy. For example, you can bring the
bottommost Rectangle object to the front of the rest of the objects by
dragging and dropping it to the top of the list.
● You can drag and drop objects in groups or layers.
● You can delete objects by selecting them and clicking the trash can
icon
● You can create new layers by clicking the layers icon that sits to the
right of the trash can icon
One question I get very often is this: what’s the difference between layers
and groups? For all intents and purposes, they are interchangeable. Their
difference is mostly contextual: if I’m creating an object that’s comprised of
smaller sub-objects (a car, for example), I’ll create a Group that contains the
various car parts (wheels, chassis, windows, etc.)
On the other hand, if I want to manage the stacking order of an illustration’s
levels, I’ll usually use a layer. For example, if a person is on the same plane
as the car, I’ll include the car group and the person in the same layer, unless
there’s a good reason not to.
But really: don’t stress about it. Use whatever makes the most sense to you.
At this point, it would probably be a good idea to mention the keyboard
shortcut for grouping and ungrouping objects, as it’s something you’ll be
doing very often. First, select the objects you want to group together by
holding down Shift and clicking on the objects you want to select. This is
how you select multiple objects. Keep in mind that you’ll have to use the
Select tool for this to work, which looks exactly like a mouse pointer. Then,
on a PC, press Ctrl+G . On a Mac, the shortcut is Command+G .
Not bad, but what happens if you select each copy of the waves and change
their brightness slightly, so that the one on the back is the least bright, with
the one in front of it being slightly brighter and with the one in the front
being the brightest (changing the brightness is something you’ll learn how
to do in the Effects chapter)? Then we get something like this:
I think you’ll agree that this looks much better! And, hey—I added a
dolphin! Dolphins make everything better.
Here’s another example I shat out in a minute to illustrate this point. Keep
in mind that the filename of the exported .jpg was crappy mountain.jpg and
adjust your expectations accordingly:
I’m pretty sure than, even with this level of shartistry on display, you’ll
easily be able to tell which mountain range is supposed to be in the front
and which one is supposed to be in the back. Obviously, since the light grey
mountain range is partially obstructing the darker mountain range, it has to
be at the front. However, darkening and adding some slight blur to the
mountain range in the back helps with the illusion of depth.
Now select both shapes (either by holding down Shift and clicking on the
first and then on the second shape or by drawing a rectangle that contains
both shapes with your selection tool).
After you’ve selected both objects, they will be highlighted by a bounding
box . The bounding box is a rectangle that surrounds a selection and allows
you to perform operations such as translation, rotation, etc. on the selected
objects. More on this box in the chapter on Transformations. Here’s what
the selection and its bounding box should look like
The picture above points out the selection tool, the bounding box and the
boolean operations dropdown on the toolbar.
Now that both objects are selected, perform the boolean operation by
selecting it from the dropdown in your toolbar. I’ll go with subtraction:
If you’re using Gravit Designer, click on the resulting shape with your
selection tool and select Modify > Path > Convert to Path from the menu.
This will convert the resulting object into a pure path, instead of the weird
chimera state of rectangle-with-some-triangle-subtracted that Gravit
Designer likes to keep the results of boolean operations in. That state has its
place, since it will allow you to move the pre-operation shapes around
freely, updating the result in real time. However, converting the result into a
pure path creates a new object and stops the software from treating the
shape as a compound shape (a shape that’s comprised of two or more basic
shapes), which makes things much simpler and reduces the possibility of
weird behavior in the future.
Now partially cover one circle with the other by moving them around with
your selection tool. You can do this in a variety of ways, depending on the
thinness of the crescent you’re going for and perhaps the required
cartoonishness. Right now, I’m going for something like this:
Now, select both circles (Shift+click on each circle or include them both in
a rectangle drawn with your selection tool). If you’ve selected them
correctly, a bounding box will appear around them.
With the circles selected, go on your toolbar, click the boolean operations
dropdown and select Subtract . Success!
Very cool, right? You now have an outline icon and it took you five seconds
(hopefully) to do it! If it didn’t take you five seconds, go back to the Shapes
chapter and re-read it.
Since we’ve created an outline icon, I should probably mention this: if
you’re creating an icon set with outline icons, make sure that you keep the
stroke/border size consistent between all icons. Nothing screams amateur
more than an icon set with inconsistent stroke sizes.
Creating the waves
Before you read any further, and taking into account the method we used to
create the crescent moon, take a minute to think about how you would go
about creating the waves.
Minute over? Let’s see if we agree.
First, create a wide rectangle. Make it turquoise. Now create a small circle
and make multiple copies. To do this, select the circle and use the shortcuts
Ctrl/Command+C and Ctrl/Command-V multiple times; in Gravit
Designer, the copy/pasted shapes are placed over the original shape, so
don’t be surprised if you don’t see the copies. They are there, just start
dragging each copy away with your selection tool.
Here’s what I did:
Now start dragging each copy of the circle with your selection tool and
place it next to each other so that they cover the rectangle like so:
It doesn’t have to be perfect, but try to get the circles touching tangentially
and keep them centered relative to each other on the Y-axis.
I bet you know what I’m doing next! Select everything (easiest way is
Ctrl/Command+A ) and, from the boolean operations dropdown select
Subtract .
Neat, huh? Now select Modify > Path > Convert to Path again.
Now would be a good time to mention that I’ve had an advantage over you
all this time. No, not my stunning looks and winning personality, although
probably that too. My advantage was using the Snapping tool. The
snapping tool is on your toolbar and it looks like a magnet:
The snapping tool is so amazing, I wrote a rap about it. But what does it do?
If you enable snapping by clicking the magnet icon, all kinds of wonderful
things happen:
● You get guide lines . Guide lines are amazing because they appear
when you need them the most. For example, when I was placing the
circles next to each other in the waves example, two kinds of guide
lines appeared: whenever a circle came in contact with another circle,
a line would appear as if to say “the circles are touching now, that’s
enough!” The other kind of guide line appeared whenever I was
moving a circle in the Y-axis. Whenever neighboring circles’ centers
or baselines were aligned in the Y-axis, I would get a line indicating
that. This essentially means that the shapes are snapping to each
other, guiding you with their placement.
● The shapes snap to the grid . The grid is an actual grid of lines that
help you place items in a harmonious manner on your canvas.
Usually, and by default, the grid is invisible but still there. With snap
disabled, you can move your shapes freely, without any apparent
stepping. Enabling snapping means that your shapes’ movements are
constrained to the grid. This may sound limiting but it actually helps
to achieve tidy results, especially if you’re designing user interfaces.
Creating a cloud
We’ve only been using subtraction so far, so let’s use some union too.
Create two perfect circles and a rounded rectangle on your canvas. To
create the rounded rectangle, simply draw a normal rectangle and in the
shape’s appearance/attributes panel, increase the value of the Corner
attribute. I took it to the max.
You should have something like this
You can now place them in such a way that a cloud will be formed. I came
up with this but you can do your own thing:
Select all the shapes and from the boolean operations dropdown select
Union. Don’t forget to go to Modify > Path > Convert to Path .
If you cannot place the various shapes in a configuration that you find
pleasing, go to View > Outline View. The outline view is perfect for
placing objects relative to each other, especially when said objects are
ellipses. Once you’re done, disable the outline view by following the same
steps.
To practice, embellish the cloud project by adding the sky and the sun
peeking behind the cloud (go through the Z-ordering chapter again if you
forgot how to do this). Also, copy and paste the cloud and create a couple of
smaller ones to place around the canvas. You should end up with something
like this:
Creating the outline lightbulb icon
Let me start this example off by showing you the final icon
If you want, you can go back to that chapter and take a look at the outline
view with explanation I have provided. However, try to do this on your
own. The result doesn’t have to be exactly the same but try to get as close
as possible.
If you’re stuck or need any other kind of assistance while you’re creating
it, send me an email at [email protected] . I’d be happy to help!
Optional exercises:
1. Create a cloud and make an outline version of it. Bonus points if
you add some rain!
2. Create Pac-Man and then make an outline version too.
Section Four: Transformations
OK, I admit it: transformations are boring. I am, of course, referring to
transformations in vector graphics — not actual, real-life transformations,
like that of a lowly caterpillar into a magnificent butterfly or that of an 18-
wheeler into a gigantic battle robot from outer space voiced by Peter
Cullen.
Transformations in vector graphics refer to the various size-, position- and
shape-related operations you can perform on objects, like
● Moving them on the canvas, which is called translation
● Making them bigger or smaller, which is called scaling
● Rotating them around one or more axes, which is called—
unsurprisingly—rotation
● Flipping them around, which is called flippettyflips . Fine ,
it’s not called flippettyflips—but it should be. It’s called
reflection .
Adjacent to these kinds of transformations are things like alignment and
distribution, so both of these things will also be analysed in this chapter.
Despite their fancy names, none of these concepts are difficult to grasp, but
mastering them can make a real difference to the quality of your work.
Translation
To scale the object, click on one of the bounding points and drag & drop to
the preferred size. To keep the scaling proportionate (ie. retain an 1:1
relation in both dimensions) hold down Shift while you’re dragging and
dropping.
Rotation
In the previous figure, you may have noticed something called a rotation
handle . Clicking that and dragging will let you rotate the object. However,
there’s another way to do it: if you hover your selection tool near the corner
of the bounding box, the cursor will change from the usual arrow to the
corner rotation affordance, denoted by a arced line with an arrow on each
end, as shown below
Clicking on the affordance and dragging & dropping also allows you to
rotate the object:
Remember that for the affordance to pop up, you first have to select the
object so that its bounding box appears.
If you hold down Shift while you’re rotating the object, the software will
apply the rotation in increments of 45 degrees.
Rotation, unlike what is usually the case with translation and scaling,
sometimes requires absolute precision. Sometimes, a rotation of 29.9
degrees won’t be precise enough; you’ll need it to be 30 degrees exactly .
To do that, you’ll need to use the object’s Transform panel, which looks like
this
In Gravit Designer, by default this panel appears below the toolbar, on the
top right. However, all vector graphics programs have a counterpart to the
Transform panel, which usually shows up when you select an object.
As you can see, the Transform panel has a field called ‘Angle’ into which
you can enter a precise value. In Gravit Designer, entering a negative value
(eg. -45° ) will rotate the object clockwise, while entering a positive value
will rotate the object counterclockwise.
By now, you should know how to create this shape. In fact, even if you’re
sure you know, I’d still urge you to sit down and create it as practice. If
you’re struggling, here’s a hint: it involves a triangle, two rectangles, three
small squares and the application of subtraction and union. Don’t bother
with the dots in the shape’s fill, that’s just the halftone effect I added to
make it look old-timey.
I’m now going to copy and flip this shape, so on my computer I’ll select the
entire shape and then press Ctrl+C (to copy it) and then Ctrl+V (to paste it).
Gravit Designer will paste the copy over the original so you may think that
nothing has happened, but it’s there. To flip the shape horizontally, go to
your toolbar and look for these icons:
Flipping horizontally will flip the copy (or the original, depending on which
one you’ve selected) and lead to this
...which, if you keep as-is, you could claim that it’s three cats on top of each
other. Or you could move the flipped copy to the left and have this cool
skyscraper graphic:
Do whatever you want. I’m not here to tell you how to live your life.
As an aside, if you place an art deco typeface and a nonsense word under
the graphic, you can get a nice logo going:
Alignment
Aligning objects is something you’ll be doing very often, especially if you
will be doing user interface or any text-related design. Alignment (by
definition) always includes two or more objects, so to align your objects
you’ll need to select them.
Adobe Illustrator, Affinity Designer and Gravit Designer all have their own
alignment panels/tools, and they are all pretty much self-explanatory. This
is how Gravit Designer’s panel looks, with helpful descriptions for each
button:
Let’s say you have three squares that you’ve haphazardly thrown on the
canvas, hoping that no one will notice. But then someone does notice and
you have to do something about it:
If you select all the squares and then press either the align center
vertically, align top or align bottom (in this case it doesn’t matter because
the shapes have the same height) you’ll get this result
Let’s also align a block of text with a black rectangle. In this case we’ll be
aligning the objects left with the align left button.
Selecting the black rectangle and the block of text, we press the align left
button and the result is this:
Align functions also work between groups of objects. In the following
example, we want to center the two blue circles with the orange one.
To do this, we need to select the blue circles and press Ctrl/Command+G.
This will group the two circles. Now we can select all three circles and
press the align horizontally button. This will treat the blue circles as the
group they are and will center their group with the center of the orange
circle. The result is this:
Distribution
Distribution refers to the equal distribution of objects on an axis. Here are
four objects, placed with no consideration paid to the distance between
them
When the text tool is clicked, your pointer changes into a tiny crosshair.
Click that crosshair anywhere on the canvas and you’re ready to start
writing.
When the text tool is selected, the text appearance panel will open on the
right side of the screen
This panel allows you to select a typeface to use (it currently says ‘Open
Sans’ in the text selection field; you can select from a huge variety of free
fonts or import your own fonts by going to File > Import > Add fonts ),
the size of the text and the weight of the text (eg. light, regular, bold, etc).
The decoration section lets you apply attributes such as bold, italics,
strikethrough and underlining to the text. Also pay attention to the
alignment and spacing sections and, after writing some text on the canvas,
experiment with them. Finally, enable the ‘Scale font on resizing’ option,
which will resize the text whenever you scale its bounding box.
Entering text appearance panel settings by clicking on the Sliders icon
on the top right corner of the panel also lets you enable ligatures, apply
subscript and superscript styles to text and change the capitalization scheme
(all lowercase, all caps, first letter of each word to be capitalized, small
caps).
For now, select the Text tool and write something on the canvas, preferably
a short word like ‘STATE’ or ‘WATER’. I’ll go with ‘THE FIFTH
ELEMENT’. OK, not really. I’ll go with ‘LOVE’, which is essentially the
same thing. The typeface I chose to use (which should also be available to
you by default in Gravit, if you want to use it) is called Luckiest Guy . If
you’re following along, you don’t necessarily have to use this one, but you
should still use a bold, heavy, impactful font to apply to your text. Here’s
my text
Converting text to path
There’s an interesting duality in the objects we manipulate in vector
graphics programs that we haven’t discussed yet but which is extremely
important and— seeing as we’ll be using it extensively from now on— I
should probably mention now.
Here’s the thing: not every object you place on your canvas is the same. I
know that sounds pretty obvious, but I’m not simply referring to a
difference in shape or size or even color. What I’m talking about is the
difference between a path and any other kind of object.
Think of it like this: when you draw a polygon on the canvas using the
Shape tool, you don’t simply get the option to change its stroke and fill.
Drawing a polygon also gives you the ability to change its number of sides
and the roundness of its corners. If you draw a circle, most vector graphics
programs (including Gravit Designer) give you the option of removing a
slice of a certain number of degrees from that circle. And if you write some
text, the program gives you the ability to change the typeface you use to
display your text.
All of the above are specialized attributes that you can only apply to certain
objects. They are not universal attributes that you can apply everywhere—
after all, what would changing the typeface of a circle look like?
However, there’s an operation that takes all specialized shapes and, much
like an overbearing professor at an English boarding school in a period
drama, strips them of their uniqueness—a great equalizer, if you will.
Different programs call this operation different things; in fact, some
programs call this identical operation different things depending on what its
converting.
Some names for this operation are
● Convert to curves
● Convert to outline
● Convert to path
● Create outlines
● Vectorize border
● Expand stroke
The names may vary wildly, but the final result is the same: a shape, letter,
stroke and so on will be converted into a simple or compound path that you
can manipulate more freely, stripped of all its specialness.
Since I struggled to understand what expand stroke does when I first came
across it as a term, let me give you a short example. Take a look at this:
Here’s my question: what are you looking at? Is it a really fat line or a
really long rectangle? It can be any one of those things, right?
And indeed it can. The only way for you to know is to ask me and hope that
I’ll give you an honest answer. Since you asked nicely, I’m going to reveal
that it’s actually a really fat line, ie. a stroke with a very large width I
created by using the Line primitive shape in Gravit Designer.
Here’s what happens when I select it and perform the expand stroke (or, in
Gravit Designer parlance, vectorize border ) operation, by going to
Modify > Path > Vectorize Border :
“What the hell, Antonis? That’s the exact same thing, you dick!” I can hear
you screaming.
But it is not. It merely looks the same. To really understand what is going
on, let me go back and show you both of them with their bounding boxes.
First, the original line/stroke:
I still haven’t mentioned the direct selection tool (or subselect , as Gravit
Designer likes to call it), anchor points or the pen tool since they are more
advanced concepts, but I’ll be describing them briefly in their own chapter.
Back to text.
In the case of text, converting it into a path removes the ability for you to
edit your text, change its typeface etc. but lets you perform some neat tricks
that wouldn't be possible with your text in its special text state. I should
mention that Adobe Illustrator in particular has broken down this distinction
in its latest versions, allowing you, by the use of its Touch Type tool, to do
things to text that are simply not possible in other programs without
converting your text into a plain path first.
However, since it’s the principle of the thing we’re discussing, we’ll be
converting our text into a path and using the result to do some cool stuff.
To remove the fills from the counters, select the counter-filling shapes and
the entire letter (one letter at a time) and perform a subtraction operation on
them. This will bring your counters back. Now that each of your letters is an
independent path with restored counters (some letters, like ‘N’, don’t have
counters so there’s nothing to restore), select one of the letters with your
selection tool and drag it upwards:
You can perform many other operations on these letters. For example, you
can scale, rotate them etc.
The answer is very simple: first, you create the path you want your text to
follow. Then, you select the text tool from the toolbar and bring its
crosshairs over the path you’ve made. Finally, you click and start writing.
The text should now follow your path.
In the example I just showed you, I created two concentric circles. I gave
the smaller one a fill and then used the bigger one as the path that my text
would follow.
You’re not limited to using primitive shapes as the paths that your text will
follow. You can draw any arbitrary shape with your pen tool and then have
the text follow that path, like so
A very cool use case for clipping is adding details to an object that you
don’t want bleeding out to the rest of the artwork. Let’s revisit the mountain
scene I did in the chapter on Z-ordering and add a snowy peak to a plain ol’
mountain. Let’s get started by drawing a gray triangle (mountain) in front of
a deep blue rectangle (sky). Now, using the Shape tool, draw some white
triangles on the top corner of the triangle in a formation similar to this
I know that you’re thinking “WTF is this?” right now but bear with me.
Now select the white triangles only, use the Union boolean operation to
unite them and then go to Modify > Path > Convert to Path . Finally,
select the shape you just created and the big, gray triangle (the mountain)
and click the Clip tool (or use one of the other methods I’ve described to
accomplish the exact same thing). Here’s the result:
Masking can also help you create papercraft-ish designs by applying an
inner shadow effect (more on this in the Effects subsection) to the masking
object:
Effects
There is no shortage of effects for you to use in any vector graphics
software. Adobe Illustrator offers two categories of effects: vector effects
and Photoshop effects. Vector effects affect vector paths, with the result
retaining its vector nature after processing (for example, the Zig-Zag effect
takes a straight path and turns it into a zig-zagging line) while Photoshop
effects are raster-based effects that don’t change the underlying vector
shape but instead generate pixels (for example, the Blur effect).
Affinity Designer and Gravit Designer offer no such distinction, which is
unfortunate. At the time of writing, all of their effects are raster-based.
There’s no point in going through all of the effects, since discovering them
and using them creatively is part of the fun, but let’s take a look at some of
the most commonly-used ones. Follow along by creating a shape of your
choosing on the canvas (I’ll go with a circle).
The Effects panel is at the lower right part of the screen, as you can see
here:
Here are some of the effects I use most often:
● Blur : it blurs stuff. I know, big surprise. Blur is amazing for adding
glow to objects by following this recipe: Create a dark background
> Select the object you want to make glowy > Copy and paste the
object in place so that you have to copies > Select the copy in the
back (use the layers panel) and apply A LOT of blurring to it by
increasing the radius . Your object should now be glowing! This
works so well that I’ve stopped using the Outer Glow effect
altogether. Here’s how the object looks before applying the procedure
I’ve outlined
After spending quite a while thinking that bezier curves look a lot like the
chassises of cars when I first became familiar with them, I was vindicated
when I read this on Wikipedia
A Bézier curve is a parametric curve used in computer graphics and
related fields. The curve, which is related to the Bernstein
polynomial, is named after Pierre Bézier, who used it in the 1960s for
designing curves for the bodywork of Renault cars .
Bezier curves are really important in the field of vector graphics, since they
are what the pen tool generates when you draw with it.
The pen tool usually looks something like this
Even though its name may suggest that you can use it for freehand drawing,
you cannot. To draw with the pen tool, you usually use your mouse to
generate the curves and then manipulate their anchor points (also known as
nodes ) and the nodes’ handles to create your object. If the object is even a
little bit complex, it usually ends up being a chain of connected (or
disconnected) bezier curves.
Here’s an example of an object created using the pen tool, comprised of
several bezier curves
Currently, the joint type should be Straight . This denotes a sharp corner,
which is the way it is right now. From either the dropdown menu on the
panel or the icons in the Joint section, select Mirrored . This will turn the
sharp corner into a curve:
There are other anchor types to try (Disconnected , Asymmetric ,
Connector ) that mainly refer to the behavior of the anchor handles , ie. the
two lines that start from an anchor point when selected. Clicking and
holding on the round ends of those handles lets you drag them, so that you
can change their length and angle, thereby modifying the shape of the
object itself. When using some anchor point types, the handles move in
relation to each other, while with other anchor types they move
independently of each other.
Your best bet, as with anything pen tool-related, is to open your software,
create some objects with sharp corners and then experiment away. See what
happens when you move the handles one way vs moving them another way,
depending on the anchor type you’ve selected.
Finally, when you’re using the direct select (subselect) tool, you can hover
over the bezier curves themselves (not the anchor points) and change their
shape by clicking on them, holding and dragging.
After you’ve played around with the pen tool for a bit, try to create actual
objects that look like something recognizable. Learning how to use the pen
tool effectively is a valuable skill, but it takes some practice.
Creating this shape is very easy, as long as you remember two things
● Enable snapping! With snapping on (the magnet icon in your
toolbar), you’ll get guidelines letting you know whenever your
anchor points are aligned on the Y-axis, so you can keep them there.
● Hold Shift before you draw your lines . This will ensure that the
lines you’re drawing will remain angled at multiples of 45 degrees.
Using your direct select tool, select all anchor points by holding down Shift
and clicking on all of them individually (or including them all in a
rectangular selection area created with the subselect tool). Now change the
anchor type for all anchor points to Mirrored:
With all of the anchor points converted to mirrored, you get a nice wave-
like graphic.
Adding anchor points to an existing shape / convert to path
You can add one on more anchor points to an existing path (and
subsequently manipulate said points) by using the subselect tool or the pen
tool. To do that, you simply click with the pen tool or the subselect tool on
the point(s) on the path you want to add the anchor point(s) to. Removing
an anchor point is as easy: click on the anchor point you want to remove
and press ‘Delete’ on your keyboard.
Adobe Illustrator has specialized tools for adding (or removing) anchor
points; when you click on the pen tool, you’ll be able to access those tools.
Try to remember that certain vector graphics programs (with Gravit
Designer being among them) won’t let you add anchor points to specialized
objects, such as rectangles, stars, polygons, etc. without converting them to
a path first. So if you try to add an anchor point to a rectangle in Gravit and
it’s not working, first go to Modify > Path > Convert to Path and then try
again.
Let’s make a simple almost-envelope graphic to see how adding an anchor
point works. First, either draw a rectangle yourself with the pen tool
(remember that holding down Shift while you create your path will keep
your line completely vertical or horizontal) or use the rectangle using the
shape tool and then convert it to a path. Remove the fill and give it a good,
thick stroke (that sounded vaguely sexual):
Perfect! Now, with the help of guidelines (you have snapping enabled,
right?) add an anchor point in the middle of the top horizontal side using
either the subselect or pen tool. If the guideline is not showing (sneaky
motherfuckin’ guideline), first add the anchor point, then select it with the
subselect tool and then click on Align Center Horizontal in the alignment
panel to place it perfectly in the center of the side. Now hold Shift down to
make the anchor point move completely vertically and drag & drop it lower
(near the center of the rectangle should be good):
If you’re a stickler for detail (please be), add a line to the top of the shape
with the same thickness as the rest of it to finish the graphic
As an exercise, try to think of a couple of alternative ways you could have
achieved the same result and then go ahead and do it.