Create a Stylish Web layout using Photoshop

Create a Stylish Web layout using Photoshop

This is first Designzzz’s Photoshop based website layout tutorial. So lets try to create something new and something very stylish yet professional. So in this tutorial, I will teach you how to design a smart business web layout. If you are a beginner, don’t worry, I will explain things more clearly so that you can catch up things. If you still got some problems with the design steps, please do refer the download able PSD file of this tutorial or leave a comment and I will try to answer you

Before we go further remember to Subscribe to our Free Rss Feed or Follow us on Twitter to stay updated with our postings

This is how the final Version will look !

[Download PSD]

So start with a new blank document. Use the following parameters for the Document as shown in the screenshot. Width: 1024, please take care about the height, sometime you may need to change the height.

Now we are going to choose our color combination for the web layout. Here I’m using #36010b. You can choose your favorite color instead and its upto you.

Now we need to create the Top (header) section of the page. So Choose the Selection Tool and make a selection from the top of the page upto a height of 96px. In this section, we will run our LOGO and the basic Menu links.

Now Make a New layer (Ctrl + Shft + L) and fill the selection with the color you have choosen (here it’s #36010b). This will act as the basic background for the LOGO and Menu bar. So lets make it some more attractive. So Using the Pen tool, make a half circle as shown in the picture.

Now right click when the Pen tool is selected and click Make Selection Option. Now you can select that particular portion and fill with a color #660013. You can also make the semicircle with the help of Elliptical Marquee Tool.

You can put a small light border over the semicircle using the pen tool itself. Draw an outline using the pen tool and right click, choose Stroke Path and there you can select the brush with radius 1px. Make sure to choose a little lighter color for the border. Now make a row of elements like the following screenshot. You can use the Duplicate layer option from the layer panel to do the same.

Now we need to make a small featured area in the Header section itself. So using the Selection tool, make a selection just beyond the semi circles with a height of about 207px.

Make a New layer for the selection.

And fill the selection with color #660013. So it will look like coming from the semicircle portion.

So lets now move on to the menu bar. For a change, we are creating the menus using Rounded rectangle tool with radius 5px (Shortcut: U). Make 3 menus as shown in the image. Make sure that the 3 layers are behind the feature layer and the opacity of the 2nd and 3rd layer is less than the first (say 70%). Refer the Screenshot.

Put the menu text with the same effect we used for the menu. So 2nd and 3rd text color should be little dark.

Inorder to get some realistic effect, choose the Semicircle layer and Go to its Blending Options. (Right click on the layer and choose Blending Options in the Layer Panel). Check the Drop SHadow Effect and use the following parameter for the shadow.

Now we need to create the logo section. You can use your existing logo or can create a New text based logo just like I have done for Designzzz.com. You can make use of the Blending Options for better look of the Logo.

Our featured area is not complete yet. So we need to put one image and some text over there. So I have choosen Rounded rectangular tool to make the image area for the featured section and filled the section with a color #6e0215. You can put your favorite image there and no need to put the empty section.

Now section for the featured text. I have used some dummy text in this area and given a light shadow effect using the blending Options.

Lets now move on to the body part. A welcome note is essential for a business web layout. So  Ihave used some dummy text and a WELCOME heading and a small icon. Refer the PSD for the icons.

Under the welcome note, we need to create 3 block for seperate items. So inorder to make them stylish and professional, use the rounded rectangle tool and draw 3 boxes and fill them with white color (#ffffff). Also put a small stroke for them using the blending options. Use the color #cdcdcd for the stroke.

I’m giving a little effect for the box shadow. So for that select the elliptical marquee tool and draw one ellipse just like I have done. Make sure you are creating a seperate layer for each of the element.

Now fill the selection using a black color. Make sure you have created a new layer (ctrl + Shift + L) for this shadow effect.

Now go to Filter –> Blur –> Gaussian Blur and set the radius to 2 and click OK with the layer selected. You will have a small bluring effect for the ellipse.

Now bring this layer under the box layer and arrange it in such a way that only the botton portion of the ellipse is seen outside. Refer the following screenshot for more information. Now use this methode to create the same effect for the rest of the boxes too.

You can put different Texts for the bosex like Features, Statistics, Latest news etc.. and some dummy text also. This can be replaced later if you wish to code this PSD.

Now lets add a small Latest News announcer. That is just a rectangular box in which the latest news will show as a marquee. Choose the Rounded rectangular tool and put a small gradient effect using the Blending Options.

You can also put some text over  there.

Now we  need to create the footer section of the webpage. For that, choose the Selection Tool and make a selection just below the box that we have created now.

Fill it with a black color. Make sure you have created a new layer for the same.

You can put some links and twitter updates in this section, also the copyright details if you wish to contain.

refer the screenshot for more idea about the footer section. This will give more attraction to the visitors.

There we go.. We are almost finished the layout designning. Tripple check for any more mock ups in your design. I havn’t used a image in the featured section. But you can choose your picture in that area You can always make use of the PSD file for any referance OR just make a comment in the Comment section and I will try to answer for it

[Download PSD]

So Thanks for taking time to read this tutorial. Have a nice time

Follow Designzzz on Facebook