Creating a Website Interface

We are going to create another layer on top of this rectangle and add a bevel going inwards. Hold down the “Control” key on your keyboard and then click with your Left Mouse Button on the Rectangle Layer. This will make a selection of the Rectangles borders. Select from the menu “Select – Modify – Contract” and set it to 2 pixels, then click OK. This will make the selection contract by 2 pixels, and this will create a nice frame later on. Make the Background Layer the active one and press “Control + c” on your keyboard to copy the selected area, then make the Rectangle Layer the active one again and press “Control + v” to paste it in.

Right Click on the Rectangle Layer and select “Copy Layer Style”. This will copy all the effects we have added on this layer. Now Right Click on the new layer and select “Paste Layer Style”.

We’re not going to use all of the effects though, because at the moment it will look rather silly. In the Layer Panel, double click on the Bevel and Emboss effect for the new layer we created, this will bring up the Layer Styles Panel so that we can modify them. Change the Direction of this Bevel to “Down” instead of “Up”. Remove the Stroke effect by deactivating it, we don’t need this effect for this layer. Click OK when you’re done.

Set the Opacity of this layer to 50%, this will tone down the effect a bit. You can also rename this Layer, change it to “Top Fill”.

Now we are going to add a piece of an image to this top section. Nothing special really, but it will add some cool effect to the final interface. Select from the menu “File – Load” and load in the “lantern_base.jpg” file that came with this tutorial. This is just a small section of an image that I have rendered in Lightwave 3D, it’s the base of a Lantern. We only want the actual base to be a part of the interface, so we are going to cut it out from the floor that it’s standing on. Select the “Magic Wand” tool in the Toolbar and click somewhere outside the base of the lantern to select the surroundings. The Tolerance of the Magic Wand Tool should be 32, you can change it in the options right below the menu. One thing I should say is that the Magic Wand Tool might not select everything at once, but you can fix this by holding down Shift as you click one more time at the area that was not selected. The selected area should look something like picture 16.


Select from the menu “Select – Inverse” and the selection will now cover the actual base of the Lantern. Press “Control + c” on your keyboard to copy the selection, then switch to our Interface project. Select the “Top Fill” layer and then press “Control + v”. The Base of the lantern without any surroundings should now appear in the middle of the interface project. Set the Opacity of this Layer to 50%, then select the “Move Tool” in the Toolbar and move the Base to the top left corner of our Header, like in picture 17.


Lets make the Lantern Base fit the Headers border nicely. Hold down Control on your keyboard and click on the “Top Fill” Layer to make a selection from it. Select from the menu “Selection – Inverse”, then select the Lantern Base Layer and press “Delete” on your keyboard. The image will be cut at the borders of the Header. In the Layers Panel you can change what Blending Mode the layers should have, and for this one we are going to use “Luminosity”, picture 18 shows where to find the Blending Modes.


You can rename this Layer to “Top Image” and we’re done with it. Lets add a logotype to the Header then, the name of your website for instance. Select the “Horizontal Type Tool” in the Toolbar and select a nice looking font in the options. Then click somewhere in the header and type the text you wish to use as logotype. I added my text on the right side of the header, like in picture 19.


Change the Blending Mode of this Layer to “Screen”, this will make it a bit brighter. Lets add an outline to the text, so select from the menu “Layer – Layer Style – Stroke”, then use the following settings.



Now we are going to add some of that Sandstone bump to the Header as well, to fill it out a bit. Select the Top Fill Layer and then select the Texturizer Filter again. Use the same settings as before, with a relief of 1.

It’s time to add the category links of the site, and we are just going to put them in the Header. Once again select the Type Tool, then create the different categories in the lower part of the header, like in picture 21.


We are going to use the Stroke effect on this layer to, so right click on the logotype layer and select “Copy Layer Style”, then right click on the category layer and select “Paste Layer Style”. Since I’m using a smaller font for the categories, the stroke effect might be a bit too strong now. Just open up the Stroke effect settings and lower the opacity to 50%. Also change the Blending Mode of this layer to Screen, just like the last one.

The project should look something like picture 22 at this point, and in picture 23 you can see what the Layer Panel looks like and how all the Layers are arranged.



Lets get on with the Footer!

In the Layer Panel, select the “Header” Set, then create a new Layer Set and name it “Footer”. Activate the “Rounded Rectangle” Tool again and create a 940x10 pixel rectangle like in picture 24. Create it just below the vertical center of the project.


We are going to use the same effects for this layer that we used earlier, so just right click on the layer named “Shape 1” and select “Copy Layer Style”, then paste it on this new Footer shape we created. That’s pretty much it, lets just add some text to go with it. I’m going to use the following copyright line for my Footer:

All content Copyright © Mindless Graphics 2004

Once you’ve written the text, copy the same Layer Style we used for the categories and paste it to the Copyright text. The final Footer should look something like picture 25.


Last but not least, lets create a text window for the interface. First of all, create a new Layer Set, name it “Text Window”. Using the Rounded Rectangle Tool, create a new Shape like in picture 26, I made mine 700x150 pixels.


The procedures for this text window are pretty simple, we have everything created for us already. Copy the Layer Style from one of the other Shapes and paste it to this new one. Now hold down Control and click on the new Shape to create a selection from it. Select from the menu “Selection – Modify – Contract” and contract the selection by 2 pixels. Now go to the BG Set and select the Background Layer, then press “Control + c” to copy the selected area. Select Shape 3 (the new text window shape) again and press “Control + v” to paste it in.

A new layer was created on top of the Shape layer; you can name it “Text Fill”. Copy the Layer Style from the Top Fill Layer in the Header set, then paste it on the Text Fill Layer.

The Layer Panel should look something like picture 27 at this point.


We are going to change some settings for the Inner Shadow Effect. Select the Text Fill Layer, then bring up the properties for the Inner Shadow Effect and change the Size to 5, do the same with the Shape 3 Layer. We are pretty much done with a basic Interface now, all we need to do is to create some slices and then save the pieces as individual images. First of all, save the whole project as Website.psd somewhere on your hard drive.

Select the “Slice Tool” in the Tools menu, then start cutting the project down in pieces, picture 28 shows my slices.


That’s it, now select “Save for Web” from the File menu and export all of them as GIF or JPG. I hope this tutorial helped you understand Photoshop a bit better, and I wish to thank you for reading it!