For this tutorial, we will use an open source software called GIMP. Many people use Adobe software like Photoshop or Illustrator. The way of working is generally the same. This tutorial is not ment for web design professionals, for that reason we go with a free software.
Downloading GIMP
GIMP is a photo manipulation program which is virtually compatible with every operating system (Windows, Macintosh, Linux, Solaris,...). To download it, click the following link:
http://www.gimp.org/downloads/
Designing the website
Step 1
Create a new Image 780x1000
Step2
Fill the background with the colour #ededed using the fill bucket tool.
Step 3
Create a new layer and name it 'Header'.
Step 4
Use the Rectangle select tool and Drag across the full width which is 780x and a height of 125x use the Ruler as guides.
Step 5
Now Select the Fill with Gradient tool and pick the FG to BG (RGB) Gradient and add the color 000000 for FG and BG to 3a4146
Step 6
Now Drag from top to bottom make sure the line perfectly straight.
It should look like this now
For the logo will create a simple text as a logo with some reflection effect.
Step 7
Add text Gimp-tutorials.net with size 30px and font 'Trebuchet MS Bold' you can try your own name and fonts of course :)
Step 8
Now to create the reflection duplicate the text name it logo reflection and place it below the original one
Step 9
Using the flip tool will flip the logo reflection layer vertically
Step 10
Select the logo reflection layer and tick the 'Keep the Transparency box'.
Step 11
Use the Gradient fill tool and select 'FG to transparency' and change the color of the FG to 3a4146
Step12
Now drag from bottom to top several time to fad-out the bottom part of the reflection logo text.
Step 13
Top Navigation bar, Create new Layer and use the rectangle selection tool to drag to the full width of 780x and hight of 20x
Step 14
Now using th gradient fill pick FG to BF (RGB) Gradient and add the color 0276cf for FG and BG to 82c9ff, apply the gradient from bottom to top as shown below
Now for the tabs, Create a new layer and name it Tab.
Step 15
Use the rectangle tool and draw a rectangle 105px wide and 8px high again use the Ruler for guidance.
Step 16
now right click on the tab and go to Select>rounded and change the Radius% to 45.
Step 17
Now use the Gradient fill using th same colors as the nav bar,0276cf for FG and BG to 82c9ff.
Step 18
Now drag from bottom to top make sure you start from around 225px on the ruler and end at 125x on the ruler, or else the tab wont blend in with the nav bar very well, you you can see how i started and ended the fill line in the picture below keeping on trying till its perfect, i did :D
it should look like this
Step 19
Duplicate the Tabs 3 times,rename them to stay organized
and space them out like this
Step 20
now we would like to Centre the tabs, will do that by clicking on all the chain looking icons in the layer dialog/window
Step 21
now add text for each tab, ill type in home,products,contacts,about.
its a good Idea to save your work right now using the XFC format to be on the safe side.
Now time to create the left bar, it's going to besimple clean sidebar that works well with CSS Based sites, we will place it to the left side of the layout.
Step 22
Create new Layer, name it 'left menu bar"
Step 23
use the rectangle selection tool and draw a 200px and 950x high selection which will go all the way to the bottom then fill it with the colour #232323
Step 24
chain link the tabs as well as the text and move it so its aligned like this
Step 25
Now to Create the line separators for the left menu bar, create a new layer, name it Line, Zoom in to about 300% so you can see,draw a rectangle thats 1px high and almost the width of the menu the then fill with the color 232222
Step 26
Draw another line and use the color 4e4c4c.
This is how it looks zoomed in at 200%
Step 26
Duplicate 7 of the lines layer and space them out like this.
Step 27
Add some light Gradient effect to the background first Create a new layer name it 'gradient effect' then draw a 205px rectangle and fill it from bottom to top with the colour #ededed for FG and #ffffff for BF.
Step 28
Create another layer and do the same for the bottom part of the body but this time draw from top to bottom.
Now the main layout design is done, time to add some basic content, will need some nice photography touch going in there, one of my favourite free stock image sites is http://www.stockvault.net/ its 100% free! it wont cost you even a penny :P. head over there and download a suitable picture.
here is the what i used
You can download it from here
http://www.stockvault.net/details.php?gid=98&sgid=&sgid=&pid=6296
Step 29
open your new downloaded photography image and select the Scale tool and resize it from 1500 x 1835px to 1024x705, because the image is too big will only want a nice scene of it, so grab the select tool and drag across to about 569x width and 179x height from the desired scene/area,then extract/cut it by pressing CTRL+C then going to our website tutorial window and pressing CTRL+V to paste it, align and place it under the the header as shown below.
Step 30
now will add text links to the left menu, so grab the text tool type in about 5-6 words and align it perfectly in the middle of the divider lines.
Step 31
Repeat this to the other dividers and always make sure its aligned perfectly, alignment is everything when it comes to graphic design, this is how it should look
Step 32
Again grab the text tool add a few paragraphs and place it in the centre of the the empty space make sure all sides have equal space to get it perfectly aligned.
Step 33
Now the footer usually would have just the copywriter text with maybe an extra nav links, i just added the Gimp mascot that can be found on gimp.org and a small text of gimp-tutorials.net url.
That's it you have a full template All done with Gimp :) It will work with the right website hosting.
