creating menu items

[sunjester]

i am going to start taking tutorial requests and challenges for making interfaces etc, such as someone asked me how to make something like the menu at ethicsdesigns.com. so here it is. simple, didnt even have to break out cs, ps7 worked fine. pff and i did it at work. (we have to use shitty macs at work)

1. create a new image, with enough space to work with, not just enough for the button. my image is 420x300.

2. we will start with a rounded button since the one left corner is rounded.


3. im going to cut the bottom off, and along the right side, like this


4. im going to layover an owl image to get the effect that ethicdesigns has with the owl over the button.


(NOTE: i chose the black button as the BG because the owl button image on ethicdesigns had a black bg)

5. the last section of the button may look complicated but its so very simple. which is why ethicdesigns has good, very good potential in my opinion. so what im gonna do is copy a little piece of the black BG button (like a little square of it to make sure we have the same size to play with). like this:


6. they have their image distorted to help the 3d effect, without the tiny bit of distortion it would probably throw the whole 3d look off. im also going to apply a color overlay to the little black box (blue) to follow along with their images. so let's go to edit > Distort. drag the top corner a little bit upwards (holding the shift key to keep it straight)

7. add some drop shadow (opacity:100%, angle: 180, distance:14, spread:0, size:5) my color overlays are at 54% or more, and i added a gradient overlay, which is not needed.

here is my outcome.

[Reverze]

looks nice , thx m8

[imported_Derrick]

yeah nice tut

[Cort]

Cewl for some nature site

[ukera]

Thats pretty kool...