MAKING A SIMPLE INTERFACE

This tutorial will be split into two parts.  The first part aims to demonstrate how to make a simple interface for your web page using Photoshop.  For the second part of the tutorial we will jump to image ready to slice the interface and make rollover buttons.

INTERFACE TUTORIAL PART I

Step One

Open a new canvas 750 x 550, 72 ppi, white background.  Create a new layer. Using the rectangular marquee tool, we are going to draw out the basic shape for the interface, starting with a square 150 x 150 pixels.

Step Two

We need to add to this basic outline, still using the marquee tool.  Hold down your shift key while outlining the next two shapes.  This allows you to add to the selection.

We are going to add to the election approximately 100 pixels down and dragged horizontally to the end of the canvas.  Repeat procedure for the vertical axis.

Your shape will now look something like this (ignore the red line :O-).

Step 3

Select your paint bucket tool and fill this selection with black.

Step 4

We now want to 'cut out' parts of this shape using the elliptical marquee too.  Once you have your shape highlighted as shown here, hit the delete key to remove the black circle.  Ctrl+D to deselect.

Step 5

Continue to use the elliptical and rectangular marquees until you have a shape which now looks like this.

Step 6

Ctrl click on the shape layer to select shape. Switch to the channels palette. Select the Save Selection as a Channel icon at the bottom of the channel palette. Your shape should now be white with a black background.

Step 7

Go to Filer/Blur Gaussian Blur and enter a setting around 5.  Hit ok.

Step 8

Click back on the shape layer in your layers palette.  Ctrl+Click on the layer to make a selection of it and fill with a light grey (something like C8C8C8).  Ctrl+D to deselect.

Step 9

Go to Filter/Render/Lighting Effects.  Select Soft Omni, Light Type Omni and the following settings.

Intensity 50; Gloss -41; Material -36; Exposure -8; and Ambience -41.  White is high is checked.  Scroll down the texture channel and select Alpha 1.  Move the radius of the lighting channel to  a position similar to that shown here.

Your shape should now look something like this.

Step 10

Go to Image/Adjust/Hue and Saturation and check the colorise box.  You can play around with the settings here until you have something you like.

Step 11

Create a new layer (layer 2).  Click back on the shape layer and select magic wand to select the first empty circle.  Click back on the new layer.  Select complimentary foreground and background colors, then go to Filer/Render/Clouds.  Ctrl+D to deselect.

Step 12

Now go to Render/Filter/Lens Flare and select 50-300mm zoom and position the lens flare either at the top right or top left corner. Filter/Distort/Spherize 100%
Repeat these steps for the other empty circles, creating a new layer for each one!.  You MUST remember to highlight the circle you need to be in the original shape layer, but to fill it and add the effects you must be in the new layer.  You should finish up with something like this.

Step 13

Create a new layer.  Click on the shape layer and using the magic wand, select the empty rectangular shape at the top.  Click back on the new layer, use the same colors you used to make the clouds for the circles, and fill this with a linear gradient.

Step 14

Turn off the eye for the 'jewel circle'.  Make a new layer below it.  Select a suitable color and using the text tool type something like ENTER.  Bevel and Emboss by double clicking on the layer to bring up the layer palette.  Turn back on the 'jewel circle' eye.  You would repeat the procedure for each jewel button in your interface.

Step 15

If you wish you can make a title for the rectangular bar at the top of the interface.  By adding a new layer above the background layer you can also add a background color and/or texture of your choice.

That concludes Part I of this tutorial.

IMAGEREADY

Step One

Open your Interface in Photoshop, and click on the 'switch to Imageready' button at the bottom of the tool bar.

Step 2

We now want to slice our image.  We are going to slice just one image (you can go back later and play with the others if you wish to, the procedure is the same).  Your slice tool is located on the tool bar to the left of your screen.  By clicking on it and holding down the arrow at the bottom of the menu, a slice tools icon will appear.

Step 3

Click on the layer for the large jewel circle (layer 2), and then, as our image is round we will use the elliptical marquee to to make the selection.

Step 4.

Go to Slices/Create Slice from selection.  Type in type in your URL in the slice dialogue box shown below (go to Window, Show Slice if this is not already open).  Again you would repeat this procedure for every link in your interface.

Step 5

Now click on the rollover tab.  Select Icon on the left of the trash bin to create a new rollover state 'over'.  While this state is highlighted click on one of the styles you downloaded at the beginning of this tutorial.

Step 6

We now want to optimize for the web.  If the optimize panel is not showing, go to Window, Show Optimize. We want the settings to be for a jpeg as we have high color.

Step 7

This done, go to file/save optimized as and select html and images.  Create a new folder e.g. Image Slicing1 or whatever. Close your programs.  Make sure a copy of the images are in your images folder in your html editor.  Click on the web icon page where you saved the image and go to view source and copy and paste html into your editor.  When you upload your page, you must upload the images to an images folder.

Your Image should now look something like this.

Happy Interfacing.  Luv & Light - Dreamcatcher