Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

Posted on January 25th, 2010 under Text Effects

If want to learn the art of web designing then subscribe for 642-515 online training and download the latest 642-873 design tutorials and self paced JN0-100 guides for step by step learning.

In this tutorial, I will show you the steps I took to create this really cool-looking, Splashing Ocean Text Effect with Lightning Background in Photoshop. Have a try :)

Along the way, we will be using lots of textures, image adjustments, blending options and various filters. The purpose is to show you how you can use multiple texture images and combine them to create dramatic effect.

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

PSD File Download

You can download the PSD File for this tutorial via the VIP Members Area for only $6.95/Month (or less)! You will not only get this PSD File, but also 70+ other PSD Files + Extra Goodies + Exclusive Photoshop tutorial there. Signup now and get exclusive :) Find out more about the VIP Members Areas

To complete this tutorial, you will need to the follwing stocks:

Ok let’s get started!

Step 1

Create a new document sized 1280px * 800px, fill the background layer with black colour and use font we downloaded (in fact you don’t have to use that font, any bold, thick font would be in this occasion) and type some text onto the canvas as shown below: (lower half of the canvas)

1 type 500x308 Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

Apply the following layer blending options to this text layer:

Drop shadow

1 drop sha 500x350 Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

Outer Glow

1 outer glow 500x350 Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

Bevel and Emboss

1 bevel 500x350 Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

Gradient Overlay

1 grad 500x350 Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

Stroke

1 stro 500x350 Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

and you will have the following effect:

1 effect1 500x185 Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

Step 2

Now we want to add a bit more lighting contrast to the text so that later on when we add the waves and splashes, the effect would mix it with the surrounding environment.

So load the selection of the text layer by clicking on the thumbnail of the text layer on the layer pallette, as shown below:

2 load 500x193 Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

Craete a new layar on top of the text layer, go to Filter > Rander > Cloud and render some cloud inside it (set foreground colour as white, background colour as black before you render), set the blending mode of this new cloud layer as “Hard Light”.

You will have the following effect:

2 cloud 500x211 Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

Create another new layer on top of the cloud layer, name it as “fibre texture”, maintain the selection of the text layer and fill the selection with black colour on this “fibre texture” layer.

Go to Filter > Render > Fibre and apply the following settings:

2 fibre Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

Change the blending mode of this fibre layer to “Hard Light”, and reduce the opacity of around 25%, you will have the following effect:

2 effect2 499x154 Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

Step 3

Load the Wave 1 stock image into Photoshop, use the lasso tool with a 20px – 30 feature, make a selection to the area shown below:

3 copy 500x264 Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

Copy and paste the selection onto our document, name this new layer as “wave 1″ and put it below the original text layer and just above the background layer. Desaturate this layer, resize it and erase (using a soft round brush) the outer portion of the wave, as shown below:

3 erase 500x192 Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

and you should have the following effect:

3 paste 499x204 Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

Duplicate this “wave 1″ layer once and drag it on top of all previous layers, reduce the opacity to around 85%, you will have the following effect:

3 dup 500x227 Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

You will see now the bottom of the texts are now submerged under the water, and this make the effect look more realistic.

Step 4

No we’re on the splashing effect. Load the Wave 2 stock image into Photoshop, use the lasso tool again with a 25px feather, make a selection as shown below:

4 copy1 500x315 Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

Copy and paste the selection onto our canvas, name this new layer as “wave 2″ and put it on top of all previous layers, desaturate the layer and use a big soft brush to erase the edges off. Then change the layer blending mode of this layer to “hard light”, and reduce the opacity to around 60%.

The effect you aim to achieve is shown below:

4 erase desa 500x154 Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

Make two duplicates of the “wave 2″ layer, resize it to a small scale, flip both of them vertically and drag them to the positions as shown below:

4 dup 499x208 Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

As you can see this adds a bit more varirations to the wave and make the effect look more interesting:

4 overlay 500x193 Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

Nwe we add the ocean portion on our document and blending it in with our text. Go back to the “Wave 1″ stock image, use the rectangular marquee tool to selection and portion of the ocean as shown below:

5 copy1 500x195 Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

Copy and paste this selection onto our document, name this layer as “ocean” and put it below the original text layer, but on top of the “wave 1″ layer: (use the free transform tool to resize it a bit, as shown below)

5 paste 500x265 Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

Reduce the layer opacity of this “ocean” layer to around 90%.

Step 5

Now we’re on to the cloud bit. Go back to the “wave 1″ texture image and selection a portion of the cloud as shown below:

5 cloud copy 500x221 Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

Copy and paste the selection on to our document, name the new layer as “cloud”, desaturate it and position the layer on top centre of the canvas as shown:

5 cloud paste 500x307 Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

Use a big soft brush to erase the edges of this cloud layer so it blends in with the background:

5 cloud erase 500x161 Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

Add the following two adjustment layers on top of the cloud layer, make sure to tick “use previous layer as clipping mask” option:

Levels

5 levels1 Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

Curves

5 cloud curves Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

and you will have the following effect for the cloud:

5 effect cloud 500x130 Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

and this overall effect for the image:

5 overall effect 500x309 Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

Step 6

Now we can tackle the lightning part of the text effect. Load the Lightning stock image into Photoshop, Ctrl + A to select the entire image and copy paste it onto our document. Name the new layer as “Lightning” and put it just below the “cloud” layer.

Desaturate this lightning layer, resize and position the lightning texture as shown below:

6 paste lightning 500x335 Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

Duplicate this lightning layer a few times, resize them and scatter them around the text, so to make the overall effect look more dramatic:

6 dup 500x300 Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

Add the following Curves adjustment layer on top of all previous layers:

6 curves Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

You will have the following effect:

6 effect 500x302 Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

Now we can paint some colour over the it: to do this, basically create a new layer and set its blending mode as “soft light”, grab the colour of your choice and paint over the layer with a big soft brush:

As you can see, I focus on the bottom of the text (with light blue), the lightning (with red), and the cloud (with dark brown). I leave the choice of the colour to you, experiment with different schemes and you may find the feel will be totally different.

Step 7

For final touch-ups, I decided to do two things:

Add lights coming down from the sky
Add text reflection on ocean water
Add radial blur to the lightning bit

Sounds interesting? The steps are quite simple in fact.

So we flatten the image, duplcate the background layer three times. On the first duplicated layer, desaturate the whole layer, apply the following radial blur settings to it:

7 ZOOM Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

Change the layer blending mode to “Screen”, drop the layer opacity to around 60%, you will have the following effect:

7 effect 1 500x307 Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

On the second duplicated layer, filp the layer vertically and resize it to a very thin level, change the blending mode to “Screen” and drop its opacity to 40%:

7 flip 500x310 Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

Erase the edges with a soft brush, you will have the following effect:

7 ref 499x276 Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

On the third duplicated layer, apply the following Radial Blur settings to it:

7 spin blur Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

Drag the layer a bit lower, and you will have the following effect:

7 effect blur 500x305 Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

Apply the following layer mask on this third duplcated layer:

7 mask 500x302 Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

and you will have the following effect:

7 erase 500x302 Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop

OK that’s about it! You can further adjust the contrast, lighting and perhaps apply more textures onto it. Choices are yours :)

Here is my final effect for this tutorial: (click to enlarge)

Hope you enjoy this tutorial! Drop me a comment if you have any question. Cheers and have a great day!

Fresh Posts from PSD Vault

20 Unique and Beautiful Typography Artworks to Boost Your Creativity

VIP Exclusive Photoshop Tutorial – Create “Moon Dance” Photo Manipulation in Photoshop

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

Create Abstract Layered Text with Decorative Lighting Effect in Photoshop

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

Design a Unique Wooden Face with Fiery Eye and Tear in Photoshop

http://www.ubervu.com/conversations/www.psdvault.com/text-effects/design-an-awesome-splashing-ocean-text-effect-with-lightning-background-in-photoshop/ uberVU – social comments

Social comments and analytics for this post…

This post was mentioned on Twitter by psdvault: Design an Awesome #Splashing #Ocean #Text #Effect with #Lightning Background in #Photoshop http://goo.gl/fb/fP5Z...
http://thepirateway.net Jocuri Online

thanks
http://topsy.com/tb/bit.ly/7LW34A Tweets that mention Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop | PSD Vault – Extra Unique Adobe Photoshop Tutorial — Topsy.com

[...] This post was mentioned on Twitter by Blueprint DesignBlog, James Qu, Allen Zapien , apex, Creativity Flows and others. Creativity Flows said: Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop http://bit.ly/8uNvz7 [...]
Chelsea

COOL! Normally I just pass by the text tuts, but this looks amazing and I’m really excited to try it out! Thanks!
iSpawn

Cool man. In my opinion it should have stopped at step 5. The lightning ruins it for me.
http://richworks.in Richie

I’ve been following most of your tutorials until now. Amazing though it is, they are always accompanied with lightning, storms and all sorts of breath taking distortion effects.

I must say, James… you have created a signature style of photoshop tutorials. Great work!
James Qu

@everyone: thank you so much guys, I’m really happy that you like my tuts and the support!
N1m

very great tutorial m8!
THX again, cheers from Hungary
http://www.tripwiremagazine.com/2010/01/user-linkdesign-an-awesome-splashing-ocean-text-effect-with-lightning-background-in-photoshop.html tripwire magazine | tripwire magazine

[...] Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop [...]
Chelsea

Okay so I found this really cool text I like but I’ve a silly question…how do I get it into photoshop? Don’t laugh lol I’ve never done it before! I can load brushes just fine but I’ve no idea how to get text in there. I googled it but I can’t find anything…
Chelsea

Haha never mind I was phrasing it weird when I was looking…found it!
http://www.tripwiremagazine.com/2010/01/80-fresh-community-articles-for-web-designers-and-developers.html 80+ Fresh Community Articles for Web Designers and Developers | tripwire magazine

[...] Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop [...]
http://www.neurosoftware.ro/programming-blog/facebook-web-design/tutorial/80-fresh-community-articles-for-web-designers-and-developers/ 80+ Fresh Community Articles for Web Designers and Developers | Programming Blog

[...] Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop [...]
http://www.afiffattouh.com/web-design/80-fresh-community-articles-for-web-designers-and-developers 80+ Fresh Community Articles for Web Designers and Developers | Afif Fattouh – Web Specialist

[...] Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop [...]
Glenn

I followed the steps but it ended up looking completely different, and some of the things you say don’t make any sense. Or is not explained well.
http://www.vizstreamstudios.com Yvonne

very cool, stunning, look forward to more effects
http://www.worldmagonline.net Ambreen ali

wow! this is an extremly creative tutorial. I am going to try it out. thanks 4 sharing.
huseyin erdem

that is magic, thanks!!1
http://www.clippingimages.com Clipping Path

interesting stuff.. i gonna use these. thanks. :-)
Guest12121121

It’s bad for beginners “Desaturate this layer, resize it…” u should explain that steps, but it’s just my opinion.
http://yourtutorialsbox.com/?p=476 Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop | YourTutorialsBox.com

[...] Click on the picture or here to see the tutorial!!! 0 Comment [...]
http://www.babiforum.com/2010/03/10/40-extraordinary-photoshop-text-effects/ 40 Extraordinary Photoshop Text Effects Share My Live

[...] Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop A step by step tutorial on creating a really cool-looking, Splashing Ocean Text Effect with Lightning Background in Photoshop. [...]
http://wordpress-blog.co.cc/40-extraordinary-photoshop-text-effects/ 40 Extraordinary Photoshop Text Effects | Wordpress Blog

[...] Design an heady Splashing Ocean fraudulently dethrone hangdog Lightning antecedents encompassing Pho… A figurine at figurine colloquium almost creating a demonstrably cool-looking, Splashing Ocean fraudulently dethrone hangdog Lightning antecedents encompassing Photoshop. [...]
KrazaK

You apply a gradient overlay to the text, but it isn’t in your example? It makes the styled text look completely different to what your screenshotting…
http://www.creativosonline.org/blog/40-tremendos-tutoriales-de-modificacion-de-texto.html 40 tremendos tutoriales de modificación de texto | Recursos para Diseñadores Gráficos y Web | Creativos Online

[...] Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop A step by step tutorial on creating a really cool-looking, Splashing Ocean Text Effect with Lightning Background in Photoshop. [...]
http://www.webdevelopmentnews.net/article/141 40 Extraordinary Photoshop Text Effects « Web Development News

[...] Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop A step by step tutorial on creating a really cool-looking, Splashing Ocean Text Effect with Lightning Background in Photoshop. [...]
http://www.webdevelopmentnews.net/?p=401 40 Extraordinary Photoshop Text Effects | Web Development News

[...] Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop A step by step tutorial on creating a really cool-looking, Splashing Ocean Text Effect with Lightning Background in Photoshop. [...]
Scrax

Like most of your tutorial: Inconclusive, badly explained with equally bad examples. You skip to much. Get a different hobby, and close this website down. At least till you learn how to, exactly, make a “how-to”.
http://www.neurosoftware.ro/programming-blog/facebook-web-design/tutorial/40-extraordinary-photoshop-text-effects/ 40 Extraordinary Photoshop Text Effects – Programming Blog

[...] Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop A step by step tutorial on creating a really cool-looking, Splashing Ocean Text Effect with Lightning Background in Photoshop. [...]
http://www.neurosoftware.ro/programming-blog/facebook-web-design/tutorial/40-extraordinary-photoshop-text-effects-2/ tutorial – Programming Blog

[...] Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop A step by step tutorial on creating a really cool-looking, Splashing Ocean Text Effect with Lightning Background in Photoshop. [...]
EM

very great tutorial :)
Thank you ^_-
Gnoa

i agree whith beginers, coz it is too hard to know exactly what is going on, when u dont know how can you do any of effects, but pass this tutorial and take a easy one, dont wory, if u are inside this design world you will do it, but need a time and hard work.
http://www.webseorank.com/40-extraordinary-photoshop-text-effects.html 40 Extraordinary Photoshop Text Effects | Web SEO Rank

[...] Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop A step by step tutorial on creating a really cool-looking, Splashing Ocean Text Effect with Lightning Background in Photoshop. [...]
Younes

very great tutorial °_o
Thank you :D
http://www.photoshopwebsite.com/photoshop-tutorials/3dtutorialstypographytexteffects/30-fresh-text-effects-photoshop-tutorials-2010/ 30 Fresh Text Effects Photoshop tutorials 2010 – Photoshop Website – Tutorials,Brushes & more..

[...] 19.Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop [...]
Sh4nn0o

OMFG!! I Love This Effect Its Amazing.
Pantz

I’m stuck at one of the steps:

“Create another new layer on top of the cloud layer, name it as “fibre texture”, render>fiber, it says the area is empty and does not allow me to do it.
James Qu

@pantz: before you render the fibre, fill the layer with black color first. this will get rid of the error message. Make sure to change the blending mode to “hard light” afterwards.

hope this helps
Cassie

hey, dude

firstly, i’d like to say that this looks like an awesome effect, as does your other text effects and you’re really talented. But theres no point in posting a tutorial if you don’t explain stuff. I just went through all your tutorials trying to finish at least one effect, but i couldn’t understand what you were trying to say.Try to explain it to us as if we’re 3 yrs old. Anyway, i may sound like a dumbass but where the hell is the “use previous layer as clipping mask option” ?
phucnguyen

help me!
step 7, i can’t do background effects, not knowing how to select the background layer. if selected when the black start, it would not effect as step 7
vlad

help me!
step 7, i can’t do background effects, not knowing how to select the background layer. if selected when the black start, it would not effect as step 7
http://phonexsia.com/myblog/2010/04/22/40-extraordinary-photoshop-text-effects/ 40 Extraordinary Photoshop Text Effects » -!-PHONEXSIA-!-

[...] Design an Awesome Splashing Ocean Text Effect with Lightning Background in Photoshop A step by step tutorial on creating a really cool-looking, Splashing Ocean Text Effect with Lightning Background in Photoshop. [...]
http://www.photoshoproadmap.com/Photoshop-blog/2010/04/26/20-refreshing-splashing-effects-photoshop-tutorials-brushes-and-images/ 20 refreshing splashing effects Photoshop tutorials, brushes and images

[...] Awesome splashing ocean effect [...]
http://Website Tommy C

How do u do Step 4? My ocean is not match with the black background but yours is very nice.
http://Website Doglas

I’am using Photoshop for first time and did this tutorial without any problems (Just used google with some problems like “How to resize layer in Photoshop”)

Just a little detail.. When we step on Second Duplicated Background, compare image before and after “On the second duplicated layer, filp the layer vertically ..” – Its a bit diferent.. he made some effect that dont say on tutorial :P
http://Website wisemonk

Having problems when it comes to cutting and pasting the ocean setting the opacity only dims the ocean cut out how did you get it to blend into your image.
http://Website wisemonk

I cant get past the ocean part as it doesnt seem to work with me how did you blend the image into the background like that ?
http://www.maryjanez.net Rock Music

What an amazing idea!!
Thank you. thank you!!
http://Website guest

fyi, phrases like “just do this” or “basically” are horrible things to say in a tutorial. could have been worded / explained a lot better
http://Website jannex

HEY,…i can’t follow step 7
can you just tell me how do you that part
http://Website jannex

what’s the of
“use the previous layer as a clipping mask option”???
http://Website jannex

what’s the meaning of
“use the previous layer as a clipping mask option”???
http://Website TuGe yO

Could someone just share the PSD with me, because I only want this 1 logo and I couldn’t be bothered to buy a member ship for just 1 logo, if someone can, I would appreciate it so much! Thanks
http://Website Ahmed Elbasha

hey, if anyone want to share psd with me, I’m ready
;) ;) ;)

thank you for this awesome effect
http://Website Murray

Simply stunning.. Will be my gaming clans next wallpaper. Thank you.

Newbies – Just Google what you don’t know. Having said that, if you phrase your questions and comments the way you do here, you might not get the right answers.

This tut is near perfect, and is obviously meant for people with some basic skills. Why, as a begginer, do you think you can create stuff like this right away? Start with the basics and practice. Has taken me 3 years so far, and I still sometimes need tuts to make this kind of thing.
http://Website hammad

i have tried and it is looking good
[IMG]http://i54.tinypic.com/29bo9d2.jpg[/IMG]
Guest

that’s is an awful tutorial.. Try to be more specific when explaining things. Provide suggestions to make the blending method easier. Buddy below says you need years of experience, but a tutorial is supposed to help make it easier. The steps aren’t clear enough.