Zelaron Gaming Forum - Interface Shapes

Introduction:
Designing a comlex interface can be very challenging unless you have the right knowledge. Simply slapping a few circles and squares together may not impress your visitors. Learn how to make those complex shapes using a veriety of techniques.

The Gear:

I suggest that you be familiar with "Layer Styles", or for earlier versions of photoshop I beleive they are called "Layer Effects". Then you should familiarize yourself with gradients. These tools will add a new level to your interface designs.

1: - The very first technique

http://www.pixeljunction.com/tutoria...old_shiift.gif
WHILE HOLDING SHIFT

http://www.pixeljunction.com/tutoria...olding_alt.gif
WHILE HOLDING ALT

The first method I used to create my first interfaces was one of the easiest. However it seems to be an unknown, as the begginer to Photoshop hardly ever figures it out. So here it is...

Hold SHIFT while dragging a selection. This will make your selection even. For example while dragging your circle it wll make it perfectly round! While dragging your square it will make it perfectly square! If you would like to add more to a selection, hold SHIFT again. This will add the selection you drag onto an existing selection.

If you want to remove part of a selection hold ALT. This will deselect the section you drag over the exisiting selection.

To duplicate an image hold ALT+CTRL+SHIFT. If you have a perfectly made circle that you wish to use on another part of your image simply hold ALT+CTRL+SHIFT and then drag this to where you want. This will also drag it in a straight line.

Note: Notice in the picture to the left, while holding ALT you will see the Minus arrow and while holding SHIFT you will see the Plus arrow.

2: - The begining of the gradients

http://www.pixeljunction.com/tutoria...hape_right.gifTo make the shape of a good interface you may want to use gradients.

Start off by grabbing your circlular marquee tool. Then hold SHIFT and drag a circle.

Then get your Rectanglar Marquee tool and make hold SHIFT once again making sure that the lines line up. Look at the picture on the left for reference. You may need to zoom in to make sure you have the lines lined up with the circle.

3: -Fill er up

http://www.pixeljunction.com/tutoria...ient_small.gifNext you will need to select a gradient that goes from light to dark. I choose to show you how this works with white and black. But you can do this with any color, just make sure you have it from a light to dark. Click on the picture to the left to see how to make a gradient.

http://www.pixeljunction.com/tutoria...dient_drag.gifOnce you have your gradient selected drag it over the selection like the picture to the left.

INSURE!!!, that you drag it from the top to the bottom.

http://www.pixeljunction.com/tutoria...t_gradient.gifThen your gradient should look like the one to the left.

http://www.pixeljunction.com/tutoria...ent_dragup.gif Now you need to go to Select>Modify>Contract and modify the selection by about 15 pixels. Then drag your gradient from the bottom to the top. If you dont it will look funny.

4: - Final Gradiental Touches
http://www.pixeljunction.com/tutoria...stfinished.gifAfter completing step 3 you should have something similar to the picture on the left.

http://www.pixeljunction.com/tutoria...t_finished.gifNow go to Select>Modify>Contract and contract the selection by around 5 pixels. Then fill the selection with white or hit Delete. You should get something like on the left.