Members Area Tutorial: Create the Surreal Photo Manipulation ‘Twisting Water’
Members Area Tutorial: Design a Clean, Engaging Church Website
Make Your Photos More Intense in 12 Easy StepsHave every post delivered to your inbox and get access to hundreds of useful design freebies.
PSDFan Extra
User Requested Tutorial
If you remember a few weeks ago I ran a User Poll to see what kinds of basic tutorials you guys wanted to see. Basic text/typography tutorials were overwhelmingly the most popular request.
This tutorial teaches you how to create a super professional text effect, and carefully walks you through each step in great detail. This tutorial is perfect for beginners, and also teaches an effect that even professionals can utilize.
Final Image
This is the final image that we will be creating in this tutorial.
Step 1
Open up new document sized 1400 px by 1000 px. Create a new layer and fill it with black.
Step 2
Grab the text tool and drag the box out to fit your document.
Choose a font (here I’m using Arial) and use the size 3pt. I used #323131 for the colour of the text.
Type in whatever you want and then copy and paste that word (remember there should be a space in between each word). After you’ve copied and pasted a few words, highlight those and copy and paste that block as it will be much quicker!
Make sure your text is running down the page neatly like so.
Step 3
With the text layer selected, go to Edit, Transform, Rotate and enter -25 degress here.
You will have black bits round the edges like mine so just grab the corners of the text layer and enlarge it. You might also have to add more words to your text layer if the words do not fill the page.
Step 4
Create a new text layer using the colour white and size 72pt. Write in your word(s) and rotate this layer -25 degress.
Step 5
Now go to the layer styles for this layer and set it as soft light.
Now your picture should look something like this.
(Picture – Zoomed Out)
(Picture – Zoomed In)
Step 6
Duplicate this layer and set the opacity as 45% to ‘liven’ up the text slightly. Make sure that the layer style stays as soft light.
Now go to Layer, New Fill Layer, Gradient. This box will then pop up. Click OK.
Now enter these settings. The bottom slider on the left is black and the one to the right is white.
Your picture should now look like this.
Step 7
Now go to the layer styles for your gradient layer and set this layer to soft light.
Thats the tutorial finished! I hope you’ve enjoyed it and learnt something useful from this.
Download Source File for this Tutorial
About the Author:
is a talented graphic designer from the UK. Feel free to check out his DeviantArt portfolio
81 Comments:
Related Posts
Your Design Work, But More Awesome:
Do you know the basic tools in Photoshop but feel that your work is still looking average? Join our creative community at FanExtra and get the direction you need to take your work to the next level.
Thanks again for this tutorial Simon, I really love the outcome
Hrmm, I could be wrong, and don’t want to burst your bubble but…
http://abduzeedo.com/reader-tutorial-typography-wallpaper-photoshop
Cheers,
Matt.
Hi Matt,
Thanks so much for bringing this to my attention. Of course, I’d never seen that Abduzeedo tutorial before, but I gotta say it puts me in a difficult position. Whilst the techniques used in this tutorial are actually quite different, I’ll allow that the outcome is VERY similar.
I’ve contacted the author asking for an explanation, and until I hear back I’ll leave the tutorial up as it does demonstrate some useful techniques. I’d like some feedback from my readers as to what they think I should do, and I’ll also drop Fabio from Abduzeedo a message about it.
Sorry for this post bothers anyone right now, and I’ll try and get things resolved asap. Again, I’d like to stress that this isn’t a complete copy, and that the end result was really reached by very different methods.
Thanks again Matt!
Hi Tom,
thanks for FINALLY showing a simple and effective way to create this kind of text. Oh and the Matt situation : I tried that tutorial and it did not work for me, where as this one did.
Very good!
bookmarked for next time!
Thanks so much Vickie
.
I don’t know, seems way too similar. The only real difference is the gradient.
Great Tutorial! I don’t think it’s a problem that it’s a little similar to fabios tut, I mean its a given that things are gonna be slightly similar in photoshop techniques.
Also thanks for your comment on my bubbles tut!
nice. sweet and simple.~
No Problems, not saying it’s not good (because it is!). Just ‘warning’ you in the event should anything happen! >.< I don’t think it will bother anyone lol.
Cheers,
Matt.
Thanks! This is really simple and sweet.
Thanks for the comments guys, and the opinions regarding this tutorial.
I’ve talked with the author and he hadn’t seen the Abduzeedo tutorial. To be honest a lot of Photoshop work is similar, especially with more basic typographical designs. The amount of 45 degrees retro text going around is crazy. I’m still waiting to hear back from Fabio, but hopefully he will understand that this isn’t a copy or anything.
Anyway, I’ll hopefully be coming up with my own typographical tutorial very soon!
Hi, my name is Ruan and I’m from Brazil.
Only, Thanks for you Tutorial and Congratulation for the simple tutorial with very good effect.
Thanks a lot.
This is brilliant, I love this tutorial, makes it really easy to create your own cool typography!
Thanks!
Thanks guys, it’s great to see the typography tutorial request proving to be a hit
Hah! Awesome tut!
I don’t think you need to bother about similar tutorials till the method explained is different. I made something similar using Masks long back, but I guess this method is way better!
Talking about Typography, there’s another style that’s pretty popular, in which (random) Text fills a shape perfectly (By varying Font size). Any short cut to it?
Keep up the great work!
Thanks a lot RaSh! I’m glad you liked this method. I know the typography method you’re talking about, and tbh I can’t really think of an easy way to do it without cutting off some text. That said, I actually have a tutorial to create a really cool effect using these methods.
Wicked stuff…there’s another way also. Once you get the foreground and background text ready, rasterize them so they’re on separate layers. CtrlClick the bckgrnd text layer and then invert your selection. With your selection ready, use it to delete the pixels from the foreground text, you get a nice effect. You can now play around with it’s colours frm layers styles and so forth…
Thanks Rugrln, good tip there! There are definitely a few ways of achieving this technique, so I guess it’s up to personal preference.
By the way, I’ve heard back from Fabio, and he liked the tutorial, and saw no problem in keeping it up. Hope this clears matters up somewhat
At the end of the day, even if you had copied the idea, this tutorial was your own so no-one has the right to close it down.
I love the tutorial – such a simple way of creating what looks like a very advanced effect!
Thanks Adam, I’m really glad you enjoyed it, although it’s not my tutorial, it’s Simon’s
Isn’t something wrong in this tut?. If you set the PSDFAN layer to softlight it also screens up the black layer.
I think a mask or a selection is necessary here..
It’s worked fine for me. Perhaps you missed a previous step or something went wrong?
I agree
Thanks for this great little tutorial.
nice typograpy I like, thanks for the tut..
Thanks for this tutorial. Nice and easy to follow. Nice quick one too which I like.:)
[...] Visit Source. [...]
Again, I’d created a similar design without reading either tutorial but with a different method – it’s a pretty basic and standard thing to do, so no need to worry. Nice tut, though
It’s written well and easy to follow.
Easy tutorial, awesome results.
Thanks!
very nice, a well done tut.
really great bit of photo retouching. I am going to recommend this to my students. Thanks for sharing.
Hey I just found this post the other day. I am actually the original author for the tutorial on abduzeedo. The original tutorial is hosted on my blog here http://creativevolition.com/blog/tutorials/typography-1-tutorial/
I am not really buying the fact that the person who did this tutorial never saw mine on abduzeedo. Although its a very simple idea there are just way too many similarities!
But hey… I appreciate what you guys are doing here and as long as it is helping out other designers I am totally cool with it.
simple and easy! tks guy!
THNX THNK U VERY MUCH
This is one of the best tutorials i have learnt thanks author:)
m in luv wd photoshop 
thank u so much PSDFAN this syt rocks
thanks for sharing tutorial. very professionally has been explained.
really like the result. Nice job, thank you
The font sizes are not right !!!
Thank you
what exactly is ‘typographic’ about this tutorial?
Type Tool in PS != Typography.
yeah there is another tutorial like this one. but who knows whats original… i like this one. this is a good beginner tutorial
this tutorial is a little easier. the previous tutorial that people mentioned was harder to me. i light using the soft light feature more than the cut and pasting features.
Wow. Very nice! This effect was simpler than I could have ever imagined.
My result – http://img19.imageshack.us/img19/5544/91967496.jpg
Thanks.
I’m using CS4 and for some reason when I try to use new text layer it keeps going back to the text layer before so like a beginner I am stuck at that spot. I have been trying for 2 Days now!
Thanx for the tuut it was very useful
What a rip off!!
http://abduzeedo.com/reader-tutorial-typography-wallpaper-photoshop
Thanks guys, it’s great to see the typography tutorial request proving to be a hit. Its very useful for designer to think more creative.
It’s really nice and so easy to create after seeing this tutorial
thanks for sharing it.
really beautiful typography techniques in this tutorial.
It’s Very Simple & Awesome !!
I Do It Look :
http://i46.tinypic.com/35ddvyw.png
Im using CS3 and cant get past step 5. The blend mode doesnt have the same effect at all?
Can anyone help?
Whats the line-spacing used on this for the smaller text?
This was great fun to do. I went my own way and thought to show you. I did link back to this tutorial. You wrote it well as it was so easy to follow along. Thank you.
Here is mine:
http://losingsarah.deviantart.com/art/Living-My-Crazy-Life-Uninhibit-154880277
Again, thank you for the awesome tutorial.
Great tutorial and I’ve tried and had a successful image at the end.Great Job!
http://th07.deviantart.net/fs70/300W/i/2010/092/f/d/i_see_life_by_zubbbois.jpg
this is mine, nice tutor…
chriss, u need to see it in small size.. and always adjust the fill and opacity
thanks 4 tutorial
i do it all thanks
grat tutirla super userfull…!!!
7 star…!!!! from chile…!!!
bytes…
hi friends,.
I love this out come.. when i do this steps in step 4 i have a problem, after making a new layer if i create a new text box, its selecting the long text, not creating a new text box. how do i create a new text layer?
what do I do if I am using adobe c3. Im stuck Help
what do I do if I am using adobe c3. Im stuck Help? any body help, help me please
Cho Xing
you are a moron. they are both by the same company idiot. How does a company rip itself off? Besides, while they look similar, they have different outcomes. Try doing both before you criticize
Thanks alot for a simple but awesome effect. Great tut!
Fantastic article, great advice, I will definitely been keeping track of this!
Hello,
I learning PS with Text Effect is the start point. The tut and text is so nice !
Thanks so much !
10x =D
I’ve done it right
thank you for tutorials
i am now taking interest in photoshop images effects and that art is quite nice and good for me, by the way pen tool is the difficult work to do in photoshop.
anyway thanks
This is awesome! I never cease to be amazed by what Photoshop can do
Great tutorial. Thanks for this.
very nice and informative tutorial thanks for sharing with us.
Great tutorial, especially for beginner like me. Thank you so much!
Incredible outcome! It’s obvious it isn’t a copy of Abduzeedo’s tutorial due to the steps that were followed. Love it! So SIMPLE!
Yes! Finally someone writes about Automotive.
It’s a great blog to visit because it’s like a learning experience and building the confidence up.
WOW, simple but cool
I found this awesome, keep coming guys
Really Awesome and the graphics are cool.
awww, man
thank you very much
awesome tutorial
TYPO. “Step 1: Open up new document sized 1400 px by 1000 px.”?? This is obviously a typo. What size should the new document be?