Papercut Aesthetics With Vectors - Computer Arts - Creative Bloq

>Be the first to comment (http://www.creativebloq.
com/papercut-aesthetics-vectors-
9114318#comments-list)
Sep 7, 2011 00:00 am
Tweet
0

8
Suka Suka

33

COMPUTER ARTS HOW TO
Steven Bonner shows you how to digitally replicate a 3D
Sponsored by
Intel HP
Share
Papercut aesthetics with vectors | Computer Arts | Creative Bloq http://www.creativebloq.com/papercut-aesthetics-vectors-9114318
1 of 11 9/7/2014 11:05 PM
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.
01 Start 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.
Software Illustrator and Photoshop CS3 or later
Time needed 3-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
2 of 11 9/7/2014 11:05 PM
02 When 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.
03 Once 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
3 of 11 9/7/2014 11:05 PM
04 Using 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.
05 Continue drawing more shapes in the same way, following the layer
interaction sketch that you developed in Step 1.
x
4 of 11 9/7/2014 11:05 PM
06 Once 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.
07 A 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
5 of 11 9/7/2014 11:05 PM
08 Continue 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.
09 Once 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
6 of 11 9/7/2014 11:05 PM
10 When 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.
11 Next, 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.
x
7 of 11 9/7/2014 11:05 PM
12 With 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.
13 Select 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
8 of 11 9/7/2014 11:05 PM
style to all the other layers. You might find you need to go into some
layers individually to fine-tune them.
14 To give the headline a little bit more interest, create a layer mask
and 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).
15 Lastly, add a little texture to the piece by creating a new layer and
filling 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
9 of 11 9/7/2014 11:05 PM
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
10 of 11 9/7/2014 11:05 PM
Advertising (/Advertising) About Us (/About-us) Contact (/Contact)
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.techradar.com/
T3 (http://www.t3.com/)
Mac|Life (http://www.maclife.com/
Gizmodo UK (http://www.gizmodo.co.uk/
More... (http://www.futureplc.com/what-we-do/portf
Technology
CVG (http://www.computerandvideogames.com/
PC Gamer (http://www.pcgamer.com/
GamesRadar (http://www.gamesradar.com/
Total Film (http://www.totalfilm.com/
Entertainment
MusicRadar (http://www.musicradar.com/
Guitarist (http://www.musicradar.com/guitarist
FutureMusic (http://www.musicradar.com/futuremus
Rhythm (http://www.musicradar.com/rhythm
Music
Digital Camera World (http://www.digitalcamerawor
Mollie Makes (http://www.molliemakes.com/
Photography Week (http://photographyweek.digital
The Simple Things (http://www.thesimplethings.com
Creative
BikeRadar (http://www.bikeradar.com/
Cyclingnews (http://www.cyclingnews.com/
Football Week (http://www.thefootballweek.net/
TriRadar (http://www.triradar.com/
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.
x
11 of 11 9/7/2014 11:05 PM

Papercut Aesthetics With Vectors - Computer Arts - Creative Bloq

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Papercut Aesthetics With Vectors - Computer Arts - Creative Bloq

Diunggah oleh

Hak Cipta:

Format Tersedia

>Be the first to comment (http://www.creativebloq.

Anda mungkin juga menyukai