Making greenish leaves interface for website using photoshop.

[krates]

Well, in this easy, step-by-step tutorial I’m going to be showing you how to design some “interface leaves,” which could come in handy when designing a jungle-themed clan template or something like that. Here’s what I came up with:

*www.easytutorial.info/img/leaves/result.jpg

1. New Document, Find a Leaf Stock
Well, first of all you want to open up a clan template you’ve been working on, or create a new document.
In this case I created a new document and filled the background layer with a very dark color.
After you’ve made your document/background or whatever, you’ll need to find some nice leaves.
I simple went to Google Images and searched for “Leaves,” this is what I came up with.
After you’ve got your leaves stock photo, copy/paste it to your document like so:
*www.easytutorial.info/img/leaves/01.gif
It’s absolutely terrible quality, but at least the shape is still there… mostly.
2. Making the Leaves Shape
This part is personal preference really, are you familiar with the Pen Tool?
If so, you can use the Pen Tool to draw a path around your leaves, other wise you’ll just want to use the Polygonal Lasso Tool.
*www.easytutorial.info/img/leaves/02.gif
Fill the selection with a dark green, I used #748004.
*www.easytutorial.info/img/leaves/03.gif
Apply the following Layer Styles to the leaves layer:
Outer Glow
*www.easytutorial.info/img/leaves/outerglow.gif
Inner Glow
*www.easytutorial.info/img/leaves/innerglow.gif

Pattern Overlay (download the pattern from here)

*www.easytutorial.info/img/leaves/patternoverlay.gif

Now you should be left with something like this:

*www.easytutorial.info/img/leaves/04.gif
3. Add Detail by Dodging & Burning
Alright, to add the details to your leaves you’ll want to use the Dodge and Burn tools. The Dodge tool is used to add highlights to things, and the Burn tool is used to darken things.
Dodge Tool
Burn Too:
Please remember that it doesn’t need to be perfect, just do something like what I’ve done here:
*www.easytutorial.info/img/leaves/05.gif
4. Duplicating, Resizing
Now it’s time to make some copies. Start by duplicating your main leaves layer and flipping the copy horizontally.
Layer > Duplicate Layer
Edit > Transform > Flip Horizontal
*www.easytutorial.info/img/leaves/06.gif
Press ctrl+T to go into Transform mode, then size your leaves duplicate down.
*www.easytutorial.info/img/leaves/transformation.gif
*www.easytutorial.info/img/leaves/07.gif
Move your copy over to the left and upwards a little bit, and also erase the stem if you want to.
*www.easytutorial.info/img/leaves/08.gif
Duplicate your smaller set of leaves again, flip horizontally and move them to a different position - I moved mine underneath the large set of leaves.
*www.easytutorial.info/img/leaves/09.gif
One more copy and you should get set!
*www.easytutorial.info/img/leaves/10.gif

 

[krates]

5. Merging and Finishing Up
Well, we’re nearly finished here. Firstly, merge all of your leaves layers together, now that you have only one single layer left, go into Transform mode again and size the leaves down to about 15-30%.

*www.easytutorial.info/img/leaves/11.gif

To bring out the detail in your leaves a little bit, apply Filter > Sharpen > Sharpen, then Edit > Fade Sharpen since it will be too strong. To finish off, I duplicated the whole lot once more and moved them underneath, I also added in a content-style box to show what it would look like. Enjoy!

*www.easytutorial.info/img/leaves/result.jpg

If you really like it post a comment on my blog here

Thanks
krates

 

[BBThumbHealer]

nice tut..krates !

 

[blueshift]

This looks nice. A white background will look better.
Thanks for the tutorial...and keep posting.