Forum     

Go Back   Digit Technology Discussion Forum > Community > Tutorials
Register FAQ Calendar Mark Forums Read

Tutorials This section offers tutorials and How to's on just about anything related to computers and IT. Note: All tutorials are courtesy the posters and not verified by Digit

Closed Thread
 
LinkBack Thread Tools Display Modes
Old 23-12-2007, 06:24 PM   #1 (permalink)
Be CoOl rAp RuLeZ !!!
 
krates's Avatar
 
Join Date: Feb 2007
Posts: 1,968
Wink Making greenish leaves interface for website using photoshop.

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:



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:

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.

Fill the selection with a dark green, I used #748004.

Apply the following Layer Styles to the leaves layer:
Outer Glow

Inner Glow


Pattern Overlay (download the pattern from here)



Now you should be left with something like this:


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:

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

Press ctrl+T to go into Transform mode, then size your leaves duplicate down.


Move your copy over to the left and upwards a little bit, and also erase the stem if you want to.

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.

One more copy and you should get set!
__________________
iPhone 3G 16GB + Samsung I450 + Sennheiser CXL 400 + PSP Phat + Samsung NC10

Previous phones: N73ME , W810I , Asus P320
krates is offline  
Advertisements. Register and be a member of the community to get rid of them.
Advertisement

Old 23-12-2007, 06:25 PM   #2 (permalink)
Be CoOl rAp RuLeZ !!!
 
krates's Avatar
 
Join Date: Feb 2007
Posts: 1,968
Wink Re: Making greenish leaves interface for website using photoshop.

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%.



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!



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

Thanks
krates
__________________
iPhone 3G 16GB + Samsung I450 + Sennheiser CXL 400 + PSP Phat + Samsung NC10

Previous phones: N73ME , W810I , Asus P320
krates is offline  
Old 24-12-2007, 12:42 PM   #3 (permalink)
BlackBerry Guru ! :)
 
BBThumbHealer's Avatar
 
Join Date: Dec 2006
Location: New Delhi , NCR
Posts: 1,270
Default Re: Making greenish leaves interface for website using photoshop.

nice tut..krates !
__________________
Username Changed - BlackBerry7100g To BBThumbHealer !
BBThumbHealer is offline  
Old 24-12-2007, 05:35 PM   #4 (permalink)
Wise Old Crow
 
blueshift's Avatar
 
Join Date: Apr 2005
Location: Inside the Pixel
Posts: 1,227
Default Re: Making greenish leaves interface for website using photoshop.

This looks nice. A white background will look better.
Thanks for the tutorial...and keep posting.
__________________
http://twitter.com/blueshift155
blueshift is offline  
Closed Thread

Bookmarks

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On


Similar Threads
Thread Thread Starter Forum Replies Last Post
Sketch Web 2.0 interface in Photoshop shankar_ganesh Tutorials 1 15-02-2007 09:06 PM
Making a website, help plz utsavfrom2007 QnA (read only) 11 05-02-2007 10:25 AM
which website making tool mohnishghodekar QnA (read only) 11 09-04-2006 05:19 AM
Photoshop:: Image Effect: Autumn Leaves! goobimama Tutorials 6 22-11-2005 03:26 PM


All times are GMT +5.5. The time now is 11:26 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2012, vBulletin Solutions, Inc.

Search Engine Optimization by vBSEO 3.3.2