Create a Stylish Web layout using Photoshop

AD

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 ๐Ÿ™‚

This is how the final Version will look !

Website Layout Template final turorial

Download this Freebie

Simply enter your email address and the download link will be sent right to your inbox. If you did not get an email please check your junk folder.

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.

Photohsop Layout Tutorial

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.

Photohsop Layout Tutorial 2

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.

Photohsop Layout Tutorial 3

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.

Photohsop Layout Tutorial 4

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.

Photohsop Layout Tutorial 5

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.

Photohsop Layout Tutorial 6

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.

Photohsop Layout Tutorial 7

Make a New layer for the selection.

Photohsop Layout Tutorial 8

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

Photohsop Layout Tutorial 9

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.

Photohsop Layout Tutorial 10

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

Photohsop Layout Tutorial 11

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.

Photohsop Layout Tutorial 12

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.

Photohsop Layout Tutorial 13

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.

Photohsop Layout Tutorial 14

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.

Photohsop Layout Tutorial 15

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.

Photohsop Layout Tutorial 16

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.

Photohsop Layout Tutorial 17

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.

Photohsop Layout Tutorial 18

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

Photohsop Layout Tutorial 19

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.

Photohsop Layout Tutorial 20

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.

Photohsop Layout Tutorial 21

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.

Photohsop Layout Tutorial 22

Photohsop Layout Tutorial 23

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.

Photohsop Layout Tutorial 24

You can also put some text overย  there.

Photohsop Layout Tutorial 25

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.

Photohsop Layout Tutorial 26

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

Photohsop Layout Tutorial 27

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

Photohsop Layout Tutorial 28

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

Photohsop Layout Tutorial 29

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 ๐Ÿ™‚

Photohsop Layout Tutorial 30

So Thanks for taking time to read this tutorial. Have a nice time ๐Ÿ™‚

Further Related Readings

Copyrights © 2016 - Designzzz. All Rights Reserved