5 Page Website Design in Photoshop with Source

Tue, May 26, 2009

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

finished-design-source1

Hello welcome to Complete Website design tutorial. In this Tutorial we’ll be creating a website in Photoshop then later on code it into a 5 page template. We’ll also be addition a nice JQuery slide effect for our featured content section using JFlow.lets get started firstlt create a new document 900 x 1090 pixels with a black background. Select the rectangular marquee tool and create a box at the top. Fill the box with a radial gradient using the colors #202121 and #000000.

116

At the very bottom of the rectangle create two 1 pixle lines ontop of each other spanning the width of your canvas.

213

Add a layer mask to your lines layer. With the gradient tool and a reflected gradient start from the middle and drag towards the edge of the canvas. Make sure forground is white and background color is black. The edges of your lines should blend into the background. You should have impressive like this.

In the top left hand corner add your website title and slogan. I’ve selected to add a few layer styles to the 2nd word in my title. The layer styles are as follows.

You should have something like this

On the same level as your website title towards the right hand side add a straightforward navigation using the rounded rectangle to create a hover state. The color of the blue hover is #0096ff.

Beneath the website title add some featured content text with a title. Next to the title make a straightforward little icon/bullet point and place it next to the title.

On the right side of the header create a rounded rectangle, just big enough to fit inside the space provided. Make the rectangle over lap the header at the bottom.