Documente Academic
Documente Profesional
Documente Cultură
Tutorials
Wallpapers
Interviews
News
About
Contact/Ads
Join
Login
Store
Last week we published our 10th Wallpaper of the Week. It was an awesome typography/design from Ginger Monkey Design called Compassion. What I really liked about that design was how they mixed some "frilly bits" with the typeface to create an outstanding piece of work. I decided to create a tutorial showing you how to do that as well.
In this tutorial I will show you how to mix some vectors with letters to create a really nice
design.
Step 1
The first thing to do is to find the elements we will use. There are lots of websites where you can find nice vectors, and there's a post from Cameron Moll with a huge list of these sites. So that's a nice place to start. http://cameronmoll.com/archives/2008/05/25_resources_ornaments_fleurons/ After checking all the sites out, I bought the vectors from http://www.istockphoto.com/file_closeup/object/5836792_floral_design_elements.php? id=5836792
Step 2
Open Photoshop and create a new document. I used 1680x1050 pixels. After that, type abduzeedo and go to Layer>Layer Style>Gradient Overlay. Use Red, Yellow, Green, and Light Blue for the colors. I used Futura for the typeface
Step 3
Let's start mixing the vectors with the type. First you will have to find the right "ornament" for the letter you want. Then you will have to place it in a way that it follows the shape of that letter. In the image below you can see that the "ornament" seems to be coming from the "a".
Step 3
After you align the ornament with the letter, it's time to add some depth. To do that let's use the Layer Styles. Go to Layer>Layer Styles>Drop Shadow. Use Multiply for the Blend Mode, Black for the color, 100% Opacity, -60% Angle, Distance of 5 pixels and Size of 5 pixels as well.
Abduzeedo's Tags
more tags inspiration daily inspiration tutorial wallpaper photography illustration photoshop
design graphic design web design video of the week sites of the week iphone wallpaper of the
week video best of the week interview giveaway fireworks Typography hdr posters quick tips funny poster motion
graphics T-shirt Design vector t-shirt logo photo manipulation 3d web 2.0 ads illustrator contest abdutees web blog inspirao
Do you want to advertise here? Click Here Advertise Advertise Advertise Advertise Advertise Advertise Advertise Advertise Advertise Advertise Advertise Advertis
Step 4
Here let's create a layer from the shadow of the layer style. To do that click with the right button of the mouse on the layer with the drop shadow. Then select Create
Layer from the menu. That's it, you'll now have a layer with the shadow.
Step 5
Now that you have the shadow in a layer let's apply a mask. Go to Layer>Layer
Mask>Reveal All. Then select the Brush Tool(B). The color will be black and the brush will be regular with a diameter of 45 pixels and 0% hardness. Then just paint the mask to hide some parts of the shadow. The idea is to create the impression that the ornament is coming from, and passing above the letter.
Step 6
Repeat the same thing for the other letters. However it's not necessary to do that for all of them. I only did it on the A, B, D, Z, E, D, and O. After that select the ornament and word layers, group them together and rename the group to "logo". Tip: Always use the color of the exact part of the letter that the ornamet will come from.
Step 7
Here let's add some texture to the image. You can hide the other layers. We'll use some textures from a blog called DesignReviver, they published an article called 300+ Vintage Style Textures and Photoshop Brushes. Download the Vintage II pack and place "Vintage10.jpg" image to the document. Because the image is 1500 pixels and the document is 1680 pixels, you'll have to duplicate the image and fill the remaining part of the document with it. After that go to Image>Adjustments>Hue/Saturation. Use Hue 49, Saturation 19, Lightness +35.
Step 8
Download the "15_textures__art___vintage_by_jocosity" pack and place the "textur2.jpg" in the document. Then change the Blend Mode to Overlay and go to Image>Adjustments>Hue/Saturation. Use Hue +2, Saturation -41, Lightness -75.
Step 9
Download the "Old_Paper_Textures_by_lailomeiel" pack and place the "DSC02679.JPG" in the document. It will go over the other textures, then just change the Blend Mode to Color burn. Now, select all texture layers and group them. Rename the group Textures.
Step 10
Select the "logo" group and go to Layer>Merge Group. This will convert the layer and all groups inside it to a single layer. Then go to Layer>Layer Style>Drop Shadow. Use Color Burn for the Blend Mode, 100% Opacity, -60 for the Angle, Distance and Size of 5px.
Step 11
Duplicate the "texture" group and change the blend mode of the "paper" layer to
Overlay. Merge the group in order to create a unique layer from it. Change the order of the layers and put the new texture layer on top of the logo layer. Then go to Layer>Create Clipping Mask and change the Blend Mode to Multiply. Duplicate the texture layer again making sure that it is still with the clipping mask. Then just change the Blend Mode to Overlay.
Step 12
Group the "Logo" layer with the two texture clipping mask layers. Duplicate the group and merge it to a single layer. Then go to Filter>Blur>Gaussian Blur. Use 4.5 pixels for the Radius and change the Blend Mode to Screen and 80% Opacity.
Conclusion
In this tutorial we learnt how to mix some vector ornaments with a word to produce a nice typography. We also played around with vintage textures and cliping masks that gave our image a not so "clean" look. You can create many variations of this effect. Below I added a Radial Gradient so the textures only appear where the logo is. Again it's all about experimentation.
Similar Articles:
A Visual Guide To: Super Cool Frilly Bits Typography Tratamentos de Fotos Bizarros no Photoshop Texto de Carne no Photoshop Meat Text Effect in Photoshop Tutorial do Leitor: gua Dark no Photoshop by Julien Brionne Texto de gua Incrivelmente Realista com Cinema 4D e Photoshop
116 Comments
cool tutorial :)
Shannon
06/23/2008
Great !
Ice-Cream
06/23/2008
starlight86
06/23/2008
I love it when we have seen the styes used in your inspiration section and then you go and create a tutorial on how to make it! that is why this site is so good!
godonholiday
06/23/2008
hakan nural
06/23/2008
Daan
06/23/2008
Do we convert the text layer to a raster layer and then add the ornaments? Because if I do that, I can't get the drop shadow to work. :/
Seth Nenstiel
06/23/2008
If not, how do you keep the gradient over both layers? Please assist. Other than that, it is a beautiful work. Thanks, Seth
K3v
06/23/2008
RayFiasco
06/23/2008
Lorena
06/23/2008
therapix
06/23/2008
Really stunning stuff Fabio.. mine ain't pretty bad either. keep it up ;)
BogDinamita
06/23/2008
http://www.flickr.com/photos/bogdinamita/2605666456/
Nice tutorial.
Anthony Short
06/24/2008
I saw a graphic designer at a convention recently that does this sort of work with typography. I can't remember his name, but he hand draws all these complex swirls in pen. Very cool style.
Dy
06/24/2008
Thank you, Fabio. This was fun and I LOVED the result.
Ressa
06/24/2008
http://img.photobucket.com/albums/0903/ressamac/2008/desbytreecolors3cop...
xavier
06/24/2008
Really cool!!
Unbelieveable :D Great!
Markus Nielsen
06/24/2008
Andrew
06/24/2008
Awsome tutorial, abducted for sure :P :D Keep up the good tutorials and updates! ___________________________________________________________________________
SilverSolutions
06/24/2008
www.Silver-Solutions.co.uk - Award Winning Portfolio and Blog of Web Developer Anthony Woods
Web Design
06/24/2008
vyntouch
06/24/2008
Anonymous
06/24/2008
I love how this looks! i am just starting out in photoshop, could you give more details as to how you transferred the vectors and made them the same colors as the letters? (around step 3 i'm getting stuck trying to make the vector swirls colored lines.) thanks so much! i love your designs!
That is really nifty. I wonder if that would work with my site title?
Jenny
06/24/2008
Bruno Gurgatz
06/24/2008
What is the font for the word "abduzeedo" please ? Thanks for this great tutorial.
Ice-Cream
06/25/2008
shambo
06/25/2008
gonowon
06/26/2008
mr nutzereen
06/26/2008
keep it up!!!
awsome Tutorial
Girish
06/26/2008
Awesome tut, really enjoyed making it and the result is great. Thx..!
Wishjuh
06/26/2008
I get lost at step 3, I don't know how to use that vector into Photoshop, is it *.ai or *.eps and can only open in Illustrator? ehhhh, can anyone help please, I'm little
Kenny
06/26/2008
freebie to this
awesome!! xD
billl
06/27/2008
Fernando
06/27/2008
Joseph Maguire
06/30/2008
Frankly that's not really the best way to do it. You're supposed to take illustrator elements in preferably ones you make yourself. And then from there, your supposed to painstakingly look at the type and build each letter form out of the
shapes. And then bring it into photoshop to layer each one of them meticulously. This effect is pretty much a cookie cutter version of what a bunch of artists have been playing with for the past 2 years. It's a style. But it is a lot more useful for artists to learn how to do this style from the ground up to be more unique and to be artists not copy cats.
ammonkc
07/01/2008
Nice Tutorial. I'm pretty much a noob and you lost me at step #3. How do you get from the .eps downloaded at iStockphoto to the ornament on the letters. Do the frilly pieces need to be made into brushes or something like that? Love the effect, thanks.
I'd also like to know how to apply the gradient style to the ornaments. I can't figure out how to and its not explained.
Anonymous
07/01/2008
when i paste they appear in a new layer, thus retaining their original colour. help is appreciated
bee
07/02/2008
Laura
07/03/2008
Could help me understand how you get to step #3. I import the vector image. How do you get it to blend with the same color as the type. Thanks
Anonymous
07/09/2008
Hi, I really like the end outcome but do you have any direct link to where I can download the vector for free?...
^tin__tin^
07/10/2008
Because I don't have any money to buy it. Or could you upload it to www.rapidshare.com? Since you all ready have it. I'd really appreciate it if you could upload it and either send it to my e-mail, or post the link here. Thanks allot!! ^tin__tin^
carofline
07/11/2008
How can I get the vector without paying? Because I don't have money...
^tin__tin^
07/13/2008
Thanks!
Boo2Hed
07/14/2008
Hi! Firstly, I'd like to say that I am so happy that I found this site! The tuts are tops, as
Elizabeth
07/17/2008
are the inspirational bits! I am having a bit of an issue, as others are also, with colorizing the ornaments to flow/match the type. I keep going back over it to try to see what I am missing or just not getting, but I can not figure it out! Some readers have been successful in this, I was hoping that maybe someone (even if not the author of the tutorial), could help shed some light on this step for those of us who are stumped! Thank you in advance! Cheers!
Nice art!
Valrio Vaz
07/22/2008
Very nice...
imsraaia
07/25/2008
maspie
07/27/2008
I have to say that these kinds of tutorials are useless and do the site no good. There's obviously HUGE complaints from the users that step 3 isn't thought out and
Anonymous
07/27/2008
is causing frustration. 1. The responsibility of the author is to confirm that his users can follow along with the tutorial. 2. The site should also address this by asking the author to simply update the tutorial itself.
Chetan
07/31/2008
rad_thundercat
08/20/2008
It's been interesting reading the comments; I don't think people understand that creative tutorials from an artists website are intended to be guides. Step 3 not
Anonymous
08/21/2008
Oi!Tudo Bem? Hey I've been to porto alegre! I lived in the Blue Tree Millenium Towers! Nice artwork by the way!
Only one word can describe this type of work which is "Perfect".
XiTij
08/21/2008
dayday
08/22/2008
dayday
08/23/2008
TiKi
09/03/2008
My outcome : http://i38.tinypic.com/2iasq5w.jpg
Anonymous
09/07/2008
mEHE
09/07/2008
someone at Ryerson University used this tutorial for their Orientation Week postcard. it came out pretty classy. they opted for a hardwood type background,
Keist
09/10/2008
which came out very nicely. the vector work was a bit clumsier, though, particularly in the shadows.
I tried the tutorial .. .very helpful .. .and the results are amazing.... .
Anonymous
09/10/2008
I just wish the tutorial was a little more detailed. ... wished it didn't jump ....and expect the user to know what you did in between. . . It took me longer then usual .... but finally got it working after several hours. . .if the tutorial had the details ..then prob. would've been done in 15 minutes..... :)
Oi Fbio,
babbonny
09/12/2008
eu tentei fazer o trabalho desse tutorial, t a o result se quiser conferir. http://www.flickr.com/photos/30226761@N05/2833606704/sizes/l/ cumprimentos... beleza
Nice tutorial and thanks for using iStock vectors! Your site is an excellent resource.
Rob Sylvan
09/15/2008
Tin_tin, I can appreciate wanting to save a few bucks, but those files are copyrighted and can not legally be shared freely. The files used in this tutorial come in a pack of 13 vectors for as little as $10, so if you really liked them you can license them legally for just a few dollars and help repay the original creator for their efforts. There are thousands of other vector files to choose from and some even cost less. On top of that, you can apply to become a contributor and upload your own files to start earning additional income or even convert earnings to credits to download more files to use for your work. (in the interest of full disclosure I do work for them)
armando
09/22/2008
un gran saludo
Anonymous
09/23/2008
TO MANY steps and not clear ... from step 3 till buttom .... but thanks anyway
dr_sdaa7
09/30/2008
Agnaldo Tomaz
10/03/2008
Skracanie linkw
10/05/2008
oyunlar
10/14/2008
kundan
10/22/2008
Juicy !
ehab
10/26/2008
I get lost at step 3, I don't know how to use that vector into Photoshop?? Please Help?
Ramon
10/27/2008
Very nice tut...not sure why people are having hang ups on step 3 though. As usual, a tutorial is meant to teach a technique...the individual is meant to experiment to
ArchAngel
11/09/2008
Thank you for this tutorial, I learnt a lot from the texture part of this tutorial, I'll definitely use this piece of knowledge! ^.^
Ashley
11/25/2008
Ufff, finally this is my result, i used the same autor's word: abduzeedo
guitarsami
12/06/2008
This is a brilliant tutorial... I was please with my result, very cool stuff. I'm not sure why but I cannot open the sample photoshop file, I use winrar decompression, then
Anonymous
12/07/2008
the file is extracted but photoshop won't recognise it. Also I cannot find any of the textures you talk of, apart from the first one which is beuatiful. It's fine though, I used my own!
Jareth Cutestory
12/08/2008
How do I use vector/eps images? I have a few downloaded that I'd like to use, but I'm not sure how to extract one piece from the whole thing w/out rasterizing it. Do I need illustrator? Or do I trace it with the pen tool? (how to do that?) Sorry I'm kind of a noob...I know how to do a lot but not everything yet!
Semena Konoplya
12/21/2008
cicicocuk
12/25/2008
Brukhar
12/30/2008
Thank you very much for this tutorial! Don't know how past here my variant.
solevolito
01/15/2009
Volkan KANAT
01/22/2009
Rosso
01/23/2009
but... I,ve tried to download your th Photoshop File, unzip it and i've got an error . can you reupload it please? THANKS!
That tutorial was amazing! Never seen anything like it... :) i have some problems though, regarding step 3. I can't move the ornament to the type layer. I can't blend
tsukamoto
01/28/2009
the color either. Can you please help me? Thanks so much!
Si Scott *cough*
dubs
02/02/2009
Brukhar
02/10/2009
Gilad Rubin
02/24/2009
Amazing tutorial, this is my outcome: http://firetongue8.deviantart.com/art/Inspirewallpaper-95176146 it's got more views and favs than any of my other pieces on
firetongue
02/24/2009
deviantart. I only have the GIMP, so I improvised a bit, the layer modes were especially tricky to get right. Went a bit overboard with the brushes XD
How can I get the brushes or Vectors or whatever you call them!? Thanks! :D
^tin__tin^
02/26/2009
To everyone who is struggling with section 3, I think I've figured it out. Once you've added the gradient, right click on the layer and Rasterise it. I'm using brushes
Anonymous
03/04/2009
ebrar
03/05/2009
Revised STEP 3: 1. Rasterize your type layer after you have applied the Gradient Overlay effect.
jnKillTeam
03/10/2009
2. Create/Prepare your artwork in Illustrator using a light color that will show up well on the black background in photoshop 3. Copy/Paste your artwork to Photoshop as a new Vector Layer (one layer above your rasterized text layer). note: or import EPS, whatever your method may be to obtain your vector 4. Make any edits to your vector layer (scale, rotation, position) and rasterize this layer as well. (right click layer > rasterize Layer ) 5. Once you are happy with the position of your ornament add the Drop-Shadow layer effect as explained in the tutorial and make sure to convert it into its own layer (Right-Click Effect > Create Layer) 6. At this point it is good practice to make a copy of your "rasterized text" layer and your "ornament" layer. Click the eye icon to hide all of your layer copies. No need to copy the drop-shadow layer. 7. Shift-Click the "text layer" and "ornament layer" > Right-Click > Select "Merge Layers" to achieve a consistent layer style effect. At this point the color of your ornament should blend perfectly with the text. troubleshooting: make sure the "ornament" layer is above the "text" layer and that both layers are rasterized before merging. All Drop Shadow layers should be on top of the "text" layer. 8. Each time you add an ornament you should copy both the ornament and the text
layer so that you can easily go back and make any edits at any stage of your editing process. It is a slight pain to have to merge down layers to the main text layer everytime but unfortunately this is the only way I have figured out to blend the images effectively. enjoy. Let me know if you have any questions.
Joke
03/13/2009
I really want to do something like this, but I need help! I can't find Gradient Overlay under Layers>Layer Styles... I'm using Photoshop Elements 7.0 Thanks!
jnKillTeam
03/18/2009
7. Right click the ornament layer and select "Merge Down". This should blend the layers properly together while keeping the gradient overlay.
thomasms
03/22/2009
TwiggX
03/24/2009
Step three makes perfect sense. Obviously it's far too time-consuming to make tutorials for newbies, so you better have a little knowledge about photoshop or start off with newbie tutorials before you head for the more advanced ones. I don't understand how you can't understand the third step :P
Anywho, my problem was the overlay layer with the cloud, it doesn't turn out as it's supposed to. I don't know if it's CS4 that I'm using that's screwing it up, but I'll jsut come up with another way.
Grainne
03/30/2009
Give please. You cannot make a man by standing a sheep on its hind legs. But by standing a flock of sheep in that position you can make a crowd of men. I am from Morocco and also now'm speaking English, give please true I wrote the following sentence: "Book your own reservations and plan trips online." Thanks for the help :-(, Grainne.
Nice tutorial !!
Scratches
03/31/2009
Jordanski
04/04/2009
Hi All,
In2net
04/05/2009
Just thought I'd let you know about alot of free vectors of high quality. There great! http://qvectors.com -----------------------------------
http://www.in2net.com.au
Kp
04/11/2009
Vuongot
04/23/2009
mitaumaru
04/29/2009
http://www.flickr.com/photos/mitaumaru/3485463091/sizes/l/
Great tut !
maxlink
05/02/2009
Can we use brush instead of using every floral vector ? I think we can save time ^^ . Tks so much !
hakan deliduman
05/05/2009
cicicocuk
05/20/2009
Hello,
bibby
05/22/2009
As I am beginner in Photoshop world, I would like if someone could help me. I really like gradient overlay used on photo in step 2 of this tutorial. >> Can anyone tell me what are the exact color and placement settings if I want to have the same color effect? << Thank you very much!
Sadly, the only thing I don't get on this tutorial is how you colored and applied the vectors to your picture. I opened the vector photo with Photoshop, selected a vector
Anonymous
05/27/2009
to place on a letter, and copied it over to the text. Of course, the gross white background was there... If I change a blend mode to make it not show, adding color is a pain, because I can't use color overlay. Any help?
"Step 3 -- Let's start mixing the vectors with the type." hm, what do you mean exactly with this? just open up the ai file in photoshop and
YourNoob
05/28/2009
This is a very nice tutorial, I will create my own logo with this, thank you!
Free Joomla
05/30/2009
Yelena
06/01/2009
Badly need your help. My wish is to ride the tempest, tame the waves, kill the sharks. I will not resign myself... I am from Ethiopia and learning to speak English, tell me right I wrote the following sentence: "Us icerocket support free features premium features vip terms of service.Access indications for each of the cold and allergy medicines." Thanks for the help :D, Damen.
I love this!!
Anonymous
06/01/2009
I am only a beginner on photoshop and i'm finding it hard to do. I need to add this effect to the words "C2 Island" for an assignment. Could someone do it for me?? if you have time. I will pay you if you like! Let me know! thanks!
hi threre thats an awesome tutorial u got some talent!!!!!!!but i got a question because lot's of ppl dont k
Anonymous
06/09/2009
now how to put the vectors we could use some help make this tutorial usefull for everyone!!!!!!
That set of floral ornaments (#5836792) is not available at istockphoto anymore. Is there a way to get it from the developer directly?
Shivanand Sharma
06/14/2009
Jaspal Singh
06/14/2009
nkdv
06/15/2009
Anonymous
Homepage:
Comment: *
SAVE
PREVIEW
Advertise Here
TUTORIALS
Reader Tutorial: Illustrating a Camaro 2010 by Julio Leite Reader Tutorial: Aurora Borealis Wallpaper in Photoshop Video Tutorial: The No BS Retouching Photoshop Quick Tips #11: Creating Glow Lines Photoshop Quick Tips #10: Using Pattern Overlay Creating an amazing Palm Pre icon on Fireworks Sparkling Hot Girl in Pixelmator Meat Text Effect in Photoshop
more
Creative Photoshop Wkshop Author of "Photoshop Darkroom" Leads weekend workshop 7/18-7/19
www.digitalfieldguide.com/workshop
Creative Graphic Design Looking for inspiration? Exhibit, Fashion, Animation & Web
www.lashaycarr.com
WALLPAPERS
FLICKR GROUP
FOLLOW US
HOSTED BY