View Full Version: 3d lookin menuitems

Obscured Graphix > Other Tutorials > 3d lookin menuitems


Title: 3d lookin menuitems
Description: modeled after ethicsdesigns.com


sunjester - January 16, 2007 09:49 PM (GMT)
original post: http://hgsdomination.com/d/sm_f/index.php?topic=18.0

i figured id make a tutorial about the menu i saw at http://www.ethicsdesigns.com/, it loked cool so here it is...

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.
user posted image

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

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

(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:
user posted image

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.

user posted image




Hosted for free by InvisionFree