Papercut Aesthetics With Vectors _ Computer Arts _ Creative Bloq

8/11/2019 Papercut Aesthetics With Vectors _ Computer Arts _ Creative Bloq

1/11

>Be the first to comment (http://www.creativebloq.com/papercut-aesthetics-vectors-9114318#comments-list)

Sep 7, 2011 00:00 am

Tweet

0 8

SukaSuka

33

COMPUTER ARTS HOW TO

Steven Bonner shows you how to digitally replicate a 3D

Sponsored byIntel HP

Share

ercut aesthetics with vectors | Computer Arts | Creative Bloq http://www.creativebloq.com/papercut-aesthetics-vectors-9114318

11 9/7/2014 11:05 PM


2/11

papercut style

Ive always been drawn towards craft-led techniques, and like to find

ways to recreate them in a digital environment. I often add some

traditional airbrushing into my shading work with Photoshop and a

Wacom tablet, for instance.

I was recently asked to produce my own take on Diesels Only The

Brave Eau de Toilette bottle (http://www.diesel.com/fragrances/only-

the-brave), and decided to emulate a papercut aesthetic to create a fluid

and abstract design that would be distinctive and have a sense of depth.

Using a juice bottle as a subject, Ill show you how to digitally produce a

papercut look and integrate it with the style of type that you might find

on advertising posters or print adverts, for example.

01Start by sketching a few rough layouts with a pencil. Pay close

attention to how the layers interact, as this is where youll build up the

shape of the object youre illustrating. Even if you think youve hit on

the perfect image early in the process, keep sketching as you might find

that new ideas come to you as you go.

SoftwareIllustrator and Photoshop CS3 or later

Time needed3-4 hours

Skills

-Understand how to layer an image

-Use basic layer effects

-Increase relevance with colour

We use cookies on this website. By using this site, you agree that we may store and

access cookies on your device. Find out more and set your preferences here

(http://www.futureplc.com/cookies-policy/ )

x


11 9/7/2014 11:05 PM


3/11

02When youre happy with your design, open Illustrator and create a

new document. Select the Pen tool (P) and begin drawing one side of

your bottle image.

03Once complete, copy the shape (Ctrl/Cmd+C) and paste it in front

(Ctrl/Cmd+F). Next, select the Reflect tool (O), hold down Shift to

constrain the proportions and flip the shape horizontally. This will give

you the other side of your bottle. Position it an appropriate distance

away from the original, experimenting until youre happy with the

width of the silhouette.




x


11 9/7/2014 11:05 PM


4/11

04Using the Pen tool again, extend the lines off the page and connect

them to form two solid shapes. Take care to keep the lines smooth, and

allow space for your headline elements.

05Continue drawing more shapes in the same way, following the layer

interaction sketch that you developed in Step 1.




x


11 9/7/2014 11:05 PM


5/11

06Once youve drawn a few layers, it might be easier to block-colour

them to give a better idea of how they work together. Again, make sure

each element is joined as a solid shape to frame the page this will

make the elements easier to reposition when transferring the layers to

Photoshop later. Use shades of grey for now because well add colour

later.

07A great tip when creating your lines is to use the Simplify option to

make sure they keep a smoothness to them, and have nice, natural

curves especially if youre drawing with a graphics tablet. To do this,

select your lines and go to Object>Path>Simplify. In the dialog box you

can set the levels to your own preference to achieve the look you prefer.




x


11 9/7/2014 11:05 PM


6/11

08Continue building up your layers, taking care to achieve a sense of

randomness in the overall image. Although you want to show a definite

shape, you dont want it to look unnatural. Using the Direct Selection

tool (A), adjust individual points to create differences in adjacent layers.

To help add more depth later when we add shadows in Photoshop, try

copying a layer behind itself and making very small changes to points.

09Once youve blocked in the main silhouette, zoom in and create a

series of waves inside the bottle, in the semi-circular style shown here.

This will make it appear as though liquid is sloshing around inside the

bottle.

Your email address

Enter the competition

* You agree to be contacted by Future and our trusted third parties.

Competition open to UK residents only.

*

And get the hottest pre-launch news and

rumours, into your inbox, every week

Promo Ts & Cs (//www.techradar.com/iphone6/signup)




x


11 9/7/2014 11:05 PM


7/11

10When youre happy with the main composition, begin adding in your

colours. I often use Adobes Kuler engine to help me choose a colour

palette it enables you to try out a variety of schemes in minutes, based

on keywords that you input. As this image is for a fictitious fruit juice

brand, Ive chosen colours that suggest different flavoured juices. This

keeps the image brand-led, rather than focusing on an individual

product or flavour.

11Next, draw your title. It doesnt have to be very complicated as the

image itself is quite full-on and you dont want the typography to

become lost, but its a headline so it needs to stand out. To frame the

type, Ive added a curved banner behind it (Effect>Warp>Arch, with

Bend set to 15%), and drawn curved lines top and bottom to illustrate

the liquid pouring into the banner and dripping from underneath into

the bottle. This helps link both elements more effectively than if the

type had been placed with no environmental link, and results in the

overall piece feeling more connected.We use cookies on this website. By using this site, you agree that we may store andaccess cookies on your device. Find out more and set your preferences here


x


11 9/7/2014 11:05 PM


8/11

12With the base image now drawn in Illustrator, its time to add the

finishing touches in Photoshop. Of course, the same aesthetic could be

achieved with Illustrators Effects menu, but I prefer the quicker

rendering and control in Photoshop. Copy and paste each layer into

Photoshop in a new document.

13Select a layer and then double-click the Layer Style icon in the

Layers palette. Check the Drop Shadow box and set it to Multiply,

reducing the Opacity to around 35-40%. Play around here with the

various settings to get a look that suits you best. Now check the Satin

box and set it to Multiply, reducing the Opacity to around 12% this

will give the look of a slightly raised piece of paper or board. Go to

Layer>Layer Style>Copy Layer Style, select all the layers except the logo

and go to Layer>Layer Style>Paste Layer Style. This will apply the same




x


11 9/7/2014 11:05 PM


9/11

style to all the other layers. You might find you need to go into some

layers individually to fine-tune them.

14To give the headline a little bit more interest, create a layer maskand paint out some areas of the layers above. This will help it integrate

with the design more effectively. Youll find you have more precision if

you first create a mask then click on the layer you want to paint out and

select it with the Magic Wand tool (W) before returning to the mask and

painting the area with a soft brush (B).

15Lastly, add a little texture to the piece by creating a new layer andfilling it with white, then setting it to Multiply. From there, add some

noise (Filter>Noise>Add Noise) to give the overall image a slightly

mottled grain texture, reminiscent of mounting board. And thats it:




x


11 9/7/2014 11:05 PM


10/11

or log in with your Creative Bloq account

youre done.

Steven Bonner

Stirling-based Steven is a multi-disciplined designer

and illustrator, working for clients such as Harper

Collins, Cadbury and Diesel. A love of type is a

recurring feature of his work.

www.stevenbonner.com (http://www.stevenbonner.com)

Tags: Computer Arts (/tag/computer-arts), Illustrator (/tag/illustrator),

Photoshop (/tag/photoshop), Tutorial (/tag/tutorial), How to (/tag/how-to)

0 COMMENTS

Log in to Creative Bloq with your preferred social network to comment

Forgotten your username or password? (/user/password)

Don't have an account?Join now. It's completely free and takes seconds Join (/user/register)




x


f 11 9/7/2014 11:05 PM


11/11

-

Top Creative Bloq is part of Future plc, an international media group and leading digital publisher. We produce content across five core areas:

TechRadar (http://www.tec

T3 (http://www.t3.com/)

Mac|Life (http://www.maclif

Gizmodo UK (http://www.gi

More... (http://www.futurepl

Technology

CVG (http://www.computer

PC Gamer (http://www.pcg

GamesRadar (http://www.g

Total Film (http://www.totalfi


Entertainment

MusicRadar (http://www.m

Guitarist (http://www.music

FutureMusic (http://www.m

Rhythm (http://www.musicr


Music

Digital Camera World (http:

Mollie Makes (http://www.m

Photography Week (http://

The Simple Things (http://


Creative

BikeRadar (http://www.bike

Cyclingnews (http://www.c

Football Week (http://www.t

TriRadar (http://www.trirad


Sport & Auto

About Future (http://www.futureplc.com/about/) Jobs (http://www.yourfuturejob.com/) PR (http://www.futureplc.com/news/)

Advertising (http://www.futureplc.com/what-we-do/advertising-solutions/) Digital Future (http://advertising.digitalfuture.com/)

Privacy Policy (http://www.futureplc.com/privacy-policy/) Cookies Policy (http://www.futureplc.com/cookies-policy/)

Terms & Conditions (http://www.futureplc.com/terms-and-conditions/) Subscriptions (http://www.myfavouritemagazines.co.uk/)

Investor Relations (http://www.futureplc.com/investors/) Contact Future (http://www.futureplc.com/contact/)

Future Publishing Limited, Quay House, The Ambury, Bath BA1 1UA. All rights reserved. England and Wales company registration number 2008885.



(http://www futureplc com/cookies-policy/ )

x


Papercut Aesthetics With Vectors _ Computer Arts _ Creative Bloq

Documents

Transcript of Papercut Aesthetics With Vectors _ Computer Arts _ Creative Bloq