2 in 1 – Stunning 3D Ice Text Effect Tutorial

Posted in Tutorials 1239 days ago • Written by:

I wanted to create very natural Ice text separately and later add it to iceberg image. In this tutorial we will learn to use different filter settings, create 3D text effect, different layer styles and much more! I hope it’s not too complex, I tried to keep it as simple as possible.

Scroll down the page to see finished result we will accomplish!

And just be sure to check out this tutorial and join me to these simple steps !!!

This is one of the things we will create here:

cold

Step 1

1.1.Create a new document. I created 800x800px document, I suggest You to do the same if You want to get the same look as mine.

1.2. Hit D button to reset foreground/background color, press ALT+DELETE to fill in black color, so we can more easily work and see workflow.

1.3. Choose some font You want to use and type some text – I typed “COLD” and used Arial, Bold, 200pt wide, color #999999

type

Step 2

Lets add some blending options to the text.

2.1. Double click on the text layer to popup blending options menu:

blending

2.2. Now press CTRL+SHIFT+N to create new layer, hold SHIFT to select both layers and then right click and choose “Merge layers” to merge them into one.

merge layers

Step 3

This is where fun part starts! :)

3.1. Go to Filter –> Sketch –> Stamp, add those settings:

stamp

3.2. While still in filter panel create new layer and add Sketch–> Chrome with those settings and then press ok:

chrome

You must be the same output as me, if You don’t, read again everything carefully.

Step 4

4.1. Lets add some layer style to get more realistic shadows – do the same settings as the picture below, shadow color is #999999:

double

4.2. Now We will use one of the ways, how to create 3D text look.

Press CTRL+ALT+Arrow Down, many times – I did it 15 times.

shift

Select first layer, hold SHIFT and press on the 14. layer, right click and select MERGE LAYERS. Name that layer – “shadow”.

4.3. Lets add some more effect on that shadow – Filter–>Distort–>Glass and add the same settings:

glass

I have this result for now:

cold_text

4.4. Let’s add some color now:

CTRL+CLICK on the shadow layer to make selection and click Image–>Adjustments–>Hue/Saturation or CTRL+U.

Use settings like this to get pale blue color:

hue-saturation

4.5. If You want to finish, just add gradient to background color, and select radial gradient:

#cccccc

#999999

gradient

4.6. Add Filter–>Distort–>Glass to background to get more realistic frozen ice effect:

cold

Two more works from this effect, just play with the same settings:

cold2

cold3

Natural Ice Text Image Effect

Let’s go a little deeper to get natural image effect:

cold4

So let’s download a picture from sxc.hu – here and use text effect we created above.

1. Drag and position a text into a picture You just downloaded:

2. Create new layer above image and text effect, like this:

snow_effect

3. Now select “background image” layer and press S to select clone stamp tool.

4. Change brush size with [ or ] brackets.

5. Move brush somewhere where snow is and click ALT + CLICK to take a sample from it.

6. Select snow effect layer and draw with stamp tool, to add a look that letters are in the snow.

clone

7. Repeat steps 3-6 to add this effect to all of the letters:

text_snow_finish

8. Add some more color adjustments, to make look more realistic.

I used Hue/Saturation with those settings:

hue-latest

Okay, now we are finished! I hope You will learn something from this tutorial too!

However if You couldn’t complete something, just ask – I am here to help!

For Further Reading:

4 Simple Steps To Make Silhouettes Using Photoshop

Create Elegant Tags With Sliding Post Count For WordPress

9 Inspirational Website Effects Deconstructed

30 Useful and Cutting Edge CSS3 Text Effect and Web Typography Tutorials

Did you enjoy this article and found it useful?

Get even more from us:

Follow @1stwebdesigner

Get Our RSS Feed

Article was created by Dainis Graveris

204

Articles

Visit Dainis Graveris's Website | Follow Dainis Graveris On Twitter

Dainis Graveris is 21 years old blogger and designer with really strong passion. He usually hangs out in Twitter tweeting design related links regularly. If You use Digg actively he can be great friend there and don't forget add to StumbleUpon too! How about Deviantart? Meet him there as well! If You have any questions feel free to write and add him to Gtalk - it is beautiful way to get contacted directly!

32 Brilliant Comments - Join Discussion Now!

Izzy
Posted 929 days ago
25

I agree with the steps 3.1 and 3.2… my image is not the same and i did follow the steps properly.I think one thing that might be an issue is that when you’re doing the bevel and emboss you are covering up the shadow and highlight areas with showing the emboss of the “Ring – Double”.

Also I put the font to the exact same, have my document size at 800x800px and Arial, Bold, 200pt will not fit on the document.

Can you shed some light on this please. I’d love to be able to do this!
.-= Izzy´s last blog ..JAVA SCRIPT =-.

Reply
Oak
Posted 948 days ago
24

Thanks for the great text effect tutorial!

Reply
Rusli zainal
Posted 952 days ago
23

nice tutorial, thanks
.-= Rusli zainal´s last blog ..Kontroversi SEO Kontes =-.

Reply
Gus Yehia
Posted 994 days ago
22

I learn many things from your blog, thank you

Gus Yehias last blog post : King Sulumits and the Tintin Adventure

Reply
Vare
Posted 1005 days ago
21

I think the tutorial may be missing a step as Roxanna said…I experienced similar problems with the 3d aspect of the letter being gray.

However, it’s a stunning effect, and if you would ever have a chance to review the tutorial and add in the missing step, it would be much appreciated!

Thanks for sharing.

Reply
Dainis Graveris
Posted 1063 days ago
20

Roxana oh, okay, I’ll check it again a little bit later, I remember I tested a lot while I created this effect, I’ll go through it again.

Reply
Roxana
Posted 1065 days ago
19

interesting tutorial… I tried it but didn’t get the same effect. in steps 3 and 3.1 i did exactly the same, but the result wasn’t like yours; however i did get some cool text, but not the same; the 3d aspect of the letter is still gray, the color only went to the face of the type.

It would be really great if you’d have time to revisit this tutorial and maybe add something for people like me who didn’t quite get it like it should!

Reply
Michael Stewart
Posted 1157 days ago
18

Nice tutorial the final effect is amazing. Thanks for going into great detail and also I love the snow on your site.

Michael Stewarts last blog post : Create Lightning in Photoshop

Reply
Sousou
Posted 1184 days ago
17

Thanks for the tuto :)

Reply
Ardis Creative
Posted 1185 days ago
16

Thank you for sharing this, such tutorials are very helpful this season!
I have featured your post in our blog article 35 Free Winter Theme Design Goodies & Packages. Here’s the link: http://www.ardis-creative.com/ardisblog/?p=366

Reply
Johnson Koh
Posted 1233 days ago
15

Great work here :D
One of the best ice text effect I’ve seen

Johnson Kohs last blog post : Wooden Text Effect in Photoshop

Reply
Dainis Graveris
Posted 1236 days ago
14

You added new layer in Filter settings? You open Filter–>Stamp menu and then click in the filter menu, new layer and add following settings. You did the same image size as I did 800x800px?

Reply
Richard
Posted 1236 days ago
13

Nope. I created a new layer, merged the text layer with the new, blank layer, and added a new layer while doing the stamp/chrome part of the tutorial. My screen looks like yours when in that menu, but the word looks nothing like what you got.

Reply
Dainis Graveris
Posted 1236 days ago
12

Ice effect comes really from 3.1. and 3.2. points. If You did correctly step 2, then in step 3 carefully follow instructions especially that You “add new layer” to add not only one, but both effects. In step 4.3. – that’s already after 3D text adding. You got the result like in the step 3???

Reply
Dainis Graveris
Posted 1237 days ago
11

@Richard Which step exactly You can’t do? 3D text look or ice effect?

Reply
Richard
Posted 1237 days ago
10

I couldn’t get the text to look like it did in 4.3. What am I doing wrong? I set all of the settings to how they were in the pictures, and still it won’t come out right!

Reply
Dainis Graveris
Posted 1237 days ago
9

@Yeti thanks, maybe I need to explain little more, okay. I will try my best in the next tutorial! Thanks!

Reply
Yeti
Posted 1237 days ago
8

I think what Dana means is that you say what to do but maybe don’t explain what it does maybe?

Anyway nice tutorial

Yetis last blog post : We’ve Got Epic Loots!

Reply
Dainis Graveris
Posted 1237 days ago
7

@Kan Thanks! Sure thing!

@Richard Appreciated! Thank You!

@Matthew Cheers! Thanks!

@Dana You could say, what really is missing? I tried to keep step by step tutorial. That’s why I am here – to explain those things!

Reply
Dana
Posted 1238 days ago
6

Really whant my opinion? U never explain right things….really this not cool all is wrong pffff

Reply
Matthew Heidenreich
Posted 1238 days ago
5

nice effect, nice work!

Matthew Heidenreichs last blog post : Colorful Design Studio Header

Reply
Richard, Peacock Carter
Posted 1238 days ago
4

Nice effect, I like the final image.

Reply
kang
Posted 1238 days ago
3

stumbled! please help out too!

kangs last blog post : eating&reading round-up 20/09/08

Reply
Dainis Graveris
Posted 1239 days ago
2

Thomas Thanks, for passing by :)

Reply
Thomas | Brush King
Posted 1239 days ago
1

Thanks for this tutorial

Reply