The Professional Photoshop Book - Volume 7 2015

Digital painting

118 The Professional Photoshop Book

4. COMBINE DIGITAL PAINTING
   WITH VECTORS
   LadisL as ChaC hignot (WWW.BEHANCE.NET/LADISLAS) breaks down one of
   his standout designs to taLk us through his method step by step

adrián g arC ía, aka o wi s ixseven

(WWW.SIXSEVEN.ES), expLains how

he buiL ds his web and ui designs,

proving that veCtors are not just

for iLLustration work

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

CR EATE 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.”

5. 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:to strike a balance between the visuals and text, without Some pages in your design will have

breaking the continuity that you have already established. “w hen you generate the pages with more text, also design a

number of vector UI elements to contain the paragraphs. To each of these [elements], i add a style that balances between

colour and thickness, and iThis is important to maintain a homogeneous structure.” will re-use these in other screens.

Consnavigable, which is important to keep in mind when ider navigation: A website interface needs to be

designing the different elements of your layout. “I often combine colours in user interface elements, as this can

greatly help identify the user’s navigation. Using a simple rhombus, this screen is where the user can navigate

around the interactive map. All these elements and forms were created in photoshop, and the icons are created

within Illustrator.”

Basic shape tools: “usually, to create an entire ui or

website, photoshop (squares, circles, triangles) and will modify i work with basic geometric shapes in

them according to my idea. wcomplex shapes, the pen tool also helps to draw such hen it comes to more

lines, but [at this point] iand [design] the iconography of the site and combine it usually come into illustrator

with p hotoshop elements. each other perfectly.” these two tools complement

Keep it clean: It is easy to overpower designs with too

many vector elements, but this can make it harder to get around a website. “It is also important to design a clean

interface without distractions. mso I use spot colour combined with fine lines [to achieve y style is usually minimal,

this]. in this screenshot, you can see the silhouette of the user, created with a simple layout in photoshop.”

6. DESIGN A WEBSITE
   WITH VECTOR ELEMENTS

© Ladislas Chachignot 2015

© Owi Sixseven

© m ichael william Lester

116-123 Vector Tips Feature.indd 118 06/10/2015 15:34