Photoshop Intermediate Web Site Design

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.

Organized Workspace

I find it best to have organize 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 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 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 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 OptionsButton Gradient
  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. Action TextSelect 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 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 Justify

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!


Header Section

Now we have created the Logo Banner and Navigation it is time to start on the header section. We will have three main layers, the background, the stock image and the text.

  1. Create a white box 931px X 311px

  1. Open the stock image 72497169.jpg
  2. Copy and past it into your design
  3. Make sure the new layer is above the shape layer
  4. Layer > Create Clipping Mask
    You will see the image appear inside our new box.

Header Image

Fine Tuning

We need to resize our stock image and add a fade ready for us to add the text. The fade is achieved by adding a Black to White gradient on a clipping mask. The black colours make the picture see-thru

  1. Resize the image so you can see all of the mans body

  1. Add a “clipping mask” at the bottom of the layers pannel. Clipping mask
  2. Select the gradient tool
  3. Select the Black – White gradient
  4. Start the gradient at the edge of the image and move itonto the image so you get the fade effect.

Heading Text

  1. “Over 100 students”
    - Verdana, 36pt, Bold, Colour #736831
  2. “have taken advantage of our
    professional service and care.”
    – Verdana, 22pt, Regular, Colour #736831
  3. We provide teacher lead Web and Graphic Design
    courses in Bangkok. Courses are taught
    in English by qualified and experiened instructors.
    - Verdana, 14pt, Regular, Colour #464646
  4. Grow your ideas online with WCB today!
    - Verdana, 14pt, Regular, Colour #464646

Mid Section

Here we can use some time saving tequiniques by creating one section, copying it and changing it a little. This is used a lot with web design when you have a lot of similar elements.

  1. Make a white rectangle below the header
    297px by 310px
  2. Add another rectangle on the top
    297px by 40px
    , colour #3e3e3e
  3. Add the text header text “Web Design Courses”
    Verdana
    . 24pt, Regular, #FFFFF (white)
  4. File > Open > icon-web-site-design.gif
  5. Copy and Paste into your design and place in the center
  6. Add text “Beginner, Intermediate and Advanced Courses in professional Web Site Design.”
    Verdana, 12pt, Regular, #877943
  7. You can add underline and bold using the Paragraph Pane
More Calls to Action
  1. Add a rectangle
  2. Right click on the layer > Blending Options > Gradient Overlay
  3. Add gradient from #50dc81 to #00b544
  4. Check Reverse
  5. Add the text “Click here for all the details:
    Verdana, 12pt, Bold , #877943

One down, two to go
  1. Select the layers for this section
  2. Group them “1”

  1. Right click on Group 1 and Duplicate layer.
  2. Move the new group to the centre of the canvas
  3. Change the title to “One-to-One Training”
  4. Remove the Icon
  5. Change the icon to “icon-one-to-one.gif”
  6. Change the text to “Do you have a specific thing you want to learn? Contact us today about personal courses.”
  7. Right click on the button layer and change the gradient #e3c768 to #bc9202
  8. Finally change the button text to “Contact us with your requirements”.
  9. Rename the group “1 Copy” to just “2”


Final Panel

  1. Final pannelRight click on Group 2 and Duplicate layer.
  2. Move the new group to the centre of the canvas
  3. Change the title to “Corporate Courses”
  4. Remove the Icon and change to “icon-corporate.gif”
  5. Change the text to “Do you have a specific thing you want to learn? Contact us today about personal courses.”
  6. Right click on the button layer and change the
    gradient #50a6db to #0275bd
  7. Finally change the button text to “Click here and to find out how”.
  8. Rename the Group “2 Copy” to “3”
  9. Group 1,2,3 into a main group called “MID SECTION”

Great! The top and mid section are all done, just one more part to do, the footer

Footer

The footer plays an important role in our web site as it is where we ask users to sign up for the newsletter, find us on the various social networks and find our office. It plays the final piece of our puzzle.

  1. Make a large rectangle at the bottom of your design width 935px by 240px colour: #2c2c2c
  2. Add three headers equal distance apart “Newsletter”, “Social Networks” and “Contact WCB”
    Verdana, 12pt, Bold, #969696
  3. Using the Line Tool Line Tool, create three lines under the headings, use the same colour as the heading #969696


Newsletter

First of the columns is the newsletter. This will be a simple form and ask users to give their name and email.

  1. Add the text “Email” Verdana, 12pt, Regular, #FFFFFF
  2. Add a Rectangle width 256px, height 22px and colour #b9b9b9
  3. Add “Name” and the final rectangle
  4. Use the image button.gif as the button
  5. Group all the layers and call the group “Newsletter“.


Social Networks

  1. Create the same header and underline as the newsletter
  2. Add the social networks; File > Open then Copy and Paste into the design
    1. icon-facebook.gif
    2. icon-twitter.gif
    3. icon-audioboo.gif
    4. icon-linkedin.gif

Contact
Adding the contact details is just text, use Verdana, 12pt, Regular, #FFFFFF

  1. “Email: carl@webcoursesbangkok.com This e-mail address is being protected from spambots. You need JavaScript enabled to view it
  2. “Tel: 08-6782-4118″
  3. “Address: (make this line bold Bold using the Properties Bar)
    12th Floor, 253 Asoke
    Sukhumvit 21
    Bangkok
    View Map” (make this line underline Underline using the Paragraph Panel)

Well done !

Congratulations. As you can see there are a lot of steps in making a design, the more you get used to using Photoshop the quicker you will be able to make a design and use your creativity.

If you have any questions contact: carl@webcoursesbangkok.com

For more tutorials on Photoshop try:

http://dzineblog.com/2008/07/best-photoshop-layout-design-tutorials.html
http://psdtuts.com/interface-tutorials/create-a-sleek-high-end-web-design-from-scratch/
http://www.adobetutorialz.com/articles/2896/1/Online-Photo-Portfolio

  • imaya

    I am really loving to this blog very much. because this blog and Web Courses Bangkok help me to understand Photoshop very clearly. Its simple and amazing. It starts from very beginning. Step by step I improved my knowledge. You might be think Photoshop is only for the image editing as I thought before read this. No you wrong. You can do something else tooo. read this and try it out. You will love this.

  • Troy

    Just finished the tutorial. Very thorough and detailed, although some of the small images are missing. Not a big problem though I still got the gist from the instructions. Can’t wait to turn this into HTML and CSS! Thanks Carl!

  • Pingback: 2010 Graduates in Web and Graphic Design | Web Courses Bangkok

  • http://www.webcoursesbangkok.com carl68

    I like to recommend this tutorial because it is how a lot of other tutorials are done. It is great that I can send our Intermediate Trainees to here as well as the screencast.

  • Steven Brothers

    Nice job Imaya, first time I have seen this tutorial, It would have come in handy when I took the intermediate course.

  • http://www.myspace.com/526067581 Leia Schlund

    There’s lots of differing beliefs on design and style that it’s impossible to please most people sadly…