Easy Interface
© Mitch Peifer
This tutorial is designed to help the beginner/intermediate Adobe Photoshop 5.0 user with the task of interface design. I think you will find it far simpler, and faster than some of the other tutorials on the subject.
To succesfully complete this tutorial, you will have to understand the difference between transforming a selection, and transforming the image. Transforming the selection is done through the "SELECT" menu, it affects only the selection, not the work inside the selection. Transforming the image is done through the "EDIT" menu, it affects the work inside the selected area.
Start with a new image, white, RGB Color Mode, flood fill with gray from the swatches palette. On top of this, create a new layer (LAYER> NEW> LAYER). Name it "case". It will be the outer housing of the interface. Flood fill this layer with white. Make your selection for a round cornered rectangle, with the rectangular selection tool and a feather of about 15. Flood fill this rounded selection with black.(fig. 1) Deselect. You now have a blurry rectangle. Go to IMAGE> ADJUST> LEVELS. In the upper box, group the three triangular sliders together as shown.(fig 2) Click OK.
With the MAGIC WAND tool, click in the black rectangle.
You now have a rectangular selection without the feather blur.
Go to SELECT> TRANS
Repeating the same procedure, go to SELECT> RESELECT.
Then, SELECT> TRANS
Now, for the fun part. Go to FILTER> ARTISTIC> PLASTIC WRAP , I used settings of 15, 9, 7, but playing around with the settings will bring the best results for your individual project. Click O.K. to apply.(fig 4)
By now you should have something that looks pretty much plastic.(fig 5) You can use your history and eraser brushes, with the source (the little brush icon in the history pallette) set just prior to the plastic filtering to gently brush away the excess plastic effect. I have always found it easier to overapply a filter effect, and paint to erase rather than try to artistically paint in a filter effect with shades of white.
The next step brings a little dimension and depth to the project. Again, go to SELECT> RESELECT. Then SELECT> TRANSFORM SELECTION. Resize and reposition the selection to fit the entire top portion of the work, to include the whole viewscreen, plus a little more. Double click to apply the selection transformation. Go to EDIT> TRANSFORM> PERSPECTIVE, and spread out the top of the transformation box,(fig 6) double click to transform. Deselect.
You should now have your basic remote control/interface box. You have had to create only one additional layer so far, and that has already been flattened out. You may have to do a touchup with a very light brush at this time. Go ahead and save a copy of your work before you begin installing buttons and lettering. If you want to experiment with different colors, try using a dark blue background on the first layer instead of gray. You can adjust your hue/saturation, and color balance during the project to arrive at different shades and colors of plastic. At this point, you can create new layers to accommodate the keypad and viewscreen contents. You can make simple buttons, use ones you already have made, or taken from your favorite ´9 jillion web images´ disc, and install, number and letter them to meet your needs. If you want your interface to have a rollover effect when the buttons are moused over, be sure to do the additional buttonmaking now, its easier than going back later.
This particular interface poses a coding challenge, a graphics challenge (you need to make all the little pictures to fit in the screen) and it takes a while to load on your page. It's a lot of stuff. It's also alot of fun and a real learning experience. You get a real sense of accomplishment when you succed in making a fully functional interface. A more common, easier to program interface can be made by leaving out the viewscreen.