PI5 Interface


Have you ever admired those trendy, sleek chrome interfaces with skinny black lines? I've never seen a tutorial on making them in PhotoImpact, so I studied some really nice ones, made some sketches and "translated" the techniques into PI for you.

50% size interface

View animated lightning version!

This tutorial is a lot of work and not a good choice for a beginning PI user.  Most of pieces are made similarly, so you will see the same instructions repeated often.

Start by creating a new 400 X 400 pixel file with a black canvas. Choose the Path Drawing tool to make the first button for the button bar. In the Attributes toolbar, select Custom Shape. When the Custom Shape box opens, select Rounded Rectangle 2. Click the Color box and choose a plain gray color.

Draw a button shape about this size. From the Mode dropdown list, choose 3D Pipe. In the Attributes toolbar, take the Border slider way down to the left to make the frame for the button.

draw first shape

Select the Transform tool, and click the Resize option in the Attributes toolbar. Drag the bottom center control point up slightly, making the button less tall, but leaving the width alone. Return to the Path Drawing tool.

use Transform tool to resize

Right click on the button frame and choose Duplicate. From the Mode dropdown list, choose Selection. We'll fill this selection for the center of the button. Choose the Linear Gradient fill tool. In the Attributes toolbar, select Two Color Gradient fill. Click in the first Color box and choose white, then click in the second Color box to choose black. Beginning at the bottom center of the selection area, drag straight up to fill with the gradient. You will have a vertical gradient with black at the top and white at the bottom.

Next comes the first of several steps you'll repeat throughout this tutorial. Copy the filled selection into the Clipboard by hitting Ctrl+C. Now right click and Unto 2X, to get rid of the fill and the selection area. If you don't do this and you just drag the selection, the gradient fill will remain on the base image and mar the appearance of the interface. Hit Ctrl+V to paste the filled selection back into the image. Use this method to copy and paste as you work through the tutorial.

Use the Pick tool to drag it over on top of the button frame. Switch to the Transform tool, Resize option. Edit the size of the button middle so that it just fits into the button frame.

3D Trim duplicate underneath frame

Return to the Pick tool. In the Attributes toolbar's Order options, choose Send Backward, so the middle of the button is behind the button frame.

send to back

Copy the button middle to the Clipboard and paste it back. Click on the Transform tool, Resize option. Resize the newly pasted object so that it is just a little bit smaller than the button middle.

Select the Linear Gradient fill tool. Use the same white to black Two Color gradient fill that you used earlier. This time start at the center top and drag straight down to the bottom, so that it's white at the top and black at the bottom.

copy and resize smaller

Use the Pick tool to drag the new object over on top of the button middle. Use the Attributes toolbar's Order options to Send Back, so the new object is underneath the button frame, but on top of the button middle. Click in the base image to deactivate the objects.

Choose the standard selection tool with the shape set to Rectangular. Just above the button, draw a selection like this one, just wide enough to cover the top of the button frame and a little more than half the height of the button frame.

make selection

Use the Linear Gradient tool's white to black gradient to fill the selection, starting at the bottom with white and dragging straight up to the top with black. Zoom in 200% to get a straight gradient line.

fill with two color gradient

Copy the filled selection into the Clipboard. Right click and Undo 2X to get rid of the fill and the selection. Paste the object back into the image 2X. Select the Pick tool. While one of the pasted objects is active, choose Edit, Rotate & Flip, Flip Vertically.

Use the Pick to position the two objects so that the white centers and sides meet exactly.  They will form a shiny cylinder.

shiny cylinder

Click on one half of the cylinder, then hold down the Shift key while clicking on the other half (Shift-click). Both halves of the cylinder will be selected. Right click and choose Combine as Single Object. You'll use this technique several more times to make other cylinders of different sizes.

Center the cylinder on top of the button frame.

position cylinder on top button frame

Next we'll open an image that will almost magically make the skinny lines on the cylinder. Choose File, Open and browse your hard drive for the PI 5.0 Materials folder. Open Bump04.JPG. It is a large image, 400 X 400 pixels. Choose Format, Data Type, True Color to open a new, True Color version of the image. Close out the original image without making any changes to it and return to your new True Color copy of it.

Choose Format, Dimensions, and make it 15% of its original size, maintaining the width to height ratio. It will be a lot smaller, covered with fine lines. Select Edit, Rotate & Flip, Rotate Left 90 degrees. Copy the image into the Clipboard.

resized bump map

Click on the cylinder to make it active. Choose Edit, Fill. When the Fill box opens, click the Image tab. Choose to Fill with Clipboard contents. From the Merge dropdown list, choose Multiply. Click OK to apply. This is the method you'll use several more times to create lines on cylinders.

Copy the cylinder with the lines on it into the Clipboard and paste it back into the image. Center it onto the lower button frame.

lines added to cylinders

Now it's time to save our button, just in case. Open the EasyPalette's Layer Manager. You'll see thumbnails for all of the objects making up the button. Click on the first thumbnail, then Shift-click the other thumbnails until they are all selected. Right click in the Layer Manager and choose Group. Drag the button onto the EasyPalette. It will look like it's moving, but it won't really, it will just stay in the base image. Dragging opens a dialog box asking if you want to save the grouped objects as a single thumbnail. Click Yes and the Add to EasyPalette box opens. Give the grouped objects a name (button) and save to a Library and Tab group. Repeat these steps from now on as you make each object for the interface.

Next, we'll make a short, squatty little cylinder to join the buttons. Choose the standard selection tool set to Rectangular. Make a selection like this one. Use the Linear Gradient tool to fill straight across from right to left, so the white part is on the right and the black part on the left.

making short cylinder

Copy the filled selection into the Clipboard. Right click and Undo 2X to get rid of the fill and the selection. Paste the object back into the image 2X. While the second object is active choose Edit, Rotate & Flip, Flip Horizontally.

Use the Pick tool to position the two halves of the cylinder together. Click on one half, then Shift-click on the other half to make them both active. Right click and Combine as Single Object.

short, wide cylinder

Click the blue title bar of the skinny line image to make it active. Choose Edit, Rotate & Flip, Rotate 90 degrees left, so the lines are horizontal. Copy the image into the Clipboard. Click on the short cylinder to make it active. Now we'll use the method we used previously to add the lines to the cylinder. Choose Edit, Fill.  When the Fill box opens, click the Image tab, fill with the Clipboard contents, Merge=Multiply, click OK to apply.

Drag the short cylinder underneath the button, as shown. Use the Attributes toolbar's Order options to Send to Back, so the cylinder is underneath the button. Save the short cylinder to the EasyPalette.

position underneath button

To string the four buttons together with the cylinders, click on the button and copy it to the Clipboard. Paste it back into the image 3X. Position the buttons in a vertical line.

Click on the short cylinder and copy it to the Clipboard. Paste it back into the image 3X. Position one just below the center of each button. Use Order options in the Attributes toolbar to to send the cylinders behind the buttons. Leave 4 gray "stripes" on the cylinder showing between each button.

To make sure the buttons and cylinders are in a perfectly straight line, click on a cylinder and then Shift-click the rest of the cylinders. Choose Object, Align, Center Vertically. The cylinders will form a straight line (see below). Repeat for the buttons to align them vertically.

vertical string of buttons and cylinders

Use the Layer Manager to click the first object thumbnail, then Shift-click the other thumbnails until all are selected. Right click in the Layer Manager and choose Group. You should be able to move the entire string of buttons and cylinders as a unit. Move them to the far left of the base image.

Here comes one of the fun parts, making the wires for the interface. Select the Path Drawing tool, and choose Rectangle from the Shape options and 3D Round from the Mode list in the Attributes toolbar. Draw a tall, narrow rectangle like this one.

starting the wires

Switch to the Path Edit tool. In the Attributes toolbar, click on the Toggle button. Click anywhere on the path to view the control points. Make sure you are in Pick point mode (not add or subtract control points).

Click on the right vertical path and it will turn aqua. In the Attributes toolbar, select "Convert path to curve segment." Click on the bottom right control point and two smaller squares will appear. Drag on these smaller squares to reshape the straight line into a curve. Aim for a shape like this one.

reshape straight line into curve

Click on the left vertical line to select it. Make sure that the "Convert line to curve" option is selected in the Attributes toolbar. If it isn't, click on it. Click on the lower left control point to display the two small squares. Drag on them to reshape the left side of the path.

reshape left side into curve

Try to keep the space between the lines even. Toggle in and out of edit mode to see how the wire looks. When you're satisfied with the shape of the wire, click Toggle.

3D wire

We need to condense this curve somewhat. Select the Transform tool, Resize option. Drag down on the top center control point to flatten out the wire, like this.

flattening the curved wire

Use the Rotate & Flip options in the Attributes toolbar to Flip Horizontally. Use the Pick tool to move the wire so that it is positioned like this, connecting the top two buttons. Use the Attributes toolbar's Order options to Send to Back, so the wire is behind the buttons.

position wire between buttons

Select the Path Drawing tool. In the Attributes toolbar, click in the Color box and select a bright red for the wire. Copy the wire into the Clipboard.

make the wire red

Paste the wire back into the image 2X. While the second wire is active, click in the Attributes toolbar's Color box and select blue to change the wire color.

Click on the last wire to make it active. In the Attributes toolbar, click in the Color box to select green for the wire.

Use the Pick tool to position the blue and green wires as you did the red one. Use Order options to Send to Back, so the wires are behind the buttons.

add blue and green wires

Return to the Path Drawing tool. Paste another wire into the image. Click each it to make it active, then in the Attributes toolbar click the Color box to select a bright marigold yellow color.

Select the Transform tool. In the Attributes toolbar's Rotate by degree options, rotate the wire 15 degree counterclockwise. Copy the gold wire into the Clipboard and paste it back into the image 2X.

Use the Pick tool to position the gold wires just slightly above the other colored wires. Use the Attributes toolbar's Order options to Send to Back, so the gold wires will be behind the red, blue and green wires, as shown below.

add gold wires

Next we'll make a curved, candy cane shape for the pipe that joins the top button with the display frame. Select the Path Drawing tool, and in the Attributes toolbar select the Rectangle shape, 3D Round.

make top curve bar

Switch to the Path Edit tool. In the Attributes toolbar, click on the Toggle button. Click on the path to display the control points. Click on the right vertical line and it will turn aqua. Select "Convert path to curve segment" in the Attributes toolbar.

Click on the bottom right control point to display two smaller squares. Just as you did when making the wire, drag on the smaller squares to adjust the curve, creating a "hook" at the top.

curve right side first

Click on the left vertical line and make sure that "Convert path to curve segment" is selected in the Attributes toolbar. Click the bottom left control point to display the smaller squares. 

Drag on the small squares to reshape the left side so that it matches the right side. Try to keep the two vertical lines the same distance apart, and keep the short ends even with each other, as shown at left.

reshape left side to match

When you have edited to your satisfaction, click the Toggle button to return to 3D mode. Select the Path Drawing tool. Click the Material button in the Attributes toolbar. When the Material box opens, click the Color/Texture tab and select One Color, a medium gray. Click the Shading tab and choose Metallic, picking Steel from the dropdown list. Click OK to apply.

In the Attributes toolbar, drag on the Border and Depth sliders to flatten out any peaks or creases on top of the pipe. Switch to the Transform tool. Use the Rotate by degree options in the Attributes toolbar to rotate the pipe 55 degrees counterclockwise.

Use the Pick tool to drag the pipe over to the top of the button bar. In the Attributes toolbar's Order options, use Send to Back to position the pipe behind the top button. 

place curved tube above top button

Don't worry about the slight curve on the right side of the pipe, it will be covered up by the header cylinder, which we'll make now. Choose the standard selection tool, set to Rectangular. Click in the base image to deactivate other objects.

making header cylinder

Copy the gradient filled selection into the Clipboard. Right click and Undo 2X to get rid of the gradient fill and the selection. Paste back into the image 2X. For the second pasted object, choose Edit, Rotate & Flip, Flip Vertically. Use the Pick tool to position the two halves of the header cylinder together, so that the long white edges are in the middle. Click on one half of the cylinder, then Shift-click to select the other half. While both are selected, right click and choose Combine as Single Object. Save it to the EasyPalette.

Drag the new large header cylinder on top of the curved tube, leaving the crook of the tube showing.

assemble header cylinder over pipe

Copy the large cylinder into the Clipboard, then paste it back into the image. Choose the Transform tool, Resize option. Leave the height as is, but drag the right middle control point in toward the center, turning it into a narrow piece like this one.

making the end piece

Click on the blue title bar of the small image with the lines. If the lines are still horizontal, choose Edit, Rotate & Flip, Rotate 90 degrees Right, so the lines are vertical. Copy the line image into the Clipboard. Use the Pick tool to click on the cylinder end piece you just made, to make it active. Choose Edit, Fill. When the Fill box opens, click the Image tab, fill with the Clipboard contents, Merge=Multiply, click OK to apply. Save it to the EasyPalette.

Position the line filled end piece at the end of the header cylinder, like this.

put lines on end piece

Click on the large header cylinder again to make it active. Copy and paste it back into the image. Switch to the Transform tool, Resize option. Resize it to about 1/2 inch wide and 1/4 inch tall, to make the little horizontal screw at the bottom of the button bar.

Copy the small vertical line image into the Clipboard again, and choose Edit, Fill. As you did for the end piece of the header cylinder, fill the small horizontal screw with the lines, Merge=Multiply. Drag to position it at the bottom of the button bar. Save it to the EasyPalette. Click in the base image to deactivate objects.

make small screw for button bar bottom

Select the Path Drawing tool, Rounded Rectangle shape. Beneath the large header cylinder, draw a pill shaped object just large enough to center in the large header cylinder.

From the Attributes toolbar's Mode dropdown list, choose Selection. Select the Linear Gradient tool and fill the selection with the black and white Two Color gradient. Drag straight up from the bottom of the selection, filling with white at the bottom and black at the top.

Copy the filled selection into the Clipboard, then right click and Undo 2X to get rid of the selection and the fill. If there is still a shape there, click Delete to get rid of it.

Paste the selection back into the image and use the Pick tool to position it on the header cylinder. Save the new pill shape to the EasyPalette.

position header pill on cylinder

Copy this object into the Clipboard. Paste the selection back into the image and position over the original pill shaped header object.

Choose the Transform tool, Resize option. Resize smaller, so that only a tiny bit of the larger pill shape shows around the edges.

Select the Linear Gradient fill tool again. Fill this smaller pill shape from top to bottom, so that it is white at the top and black at the bottom. Use the Pick tool to position the small pill shape over the large one.

If necessary, switch to the Transform tool, Resize option, to adjust the size of the small pill shape.

You want to have some dark showing around the edges of the small pill shape, like this.

position small pill shape over large one

Click on the large head cylinder again to copy it to the Clipboard. Paste it back into the image. Choose the Transform tool, Resize option. Leave the height as is, but drag the middle right control point to the left until you are left with a very narrow sliver, about 1/8 inch wide. This piece will fit onto the left end of the large header cylinder.

Click on the blue title bar of the tiny line image. The lines need to be horizontal again, so rotate it as necessary. Copy the line image into the Clipboard. Choose Edit, Fill and just as you've done previously, fill the small end piece with lines, Merge=Multiply. Save it to the EasyPalette.

Use the Pick tool to position the end cap cylinder on the left side of the large header cylinder.

add left end cap to large cylinder

In the EasyPalette's Layer Manager, you'll see a thumbnail for the grouped button bar objects. Select it then drag the grouped objects to the far left and lower corner of the image.

I took a good look at my large header cylinder and decided it needed to be a bit wider on the right slide, so I could add a colored light on each side of the pill shaped header bar. If you want to add a light too, click on the large header cylinder to make it active. Select the Transform tool, Resize option. Leave the height of the cylinder as is, but drag the right center control point out about 1/4 inch to the right to make it slightly wider. Use the Pick tool to reposition the right end piece.

In the Layer Manager, click on the thumbnail for the large header cylinder, then Shift-click the right end piece, large pill shape, small pill shape, and the left end piece. When the thumbnails are all selected, right click in the EasyPalette and Group. Drag the grouped objects to position them as desired. Right click and Merge All.

To add text, follow this procedure for the buttons and pill shaped header in the large header cylinder. Select the Type tool, an appropriate font and font size, color black, 2D Bold, no shadow. I'm using the Toxica font in this tutorial. Type the text you want for each button and for the header. After making all the text and positioning it on the buttons and header, click on the Home text to make it active.  Copy the black text into the Clipboard.

In the Attributes toolbar, click in the Color box to change the text to white. Paste the black text back into the image. Position it over the white text, a pixel or two above and to the left of the white text underneath it. It should look like the text is engraved on the button.

add text to button

Repeat for all of the text. If you want to, add a red and a green light on either side of the header text. I used small circle path objects, then applied the PI 4.2 Any Shape Button Designer Advanced options, which make glassy, gem-like objects.

When everything is positioned as desired, right click and Merge All. Here's the interface so far.

finished interface

I thought it would be fun to have some lightning coming out of the end of the header cylinder. If you ran out of space in the base image, you may have to choose Edit, Expand and expand to the right only, black canvas, about 100 pixels. Then you'll have room to add the lightning.

Use the standard selection tool, rectangular shape, to make a selection at the very end of the cylinder. This will constrain the lightning effect to this area in the image only.

selection for lightning

Choose Effect, Creative, Lighting to open the Lighting dialog box. Select the Lightning effect from the thumbnails. Position your cursor in the Preview window until you see a double-headed arrow, indicating that you've found the editable part of the effect. Drag to the left and down, so that the lightning is horizontal. You want it to look like it's coming out of the end of the header cylinder. Edit from the Basic and Advanced tabs until you get a look you like, and click OK to apply. Here it is, all done!

lightning added

Back to Top

If you want to slice the image up and put it on your web page, choose Web, Image Slicer. Slice it up and Export the HTML for reassembly in table format on a web page. If you need help doing this, refer to my tutorial on the Image Slicer.

Even though making this interface is a lot of work, you'll probably find that the repetition of making the cylinders, filling with a gradient, and filling with the skinny lines is fairly easy to master. Editing straight line paths into curves is a little trickier. You'll probably find lots of uses for these ways of building shapes.

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

 

 

Contact
Back to Homepage