Interface

1. Open a new canvas - 400x400. Click on Path drawing tool - Custom shape and pick the rounded rectangle as shown.
2. Draw a rectangle in your canvas. Go to Easy Pallette/Material gallery/Metallic and chose Steel 1. Adjust border to 19 and depth to 30. Change mode to Continue draw and draw a smaller rectangle in the middle. Change path drawing tool to Path edit tool - select both rectangles and align in middle and center. Still in Continue draw mode click again on Path drawing tool and change shape for a circle. Draw a circle as shown.
3. Change to Path edit again and duplicate your circle 3 times. Distribute them in both sides of your rectangle. Change for Path drawing tool, shape=rounded rectangle and draw a rectangle as shown.
4. Change to Path edit tool and duplicate your rectangle, put it on top side of interface. Change mode to 3D. You should have image like in picture.
5. Pick the Path drawing tool, shape=circle, mode=3D, border=25, depth=30 and draw a circle a little bit bigger than hole. Put your circle in hole as shown.
6. Duplicate your object 3 times and distribute in 3 holes. Now change shape to rounded rectangle, border=8 and draw a rectangle, duplicate and put them in rectangular holes. Now you should have interface like that.
7. Pick the slicer tool and slice tha image as shown, I am also showing how to name sliced images. Then go to File/Save for web/as HTML and save it.
7. Click on Pick tool to exit slicer mode. Select your interface and all buttons. Click on Z-merge tool and check the Z-merge box .Pick tool again, click in canvas to diselect and select one button. Slide down Z-merge elevation until you see that button is further into the hole. Go to Format/Color Balance and click 2 times on thumbnail shown in picture.
8. Do the same with all other buttons. Pick up the text tool and write a text of your choice in the center. This text will show up when you will move your mouse over the first button - but1. You can put also image instead of text. Go to Slicer tool. You will have the same slices as previous time. Just rename the buttons and center image as shown.
9. Now go and save as previous time. You have made center image for one button. Now you need to make for all buttons. Simply change the text, go to slicer and rename to center2, center3 and so on. After each time save for web. When it says that file already exist chose the skip.

Part 2

Back to tutorials index

Interface Tutorial