Creating a Website Interface

Introduction

Welcome to my Website Interface Tutorial for Photoshop CS. This Tutorial was written for those who aren’t that familiar with the tools in Photoshop and would like to know more about them and how to use them. Everything is step by step, and even though the Tutorial was written for version 8 or CS as it’s called now, I’m sure it can be done using earlier versions as well. I should mention that this Tutorial will only explain the Photoshop part on how to create the Interface; I will not explain how to write the actual HTML code. Lets get started!

Planning your Website

Alright then, the first thing you should do is write down a few notes on what the website should contain. What color schemes do you want to use, what topics should it cover and what resolutions should it support? This is for you to decide, but if you want to you can just go along with the same specifications that I’ll be using. My website will go in a grey-blue color scheme and it will be designed for 1024x768 or higher in resolution. The main categories of the interface I’m creating will be the following:

About Me – A section that is dedicated to the author of the website.
Gallery – A 3D Gallery.
Download – A section for files to download.
Guestbook – A Guestbook for the website.
Links – Links to other websites.
News – News that cover the updates for the website.

These are the basic specifications I’ll be using for my Interface, if you want to go with your own settings that’s just fine, lets get going in Photoshop then!

Starting out in Photoshop

First of all we are going to change a few settings in Photoshop. Select from the menu “Edit – Preferences – Units & Rulers”, then use the following settings.


When you are done, switch to the settings for “Guides, Grid & Slices” and use the following settings.


First of all we need to set the fore- and background colours, and you do this by just clicking on one of them in the Toolbar, like in picture 3.


Use the following colours:

Foreground: R: 195 G: 200 B: 205
Background: R: 150 G: 155 B: 160

When you’re done, select from the menu “File – New” and then use the following settings for the new project.


Photoshop comes with many Panels that are useful when you’re working on a project, and two of these are called the History and Layers Panel. In the menu you will find a “Window” category, and this is where you turn Panels on and off. Picture 5 shows what windows I have activated. Most important for this project we are about to do is that the History and Layers Panels are activated, so do that now. Once activated, you can put the History and Layers Panels on the right side of the Photoshop Interface. Picture 6 shows the two panels.



At the bottom of the Layers panel you should see a few small buttons. One of them looks like a small folder, and this one lets us create a Layer Set. Just click it once and a new Set will appear in the Layer List. Double click on the name in the Layers list and change it from “Set 1” to “BG”.

At the moment there is only one Layer in the Layer List, named “Background”. On the right side of this Layer there is a small padlock, indicating that this layer is locked. We want to unlock this layer now so that we can work with it and group it together with layers we create later on. If you double click on this layer a window will pop up where you can enter new settings. We don’t need to change anything in this window, so just click OK. The Background layer was now transformed into a normal Layer, and if you look at the layer again you’ll notice that the padlock is gone. You can rename this layer now by double clicking on the name in the Layer List, change it to “Background”.

This Background Layer should be a part of the “BG” Set that we created earlier. Click and hold down the left mouse button on the layer and drag it over the “BG” Set to drop it there. Picture 7 shows what it should look like when you’re done.


Now we are going to create a background pattern that will be used all over the website interface. Right Click on the Background Layer and select “Duplicate Layer”. In the Options window that comes up, just change the name to “Pattern” and click OK. Keep the new Pattern Layer selected and select from the menu “Filter – Texture – Texturizer”. Set the Texture to “Sandstone” and set the “Relief“ to “1”. That’s it; click OK and the texture will apply to the layer. In the Layers Panel, change the Opacity of the Pattern Layer to 30%; we only want a subtle pattern effect.

Lets start creating the top logo for our interface. Select the Rounded Rectangle Tool in the Toolbar, picture 8 shows where you can find it.



Create a rectangle like in picture 9, mine is 940x70 pixels.


This will become the top image of the site, where we will put a logo and some other things. We are going to add some effects to this Rectangle, so select from the menu “Layer – Layer Style – Inner Shadow”. Picture 10 shows the settings for the Inner Shadow effect.


When you’re done with the Inner Shadow, click and activate the “Bevel and Emboss” effect and use the following settings.


When you’re done with the Bevel and Emboss, click and activate the “Stroke” effect and use the following settings.


That’s it for the effects for now, so just click OK to apply them all. Picture 13 shows a small piece of the project with the effects added.



Picture 14 shows what the Layer Panel looks like at this point.


It’s time to create another Layer Set, so once again click the small folder at the bottom of the Layer Panel. Name this set “Header”, then drag the rectangle we just created to this set. Picture 15 shows the Layer Panel with the new set created.