Home / PS Tutorials

PS Tutorials · Tutorial

Design Beautifully Frosty Text Effect

PublishedJanuary 18, 2010
Reading time4 min
Filed underPS Tutorials
Design Beautifully Frosty Text Effect - PS Tutorials Lorelei Web Design Design Beautifully Frosty Text Effect — January 18, 2010

Design Beautifully Frosty Text Effect - PS Tutorials Lorelei Web Design

As you could see, for the Shading we used a custom design curve, which we developed especially for this tutorial. Click on the Gloss Contour icon and try to replicate the mapping as you see below. This could be a little tricky, so if you are stuck, when you download our PSD this will come ready and you will only need to save this one to your custom curves for future usage.

Design Beautifully Frosty Text Effect - PS Tutorials Lorelei Web Design

Inside the Bevel and emboss settings, you have an option called “Texture”. Select one of the default, pre-installed patterns called “Weave 5” and apply with Depth  and Scale as you see below.

Please pay attention to the Depth here. The less you set it to, the less texture coming from the top you will see, so in our case, we use this Photoshop texture to create the illusion of fading snow and you can play around with setting it to even less than 4, to see how you cover just the top of it.

Design Beautifully Frosty Text Effect - PS Tutorials Lorelei Web Design

And now, Satin settings:

Design Beautifully Frosty Text Effect - PS Tutorials Lorelei Web Design

Gradient is going to be from dark hue of baby-blue shade #6ed3fe to lighter shade of blue #e4ffff

Design Beautifully Frosty Text Effect - PS Tutorials Lorelei Web Design

Design Beautifully Frosty Text Effect - PS Tutorials Lorelei Web Design

Now the last thing, we are going to add “Stroke”.

Design Beautifully Frosty Text Effect - PS Tutorials Lorelei Web Design

Colors: #000000 … #ffffff … #999999 … #cccccc …#000000

Design Beautifully Frosty Text Effect - PS Tutorials Lorelei Web Design

And here is what you got so far, if we zoom in a little:

Design Beautifully Frosty Text Effect - PS Tutorials Lorelei Web Design

Next step is, select the text layer, just press Ctrl + the layer in the layers preset.

Design Beautifully Frosty Text Effect - PS Tutorials Lorelei Web Design

Create a new layer on top of the text and press Ctrl + Shift + I to inverse the selection.

Fill the layer with one of the colors we used for our text:

Design Beautifully Frosty Text Effect - PS Tutorials Lorelei Web Design

Se the blending options of this layer to “Hue”. Now, at this point you are not really going to see any difference but what we want to do is add a nice wintry motif to the background, which will complete our frosty text atmosphere.

Design Beautifully Frosty Text Effect - PS Tutorials Lorelei Web Design

Take any image you like and paste it behind the text layer. Don’t worry if he hues of the image don’t meet the color scheme of your composition, because the blue layer with Hue overlay blending settings is going to equalize the images’ tones to match the text.

Here is your result (click the image to full view).

Design Beautifully Frosty Text Effect - PS Tutorials Lorelei Web Design

The PSD file of this tutorial is available for a download at only $1. Instant download upon payment verification, however if your browser blocks redirects and you have completed the transaction, email me to get the file within 24 hours. Enjoy!

Design Beautifully Frosty Text Effect - PS Tutorials Lorelei Web Design

Written by

Elizabeth Lorelei Sramek

AI results optimization architect and SEO expert with 20+ years of experience. Crafting strategies that outrank, outperform, and outlast.

28 responses

  1. fojty January 20, 2010
    Reply
    1. Lorelei January 21, 2010

      looks awesome!

      Reply
  2. Abdulaziz Lamlum January 20, 2010

    Amazing how you thing of the options that you might use

    Reply
    1. Lorelei January 21, 2010

      Thanks, glad you like it!

      Reply
  3. Cindy Ko January 26, 2010

    I don’t know how to insert color. Because my text still grey… I want to be blue text!

    Reply
    1. Lorelei January 26, 2010

      try setting the gradients to shades of blue or alternatively use color overlay options with the blue shade of your choice. 🙂

      Reply
  4. Cindy Ko January 28, 2010

    I done during 1 weak!!
    I am proud of my self!!
    Thank you for your teaching!

    Reply
  5. Cindy Ko January 28, 2010

    But not same as you…

    Reply
  6. ??????? ?????? ????????? ?????? at Make It January 31, 2010

    […] ??????? ?????? ????????? ?????? ?? ?????? ????? Lorelei. ?????? ????? ???????? ????? ???????? ? ???????? […]

    Reply
  7. Cindy Ko February 5, 2010

    How can you update some steps in tutorial?(like layers…)

    Reply
  8. christian February 6, 2010

    i cant paste an image behind the text… how do i do that?

    Reply
  9. Mia Holmen February 11, 2010

    Where do I get the Weave 5 pattern?

    Reply
  10. Jay March 2, 2010

    Wow, this is really cool!

    Reply
  11. Morten March 6, 2010

    Awesome tutorial! Thank you!

    Reply
  12. smith March 29, 2010

    great tuts..you are good artist..I am working as a web designer at http://www.websitedevelopment-india.com and it helped me to improve my design work..thanks

    Reply
  13. The Ultimate Roundup of Best Photoshop Text effects Tutorials – Programming Blog May 9, 2010

    […] 10.Design beautifully frosty text effect […]

    Reply
  14. The Ultimate Roundup of Best Photoshop Text effects Tutorials | DesignerLinks | Home to Web design news, jQuery Tutorials, CSS tutorials, Web Designing tutorials, JavaScript tutorials and more! May 10, 2010

    […] 10.Design beautifully frosty text effect […]

    Reply
  15. The Ultimate Roundup of Best Photoshop Text effects Tutorials – Design Today May 10, 2010

    […] 10.Design beautifully frosty text effect […]

    Reply
  16. ?????????????Photoshop???????60???? 2010?5?? | DesigNet May 10, 2010

    […] ?????????????????????????? […]

    Reply
  17. The Ultimate Roundup of Best Photoshop Text effects Tutorials | Feed-Syndicate May 14, 2010

    […] 10.Design beautifully frosty text effect […]

    Reply
  18. Photoshop Text effects Tutorials and Samples Collections | Design | Web Risorsa | A Web Resource Abode May 19, 2010

    […] 10.Design beautifully frosty text effect […]

    Reply
  19. The Ultimate Roundup of Best Photoshop Text effects Tutorials | My Free Design Area – A Webpage for Joomla Free & Commercial Templates, Wordpress Free & Commerciak Themes, and Drupla Free and Commercial templates, Flash Templates and animation, Ht June 2, 2010

    […] 10.Design beautifully frosty text effect […]

    Reply
  20. 80 Photoshop Tutorials für Text Effekte » FRISCH INSPIRIERT October 5, 2011

    […] 16. Frosty Text Effect […]

    Reply
  21. Photoshop – The love story | Design Schemers January 7, 2012
    Reply
  22. Frosty Ice Photoshop Tutorial September 22, 2012

    […] Free Photoshop Tutorial […]

    Reply
  23. 100 logo logo design photoshop tutorial Web Page Design | Web Page Design Templates | Html5 Template February 15, 2013

    […] 30. Lorelle – Frosty Logo Photoshop […]

    Reply
  24. The Ultimate Roundup of Best Photoshop Text effects Tutorials June 27, 2014

    […] 10.Design beautifully frosty text effect […]

    Reply
  25. fnaf August 3, 2018

    Really a helpful post forever. I believe that it will help with my next project

    Reply

Leave a response