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.
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:
Designing the website
Create a new Image 780x1000
Fill the background with the colour #ededed using the fill bucket tool.
Create a new layer and name it 'Header'.
Use the Rectangle select tool and Drag across the full width which is 780x and a height of 125x use the Ruler as guides.
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
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.
Add text Gimp-tutorials.net with size 30px and font 'Trebuchet MS Bold' you can try your own name and fonts of course :)
Now to create the reflection duplicate the text name it logo reflection and place it below the original one
Using the flip tool will flip the logo reflection layer vertically
Select the logo reflection layer and tick the 'Keep the Transparency box'.
Use the Gradient fill tool and select 'FG to transparency' and change the color of the FG to 3a4146
Now drag from bottom to top several time to fad-out the bottom part of the reflection logo text.
Top Navigation bar, Create new Layer and use the rectangle selection tool to drag to the full width of 780x and hight of 20x
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.
Use the rectangle tool and draw a rectangle 105px wide and 8px high again use the Ruler for guidance.
now right click on the tab and go to Select>rounded and change the Radius% to 45.
Now use the Gradient fill using th same colors as the nav bar,0276cf for FG and BG to 82c9ff.
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
Duplicate the Tabs 3 times,rename them to stay organized
and space them out like this
now we would like to Centre the tabs, will do that by clicking on all the chain looking icons in the layer dialog/window
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.
Create new Layer, name it 'left menu bar"
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
chain link the tabs as well as the text and move it so its aligned like this
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
Draw another line and use the color 4e4c4c.
This is how it looks zoomed in at 200%
Duplicate 7 of the lines layer and space them out like this.
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.
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 https://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
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.
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.
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
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.
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.