TECHNIQUES 20 EXPERT TIPS FOR VECTORS
- COMBINE DIGITAL PAINTING
WITH VECTORS
,!$)3,!3ď#(!#()'./4ď˴777"%(!.#%.%4,!$)3,!3˵ "2%!+3 $/7. /.% /&
()3ď34!.$/54ď$%3)'.3ď4/ď4!,+ď53ď4(2/5'( ()3 -%4(/$ 34%0 "9 34%0
!$2)ũ. '!2#ų! !+! /7) 3)83%6%.
˴WWW.SIXSEVEN.ES˵ %80,!).3 (/7
(% "5),$3 ()3 7%" !.$ 5) $%3)'.3
02/6).' 4(!4 6%#4/23 !2% ./4 *534
&/2 ),,5342!4)/. 7/2+01
DESIGN THE VECTOR ELEMENTS
“I create my design in Illustrator, as it’s easier
for me to build complex geometric shapes. I use rotation
or symmetry to create my design and keep the layers
simple. As many shapes are grouped in a few layers, it’s
[easier] to manage and import in Photoshop.”02
PHOTOSHOP TEXTURE EFFECT
“I isolate my vector shape and paste it into a
new file. I use Image>Mode>Grayscale and add
contrast, then Image>Mode>Bitmap (300 Pixels/Inch,
Method: Halftone Screen). On the next screen, I use
Frequency: 15-30, Angle: 45° and Shape: Round. I
paste my halftone on my colour design and play with
layer blending modes, like Multiply.”03
CREATE A TEXTURED BACKGROUND
“Here, I’m adding textures comprised of
photos and also adding some light effects to the eyes
of the bat using soft brushes, with the layer blending
mode set to Lighten. My goal is to [contrast] the
clean aspect of the Illustrator shapes, with some
textures and brushstrokes using Photoshop.”- WORK BETWEEN ILLUSTRATOR
AND PHOTOSHOP
If you have Creative Cloud, then you have access to
both Illustrator and Photoshop. In the latest
versions, the two programs work together
seamlessly and they have also closed the learning
gap, by ensuring that if you know one program, you
can pick up the other due to similar interfaces and
tools. We recommend that if you’re unsure with
Illustrator, you spend some time getting to know it,
as it can be used to enhance your Photoshop work.
“Photoshop is the perfect companion to Illustrator,”
says freelance designer and illustrator Michael
Lester (www.michaelwilliamlester.com). “From a
technical point of view, it allows you to get your
illustrations print and web ready, while from an
artistic point of view it gives you the ability to explore
hand-finished touches while retaining the edibility of
your vectors. Vector Smart Objects in Photoshop are
integral to my workflow allowing me to edit my
individual vectors in Illustrator while preserving the
composition in Photoshop.”Think about structure:TOSTRIKEABALANCEBETWEENTHEVISUALSANDTEXT WITHOUTSomepagesinyourdesignwillhave
BREAKING THE CONTINUITY THAT YOU HAVE ALREADY ESTABLISHED7HENYOUGENERATETHEPAGESWITHMORETEXT ALSODESIGNA
NUMBEROFVECTOR5)ELEMENTSTOCONTAINTHEPARAGRAPHS4OEACHOFTHESE;ELEMENTS= )ADDASTYLETHATBALANCESBETWEEN
COLOURANDTHICKNESS AND)WILLRE
USETHESEINOTHERSCREENS4HIS IS IMPORTANT TO MAINTAIN A HOMOGENEOUS STRUCTUREConsider navigation:NAVIGABLE WHICH IS IMPORTANT TO KEEP IN MIND WHENA website interface needs to be
DESIGNING THE DIFFERENT ELEMENTS OF YOUR LAYOUT ) OFTENCOMBINECOLOURSINUSERINTERFACEELEMENTS ASTHISCAN
GREATLYHELPIDENTIFYTHEUSER
SNAVIGATION5SINGASIMPLERHOMBUS THIS SCREEN IS WHERE THE USER CAN NAVIGATE
AROUND THE INTERACTIVE MAP !LL THESE ELEMENTS AND FORMSWERECREATEDIN0HOTOSHOP ANDTHEICONSARECREATED
WITHIN )LLUSTRATORBasic shape tools:5SUALLY TOCREATEANENTIRE5)OR
WEBSITE )WORKWITHBASICGEOMETRICSHAPESIN0HOTOSHOP SQUARES CIRCLES TRIANGLES AND WILL MODIFY
THEMACCORDINGTOMYIDEA7HENITCOMESTOMORECOMPLEXSHAPES THE0ENTOOLALSOHELPSTODRAWSUCH
LINES BUT ;AT THIS POINT= ) USUALLY COME INTO )LLUSTRATORand [design] the iconography of the site and combine it
WITH0HOTOSHOPELEMENTS4HESETWOTOOLSCOMPLEMENTEACH OTHER PERFECTLYKeepitclean:It is easy to overpower designs with too
MANYVECTORELEMENTS BUTTHISCANMAKEITHARDERTOGETAROUNDAWEBSITE)TISALSOIMPORTANTTODESIGNACLEAN
INTERFACE WITHOUT DISTRACTIONS -Y STYLE IS USUALLY MINIMAL so I use spot colour combined with fine lines [to achieve
THIS=)NTHISSCREENSHOT YOUCANSEETHESILHOUETTEOFTHEUSER CREATEDWITHASIMPLELAYOUTIN0HOTOSHOP- DESIGN A WEBSITE
WITH VECTOR ELEMENTS
© Ladislas Chachignot 2015© Owi Sixsevenqď-ICHAELď7ILLIAMď,ESTER