Super Cool Frilly Bits Typography
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.
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.
Click here to see the full preview
Download the Photoshop File
Click here to download the Photoshop file for this tutorial
About author
My name is Fabio Sasso, I'm a graphic/web designer from Porto Alegre, Brazil and I'm the founder of Abduzeedo. I hope we can share lots of information, tips, and ideas through abduzeedo.
Quite nice but a lit of bit unreadable.
THX for TUT ;D
TO MANY steps and not clear ... from step 3 till buttom .... but thanks anyway
dude how do u do the pencil thing.
hola tu diseño es increible, eres RESPETABLE
un gran saludo
Nice tutorial and thanks for using iStock vectors! Your site is an excellent resource.
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)
Oi Fábio,
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
I tried the tutorial .. .very helpful .. .and the results are amazing.... .
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.....
:)
someone at Ryerson University used this tutorial for their Orientation Week postcard. it came out pretty classy. they opted for a hardwood type background, which came out very nicely. the vector work was a bit clumsier, though, particularly in the shadows.
how do you put the vector in photoshop
How do you put the vector in photoshop
Wow, nice tut ^^)
My outcome : http://i38.tinypic.com/2iasq5w.jpg
This is simply an amazing effect. I'm lovin' it 8)
This is a beautiful logo!! Looking forward to making one!!
Only one word can describe this type of work which is "Perfect".
Oi!Tudo Bem? Hey I've been to porto alegre! I lived in the Blue Tree Millenium Towers! Nice artwork by the way!
This is excellent, thank you.
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 working for you? Grow up, be a professional and figure it out!
I would say this is completly Amazing!
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 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.
nice tutorial...
thank u
Very nice...
Nice art!
Hi!
Firstly, I'd like to say that I am so happy that I found this site! The tuts are tops, as 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!
Fantastic tutorial. Much appreciated!
Heres a link with a bunch of free floral stuff:
http://www.blog.spoongraphics.co.uk/freebies/ornate-floral-swirly-and-cu...
How can I get the vector without paying?
Because I don't have money...
Or paypal/Visa and what not...
Can anyone please give me it?...
Thanks!
Great tut! Used it to make a image of an imaginary index-page in a homepage contest.
Heres my outcome
http://i34.tinypic.com/358uxbt.jpg
Hi, I really like the end outcome but do you have any direct link to where I can download the vector for free?...
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^
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
awsome this tutorial,I used right now,thanks
Wow, I love this effect. Thanks a lot for this tutorial!
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.
when i paste they appear in a new layer, thus retaining their original colour.
help is appreciated
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.
Well that's one way to do it.
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.
Fantastic Tutorial... I used it to create a wallpaper for my ad agency!
Check it there - www.bluespropaganda.com
Many thanks!!!
awesome!! xD
Though i cant download the psd file :(
Please reupload it
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 freebie to this
Awesome tut, really enjoyed making it and the result is great.
Thx..!
Will buy you a coffee soon ;)
awsome Tutorial
Very nice tutorial! very cool result! thanks for sharing.
love this tutorial
keep it up!!!
nice tutorial and nice site,.,.,.
can you share your vectors,.,.=)
thankz,...
Pure awesomeness! Here's what i did for my girl...
What is the font for the word "abduzeedo" please ?
Thanks for this great tutorial.
OMG!!!! Very nice tuto!!! It was exactly what I wanted!
That is really nifty. I wonder if that would work with my site title?
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!
Great one ! keep them coming!
Great Tutorial! Thanks!
Awsome tutorial, abducted for sure :P :D Keep up the good tutorials and updates!
___________________________________________________________________________
www.Silver-Solutions.co.uk - Award Winning Portfolio and Blog of Web Developer Anthony Woods
Simply Awesome. I can't wait to try this out!
Unbelieveable :D Great!
Wow! It's been a long time since I wonder how to do that!!!
Really cool!!
Thank you, Fabio. This was fun and I LOVED the result.
http://img.photobucket.com/albums/0903/ressamac/2008/desbytreecolors3cop...
nice tuts fab :)
Nice tutorial.
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.
Really stunning stuff Fabio.. mine ain't pretty bad either. keep it up ;)
http://www.flickr.com/photos/bogdinamita/2605666456/
Works great, thanks.
This is a great tutorial!!! Love the final result
Heres my outcome.. http://showcasegfx.com/index.php?showtopic=49
The texture really finishes it off. Nice! :)
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. :/
If not, how do you keep the gradient over both layers?
Please assist.
Other than that, it is a beautiful work.
Thanks,
Seth
Certainly a nice tutorial, I'll keep this one in mind :)
very nice tutorial..
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!
____________________
Learn it, pass it on.
nice..:)
very good tutorial..
Great !
cool tutorial :)
Post new comment