Photoshop Intermediate Web Site Design

Creating the Homepage

Have you ever wondered how web designers achieve a simple yet effective design? How do we make a button look inviting to click? You`ve seen those big inviting header images, how are they done?

In this tutorials will show each step in creating the homepage for the intermediate web site project. Our aim is to answer all the questions above and give you a final design you can be proud of and adapt easily to your own project.

So lets work through this together.

Click to download the tutorial files (intermediate-tutorial.zip) 2.5Meg

The Final Design

The design is made up of many elements but gives a clean and simple feel. The space between the sections gives us space to breath and attract users attention to the important parts of the page.

Where do I start?

Like with all designs we need a plan. The design above starts out as this:

To achieve this design, all you need is a pen and paper. This goes for every design you will do; start with pen and paper and get the general layout and organisation ready before you even turn on the computer. This is to avoid you getting designers block when faced with a bright white empty Photoshop canvas.

Tutorial Files

Next we need some files to help us with our design. These include stock photography and logos.

File > New

Lets get started! First lets get our canvas open and ready. Select File > New and we need a canvas width of 1024px and height 1200px.

Organised Workspace

I find it best to have organise my workspace first before starting my design journey. The reason is that I like to have quick access to the tools and pannels I use the most and hide the ones I rarely use.

1. From the menu bar select Window > Workspace > Essentials (Default)
2. View information panel select Window > Info
3. Hide adjustments panel by double clicking on the ADJUSTMENTS tab.

Now we have a nice clear workspace ready to start.

Power Grid

To help us with the layout and spacing things out we will use the grid that Photoshop kindly gives us.

Select View > Show > Grid

Note: Each square grid cell is equal to 15px

Setting the background

The colour picker is probably one of the most used tools in Photoshop. Now we want to select our background colour and fill the Background layer using the Paint Bucket Tool (G)

1. Select the foreground colour from the Toolbar and select colour #73ACBF
2. Select the Paint Bucket Tool from the tool bar. Fill the background layer with the colour.

Custom Shaping

For most of the sections within the design we will use the custom shape tool. In this case it will be the Rectangle Tool which you will find on the tool bar. If you do not see the square, click and hold on the Custom Shape icon and select Rectangle Tools (U) from the sub menu.
Lets start with the logo area.

Logo Banner

First we are going to draw the top banner where our logo, site name and call to action button will sit. For this part we will work in "grid cells", these are the individual boxes on the grid.

1. Draw a box in the centre of the canvas, 2 boxes down from the top and 3 boxes from the left and right.
2. The box should be a total of 8 boxes high
3. Rename the layer "Logo Banner"

Note: Make sure you rename all the new layers you add so you don`t get lost. To rename just double click on the name inside the layers panel.

Note: To be precise the box should be 935px width and 113px height. You can find this out by pressing Ctrl+T this will give you the Free Transform Tool and the Info Panel. will show you the exact measurements. Handy!

Time for the logo

1. File > Open > web-courses-logo.png
2. Select All and Copy
   Ctrl+A - Ctrl+C
3. Paste inside your new design
   Ctrl+P
4. Resize logo
   Ctrl+T - resize
5. Click the Move tool on the Toolbar and move to left corner of the logo banner
6. Rename the layer "Logo"

Strapping Lines

Time for us to use the Text tool to add our site title and strap line text

1. Site Title "Web Courses Bangkok".
Use the following settings for the size, font and colour:

2. Strap line "Professional Web and Graphic Design Courses"
Verdana, Regular, 15pt, #FFFFFF

So the final look should be nice and central on the banner:

Call To Action!

Our call to action on the logo top banner is a button showing the next course start date. The idea is to make the button as inviting as possible.

We will be making a curved rectangle for the button, then adding a gradient, shadow and finally some text. Here`s how:

Button Body

1. Select the Rectangle Tool and add a 3px Radius
2. Set the colour to #80b80d
3. Draw a rectangle on the right side width 170px height 50px

Gradient

1. Right click on the Button layer and goto Blending Options
2. Click Gradient Overlay
3. Click the Gradient in the centre
4. Change the colours to #7fba06 to #3e9204
5. Click the Reverse check box

Shadow

1. Right click on the Button layer and goto Blending Options
2. Click Drop Shadow
3. Set opacity to 46%
4. Disance and Spread to 0
5. Size 16

Action Text

1. Select Text Tool
2. Add text "NEXT COURSE STARTING"
   Century Gothic, 13pt, Regular, #FFFFFF
3. Add Text "9th September"
   Century Gothic, 16pt, Regular, #FFFFFF

Looks great!

Keeping things Tidy

Now we have completed one section, lets group all the layers.

1. Select the first later
2. hold down Shift and click the last layer (not background)
3. Press Ctrl+G to group selected layers
4. Rename the group Logo Bar

Navigation Bar

Now it is time to get our navigation bar ready. To do this we will first draw a rectangle and then use the text box tool to space our the text equally.

1. Draw a white rectangle below the Logo Banner three boxes deep,
2. With the Text Tool click and hold to draw a box inside the white box
3. Enter the navigation titles with single spaces between each word.
   "Home Courses Booking Instructors Resources Gallery Contact"
4. Change the font to Verdana, Regular, 14pt, #518e00
5. Press Ctrl+T to show the Paragraph Pane (or go to Window > Paragraph)
6. Click PARAGRPH on the Pane
7. Change the text alignment to Justify by clicking the Justify Icon

We are here

1. Finally we need to add a small grey box behind one of the navigation items to show this is the page we are on.
2. Group the navigation layers into a NAV group.

Top sections done, just three more to go!