Академический Документы
Профессиональный Документы
Культура Документы
A P R 2 6 2 0 1 40 6 C O M M E N T S
B TY Y L E R D E N I S
Tutorial Resources
Paper Texture by Zen Textures
Grunge Texture by Zen Textures
So first, take a piece of regular 8.5” x 11” paper and cut it into strips using scissors or a box cutter.
converted by Web2PDFConvert.com
Start folding the strips to the letters that we want. I’m folding all the letters at roughly 90o angles except for the letter
"N" (which we need the angle on).
Now we can see exactly how the folds will look for the letters we’re using.
Write out "DESIGN" and a smaller "INSTRUCT" below it using the Horizontal Type Tool (T), something like I have done
below. I’m using Futura Bold for my font because it has a retro look to it. If you don’t have Futura, try using any wide,
bold font that gives us room to work with.
We’re going to use this as our type’s base for sizing and width guides while making our folds.
The letters and their corresponding hexadecimal color values are as follows:
D: #00AEB7 (blue)
E: #FF9900 (orange)
S: #BA0000 (red)
I: #01AD4E (green)
G: #FEDE58 (light yellow)
N: #FF99AB (pink)
Also, we’re going to change the "INSTRUCT" text to a brown color (#3B2601).
converted by Web2PDFConvert.com
Step 4: Guiding the "D"
Lets start off by working on the "D". Let’s make a new Photoshop group (Layer > New > Group). We’ll name this
group, "D".
Next, create a new layer (Ctrl/Cmd + Shift + N) within the "D" group.
We’re going to lay out some Photoshop guides to help us with the shaping our "D" letter. We want a guide on the top,
bottom, left-right and the inside-left side of the "D".
While holding down Shift to make a perfect square, click and drag a square selection starting from the top left of the
"D" towards the inside guide.
Create a new layer (Ctrl/Cmd + Shift + N) and fill it (Edit > Fill) with black (#000000) so that we can easily see it (the
color doesn’t matter because this square is just for helping us shape our text).
This will be our template to make sure everything is the same size. We’ll be moving this square template throughout
the creation process with the Move Tool (V).
converted by Web2PDFConvert.com
Step 6: Adding more guides to the "D"
Now that we have the template, we can drag down a guide so that it’s on the bottom of the box we just made.
Click and drag the box down to the bottom guide and place a guide on the top of the box.
Also, using the Move Tool (V), move the box to the right and put a guide on the left side of that box. What we’re making
with the guides is a hole in the middle, while making sure all the lines are the same width.
Before we subtract the middle part, we want to right-click on the "DESIGN" text and choose Layer > Rasterize > Type.
This will make it so we can delete areas from the original text—we can’t do this if it’s still a text layer.
Create a selection using the inner guides, click on the "D" layer in the Layers Panel, and then press the Delete key to
remove the area beneath the selection.
We can also completely delete the "D" from the original base text layer because we don’t need it anymore.
Now you should have a box with a white hole in the middle.
Using the Polygonal Lasso Tool (L), click on the intersection of the top and inner right guide. Then click on the
intersection of the inner top and outer right guide. Finally, close the path by the clicking around so you get that top right
corner selected and then hit Delete to take away the section under our selection.
converted by Web2PDFConvert.com
Now we’re going to do the same thing with the bottom right corner.
Using the Rectangular Marquee Tool (M), make a square within the top two guides and out past the left side of the "D".
Fill the selection (Edit > Fill) with the blue color (#00AEB7).
converted by Web2PDFConvert.com
Move the marquee selection down to the bottom two guides and fill that area with the blue color (#00AEB7) as well.
Now we’re going to use the square template that we created for the "D" to make sure our letter has a consistent width.
Since we created the guides for the "D", we notice already that the top and bottom arms of the "E" aren’t quite tall
enough. We can also assume that the middle part of it also has the same problem. We should fix those issues.
Bring in our square template and put it in the center of the middle arm. Put a guide on the top and bottom of the
template.
Also make guides on the left and right sides of the "E", as well as where the middle arm ends.
converted by Web2PDFConvert.com
the arms are the same as the stem of the "E".
We’re also going to make the middle stem extend out the same way we did in Step 9.
We’re going to base off the letter "S" with our existing letter "E". First, select the area from the top guide to the edge of
the left side of the "S" to the very bottom guide, at the right edge of the "S", and then fill it with the red color (#BA0000).
We want all the letters to be the same height so that’s why we’re cutting off the top and bottom edges of the "S".
converted by Web2PDFConvert.com
Step 14: Roughing out the "S"
Using the Rectangular Marquee Tool (M), select the two areas between the guides that goes in between the arms of
the "E", and then press the Delete key to remove the area beneath your selection. This should give us three horizontal
bars with the same width as the "E".
Now using the Rectangular Marquee Tool (M) to select the area, fill the empty area on the top left and the bottom right
with red (#BA0000).
converted by Web2PDFConvert.com
Step 16: Rounding out the "S"
Toggle off the visibility of the original text layer from our view to make this next process easier.
We want to get rid of some of these corners, just like with our "D" and "E". The two ends don’t get their corners
chopped off because they don’t fold.
The "S" looks kind of funny right now, but it’ll look fine later on once we start applying shadows on it.
Delete the "S" from the original base text layer if you want, because we no longer need it.
converted by Web2PDFConvert.com
Step 18: Creating the basic shape of the "G"
Make a new group for "G", and—you know the drill by now—a new layer (Ctrl/Cmd + Shift + N) inside it. Just like with
the "S", we’re going to select the area from the top to bottom guides and the left to right edges of the "G".
Now, let’s put a guide on the left and right sides of the box.
Next, put the template on the bottom right and put a guide on its left side. Select the area that the guides make inside
the box, and then delete it from the box and the original text.
converted by Web2PDFConvert.com
Step 20: Finishing off the "G" shape
To make our letter into a "G", we’re going to move our square template so the top of it is resting on the top of the inner
circle. Create a guide on the bottom of the template to help us.
Now, using the Rectangular Marquee Tool (M), select the area that starts at the top of the inner circle to the guide we
just made so we can get rid of the top right side of the box.
converted by Web2PDFConvert.com
Our "G" is a little too wide for our design. To fix that, get the Rectangular Marquee Tool (M) and select the right half of
our letter.
With the appropriate area selected, click on the Move Tool (V) on the Tools Panel, hold down Shift, and move the
selected area to the left.
Move our square template with the Move Tool (V), placing it at the top left corner of the letter. Also place a guide on the
left and right to make our selections easier and more accurate.
Move the square template to the right corner, and also place guides on the left and right sides.
Now select the middle part with the Rectangular Marquee Tool (M) and delete it.
converted by Web2PDFConvert.com
Step 24: Adding the crossbar
Using the Rectangular Marquee Tool (M) again, we’re going to create a box around the right stem of the "N" and
duplicate the selection into a new layer by pressing Ctrl/Cmd + J.
Take the stem we duplicated and then use the Free Transform command (Ctrl/Cmd + T) to angle it so that it turns into
the crossbar of our "N".
With a little experimentation, the top left corner should line up with the left corner of the left stem and the bottom left
corner should line up with the bottom left corner of the right stem.
Select the part of the crossbar that goes above the top guide with the Rectangular Marquee Tool (M) and delete it.
converted by Web2PDFConvert.com
Step 25: Finishing off the "N"
If you look at the actual fold of the letter "N" in our reference photo, you’ll notice that the folds at the top and bottom
aren’t completely horizontal. We’re going to create these angles by moving the square template to the top left.
Use the Free Transform command (Ctrl/Cmd + T) and move a guide on the horizontal middle transform control. What
we’re doing is making a guide at the halfway mark of the template. Do this for the bottom right corner.
With the Polygonal Lasso Tool (L), delete the corners using the guides we just made as the side points.
We also want to get the letter "E" on one layer. Click on the original text layer in the Layers Panel while holding down
Ctrl/Cmd. Then with the Rectangular Marquee Tool (M), hold down Alt/Option to create a square selection around the
"I" to subtract it from the current selection.
Now hold down Shift + Ctrl/Cmd and click on the rest of the "E" in the "E" group. Click on the "E" layer in the "E" group
and fill the selected area with our orange color (#FF9900).
converted by Web2PDFConvert.com
Step 27: Creating the folds on the "D"
Now we can start creating the folds for the letter "D". To create the folds, we’re going to use our guides as well our
real-life model for reference.
The horizontal pieces are the ones on top for the "D", so the two vertical pieces are going to have shadows on them.
To create the shadows, select the area in the middle with the Rectangular Marquee Tool (M) and make a gradient with
the Black to Transparent gradient preset using the Gradient Tool (G).
Play around with this until you get something that looks good. If you don’t like the gradient you made, just press
Ctrl/Cmd + Z to undo it, and then try again. Try not to start the gradient right at the edge, but try not to make it too subtle
and understated either.
To get rid of the excess gradient, Ctrl/Cmd + click on the "D" layer, go to Select > Inverse (Shift + Ctrl/Cmd + I) to invert
your selection, and hit the Delete key to get rid of the selected area.
converted by Web2PDFConvert.com
For the "S", the curved parts are going to be the ones on the top, with the rest shaded.
converted by Web2PDFConvert.com
Step 32: Creating the folds on the "N"
For the "N", the left stem is going to be under the crossbar and the crossbar is going to be under the right stem.
Select the pieces that would have been folded under with the Rectangular Marquee Tool (M) and open up the
Hue/Saturation image adjustment command (Ctrl/Cmd + U).
Note: To make multiple disjointed selections like the image below, hold down the Shift key (this should put a small "+"
on your mouse cursor, indicating that it’s the correct mode).
converted by Web2PDFConvert.com
Change the Saturation to -40 and the Lightness to +20. We’re using the Lightness option in the Hue/Saturation
because it washes out the colors, which is what we want.
Apply this to the rest of the letters as well. Ashortcut would be to right-click on the "D" layer, choose Copy Layer Style,
select the other layers, right-click on them, and then pick Paste Layer Style from the contextual menu that appears.
converted by Web2PDFConvert.com
Step 37: Adding a Gradient Map
We’re going to add some effects to our text and image. First off, we’re going to go to Layer > New Adjustment Layer >
Gradient Map.
Click on the yellow to red gradient preset and also choose the Reverse option.
Drop the opacity of the Gradient Map adjustment layer down to about 15%. This should be your topmost layer. This will
give our entire piece a yellowish, aged look.
converted by Web2PDFConvert.com
Step 39: Give the text an uneven look
Now we’re going to give our text a little bit of an uneven, natural look. First, make sure the foreground and background
colors are black and white (press D to reset your colors).
Create a new layer by pressing Ctrl/Cmd + Shift + N, and then go to Filter > Render > Clouds. Make sure the layer is
just below the Gradient Map and the Hue Saturation layers.
Change the blend mode of this new layer to Overlay and the drop the Opacity down to 50%.
Alternatively, use a paper texture of your own, or look around the Freebies section of Design Instruct for textures that
you might want to use instead.
Go to Image > Image Rotation > 90o CCW so that the binding of the texture is at the bottom of the canvas.
Go to Image > Image Size and change the width to 1200px to make the texture the same width as our main canvas.
With the texture prepped, copy and paste it into our retro folded paper Photoshop canvas.
Change the blend mode of the texture’s layer to Overlay and then open up the Levels image adjustment dialog
window (Ctrl/Cmd + L). Change the option values so that they are similar to what I have below—these settings will
make the texture stand out more.
converted by Web2PDFConvert.com
Step 41: Adjusting the texture
Open up the Hue/Saturation dialog window and drop the Saturation to -40. Also, drop the opacity of this layer to about
50%. This will make the color of the texture more subtle.
Change the blend mode to Multiply and drop the opacity to 20%.
Go to Select > Inverse and fill the inverted selection with black (#000000). This should fill just the edges.
converted by Web2PDFConvert.com
Step 44: Alternate texture
You can also play around with additional textures. I’m going to keep the background with the same paper texture. I’m
going to hide the paper texture that was above the text.
Next, I’m going to bring in this other texture (also included in the Resources listing above) to give the image a dirtier,
grungier look. Play around with different textures to create something that’s all your own.
Tutorial Summary
In this Photoshop tutorial, I showed you how to create an interesting folded paper typography. First, we created a real-
life model of our text, which I hope shows you the value of having a reference before firing up your favorite graphics
editor and creating artwork digitally.
We used simple Photoshop techniques such as selecting areas manually using the Photoshop’s Lasso and
Marquee tools. To make our selections more accurate and our letters more uniform, we created a square template
and used a copious amount of Photoshop guides. To finish up the piece, we applied some basic adjustment layers to
give our product a retro, faded look.
I hope you enjoyed this tutorial and I look forward to seeing your own versions in the Design Instruct Flickr group pool.
converted by Web2PDFConvert.com
Download Source Files
retro_folded_paper (ZIP, 14.6 MB)
Mikael Halén Really cool effect you’ve got going! I liked what you did, changing the
APR 26 2010 original font like that! Thanks for sharing!
REPLY TO COMMENT
REPLY TO COMMENT
zauberer very cool effect, good idea and a lot to learn for me and my photoshop
APR 26 2010 experience! btw. i like this little borders and shadow around the gravatars
is this made with css?
thanks V.
REPLY TO COMMENT
Jacob Gube The border and shadow around the avatar uses a CSS
APR 26 2010 background image (you can find it in our CSS background sprite).
Editorial Team The border and shading in the images inside the tutorial uses
CSS3.
REPLY TO COMMENT
zauberer thanks for reply, the thing with the sprite is, i never used this
APR 26 2010 before, so i have to look how this works, but i know the site
loads faster and thats much better :) and one more ting –
your site is very clean and well organized, thats lot of work
on my site :)
Victor
For CSS sprites, I find this tutorial very easy to follow for
people who’ve heard of them but don’t know how exactly
converted by Web2PDFConvert.com
they work:
http://css-tricks.com/css-sprites/
Kawsar Ali Tyler this is really awesome. Creative and very cool result. Thanks
APR 26 2010
Contributor REPLY TO COMMENT
REPLY TO COMMENT
REPLY TO COMMENT
Richie Uniqueness and Innovative. Very strong words but definitely describes
APR 29 2010 this tutorial. Excellent job, Tyler!
REPLY TO COMMENT
REPLY TO COMMENT
Tiyo Kamtiyono Cool techniques and result. This is great, especially the cloudy effect!
APR 30 2010
REPLY TO COMMENT
Olivia Enjoyed this as a whole, but especially enjoyed the use of actual folded
MAY 01 2010 paper as a reference. Thumbs up!
REPLY TO COMMENT
george love the way you did it with real paper first!
MAY 02 2010
REPLY TO COMMENT
REPLY TO COMMENT
Joshua Fantastic tutorial, you could’ve easily stopped at a number of junctions but
Johnson continued to tweak the design until it was just perfect.
converted by Web2PDFConvert.com
MAY 05 2010
REPLY TO COMMENT
Carine This is quite a popular typography effect. But this is the best tutorial on this
MAY 12 2010 type of effect! Love the precision with which you measured the folds!
REPLY TO COMMENT
Rogier Vogels Thanks for this great tutorial, the effect looks really cool. :)
MAY 15 2010
REPLY TO COMMENT
Bruno Very instructive. It gives the way to see how things are. Not a single
MAY 24 2010 compilation of instructions as we see so many times in many sites.
thx
REPLY TO COMMENT
Hillary This is so neat! I really am going to try this out. Thanks for the great
MAY 25 2010 tutorial!
REPLY TO COMMENT
Joydeep Nice tutorial,great work..I was looking for something extraordinary and I
JUN 15 2010 got it…thanks a lot.
REPLY TO COMMENT
Elina Very useful tutorial. I’m loving this! Also curious how you would make a X.
JUN 15 2010 I’m working on that now ^^
REPLY TO COMMENT
Jacob Gube Good question. The closest letter that will prove useful (I’m only
JUN 15 2010 visualizing this, haven’t actually taken Tyler’s tip and lay out strips
Editorial Team of paper) is the letter “N”, with the diagonal crossbar.
REPLY TO COMMENT
Javier Villatoro Hey that´s awesome!… by the way is the cs3 ps? thanks!.
JUN 15 2010
REPLY TO COMMENT
Jacob Gube If I remember correctly, the source file should be a layered TIFF file,
JUN 15 2010 which should be CS version agnostic.
converted by Web2PDFConvert.com
Editorial Team
REPLY TO COMMENT
Aftab Alam I really apriciate this tutorial and really loved this one, it made my past in
JUN 20 2010 front of the eyes when I used to work in school in my craft & Drawing
sessions.
REPLY TO COMMENT
Agi Really nice effect – I like the way you did it. Keep up!
JUL 19 2010
REPLY TO COMMENT
Seon Dorsette I’ve seen other articles about something similar – but this is really well
JUL 21 2010 written and has much more detail – Thanks for sharing! *bookmarked*
REPLY TO COMMENT
Replica jerseys I really apriciate this tutorial and really loved this one, it made my past in
AUG 12 2010 front of the eyes when I used to work in school in my craft & Drawing
sessions.
REPLY TO COMMENT
Malka Forsman So Great! I need some infos in this post for my rapport de stage. Can i
AUG 19 2010 have your contact please? I need your permission to quote it :D. Anyway,
That’s great job. Keep going.
REPLY TO COMMENT
Randolph So Great! I need some infos in this post for my rapport de stage. Can i
Bedoya have your contact please? I need your permission to quote it :D. Anyway,
AUG 19 2010 That’s great job. Keep going.
REPLY TO COMMENT
REPLY TO COMMENT
libri scontati Grazie saputo questo carta storia , un grado d ‘intossicazione tema mi ha
converted by Web2PDFConvert.com
SEP 02 2010 veramente bigrement interessato.
REPLY TO COMMENT
REPLY TO COMMENT
libro cuore Grazia fino a questo storia ho estremamente saputo per nuove cose che
SEP 14 2010 non sapevo non. Grazie, applauso ed anche rispetto.
REPLY TO COMMENT
Y O U R C( O
R E
M Q
M UE IN RT E D )
Y O U R R ( E RA EL Q UN IA RM E E D )
Y O U R ( RE E
M QA UI LI R E D - K GE RP A
T V PA RT IA V R A S T E ) U S E D F O R
Y O U R( O UP RT LI O N A L )
Submit Comment
C O M M E N T R S S F E E D
N O T I F Y M E O F F O L L O W U P C O M M E N T S V I A E - M A I L
E X P L O R E W T R H I ET E S I F T O CE R O NU NS E C T C WO IP TY HR I UG SH T
About Design Instruct Are you a talented designer eager to Get our RSS feed © 2010 Design Instruct and its respective
Advertise with Us share your expertise to a worldwide Follow us on Twitter owners. All Rights Reserved.
Writing Guidelines audience? We want you to write for us Become a fan on Facebook
Contact Us real bad! Read our writing guidelines and Browse our Flickr stuff O U R O T H E R S
Upcoming Features contact us any time, we'd love to talk. Join the Flickr group pool
Six Revisions Check it out, it's
FAQ Check us out on deviantART
awesome.
Freebies
Our Friends
converted by Web2PDFConvert.com