50% OFF All VIP Memberships! Coupon Code: PV2016. Ends 11 December. Sign Up Now >>

Create a Transparent Text Effect with Fresh Grass Texture and Custom Brushset

The testking CISSP training will make you really successful even on limited time! We also offer testking PMI-001 and testking 70-646 practice exam for your convenience.

In this tutorial, I will show you the steps I took to create this Trasparent Text Effect, mixing with Fresh Grass Texture and Cloud Brushset. You can use the text effect in a wide range of occasions – such as website header background, part of a natural themed design, etc.

Along the way, I would like to show you my use of brushsets and the way I use them to draw background textures, then mixing the background texture with real-world object.

Some steps of this tutorial require the use of features available on CS4, but I guess there is always alternative way you can use, although the end effect may differ slightly.

Have a try :)

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

trans-natural-typo-flatten

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

Ok let’s get started!

To complete this tutorial, you will need the following stocks:

Grass Texture

Cloud Brushset

Step 1

Create a new document sized 1000 * 600px, leave the background colour as White and create a new layer on top of it named “background texture”. Now let’s paint some background on it.

I decided instead of getting some ground/soil texture, using pure the default Photoshop brushsets can be fun and good for practicing some painting skills.

So grab those brushes as shown below:

1 brush

The painting secret here is to try set the flow and opacity of the brush to a reletively low level, and try to mix all three brushsetss together and adjust the size of the brush when necessary, for maximum effect.

Here is what I have after the painting (You can see

1 paint

You can see I gave the centre of the image – where the grass and the text will sit, a dark colour then the rest of the image.

Step 2

This step is optional if you’re happy with result from previous step. Otherwise, we can do some lighting and colour adjustment for the background texture layer. Add the following two adjustment layers to the image:

Curves

2 curves

Colour Balance

2 col bal

And we can add a new layer called “light top right” and grab this brushset below with white colour and paint some light rays from the top right: (remember also to set brush flow and opacity to low level)

2 brushset

And here is the effect I have after the painting:

2 effect 2

If you find it difficult to paint the background, you can download a copy of the background image here. Then import it into Photoshop. However I would suggest you have a try at least, it doesn’t matter if it didn’t turn as good.

Step 3

Load the “Grass Texture” image into Photoshop, use the Lasso Tool with 20px feather to select a portion as shown below, copy and paste a patch of the grass texture onto our document, resize and distort it if necessary:

3 copy paste

Use the Eraser Tool with soft brush to erase the edge of the grass texture, as shown below:

3 erase

Apply the Smart Sharpen Filter on the grass texture layer:

smart sharpen

Add the following three adjustment layers to the grass texture layer (tick the “use previous layer to create layer mask” option)

Levels

3 levels

Vibrance

3 vibrance

Curves

3 curves

And here is the effect so far:

3 effect

Step 4

Now let’s type some text onto it. I used the “Myriad Pro” font but you can pretty much choose any bold font you like, type one letter on the canvas, on top of all previous layers:

4 type

Apply the following blending optiono to this text layer:

General Blending

4 general blending

Drop Shadow

4 drop sha

Inner Glow

4 inner glow

Bevel and Emboss

4 bevel

And here is the effect after apply those blending options:

4 effect

Duplicate this text layer and re-type each layer with a new letter, rotate and position them as shown below:

4 type layer

Optional: duplicate each text layer to make the text bolder:

4 duplicate effect

Step 5

Now we’re pretty much done with the text, let’s add some lighting effect.

Firstly create a new layer called “text highlight” with “Overlay” blendng mode just under the first text layer, and grab a round soft brush with white colour, set the flow and opacity to both around 50%, and paint to the area as shown below:

5 highlight texture

Add another layer on top of the “text highlight” layer, and use the same brush as we used for the highlight layer, but with a dark colour, gently paint on the areas as shown below: (may have to adjust the brush size accordingly)

5 shadow

Add another layer just under the grass texture layer, and paint some shadow under it:

5 grass shadow

Add two more adjustment layer on top of all previous layers:

Vibrance

5 vibrance

Curves

5 curves

And here is the effect so far:

5 effect

Step 6

Finally, we add the cloud on the top of the image by create a new layer on top of the new layer, and paint with the cloud brush set we downloaded:

5 cloud

And we add some shining dots around the text, by using a soft, round white brush:

5 dot

OK that’s it for this tutorial! You can of course further enhance it by adding some more effect.

Here is my final result for this tutorial (Added some cracked texture under the grass, and some abstract lines)

trans-natural-typo-flatten

Hope you enjoy this tutorial and find it useful. Have a great day!

Categories: Text Effects

Tags: ,,,,,,,,,

  • Dhaval Patel

    Ok i think its a good turorial but not as detailed in step 1 and 2 if people don’t get the good beckround they are not going to have as good effect and some people like me are not good at painting stuff so you should may be add little more detail and add an alternative if u can’t draw! but overall good text effect

  • This site design is crazy, unconventional yet I bet it works! Nice!

    Oh the tutorial is cool too

  • VAIO

    @Dhaval
    if you’re not good at painting like me, try saving this picture from this URL, http://www.psdvault.com/wp-content/uploads/2009/10/2-effect-21-500×293.jpg

    import it on your photoshop, then resize. you can now proceed to step three.. i have done it myself and completed this tutorial but not as good as the author’s finished product.

  • James

    @Dhaval Patel: I have uploaded a copy of the background image, link is at the end of Step 2.
    Hope this helps!

    And thank you VAIO for helping out!

  • Ahh This is Hard But Cool!!!”))

  • TJFX

    Very Nice. I love the concept except the outcome could be a little better.

    love it though!

  • ngoc

    how do you download the grass brush set? i cant download it!

  • 3D Models

    Very nice work good Tutorial

  • Great tutorial! Please keep making more!

  • John

    great tutorial. i can use this in modifying my logo

  • Hamid

    thank you so much