1bree Netpond Admin 5+ yrs Netpond Member 9 yrs View all articles | Contact author

Creating a GUI (Graphical User Interface) Photoshop 7 by Bree

I wouldn't call this a "design" tutorial (the GUI is pretty dull LOL) but rather a tutorial on learning how to use some PS tools.

 

1. For this tutorial, create a new Photoshop document, 800 x 600 in RGB mode with transparent background. I generally start with this size when I'm creating a GUI because its the most common screen resolution used (you could also use 1024X768 for a larger res). However, my final design for this size screen res is never 800 pixels wide because you have to account for the space taken up by the browser scroll bar and other margins. Most designers design for 750x400 total area. That's about one screen without a vertical roll.

2. Make a new layer.

3. There's a number of ways you can do this next step. You can use the pen tool and just draw lines until you like the shape you see, you can use shape tools and draw overlapping shapes on one layer (use the shift key so new layers are not created with each shape) and then rasterize the layer, but my favorite way is to use the marquee tool. If you do this in ImageReady instead of Photoshop you'll have the added benefit of being able to use a rounded rectangle marquee tool which is not available in Photoshop. At the moment, I'm doing this in Photoshop 7.
Using the marquee tool, draw a rectangle. You can add or delete space to this first rectangle by holding down the alt key (to delete) or the shift key (to add) while using the marquee tool. You can use the rectangular or the eliptical marquee tool. Think about how you want the final GUI to appear. Consider what you will add to it when it's complete or what function it will have.

4. Again, the next step can be done in a variety of ways. You can fill this shape with a solid color, you could use a gradient, you could define your own pattern using an image and then fill, or do like I did, go to Edit --> Fill ---> Pattern. I chose a flakey pattern. You may have different patterns available to you. Choose one or search the net for new patterns. Do NOT Deselect!

4. This pattern is basically shades of gray and I'd prefer it to be more colorful. So I changed the hue/saturation. I did this by going to Image --> Adjustments --> Hue/Saturation. Then I clicked the "Colorize" box in the lower right corner of the dialog box. Next I moved the sliders to a color that appealed to me and clicked OK. Again, do not deselect.

5. This next step might seem a bit tricky, but once you learn it you'll be able to use it when creating other images/graphics. We want to get rid of the space around our image. To do this go Select --> Inverse. Now the area around your shape will be selected. Hit the delete button and it will slice off all that unwanted space. Now go Select --> Inverse to set the selection back to your shape. The transparent background will show now.

6. With the shape still selected and the shape layer active, click on the "effects" button located in the lower left corner of the layers palette (it looks like an "f" in a circle"). Choose "Bevel and Emboss" from the menu. You could alternatively go Layer -->Layer Style -->Bevel and Emboss. My settings are Emboss, Chisel Soft, Depth: 100%, Direction: Down, Size: 13, Soften: 0. The rest of the settings I did not change.

7. That's it! Now to finish it off, add some color to your background. I moved mine to the upper left corner and added wires, a navigation bar with studs, tubes, some pics, and a title logo.