Create a Dream Design with 3D Typography

Mon, Oct 13, 2008

Illustrator, Photoshop, Tutorials Hello, my name is Alex Beltechi, a esi!ner that is currently stu yin! in colle!e an "or#in! in the print me ia realm$ I "oul lo%e to explain my %ast experience an o%er"helmin! #no"le !e to you, &ut ue to the 'act that I ha%e no such (ualities, I)ll stic# to sharin! "hat s#ills I)%e &een e%elopin! lately, throu!h tutorials$ Amon! #ey&oar shortcuts an mouse clic#s, I enthusiastically tap piano #eys an ream o' a *ustin! a lens) 'ocus$ An in case you) li#e to 'in me on the "e&, you can rea my tutorials on P+,T-T+ or see more o' my "or# on my Behance port'olio$ Introduction In this tutorial, "e)re !oin! to create a 3, Typo!raphy &ase esi!n$ All the elements "ill re%ol%e aroun the centerpiece an theme. reamin!$ The "or "ill ictate the entire layout an control the space &y allo"in! e%erythin! else to emer!e 'rom "ithin$ The trees "ill !ro" out o' the letters/ the mountains "ill sho" themsel%es &ehin the "or an o%ersha o" the !lo"in! moon$ ,reamin! o'ten ta#es you to i''erent places an unites &its an pieces o' your memory$ It &asically ta#es you to a "hole ne" "orl , &ut that is usually ma e up o' real elements$ 0e)ll illustrate this &y ma#in! e%erythin! 'loat in mi air, as i' suspen e in time, yet maintain realism &y usin! common elements o' nature$ 1aturally, people ream at ni!ht, so the o%erall li!htin! "ill &e ar# an pre ominate &y a col color palette. cyan an lime !reen$ Also, the typo!raphy shoul ha%e a classic, storytellin! loo#/ one that "oul complete the eerie atmosphere$ 2eel 'ree to o"nloa the P+, at the &ottom o' the post that contains the 'inal ima!e$ 1o" that "e)%e planne e%erythin!, let)s &e!in$ Create the 3D text The 'irst thin! to o is !et this 'ree 'ont calle +tory&oo#$ It)s a 'ont that 'its our context "ell, an that "ill loo# "ell "ith 3, ecorations ue to its ele!ant seri's an &ol stature$ Type up the 'irst letter o' your "or an !i%e it this color. 343238$

1o" a a 3, e''ect &y !oin! to 5''ect 6 3, 6 5xtru e 7 Be%el$ Play aroun "ith the settin!s yoursel' to !et the an!le, li!htin! an 'orm you "ant$ 8ou can recreate my treatment &y usin! the same settin!s$ ,on)t 'or!et to use a 94omplex 2) Be%el$

Once you 'inish the 'irst letter, repeat the process on the remainin! letters$ The only mo i'ications you shoul ma#e are to alter the position$ Then copy :4trl;4< each in i%i ual letter an paste :4trl;=< them in Photoshop one at a time$ Once you try pastin! them, you)ll &e prompte to choose a metho o' importin!$ 4hoose the 9+mart O&*ect) Option$ By oin! this you can ma#e simple a *ustments at all times to the Illustrator 'ile ri!ht insi e Photoshop &y ou&le clic#in! the layer icon$

Position the letters onto an empty Photoshop can%as$ I)m "or#in! at a rather lar!e resolution o' approximately >300 x 3?00 px at 300 ppi$ Also, 'ill the &ac#!roun layer "ith this color. 1@1?1 $

At this point "e)ll &e!in styliAin! the letters$ Bet the Ma!ic 0an Tool :0< an ma#e a selection o' the letter)s 'ore!roun $ Ci!ht clic#, select Ma#e 0or# Path an speci'y a tolerance le%el o' 1,?$

1o" that it)s a "or# path, "e)ll 'ill it "ith a color &y !oin! to Dayer 6 1e" 2ill Dayer 6 +oli 4olor$ 2ill it "ith "hite$ The path shoul no" &e a %ector shape$ ,ou&le clic# on its layer an !i%e it a &e%el$ -se the settin!s sho"n in the ima!e &elo" an choose the hi!hli!ht color :E3aa?3< an sha o" color :>c>'>3<$

It)s no" time to create a pattern that "ill co%er the 'ront o' each letter$ I)m usin! a Bo Me ia %ector 'ree&ie. +eamless +"irls$ Bo on an o"nloa it i' you ha%en)t alrea y, an open the pro%i e Illustrator 'ile$ 4han!e its color to this. E3aa?2 an copy :4trl;4<$ Open a ne" Photoshop pro*ect "ith the clip&oar siAe :23? x 23? px< an 'ill the &ac#!roun color "ith another color. e&e@@'$ To ma#e it into o a pattern !o to 5 it 6 ,e'ine Pattern$ 8our ne" pattern "ill &e sa%e in the pattern set that is currently opene $

1o" that you)%e create the pattern, you nee to a the pattern to the 'ace o' the letter$ ,ou&le clic# on the "hite shape)s layer an a a Dayer +tyle. Pattern O%erlay$ 8our ne"ly create pattern shoul alrea y &e selecte $

One last touch is a Bra ient Map A *ustment Dayer that "e)ll place on top o' the letter)s &o y$ 0hile ha%in! the layer selecte , !o to Dayer 6 1e" A *ustment Dayer 6 Bra ient Map$ Then play aroun "ith the colors until you !et a similar result$ My colors, 'rom le't to ri!ht are. 8c>@', E3aa?3, 2>2>28, an 13131>$ Ma#e sure that the A *ustment Dayer Applies only to the letter$ To o this, ma#e it a clippin! mas# 'or the letter layer &y hol in! Alt an clic#in! ri!ht in &et"een the t"o layers$

1o" copy the layer style o' the letter 'ace an to the remainin! letters$

uplicate the Bra ient Map$ Apply these e''ects

Draw the scenery The text is no" 'inishe $ Det)s a the trees an 'olia!e$ This techni(ue I)m a&out to sho" you is "hat I ha%e e%elope 'or mysel'$ It re uces complex ima!ery to simple shape$ A simple splatter, "hen !roupe in a pattern &e!ins to ta#e a certain role, thus resem&lin! an element o' nature$ 8ou may 'in it use'ul or ull, &ut it)s "hat "e)ll use 'or this esi!n$ All you nee is a stan ar Photoshop roun &rush an a mouse$ 4hoose one usin! your Brush Tool :B< an input the settin!s 'oun in the ima!es &elo"$

1o" that your &rush settin!s are all rea y, &e!in paintin! a tree$ It)s important to #no" that you shoul n)t create the "hole tree "ith the same &rush settin!s$ There is one a *ustment you nee to ma#e alon! the "ay$ I' you loo# un er +hape ,ynamics in your Brushes 0in o", you)ll

see a settin! "e)re usin!. 2a e$ This 'a es out your &rush epen in! on ho" much you put in the a *acent 'iel $ A 2a e set at 100 "ill en 'aster than one set at 2?0$ 8ou can use "hate%er settin!s you 'in appropriate$ I use 100 'or the trun#, 1?0 'or extensions o' the trun#, an 2?0 'or thic# &ranches$ As you increase the 'a e, re uce the &rush siAe at the same time$

4ontinue usin! this techni(ue in creatin! the rest o' the trees an ra" some roots too$ Ce uce the siAe consi era&ly 'or the thin &ranches an a e%en more 'a in! "hen necessary$

It)s time 'or 'olia!e$ Prepare a separate &rush usin! these settin!s$

1o" &e!in paintin!$ Be!in "ith a lar!er siAe usin! this !reen. E3aa?3$ In a layer un erneath, "ith a smaller siAe &rush, paint "ith a ar#er !reen. ??>12'$ A!ain o%er the li!ht !reen layer, use the same color :E3aa?3< "ith an e%en smaller siAe$ 2or hi!hli!hts, use the same siAe as the last one, &ut "ith this yello". e3e0@ $ Here is an ima!e you can use as a re'erence in creatin! your o"n trees$ I re" my inspiration 'rom acacia trees, "hile comin! up "ith the shape o' the trun# an %olume o' the 'olia!e$

2ollo"in! the &ranches as a re'erence, ra" a"ayF

A more nature elements no"$ I a e a mountain an a moon$ They "ill !i%e epth to the ima!e, an pre%ent the composition 'rom &ein! scarce$ -se the pen tool :P< an create them as %ector shapes$

Ma#e the mountain 'a e out on the &ottom$ An easy "ay to o it "oul &e to create a ne" layer on top, clip it to the mountain layer an paint "ith a lar!e so't &rush "ith the &ac#!roun color$ I also a e a !lo" on the moon$ To a one yoursel', a a layer style. Outer Blo"$ Geep the stan ar color, increase its siAe an re uce the opacity to 2?H$ +ome more impro%ements inclu e a in! ar# accents to the lo"er part o' the tree trun#s an sha o"s that stretch across the 'ace o' the letters$ 8ou can create those in the same "ay I clip a ne" layer to the one you "ant ar#ene an paint "ith a so't &rush usin! a ar# color$ This applies to the mountain, trees an roots$ -se a sharp &rush to ra" the tree sha o" thou!h$

Finalize the design In or er to complete the artistic 'eel o' this esi!n, a this texture to your can%as$ +imply paste it on a ne" layer, o%er all the other ones$ +et the layer)s &len in! mo e to Dinear Burn an its opacity to 30H$

1o" in%ert the texture :4trl;I< an chan!e its hue &y !oin! to Ima!e 6 A *ustments 6 Hue an +aturation$ 4han!e the hue to 1?3 an saturation to J@3$

One last touch I a the "atercolor texture insi e the mountain an moon, once more, "ith clippin! mas#s$ Put their layers on O%erlay :Mountain< an Multiply :Moon<$ A *ust the opacity$

An that conclu es it$ 1o" !o on an create your o"n, one o' a #in , ream esi!n$

,o"nloa ,ream$P+,