Easy Interface 2

 © Mitch Peifer

   This is another tutorial designed to help the beginner/intermediate Adobe Photoshop 5.0 user with the task of interface design. I have tried to make it easier, and faster than some of the other tutorials on the subject, while coming up with comparable results.

   Start with a NEW IMAGE, white, RGB Color Mode, flood fill with black. On top of this, Make your selection for a round cornered rectangle by making a rectangular selection, and give it a feather SELECT> FEATHER of about 12. Flood fill this rounded selection with white.(fig. 1) Deselect. You now have a blurry rectangle. Go to IMAGE> ADJUST> LEVELS. In the levels dialog box, group the three triangular sliders together as shown.(fig 2) Click OK.

   With the MAGIC WAND tool, click in the white rectangle. You now have a rectangular selection without the feather blur. Create a LAYER> NEW> LAYER.

    Expand the still active selection SELECT> MODIFY> EXPAND by about 8 pixels. EDIT> FILL this selection with gray from the swatches palette.(fig 3) Contract the selection SELECT> MODIFY> CONTRACT by 4 pixels. Invert the selection, SELECT> INVERSE, and feather blur SELECT> FEATHER the selection 12 pixels. EDIT> FILL with black.

Deselect, and apply a gaussian blur of .6-1.0 pixels. Now, using the magic wand, click in the black area outside of the interface. Make sure everything except the interface itself is selected, and EDIT> FILL with black. This will remove any shading that has occurred in the areas just outside of the interface. By now, you should have the basic exterior of your interface.(fig. 4) If you go to the layers palette, you should have "layer 1" with the gray exterior, and a black background layer with the white shape of the interface.

   We are now going to add detail to the inside white shape. In the layers palette, click on the eye in the layer 1 box to hide the layer. Make the background layer active by clicking on the background layer in the layers palette box. With the magic wand tool, click in the white rectangle. Using the linear gradient tool, with the gradient in the linear gradient options palette set to "spectrum", drag from one side of the selected area to the other. This will give you a rainbow across the selected area. (fig. 5)

We are going to turn this color rainbow into gray scale by going to IMAGE> MODE> GRAYSCALE. A warning box will prompt you to flatten, cancel, or don't flatten. Select 'Don't Flatten'. Now, go right back to IMAGE>MODE>, this time, turn it back into RGB. Again, when prompted, select don't flatten. Deselect. You should wind up with this.(fig. 6) Now you can click on the eye in the #1 layer box to make it visible again, and select the layer to make it active.

At this point, I crop the project down to its final size. Now go to VIEW> SHOW RULERS Make sure SHOW GUIDES is selected from the VIEW menu as well. With your cursor, reach into the ruler at the top of the project, click and drag a guide to its desired location on the project, defining the size and location of your top button. Continue to drag down new guides from the top rule until your project is divided into the number and size of the buttons you desire.(fig. 7) After you have finished with the guides, select the single row marquee from the tools palette. Make sure the feather option is now set to zero. Directly on top of your blue guide line, click and place a single row marquee. Go to IMAGE> ADJUST> LEVELS, and place a 2 in the center box on the levels option palette. Click OK. Now, nudge your selection up 1 pixel, and again go to IMAGE> ADJUST> LEVELS. This time put .4 in the center box, click ok. If you HIDE GUIDES, you can see that you have placed a beveled notch in the project. Repeat this procedure on all the blue guide lines.

Once you have completed this procedure on all the guide lines, HIDE GUIDES, and you should have your project bevelled into sections and appearing like this.(fig. 8)

Now, SHOW GUIDES, and make sure SNAP TO GUIDES is selected from the VIEW menu as well. In the area where your first rollover button will be, use the rectangular marquee tool, and select the whole area of the button.(fig. 9) Once selected, EDIT>COPY the selection. Make a new image FILE> NEW. Then paste EDIT> PASTE into the new image. If you go back to the main image, you can EDIT>CUT to preview what the interface will look like when that 1st button is moused over. EDIT> UNDO CUT PIXELS to replace the cut.

With the area of the first mouseover button still selected, go to the layers palette, hide layer one, and activate the background layer. You are going to follow the same procedure of copy, new image, paste to turn the selected area of the background layer into its own "inner" mouseover image. After you have done this to all the button areas, you will have the interface completely sliced into its segments.(fig. 10) You can now take the pieces, leaving them in PSD format, add the desired text. After adding text, you can save copies as compressed jpg's or gifs. Always leave the PSD images intact and save them all, if you ever want to change the text, or change the colors, you will want to have all the PSD images and their layers intact.

Once all of the pieces are reassembled in an HTML table with the appropriate Rollover Javascript, you have completed the basic project, and you should have the general idea. You have only had to create one additional layer during its construction, and both layers get used on the completed project. You also have not had to use the airbrush or other painting tools that require actual artistic skill. Seeing as I have no actual artistic skills, this is a big bonus for me. There is a lot more you can do to this interface, add textures, change colors, add drop shadow and lighting effects, etc. You can use almost any design or shape to start off with, and a tremendous variety of results can be achieved by just playing with the controls found in the IMAGE> ADJUST> menu.