Graphics Design and Basic Animation: Ann Patricia H. Almanzor

Graphics Design and Basic Animation
Ann Patricia H. Almanzor
104
Table of Contents
Module 5. Vexel Art

Introduction 106
Lesson 1. What is Vexel Art? 106
Vectors and Vexels: The Real Difference among them 107
Color Palette 112
The Art of Skin Shading 120
Create a Complete Vexel Image Using Adobe Photoshop 127
Assessment Task 164
Summary 164
References 165
Module 6. Introduction to Adobe Illustrator

Introduction 167
What is Adobe Illustrator? 167
How Adobe Illustrator is Used? 168
The Interface: A Brief Orientation for Adobe Illustrator 172
Adobe Illustrator Plugins 179
Assessment 178
Summary 180
References 181
Module 7. Basic Logo Design

Introduction 182
What is Logo? 182
Golden Rules of Logo Design 185
Logo Design Process 188
Types of Logo 189
Guidelines to Create a Logo 192
Assessment 194
Summary 195
References 195
105
Module 5
Vexel Art
Introduction
Vexel art has been mentioned on a variety of websites, be it talking about vector art
and vexel art, or featuring the wonderful work created by vexel artists. However, do you
actually know the answer to "What is vexel art?"
In today's topic, this will be going to give an in depth look at what vexel art is, how to create it
and why it isn't vector art - which is the key point of this topic. It will get technical as it goes
through the differences between raster and vector and then what vexel art is.
There are misconceptions on what vexel art is and it comes from it being a relatively new in
its definition in comparison to other digital art forms. Due to the misconceptions being
forwarded onto each person, it's been molded into the idea that vexel art is a detailed
representation of a photograph in vector... and this is incorrect.
Learning Outcomes
At the end of this lesson, the student should be able to:
 Be knowledgeable about vexel art, and how they can form an art piece
through this medium.
Lesson 1. What is Vexel Art?
According to Akhter (2009) Vexel Art, for layperson; is a type of artwork

wherein you use shapes as a coloring medium. Usually for vexel artworks, the software
used is Adobe Photoshop.
Vexel art is a digital art that is an entirely pixel-based form of raster art that imitates
the vector graphics technique, but is distinguished from normal vector graphics or raster
106
images. “Vexel” itself is a mixture of two words ‘Vector’ and ‘Pixel’. Vexel designs are
composed by using multiple layered shapes (Akhter, 2009).
The term vexel was created by Seth Woolley, to give it a distinctive name from
traditional vector graphics.
Vexels are often characterized by crisp, clean color and lines (that look nearly
vector-graphics style) but is entirely pixel-based, with a variety of color levels, from 2-color
outlines to pseudo-realism.
The different nature of raster programs over a vector-plotted approach gives some
vexel images a unique appearance when compared with traditional rasterized vector
graphics. However, the increased flexibility comes with a loss of image scalability for print
media, which vector artwork retains. To compensate for this, most vexels are created at
very high resolution (Akhter, 2009).
A. Vectors and Vexels: The Real Difference among them (Reyes, 2011)
Reyes (2011) explained that people often get confused about these two terms in
Vector Art. However, there is a thin line separating them especially in the output of each
art piece. Vector Art as a general term or for layperson are usually “cartoonized” artworks
such as these. However, the real difference between vectors and vexels can be seen
when you consider things like the software used and the quality of the artwork produced.
For a quicker distinction among these two terms, here’s a quick table of their
similarities and differences.
Software Used Quality of the Artwork
Vectors Adobe Illustrator, Vector Artworks done in

Freehand, Corel Draw Adobe Illustrator isn’t
pixelated or rasterized
meaning, Adobe Illustrator
produces high quality
vector arts-thus, resizing
107
images won’t affect the
crisp quality of the details.
Vexels Adobe Photoshop, Vexel artworks are what

Painter, Fireworks, MS you call in vector arts done
Paint, GIMP in Adobe Photoshop. The
shapes using this software
produces rasterized
images; thus, producing
lesser quality than that of
the vector artworks.
Resizing the images
affects the quality of the
image.
Figure 5.1. Vector art

(Plant, 2020)
108
Figure 5.2. Vexel art
(Not What They Seem: Deceptive Vexel Artworks , 2010)
In other words, Vector Art is a technique, not a style.
B. Perhaps a better would be “vector-based art”, meaning art created in a vector-based

program. Vector art consists of creating paths and points in a program such as
Illustrate and Freehand. The program keeps track of the relationships between these
points and paths. Vectors are any scalable objects that keep these proportions and
quality when sized up or down. They’re defined as solid objects and can be moved
around in full, or grouped together with other objects. Vectors can be defined by
mathematical and numeric data. So, vector art is anything that’s created in Illustrator,
Freehand, Corel Draw, Flash or other illustration programs (Reyes, 2011).
Any vector or vexel art takes time to create. The artist makes decisions on how
much or how little detail include. The artist makes decisions on colors to use. There are
the same decisions one makes before sitting down with conte crayons, pastels or oil paint.
109
Raster Art (Connection, n.d.)
The Print Connection (Connection, n.d.) stated that Raster graphics are best
used for non-line art images; specifically, digitized photographs, scanned artwork or
detailed graphics. Non-line art images are best represented in raster form because these
typically include subtle chromatic gradations, undefined lines and shapes, and complex
composition.
However, because raster images are pixel-based, they suffer a malady called
image degradation. Just like photographic images that get blurry and imprecise when
blown up, a raster image gets jagged and rough. Why? Ultimately, when you look close
enough, you can begin to see the individual pixels that comprise the image. Hence, your
raster-based logo, magnified to 1000, becomes bitmapped before you know it. Although
raster images can be scaled down more easily, smaller versions often appear less crisp
or “softer” than the original.
To maximize the quality of a raster image, you must keep in mind that the raster
format is resolution-specific — meaning that raster images are defined and displayed at
one specific resolution. Resolution in raster graphics is measured in dpi, or dots per inch.
The higher the dpi, the better the resolution. Remember also that the resolution you
actually observe on any output device is not a function of the file’s own internal
specifications, but the output capacity of the device itself. Thus, high resolution images
should only be used if your equipment has the capability to display them at high resolution.
Better resolution, however, comes at a price. Just as raster files are

significantly larger than comparable vector files, high resolution raster files are significantly
larger than low resolution raster files. Overall, as compared to vector graphics, raster
graphics are less economical, slower to display and print, less versatile and more unwieldy
to work with. Remember though that some images, like photographs, are still best
displayed in raster format. Common raster formats include TIFF, JPEG, GIF, PCX and
BMP files. Despite its shortcomings, raster format is still the Web standard — within a few
years, however, vector graphics will likely surpass raster graphics in both prevalence and
popularity.
110
In the following graphic, we will show the difference in appearance between Vector art
and the other, more common type of computer graphic, Raster art:
Figure 5.3. Shows the difference between vector and raster graphics.
(Ooley, 2019)
Figure 5.4. Raster graphics

(Connection, n.d.)
111
The Importance of Vector and Vexel Art in the Art Industry (Reyes, 2011)
According to Delos Reyes (2011), Vector art images are actually popular nowadays
among different art experts. They now prefer this given the quality of work or image that they
can get from it. Vector art can be made through a number of photo software programs like
Corel Draw and Adobe Illustrator.
In the promotional products industry, prepress services like vector art and embroidery
digitizing are as important as promotional (if not more) as promotional products themselves.
After all, the reason companies choose to add promotional products to their marketing mix to
ensure that their brand names and logos are viewed repeatedly.
Company logos from computer images must be converted into vector art in order to
get clear, high quality art that can be printed on physical products. Companies that are using
promotional products for the first time will need to ensure that their logos are in vector format.
Vector artwork will generally be in the following industry standard formats: PDF, EPS, Corel
Draw or Illustrator.
As a distributor or supplier, you will be expected to offer camera ready art services to
your customers. Distributors and Suppliers charge a one-time artwork free to convert logos
into vector art to use for any promotional products purchased in the future.
If you are new to the promotional industry and don’t have your own artwork design
studio, don’t worry. Most distributors and suppliers outsource their artwork specialist service
providers. High quality vector art requires skilled artist and there are many experienced, cost-
effective prepress service providers that you can choose to outsource your outworks to.
So now that you understand what vector art is, go ahead and pick a reliable artwork
service provider as an essential partner to your business. Once the responsibility of quality
artwork design is taken away from you, you can use your resources to promote your brand. A
quality artwork partner is a key to being successful in the promotional industry.
C. Color Palette (Hannah, 2019)
According to Hannah (2019), A color palette is a combination of colors used by UI

designers when designing an interface. When used correctly, color palettes form the visual
112
foundation of your brand, help to maintain consistency, and make your user interface
aesthetically pleasing and enjoyable to use.
While color palettes date back thousands of years, color palettes are commonly used in
digital design, presented as a combination of HEX codes. HEX codes communicate to a
computer what color you want to display using hexadecimal values. Back in the ’90s, most
digital color palettes only included eight colors. Now, designers have a myriad of shades and
hues from the color wheel to choose from.
Figure 5.5. RGB Color Palette (Hannah, 2019)

Over the next few sections, we’ll learn how to choose and interpret a color palette to
ensure you’re creating the best possible interface for your users.
What are the different types of color palettes?
Colors can be combined to form one of five color palettes that are commonly used by
UI designers. Let’s go through them together (Hannah, 2019).
Monochromatic
A popular choice with designers, monochromatic color schemes are formed using
various tones and shades of one single color (Hannah, 2019).
113
Figure 5.6. Monochromatic Palette (Hannah, 2019)
Analogous
An analogous color scheme is formed of three colors that are located next to each other on
the color wheel. Analogous color palettes are commonly used when no contrast is needed—
for example, on the background of web pages or banners (Hannah, 2019).
Figure 5.7. Analogous Palette (Hannah, 2019)
114
Complementary
Complementary color palettes are comprised of colors that are placed in front of each
other on the color wheel. While the name may suggest otherwise, complementary color
palettes are actually the opposite of analogous and monochromatic color palettes, as they
aim to produce contrast. For example, a red button on a blue background will stand out on
any interface (Hannah, 2019).
Figure 5.8. Complementary Palette (Hannah, 2019)
Split-complementary
The split-complementary color palette differs from the complementary color palette
only in that it employs a higher number of colors. For example, if you choose the color blue,
you’ll then need to take the two colors that are adjacent to its opposite color, which in this
case would be yellow and red (Hannah, 2019).
Figure 5.9. Split-Complementary Palette (Hannah, 2019)
115
Triadic
The triadic color scheme is based on three separate colors that are equidistant on the color
wheel. Most designers employ the triadic color scheme by choosing one dominant color,
and using the other two colors as accents (Hannah, 2019).
Figure 5.10. Split-Complementary Palette (Hannah, 2019)
Tetradic
Commonly used by more experienced designers, the tetradic color scheme employs two sets
of complementary pairs—four colors from the color wheel in total that should form a rectangle
when connected. While it’s a little harder to balance, it makes for a visually stunning end effect!
(Hannah, 2019)
How to choose a color palette

Now that we’ve mastered the basics of color theory, let’s look at how you can use this
newfound knowledge to select a color palette that tells your brand story and resonates with
your audience (Hannah, 2019).
When choosing a color palette for your user interface, here are a few things to consider:
Research your audience

Emotional responses to colors are can depend on a range of personal factors, including
gender, cultural experiences, and age. Before you get started with choosing your color palette,
116
be sure to establish who your audience is. What are their common traits, and what are their
expectations? What brands relating to yours are popular among your target audience—and
how can you out-do their designs?
Conducting structured, thorough research on your target audience will not only help you to
fine-tune the story you want to communicate, but it will also help you to prevent a potentially
catastrophic design failure (Hannah, 2019).
Consider color psychology

With clarity on your target audience, it’s time to look at the psychology behind your potential
brand colors. Color psychology is a branch of psychology surrounding the influence of colors
on human mood and behavior. According to color psychology, the human mind
subconsciously reacts and interprets colors in a way that influences our actions (Hannah,
2019).
If you want to create a color palette that attracts your target audience and accurately tells your
brand story, it’s essential to have a basic understanding of color psychology. To get you up to
speed, let’s take a look at some of the most common color associations below (Hannah,
2019):
 Orange is energetic and warm. Some common associations with orange include
creativity, enthusiasm, lightheartedness, and affordability.
 Red is the color of blood, so it’s often associated with energy, war, danger, and power
but also passion, desire, and love. Some common associations with red include action,
adventure, aggression, and excitement.
 Yellow evokes positivity, youth, joy, playfulness, sunshine, and warmth.
 Pink evokes feelings of innocence and delicateness, gratitude, romance, softness, and
appreciation.
 Blue is perceived as authoritative, dependable, and trustworthy. Common
associations with blue include calmness, serenity, confidence, dignity, and security.
 Green is the color of nature. It symbolizes growth, freshness, serenity, money, health,
and healing.
 Black represents power, elegance, and authority. Common associations with black
also include class, distinction, formality, mystery, secrecy, and seriousness.
117
Choose your colors wisely
Commonly, color palettes are made up of six colors. These colors should include one
dominant color, four accent colors, and one standard color for your text (which is usually black
or grey). Your dominant color is what your customers will forever associate with the brand, so
be very careful when reflecting on what this color should be. Take your time to get inspired,
keep the color associations in mind, and do some user testing if you have to (Hannah, 2019).
Note: you’re free to add more or fewer colors depending on your brand personality, and the
aesthetic you’re aiming for. Choosing monochromatic, analogous, or complementary colors
will help you to achieve a streamlined color palette. Remember: color harmony is the goal
here!
Don’t skimp on contrast

Color contrast is core to any interface, as it makes each UI element noticeable and distinct.
User interfaces containing only shades from the same color family are unlikely to draw users’
attention—and, moreover, run the risk of being a complete headache to navigate. On the other
hand, if copy and background colors contrast each other too much, the text could become
illegible (Hannah, 2019).
Designers control the level of contrast depending on what the interface aims to accomplish.
Experienced designers strive to create a mild level of contrast and apply high contrasting
colors only for elements that are supposed to stand out—such as call-to-actions.
Stick to UI conventions
When working with colors, it’s easy to get carried away with aesthetics over practicality. Of
course, your interface should be visually pleasing—but it also needs to be accessible, easy
to navigate, and enjoyable to use. Of course, it’s great to be experimental—but challenging
design conventions with “edgy” designs can confuse your users, and make them work harder
than they need to (Hannah, 2019).
Some common UI design color conventions include (Hannah, 2019):
 Using a dark color for text to ensure legibility

 Keeping light colors for backgrounds
 Using contrasting colors for accents (as mentioned above)
118
 Sticking to classic call-to-action colors—such as red for a warning sign
Sticking to these conventions will reduce the cognitive load for your users, and allow them to
navigate the interface intuitively.
Get feedback
Want to know if you’re onto a winning color palette? Conduct some user testing! Color palettes
should never be a matter of personal preference, no matter how much you adore the colors
you’ve chosen. As we saw when discussing color associations, the emotional response that
color can illicit is not to be taken lightly; it can pretty much make or break the relationship a
brand has with its customer base (Hannah, 2019).
The best tools for choosing a color palette
When it comes down to the actual task of choosing a color palette for your interface, it’s easy
to feel like you have no idea where to start. Luckily, there is a myriad of helpful tools and online
color palette generators currently available to give you a dose of inspiration and help you to
choose a color palette for your design (Hannah, 2019).
 Adobe Color
Poised as the “bread and butter” resource for all digital creatives, Adobe Color has just about
every color palette out there. Compared to other color scheme generators, Adobe Color is a
lot more comprehensive—so don’t make it your go-to if you want something quick and simple.
Among Adobe Colors’ key features is a color palette generator that pulls colors from the
images you upload (Hannah, 2019).
 Coolors
Coolors is a useful and beginner-friendly color palette generator, perfect for getting to grips
with HEX codes. You can click through random premade color palettes, play around with
shades and hues, and save your favorite colors to build your own custom palette. But it’s even
more fun to play around with their generator. Once you find a color you love, simply copy-
paste it into any external application and start designing!
119
 Adobe Illustrator color guide
Adobe Illustrator Color Guide sets itself apart with its popular ‘color guide’ feature. Once
you’ve chosen a color, the color guide will generate a five-color palette for you. It will also
provide you with a range of tints and shades for each color in the palette. If you switch your
main color, the color guide will automatically refresh the corresponding colors to ensure your
accent colors are complementary (Hannah, 2019).
D. The Art of Skin Shading (Archer-Thomas, 2011)
Skin Shading Style

Archer-Thomas (2011) explained that when starting on a project involving people, one of
the first questions you tend to ask yourself is the style in which you do it. This then will dictate
the style of skin shading you'll do. While some artists approach the area with fine detailing
and precisely layered shapes, others may use a more random style and minimal elements.
So, let's look at some styles of rendering skin shading .
 Gradient Meshing
If you're going for hyper-realistic skin
shading with no signs of layering of
shapes, gradient meshing is one of the
tools for you. It's one of those styles that
can create flawless skin, but can be
frustrating to master. By effectively using
the Eyedropper Tool and a reference
image, you can create realistic skin tones
and shading, which can often look like a
duplicated photograph, rather than a
vector graphic (Archer-Thomas, 2011).
Figure 5.11. Gradient Meshing

(Archer-Thomas, 2011)
120
 Feathering and Blurring (Archer-Thomas, 2011)
Shapes that are feathered or blurred can create a smooth
appearance on the skin. Although they aren't strictly
vector*, they are still scalable effects within Illustrator.
You can still maintain a layered object look, but also have
a more realistic look to the curves of the skin.
*Feathering and blurring are raster based effects. In

Illustrator when you apply these effects, it will duplicate
the shape, rasterize it and then apply either the blur or
feather effect. It then combines the raster shape with the
vector shape. You can modify the settings of the shape
and reshape/rescale as you wish because it is a live
effect. Test this out in Illustrator by expanding your
feather/blurred shape to see the raster component .
Figure 5.12. Feathering and Blurring
 Gradients (Archer-Thomas, 2011)

Gradients can help keep a connection with the
appearance of layered vector shapes, but provide a
stylish detailing that solid shapes cannot. Using solid
gradients can maintain the layered shape appearance;
however, transparent gradients will create a more
smooth appearance that say feathering and blurring can.
Figure 5.13. Gradients

121
 Alpha Masking (Archer-Thomas, 2011)
This is more of a technique in Photoshop, where mixing
vector shapes and raster masks can help create this style
of skin shading. Uses of Alpha Masks in Photoshop by
using brushes to make visible areas of the skin shading he
wants visible. It certainly helps create an effective style of
skin shading unique to the artist.
Figure 5.14. Alpha Masking

 Posterizing (Archer-Thomas, 2011)

If you're just starting out in vectoring portraits, you may
have come across this style of skin shading. By
posterizing your stock image and then tracing the shapes
visible, you can create this almost blocky effect. Want the
skin shading to look more realistic? Well if you have time
to spare you can increase the posterization level to give
you more shapes to trace.
Figure 5.15. Posterizing
122
 Minimal Shading (Archer-Thomas, 2011)
It takes some skill to create an amazing piece of
art out of minimal elements and this is pretty similar
to using minimal shapes to create skin shading. By
using smaller shapes of highlights and shadow,
you can create effective skin shading without the
need for huge amounts of layering. With this style,
you're looking at drawing just the key highlights
(maybe on the nose tip or cheeks) and the darkest
of shadows (cast by the nose, the eyelids and
maybe the side of the face). Next time you're
putting together a complex skin shading piece, try
removing 90% of the shapes you've created, and
go back to the absolute minimum to see how you
can change the style of your piece. Figure 5.16. Minimal Shading
 Lines (Archer-Thomas, 2011)

In traditional art, hatching has been a style of
shading which has been used to create depth with
only two colors: the background color and the line
art color. This style has been brought more into the
digital age with the use of pressurized strokes and
well-placed delicate lines to create a style of skin
shading that can be very unique. This is what is
preventing the lines from looking uniform. A
fantastic style and very effective when combined
with minimal shading.
Figure 5.17. Lines

123
 Lines and Opacities (Archer-
Thomas, 2011)
Using low opacity shapes to give subtle

highlights and shadow to the skin and then
using line art to fill in the detailed gaps. Without
the lines the piece may not look as effective,
the shading would be too faint to be able to tell
which areas are which.
Figure 5.18. Lines and Opacities

 The Skin is the Canvas (Archer-

Thomas, 2011)
Similar to the philosophy of tattooing, the skin
is a canvas in itself!
In this piece we can see how used a minimal
style of skin shading (see the highlight on the
nose and ear, and shadow along the nose and
neck), and then overlaid this over an
illustration, more than likely within a clipping
mask. It's certainly a unique way of skin
shading!
Figure 5.18. The Skin in the Canvas
124
Tips on Skin Shading (Archer-Thomas, 2011)
The lips are an area of skin. When rendering lips, try to incorporate them into the skin
shading and then use Color/Soft Light blending modes to add color to the lips. This will help
prevent them looking like a separate entity that is floating on top of the skin (Archer-Thomas,
2011).
If you're having problems picking out skintones using the Eyedropper Tool on a stock
image, why not try the many Skintone palettes Illustrator has to offer. You can locate these by
going into your Swatch palette with the drop-down menu, going to Open Swatch Library >
Skintones. There you'll find a variety of palettes for different ethnicities, as well as
highlight/midtone and shadow colors.
Figure 5.19 Swatch Palette shows for the Skintones Palette

If you're still having problems with selecting skin tones, try using one color for the
whole portrait. Then use a variety of Blending Modes and Opacities to define areas of
highlights and shadow. For instance, highlights can be created using Screen and shadows by
using Multiply.
Figure 5.20 Variety of Blending Modes and Opacities

125
For detailed portraits, remember that the skin is not all one color. The corners of your
eyes are slightly grayed, the cheeks may have a "rosy" color to them. Men will have a reduced
saturation around their chin/mouth/jawline areas due to stubble growth. Around the nose may
be more red than other areas also.
Figure 5.21 Blending rosy color for cheeks

Do you have an area that is not as smooth as you'd wish? From Illustrator CS4
onwards you have the wonder which are transparent gradients. Used effectively, they can be
layered upon areas that can make areas appear smoother without the need of blurs and
feathering.
Figure 5.22 Use of transparent gradients for smoother layer.

126
If you're using stock images as a reference, try
increasing the contrast of the image in Photoshop (or
any photo editing software) so you can see which
areas have the most highlight and shadows. This will
make it easier for rendering. If you've not got
Photoshop, just place a shape over the canvas set to
Color Dodge and one for Color Burn to increase the
contrast.
Lastly, take your time. Rushed and sloppy skin

shading is often picked up upon as a flaw in a
composition.
Figure 5.23 Increasing brightness
and contrast for stock images
Create a Complete Vexel Image Using Photoshop. (Agarunov, 2008)
According to Agarunov (2008), this topic will instruct the reader on how to take a
picture and create a vexel image out of it, through Photoshop. Numerous vexel techniques
are taught. You'll learn how to use the Pen Tool, and then put it to good use to construct
hundreds of shapes that will compose a full vexel image.
Final Image Preview

Let's take a look at the image we'll be creating.
To create the vector lines on an image we can Posterize the picture to see its vector lines,
and this gives us a guide on all the lines in the image and what to trace.
Pen Tool Tutorial

The most important part of this project will be the Pen Tool (P). This will be the tool we
use most frequently. If you want to make a vexel, you have to be able to use it well.
127
First thing you have to do is set the correct settings of the Pen Tool in its options. Below is a
picture of where the Pen Tool is located. And above it is the correct settings that you should
have set for this tool.
Figure 5.24 Setting of Pen tool on starting a vexel image in Photoshop

(Agarunov, 2008)
Now that we have the correct settings on the Pen Tool, we have to learn how to properly use
it. So, there are two main ways you can use it. First, it will explain the way which simply uses
the basic Pen Tool. Now in vexeling we will be doing a lot of shape tracing; So, it will
demonstrate how to trace a random shape with the first Pen Tool technique.
Step 1
Ok, here is the first way to use the Pen Tool. This way isn't a 100% accurate, but it’s the
easiest way. Now below we have a shape that we will trace with the Pen Tool. This is still a
small tutorial for the Pen Tool to get us a little bit of practice.
128
First thing we will do is start at one of the edges. You'll want to zoom in for more accuracy.
Now take out our Pen Tool and left click on the edge. Then move our pointer to the next edge
above and to the left and click again. Now this is how you trace around shapes without
rounded sides.
Now you should have something like the second image below. I cropped the piece of the
image that we are trying to trace first. So, you'll have two little boxes one open and one
closed.
Figure 5.25 Tracing around shapes without rounded sides

(Agarunov, 2008)
Step 2
Now move on to the curved
part of the image. We still have a
small horizontal part left before the
curve comes, so take your mouse
and click on the point right before
the image starts to curve. If you
want to practice with the same
image you can get it through the
Photoshop Shapes. Figure 5.26 Guiding mouse on curved part of an image
(Agarunov, 2008)
129
Now once you are up to the curve, put the mouse about half way through the curve
and click, but do not let go. Instead, after you have clicked, drag your mouse upwards until
your line matches the curve. Below is what your trace should look like.
Step 3
Now take these two simple steps

and apply them to the rest of the
shape. Just go around the whole
shape. Once you have fully traced
it, go back to your starting point
and connect it by simply clicking on
the open box.
Figure 5.27 Connect the starting point by clicking on the box

(Agarunov, 2008)
Step 4
OK great, now we have a full traced
object. Also, our trace is Closed
meaning there are no openings and
no lines that are not connected. The
last step is to fill this trace. You'll need
to know this because we'll be filling
our traces with skin colors when
making our vexel.
Figure 5.28 Filling colors to traced path.

(Agarunov, 2008)
130
You should still have the traced U Turn shape. Next thing you do is make a new layer. Then
select it and move your pointer inside the shape and right-click. Then go to Fill Path and place
in any color you want, and click OK. Right-click once again and Delete the Path. This gets rid
of the trace we just did and leaves our new filled object.
Figure 5.29 Tracing U-turn shape

(Agarunov, 2008)
131
Step 5
We have now learned the first way of

tracing and making shapes with the
Pen Tool. Now we'll learn the second
which is very similar, but it uses an
extra part of the Pen Tool to make its
shapes more accurate. It is called the
Anchor Point.
Figure 5.30 Anchor Point

Now we have a new more difficult
(Agarunov, 2008)
shape to trace. This one can also be found in the Photoshop Shape Library. This shape has
a lot of curves and is perfect for using the Pen Tool with the Anchor Point. So, we'll begin by
starting at the bottom of a curve and making our first point. Then drag to the opposite side of
the curve and make a diagonal line.
Step 6
Use our Anchor Point to make a
curve. Take our pointer and drag it
to the middle of our line. Then
right-click and select Add Anchor
Point.
Figure 5.31 Adding Anchor Point

(Agarunov, 2008)
132
Step 7
OK, now you can see a small box in
the middle of the line. Hold
Command to turn your Pen Tool
into a pointer. While doing this, drag
the box up to the top of your curve
and let go.
Figure 5.32 Moving of Anchor Point
(Agarunov, 2008)
Step 8
We still have two parts of the line
that aren't quite traced alongside
our curve. So, let's add anchor
points to them too, the same way
you did to the first. Use the same
method of holding Command and
moving them towards the curve.
There you have it.
Figure 5.33 Adding of Anchor Point

(Agarunov, 2008)
133
Step 9
Now you can go on and complete
the rest of the shape by repeating
this process. So, you can use
whichever technique you are more
comfortable with and apply it to the
vexeling process. If you are still
not a 100% comfortable with the
Anchor Point way of using the Pen
Tool, below is another step-by-
step walk through on how to make
shapes.
Figure 5.34 Techniques on how to use Anchor Point using Pen Tool
(Agarunov, 2008)
Step 10
You are now ready to vexel your image. Only thing you need to do is pick your image
out. Now not all the images you see can be cleanly vexeled. You have to find an image of a
person that has all their attributes fully visible and nothing hidden behind a shadow of a fuzzy
picture.
Now when picking your stock remember that a larger resolution is better. The original
resolution of the image chosen for this tutorial is 1414 pixels by 2121 pixels. So, you want
something like that or bigger. Now that we have our stock, we are ready to begin the vexeling
process.
134
Figure 5.35 Model image for vexel art
(Agarunov, 2008)
135
Step 11
Let's set up the picture. Once you've selected your
stock, open it in Photoshop. First thing you should
do is duplicate the original once. Then change the
name of the original stock to "Original," just so you
know which one is the original. Now you have the
duplicate, select it and place it over your "Original."
Then when its selected, go to Filter > Blur > Smart
Blur, and use the settings below.
Figure 5.36 Setting of image into Smart Blur

(Agarunov, 2008)
Step 12
Duplicate your new Smart Blur layer. Now you should have two. Hide the duplicated layer that
is on top. The one in between of the duplicate and the original should stay un-hidden. Now
select that layer which is in the middle this, which should be the Smart Blur layer, and go to
Image > Adjustments > Posterize. This
effect is very important.
You can see that when you apply this

effect you get different shapes on your
stock. So you need to pick a level of
around 20-25. I picked 23 because to
me it just looked the best. Now when
you're trying to select your level you
should zoom into the stocks skin to just
see how the shapes will play out at that
level. Figure 5.37 Posterizing
(Agarunov, 2008)
136
You want a level that gives you a good flow of shapes and skin tones but does not go
overboard with it. As you can see in the image below, the 23rd level gave me a nice balance
of shapes that I could trace out.
Step 13
If you look closely at the colors of the skin, there are a lot of colors that you would never see
on real skin, like pink, green, and blue. So, we need to get rid of them.
You should still have that duplicated Smart Blur Layer. Un-hide it and then place it over the
posterized image. Then set its Blending Mode to Color. This should bring all the colors to
realistic skin tones. Below are the before and after images.
Figure 5.38 Setting of Blending mode to Color

(Agarunov, 2008)
Step 14
Let's make sure you're following along. The image
below shows how the layers should look at this point.
Figure 5.39 Blur image layer change into Color blend mode
(Agarunov, 2008)
137
Step 15
Now! we are ready to vexel! We have set up our stock and we're ready to get going. So the
first question we should have is what should I start vexeling first? Personally, I don't like
starting with the skin because it’s too hard to avoid vexeling the eyes and mouth while you’re
doing the skin.
I like to start on top by vexeling the eyes and mouth then going to the lower level and doing
the face. It doesn't matter really if you prefer to do the mouth or the eyes first, but I started by
doing the lips and teeth first. So, we'll do that.
Take out our Pen Tool and make a new layer. Please remember a very important thing. Each
shape should have a new layer. This will cause you to have a lot of layers. I highly recommend
that you separate all the pieces of the vexel. Meaning that you do the lips, then you make a
new document and do the eyes, and so on.
If you have one document with every shape in it, then it will make Photoshop run very slow.
This will cause you to mess up a lot. So, remember to separate each body part, and make a
new layer for all shapes.
What you should do is Zoom in (Ctrl and +). I usually go to around 600 - 800%, but that’s just
me, as I prefer it to be realistic. Once you zoom in you will see a lot of shapes. Then grab your
Eye Dropper Tool. This is the 2nd most important tool for vexeling.
For the lips I usually start in the middle and work my way around. After you pick a spot in the
middle, look for a shape to start from. Once you have that, use the Eye Dropper Tool to get
its color. The color should be your foreground color.
138
Now grab your Pen Tool and trace this shape. Most of the shapes are rough shapes with a lot
of edges. So, do not exactly trace every edge. You should trace to look more circular and
softer. Look below, I have an image of
my stock zoomed in at 700%. Look at
the first shape I picked and how I traced
it. Once its traced with the Pen Tool,
right-click and fill it with that color. And
that was your first shape!
Figure 5.40 Tracing of shapes using Pen Tool

(Agarunov, 2008)
Step 16
Go to your last shape layer and Command/ctrl + click on the layer. This will select it. This
helps because it shows you exactly where it is. This helps when you make the next shape, as
you're not going over. Also, you're not taking the wrong color.
Now that you have that selected, make

a new layer over the last shape. Then
look for the next closest shape and
repeat the process. Only thing you
should do is Deselect the selection by
pressing Ctrl+D before you fill your new
shape. Below is the process I used to
get to the next shape.
Figure 5.41 Selecting of layer

(Agarunov, 2008)
139
Step 17
This is a repetitive technique. You should repeat this process for a while. It's a simple process
of taking the color of a specific shape and using the Pen Tool to make that shape. So, I hope
you made new layers for all your shapes. After about nine shapes the lips look like the image
below.
Figure 5.42 Lips image after ninth layer of shapes

(Agarunov, 2008)
Step 18
After about twenty-five layers in you should start seeing some progression. It has already
twenty-five layers shown below. You can see what the image looks like and compare to yours.
Figure 5.43 Lips layer progression

(Agarunov, 2008)
140
Step 19
OK, after fifty layers you should be done with at least half of
the lips. Keep in mind, I am purposely avoiding the inside of
the mouth and the teeth. You should do the same because
this will be a separate topic coming later. So, don't focus on
the inside of the mouth if your figure in your image's mouth
is open. Just focus on the outside.
Step 20
At the end I had about ninety or more layers on the lips.
Once you have it done, we'll hide our original layers. This
way, all we have is a transparent layer with our lips. Then go
to Image > Apply Image on a new layer.
Now select that new layer and place it over all the lip shapes.
Then go to Filter > Sharpen > Sharpen. This just adds to the
realism and gives it a good effect. The image for my lips is
below. Once you are done with your lips you should compare
it to the original picture and see if you can make small
changes
Some of these changes can be changing the colors

of the shapes. You can do this by selecting the shape Figure 5.43 Organizing layers inside of folders
and pressing Ctrl+U. Then adjust the Hue or (Agarunov, 2008)
Saturation. You can also use Brushes if you need to add gloss to the lips. Remember to be
original and think of nice ways you can make your vexel look interesting and realistic.
141
Step 21
We want our layers to be organized. This is
important throughout the whole project. Go to your
layers and click on the folder button to make a
separate folder just for the lips. Then carry all your
lip shapes into that folder. Name that folder "Lips."
Figure 5.45 Lips image compressed in a folder

Then make one for the "originals" also and (Agarunov, 2008)
one for the "Teeth" we are going to do next. After that, you should have the folder for "Lip’s
on top, the folder for "Teeth" next, and the "originals" on the bottom.
Step 22
Now make a new layer inside our "Teeth" folder,
which should be under the "lips" folder. Then zoom
into our image and start with the vexeling of the
teeth, or whatever is inside the mouth in your image.
The first thing I did here was take a dark color found Figure 5.46 Making of Teeth
inside the mouth and filled that open spot with that color. (Agarunov, 2008)
Then with a new layer I outlined the teeth and filled the outline with a common color found on
the teeth. After that let's start adding detail to the teeth and what's in the mouth.
Step 23
For this part of the vexel I did not use the Pen Tool.
For the lighting on the teeth, take a soft brush and
sample another common color from the teeth of the
posterized image. Then brush the teeth with a small
brush. After all the brushing to the teeth was done I
Figure 5.47 Lighting of Teeth
had about nine layers.
(Agarunov, 2008)
142
Step 24
Ok now since we are done with our "lips" layers

we should now move out to the "eyes" layers.
For the eyes the techniques are slightly
different, but mostly the same as the lips.
So, let’s make a new document since we are

done without lips. If you have a lot of layers on
your lips, then make a new document so
Photoshop doesn't get too slow. Remember to
carry over the folder of the originals into your
Figure 5.48 Lips final product
new document. (Agarunov, 2008)
Make a new folder for our "Eyes," then we make a new layer in that folder and start the process
of the eyes. Start with the bottom and work your way up. So, you should definitely start with
the bags of the eyes. So, pick your eye, take either the right or left, and then zoom in once
again around 700%. Start creating the shapes on the bags of the eyes.
Figure 5.49 Creation of the eyes

(Agarunov, 2008)
143
Step 25
So, six layers in I was done with the
bags. Once you have done that you
should move on to the top of the
eye, which usually has the
eyelashes. So, start on that. In my
case it was all black so it was not
hard to vexel.
Figure 5.51 Eye in 6th layer progression

(Agarunov, 2008)
Step 26
Ok after ten layers I was done with
the top and bottom of the eye. And
now we're ready to get into the
actual eye.

(Agarunov, 2008)
Step 27
Ok now we have to outline the shape of the actual eye. Once we have outlined it, we will make
a new layer and fill it with a light gray color. Once we did that go and start adding some more
shapes from the posterized image, just do the outsides around the pupil after 20 layers of
shapes you should have something like below.

(Agarunov, 2008)
144
Step 28
Make a new layer over the last one you made. Then outline the actual cornea of the
eye and fill it with a dark color. I filled mine with very dark green, but it depending on the color
of the person’s eye. Just fill it with a dark version of that person’s eye color.
Figure 5.54 Outline of actual cornea of the eye
(Agarunov, 2008)
Step 29
Let’s add some detail into the eyes. To start this by making a new layer. Then take the Eye
Dropper Tool and sample colors that are in the posterized image's eye. Then get out a small
soft Brush. Make a new layer and Brush small strokes on this pupil. The colors should be ones
found in the eye.
So, you are pretty much painting the pupil. You want to get it realistic so paint the strokes
exactly over where they actually are on the eye. Then paint the white part where the reflection
comes from. Merge all those "eyes" layers and go to Filter > Sharpen > Sharpen.
Figure 5.55 Applying details into the eyes

(Agarunov, 2008)
145
Step 30
Add some light to the eye because mine is looking a bit dark. So, make a new layer and take
a small soft Brush and set it with the white color. Then brush over the middle of the eye, just
one small dot will lighten up the eye. Then turn its Opacity to around 35%. This gives the eye
a bit of a lighter tone to it.
Figure 5.56 Adding some light into the eyes

(Agarunov, 2008)
Step 31
For the last part we need to add the eyelashes. Make a new layer and go to our Brush palette.
Then set the main Brush to the 1px. Then we set its color to black. After, take out your Pen
Tool and create a line that looks like an eyelash. Then right-click and Stroke Path. Repeat that
until you have created all the eyelashes.
Figure 5.57 Adding eyelashes

(Agarunov, 2008)
146
Step 32
Repeat what you just did with one eye, and do the same for the other eye. Below is the final
result for both eyes.
Figure 5.58 Final result of the eyes

(Agarunov, 2008)
Step 33
So, since we finished another important part of the vexel we should make a new document.
The next section we'll be doing is the skin of the face. Now this is the longest one to do and
there will be a lot of layers needed to make it look realistic.
I had about just four hundred plus layers for the face. So be ready to have a lot of layers.
Zoom in around 300% on the posterized image. Then find yourself a nice spot to start. Your
spot should either be the lightest or darkest part of your face. In my case, I started with the
darkest part, which was the shadow coming from the nose.
Figure 5.59 Start of vexel to skin part

(Agarunov, 2008)
147
Step 34
Now that we have picked our first spot, we need to find that shape and trace it out. For the
face we'll be working with layers slightly differently from how we worked with them on other
parts. We'll be putting each new layer under the one that came before it. Meaning once you
make shape number 1 then shape number 2 will come under it and not over it. This helps you
because you don't have to make extra shapes to fill space and it controls the proper levels.
After making your first shape, fill it with the color from the Posterized image. Then go to its
layer and Command/Ctrl + Click it to make the selection. Then grab your Eye Dropper Tool
and take the next color selection. Make a new layer under the first and trace out its shape.
Then just keep following this pattern.
Figure 5.60 Organizing of stock layers

(Agarunov, 2008)
148
Step 35
Below shows how much I did after twelve layers of work. Look at that and compare it to yours .
Figure 5.60 Adapting of shape color to the skin

(Agarunov, 2008)
Figure 5.61 Skin 12th layer progression

(Agarunov, 2008)
149
Step 36
If by now your skin isn't looking very smooth, you'll want to use something called Transition
layers. Simply put, a transition layer is a layer put in between two shapes, which helps them
to blend better.
Figure 5.62 Transistion layer

(Agarunov, 2008)
Step 37
If you are still having trouble with skin colors you can look at this color pallet full of skin tones.
If you're having trouble finding those tones in your posterized image, then it will help you find
the colors you need.
Figure 5.62 Transistion layer

(Agarunov, 2008) 150
Step 38
OK, so below are progression pics at full-view. Then a couple of zoomed in pics at 300% of
important parts. This way you can analyze the techniques used here.
Figure 5.63 Progression of skin vexel in full zoomed
151
Figure 5.64 Progression of skin vexel in full zoomed
(Agarunov, 2008)
Step 39
OK, now that you have vexeled the face, let’s move on to the hair. Since vexeling is starting
to get a bit boring and repetitive. Now if you have too many layers already in your "face" file,
you'll want to make a new document.
152
Now we don't need the posterized image to do the hair. We only need the "original." After
making a new document, carry over the "original" picture onto that new canvas. Now go get
your Pen Tool and look at the hair.
This technique also applies to male hair as well as a female. Look at your hair and find the
one Light tone. Once you have found it, grab then Eye Dropper Tool and get its color. Now
we'll make a new layer and zoom into the hair at about 300%.
Take out the Pen Tool then start from whichever side you like (top, bottom, right left, just not
in the middle). Try to make hair shapes by tracing that first light tone of the hair. Below is an
example of me tracing a couple of the hair strands. And under that is an example of the light
colors that can be found on the hair.
Figure 5.65 Hair line vexel

(Agarunov, 2008)
Step 40
Once you have outlined all of the light strands, right-click with the Pen Tool, and Fill in your
light color. Then take the Burn Tool and kind of run over the hair strand with a soft Brush set
to MidTones at about 30%.
153
You don't want all your hair to be the
same color. This gives it some
shading and diversity. Below is the
first layer of hair. I put it behind a
dark background. That way you can
see it better.
Figure 5.66 Baseline color of hair

(Agarunov, 2008)
Step 41
The next step is very simple. You do the exact same thing except this time you work on a
different shade. This time you do the midtones (the middle shade of the hair). If you want to
make it detailed, you should use about two or three different medium tones in the hair.
They should all be made on new layers under the lightest shade of the hair. Remember to use
the Burn Tool on them. Also, you can use the Dodge Tool to give them a nicer glow. Below is
the progression of the design so far.
Figure 5.67 Midtone color of hair
(Agarunov, 2008)
154
(Agarunov, 2008)

Step 42 (Agarunov, 2008)
OK, the last part of the hair strands will be the darkest strands of hair. They're usually very
dark brown or black. So, you should have about two, which will reinforce the hair color and
give the hair some depth.

(Agarunov, 2008)
155
Step 43
So, if you like you'll still have some spaces in the hair that are not filled. Let's fix that
by making a new layer under all the hair layers. Then pick a color that you see a lot in your
hair image. I picked a light brownish color. Take your Pen Tool and outline your hair, or just
outline the parts that you can see through. Then fill it with that color. This should fill all the
empty spots behind the hair strands.
Figure 5.71 Hair result with color behind hairlines.

(Agarunov, 2008)
Step 44
Now we'll top the hair off with some shading. Make yourself a new layer over everything. Then
Hide everything except the main hair. So, you should have your background hidden. The only
thing that should be left is a transparent background and the hair.
156
With your new layer selected, go to Image > Apply Image. This should give you all your hair
on a new layer. Now you can use the Burn and Dodge Tool to either shade or lighten up the
hair. Use a soft Brush with a 30% Midtone.
Figure 5.72 Lighten up hair using Burn and dodge tool

(Agarunov, 2008)
Step 45
So that’s it for the hair. You can sharpen the
hair if you like to, and give it a nice look.
Below is what your image should look after
doing the face and the Hair.
Figure 5.73 Final Product for Vexel hair

(Agarunov, 2008)
157
Step 46
Now this is a unique picture that I'm using because it has fur in it. Not everyone’s vexel image
will have fur so I'll give a quick simple rundown on how I made it. It's very simple since you
just did the hair.
It's pretty much the exact same process as vexeling hair, but this time you have to follow the
strands of fur because they bend and curve all around. So, we'll not be making shapes with
the Pen Tool. Instead, we'll be making lines with them. Get a 3px Hard Brush and take the
Pen Tool out.
Trace out a line of Fur. Right-click it and go to Stroke. Also, have Simulate Pressure checked.
Now do this and cover all the fur, as you did with the hair. Below is the illustrations progression.
Figure 5.73 Final Product for Vexel hair

(Agarunov, 2008)
158
Step 47
This is what I have so far for the Face, Hair, and the Fur.
Figure 5.74 Final Product for Face, Hair and Fur.

(Agarunov, 2008)
Step 48
Now I won’t waste your time explaining how to do the arms because it is exactly the same
process as the face. The only thing I'll do is show you my progression with small tips. The
following figures are lifted from Agarunov, E. (2008).
Figure 5.75 Skin vexel layering
159
Figure 5.76 Skin vexel layering
Step 49
So, that is the first hand. Here are pictures of the other one. Remember not to make it look
incredibly detailed, as you can still leave big shapes, like the ones on the elbow of this hand.
The following figures are lifted from Agarunov, E. (2008 ).
Figure 5.77 Adding details to the skin
160
Step 50
Now I want to focus a little bit on the watch and accessories of your vexel (if they have any).
You should still use the Posterized image to do the accessories. So here are some shots of
how I did the watch. Remember you can also use Brushes to enhance the color. I took some
light Brushes and brushed them along parts of the watch to make it look better. The
following figures are lifted from Agarunov, E. (2008 ).
Figure 5.78 Adding details to other accessories of the image
Step 51
Below is what is the finished hands with
accessories. The last thing we have to get to is the
clothing. This figure was lifted from Agarunov, E.
(2008).
Figure 5.79 Finished hands with accessories

Figure 5.79
161
Step 52
OK, so clothing is the last step. There are no secrets with clothing. So do what you've been
doing this whole tutorial. Below are my progression shots.
The following figures are lifted from Agarunov, E. (2008 ).
Figure 5.80 Progressions of vexel in clothing
162
Step 53
Put everything together into one Photoshop document and that's it! Below is the final image.
Figure 5.81 Progressions of vexel in clothing
(Agarunov, 2008)
163
Assessment Task 1-1
Activity I.
Essay.
1. Explain the difference between Vexel and Vector.

2. Why does the Vexel and vector important in art industry?
3. As a beginner, in which skin shading style do you prefer in creating vector art?
Why?
Summary
Vector graphics are sometimes also referred to as "draw graphics," but they mean the
same thing. The technical definition of vector graphics is complicated, but in a nutshell vector
files are a type of graphic that uses mathematical algorithms, allowing the image to be scaled
or modified without loss of image quality or resolution. These images are easy to resize or
rescale and result in a better-quality graphic!
When you create an image in Adobe Illustrator (or in Freehand or CorelDRAW), you
are creating a vector graphic. However, when you create an image in a program like Adobe
Photoshop, you are creating a bitmap graphic, which is not a vectored format. A vector graphic
retains its crispness at any magnification, but a bitmap graphic appears jagged when it's
enlarged.
To put it simply, it's the stylish alternative to other printing techniques. When your
artwork is in a vectored format (either .AI or .EPS), it allows you to increase or decrease the
size of the graphic without compromising the integrity of the original image. What this means
is we'll be able to easily resize your image without it looking distorted and blurry on your
promotional products.
Creating a vector graphic, whether it's through Adobe Illustrator, Freehand, or

CorelDRAW, gives your logo the opportunity to be displayed at its best quality. The end result
164
is a crisp, clear, and readable image no matter what the final output or size! And when your
image looks good, it makes your promotional products look even better (Mertes, 2020).
References
Akhter, A. (2009). Beautiful Examples of Vexel Artworks and Tutorials.

https://www.smashingmagazine.com/2009/07/50-beautiful-examples-of-vexel-artworks-
and-tutorials/#:~:text=Vexel art is a digital,by using multiple layered shapes.
Reyes, C. C. dT. D. (2011). Vexel Art: An Introduction.

https://issuu.com/cecillecarmeladelosreyes/docs/vexelartintroduction
Archer-Thomas, S. (2011). What is Vexel Art? https://design.tutsplus.com/articles/what-is-

vexel-art--vector-4915
Connection, T. P. (n.d.). Raster Images vs. Vector Graphics.

https://www.printcnx.com/resources-and-support/addiational-resources/raster-images-
vs-vector-graphics/
HANNAH, J. (2019). The Color Guide: An Introduction To Color Theory And Color Palettes.
https://careerfoundry.com/en/blog/ui-design/introduction-to-color-theory-and-color-
palettes/
Archer-Thomas, S. (2011). The Art of Skin Shading. https://design.tutsplus.com/articles/the-

art-of-skin-shading--vector-4812
Agarunov, E. (n.d.). Create a Complete Vexel Image Using Photoshop. 2008. Retrieved July
25, 2008, from https://design.tutsplus.com/tutorials/create-a-complete-vexel-image-
using-photoshop--psd-260
Mertes, A. (2020). What is Vector Art? Quality Logo Products.

https://www.qualitylogoproducts.com/promo-university/beginners-guide-to-vector-
art.htm
165
Plant, K. (2020). How to make minimal vector portrait in Adobe Illustrator.
https://creativecloud.adobe.com/cc/en/discover/article/how-to-make-a-minimal-vector-
portrait-in-adobe-illustrator
Not What They Seem: Deceptive Vexel Artworks. (2010).

https://www.google.com/imgres?imgurl=http%3A%2F%2F1.bp.blogspot.com%2F_mz_
edllRzQ4%2FTJnyrDAFpVI%2FAAAAAAAA3Vo%2F-
h9QuAGlp5s%2Fs1600%2Fvexel-animals-
03.jpg&imgrefurl=http%3A%2F%2Fcosasdekiko.blogspot.com%2F2010%2F09%2Fvex
el.html&tbnid=aeDhEJu6hdiXkM&vet=12ahUKEwiYz7Sl3KbsAhUNg5QKHYv1CgwQM
ygAegQIARAW..i&docid=oHtjm8zOKPUm2M&w=500&h=339&itg=1&q=working
animal&hl=en&ved=2ahUKEwiYz7Sl3KbsAhUNg5QKHYv1CgwQMygAegQIARAW
166
Module 6
Introduction to Adobe Illustrator
Introduction
Adobe Illustrator is one of the most popular vector-based applications. This

powerful design tool effectively creates graphics and illustrations for all medias, including
print, web and video. Specially for print purposes, Illustrator is ideal for text editing (i.e.
resume, presentation handouts) and layout design (i.e. posters, stationary, graphs).
Learning Outcomes
1. Describe what Adobe Illustrator is and what it can potentially do for you.
2. Demonstrate drawing and transforming objects.
3. Demonstrate working with shapes and objects.
4. Demonstrate using gradients, pattern fills, and blends, points, and path.
Lesson 1. What is Adobe Illustrator? (Smith, 2020)
According to Smith (2020), Adobe Illustrator is a vector graphics editor and design
program developed and marketed by Adobe Inc. Originally designed for
the Apple Macintosh, development of Adobe Illustrator began in 1985. Along with Creative
Cloud (Adobe's shift to monthly or annual subscription service delivered over the Internet),
Illustrator CC was released. The latest version, Illustrator CC 2020, was released on
October 24, 2019 and is the 24th generation in the product line. Adobe Illustrator was
reviewed as the best vector graphics editing program in 2018 by PC Magazine.
167
A. How Adobe Illustrator is Used? (Smith, 2020)
Smith (2020) stated that Adobe Illustrator is used to create a variety of digital and
printed images, including cartoons, charts, diagrams, graphs, logos, and illustrations.
Illustrator allows a user to import a photograph and use it as a guide to trace an object in the
photograph. This can be used to re-color or create a sketch-like appearance of a photograph.
Illustrator also makes it possible to manipulate text in many ways, making Illustrator a useful
tool for creating postcards, posters, and other visual designs which use text and images
together. Illustrator’s ability to place text around a curve is especially useful for artists creating
logos. Illustrator is also used in designing mock-ups which show what the website will look
like when it’s completed, and creating icons used within apps or websites.
Uses of Adobe Illustrator
1. Logos
Figure 6.1 Logo

(T, 2020)
168
2. Drawing realistic objects
Figure 6.2 Drawing realistic objects

(Smith, 2020)
3. Icons
Figure 6.1 Icons

(Seeley, 2014)
5. Maps
Figure 6.2 Maps

(Milan Stanojevic, 2020)
169
5.Infographics
Figure 6.3 Infographics

(Milan Stanojevic, 2020)
6. Cartoons
Figure 6.4 Cartoons

Vavshko, M. (2015)
170
7. Websites
Figure 6.5 Websites

Lisher, O. (2016)
8. Business Cards and Print Materials.
Figure 6.5 Business Cards and Print Materials

(Business Cards, 2018)
171
RASTER
RASTER VS. VECTOR
Before starting to learn

Adobe Illustrator, it’s
important to know the
main differences
between raster files
(predominantly used in
Photo- shop) and vector
files (predominantly
used in Illustrator).
(Goerz, 2013)
1. THE
INTERFACE: A BRIEF ORIENTATION FOR ADOBE ILLUSTRATOR
(Goerz, 2013)
1. Main Menu: File, Edit, Object, Type, Select, Effect, View, Window, and Help. Navigate the
wealth of options through drop down menus.
2. Tool Menu: The tool menu has various different tools used to select, create, color, erase,
draw, and various other elements.
3. Options Menu: For every tool selected, there are options for the item you will manipulate.
The options for the various tools and changes that can be made are located here.
172
4. Document Window: Opened files.
5. Palettes: Palettes keep information, tools and options visible and at the ready while you are
working on a file. Highly adjustable. They can be docked in the Palette Well, far right. (See
Below)
6. The Extension Toolbar: are essential for editing your work. here are the various types of
windows that can be opened to make your life easier. Things such as various color palettes,
symbols, characters and different options are available to edit work.
7. Layers Tab: The layers are important for keeping a drawing organized. Whenever a new
element is brought into the drawing it will be visible here. Within this menu, items can be
locked, hidden, or deleted to help make the drawing more accessible.
8.Workspace. In the menu bar, click Window > Workspace to see a drop-down menu full of
options for laying out your workspace according your comfort or the nature of the project.
Select a few to see the potential changes. Reset by clicking Window > Workspace >
Essentials. This will take you back to the default setting.
A B
C
D
E
A. Main Manu B. Option Menu C. Tool Menu D. Tool Extension Toolbar E. Layers Tab
Figure 6.6. Adobe Illustrator Interface
(Goerz, 2013)
173
Tool Menu
A A. Selection Tools-These tools are used to select an object. The select

tool will select the entire object while the direct selection will allow
you to manipulate parts of the object.
B
B. Creation Tools- These tools are used to draw, type, or erase an
element on the drawing.
C
C. Transformation Tools-These tools are used to transform or guide
your drawing.
D D. Manipulation Tools- These tools will alter or edit the drawing. Such
as the eye dropper that will select and edit a color chosen and the
E
gradient tool which will then create a color gradient on the drawing.
E. View Tools-To move around or zoom into the drawing you will need
F
to use these tools.
F. Color Bar-The two boxes are the current selected colors. The square
G
box is the fill color while the outline box will be the stroke color.
G. Layer Menu-Here you can adjust whether you are drawing in front,
Figure 6.7. Tool Menu on top, or between another element.
(Goerz, 2013)
2. NEW DOCUMENT, ZOOM TOOL AND HAND TOOL
In Adobe Illustrator, the user can precisely determine the size and the colour format
of a document. It is important to decide on the destination of your design (web, print, etc.)
when you are selecting these options (Goerz, 2013).
To open a new document:
1. Go to File menu (top menu bar)

2. Select New (Quick Key: Ctrl N)
3. Select format of the document (see below)
174
Figure 6.8. Creating New Document
(Goerz, 2013)
Here you have the opportunity to:
1. Name your file (you can also do so later when you save it).
2. Select a New Document Profile - what will this document be used for?
3. Open one or multiple new Artboards at once. (Artboard=printable area of a window)
4. Select the document Size via drop down menu, OR
5. By entering values for Width and Height...
6. Select the Unit of Measure of your choice
7. Add Bleed to your document
8. Set your Colour Mode (RGB for Web, CMYK for Print)
175
9. Setting Raster Effects changes the resolution of Raster images within your
document. (300ppi for print, 72ppi for Web)
Width/Height Measures:
Pixels: Stands for “picture element” - smallest measure of a digital image (Best for Web).
inches, cm, mm: Best settings for Print projects.

Points: A unit of measure in typography. Measures 1/72 of an inch. 72 point type is 1 inch
high. picas: A pica is 12 points.
Bleed:
“Full Bleed” means a document is printed to the very edge of the page with no white border.
Setting bleed on a file allows you an additional margin around your document for colour,
images and design elements to run over. This way, regardless of printing and trimming error,
you can ensure that there is no white space between your design and the edge of the page.
3. LAYERING IN ILLUSTRATOR
Like Photoshop, Illustrator works with layers, however, they behave a bit differently.
The following figures are lifted from Goerz (2013).
Multiple objects (shapes, text, placed images, etc.) can

exist on one layer and are selected and manipulated
using the Se- lection tools (V & A). They are stacked in
the order they were created, within that layer. i.e. The
Figure 6.9 Multiple Object
red square was made first, the blue second, the yellow
third. They are all on one layer.
Figure 6.10 Select Object

176
To change the order of these objects (i.e. to move the red
square forward), select the object. (Note the red square’s
bounding box indicates it is selected).
Now, in your Menu Bar, click Object > Arrange.
This will open a drop-down menu.
Here you can choose to move your

object, either up or down one level, or
move it all the way to the front or all
the way to the back. Note the quick
Figure 6.11 Arrange in Object Menu keys for Arranging objects:
(The quick keys in the image above are for macs. PC listed here:) Bring
to Front: Shift Ctrl ]
Bring Forward (one step): Ctrl] Send

Backward (one step): Ctrl [ Send to
Back: Shift Ctrl [
Use either your cursor or the quick keys to move your

Figure 6.12 Bring Object Forward
selected object Forward (Ctrl ]) one step. It is now on top
of the blue square, but still behind the yellow.
Because Illustrator allows you to individually select objects on

the same layer, it can be easy to create layer so crowded with Figure 6.12 Bring Object Backward
objects that it’s difficult to select them individually. Using different layers can allow you to
keep your objects
organized for yourself and others who may need to access your file.
Open your Layers Palette by going to your Menu Bar and selecting Window > Layers
177
(Quick Key F7)
Create a New Layer, by hitting the New Layer

Button. In the image on the right, you can see that
Layer 2 is selected because it is highlighted in blue
When a layer is highlighted, any new objects you

create will be on this layer.
zNotice how Layer two’s colour is Red and Layer

one is Blue. The teal shape, which you can
see previewed in New Layer

Layer 2 has a red Delete Layer Button
Button
bounding box when Figure 6.13 Creating New Layer
selected.
Layer Locking & Visibility
One of the benefits of working in layers is the

ability to isolate the layer you are working with.
You can do this by locking any other layers.
While locked, you will not be able to select or
move any of the shapes, text or images
contained in that layer.
To Lock a layer, click the space next to the eye Layer Locking
icon. To Unlock, simply click again.
Layer Visibility
If locking alone isn’t enough, you can also make Figure 6.14 Locking and Visibility Layers
layers invisible to better see or focus on specific portions of your document.
Click the eye icon to make a layer invisible. This does not delete or alter the layer’s contents;
it only hides them. To unhide the layer, click again.
178
B. ADOBE ILLUSTRATOR PLUGINS (Staff, 2019)
Adobe Staff (2019) explained Adobe Illustrator is a powerful vector-based program that
lets you create and customize vector-based shapes, text, and artwork. Even though it comes
with many built-in features there are areas where it falls short. It doesn’t necessarily work with
all programs and sometimes lacks the shapes and elements that designers often need.
Plugins and add-ons can help add in the functionalities that may be lacking in illustrator. By
installing these third-party programs, you are able to customize the tool to fit your needs. They
not only provide necessary elements but also enables you to work quickly and improve your
overall workflow. We have gathered a list of incredibly useful plugins to help customize your
illustrator experience. In this article, we will talk about plugins that you can either download or
purchase from the third-party websites.
List of some Adobe Illustrator plugins
1. Astute Graphics Illustrator plugin bundle

2. Fontself: Make fonts in Illustrator
3. Super Magic Eraser
4. QR code generator for Illustrator
5. Cineware for Illustrator
6. Mandala Creator Pro
7. Gold Rush
8. Magic Isometry Light
9. Neon Realistic
10. Hot Door Control
11. Vector Glitch
12. CAD tools 12
13. Magic Exporter
179
Assessment Task 1-1
Activity I
1. Explain what is adobe illustrator?

2. Explain what is Rasterize?
3. Explain the difference between a Layer and a Group?
Summary
Adobe Illustrator CC is popular for its capability to create pixel-perfect designs. It

allows the creation of paths which are automatically aligned to the nearest pixel grid. As a
result, sharp segments and clear lines are produced. Adobe Illustrator CC provides the Snap
to Pixel capability, which enables users to customize the pixel-snapping feature of the
software to align an artwork on exact pixel boundaries. It offers three Snap to Pixel options:
Snap to Pixel while drawing, Snap to Pixel while moving, and Snap to Pixel while scaling.
Hence, as users draw, scale, and move paths and vector shapes, Adobe Illustrator CC
automatically aligns them to the pixel grid.
Furthermore, Adobe Illustrator CC allows users to access more than 90 million images,
graphics, videos, templates, and other creative assets. These design templates and assets
are organized in Adobe Stock, which is a marketplace and a collection of high-quality images,
templates, graphics, 3D images and more. They are built into Adobe Creative Cloud apps,
and they can be downloaded to add up to the built-in templates that are accessible right from
Adobe Illustrator CC. With this wide collection, users will be able to select the right design
templates for their specific projects.
180
Adobe Illustrator CC also provides built in and ready-made presets. With these
presets, graphic designers can start their artwork from blank pages instead of templates. They
can also customize the details of a preset, such as its name, orientation, and number of
artboards. If they want to customize how artboards in a document are laid out, Adobe
Illustrator also enables them to do that.
References
The complete beginners guide to Adobe Illustrator. (2014). Tastytuts.Com.

https://www.pgsd.org/cms/lib07/PA01916597/Centricity/Domain/202/illustrator_for_beginne
rs_tastytuts.pdf
Smith, J. (2020). What is Adobe Illustrator. American Graphics Institute.

https://www.agitraining.com/adobe/illustrator/classes/what-is-adobe-
illustrator#:~:text=Adobe Illustrator is a software,a Windows or MacOS
computer.&text=Illustrator is widely used by,to create high quality artwork..
Lombardi, Jen (2012). “How To Explain Raster vs.Vector To Your Clients”

Link: http://www.youthedesigner.com/2012/08/12/how-to-explain-raster-vs-vector-to-
your- clients/
Snipes, Susan (2011). “Sometimes Smaller is Better: How to Create Smaller PDFs in
Illustrator” Link: http://themetaq.com/articles/how-to-create-smaller-pdfs-in-illustrator
Wood, Brian (2010).“Taking Advantage of Layer Strategies in Adobe Illustrator CS5”

http://www.adobepress.com/articles/article.asp?p=1635822
Illustrator Help/Help and Tutorials
Link: http://helpx.adobe.com/illustrator/topics.html
20 Basic Illustrator Tutorials Every Beginner Should See
181
Link:http://blog.spoongraphics.co.uk/articles/20-basic-illustrator-tutorials-every-beginner-
should-see/
An Exhaustive List of Keyboard Short Cuts for Adobe Illustrator:

Link:http://flytrapinteractive.com/~test/twp/reference/apps/Illustrator_QuickKeys.pdf
Adobe Kuler Colour Picker - this is a great online tool to help you select and explore
colour palettes: Link: https://kuler.adobe.com/
Adobe Illustrator CC Review. (n.d.). https://reviews.financesonline.com/p/adobe-illustrator

cc/#:~:text=Adobe Illustrator CC is a,professional graphic designers and artists.&text=Built
with wide variety of,promotion materials%2C or print media.
Goerz, G. (2013). INTRODUCTION TO ADOBE ILLUSTRATOR. file:///C:/Users/ASUS

FX/Downloads/Intro to Illustrator Handout (3).pdf
Staff, C. B. (2019). 13 best Adobe Illustrator plugins 2020.

https://www.creativebloq.com/illustrator/best-plug-ins-5132695
Seeley, J. (2014). Creating Icons with Illustrator. https://www.lynda.com/Illustrator-

tutorials/Creating-Icons-Illustrator/165442-2.html
Gleeson, J. (2018). Adobe Illustrator tutorial: How to make a vector map in Illustrator.
https://www.digitalartsonline.co.uk/tutorials/adobe-illustrator/design-vector-map/
T, J. (2020). Find Your Perfect Font! How to Find Your Best Font for Writing Online.
https://www.behance.net/gallery/98342743/Find-Your-Perfect-Font-for-Writing-
Online?tracking_source=search_projects_published_date%7Cfree online
Milan Stanojevic. (2020). Best infographic design software for PC.

https://windowsreport.com/infographic-design-software-pc/
Vavshko, M. (2015). Meditating Cow. behance.net/gallery/41111489/Meditating-Cow
182
Lisher, O. (2016). Website https://dribbble.com/makobi/collections/327214-web
BUSINESS CARDS. (2018). https://www.pigiame.co.ke/advertising-marketing-

printing/business-cards-2172198
183
Module 7
Basic Logo Design
Introduction
Your logo says a lot about your brand. If it looks good, it leaves a good impression on
your potential customers. If it looks bad, it could leave a bad impression, even if your products
or services are top-notch.
Test out logo variations and create a one-of-a-kind logo that’s perfect for your
business.
Best of all, you don’t have to have any graphic design experience to create a business
logo you can be proud of – the logo generator makes it easy.
Learning Outcomes
1. Explain what a logo is and how it is used in business.

2. Discuss how logos are designed.
3. Create effective logo through the adobe illustrator by use of tools, and best practices
in the field.
Lesson 1. What is Logo?
According to Luffarelli (2019), Logo design choices might seem inconsequential to some.
But getting the design right is important for a number of reasons. A well-designed logo can
offer substantial benefits to brands. It can help pique the interest of consumers, differentiate
184
brands from competitors, facilitate brand recognition, influence investors’ decisions, and
convey what a brand is all about. A logo is also a ubiquitous communication tool that might
appear on your company’s products, website, annual report, entryway, and even on your
business cards. It is thus a brand element that is frequently seen by stakeholders, particularly
consumers (Luffarelli, 2019).
A. GOLDEN RULES OF LOGO DESIGN (Ooley, 2019)
A logo should clearly represent an organization’s identity.

1. Keep it simple, keep it simple, keep it simple
Figure 6.15 Illustration of Simple logo
2. Logos should be effective at a large and small scale
Figure 6.16 Logo Illustration in Small and Large

Scale
185
A good logo should be effective on
a billboard and a business card
Figure 6.17 Logo Illustration in Billboard and Business Card
3. Logos should be effective in color and black & white
Figure 6.18 Logo Illustration in Black and White
Logos can be; (Luffarelli, 2019)

1. Descriptive
2. Symbolic
1. Descriptive logo
A descriptive logo is a logo that includes textual or visual design elements (or a combination
of the two) that clearly communicate the type of product or service a brand is marketing. For
instance, the logo of Burger King and that of the New York Islanders (a sports franchise) are
descriptive. The former contains the word “burger” and two hamburger buns. The latter
includes an ice hockey stick and a puck. Conversely, the logos of McDonald’s and the
Minnesota Wild (another sports franchise) are nondescriptive. They contain design elements
that are not indicative of the type of product or service these brands are selling. The following
figures are lifted from the work of Luffarelli (2019).
186
The question of whether to use a descriptive logo or a nondescriptive logo often arises during
design meetings. In recent years several brands have modified their logos to make them more
descriptive, while others have made their logos nondescriptive. Dunkin’ removed the word
“donuts” and the coffee cup from its logo, making it nondescriptive. Conversely, Animal Planet
made its logo even more descriptive by adding an elephant to the design. In analysis, we
found that about 60% of companies used a nondescriptive logo, while 40% used a descriptive
logo.
Figure 7.1 Descriptive Logo
2. Symbolic logo
A symbolic logo design uses a symbol
as an abstract representation of a
business. It only contains imagery objects
that express interpretation of what the
organization or company conveys. And
symbolic logo can be captivating, eye-
catching, and it also works well as a stand-
alone logo (just an image without text) or
can be accompanied by your company,
Figure 7.2 Symbolic Logo
organization or product name. The
following figures are lifted from the work of Luffarelli (2019).
187
B. LOGO DESIGN PROCESS (Luffarelli, 2019)
Logo design can be divided into a few simple steps.
• Research and brainstorm
• Think about fonts
• Turn your ideas into forms and identify color
• Finalize design
RESEARCH + BRAINSTORM
• Analyze and define what you are trying to

represent
• Think, write, and sketch
• Develop a list of attributes and characteristics that
best represent your goals
• Every thought and idea is relevant in this stage
Figure 7.3 Making logo from scratch
FONT
• Type the name of your company, product, or organization in several different fonts.
The personality and attitude change with each font.
• Experiment with serif, sans serif, and novelty typefaces. Think of the type as an
image.
• Choose a few directions that seem appropriate, and start combining type with icons
or symbols.
• Try typing in uppercase and lowercase. Capital letters can make a mark look more
serious or formal, while lowercase letters often feel more casual and relaxed.
•
FORMS + COLOR
• Try starting with icons and symbols that are recognizable, but add a personal twist
for your company, logo, or group.
• Combine letterforms with graphic and color elements to create a unique logotype.
188
• There are many viable solutions when designing a logo. Don’t be afraid to try several
different directions.
Figure 7.3 Making logo in different form and color
C. TYPES OF LOGO (Morr, 2019)

According to Morr (2019), Though they’re all a combination of typography and images,
each type of logo gives your brand a different feel. Here are the 7 types of logos you need
to know about:
1. MONOGRAM LOGOS (OR LETTERMARKS)

A letter mark is a typography-based logo that’s comprised of a few letters,
usually a company’s initials. The letter mark is all about simplicity. By utilizing just a
few letters letter mark logos are effective at streamlining any company brand if they
have a long name. The following figures are lifted from the work of Morr (2019).
Figure 7.3 Monogram Logo
189
2. WORDMARKS (OR LOGOTYPES)
Similar to a letter mark, a word mark or logotype is a font-based logo that
focuses on a business’ name alone.
Figure 7.4 Wordmark Logo
3. PICTORIAL MARKS (OR LOGO SYMBOLS)

A pictorial mark (sometimes called brand mark or logo symbol) is an icon—or graphic-
based logo. It’s probably the image that comes to mind when you think “logo”: the
iconic Apple logo, the Twitter bird, the Target bulls’ eye. Each of these companies’
logos is so emblematic, and each brand so established, that the mark alone is instantly
recognizable.
Figure 7.5 Pictorial Logo
190
4. ABSTRACT LOGO MARKS
An abstract mark is a specific type of pictorial logo. Instead of being a
recognizable image—like an apple or a bird—it’s an abstract geometric form that
represents your business.
Figure 7.6 Abstract Logo
5. MASCOTS
Mascot logos are logos that involve an illustrated character. Often colorful,
sometimes cartoonish, and most always fun, the mascot logo is a great way to create
your very own brand spokesperson—er, spokes-character.
Figure 7.7 Mascot Logo
191
6. THE COMBINATION MARK
A combination mark is a logo comprised of a combined word mark or letter
mark and a pictorial mark, abstract mark, or mascot.
Figure 7.8 Combination Mark Logo
7. THE EMBLEM
An emblem logo consists of font inside a symbol or an icon; think badges, seals
and crests. These logos tend to have a traditional appearance about them that can
make a striking impact, thus they are often the go-to choose for many schools,
organizations or government agencies.
Figure 7.9 Emblem Logo
D. GUIDELINES TO CREATE A LOGO (STAFF, 2009)

12 ESSENTIAL RULES TO FOLLOW WHEN DESIGNING A LOGO
1. Preliminary Work Is a Must - Preliminary sketches are an important first step in
designing an effective logo. These can be as simple as paper and pen drawings or
drafts made using a vector program, such as Illustrator.
192
2. Create Balance - Balance is important in logo design because our minds naturally
perceive a balanced design as being pleasing and appealing. Keep your logo balanced
by keeping the “weight” of the graphics, colors, and size equal on each side.
3. Size Matters - When it comes to logo design, size does matter. A logo has to look good
and be legible at all sizes.
4. Clever Use of Color - Color theory is complex, but designers who understand the
basics are able to use color to their advantage.
5. Design Style Should Suit the Company - You can use various design styles when
creating a logo, and to pick the right one, you should have some background
information about the client and the brand.
6. Typography Matters… a Lot! - Choosing the right font type and size is much more
difficult than many beginner designers realize.
7. The Goal IS Recognition - The whole point of creating a logo is to build brand
recognition. So, how do you go about doing this? Well, it varies from case to case, but
the goal with the logo is for the average person to instantly call the brand to mind.
8. Dare to be Different - To stand out from the competition, you must distinguish
yourself as a designer with a distinct style. Rather than copy another design or style,
be innovative and stand out from the crowd.
9. K.I.S.S. (Keep it Simple, Stupid) - The simpler the logo, the more recognizable it will
be.
10. Go Easy on Effects
Adobe Illustrator, Freehand, Photoshop, and other graphic design programs are
extremely powerful tools and have many filters and effects that you can apply to your
logo, but don’t get carried away!
There’s a time and place for these powerful tools, but it is not necessarily to design a
logo. Of course, playing around and seeing whether they enhance a logo is fine, but
just remember that simplicity is key.
11. Develop a Design “Assembly Line” - To produce consistently high-quality logos, you
need to develop your own design process, or “assembly line.” This should include the
following steps:
• Research
193
• Brainstorm and generate ideas
• Preliminary sketches
• Develop vector designs
• Send to client
• Add or remove anything the client wants
• Finalize the design and resubmit to client
11. Use Other Designs for Inspiration Only! - The last rule for designing an effective logo
is quite simple: don’t copy other designers’ work! While there’s nothing wrong with
being inspired by other designers, copying another person’s ideas or work is morally
and legally wrong.
Assessment Task 1-1

Activity I
1.Explain broad the difference between Descriptive logo and Symbolic logo.
2. Research 5 examples in each type of logo.
Activity II.
1.On a short bond paper, create your own logo and explain the meaning of it.
194
Summary
A logo design brief is a document that you will (or should) make when you hire
a graphic designer to create a logo. It’s the starting point of the project and it should provide
the designer with as much relevant information as possible.
In short, what you do is you envision the logo in your mind and then answer a series
of questions about it. In the end, what you get is an instructions manual for the designer in the
project.
You may not know the answers to every single question, but creating a good brief is
also about teamwork. You know about your business and the designer knows about design.
There can be an exchange of ideas between the two in the process of writing the brief and
when you’re both happy with the document, the project can start.
The reason why a creative brief is so important is that it is the foundation of the whole
project. If you don’t start off on the right foot, you’ll come upon some setbacks that would have
been easily preventable. The project takes longer to get done and you end up spending more
than you wanted to (Ooley, 2019).
References
Create stunning logos in seconds. (n.d.). https://hatchful.shopify.com/
Agarunov, E. (n.d.). Create a Complete Vexel Image Using Photoshop. 2008. Retrieved July
25, 2008, from https://design.tutsplus.com/tutorials/create-a-complete-vexel-image-using-
photoshop--psd-260
Jonathan Luffarelli, M. M. and A. M. (2019). A Study of 597 Logos Shows Which Kind Is Most
Effective. https://hbr.org/2019/09/a-study-of-597-logos-shows-which-kind-is-most-effective
195
Symbolic Logo and Iconic Logo. (n.d.). https://sothink.com/product/logo-design-
software/term-symbolic-logo.htm#:~:text=Explain Symbolic Logo, the organization or
company conveys.
STAFF, W. (2009). 12 ESSENTIAL RULES TO FOLLOW WHEN DESIGNING A LOGO.

https://www.webdesignerdepot.com/2009/06/12-essential-rules-to-follow-when-designing-a-
logo/#:~:text=A logo has to look, as TV and the Web.
Morr, K. (2019). The 7 types of logos (and how to use them).

https://99designs.com/blog/tips/types-of-logos/
- END OF MODULE FOR MIDTERM PERIOD –

SUBMISSION OF ASSESSMENT TASKS AND EXAMINATION FOR MIDTERM WILL BE
ANNOUCED VIA iLearnU LMS or GC.
MAKE SURE TO CHECK THE DATES AND DO NOT FORGET TO TAKE IT AS SCHEDULED
196

Graphics Design and Basic Animation: Ann Patricia H. Almanzor

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Graphics Design and Basic Animation: Ann Patricia H. Almanzor

Uploaded by

Copyright:

Available Formats

Graphics Design and Basic Animation

Ann Patricia H. Almanzor

Module 5. Vexel Art

Module 6. Introduction to Adobe Illustrator

Module 7. Basic Logo Design

Lesson 1. What is Vexel Art?

According to Akhter (2009) Vexel Art, for layperson; is a type of artwork

Software Used Quality of the Artwork

Vectors Adobe Illustrator, Vector Artworks done in

Vexels Adobe Photoshop, Vexel artworks are what

Figure 5.1. Vector art

B. Perhaps a better would be “vector-based art”, meaning art created in a vector-based

Better resolution, however, comes at a price. Just as raster files are

Figure 5.4. Raster graphics

C. Color Palette (Hannah, 2019)

According to Hannah (2019), A color palette is a combination of colors used by UI

Figure 5.5. RGB Color Palette (Hannah, 2019)

What are the different types of color palettes?

Figure 5.7. Analogous Palette (Hannah, 2019)

Figure 5.8. Complementary Palette (Hannah, 2019)

Figure 5.9. Split-Complementary Palette (Hannah, 2019)

Figure 5.10. Split-Complementary Palette (Hannah, 2019)

How to choose a color palette

Research your audience

Consider color psychology

Don’t skimp on contrast

Some common UI design color conventions include (Hannah, 2019):

 Using a dark color for text to ensure legibility

The best tools for choosing a color palette

D. The Art of Skin Shading (Archer-Thomas, 2011)

Skin Shading Style

Figure 5.11. Gradient Meshing

*Feathering and blurring are raster based effects. In

 Gradients (Archer-Thomas, 2011)

Figure 5.13. Gradients

Figure 5.14. Alpha Masking

 Posterizing (Archer-Thomas, 2011)

Figure 5.15. Posterizing

 Lines (Archer-Thomas, 2011)

Figure 5.17. Lines

Using low opacity shapes to give subtle

Figure 5.18. Lines and Opacities

 The Skin is the Canvas (Archer-

Figure 5.18. The Skin in the Canvas

Figure 5.19 Swatch Palette shows for the Skintones Palette

Figure 5.20 Variety of Blending Modes and Opacities

Figure 5.21 Blending rosy color for cheeks

Figure 5.22 Use of transparent gradients for smoother layer.

Lastly, take your time. Rushed and sloppy skin

Create a Complete Vexel Image Using Photoshop. (Agarunov, 2008)

Final Image Preview

Pen Tool Tutorial

Figure 5.24 Setting of Pen tool on starting a vexel image in Photoshop

Figure 5.25 Tracing around shapes without rounded sides

Now take these two simple steps

Figure 5.27 Connect the starting point by clicking on the box

Figure 5.28 Filling colors to traced path.

Figure 5.29 Tracing U-turn shape

We have now learned the first way of

Figure 5.30 Anchor Point

Figure 5.31 Adding Anchor Point

Figure 5.32 Moving of Anchor Point