Create a Spectacular Grass Text Effect in Photoshop

May 22nd in Text Effects by Collis

Ever wanted to make text out of grass? Well with Photoshop you can. In this tutorial we'll create a rather cool-looking grass-text effect using a photo of grass, the Pen Tool and a bit of patience.

This is the first of a five-part set of tutorials where we'll use Photoshop to make text out of all sorts of things. So let's get ready to Photoshop!

Author: Collis

Hello! I started PSDTUTS because years ago reading Photoshop tutorials was how I got into design. I hope the site helps and inspires others! You can find me on Twitter!

The End Effect

I like to begin tutorials by showing where we're going. So without further ado, here is the final grass-text image click to see the full 1920px x 1200px size.

Part 1—The Background

This tutorial is made up of three parts—the background, the text itself, and some final extra effects. So first of all we're going to make a background. To do this we create a new document in Photoshop. I made mine 1920 x 1200 because I want this image to sit on my laptop background.

We start by drawing a Radial Gradient with the Gradient Tool (G) going from a light yellow-green (#adbf41) to a mid-range green (#328a26). I wonder if I've ever written a tutorial that doesn't start with a radial gradient. :-)

Step 2

Now for this image we want to create a really textured background, faintly resembling paper. So the first thing we need is ... a paper texture!

Happily you can grab some really awesome grungy paper textures from Bittbox and they are nice and large too, which is good because this is a huge canvas.

So I can't remember which texture I used first, but grab one, desaturate it (Ctrl+Shift+U) and stretch it over the top to fit the canvas.

Step 3

Now we set the layer to Overlay and 70% Opacity to blend the texture with our nice green background.

Step 4

Now to get a really distressed look, I then copied this layer, spun it around 180' and set it to 20%. Then I brought in a few more layers of paper texture (using different textures, mostly from Bittbox) and set them all to faint overlays, one on top of the other.

This was partly for the extra distress, but also because I realised that the textures looked a bit grainy and not small and sharp. So by combining extra textures and then fading it all back, I can get a nicer, sharper overall look.

Anyhow as you can see in the screenshot there are six layers here. Don't forget if you are a Plus member you can download the PSD file for this tutorial and take a look in there yourself!

Step 5

Now I duplicated the original background gradient, placed the duplicate layer above all the textures and set it to 40% Opacity—this tones back the texture so it's not quite so grungy!

Step 6

Now we create a new layer over the top and using a large, soft, black brush, add some black to the edges. It's worth toning back the opacity to about 30% and Overlay. You can then duplicate the layer and run a heavy Gaussian Blur over it (set to about 32px). That way the edges really soften out.

Step 7

OK, we now have a nice background!

Part 2—Grass Text!

OK, we are now ready to make some grass text. To do that, we're going to need some nice pretty grass to cut. After a lot of searching, I finally found this lovely photo on Flickr of grass.

So download the image at full-size and copy it on to your canvas.

Step 9

Next we need some type. So select a font you want to cut out with. I chose Swiss 924BT, which is fat and condensed type. I thought it looked nice and grand. And I've written the text "EARTH". That's because I'm making five of these wallpapers—earth, water, fire, air, spirit ... it's like that cartoon I used to watch as a kid, Captain Planet!

Anyways, so just set your text out in white and set it to Overlay and like 50% Opacity. This layer won't actually show in the end, it's just a guide layer.

Step 10

OK, so here's the text on top of the grass we got earlier.

Now a bit of planning! To make text out of grass, it's not going to be enough just to stencil out the grass. Rather we need it to look all rough, with bits of grass sticking out the edges. To do that, we're going to use the letter shapes as a rough guide and then trace roughly around them and periodically jut out to trace around blades of grass.

I'll warn you now, it's very tiresome!

Step 11

OK, so here we are tracing. You should use the Pen Tool (P) and frankly, if you're not handy with it before you start, you will be by the end!

Notice how in the parts where my path juts out, it sort of follows individual blades of grass. That way when you have the final cut-out they will look like pieces of grass sticking out.

Step 12

When you've finished your path, it's best to save it in the Paths Palette. You can do this by switching to that palette and then clicking the little down arrow and choosing Save Path. That way if you need the path again later, you can grab it.

Anyhow, double-click the path to get the selection and go back to your grass layer. Duplicate the grass layer so you still have more grass for the other letters, then invert your selection (Ctrl+Shift+I) and cut away the excess grass. In the screenshot I've faded back the duplicate grass layer so you can see the cut out "E" part.

Step 13

OK, so here we have our "E" on the final bakcground. As you can see, it looks only slightly better than if we'd just used the letter to stencil out the grass without bothering to trace. But that's OK, what it needs is a bit more depth. After all, if that letter was really sitting there, we should see some shadow and sides to it.

Step 14

First of all though, we'll add some layer styling to give it a bit more of a three dimensional look. The styles are shown below.

Layer Style

Here's the first set of layer styles...

Step 15

Now duplicate that layer, then clear the layer style off the duplicate, so we can add some more styles. This time add the styles shown below...

Layer Style

Here's the second set of layer styles... (Note that it's 51% Opacity so it'll blend in with the previous layer)

Step 16

So this was all just experimental, and it kinda looks OK, but obviously has a long way to go. Now we'll add some shadow. For that we'll use a technique that I demonstrated in a previous tutorial, Using Light and Shade to Bring Text to Life

The idea is to make a three dimensional look. So Ctrl-click the grass layer and then in a new layer below, fill it with black. Then press the down arrow once and the right arrow once and fill it again, then repeat over and over until you get an effect like that shown. I think that was about 15 steps of filling.

Step 17

Now we run a Filter > Blur > Motion Blur on our shadow with a 45' angle and a distance of about 30. Then set the text to a low opacity of about 50%. You should have something that looks like the screenshot below.

Step 18

Now move the shadow layer down and to the right and magic happens! All of a sudden it looks like the letter is casting a shadow. Pretty neat!

Step 19

Now I duplicated this layer three times. Each time I erased a bit of it away so that as the shadow is closer to the text it gets darker. I set these layers to Multiply.

Step 20

So this text is looking pretty cool, but for that extra bit of depth we should add some bits of grass in the background/shadow area. Rather than cutting out more grass, we can just use this current letter transformed about so that it's not obvious that we're hacking it together.

So as you can see below I created a few pieces of grass. They are just cut up bits of our main letter.

Step 21

Now by moving those pieces into the shadow areas, we can make it look like there is grass sticking out and it's a real 3D object made from grass!

Because these new grass bits are in shadow, you might want to use the Burn Tool (O) to darken them appropriately.

Step 22

So yay, one letter down ... four to go! Good thing we didn't choose a long word like erm I don't know ... laborious!

Step 23

Using the exact same technique ... here is the A;

Step 24

and the R and T ... you get the picture.

Step 25

And finally, the whole word! The only extra thing I did here was to move the letters apart a little. Each letter is in its own Layer Group which makes moving it around much easier.

Part 3—The Finish!

Now nice as it's looking, our text is a little lonely and monotonous. So in this last section we'll add a few more elements to the design. Note we don't want to overdo it, though, because I want this to be a desktop background, so space it is important (for all my icons!).

So first up, let's add some extra text. Here I've placed a nice quote about the earth and unity taken from the Baha'i faith (that's my religion!). I love quotes, because it means we get three parts to decorate—the quote, the quotation marks and the source.

The text is in a variation of Swiss which is thinner, but still condensed. Using multiple fonts from the same family (heavy, light, etc) is a good, safe bet for keeping your type looking coherent.

So here I've set the quote to Overlay and 50%, then duplicated the text and set it to Screen and 50%. Then I've added quotation marks in the same Swiss font, but made them extra large and a bright shade of green. Finally, the source of the quote is in teeny letters and centered vertically. And, of course, the whole quote has been measured out so it's exactly the length of the main "EARTH" text.

Step 27

Next we'll add a bit of a highlight to the scene. To do this, create a new layer above all the rest, and using the Gradient Tool (G), draw a gradient of white -> transparent towards the top left. Then set this layer to Soft Light and 50%. This will turn it into a nice subtle bit of lighting.

Step 28

Now we'll add two eye-catching elements to offset all the green. These will be a brilliant blue butterfly and a little red ladybug. I used the excellent everystockphoto Web site that searches a ton of free stock Web sites for you to find two awesome images to use: Ladybug | Butterfly

Step 29

Placing the images is pretty easy. First the butterfly. We just open up the image in Photoshop, use the Magic Wand Tool (W) to select all the white area, then go to Select > Modify > Expand and expand the selection by 1px to make sure we've got it all. Then press Ctrl+Shift+I to invert the selection and copy the butterfly over to our main canvas.

The ladybug I selected needs to be cut out of it's image. To do that I used the Pen Tool (P) and traced around the little guy and then just cut him out that way.

Step 30

So here are our two extras. As you can see, the lady bug looks a bit weird actually because I did a quick'n'dirty job of cutting him out. But that's OK because he's going to be tiny so you won't be able to see the details anyway.

So paste them in and then shrink them down and place them appropriately. It's best if they aren't close together, because that way they'll balance each other.

I added a drop shadow to each. With the ladybug it's a very close shadow because he's small and walking on the grass. With the butterfly, I set the distance to about 10px because he's hovering in the air and therefore the shadow lands a little ways away.

Finished!

And there we have it, one neat little composition featuring text made out of grass! (Click for the full-size version)

More Photoshop Type Coming Next Week!

As I mentioned earlier, I've planned out a series of these Photoshop type tutorials, where we'll be making text out of different things. I've put together the next two, and there's a teaser shown below. Part 2 of the series—Fire—will be up around this time next week. Until then!


Enjoy this Post?

We'd love your vote!

User Comments

( ADD YOURS )

  1. Leat Cristian May 22nd

    Thank you for this tutorial i`ve got inspired for my next flyer, once again thx :) i can hardly wait to see your next tutorial


  2. jaunzim May 22nd

    Oh dear…
    Now we are talking…
    AWESOME STUFF COLLIS… omg…


  3. PainiaX May 22nd

    wow! this effect is so cool!

    thanks for the tutorial!


  4. Hussain May 22nd

    This is by far the best backgrounds i have ever seen!, cant wait to see the fire tutorial. amazing!


  5. ck May 22nd

    Very impressive. This is what I call “talent” both with in.


  6. Neil Bradley May 22nd

    Looks amazing… a fantastic tutorial.

    This has come at just the right time for me as I have a website to design about a voluntary Walking group. Their logo features grass and a wooden signpost, so the effects here would fit in perfectly.

    Thank you. :)


  7. -2ö9- May 22nd

    Magnificent! PSDTuts has moved to the next level. This site will be the boom!


  8. CoolVectors.com May 22nd

    Great tutorial and great website.Keep them coming ;)


  9. Dave Wilkinson May 22nd

    Now that looks cool. I’m torn between trying the padlock tutorial or this one first.


  10. Has.n May 22nd

    I never through that grass can be soooo great!! hahahahahah!! nice tutorial, waiting for the fire one!!!


  11. solwyvern May 22nd

    That’s an excellent effect. :D
    Nice work!
    Very resourceful!^^


  12. Alex Beltechi May 22nd

    I’ve seen grass text before, but this is amazing. Excellent work Collis. Thanks!


  13. JPH May 22nd

    Very cool.


  14. Salva May 22nd

    wwwwwww000000000000wwwwwww amazing !!!!!! l


  15. Diesel May 22nd

    Wow. Wow. Absolutely amazing. Very tiresome but worth the effort. Thankyou for a fantastic tutorial!
    -Diesel


  16. i1100a May 22nd

    Wow, tutorials seem to be going back to what they were! awesome!


  17. cal May 22nd

    you never stop amazing! can’t wait for fire!


  18. webdesign is art May 22nd

    A-MA-ZING O_O

    Every tuts on this site are amazing !!
    Thanks you, I rediscover Photoshop in every tuts, it’s incredible.


  19. seth May 22nd

    beautiful


  20. Ludo May 22nd

    Impressive!!!!!!!!!!!!
    Thanks a lot


  21. Zach May 22nd

    INCREDIBLE! I can’t believe how awesomely realistic this text looks. I gotta try this sometime. Waiting anxiously for the fire one.


  22. Drupal Museum May 22nd

    Very realistic.


  23. Nate May 22nd

    Woohoo. This is awesome tutorial. Thanks for sharing it with us Collis!


  24. ZaFaR May 22nd

    That is very amazing & tremendous tutorial great explanation.


  25. MikeTheVike May 22nd

    I look at every tutorial, first time I felt like posting. This tutorial rocks, looks really realistic, especially considering the simple steps taken to create it. Definitely looking forward to the fire text!


  26. Brittany May 22nd

    That fire preview looks like a reworked version of the one from PhotoshopTechniques.com That makes me SOOO excited because I think they have the best looking fire tutorial around.

    It might not be related, but it’s at least the same type face.

    I adore the elements theme and that makes me ridiculously excited. Can’t wait for more tuts!


  27. Thomas May 22nd

    Awesome tutorial. Very nice.


  28. Roger May 22nd

    Wow this is amazing! Thank you very much for this tut Collis!


  29. freshis May 23rd

    Houuaaa !!! Trop bien !! .. hum … I mean … realy great tutorial … nice effect …


  30. Mads May 23rd

    Very cool.


  31. Lo_asca May 23rd

    Great!
    Bring the fire up


  32. bl4kdev1l May 23rd

    OMG….. This is so cool!!! Thanks Dude!!


  33. tomec May 23rd

    superb. i use it now


  34. Medium May 23rd

    OMG Thank you for this !
    This one’s worth 300$ :D


  35. norman May 23rd

    Amazing tutorial, will give this a go.


  36. amfis May 23rd

    Whoa, nice one!


  37. Mody May 23rd

    Thank you so much Collis! This is simply great. The final image is stunning and the techniques are invaluably helpful.

    THANK YOU.


  38. TexMax May 23rd

    300??? I’d say that’s worth a 1000$! I’m just speechless, verrrrry nice tut!


  39. Daniel May 23rd

    I’m spechless :-o

    That’s amazing…

    Daniel


  40. Aslan May 23rd

    Like it alot! Can’t wait for the fire :D


  41. Johan May 23rd

    Hehe very cool. Thanks man!


  42. Qbrushes May 23rd

    thats what i’m talking about!! well done!


  43. Mankaran May 23rd

    Its great….
    Save our Mother Earth from the pollution should be our motto….


  44. Constantin Potorac May 23rd

    THis is an amazing tutorial Collis. Thank you for sharing. I am also looking forward to see the other ones next week.


  45. SnakeJake May 23rd

    One of the best ones yet! The background alone would have been a nice tut, but those letters man. Awesome!

    BTW!
    It’s EARTH, FIRE, WIND, WATER, HEART! By your powers combined I am Captain Planet. GO PLANET!

    So no AIR of SPIRIT.


  46. Leckie May 23rd

    I never post but this one deserved it, a truly fantastic tutorial.


  47. Hanna May 23rd

    That is seriously impressive. Such cool results from simple beginnings (just type and textures). That is by far the best-looking grass text I’ve ever seen.


  48. Bruno Gurgatz May 23rd

    Perfect tutorial!!! this effect is very realistic!!!

    thank!!! Waiting for the other tutorials!


  49. Erin May 23rd

    Awesome tutorial, I’ll definitely give it a try
    & I’m excited that you used that quote ;)


  50. Terry May 23rd

    just when it seems like collis wont post a new tut, here comes one that gets knocked out the park.

    i actually like this text for a business card i’m working on AHEM… from your previous tut!!!

    sweet. just when i worry about the tuts here, BLAM!!!!

    ;)


  51. Seraphim Collective May 23rd

    Great tut, his is a nice one to add to the arsenal. It has a lot possibilities that some might not see at first.


  52. Josh May 23rd

    Holy… Friggin… Cow…

    Way awesome stuff there. I think this is one of the most creative effects I’ve seen in a long time. The only negative is that I have that wretched Captain Planet song stuck in my head now.


  53. Carlos May 23rd

    Very good tutorial. PSDTuts picking up it’s paces. Love the tutorial.


  54. Rooney May 23rd

    wow Collis..you are a class apart.


  55. Ricky May 23rd

    I usually am never wowed enough to comment on tutorials but I just have to say that this one is superb!

    EXCELLENT work!


  56. foyster May 23rd

    beautiful!


  57. Brent May 23rd

    “Captain Planet! He’s our hero! Gonna bring pollution down to zero!”


  58. Matt Radel May 23rd

    Dude, what a FANTASTIC tutorial - this is prolly the most interesting one I’ve seen on this site to date, and that’s REALLY saying something. Great stuff, tip of the cap to ya. :)


  59. Christian Mejia May 23rd

    Thank you for showing us this technique, this is phenomenal!


  60. Tyler Bramer May 23rd

    The background texture looks amazing and creating the grass text is looks brilliant and can be made in just a few steps. Gave me a lot of inspiration.


  61. kamel May 23rd

    OH HELL YES collis
    i sooo dig you

    btw do you have deviantart page?


  62. Jeff May 23rd

    So many ideas for this style.

    Brilliant……..


  63. Fredro May 23rd

    Amazing stuff Collis, very professional.


  64. angeloff May 23rd

    Amazing, very creative .. nice work.

    I love this web site. it`s the best tuts. in the web


  65. Andrew May 23rd

    This text looks incredible. Thanks for sharing!


  66. steve May 23rd

    one of the best! wow!


  67. Isaac May 23rd

    Thats more why I signed up.


  68. Marloes May 23rd

    Woooooooow! This is really amazing! Can’t wait to see your other text-tuts!!


  69. as-Design May 23rd

    Nice effect. Looking forward to read the next ones next week.


  70. Doug Neiner May 23rd

    Amazing… can’t wait for the others too. I love the part “You didn’ think this would be easy, did you?”


  71. Jon May 23rd

    One of the most striking tuts on this site. You da man!


  72. Ben Griffiths May 23rd

    This is fantastic, it’s in depth and covers absolutely everything!


  73. Alen May 23rd

    Great. Collis you tuts are the best.


  74. Danny May 23rd

    This effect is so amazing! Wish it wouldn’t require the tedious pen part, but it definitely pays off :)


  75. Dain May 23rd

    really nice tut… i like this style. thx for it.


  76. LOSWL May 23rd

    OOOH Yeah!!….this is great stuff man!!….A great technique, I can’t wait for the rest!! Thanks


  77. Toxel.com May 23rd

    Nice! Can’t wait for the fire text tutorial.


  78. Adrian Quevedo May 23rd

    Collis, great tutorial! this effect is awesome!
    Thanks for sharing it!


  79. James May 23rd

    An awesome tutorial Collis!
    Congrats! I apsolutely love this effect!!!!!! :D


  80. Cre8tiveInc May 23rd

    This is PERFECT. Just what I have been looking for ;)


  81. Charles Williams May 23rd

    These are the tutorials that keep me coming back to psdtuts.com These are the tutorials that help me improve my skills by leaps and bounds. Good Job!!!!


  82. Digital Fake May 23rd

    I haven’t done it yet and am going to take a good look through it but it looks like one of the best yet!
    Cheers


  83. Frederik May 23rd

    Should be a Plus tutorial, I think.


  84. Lamin Barrow May 23rd

    Heeyyy… that’s probably the best photoshop text effect i have ever seen. Now that is beyond COOL It’s HOT.


  85. kremalicious May 23rd

    just stunning! indeed you incorporated some interesting techniques like your outstanding shadows. well done!


  86. Colin Stein May 23rd

    i’ve seen fire, but not nearly as cool as the one you made!


  87. Kim Dolleris May 23rd

    Very nice tut there.. thanks a bunch! :D


  88. Daniel Richard May 23rd

    Woah! Now that looks super good! Not only for the detailed tutorial writeup, but the final image is sweeeet!


  89. Pavel Ciorici May 23rd

    Great tutorial :)


  90. Leander Dirkse May 23rd

    I love it! :D


  91. Sean Hodge May 23rd

    Wow! Great job Collis. Much like everybody else, I look forward to the next in the series. Thanks.


  92. William Ahouma May 23rd

    Wow, I tried this 5 years ago. The final result (?) looked like crap
    and i swore will never try this again but I might try to
    do it. Awesome job, bro!

    PS: Hey Collis, are you human?


  93. Jim C. May 23rd

    Amazing. I think that this is one of my favorite tuts since I lucked out enough to find this site. Love the final result!


  94. kamel May 23rd

    Collis= :o

    i cant wait for the fire one,great effect there my eyes seeing.


  95. Ignacio May 23rd

    Yes, this is spectacular like the title said.


  96. glsmaster May 23rd

    Wow, impressive… really impressive. :)

    The background work is just great! ;)


  97. pgoo May 23rd

    this it really the best tutorial site in the internet !
    Great work
    awesome effect


  98. Philip L May 23rd

    Nice tutorial… one of the more professional looking text tutorials on here. Looking forward to the next 2.


  99. soulWasted May 23rd

    whoo hooo! /* wordless ;) */


  100. Fred yates May 23rd

    This is probably the best tut I’ve seen on here, even though the are mostly all great tuts.

    I’m probably a tad biased at the moment though because I’m designing a website for a golf course in Connecticut soon and plan on using this awesome effect somewhere in the site.


  101. Virax May 23rd

    I never ever response to posts (though I always love them), but this… this is just too incredible perfect to NOT reply, so: thnx dude, you are like a god for me now ;-)

    Very very nice! Thnx!


  102. Afga May 23rd

    Oooooooh, do water too, pretty pretty pleeeeeeease…


  103. Frippe May 23rd

    Very nice tutorial.

    But I have one question. Been searching for the font but cant find it anywhere. Fonts.com dont have it and searching for it on Google only produces 3 links :) That is something you dont see everyday :)


  104. sean steezy May 23rd

    wow. great effect, great tut, lots of hard work. It sheds some light on how you go about creating these complex but realistic images. I wouldn’t have thought about it that way…but thats why you have this website and I don’t… THANKS!


  105. Mike May 23rd

    Kudos Collis!

    thank you

    Mike


  106. Jin Y May 23rd

    great effect as always.

    one suggestion: i think instead of the butterfly, it’d be neat to see a little guy riding a lawnmower around the types. (web2.0 guy, all glossy ‘n shiny :)


  107. dariuszman May 23rd

    Wow, it’s so amazing and useful. I admire quality of this stuff.
    Here’s my work, of course based on Collis tut.

    http://www.flickr.com/photos/dariuszman86/2514676102/

    Thx,
    Cheers


  108. Guilherme Zühlke O'Connor May 23rd

    Fantastic, as usual!


  109. Mr Kuzio May 23rd

    È uno spettacolo!!!
    È veramente uno spettacolo!!!

    Complimentissimi!

    Very very nice!
    It’s incredible!


  110. Arnaud Alves May 23rd

    That’s beautiful !


  111. Mukund May 23rd

    Really cool tutorial!! Thanks a lot Collis for sharing your expertise with us!!
    And yeah, I can’t wait for the Fire tutorial!!


  112. theCarrotNetwork May 23rd

    WOWEE!! Top job Collis, that looks AMAZING!


  113. Erika May 23rd

    Lovely effect. :)


  114. Jose Jorge May 23rd

    Great !!! Thank you very much !!!


  115. Ryan May 23rd

    This effect looks awesome. Can’t wait to give it a try…


  116. Erik May 23rd

    Whooo-ooo! Can’t wait to see fire tutorial!

    Erik