Super Cool Frilly Bits TypographyListThumbs
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
141 Comments
cool tutorial :)
Great !
nice..:)
very good 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.
very nice tutorial..
Certainly a nice tutorial, I'll keep this one in mind :)
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
The texture really finishes it off. Nice! :)
Heres my outcome.. http://showcasegfx.com/index.php?showtopic=49
This is a great tutorial!!! Love the final result
Works great, thanks.
Really stunning stuff Fabio.. mine ain't pretty bad either. keep it up ;)
http://www.flickr.com/photos/bogdinamita/2605666456/
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.
nice tuts fab :)
Thank you, Fabio. This was fun and I LOVED the result.
http://img.photobucket.com/albums/0903/ressamac/2008/desbytreecolors3cop...
Wow! It's been a long time since I wonder how to do that!!!
Really cool!!
Unbelieveable :D Great!
Simply Awesome. I can't wait to try this out!
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
Great Tutorial! Thanks!
Great one ! keep them coming!
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?
OMG!!!! Very nice tuto!!! It was exactly what I wanted!
What is the font for the word "abduzeedo" please ?
Thanks for this great tutorial.
Pure awesomeness! Here's what i did for my girl...
nice tutorial and nice site,.,.,.
can you share your vectors,.,.=)
thankz,...
love this tutorial
keep it up!!!
Very nice tutorial! very cool result! thanks for sharing.
awsome Tutorial
Awesome tut, really enjoyed making it and the result is great.
Thx..!
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 freebie to this
awesome!! xD
Though i cant download the psd file :(
Please reupload it
Fantastic Tutorial... I used it to create a wallpaper for my ad agency!
Check it there - www.bluespropaganda.com
Many 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.
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.
when i paste they appear in a new layer, thus retaining their original colour.
help is appreciated
Wow, I love this effect. Thanks a lot for this tutorial!
awsome this tutorial,I used right now,thanks
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
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^
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
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!
Heres a link with a bunch of free floral stuff:
http://www.blog.spoongraphics.co.uk/freebies/ornate-floral-swirly-and-cu...
Fantastic tutorial. Much appreciated!
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!
Nice art!
Very nice...
nice tutorial...
thank u
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.
I would say this is completly Amazing!
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!
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".
This is a beautiful logo!! Looking forward to making one!!
This is simply an amazing effect. I'm lovin' it 8)
Wow, nice tut ^^)
My outcome : http://i38.tinypic.com/2iasq5w.jpg
How do you put the vector in photoshop
how do you put the vector in photoshop
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.
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.....
:)
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
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)
hola tu diseño es increible, eres RESPETABLE
un gran saludo
dude how do u do the pencil thing.
TO MANY steps and not clear ... from step 3 till buttom .... but thanks anyway
THX for TUT ;D
Quite nice but a lit of bit unreadable.
Thank You very nice topic
could U help me.....
Juicy !
I get lost at step 3, I don't know how to use that vector into Photoshop?? Please Help?
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 obtain different outcomes. Thank you for the lesson in typography.
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! ^.^
Ufff, finally this is my result, i used the same autor's word: abduzeedo
Here the image is big:
http://img389.imageshack.us/img389/2435/699b5ce1fe620e52a7f4639af5.jpg
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 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!
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!
Good post.
Greetings from Russia!
Nice work ,great collection. Thanks for the share.
Tracked back to from here: http://www.presidiacreative.com/the-10-absolute-best-tutorials-of-2008/
Thank you very much for this tutorial! Don't know how past here my variant.
very nice tutorial ;) super
hello...
very interesting tutorial ..
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 the color either. Can you please help me?
Thanks so much!Ü
Si Scott *cough*
Featured here: http://www.presidiacreative.com/10-amazing-effects-from-abduzeedo/
here's my result:
http://picasaweb.google.com/gilad.rubin/Photoshop#5303304280551944002
Amazing tutorial, this is my outcome: http://firetongue8.deviantart.com/art/Inspire-wallpaper-95176146 it's got more views and favs than any of my other pieces on 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
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 instead of vectors and this appears to have worked.
:D
sohbet odalar?- sohbet
Revised STEP 3:
1. Rasterize your type layer after you have applied the Gradient Overlay effect.
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.
~nice entry! i have some questions, may i ask ?
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!
Correction to my previous post:
7. Right click the ornament layer and select "Merge Down". This should blend the layers properly together while keeping the gradient overlay.
is it possible to use brushes instead of vectors?
Hello!
This tutorial is wonderful! Thank you so much!
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.
Thank you once again for this fabulous tutorial!
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 !!
Nice Tutorial.. Cool..
Heres a link with a bunch of floral vectors http://dezignus.com/vector-floral-elements/
Hi All,
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
This was just what I was looking for. Thanks a mill.
Dude, it's great!
Very nice Tutorial. Thank you!
I will send my results of your Tutorial.
great tuts..helped me a lot..thanks a mill !!
my version :
http://www.flickr.com/photos/mitaumaru/3485463091/sizes/l/
Great tut !
Can we use brush instead of using every floral vector ? I think we can save time ^^ .
Tks so much !
cool. thanx a lot.
here is the mine =)
http://www.botanikbahce.net/botanik_bahce.jpg
Great tutorial, I liked a lot it's simplicity.
Hello,
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 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 cut out the ornaments i want with lasso?
This is a very nice tutorial, I will create my own logo with this, thank you!
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!!
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
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?
nice! I will sure try this.
AWESOME MAN! You sure inspired me to create some of my own there! Will surely upload A few of my creations lol
thanks again man that was amazing!
The link of the vector doesn't work anymore. Does someone know an otther link?
Nice tutorial. Im fascinated with this page. Greetings from Mexico
Uhmm, its not really working. How do you make the ornaments the same color as the letters?
And how do you to import them, is every ornament a new layer?
Thanks for answering!
nice work,
very nice work! love it :D
Very Nice!
very nice work! love it
Ahh morning guuuys!!
really nice, thanks :)
Another great tutorial, well written and very well done, thanks again for posting this!
Can some one save or send me the actual psd file.. I wah the font type and shapes
Perfect work. my archive add ;)
Thanks
I have a problem.
I looked around in internet and found some of floral vectors.
The thing is that im not that good in photoshop yet, so how can i add vectors into photoshop? Or i cant?
Since as far as i have heard i have to use somekind of illustrator or something, to add them.
If anybody knows a solution, feel free to write it down.
I wanna use the vector package but unfortunately, it has been lost for some reason...can you please restore it? Thank you
Awsome
loving the outcome :D nice tutorial
------------
-abney317
-My GFX Site: http://infinitystyle.com
Nice tutorial mate , took 2 hours but i came out with a good outcome >>>
http://img6.imageshack.us/i/finaljpegcompressedx.jpg
A bit OVER DONE as a technique, but still useful to have in your box of tricks, as clients often say, "can you make it look a little more feminine".
sohbet odalar?-sohbet
ThankS admin
sohbet odalar?-k?zlarla sohbet
sohbet odalar?-güzel sözler-güzel sözler
.) thankS admiiinnn
I'm really very useful to follow a long-time see this as a blog here Thank you for your valuable information.
thats awesome.... but... wats the font for adbduzeedo?
Some dissertation services are currently searching for your smashing information referring to this topic for the dissertation international completing.
USE ILLUSTRATOR FOR THE VECTORS, THEN CARRY THEM OVER TO PS.
Post new comment