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

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

create free website wix below post

Further Related Readings

  1. David June 22, 2010 at 7:39 am

    OK. Great. Awesome design! The big question is this. How do you use that PSD file to generate all of the necessary .CSS, html, etc. that is required for the website? I haven’t used Photoshop for about 5 years. Does the program now generate all of that stuff for you? What about changing the text in the pages. Do you need to go into Photoshop each time you want to tweak the design a little bit? Or can this be done manually?

    1. Jillz June 22, 2010 at 8:56 am

      @David, Glad you liked the design. You can directly convert the PSD into Html page using Slicing tool in Photoshop. In the other side, you can manually conver the PSD to htm/css if you know them well. You can create tables and rows according to the size of the images used in the PSD work.

  2. Business June 24, 2010 at 2:51 am

    Designing your websites with photoshop is something that will greatly enhance the final result of your website. Not only will you know where your trying to end up with the finished site, but the sheer power of the tools on offer allows you to create breath-taking designs in a matter of minutes. However, it’s not always that easy, so I’m going to run through the basics for making a beautiful, clean design in photoshop.

  3. Ramalho June 24, 2010 at 11:51 am

    Hi WEB Family,

    Awesome tutorial & very useful.

    Thanks for sharing

  4. Hermitbiker June 24, 2010 at 9:33 pm

    …. so this is your 1st tutorial on your website…. very cool and a brilliant tutorial…. thanks Ayaz !!

  5. Tenerife flights July 5, 2010 at 7:34 am

    I’ve always found Photoshop a bit of a trial as it is very complicated (to me at least) so thanks for make this bit look easy.

  6. alveena September 27, 2010 at 4:51 am

    plz give some tutorials of phtoshop cs2

    1. Ayaz Malik September 27, 2010 at 5:42 am

      Hello Alveena, Yes sure. this tutorial can also be done in CS2 . cheers

  7. alveena September 27, 2010 at 9:49 am

    yeh but i am beginner to use photoshop. not much know about this software the tutorial was good but if you suggest how can know about basic knowledge of that software

  8. Ayaz Malik September 27, 2010 at 10:53 am

    K. here u can find alot of basic to advance photoshop tutorials :

  9. Lionel Schaffer October 11, 2010 at 5:56 am

    Howdy please forgive my grammar, I am still learning. I found your website on Blog directory “Create a Stylish Web layout using Photoshop” was more or less close to what I was hunting for, but after studing through your blog post I still was not able discover clear solution to my question and this is driving me cuckoo. I appreciate your website and think it is without a question handy but I think you can make it even better if you improve your internal blog search to make it easier for people to locate required information within your website. It can be easily done by installing wp pluginโ€ฆ I think addon was called enhanced wordpress search it has several valuable options like searching pages, search attachments. If you need help about adding enhanced blog search you can email me at [email protected] Thank you I hope you have a outstanding day

    1. Ayaz Malik October 11, 2010 at 6:24 am

      @Lionel Thanks for the idea i will get on to it and hope it improves the search experience for users ๐Ÿ™‚

  10. Baraklis November 23, 2010 at 7:26 am

    hello there.
    first great job Jillz – awesome layout.
    Is there any chance to send me this layout in html/css code?
    i have done it manually but there is a lot of mistakes that need to correct.

    i would like to thank in advance!

  11. Tenerife Holidays January 19, 2011 at 10:59 am

    Going to bookmark this, found the shadow part on the three boxes especially useful. When I add shadows normally I use the effects tool and you never really get the right look. Using your method should give a much more flexible option for the future. Many thanks

  12. visitor February 1, 2011 at 12:33 pm

    nice tutorial. I just wish u had covered how to use the slice tool

  13. artistjo March 28, 2011 at 4:24 am

    Nice tutorial there Bud! Thumbs up! I’m an amateur graphic designer, I made a few Web layout design jobs using Photoshop – layout design only thou. I mean, I have no problem creating designs/layout using Photoshop, but I’m a bit “clueless” on how to convert it into HTML or etc. required to publish it on the Web… Like one visitor said, I hope you you could create a tut/or give me the idea on how to use the slice tool. Thanks in advance!

    1. Ayaz Malik March 28, 2011 at 4:33 am

      Hello Artistjo, thanks im glad you liked it ๐Ÿ™‚ .
      about html conversion i will be converting this same psd to html/css very soon, in the meanwhile you can take a look at this : here i have taught how to convert a psd layout to html/css. Hope that helps ๐Ÿ™‚

  14. artistjo March 28, 2011 at 9:19 pm

    Its helpful Sir Ayaz, big Thanks! ๐Ÿ™‚

  15. Faisal khan December 19, 2011 at 11:40 am

    i am stuck in pen shape tool setp… i am very bad in using pen tool please help me out.

Comments are closed.

Copyrights © 2016 - Designzzz. All Rights Reserved