This is the second in a series of tutorials on creating technologically advanced looking web interfaces. You see a lot of claims that these kinds of graphics can only be made with Photoshop, but a look at the tutorials at sites like Pinoy7, Mann Made Images, and EQ Web Designs will quickly convince you otherwise.

This first tutorial is about creating metal cases for these interfaces, using the gradient capabilities of PSP to create 3-D structures.  But remember, this is just something to build on. The true artistry in creating these interfaces is in the small details.

Start by opening a new file with a black background and 16 million colors. Make sure that it is of sufficient size for your entire interface. Create a new layer above your background and start adding shapes. Decide what you want your interface to look like, and which shapes will be in the foreground, and which in the background (in other words, what shapes do you want in front.) use your Selection tool to make a selection of the proper shape. Here I've started with a large circular selection. Remember, for the best effect, you should have the Antialias box CHECKED and the Feather set to 0.
 
 

Now flood fill your shape with a gradient to create a 3-D effect. On circular selections, a black-to-white sunburst gradient works nicely. I set my foreground color to white (click the left swatch above the Available Colors panel, and select white from the pop-up screen) and my background color to black. I then switched the foreground Style to gradient (click your left mouse key over the foreground style and hold, then select the gradient style from the popup - it looks like a small grayscale gradient, right next to the paint brush icon.) A gradient style should come up in your foreground box. To change the gradient, click the foreground box once. In the Gradient dialogue, set the Style to Sunburst (third box down), the Horizontal and vertical offsets to 25, and Repeats to 0 or 1. A repeat setting of 1 was used for the fill shown below. It gives a more dramatic effect.

One comment: Some monitors can show "banding" when they display gradients. It's not a bad idea to add about 4% Uniform Noise to any gradients you use (Effects > Noise > Add.) This will help to give them a more uniform appearance.
 
 

Next we add additional parts to the case. Deselect your circle (Ctrl D) and create a new layer BELOW your current one. The easiest way to do this is to go to the Layer palette or menu, select your background layer, and then choose New Raster Layer from the Layers menu. Now make another selection that overlaps the shape you made earlier. Here I've made a Rectangular selection. Again, be sure that antialias is checked.
 
 

Now fill the selection with another gradient. To create the pipe-like effect shown below, the Linear Gradient Style was selected in the Gradient dialogue, the Gradient color  was again set to Foreground to Background, the Angle was set to 0, and Repeats was set to 1. With White as the Foreground and Black as the Background, it will be necessary to check the Invert Gradient box to achieve the gradient shown here.
 
 

Add as many additional parts as your design calls for, using appropriate gradient styles for each. Here I added several additional pipes and another smaller sphere. The vertical pipe was created by using an Angle of 90 degrees in the Gradient dialogue.
 
 

Next, turn off the visibility of your background layer by clicking on the glasses icon next to it in the layer palette. The black background will disappear and you'll see the checkerboard pattern that indicates transparency. Then go to Layers > Merge > Merge Visible.  This will combine your two gradient layers into one, and create one single shape.

To begin blending your shapes, choose your Selection tool and draw a Rectangular selection around the entire collection of shapes. Clicking once on the shape will contract the marquis to the edges. At this point it's a good idea to save the selection to the Alpha Channel, just in case (Selections > Save to Alpha Channel.)
 
 

Now turn the visibility of your Background layer back on by again clicking the Eyeglass icon in the Layer palette. The little red X should disappear.

Here's where we subtly smooth the edges between the sections. First merge all of the layers (Layers > Merge > Merge All.) Then apply a Gaussian Blur to the interface case (Effects > Blur > Gaussian Blur.) The radius used here was 1.5, but you can increase or decrease the blur depending on the effect you want to achieve. This blur has two effects: it softens the transition between sections, and it darkens the outside edge of the case, essentially outlining it.
 
 

At this point simply copy your case (Edit > Copy) and paste it as a new image (Edit > Paste > As New Image) or as a selection in another window.
 
 

Now just elaborate on your design with a few additional gradients. The indentations and protrusions added below were created by making a selection, adding a linear gradient (Repeats = 0, with an angle of 135 for the circles and 180 for the rectangles), contracting the selection by a few pixels, and applying the gradient again with the Invert Gradient box checked in the Gradient dialogue.
 
 

The image below shows what can be done with the simple gradient design created in this tutorial, after the application of a few details. How to create these details and how to  "weather" the surface of the interface that you create will be covered in subsequent tutorials in this series.