Design a Super Sleek Text Effect with Water Drop Texture

Posted on May 26th, 2009 under Text Effects

Download testking 646-204 products with testking 70-649 and testking 1Y0-A17 to successfully pass your exam.

In this tutorial, I will show you the steps I took to create the Super Sleek, eye-catching text effect with Water Drop Texture. This effect is simple but effective, and would be suitable for any water/rainy/ocean themed designs you’re creating.

Along the way, we will be using Photoshop techniques such as make selections, layer blending effects, image adjustment tools and a bit of masking. This is a beginner level tutorial and the steps are really easy to follow, have a try!

Here is a preview of the final effect: (click to enlarge)

Alternative Version: (click to enlarge)

Ok let’s get started!

To Complete this tutorial, you will need the following stock:

Font

Water Drop Texture – By eRiQ

Step 1

Firstly we can prepare some nice background for us to work on. Create a new document sized 1920 * 1080px with white colour background. On the background layer, use the Gradient Tool (G) to fill it with the followings:

1 grad1 500x279 Design a Super Sleek Text Effect with Water Drop Texture

Duplicate this background layer once, hit Ctrl + T and resize the duplicated layer as shown below:

2 resize 499x281 Design a Super Sleek Text Effect with Water Drop Texture

In between the duplicated layer and the background layer, create a new layer call “Light bottom” and grab a big soft round brush with white colour (I chose 1600px, 0% hardness, 55% opacity), do a single-click on this newly-created layer on the position shown below:

3 light 499x316 Design a Super Sleek Text Effect with Water Drop Texture

Then on top of all previous layers, create a new layer called “light top” and use the same brushset for the “light bottom” layer, do a single-click to the following position as shown below:

1 light 2 500x320 Design a Super Sleek Text Effect with Water Drop Texture

You will have the following effect:

1 effect2 500x278 Design a Super Sleek Text Effect with Water Drop Texture

Step 2

Use the font we just downloaded, type some texts onto the document, resize (Ctrl + T) and position it in the centre of the canvas:

2 text position 500x280 Design a Super Sleek Text Effect with Water Drop Texture

On the text layer, apply the following layer blending options:

Drop Shadow

2 drop sha 500x350 Design a Super Sleek Text Effect with Water Drop Texture

Outer Glow

2 out glow 500x350 Design a Super Sleek Text Effect with Water Drop Texture

Gradient Overlay

2 grad overlay 500x350 Design a Super Sleek Text Effect with Water Drop Texture

And you will have the following effect so far:

2 effect3 500x297 Design a Super Sleek Text Effect with Water Drop Texture

Step 3

Load the water drop texture into Photoshop. Go back to our text document and load the selection of the text layer by using the following method:

1. Move your mouse over the thumbnail image of the text layer in the layer pallette: (You will notice your mouse cursor change into a hand)

3 mouse over Design a Super Sleek Text Effect with Water Drop Texture

2. Hold down the Ctrl key (the cursor will change into a hand + rectangular marquee) and left-click the thumbnail image of the text layer. You will see now the text layer is selected:

3 select 499x234 Design a Super Sleek Text Effect with Water Drop Texture

Once the text layer is selected, grab the Rectangular Marquee Tool (M), move your mouse over the selection until you see the cursor changes into the following shape:

3 rect tool Design a Super Sleek Text Effect with Water Drop Texture

Left-click and hold, drag the selection over the water drop texture:

3 drag 500x239 Design a Super Sleek Text Effect with Water Drop Texture

Hit Ctrl + Alt + R and bring up the refine edge tool, apply the following settings:

3 refine edge Design a Super Sleek Text Effect with Water Drop Texture

Press Ctrl + C to copy the selected portion from the water drop texture, go back to our text document and Ctrl + V to paste the texture on top of the text layer:

(Important: please maintain this selection on the water drop image, we will use it again in the next step)

3 effect 12 500x213 Design a Super Sleek Text Effect with Water Drop Texture

Name this layer as “water drop texture 1″ and change its blending mode to “Overlay”, you will have the following effect:

3 effect4 500x209 Design a Super Sleek Text Effect with Water Drop Texture

Step 4

To add a bit variety for the water drops, simply go back to the water drop texture image, move the selection to a different portion:

4 move 500x232 Design a Super Sleek Text Effect with Water Drop Texture

Again we copy and paste the selection back to our text document, name the newly-created layer as “water drop texture 2″, change the blending mode to “overlay”.

You will have the following effect:

4 effect 3 500x202 Design a Super Sleek Text Effect with Water Drop Texture

Optional: you can add more water drops to the text by repeating the above steps.

Here is what I have after adding another two layers of water drop textures:

4 effect 4 500x179 Design a Super Sleek Text Effect with Water Drop Texture

Step 5

To make the actual text stand out a bit more, simply duplicate the text layer once and drag the duplicated layer upon the top. Reduce the opacity of this duplicated text layer to around 70%.

You will have the following effect:

5 effect4 499x232 Design a Super Sleek Text Effect with Water Drop Texture

Add a new Levels adjustment layer by going to Layer > New adjustment Layer > Levels and apply the following settings:

5 curves1 Design a Super Sleek Text Effect with Water Drop Texture

Add the following mask to the Levels adjustment layer:

5 mask 500x280 Design a Super Sleek Text Effect with Water Drop Texture

And you will have the this final effect:

5 effect 24 500x256 Design a Super Sleek Text Effect with Water Drop Texture

Ok that’s it for this tutorial! You can of course add some of your own texture or filter effect and see what the end results are! Remember to always keep your own creativity!

Here is my final image for this tutorial: (I simply black and white the image and add some of my own colours) – Click to enlarge:

Hope you enjoy this tutorial, drop me a comment if you have any question, I will try my best to help you out.

Cheers and have a nice day!

Download <a href=”http://www.testking.com/646-204.htm”>testking 646-204</a> products with <a href=”http://www.testking.com/70-649.htm”>testking 70-649</a> and <a href=”http://www.testking.com/1Y0-A17.htm”>testking 1Y0-A17</a> to successfully pass your exam.

Fresh Posts from PSD Vault

Imagination Unleashed: Best of PSD Vault DeviantART Group – Vol. 23

Easily Apply Texture with Clipping Mask to Produce Unique Text Effect in Photoshop

Unique and Curious Photoshop Tutorial Showcase – January 2012

Creativity Fine-Tuning: Best of PSD Vault Flickr Group – Vol. 54

Design Abstract Surreal Text Effect with Metal Texture in Photoshop

VIP Exclusive Tutorial – Create Advanced Photo Manipulative Artwork via Grunge Textures and Colour Effect

http://www.joyoge.com/ joyoge designers’ bookmark

looks really nice, I like this text effect. thanks..
Roger

Awesome! Abduzeedo has changed layout! Oh, wait….
Giggss

OMG looks really good, but I didn’t like the gradient overlay ;)
http://www.devlindonnelly.com Devlin

Very cool effect. I like the trick in step one to make a slick web 2.0 background in a very simple way. Thanks!
http://freelancercrowd.com/community/partnership/ FreelancerCrowd

Looks cool, atrough a bit strange when it’s just around the text
http://www.pricebonus.com/ PB

looks really nice, I like this text effect. thanks..
James

@FreelancerCrowd: yeah it’s a bit empty on the outside. My initial though is to make a beginner level tut without too many steps, so I just concentrate on the text surroundings.
James

@Devlin: thank you! glad you find it useful!
James

@Giggss: yeah I show the gradient overlay purely for tutorial purpose, you can of course skip this step :)
Artiom

WoooW! amazing! thanks =D =D =D ill try do it right now
DEAR

hey Guy! It’s wonderful and excellent tutorial. I really love it. Thank you so much. but I have some problem on step5. that I don’t know How can I go……. Add the following mask to the Levels adjustment layer.
Thank you!!
http://www.psaddict.com psaddict

look great.

Added to http://www.psaddict.com
http://10steps.sg Johnson Koh

Interesting effect. Great work!
shravani

very good
excellent
thank u
James

@DEAR: with step 5, I basically use a big soft brush (0% hardness) and did a single click on the centre of the layer mask.

Hope this helps :)
Kyle

hey, so I’m having trouble with like the last couple steps, i don’t understand the levels and then the layer mask and really don’t understand how you added colors to the water and made it white all the way around could you please help me
http://www.mykingdome.net amber

great tutorial i’m sure you’ve heard that a thousand times thank you for the detailed instructions. always love it when the colors used are specified
http://speckyboy.com/2009/06/22/29-cool-and-creative-text-effects-photoshop-tutorials/ 29 Cool and Creative Text Effects Photoshop Tutorials : Speckyboy Design Magazine

[...] Sleek Text Effect with Water Drop Texture [...]
kk4527

good
http://www.3rbfilez.com 3rbfilez.com

this is wonderful tutorial .. i read it 3 times and get a fantastic results and sure i put a
copy of this lesson on my site here

http//www.3rbfilez.com
http://m30nkz.blogspot.com gamul

wuah. ..
good tutorial you also, you would like to link tuker with me and become a partner comment?
http://www.faqpal.com/story/2798 You are now listed on FAQPAL

Design a Super Sleek Text Effect with Water Drop Texture…

In this tutorial, I will show you the steps I took to create the Super Sleek, eye-catching text effect with Water Drop Texture….
http://www.faqpal.com/blog/2009/07/09/the-webs-top-photoshop-tutorials/ The Webs Top Photoshop Tutorials | FAQPAL Blog

[...] #6 – Design a Super Sleek Text Effect with Water Drop Texture [...]
lucas

looks awesom!!

how did u get that final effect with the white background and colors???? i tryed but i have no idea
http://www.graphicmania.net/wonderful-photoshop-text-effects-tutorials/ Wonderful Photoshop Text Effects Tutorials | Flash, Design, Vector, Photoshop, Adobe Tutorials | GraphicMania.net

[...] Design a Super Sleek Text Effect with Water Drop Texture [...]
http://www.webdesignbooth.com/40-really-useful-photoshop-text-effect-tutorials/ 40 Really Useful Photoshop Text Effect Tutorials

[...] 9. Super Sleek Text Effect with Water Drop Texture [...]
http://urschools.com/?p=8 UrSchools.com » Blog Archive » Cracked Text Effect

[...] the selection of the text layer (if you’re not sure how to do so, please take a look at Step 3 of my previous post) and create a new layer called “crack texture”. While maintaining the selection, load the [...]
Dillon

I love the tutorial, but couldn’t figure out the last step you added with the colors. Could you help me out?

- Dillon
http://fallenheroine.net Helena

Very smart! Love it, thank you!
http://www.noupe.com/tutorial/40-new-high-quality-adobe-photoshop-tutorials.html 40 (NEW) High Quality Adobe Photoshop Tutorials | Noupe

[...] Design a Super Sleek Text Effect with Water Drop Texture [...]
http://cioon.com/webmaster/2009/08/40-new-high-quality-adobe-photoshop-tutorials/ 40 (NEW) High Quality Adobe Photoshop Tutorials | Webmaster Tips

[...] Design a Super Sleek Text Effect with Water Drop Texture [...]
http://www.neurosoftware.ro/programming-blog/blogposter/web-resources/40-new-high-quality-adobe-photoshop-tutorials/ 40 (NEW) High Quality Adobe Photoshop Tutorials – Programming Blog

[...] Design a Super Sleek Text Effect with Water Drop Texture [...]
http://album.amb.com.tw/2009/08/08/40-new-high-quality-adobe-photoshop-tutorials/ AMB Album » 40 (NEW) High Quality Adobe Photoshop Tutorials

[...] Design a Super Sleek Text Effect with Water Drop Texture [...]
http://www.yabibo.com/?p=13 40 (NEW) High Quality Adobe Photoshop Tutorials | YABIBO.COM – YOUR WEB WORLD

[...] Design a Super Sleek Text Effect with Water Drop Texture [...]
http://www.kaplang.com Kaplang

really cool effects, I love the colourful one :)
http://siteniziyapiyoruz.com yarenay

I could not do. I need to work hard
http://blog.4dpixelworld.com/flash-flex-air/40-new-high-quality-adobe-photoshop-tutorials 40 (NEW) High Quality Adobe Photoshop Tutorials | Web Design GroundBreak

[...] Design a Super Sleek Text Effect with Water Drop Texture [...]
http://www.surrealisitcsharks.wordpress.com 2hands10fingers

Love this tutorial.
http://huibit05.com/design/textures/50-amazing-photoshop-text-effects-tutorial/ 50 Amazing Photoshop Text Effects Tutorial | huibit05.com

[...] [...]
http://www.friendskonnection.com/dblog/art/design-a-cracked-text-effect-in-photoshop/ Design A Cracked Text Effect In Photoshop – Design Blog-FriendsKonnection

[...] the selection of the text layer (if you’re not sure how to do so, please take a look at Step 3 of my previous post) and create a new layer called “crack texture”. While maintaining the selection, load the [...]
http://www.webselecta.com/?p=380 Text design inspirations + photoshop tutorial | Webselecta

[...] Link al tutorial | psdvault.com [...]
http://www.downrex.com/tutorials/photoshop/40-new-high-quality-adobe-photoshop-tutorials/ 40 (NEW) High Quality Adobe Photoshop Tutorials | Downrex

[...] Design a Super Sleek Text Effect with Water Drop Texture [...]
http://www.chatgul.com/photoshop/40-mukemmel-photoshop-dersi-dijital-boyama-carpici-efektler-ve-dahasi.html 40 mükemmel photoshop dersi (dijital boyama, çarpıcı efektler ve dahası) | Chatgul.Com / Klavyeden Dostluga acilan kapi

[...] – su damlası metin efekti su damlası dokusu ile [...]
http://www.realmusti.com/blog/40-adet-kaliteli-photoshop-dersi/ ReaLMusti’nin Günlükleri » Blog Arşivi » 40 Adet Kaliteli Photoshop Dersi

[...] 9 – su damlası metin efekti [...]
http://www.iamafreelancer.net Egypt Freelancer and web design in egypt

cool
http://www.quadhirababil.webs.com jailani

cool cool effect
http://www.ibuylogos.com/awesome-cracked-text-effect-in-photoshop ibuylogos.com | Cracked Text Effect in Photoshop | ibuylogos.com

[...] the selection of the text layer (if you’re not sure how to do so, please take a look at Step 3 of my previous post) and create a new layer called “crack texture”. While maintaining the selection, load the [...]
http://hobievi.wordpress.com/2010/02/02/40-adet-kaliteli-photoshop-dersi/ 40 Adet Kaliteli Photoshop Dersi « Hobi Evi Günlükleri

[...] 9 – su damlası metin efekti [...]
Carl

Very cool effect, nice work. How did you add the color?
http://www.ubervu.com/conversations/www.psdvault.com/text-effects/design-a-super-sleek-text-effect-with-water-drop-texture/ uberVU – social comments

Social comments and analytics for this post…

This post was mentioned on Twitter by area1: RT @psdvault: New Photoshop Tut – Design a Super Sleek Text Effect with Water Drop Texture – http://tinyurl.com/qakhqy, have a try :)…
http://selvakumaran2.webs.com selvakumaran

fentastic .i like to design…………..
http://YOUTUBE.COM/user/superdrifter101 WAJID ABBASI

step 3 is tooo Hard For beginar
http://www.vbulletin-style.net/?p=39 Vbulletin-Style.Net Destek Ve Dersler » Photoshop

[...] – su damlası metin efekti su damlası dokusu ile [...]
http://www.jackscript.com/80-best-photoshop-text-effects-tutorials-part-iii 80 Best Photoshop Text Effects Tutorials, Part III | #! Jack Script

[...] Super Sleek Text Effect with Water Drop Texture [...]
http://lnx.web-burning.it/2010/04/06/80-best-photoshop-text-effects-tutorials-part-iii/ 80 Best Photoshop Text Effects Tutorials, Part III Web Burning Blog

[...] Super Sleek Text Effect with Water Drop Texture [...]
http://smkn.xsrv.jp/blog/2010/04/2010%e5%b9%b444%ef%bd%9e410%e3%81%ae%e9%80%b1%e9%96%93%e3%83%96%e3%83%83%e3%82%af%e3%83%9e%e3%83%bc%e3%82%af/ ITキヲスク | 2010年4/4～4/10の週間ブックマーク

[...] Design a Super Sleek Text Effect with Water Drop Texture | PSD Vault – Extra Unique Adobe Phot… [...]
mar

hey there,

how do you add the multi colors on the last part?

thanks!
http://Website Sam

Can this be downloaded somewhere? :)
http://www.fotoclipping.com shabnam

Looks so real!!!!!