Figure 1 |
STEP 1 
Create a new image (about 450 x 350 pixels) and create a new layer. Then use the marquee tool and drag a box about 130 x 300 pixels and fill it with black (we will change the color later).
|
|
Figure 2 |
STEP 2 
Leave the outline selected and click on the channels tab then create a new channel. Fill the new channel with white then deselect your outline. With your shape deselected go to filter, blur, gaussian blur and set blur it to 3.9.
• Save your work!
|
|
Figure 3 |
STEP 3 
Now we need to sharpen the corners. Click image, adjust, levels and drag the two anchors together to meet them in the middle. It would look like this image (Click Here).
Then select your new rounded corner shape and click the layers tab. Now create a new layer and fill your selection with black. You probably will need to hide layer 1 in order to see your new layer.
• Save your work!
|
|
Figure 4 |
STEP 4 
OK, now the fun begins :-) Select your shape so there is a marquee around it and create a new layer, then fill it with the color you would like the interface. I choose light green this time.
Hide the old layer with your black selection and then make sure your on the new colored layer. Go to Layer, effects, bevel and emboss. Make and inner bevel in the up state 5 pixels depth and 5 pixels blurred and click OK. It would look like this image (Click Here).
Then select your new rounded corner shape and click the layers tab. Now create a new layer and fill your selection with black. You probably will need to hide layer 1 in order to see your new layer.
• Save your work!
|
|
Figure 5 |
STEP 5 
Now were going to add the buttons to it. Create a new layer above your interface layer and drag an marquee the size you want the buttons to be. This is how we did it, (Click Here).
I left a little room at the top for some text, but you may want to make the complete interface buttons. Either way is fine.
Now stroke your marquee with black or white depending on your interface color. If you choose a light color use black, if you choose a dark color use white. OK, that is the out line for your buttons, you may need to center it a bit to make it perfect. Just move it into place and continue, we are almost done.
|
|
Figure 6 |
STEP 6 
OK, now make a single horizontal line the same color as your button outline. You need to make the line the width of the outline and then duplicate the line and move it up until it fills your outline with the number and size buttons you want.
I had to trim the top of the button outline to make the buttons all the same size. So if once you get to the top of the button out line and there is a little button there, just trim the extra outline out.
Then flatten your button outline with the lines you just created so they are all on the same layer.
|
|
Figure 7 |
STEP 7 
Now we are going to make them look a little 3D. Duplicate your button outline and create a new layer under your original button outline. Make a selection of your button lines and fill the selection with the opposite color of your outline. So if you used black for your buttons out line, fill the selection with white, etc...
After you fill the selection move it down one pixel and to the right one pixel. This will make it show just a little bit. You should have something that looks like figure 7.
Now save your work.
|
|
Figure 8 |
STEP 8 
Now we are going to create the individual buttons so we can make them interactive. For this step I duplicated the main interface layer so I would have a back up copy incase I made a mistake. Then I made the back up copy hidden. You are also going to need to make an empty layer under your working interface layer. Then flatten your interface layer onto the empty layer. This is so the effects work right for the next steps. Other wise we would lose the bevel we are going to put on the buttons.
OK, this might get a little tricky, but hang in there is is pretty simple. You need to flatten the new button outline onto your working interface layer so they are on the same layer. You should only flatten the second button outline you made (the white one on this interface).
Make sure you are on your interface layer with the one flattened button outline on it. So now you should have one layer with the button outline in black and one layer with the interface and button outline on it as well as any other hidden layer you created. Now use the magic wand tool and select the first button on the interface, copy and paste it (Ctrl+C, Ctrl+V), do this for every button on your interface. Once all the buttons are created they will be on separate layers. Flatten all the button layers to one layer, but make sure you don't flatten the button layer to the interface layer.
• Save your work!
|
|
Figure 9a
Figure 9b |
STEP 9 
Now we just need to make the bevel effects and save it. On the button layer you just created select layer, effects, and bevel and emboss. Give your buttons an 2 inner bevel in the up state and 2 blurred. This is how your buttons will look when there are sitting on your page. Right now you should have the interface layer, button layer, and button outline layer viewable. It should like figure 9.
Now, duplicate the complete image and save one as upstate and one as downstate. Keep these for backup purposes. On the down sate file we need to change the bevel. So select layer, effects, and bevel and emboss. Give your buttons an 2 inner bevel in the down state and 2 blurred. It should look like this.
• Save your work!
|
|
Figure 10
|
STEP 10
OK, that's about it for the interface creation. You can add anything else from here that you want. Everything else is just for looks. I added a title and a few little lines to the edges to give it a more complex look.
If you want to learn how to cut this interface up and actually use it go to the next tutorial.
• Our finished interface is to the left.
• Tutorial 12, Learn how to cut this interface up.
|
|
Photoshop 5.5 Tutorials
