121 Comments
Stylish Floral Typography
September 17, 2008This tutorial will teach you how to create a very appealing and slightly abstract text effect that looks like the text is made from plants and flowers; you really have to see it to know what I mean. We’ll be using a lot of floral brushes which look great and also learning a really useful technique for accurately hiding stuff behind other stuff.
Things You’ll Need
Introduction
Of all the tutorials I’ve written this is probably my favorite yet; it’s so simple yet looks so complicated and only takes about 10-15mins to get an awesome result. I got the idea from the second image here by Craig Ward. So basically I’ll be showing you how to achieve this effect really quickly in Photoshop. Hope you like it as much as I do!
Step 1
Create a new document with dimensions; 1200x800px then create a new layer and select the gradient tool, click the gradient preview in the main toolbar and choose the gradient that goes from black to white. In the main toolbar change the style to radial and drag from the top right corner to the bottom left to get something similar to the image below. Now just change the opacity of this layer to 15%.
Step 2
Select the text tool then click once in the middle of the document, first change the paragraph alignment to center then choose a bold sans-serif font, I used Helvetica but you could also use Arial Black. Now change the size to 150pt and type your message, it looks better if you use more than one line so just hit Return to go to the next line as you normally would. Go Window>Character to open the character adjustments, highlight your text then adjust the leading (vertical spacing) and tracking (horizontal spacing) to get your text spaced appropriately, I had to change the tracking to 100. Your image should now resemble the image shown below, note that it’s important that there is enough space between the letters to add the plants.
Step 3
First, in the layers panel, change the fill opacity to 0% then right click on the text layer and go to blending options and add a drop shadow using the settings shown below, I’ve also shown the result I got after applying it.
Step 4
The next few steps are the most important so make sure you follow them correctly as you’ll be repeating them a few times. First create a new layer (you may want to create a layer group to put all the plants in) then select the brush tool and select one from the floral pack you downloaded and click once to place it; try and get it looking like it stemming out of the text like in the image below.
Step 5
Go to the text layer and change the fill opacity to 10%, this is so we can see the text while we go through the next few steps; it makes it easier for this part but we’ll change it back later. Go back and select the floral layer.
Step 6
Ctrl+click on the text layer, note that the floral layer should still be selected.
Step 7
Select the polygonal lasso tool and in the main toolbar change the mode to intersect and make sure feather is set at 0px and anti-alias is checked. Now what intersect will do is to select only the parts contained within both of our selections, we’ve already made one selection (the text) so this means that no matter what we are not going to have a selection that extends outwith the text. We want it to look like the flowers weave in and out the letters so some parts have to be hidden behind the letters. Here we want the flower to go behind the bottom of the ‘D’ then through the hole in the middle so to do this you would draw a selection (indicated by the red line) with the polygonal lasso tool and that will make a selection of everything included within both the text and our selection, so only the parts where they overlap. The resultant selection is shown in the second image.
Step 8
Now to hide this part just hit Delete then Ctrl+D to deselect.
Step 9
Okay now repeat steps 6, 7 and 8 to hide some more of the flower, notice how I hid the flower behind part of the ‘N’.
Step 10
You should now be confident using this technique to hide the flowers behind parts of the letters so I’m just going to show a few images of what mine looked like at various stages of the process. You now need to use the same technique from step 4 to step 9 with some more flow brushes. You’ll see in the image below that I added three more flowers and made them weave in and out of the letters, I also put the fill opacity of the text layer back to 0% to show you how this looked but you can keep it at 10% for a little longer.
Step 11
I now added even more flowers and put in some of the smaller ones to balance out the image so none of them were looking too bare, again use the same techniques to hide parts of the flowers.
Step 12
The last step to finish off this image is to refine some of the details as you’ll notice that some of your flowers don’t look like they are stemming from the letters or some are a bit too sharp. Select the brush tool then go back to the basic brushes and choose a 2px hard round brush then create a new layer then paint in some extra details freehand. I’ve shown a before and after example and you’ll notice that I’ve rounded off some of the corners also.
Conclusion
There is a lot further you could go with this image like adding thorns to the text or even putting in some tree brushes but for the purpose of this tutorial I tried to keep it simple and I’ll just leave you to experiment now, Hope you learned something new, leave a comment and spread the word!
Similar Tutorials:
- Create Smoke Text
- Luminescent Lines
- Awesome Snowboard Poster
- Dance Photo Manipulation Part 2
- CD Cover Design
Save and Share this Post
We like people who share our posts! Del.Icio.Us - StumbleUpon - Float - Reddit
September 17th, 2008
Max | Design Shard:
looks pretty cool, nice one, thanks for putting it together
September 19th, 2008
pugongyingjin:
it looks really cool, but unfortunately the text is hard to read… =(
September 19th, 2008
Drupal Museum:
Cool effect but it is a bit hard to read.
September 19th, 2008
Dainis Graveris:
Idea is great just yeah, maybe You shouldn’t delete so much shadows and actual text.
September 20th, 2008
littlechet:
great tutorial!
September 26th, 2008
Alex:
I’m a newbie so I don’t know wich brush tool to use, and I can’t find any way to put in the flowerbrush to ps. Help me please?
October 22nd, 2008
lynlyn:
it’s so hard to download the brush..
=D
November 9th, 2008
ghawyy:
wow its my frst time i see that way its sample and easy to thank you so much i digg it too cos i love it so much thanks again :)
November 13th, 2008
sy:
look nice..but the cant read the text well
January 9th, 2009
Elizabeth Watkins:
hi
bhr1rhqn648ut76b
good luck
January 10th, 2009
Rufus Carson:
hi
bhr1rhqn648ut76b
good luck
February 5th, 2009
Lawrence77:
Hi Ross…
Some bugs…. :)
1. When i type my name in comment and press tab it directly take me to the username textbox!
2. There are lots of spam comments try to stop that by anyone of the method!
thanks..
Lawrence . J
March 9th, 2009
thomasms:
good effect, and goood tut.
cheers
April 8th, 2009
Copy Craft:
Wonderful TUT! Might need a little tweaking to make it a good type style for printing and you will loose much of the actual lettering but overall a great place to start.
April 11th, 2009
Kp:
This hit the spot. Very clean, I like it a lot.
April 17th, 2009
jexica27:
great effect.. unfortunately, i can’t do it.. :( i’m new to using photoshop
June 11th, 2009
yuanjy1984:
enjoy it! but it’s a bit hard to read~~
July 12th, 2009
MeggoSexxx:
vrotmnenogi
July 25th, 2009
KG:
Wondered if anyone could help.. when doing Step 7 there is no ‘intersect’ mode on my main tool bar. Is it hidden anywhere and is there a particular workspace setting I need to have set. Any light you could shed would be appreciated. Thanks
August 8th, 2009
juliana rumple:
used this wonderful tut here: http://rumple.deviantart.com/art/yey-132591422
January 13th, 2010
Birgit:
Thanks for this amazingly simple and beautiful tutorial! It was fun and I got this nice result: http://dsed365.wordpress.com/2010/01/13/0113/
There’s something going on with the tabindex on your input fields: I jump straight to the login in the sidebar if I use tab in the comments form!
August 18th, 2010
roneybalack:
Photoshop tutorial, from beginner to advanced. Including Photoshop text effect tutorials, photo manipulation tutorials, give you joomla templates,joomla extensions,wordPress theme,web templates,
if you think i make a spam please remove this comment.
You have good tutorials and i had post it on my website. http://download60s.com
September 10th, 2010
wholesale designer clothes:
It is my pleasure to read this page, I look forward to reading more.
October 28th, 2010
Electric Burner ::
garden sheds are really great specially during the summer, they provide adequate shade and a place to cool down~,;
November 14th, 2010
Bath Screens ·:
garden sheds can provide comfort specially in the hot summer months -’-
January 20th, 2011
forex:
Nice article; really I enjoyed reading. Thanks you for sharing such a wonderful information. very useful, indeed! :) keep up the good work!
January 22nd, 2011
Cgbaran:
Great tutorial thanks
March 4th, 2011
30 Second Smile:
Great info and I like to read this topic
April 4th, 2011
30 Second Smile:
Whoa I have always been a beginner when it comes to photoshop not any more. Thanks you so much!
April 19th, 2011
Seadoo:
yeah me i am learning the ropes still. photoshop looked so difficult but it’s been around 2 weeks and each day i learn something new.
April 19th, 2011
Laminate Flooring:
good article mate. do you know how to get rid of the white background from the photo to make it transparent?
May 12th, 2011
collagen supplements:
if you wish to remove the white background from the photo, just create a new layer in photoshop and make it transparent.
May 23rd, 2011
Dryer Repair Phoenix:
I used to be very happy http://www.saveonappliancerepair.net to seek out this internet-site.I wanted to thanks to your time for this excellent learn!! I undoubtedly enjoying every little bit of it and I’ve you bookmarked to take a look at new stuff you blog post.
May 31st, 2011
papi underwear:
I like the valuable information you provide in your articles. I’ll bookmark your weblog and check again here regularly. I’m quite certain I’ll learn many new stuff right here! Best of luck for the next!
June 16th, 2011
http://tutorialsfreephotoshop.com:
great awesome share thanks for it keep the good work
August 7th, 2011
elliptical vs treadmill:
you make it look so easy.. I’ll have to give it another go with these instructions.. thanks!
August 7th, 2011
plantars fasciitis surgery:
Thanks for the tutorial.. really looks cool at the finish!
August 7th, 2011
Robert Benwell:
Fantastic goods from you, man. I’ve understand your stuff previous to and you are just extremely wonderful. I really like what you have acquired here, certainly like what you are stating and the way in which you say it. You make it enjoyable and you still take care of to keep it wise. I cant wait to read far more from you. This is actually a terrific site.
August 14th, 2011
brothers sewing machine reviews:
Hey thanks for the very explicit tutorial.. Really awesome but I’m thinking you must have a lot of patience!
August 16th, 2011
restaurant lancaster pa:
I desire to use some of the content material on my weblog. Naturally I’ll give you a hyperlink in my internet blog. Thanks for sharing.
August 19th, 2011
hotel:
quite intriguing post
August 31st, 2011
salediaper:
Cool tutorial!
September 1st, 2011
MatchRate PLUS:
THis is perfect – I used some of these ideas on my website. Thank you!
September 1st, 2011
Confessions of a Guidette:
Can I do this with photoshop elements on a mac?
September 10th, 2011
langlang33:
Time and time once more I like to think about this problems. In fact it wasnt even a week ago that I was thinking about it. Frankly, what’s the answer though?
September 12th, 2011
Arlen:
Hiya. I discovered your weblog the use of yahoo. This can be a quite beautifully created post. I’ll probably be sure to save it and come back to study more of your valuable details. Thanks for the article. I’ll probably certainly come back.
September 13th, 2011
Abraham:
Just after examine a number of the blog posts on your website these day or two, and I truly like your personal style of writing a blog. I saved it to my favorites web site list and will also be looking at again shortly.
September 25th, 2011
Stanton Darsi:
Hi there are using WordPress for your blog platform? I’m new to the blog world but I’m trying to get started and create my own. Do you require any coding expertise to make your own blog? Any help would be really appreciated! Regards!
October 18th, 2011
Sad Poetry:
nice use of masks and layers. i also use masks and good layer hirarchy to make simple effects…
October 29th, 2011
google maps mobile:
I am not rattling great with English but I get hold this genuinely easygoing to read .
October 29th, 2011
smart phone:
I truly appreciate this post. I’ve been looking everywhere for this! Thank goodness I located it on Bing. You have made my day! Thx once more!
November 2nd, 2011
Credit Card Phone Swipe:
You did a great job job giving step by step instructions. Thanks!
November 4th, 2011
Islamic Art:
wow amazing and wonderful …..very nice tutorial thanks
November 23rd, 2011
Felicita Emal:
Excellent blog you have here. You’ll discover me looking at your stuff often. Bookmarked!
November 24th, 2011
Phone Swipe:
That’s extremely creative! I love the font.
November 25th, 2011
Alessandra Eccles:
I like the items you put in here. Very appropriate information. Consider yourself book marked.
January 5th, 2012
Why Motorists That Compare Car Breakdown Cover Are Better Off in the Long Term:
hello!,I like your writing so so much! share we communicate extra approximately your article on AOL? I need a specialist in this house to resolve my problem. May be that is you! Taking a look ahead to peer you.
January 30th, 2012
canada goose jakker billig:
I wish to show my thanks to this writer for bailing me out of this particular dilemma. As a result of checking through the the net and meeting ideas which are not productive, I thought my life was over. Living without the presence of approaches to the difficulties you’ve resolved by way of the guideline is a critical case, and the kind that would have in a negative way damaged my entire career if I hadn’t discovered your web page. Your own personal knowledge and kindness in maneuvering every aspect was very useful. I’m not sure what I would have done if I had not discovered such a solution like this. I’m able to now look forward to my future. Thanks very much for this skilled and result oriented guide. I will not be reluctant to recommend the blog to anyone who ought to have guide about this matter.
January 31st, 2012
NFL jerseys wholesale:
An interesting discussion is worth comment. I think that you should write more on this topic, it might not be a taboo subject but generally people are not enough to speak on such topics. To the next. CheersHello! I just would like to give a huge thumbs up for the great info you have here on this post. I will be coming back to your blog for more soon.
March 2nd, 2012
Milena:
Great and easy tutorial! Like it
March 15th, 2012
abercrombie paris:
I’ve been reading your web site for a while now and finally got the bravery to go ahead and give you a shout out from New Caney Tx! Just wanted to tell you keep up the great work!
March 26th, 2012
Marc By Marc Jacobs:
Hello.This post was extremely motivating, especially because I was searching for thoughts on this subject these day.
April 24th, 2012
River Song:
Whats Going down i am new to this, I stumbled upon this I have found It absolutely useful and it has helped me out loads. I am hoping to contribute & help different users like its helped me. Great job.
May 8th, 2012
Rohit Jain:
It looks very nice but its useless because you can’t even read it !