Mark Scerri – Eye on the web

A couple of days ago I decided to put up a series of tutorials on a web site that I am building for my friend. I already created the logo and the colour palette (see here) now the next step is to create the web layout. So let’s not waste time and start straight away.

Like the logo tutorial I will start by showing the final result. This will help you understand things better. So here is the final result.

How do we achieve this? Open Photoshop and let’ start!! Create a new document with width of 768 pixels and height of 800 pixels and set the resolution to 300 pixels/inch (so that we can increase the image size without losing quality) as shown below.

The next thing is to set the foreground color to the dark gray colour with hex code of 1E2528. Then press Alt+Backspace to fill the background with the colour. The next thing is to insert the logo that we created in the previous post. To do this we go to File -> Open and open the logo (the image not the PSD file). When the logo opens press Ctrl+A and then copy (press Ctrl+C). The go in the web layout file and press Ctrl+V. Now press V so that we move the logo in the left upper corner like this.

The next step is to create the menu holder. This part is very important to the website because the user will navigate from this part. To create the menu holder we create a new layer and then choose the Rectangle Tool (press U). Name the new layer menuholder. Make sure that the colour is the dark gray as the background. Now draw a rectange under the logo that stretches from left to right of the page (keep some space from the edges) as shown below.

Of course like this nothing is showing because it is the same colour as the background. So we need to add some styling. To do this double click on the menuholder layer and a new window will pop up. Choose Gradient Overlay. In the Gradient Overlay options menu double click on the Gradient colour box which is this one:

A new window pops up. Click on the two gradient colour boxes as shown in the image below and change the colours to 1E2528 and 5E6A6E respectively to produce the following gradient. Then press the reverse option to reverse the gradient.

The result achieved should be similar to the following:

The next step is to actually create the menu. To do this we select the Horizontal Type Tool (or press T) then click anywhere and type in “Home”. The font colour that I used is white (FFFFFF), Arial, and size is 3.21pt. I repeat this process for the other menu items (“Shopping Cart”, “New Products”, and “Checkout”). Place the menu items under each other as shown here.

The  next step is to create separators between the menu items. Create a new layer and name it menuseparators. Then press u and choose the Line Tool. Make sure that the colour is white (FFFFFF), and that the size is 1px. Draw a line between the first menu item and the second. Then double click on the layer and choose Outer Glow as a style. The last thing is to change the opacity (from the Layer’s menu with the layer chosen) of the layer to around 33%.  Now duplicate this layer (Layer -> Duplicate Layer) two times and for each copy move the separator between menu items to produce the following result.

To have better division in the layout we will add 2 other separators between the logo and the menu holder and vertically near the menu items. Let’s start with the first one. Create a new layer and name it logoseparator. Then draw a line between the logo and the menu holder. Finally double click on the layer and choose Outer Glow effect then change the opacity to 33%. Repeat this process but this time draw a vertical line between the logo and the end of the menu holder near the menu items. The result should be as shown below.

For the next step we are going to need the following image.

Now insert this image and place it near the menu like in the image below. To resize it press Ctrl+T and to move it to the desired position press V. While resizing it press the Shift key so that the dimensions remain proportionate.

Now we insert a small description near the watch by using the Horizontal Type Tool (T). I used Arial for the font and I mixed the gold and white colour for the text. With some experimenting I achieved the following result.

The next step is to add a button so that users can see more details about this watch. To do this create a new layer and name it button. Then set the colour to 5A676C and draw a small rectangle under the price (press U for the rectangle tool). Then double click on the layer and choose Drop Shadow as an effect. Finally add “More Details” text on the button and you should have something like this. The font size is 3.4pt.

The final touch for the menu holder will be to add two lines at the bottom of the menu holder to a new layer that we will name headerlines. To add lines press U and select the line tool. The first line should be 1px and the second 2px. The colours should be 6a7378 and cfb52b respectively. The lines are shown below.

So the header is finished. No we need to focus on the main part of the website. To do this create a new layer and name it mainpart. Then draw a white rectangle in it and place it on the right hand side under the menu holder. Then create another layer and name it mainseparator. In it draw a vertical line with the 6a7378 colour. Repeat this last step 2 more times. Now we have three lines with which we are going to separate the main part in 3 parts to achieve this result.

The next thing is to add some products to the website. For this you need the following 3 pictures.

We are then going to put these 3 images, one in each column. To resize the images press Ctrl+T. Press Shift while resizing so that you keep the dimensions in proportion. Then under each watch add some text for the name, description, and price of the watches as shown in the image below. I used Arial as the font. The name and price of each watch is written in gold (cfb52b) and the description in gray(6a7378).

The next step is to include two buttons: Add to Cart and Details button. To do this we create a new layer and name it addtocart. Then make sure that the colour is 6a7378 and with the rectangle tool (U) draw a button under the price. Then double click on the layer and choose the Drop Shadow effect. The next thing is to write Add to Cart in white (ffffff) on the button. Now merge the last two layers (addtocart and the Add to Cart text layer). This is done by choosing the topmost layer (Add to Cart) and then going on Layer -> Merge Down (or Ctrl+E as a shortcut). Now move the button to the desired position. The last step is to duplicate the layer (Layer ->Duplicate Layer) twice so that we have a button for each watch. Move the buttons one under each watch.

Next repeat the above processes for the Details button. The only difference is that I did the Details button in gold (cfb52b). Here is the result.

Now we need to fill the left part under the menu. Here we are going to put a list of brands. So let’s start with the holder first. Create a new layer and name it brandholder. Set the colour to gray 6a7378 and with the Rectangle Tool (U) draw a rectangle as the holder. Then double click on the layer and click Gradient Overlay effect and apply the following options.

Then write Browse By Brand as a title at the top (do it bold and then write a number of brands as a list underneath as shown below. All text is in white (ffffff). You can also add a separator under the Browse By Brand title. All you need to do is duplicate (Layer -> Duplicate Layer) a menu separator and move it under the Browse By Brand.

The last thing is to create the footer. To do this create a new layer and name it footer. Set the colour to our gray 6a7378. Then draw a rectangle with the Rectangle Tool (U) underneath the main part to act as a footer. Now apply a Gradient Overlay effect by double clicking on the footer layer with the following options.

Now insert some logos and text in the footer as shown below. You can insert whatever you want in the footer. Try to experiment and be original. I came up with the following final result.

Well that’s all for today. The next step? Well the next step is converting this image to HTML, CSS, and JavaScript. Stay tuned things look very interesting. Until then here are a couple of books that will surely interest you:

• Photoshop CS4 Digital Classroom
• Adobe Photoshop CS4 Classroom in a Book
• The Principles of Beautiful Web Design

Enjoy!!