- BUILD VECTOR ILLUSTRATIONS FROM PHOTOS
10. ADD TEXTURES
IN PHOTOSHOP
08. MAKE AND USE
BESPOKE TEXTURES
Vector designs don’t always have to start from
scratch. By using photography, you have a guide to
work from to build up vector elements for an
effective illustration. This is a method that Alejandro
Garcia of CranioDsgn (www.craniodsgn.es) often
employs: “My artwork is always created from
high-resolution images to achieve a greater level of
detail in the final artwork. They can be personal
photographs, from photographers or supplied by
customers. I also work on my illustrations from
collages or compositions prepared by myself and
used as the basis for my work.”
Once the source material is in place, it is time to
start the process of building a vector design using the
guide created. While Garcia switches between
Illustrator and Photoshop to create his design, the
same method can be applied in Photoshop solely,
using the Pen tool to painstakingly trace over all of
the elements of the source photograph: “Usually I
only use the Pen tool. I know that this may seem
laborious work, but it allows me control over the
entire process of creating the artwork.” This takes a
good knowledge of the Pen tool and how to use it
accurately to be able to build up the small areas of
detail. When this is done purely in Photoshop, it is
often referred to as a vexel – combining vector tools
and pixel elements.One of the joys of using Photoshop over Illustrator is
the program’s ability to add textures to vectors to break
the clean lines and give them a bit of depth and feeling.
Freelance designer and illustrator Michael Lester says
that this is one of his favourite processes: “Before you
open up Photoshop, you have to go through a process
of choosing your textures. There are a lot of
downloadable texture libraries (free and paid) out there,
but they will never beat your own custom textures.
Take a look around your room and you’ll find
endless possibilities. In the past I’ve scanned notebook
covers, wallets, sandpaper and even a basketball.
Make a single PSD file with all the textures to choose
from and start dropping them over your Vector Smart
Objects, playing with the blending modes. Before you
know it you’ll have your own extensive custom texture
library, full of new (and possibly slightly strange) ways
to give your vectors some highly unique character.”We’ve already looked at using Photoshop to create and
apply textures to your vector artwork to make it pop,
but there are more ways of creating textures than
using photos. Vector illustrator and graphic designer
Alejandro Garcia uses bespoke noise textures and
layer blending modes: “I create textures by
desaturating an image and forcing the levels of black
and white to break the image. After removing the
white areas with a Selection tool, such as the Magic
Wand, [I create] a personal noise texture. Photoshop’s
Linear Burn blending mode helps me to integrate
textures that have previously generated [into my
illustrations]. I also use layer effects, such as Color
Overlay, applying it to one of the textures I’m using, and
the Drop Shadow effect in a very subtle way, with a
percentage of Noise between 20% and 34%. Finally, I
use Curves/Levels adjustment layers to control the
shades and intensities of colour.”Once the vector design has been built up, Garcia
finishes the look of the illustration using Photoshop
textures: “When I’ve finished ‘vectorising’ the
illustration, I apply a texture that I have generated
previously in Photoshop in order to give the vector
illustration a warmer aspect, because without this
texture [the whole illustration] may seem colder.”- CREATE A VECTORBASED UI
WEBSITE AND USER INTERFACES OFTEN USES VECTOR ELEMENTS
FOR NAVIGATION AND LAYOUT, AS ADRIÁN GARCÍA EXPLAINS
Menu bar:consists of several UI“The main menu
elementsfocusedonusernavigation, always shown in
an easy and accessible way”Mobile design:“In the
mobile [version of the]design,Ialsoused
geometric shapes withintheusernavigation,
Photoshop shapes:basic elements shown here“All the modifying them for useon a touch device”
have been created usingthe basic geometric shapes
built into Photoshop”Central focus:“In the central
area,isthemainviewingexperience. This was created
through the animation ofvector elements, created
with the Pen tool”© CranioDsgn. All rights reserved
© Adrián García
© CranioDsgn. All rights reserved© Michael William Lester