PI6 Interface


Building an interface is quite a challenge, and I got to thinking it was time for me to try my hand at a new one. You know the kind, very Blade Runner, like NavWorks used to have. The one I've made in this tutorial is definitely for the testosterone-laden among you. It's got enough chrome, screws, bevels and inset lines to drop your voice several octaves.

finished remote 

This tutorial is for experienced PI users, not for beginners. Please don't make this one of your very first PI projects. There are a lot of steps with not much hand-holding, directions are abbreviated, and you must understand how to use the Path Drawing tool, paint in object mode, adding shadows, changing object stacking order and the EasyPalette's Material Gallery presets very well to succeed at making it.  

Start with a new True Color image 550 pixels wide X 350 pixels high, canvas=black. The reason you'll start with a black canvas is so you can see all the light chrome objects better. 

Select the Path Drawing tool. Use the Rounded Rectangle shape, 3D Pipe Mode, to make a very narrow outline about this size. From the EasyPalette's Material Gallery, apply Silver 1.

frame for button

Right click, Duplicate. Change the duplicate to 3D Round Mode. From the Material Gallery, apply Silver 3. Slide the Border slider down to 1. Position this under the 3D Pipe frame and send it to the bottom of the stack.

put button base behind frame

Right click, Group. Right click and Duplicate the Grouped objects 4X to make 4 buttons (or more or less, depending on your needs). Position the buttons in a vertical line. Select one, Shift+Click the others so that are all selected, then right click, Align, Left. This will make all of the buttons even along the left edge. Then right click, Align, Space Evenly. Space them Vertically, Fixed, 0 pixels.

stack of 5 buttons, aligned

Use the Path Drawing tool, 3D Round Mode, to make a tall rounded rectangle. Send it behind the buttons. Apply Silver 1 from the Material Gallery, dragging the Border slider to 2. The button panel looks like this.

put object behind buttons

With the Path Drawing tool, 3D Pipe, make another rounded rectangle object like this one. The Silver 1 Material Gallery preset will still be in effect.

3D Pipe object

Right click, Duplicate. Change the duplicate to 3D Round Mode. Apply the Silver 3 preset from the Material Gallery. Edit the Border slider to 30, Depth=8. Right click, Properties and edit the Transparency to 25%. Center the new object under the 3D Pipe object by selecting both, right click, Align, Center Both. Center these objects on top of the button panel.

center objects

Click Shape, Custom Shape and select Rounded Rectangle 2. Mode=3D Pipe. From the upper left corner, just above the rounded rectangles you just made, draw a rounded rectangle that stretches almost all the way across the image. Apply Silver 3 again, and from the Material Gallery's Bump tab, apply the Horizontal bump.

Switch to the Transform tool, Resize option, and drag the bottom center control point upward to slightly below the two rounded rectangles. You want to preserve the width of the object, but make it less tall.

remote so far

Right click and Duplicate this wide rounded rectangle object. Change the Mode to 3D Round. Change the preset to the Material Gallery's Silver 3 preset. Position the new object so it's behind the 3D Pipe version, at the bottom of the stack.

new object added, sent to bottom of stack 

Make another 3D Round Rounded Rectangle, a good bit smaller, and change the Mode to 3D Trim. Position this object as shown below. Send it to the bottom of the stack, then bring it up one layer. Duplicate the object, then use the Transform tool, Resize option, to make the duplicate about 2/3 size. Position this object as shown below. You want both of the rounded rectangles to be behind the 3D Pipe frame.

2 more objects added to top panel

Now let's add some of those cool inset lines. Choose the Paintbrush tool. In the Attributes toolbar, select the Fine Brush preset. Edit the Size and Soft edge to 1. Click Lines and select Straight Lines. Click the Mode button to enter Paint as Object mode. Paint a straight black line (arrow) for the inset.

paint line

Click the Mode button exit Paint as Object mode. Copy the line into the Clipboard and Paste it back into the image. While the Duplicate is active, choose Edit, Fill and fill it with white. 

Use the Pick tool to position the white line very close to the black one, offsetting by just a pixel or two. This creates the look of the inset line. Select both lines, right click, Merge as Single Object. Copy this inset line into the Clipboard and Paste it back into the image 4X. Align the left edges of the 5 lines and distribute them vertically, as shown at left.

add inset lines

Now that you know how to make inset lines, add them to the left side button panel, as shown below.

add more inset lines to button panel

Now you just have to make one more object for the top part of the interface. Select the Path Drawing tool, Mode=3D Trim. Click Shape, Custom Shape. Select the Diagonal Bars shape. Draw a line of diagonal bars about 2 inches across.

diagonal bars object

Switch to the Transform tool, Resize option. Resize the diagonal bars to about half the original size. Duplicate the resize object and position it so it doubles the width of the line. Select both diagonal bars objects and align them so they are on the same horizontal plane. Right click, Merge as Single Object. Position them under the big top panel of the interface. Send them to the bottom of the stack.

add diagonal bars to bottom of stack

Take the Pick tool and select objects that are on top of the stack. Add a slight shadow around all edges. I like to use a black shadow, 15% transparency, between 3 and 8 pixels, depending on how big the object is. Adding the shadow lends depth by helping the objects to pop out from one another.

Finally, let's make a screw, which we'll duplicate and use many times to hold the entire interface together. With the Path Drawing tool selected, click Shape and select Circle. Make a small 3D Round circle with the Silver 3 preset. 

make a screwUse the same Paintbrush settings that you used to make the inset lines, only do not use Paint as Object mode. Paint a straight black line across the surface of the circle object. Copy the screw into the Clipboard and Paste it back into the image as many times as needed to decorate the interface, following the illustration below.

To add text to the top of the interface and to the buttons, choose a nice futuristic font, like Mekanic, as I've used here. Type in your text in white, 2D Mode. Copy the white text into the Clipboard, then change the text on the image to black. Paste the white text back into the image and position it over the black text, so it is offset by just a hair or two. This is the same technique you used to make the inset lines. Repeat for the button and header text. Add a big @ sign to the upper left corner. When you use the remote interface as an image map, you can use the @ sign for your mailto: link.

remote with screws and text added

Now let's fill the background with a nice, bumpy gray background tile. You can right click this one that I made and save it to your hard drive. Copy the texture into the Clipboard. Returning to the interface, and hit the space bar to select the base image. Choose Edit, Fill. Fill with the Clipboard contents from the Image tab.

background tile

Now that you've made the entire interface, it's time to add a shadow around its edges. But first, if you're going to make any rollovers, make sure you save the entire interface as a UFO file, so you can edit it again. 

Click on any object to select it, then right click, Select All Objects. Right click again, Merge as Single Object. Add a shadow around all edges. Again, I've used a black shadow, 15% transparency, and 10 pixels. Right click, Merge All.

Now all you have to do is slice the interface up in the Image Slicer, and choose File, Save to Web, As HTML. The entire interface will be saved in an HTML table in a web page document. If you don't know how to use the Image Slicer, check out my slicing tutorial. I've sliced my interface up like this, so the buttons are separate. 

sliced image

Open the interface web page document up in your HTML editor.  Delete the "My own text will go here" image from the cell. Change the web page background to the gray textured tile. It will show through in the cell from which you've removed the image, matching the interface. Check it out here.

If you decide to make rollover buttons, save your slicing pattern so youcan use it again. You'll need to edit the interface in some way, such as changing the color of the buttons or text. Then you'll have to select all the objects again, merge them into a single object, and add the exact same shadow. Import your slicing pattern so that the rollover version will be sliced exactly the same as the first interface. Assemble the rollovers in your HTML editor of choice. I use Dreamweaver because it makes short work of rollovers.

This tutorial uploaded 2/16/01

Do not duplicate, translate, copy, archive, appropriate or redistribute this document.



Back to Homepage