Professional Documents
Culture Documents
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
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
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
116 Comments
cool tutorial :)
Shannon
06/23/2008
Great !
Ice-Cream
06/23/2008
nice..:)
very good tutorial..
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
Learn it, pass it on.
very nice tutorial..
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.
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 http://www.flickr.com/photos/bogdinamita/2605666456/
06/23/2008
Nice tutorial.
Anthony Short I saw a graphic designer at a convention recently that does this sort of work with
06/24/2008 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...
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!
___________________________________________________________________________
Silver- www.Silver-Solutions.co.uk - Award Winning Portfolio and Blog of Web Developer
Solutions
06/24/2008
Anthony Woods
Web Design
06/24/2008
Great one ! keep them coming!
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.)
That is really nifty. I wonder if that would work with my site title?
Jenny
06/24/2008
Bruno Gurgatz
06/24/2008
shambo
06/25/2008
daniel aka
milo13
06/26/2008
awsome Tutorial
Girish
06/26/2008
Awesome tut, really enjoyed making it and the result is great.
Thx..!
Wishjuh
06/26/2008 Will buy you a coffee soon ;)
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 freebie to this
06/26/2008
awesome!! xD
Joseph Frankly that's not really the best way to do it. You're supposed to take illustrator
Maguire elements in preferably ones you make yourself. And then from there, your
06/30/2008 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
ammonkc
07/01/2008 artists not copy cats.
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^ Because I don't have any money to buy it.
07/10/2008
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^
Heather Marie
Miller
07/15/2008
Hi!
Firstly, I'd like to say that I am so happy that I found this site! The tuts are tops, as
Elizabeth are the inspirational bits!
07/17/2008
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
nice tutorial...
thank u
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 is causing frustration.
07/27/2008
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 It's been interesting reading the comments; I don't think people understand that
08/20/2008 creative tutorials from an artists website are intended to be guides. Step 3 not
working for you? Grow up, be a professional and figure it out!
Anonymous Oi!Tudo Bem? Hey I've been to porto alegre! I lived in the Blue Tree Millenium
08/21/2008 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
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 which came out very nicely. the vector work was a bit clumsier, though, particularly
09/10/2008
in the shadows.
I tried the tutorial .. .very helpful .. .and the results are amazing.... .
Anonymous I just wish the tutorial was a little more detailed. ... wished it didn't jump ....and
09/10/2008 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,
cumprimentos...
beleza
Nice tutorial and thanks for using iStock vectors! Your site is an excellent resource.
Rob Sylvan Tin_tin, I can appreciate wanting to save a few bucks, but those files are
09/15/2008 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.
Anonymous
09/23/2008
TO MANY steps and not clear ... from step 3 till buttom .... but thanks anyway
dr_sdaa7
09/30/2008
THX for TUT ;D
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 obtain different outcomes. Thank you for the lesson in typography.
11/09/2008
AA
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
Jareth
Cutestory How do I use vector/eps images? I have a few downloaded that I'd like to use, but
12/08/2008 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!
Good post.
Greetings from Russia!
Semena
Konoplya
12/21/2008
cicicocuk
12/25/2008
solevolito
01/15/2009
Volkan KANAT
01/22/2009
hello...
very interesting tutorial ..
Rosso but... I,ve tried to download your th Photoshop File, unzip it and i've got an error .
01/23/2009
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 the color either. Can you please help me?
01/28/2009
Thanks so much!
Si Scott *cough*
dubs
02/02/2009
Featured here: http://www.presidiacreative.com/10-amazing-effects-from-
abduzeedo/
Brukhar
02/10/2009
Gilad Rubin
02/24/2009
here's my result:
http://picasaweb.google.com/gilad.rubin/Photoshop#5303304280551944002
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 instead of vectors and this appears to have worked.
03/04/2009
:D
sohbet odalar?- sohbet
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.
Joke
03/13/2009
enjoy. Let me know if you have any questions.
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 7. Right click the ornament layer and select "Merge Down". This should blend the
03/18/2009 layers properly together while keeping the gradient overlay.
thomasms
03/22/2009
Hello!
This tutorial is wonderful! Thank you so much!
TwiggX Step three makes perfect sense. Obviously it's far too time-consuming to make
03/24/2009
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.
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."
Nice tutorial !!
Scratches
03/31/2009
Hi All,
In2net Just thought I'd let you know about alot of free vectors of high quality. There great!
04/05/2009
http://qvectors.com
-----------------------------------
http://www.in2net.com.au
Great tut !
maxlink Can we use brush instead of using every floral vector ? I think we can save time ^^ .
05/02/2009
Tks so much !
cicicocuk
05/20/2009
Hello,
bibby As I am beginner in Photoshop world, I would like if someone could help me.
05/22/2009
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? <<
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 to place on a letter, and copied it over to the text. Of course, the gross white
05/27/2009
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?
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."
I love this!!
Anonymous I am only a beginner on photoshop and i'm finding it hard to do. I need to add this
06/01/2009 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!
Jaspal Singh
06/14/2009
nkdv
06/15/2009
E-mail: *
The content of this field is kept private and will not be shown publicly.
Homepage:
Comment: *
SAVE PREVIEW
Advertise Here
TUTORIALS
Reader Tutorial: Illustrating a
Camaro 2010 by Julio Leite
WALLPAPERS
FLICKR GROUP
FOLLOW US
Twitter
Full post
Short Version
Tutorials
HOSTED BY
Home Interviews Tutorials Wallpapers About Us Contact Us Blog Flux Directory Back
and BlogCatalog
to the Top