You might have similar effects on the web as such effects becoming very trendy recently. Doubtlessly you didn’t know how these designs are done, do they use patterns? Textures? How many layers do they work with? No need to guess and wonder, because now you are going to:

Make a new canvas, we used here #373d40 for backgrounds. Using white color as your primarily color, and Baskerville Old font, type the word you want to render…

Once you are done, duplicate the layer and make it temporarily invisible (click on the eye in layers panel). Get back to the second layer copy, which you have on visible mode and go to Layer >> Layer Style >> Blending Options

Apply the following settings for Inner Shadow, Outer Glow, Satin and Stroke…

Pay attention to the contour you choose, it has to be Rounded Steps otherwise you will get a different result. This Countour comes pre-installed in All Recent Adobe Photoshop versions.

Finally apply a light outside stroke on the text, to give it a nice outlining.  We did 2px but if your text is very big you may want to add a thicker line, or, on the contrary, if you are making a small logo, use 1 pixel outlining.

This is what you should get by now..

Remember the copy of the text layer you made invisible a few minutes ago? Time to get it back to the surface. Make it visible, Rasterize the layer (right click on the layer’s panel >> Rasterize layer), and press CTRL + T to transform the layer, then enlarge it.

Place it under the pinkish text layer, and go to Filter >> Pixelate >> Mosaic..

Apply the following pixelated blur effect using 12 square.

Now, to the most important part. Set BOTH layers’ opacity settings to Overlay. This means the pixelated background and the pinkish text will both have Overlay as their Blending Options. This could be done directly in the Layers Panel on the side select the layer you want and set it to “Overlay”. That’s all, your text is ready and you can see the final result below. I would say that this text effect is both candy-sweet and techno-cyber-cold, while the combination turns to be original. It can be great for web design websites and portfolios.

Usage Restrictions:

Feel free to use this tutorial for any commercial or non commercial project, as long as you don’t directly resell this tutorial, or the exact  images used we used here for demonstration.

Share This Post!

Tags: photoshop tutorial, Text effects, texture