Final Image

(click on the image to view full-size version)

Background

Having the perfect background when using a letterpress or embossed text effect is very important. The right background can seriously enhance the overall look and make it more realistic. For letterpress and embossed text we want the background to be lighter than the text itself. So lets begin.

1. Create a new document

Start by creating a new document. Dimensions I used are 700×400 with dpi set to 72 pixels/inch.

2. Solid color

Grab the Paint Bucket Tool (G) and fill the layer with #30485a.

3. Adding texture

Download this Black Leather Pattern and open it up in Photoshop. There’s no need to download the original size image since we are going to define a pattern from this. I downloaded the 240×240 version. Once you’ve opened the pattern in Photoshop, go to Edit – Define Pattern and click ok.

Head back to your document and create a new layer. Go to Edit – Fill – Pattern and choose the pattern you just created.

Set layer’s Blending Mode to Overlay and Opacity to 55%.

Download this Subtle Grunge texture and paste it into your document. Hit Ctrl+T and adjust it so it fits your document.

Go to Layer – New Adjustment Layer – Hue/Saturation (Ctrl+U) and drag the Saturation slider to the very left.

Then again go to Layer – New Adjustment Layer – Curves (Ctrl+M) and drag the lower part of the curve down a bit.

Set layer’s Blending Mode to Soft Light and Opacity to 15%.

4. Darkening Corners

Now select the Brush Tool (B) and choose a large soft brush with around 150px size and hardness set to 0%. Hit D on your keyboard to set the foreground color to black and background color to white. Holding Shift brush around the edges.

Now increase the brush size and brush the corners carefully to make a nice rounded frame.

Got to Filter – Blur – Gaussian Blur and set its radius to around 55 pixels depending on your document size. If necessary adjust your layer’s Opacity. I set my to 75%.

And you’re done with the background. To unite the layers click on the top one, hold Shift + Ctrl and click on the bottom layer. Then click Ctrl + G to group them.

Letterpress effect

Select the Type Tool (T) and type in your text. I used a font called Myriad Pro, set to Bold, 95pt size, Spacing -10 pt. After you’ve typed your text do a right click on the layer and click Rasterize Type.

There are various ways to create the letterpress effect. I’m going to teach you the easiest and quickest way, in my opinion. Do a right click on your text layer and select Blending Options. Then apply the following Layer Styles.

These are the Styles which worked fine for me. You may want to twiddle with the settings that so that it looks right. Your text layer should look similar to this one.

Not looking quite like a letterpress effect, right? But we’re going to fix that. Do a Ctrl + click on your text layer. A selection should appear.

Still with the active selection head to your Background group and find the black leather pattern layer.

Select it and hit Ctrl + J. A new layer should spring up.

Bring that layer’s opacity up to 85%. Then go to Image – Adjustments – Curves (Ctrl+M) and drag the lower part of the curve down a bit.

With that done, your letterpress effect now should look much more realistic.

For the final step lets add subtle lighting to our image. Grab the Gradient Tool (G), hit D and X on the keyboard to set white as a foreground color and black as a background color. Choose Radial Gradient and draw something like this.

Set the layer’s Blending Mode to Soft Light and Opacity to 45%. Congratulations, you’re done with the letterpress effect. Click on the image to view the full-size version.

Embossed effect

We’re going to create the embossed text effect on the same background. So delete your letterpress text layer and the one you substracted from black leather pattern and do a Save As. You should have a fresh background with smooth lighting on it.

Again start by typing your text. I used the same bold Myriad Pro with 95pt size and -10 Spacing. After you’ve typed your text rasterize the layer.

Now apply the following Layer Styles to your text layer.

Your text layer should look similar to this one.

Now just like with the letterpress effect do a Ctrl + click on your text layer, select the black leather pattern and hit Ctrl + J. Name the new embossed2. Bring layer’s Opacity up to 100%. Go to Image – Adjustments – Curves (Ctrl + M) and drag the lower part of the curve down.

Now apply these Layer Styles to the embossed2 layer.

Now do a Ctrl + Click on your original text layer. Then go to Select – Modify – Expand, enter 1 pixel and click ok.

When that’s done create a new layer and grab Paint Bucket Tool (G). Set the foreground color to black and fill the new selection. Name the layer stroke.

Do a Ctrl + click on your original text layer to select it. Then select the stroke layer and hit delete on your keyboard.

Select the stroke layer and hit your left arrow key once. Then set the layer’s opacity to 45%. That should give you a neat emphasizing stroke around your text.

For the final touches select your original text layer again and do a Ctrl + click to load a selection from. Locate your black leather pattern and click Ctrl + J. Name the layer embossed 3 and drag it above the stroke layer.

Firstly, set the layer to Normal and lower the Opacity to 20%.

Then go to Image – Adjustments – Curves (Ctrl + M) and drag the lower part of the curve down a bit.

After that go to Image – Adjustments – Color Balance (Ctrl + B) and in Midtones set the balance to +20 for Blue tones.

To finish up lets add a bit more lighting to our image. To do that go to Edit – Fill and choose 50% grey. Set layer’s Blending Mode to Overlay. Then grab Burn Tool (O) with large soft brush set to Midtones and Exposure set to around 30%. Then just brush around the center. If you’d switch layer’s Blending Mode to Normal you should see something like this.

Set layer back to Overlay and go to Filter – Blur – Gaussian Blur and set it’s radius to around 30 pixels.

And that’s about it with the embossed text effect. Click on the image to view a full-size version.

I hope you enjoyed this tutorial on creating letterpress and embossed text effects in Photoshop. Of course this is not the only way to create the effect, Photoshop is full of possibilities you just have to experiment. You just have to imagine how would the effect look in real life and then it’s up to you how you achieve it. Feel free to make suggestions and ask questions if something wasn’t clear to you.

Here is the PSD file for you, if you want to compare your outcome with ours!

Today I will not only present you with guidelines to consider in mastering typography for the web, but give you the useful tools, techniques and resources to help you achieve effective designs.

Feel free to suggest any other tools or resources in the comments section.

In Context

To set the tone of the message you wish to communicate, you must first choose your typefaces wisely.

• It allows the reader to adjust to the right setting and encapsulates the information conceptually.
• The evaluation of picking the right font should start at this level and then break down into technical bits.
• Keep the nature of content in mind during this process and see if and how the type reflects that content.
• Read the text your given to figure out the best method of integrating and conveying its full potential on the site.

This article explains choosing type wisely very well.

Create Hierarchy

Every site needs a well-developed hierarchy: indicators of where to start reading and how to proceed.

• Your typography can provide that hierarchy as long as you know your hierarchical order ahead of time.
• By thinking about size and typefaces, you can highlight a piece of text as a headline in a way that different placement in the design just can’t provide.

Whenever Possible, Use Sans-Serif

Sans-serif is almost always the best option to use on-screen, whereas serif fonts may become blurry or pixelated. Although it’s common to use serif’s in web typography, by using sans-serif’s for longer bodies of text you put a lot less strain on your readers eyes. Verdana is a great option for a web font as it was designed to be displayed on the computer.

Leading

As you know, leading is the amount of space between two lines. Every web page differs, but here are some general rules to keep in mind:

• Long lines of text may require extra leading.
• Bold face or sans-serif type require more leading.
• Type set at very small sizes, say 8 point or below, may require extra leading.
• Leading affects the density of your page, so if your page seems a bit dark, try adding more leading.
• Headlines may require negative leading, where type actually (or almost) overlaps.Negative leading, in other words a line-height value of less than 1, can be used on short pieces of text provided care is taken to ensure ascenders and descenders do not collide. For example:

It should be noted that some browsers add a little leading by default: Safari and Internet Explorer for example; whereas others, such as Camino and Firefox, do not.

Headings

By default, browsers will render the <h1> text to view on your page as bold. The text will also be formatted in a large font size. And the text will reside on its own line with automatic line breaks above and below it (similar to a double-spaced heading, typed in your word processor.)

• Contrasting colors stand out more, so use them for main section headings.
• It’s not all about size. Experiment with color changes, lightness/darkness, and font styles such as italics and bold.
• The larger the heading, the more interesting the font face can be. This can be a great opportunity to use a cool custom font. For smaller headings, keep it simple.
• Search engines like Google regard the text contents of this tag to be extremely important, so it is an essential tag to use on your Web pages.

Check out this article for 20 fonts designed for big, powerful headings.

Choosing a Font

The following are resources I’ve found to help you choose your fonts wisely.

Type Tester

Type Tester is an online application that allows you to test different typefaces. You have three columns of text and can modify the typography any way you please. You then get the CSS that accompanies your selections.

CSS Type Set

CSS Type Set is a handy tool that lets you preview your CSS text as you modify it, and it generates the code for you immediately.

STC fontBROWSER

This tools enables you to preview fonts installed on your system online.

Flipping Typical

This is a nice way to explore the popular typefaces you have on your computer and see which one fits the project you are working on. This is done by creating text that is displayed using various typefaces from your computer.

Typographic Techniques

The following are resources I’ve found to help you develop efficient typographic techniques.

10 Examples of Beautiful CSS Typography and How They Did It

A lot of great websites out there have beautiful typography using only CSS. But simply looking at them gives you only half the picture. This post showcases examples of good clean typography using nothing but CSS, and it explains what the designers did to achieve this beautiful type.

Advanced Typography Techniques Using CSS

This post is a great example of what you can do by combining and tweaking type using CSS. Different techniques are introduced: reflections, drop characters, handwriting, newspaper headlines and more.

typeface.js

With typeface.js, you can embed custom fonts on your Web pages so that you don’t have to render text as images. What makes it different is that it’s JavaScript only, not JavaScript and Flash like sIFR, or JavaScript and PHP like FLIR.

Misc

You need a typeface poster

Conclusion

Typography is an art form that has been around from early on. In choosing your typefaces, carefully study and test your fonts under different scenarios. One of the most important factors in web design is readability and legibility, so be creative but also make smart decisions in regards to those two factors. The best web typography lends a meaningful purpose behind the content it illustrates while triggering emotions in your readers in the process. Feel free to leave a comment if you found other resources for improving your web typography.

1. How to Create Inset Text With CSS3

In this tutorial you are going to use the text-shadow property that is currently supported by most of the major browsers to create the appearance of inset text. Inset text being text that has been pushed into the background, almost like a reverse embossed effect.

2. 3D Text

This is an example of 3D text created merely with CSS3. Use multiple text-shadows to create 3D text on any HTML element.
No extra HTML, no extra headaches, just awesomesauce.

3. Cool Text Effects Using CSS3 Text-Shadow

This tutorial shows you how to create some really cool and inspiring text effects using text shadows in CSS3.

4. Letterpress Effect with CSS Text-Shadow

The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS.

5. Letterpress Text Effect Using Photoshop and CSS

Letterpress effect looks good in modern websites, letterpress effect can be gain using Photoshop and also using text-shadow property of CSS. This tutorial will show you how to achieve letterpress effect with Photoshop and also with pure CSS.

6. Text Embossing Technique With CSS

Text embossing has become a huge trend in last couple of years. This tutorial describes how to implement this effect with CSS.

7. Subtle CSS3 Typography that you’d Swear was Made in Photoshop

Learn to use CSS3 text shadows, outlines, transitions, and even text gradients to create cool typography that you’d swear had to be made with a program like Photoshop.

8. Outline Your Text Using the CSS3 text-stroke Property

This tutorial shows you how to add an outline, or stroke, to your text using the CSS3 text-stroke property.

9. How to Create a Cool Anaglyphic Text Effect with CSS

In this tutorial you’ll create a cool transparency overlay effect that closely resembles anaglyph stereoscopic 3D images. To use the effect in  web designs you’ll of course build it with CSS, but the main consideration is to keep everything neat and true in our markup.

10. CSS3 Tutorial: How To Change Default Text Selection Colour

Whilst this CSS3 declaration might not be crucial to your project or design and is not supported by all browsers, it’s a fantastic effect that really takes your design one step further.

11. 8 CSS3 Text Shadow Effects

This post covers eight cool text effects you can achieve using CSS3 text-shadow property only .

12. Text Rotation with CSS

In this tutorial you’ll learn to rotate text without images using the transform property.

13. CSS3 Shining Text, CSS2 Flaming Text

Create a fun flaming text effect simply by using some JavaScript and the good old CSS2 property text-shadow and shining text using CSS3 properties and animation.

14. Create Beautiful CSS3 Typography

This tutorial will teach you how to take basic markup and transform it into an attractive and beautiful typographical design through pure CSS3. There are no images or other external resources, just pure CSS magic.

15. CSS3 Cookbook: 7 Super Easy CSS Recipes to Copy and Paste

In this tutorial you’ll find seven fun and attractive CSS tricks that you can grab and insert right into your own projects and customize at will. Keep in mind that since this stuff is still cutting edge, older browsers won’t support most of it.

16. 3D Text Hover

Learn how to create multiple text shadows using CSS3 text shadow property.

17. Adding Stroke to Web Text

Replace programs like Adobe Illustrator and learn how to add stroke to web texts using WebKit.

18. CSS3 Text-Shadow – Can It Be Done in IE Without JavaScript?

IE9 does support the majority of the CSS3 properties, however it doesn’t support image-border and text-shadow properties. This article will deal with text-shadow: how it works in browsers that support it, and strategies developers can use today to emulate some of its functionality in IE.

19. I Heart Blur

It ain’t exactly a tutorial, however you should check out the code used to create this stunning effect to learn how to add blur to text without using bunch of text-shadow properties.

20. How to Create Inset Typography with CSS3

In this tutorial, you’ll learn to create inset type, a popular text treatment, using only CSS.

21. Quick Tip: Pure CSS Text Gradients

In this short video tutorial you’ll learn how to apply gradients to texts using webkit.

22. CSS3 Background-Clip: Text

Learn to apply CSS transition on a selectable text.

23. How to Use Text Shadow /w CSS3

CSS3 presents many new possibilities when it comes to text effects on websites. The text-shadow property is one of these awesome abilities. This article covers 5 great effects you can achieve using CSS3 text-shadow.

24. CSS3 Poster With No Images

An experiment showing the power of CSS3 techniques. This one uses lovely bits like box-shadow, border-radius, @font-face, transform, box-sizing, text-shadow, RGBa. You can check out the code to discover these impressive features.

25. Creating a True Inset Text Effect Using CSS3

This inset text tutorial differs from others because besides default text-shadow it also uses inner shadow property.

26. 3D CSS Shadow Text Tutorial

This easy CSS text shadow tutorial will show you step by step how to create 3D font with multiple css shadows by stacking multiple CSS3 text shadow properties, then go a step further and use the CSS text transform and CSS transition properties to make the 3D text pop out / zoom on hover.

27. How To Create 3D Text Using CSS3

Learn how we create 3D text using CSS3 text-shadow to heading and paragraph tags.

28. Font Sizing With Rem

CSS3 introduces a few new units in font sizing, including the rem unit, which stands for “root em”. Take a look at it’s features and learn how to create resizable text in all major browsers.

29. Create Attractive Web Typography with CSS3 and Lettering.js

In this tutorial, you’ll look at how to take basic markup and transform it into an attractive typographical design using only minimum images, pure CSS3 magic and we will spice things up with lettering.js – a jQuery plugin for radical web typography.

30. CSS Text Shadow

Another tutorial taking you through all the advantages CSS3 text-shadow can give.

Before we start here is what we will be creating today:

Click on image to enlarge

1.Xara 3D tutorial part:

• Okay, let’s open Xara 3D programm.  By default there will be “X3D Version 6″
• Click on the Text options, press CTRL+A to delete existing text and type T, choose font, You like and press OK.

• 1.2. Now we will change text a little bit -
• 1. Click on Text toolbar, to get off that rounded circle;
• 2.Click on Bold – to make text little bigger;
• 3.Click on Lightning to show lightning arrows;
• 4. Click on Bevel options to change default Bevel settings;

• 1.3.
• 1.3.1. Change bevel shape to rolled to add little bit emboss effect;
• 1.3.2.Click to Round to round corners a little bit;
• 1.3.3. Change depth to 10 – to soften a little emboss effect;

• 1.4. Okay, now we will play with lightning and 3D effects.
• 1.4.1. Click on Text as shown and move Your mouse cursor to add any 3D effect while it is exactly as You want;
• 1.4.2. Click on the arrows and move them around to get glossy view and better lightning, if needed;

• 1.5.Okay, We are done in XARA, now let’s export text to Photoshop:
• 1.5.1. Click File-Export or CTRL+SHIFT+E to get export view;
• 1.5.2. Choose where to save file,then do check everything like picture below, to add transparency choose *.png format and in the options click Transparent checkbox;

Do this with every letter, change 3D effects, maybe colors – play with options until You are satisfied. I got 4 png files at the end, one for every letter – T,Y,P,E.

2.Adobe Photoshop part

If You are starting just from now on – click here to get *.zip file with all 4 *.png files.

I will use many Photoshop keyboard shortcuts, if You want to learn about most useful ones, read my article  – 48+ Greatest Adobe Photoshop Keyboard Shortcuts.

1.step

• 1.1.Create a new document, call it TYPE,  I used 1000×750 size.
• 1.2.Open T document in photoshop, press CTRL+A to select all, then CTRL+C, open Your TYPE document and press CTRL+V to drop it in the document;
• 1.3. resize text with CTRL+T and holding ALT+SHIFT to resize from center point and to resize it proportionally, rotate it to get better result;
• 1.4. Repeat those steps for all 4 text documents until You got result similar like mine:

2.step

Now lets create some background,click on background layer to make it active:

• 1. Press G to activate gradient editor;
• 2.Click on radial gradient;
• 3.And then double click on the gradient editor, to get gradient editor;

• 4.Choose Foreground to background;
• 5.Use color codes to get output as mine, copy those RGB codes and use them: #f8b1d7, #8871a1

Now click and pull Your mouse like in the picture to get same result:

3.step

Now let’s add shadow to create more realistic effect:

1. Select all four text layers – easy technique is to select first layer, hold SHIFT and select on last layer You want to select, then right click and press duplicate;

• 2. Now press CTRL+E to merge those layers into one, rename it – shadow and move it below all text layers.
• 3. Hit D to reset foreground/background color;
• 4.CTRL+CLICK on the shadow layer to select it, then press ALT+DELETE to fill it with black color;

• 5. Hit CTRL+D to deselect layer;
• 6.Go to Filter–>Blur–>Gaussian Blur and type 10 to radius pixels, hit OK;
• 7. Change opacity to ~40% to soften shadow;

4.step

I added more shadow to make it more realistic, You can skip this step if You want:

• 1.Click on Elliptical Marque tool and change feather to 50px;
• 2.Hit D to reset background/foreground color;
• 3. Click CTRL+SHIFT+N to create a new layer;

4.Click and drag marque tool below the letters, then change opacity to ~20-40%;

5. step

In this step we will add some colors to actual text, I took idea here actually from Nick Ainley’s work -

1.Double click on T text layer to get blending options:

Check everything as in the pictures below, to get different colors just play with gradient overlay:

• 2. Okay, now You have one text nicely colored. To copy layer style –> right click on the layer – click “copy layer style”;
• 3.Click on the other text layer – right click and “past layer style”, just change gradient overlay colors to get different results;

My result is like this:

6.step

Okay now lets add some more interesting background and styling:

• 1.Download those curvy line brushes – of course, better is to make those curves in Illustrator and then just import to Photoshop, but I will not bother You to do it now. I am sure You want to get faster to the final illustration.
• 2. Load brushes into just by double clicking and find them clicking F5 – to get brushes panel.
• 3.Click CTRL+SHIFT+N to create new layer and move it to top of all layers.
• 4. I used white background color.
• 5. Now change opacity to ~60-70% and click E, to grab eraser tool and erase few places to get effect that those lines are rambling through the letters:

Do this in big zoom ( click ALT+ Mousewheel to zoom in/out), so You can erase lines more precise:

Repeat those steps, add some blending options to get Your own unique results!

This is my final result:

If You couldn’t do something, check out my *.psd file – click here to download.

If You couldn’t do anything – please ask, I will be here to help You!

From my own experience, it’s hard to get started learning this program because you will face some obstacles. But take your time and be patient and you will master Fireworks in no time.

1. 3D Water Text Effect in Photoshop CS5

In this tutorial you will learn how to create realistic water text effect in Fireworks CS5.

2. Awesome Floral Type in Fireworks and Photoshop

Make your text look better with floral effect.

3. Creating an amazing Palm Pre icon on Fireworks

Create realistic looking Palm Pre icon in Fireworks.

4. LED Cinema Display in Fireworks

Create the new Apple Cinema Display 24 the easy way.

5. Fireworks Quick Tips – How to use QuickMask

Learn how to use one of the best functions in Fireworks – QuickMask.

6. Awesome Light Effects in Fireworks

Learn how to create this amazing effect you see in the image.

7. Abduzeedo Job Board banner in Fireworks

Create job board banner in Fireworks.

8. Colored Lights Header

Learn how to create this stylish looking header.

9. Classy personal portfolio in Fireworks

10. Grooveshark design style in Fireworks

11. Amazing Neon Lights on Fireworks

Title says it all. I followed this tutorial and ended up with a nice looking neon glow text.

12. Creating a cool website header in fireworks

13. Creating the iPhone Frame on Fireworks

Create a realistic looking iPhone from scratch.

14. Creating the iPhone Interface on Fireworks

These two tutorials are not same. In the first one you will learn how to create iPhone frame and in this one – iPhone interface.

15. Light Painting in Fireworks

16. Apple Air Banner in Fireworks

A must tutorial for every apple fan.

17. Creating the IE7 logo effect in Fireworks

In this tutorial you will learn how to make IE7 logo effect for any letter.

18. Twist and Fade Technique

19. Highway Sign

20. Create a Night Scene

21. Page Curl in Fireworks

22. Create a Digital Collage

23. Scotch Tape Tutorial

24. Dot Matrix Effect

25. Gel Cap / Plastic Button

26. Circular Shadows and Highlights

27. Reflective Glass Effect in Fireworks/Photoshop

This is a simple tutorial showing you how to add reflective effect to any text by using Fireworks or Photoshop.

28. Creating Grunge Text Using Adobe Fireworks

29. Barcode tutorial

30. Transparent Text

31. Danger sign

32. Crystal buttons

33. Glossy Web 2.0 button

34. Glossy Badge

35. One Dollar Coin Tutorial

36. Human Iris

37. Simple Orbs Tutorial

38. Text Wrapping

39. Canned Pineapple Slice

40. Recycling Button

Typography takes also very important role in good web designs, so I strongly recommend to read articles I featured there as well! Enjoy and get inspired for your new, advanced web designs!

1. Create a Letterpress Effect with CSS Text-Shadow

View Demo

2. Text Rotation with CSS

3. Date Display Technique with Sprites

4. CSS Gradient Text Effect

View Demo

5. CSS Text Gradients

Yet another very similar tutorial about text gradients, but maybe you’ll like both variants trying to explain really how CSS text gradient effects work.

6. Add grunge effect to text using simple CSS

Article is based on the same technique as CSS text gradients using it to add grunge type effect to your typo!

View Demo

7. Two simple ways to create text embossing effect

8. Text Embossing Technique With CSS

Example from AlexBuga homepage.

9. Codename Rainbows

Beautiful CSS&Javascript code offered by DragonInteractive teaching how to get two-color gradient text effects, shadows and highlights.

View Demo

10. CSS Drop Shadows

11. Text-Shadow Exposed

Make cool and clever text effects with css text-shadow. Very detailed article teaching you a lot of hidden tips how to achieve text glowing, embossing,shadowing with just few steps.

12. Background gradients and CSS

Pretty cool CSS background effect, which can be applied on hover giving a lot of options use it in creative way!

13. CSS Text-Shadow in Safari, Opera, Firefox and more

14. Text-overflow

15. How To Implement sIFR3 Into Your Website

16. How To Use Any Font You Wish With FLIR

View Demo

For Further Reading – More Typography Tips In Sucessful Web Designs

17. How to use headings in HTML

18. Advanced Typography techniques using CSS

19. 10 Examples of Beautiful CSS Typography and how they did it…

Beautiful article explaining simple but very effective CSS tricks how to achieve beautiful typography effects with just a few lines of code.

20. Typographic Contrast and Flow

Nick La teaches how to apply right contrasts and flow in your webdesigns explaining why and what works and how to achieve that effect.

View Demo Overview

21. The Elements of Typographic Style applied in Webdesign

22. 5 Principles And Ideas Of Setting Type On The Web

Step 1

Open Photoshop and create a new document 1000x800px. Use radial gradient to add background as the picture below.

Use RGB color : #051601 and black #000000.

Step 2

Now write some text in the center of the document, I used verdana font,207pt, text “Natural” – no matters which color You use, we won’t be using it anyway, just shape of it. After that increase tracking between the letters, by selecting all text and using CTRL+ Right arrow or CTRL + Left arrow to decrease. We do this so later we could more easily see the text, while it’s covered with brush.

Step 3

So let’s use now letter shapes and convert it to path. You can bring up paths panel – Windows–>Paths. Right click on the text layer and choose option Create Work Path. Hide now Natural text layer, create new layer with commands CTRL+SHIFT+N. Your result should look like the same as in the image below.

Step 4

Ok, now select brush tool, I wanted to create natural effect so pick any of those natural and floral brushes, I used Suddenly Spring beautiful brushes, download them, just double click on the *.abr file to get brushes loaded into the photoshop. Now press B(brush) and F5(to get brush panel). I added roundness so the brush would rotate along the path. Use brush size ~60px

Step 5

And now with the new layer selected brush stroke the path. After that with CTRL+H switch off path outlines.

You should be result like mine, so in the next step in the blending options we will be changing colors to get natural effect:

Step 6

In the blending options select Gradient Overlay, change rotation angle to 0 and add gradient with these options:

Your outcome should look like mine now, looks pretty cool already? :) :

Step 7

In paths panel, delete natural text path or just create new path.

Now lets add some more effects, select pen tool and create path through the letters like me:

Now switch to the brush panel pressing B button and then F5 to get brushes panel.

Use 7px soft mechanical brush and add the same settings as in the images:

Okay, now again switch to Pen tool(P) and right click on the path–>stroke path:

Now right click again on the path and click delete path.

Step 8

Change the color and add outer glow in the blending options, to maximize the effect. I used these settings:

Outer glow: #45ff13

Color Overlay: #d1fad1

Step 9

Select Eraser tool (E) and erase parts like in the picture below:

Step 10

Download this grass image and paste it in the document above the background and set blending to overlay, resize it to fit Your needs.

This is finished result, I hope You will find this tutorial and method useful for Yourself.

Download *.psd version to compare the result! Hope You enjoyed this one too!

Click on the image to view it on the full size.

Download PSD version

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:

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

Step 2

Lets add some blending options to the text.

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

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.

Step 3

This is where fun part starts! :)

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

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

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:

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.

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:

I have this result for now:

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:

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

#cccccc

#999999

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

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

Natural Ice Text Image Effect

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

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:

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.

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

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

I used Hue/Saturation with those settings:

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!