Designing good looking clean and functional Web layouts is an essential part of a Web Designers life. In this tutorial we are going to create a clean and professional Web layout in Photoshop from scratch. Along the way you can learn useful methods to create designs. So get started!

Preview of Final Results

website template

Create a Professional Web Layout Photoshop Tutorial

Resources

Step 1 : Mockup

Before we start designing, we need to plan out the requirements, looks and the functionality. Then we need to fit these ideas into a layout to execute them visually. Mockups and wire frames are greatly useful to create layouts with lot of flexibility. It is a best practice and highly encouraged in the Industry.

I put the below one together using only grey tones. That way we eliminate color from the scene at this point. So that we can concentrate on the layout as a whole and avoid messing up with colors. That gives much freedom to quickly alter and rearrange things. A mockup can be as detailed as you want. For this purpose I am going with the below one. Just briefly defining the layout and what goes where.

img(1a)

Step 2 : Set up the Canvas

So we have a blue print for our layout. Let’s actually put the design together! We are going to create a 960 pixel wide layout. Create a new document at 1200 x 1500.

img(1)

This is a 960 pixel wide layout, so we need define the work area by adding guidelines. Press Ctrl+A to select the entire document.

img(2)

Go to Select > Transform Selection. Shrink the selection down to 960 pixels wide. That is the work area of the layout.

img(3)

Add guide lines to the selection.

img(4)

We need to create some padding between the border and the content that we will add later! With the selection active again choose Transform Selection. Resize the selection to 920 pixels wide. That means 20 pixels of padding each side totaling 40 pixels of padding.

img(5)

Add guides to the selection.

img(6)

Step 3 : Create the Header

Let’s create the header of the layout! Make a selection that is 465 pixels in height.

img(8)

Fill the selection with a gray value first and later use the Layer Styles to add colors and gradients. Follow this throughout the design to maintain a visual hierarchy.

img(9)

Add Gradient to the header. Double click on the layer thumbnail. Select Gradient Overlay. Create the below 2 color gradient. Use the settings.

Pages: 1 2 3 4

122 responses to “How to Create a Professional Web Layout in Photoshop”

  1.  Avatar
    Anonymous

    these steps are written like garbage. No explanation, WRONG screen shots or NO screen shots. 5 hours in and I still cant do finish the 2nd page. There should be a vid on this. Pencil gradient layer doesn’t work instruction are 100% useless, Patter doesnt didnt work not only that when I go to delete it It delete a full layer that I had to do again. This “beginner” training is NOT beginner level.

    1. Photoshop Tutorials Staff Avatar
      Photoshop Tutorials Staff

      What step are you stuck on?

    2. don't blame Avatar
      don’t blame

      Photoshop Tutorials Staff, we were all sent here from a class assignment. Anon doesn’t understand anything and is venting.

  2. Anonymous Avatar
    Anonymous

    Tutorial Low key difficult

  3.  Avatar
    Anonymous

    Excellent tutorial for beginners.

  4. K.kushal Avatar
    K.kushal

    Computer science engineering

  5.  Avatar
    Anonymous

    It’s not a button.

    You click OK to close the gradient settings.

    Then click and drag left to right on the document to draw the gradient.

  6. tvl courses Avatar
    tvl courses

    This is a well-written and very useful article. Thank you for sharing!

  7. Luis Avatar
    Luis

    the initial dimension change to width of 920 pixels, doesn’t seem correct.

  8.  Avatar
    Anonymous

    I am confused about applying the gradient mask. I cannot find the panel that is shown under where it says “apply the above gradient”

    1.  Avatar
      Anonymous

      me too

  9. Hina Avatar
    Hina

    Useful tutorial

  10. A K Sharma Avatar
    A K Sharma

    Hi Dear

    It was a wonderful tutorial that I have seen on the web . I tried to copy the entire process but I faced a problem in maintaining the proportions of the type size. your size set for the logotype with size 40 is so big in my Photoshop that I discard the Idea of keeping same size and I used the font size according to my assumption.

    I used 14 pt to maintain the size of the logo type to fit on the top . I reduced the size of the “Home” to “Contact”, means navigation bar to only 4 pt to look good.

    Now would you please help me in explaining how did it happen and what is wrong with this size ?

    I will be really thankful to your for your co-operation

    1. Photoshop Tutorials Staff Avatar
      Photoshop Tutorials Staff

      Go to Image > Image Size and make sure that your document is 72dpi. Here’s an explanation: https://www.photoshoptutorials.ws/photoshop-tutorials/font-big-small-photoshop/

  11. DELA NOVITASARI Avatar
    DELA NOVITASARI

    Good evening, finally I got a tutorial about photo manipulation in photshop, this tutorial is very good for me and people who visit this website, thank you for the tutorial, stay safe and keep it healthy.

  12. Andika Aprianus Avatar
    Andika Aprianus

    Thank you for the article. You explained it well, very detailed at each stage of the stages, I might be a little layman with Photoshop. but this article made me looks more skilled. the best is the results have been provided.
    I hope you make a new tutorial with themes that may be more different and different concepts. thank you

  13. Veeru Avatar
    Veeru

    Nice tutorial Thank you

  14. faris Avatar
    faris

    Hi, im a beginner at photoshop. And i’m stuck at making highlight line at step 3. I can’t change the line color to gradient. It keep the color i choose before i draw the line

    1. Photoshop Tutorials Staff Avatar
      Photoshop Tutorials Staff

      Sorry I don’t quite understand which part you’re stuck on. Can you elaborate on what you’re doing?

    2. youssef Avatar
      youssef

      Hello, you can fix that by ading a mask to the layer itself.

      Make sure that you click on the gradient tool(G) then go to the layers panel and choose the line layer and add a mask to it. then click on mask and apply the gradient with same colors in the tutorial above.

      It will very helpfull for you to understand how mask works, so i reccomand you learn a bit about it,

      Goodluck.

  15. bIMLESH Avatar
    bIMLESH

    good job

  16. Cristos Avatar
    Cristos

    The tutorial is very great
    Thanks
    But how can we add the HTML an links

  17.  Avatar
    Anonymous

    thank you!!

  18. Albert Sandoval Avatar
    Albert Sandoval

    This tutorial is great for using photoshop.

  19. ClipartFreak Avatar
    ClipartFreak

    Thanks! A tutorial how to get html css code for this template would be great!

  20. AAG Avatar
    AAG

    There are so many free theses out there for web layouts, I am not even sure I would spend the time it takes to create my own :)

  21. Галина Avatar
    Галина

    Thank you! Great lesson! Very informative!

  22. Ajish Cheriyan Avatar
    Ajish Cheriyan

    Wow, its really amazing what you did. Great tutorial, I like to us the information for my future website designs.

  23. newspeed Avatar
    newspeed

    its awesome, thank you!

  24. Sadia Avatar
    Sadia

    Hi,

    I understand this is a design tutorial…but is there a tutorial for turning the design into an actual website with the coding and stuff?

  25. $hiv Avatar
    $hiv

    No step for how to add guidelines,for selection !!!

  26. Mari Avatar
    Mari

    This tutorial is really nice…Can anyone tell me how to convert these psd files to codings….and run it on my browser……………….?

  27. Katherine Avatar
    Katherine

    I’m really lost with this step “Blend the pattern smoothly into the header. Add a Layer Mask to the pattern layer. Pick a soft brush and paint with a large soft brush. Pick #ffffff for brush color. Reduce the brush Opacity to about 60% and paint. If you find it too strong then adjust the layer opacity individually.” … is there another tutorial I should look at to understand layer masks? Thanks!

  28. Saif Avatar
    Saif

    Some technical change or creative steps can improve the design than what are shown here as tutorial. I believe tutorial are just an example or way, if someone can walk well maintaining that way and look around the road, the learner can make something more appealing design. BTW…this was help thought. Thanks :)

  29. Shohel Rana Avatar
    Shohel Rana

    This is a great tutorial indeed on creating professional and eye catching website layout. Thank you for sharing.

  30. seth Avatar
    seth

    thanks for this tutorial

  31. Graphic Experts Avatar
    Graphic Experts

    I’m so late to your post but the post is really immortal. I enjoy your post. Thanks

  32.  Avatar
    Anonymous

    great tutorial

  33. margaret karanja Avatar
    margaret karanja

    I was unable to use the colors but i have achieve the procedure with
    differents colors

  34. Zoya Avatar
    Zoya

    This is my first designing, it came so well. thank you for such tutorial.

  35. A Avatar
    A

    Great job! thanks

  36. Katie B. Avatar
    Katie B.

    Awesome tutorial! Thank you so much for all your hard work and effort. ;)

  37. ravi raut Avatar
    ravi raut

    how to add guides lines to website

  38. Aung Myin Thu Avatar
    Aung Myin Thu

    how to make a slide show in photoshop

  39. Altaf Avatar
    Altaf

    Thanks Too You my dear im done my templete

  40. danyalmuneer Avatar
    danyalmuneer

    good tutorial

  41. felix Avatar
    felix

    use full my work ides thanks bro

  42. Mushtaq Ahmad Khan Avatar
    Mushtaq Ahmad Khan

    awesome tutorial

  43. Emperor Avatar
    Emperor

    in fact, u hav done a gud research on web design, u did a gud job. weldone, can we have the video tutorial?

  44. yunus Avatar
    yunus

    this is great tutorial for me, thanks for sharing…

  45. Ovais Aslam Avatar
    Ovais Aslam

    Hi!
    Very nice tutorial, But I think managing layers in website making is also very difficult, would have been much better if you mention about them………..

    but seriously Guy, this is very GOOD. helped me a lot, Thank you soooo Much………..

  46. Joan Cam Avatar
    Joan Cam

    Great tutorial.

  47. meena Avatar
    meena

    can u please tell me the about the guide line how to add guideline according to the transformation selection

  48. friendlyone21 Avatar
    friendlyone21

    I’m glad I found this. I don’t want to sit through 2 and a half hours of someone explaining this stuff and having to keep pausing and rewinding when I can just look at each step as I go.

  49. Shelly Avatar
    Shelly

    I’m sorry, but this is SO CONFUSING. I have almost 0% knowledge in Photoshop, and I keep getting lost. It’s like you skipped a LOT of minor steps & assumed that folks already know all the menus/options in Photoshop. It takes me 30+ minutes for EVERY STEP, because I have to figure out ALL menu options/exact steps for everything.

    And now I’m stuck at the Transform (Ctrl+T) part, and the section directly after it (where you press V to move it):

    1. You never said how large our selection area should be (200px? 50px?).

    2. I transformed it, and now at the bottom there’s an ugly gap matching my background color.

    3. ALL of my Align buttons are grayed out…meaning I can’t center my “highlight”. At all.

    …Someone, anyone, PLEASE HELP!!! Thank you in advance.

    1.  Avatar
      Anonymous

      AGREED this thing is a JOKE, there is nothing to help you through each step. It only says do this and the screen shots are 100% useless, NOTHING like what I have. 5 hours just to skip 1/2 the steps because things dont work.

  50. Karen Avatar
    Karen

    Hi it will be great if your comments at any step were more simple.

  51. breeze Avatar
    breeze

    thank you this is really good i didnt think it would accually work in 3 easy steps thank you.
    :)…….

  52. breeze Avatar
    breeze

    this is ally good to do i didnt know i accually get my work done in 3 steps thank you
    :)

  53. ninad Avatar
    ninad

    awsme……….pls. send some more tips

  54. Dilan Leelarathna Avatar
    Dilan Leelarathna

    Really nice and useful tutorial. Really this is the best tutorial about making web template that I read. I will try this with my next projects. Thank you Niranth.

  55. Play It! Choco. Avatar
    Play It! Choco.

    this is really an awesome tutorial. I learn a lot. thank you for sharing this with us.

  56. mohammed Avatar
    mohammed

    Nice to See Amazing Work…

  57.  Avatar
    Anonymous

    cool

  58. Pankaj Sisodiya Avatar
    Pankaj Sisodiya

    Really gr8 tutorial…thank you.

  59. Avijit Apu Avatar
    Avijit Apu

    Good & Very Helpfull.

  60. Palanivel Avatar
    Palanivel

    This is really a good stuff. Also can you explain to slice the layout and make it as HTML and CSS that would be more helpful !!

    Thanks, Pal

  61. Hotshot Avatar
    Hotshot

    Great job :) But how to finalize it in Dreamweaver? :/

  62. Monis Avatar
    Monis

    Thanks it helps me ……

  63. johnny Avatar
    johnny

    Any idea how to make changes in HTML? BTW nice tutorial :D

  64. Lynette Avatar
    Lynette

    Brilliant tutorial, really clear instructions, thank you for your generosity.

  65. FORTUNE Avatar
    FORTUNE

    This website is undoubtedly the best for photoshop I’ve seen yet…. But how can I add html and stuff?

  66. New Being Avatar
    New Being

    How to add guide line ?? :(

  67. JD Avatar
    JD

    Great Tutorial.

    Would you pleae let me know now what is next step with this tutorial

    Thanks in advance.

    jd

  68. chandramouliu Avatar
    chandramouliu

    Awesome, Thanku

  69. Messias Avatar
    Messias

    Thank you so much for the tutorial.

  70. Roshan Avatar
    Roshan

    I followed your tutorial and helped me a lot to create my first Website design on photoshop. Awesome tutorial on photoshop.

  71. Tayyab Malik Avatar
    Tayyab Malik

    thanks alot i complete my own tempelate thanks alot

  72. rahul ludhani Avatar
    rahul ludhani

    A thank you note from bottom of my heart.

    I am from india and loved your tutorial .

  73. Tayyab Malik Avatar
    Tayyab Malik

    Plz koi ye batae second step kese solve hoga me yaha phans gaya ho help me fast wairing 960 wali line samaj nahi aa rahi

    (plz splve my problem, i am not understand 2 setp how can i do 960 px lines)

    1. rahul ludhani Avatar
      rahul ludhani

      Saaf mention kiya hai pehle ctrl+a se canvas select karna hai .

      Then Go to Select > Transform Selection. Shrink the selection down to 960 pixels wide.

      Easy hai ;)

  74. lester Avatar
    lester

    how about coding part after creating this staff??? how to put links and other functions??

  75.  Avatar
    Anonymous

    how to creat this websit…..?

  76. Chloe Mei Avatar
    Chloe Mei

    thank you for this tutorial! it helped a lot! i love it XD

  77.  Avatar
    Anonymous

    what is this nonsense…

  78. Simarjot Singh Avatar
    Simarjot Singh

    Great job.

  79. Journey4tech Avatar
    Journey4tech

    Can u tell me how to link this all.
    ths is frontin only na
    plz tell me link of tutorial from where i can link all this
    through photoshop.

  80. uresh Avatar
    uresh

    Thanks buddy for teach those.
    but i have a couple of questions,
    1. How we add this layouts in to the Joomla
    2. How add the Links for those icons.?

    please feel free time email to me the answer that would be very great full

  81. chrisine Avatar
    chrisine

    How to insert a photo to make it background for the layout of the magazine??????????

  82. pooja Avatar
    pooja

    yes it is worth…!

  83. TotalNewb Avatar
    TotalNewb

    Please explain “Add Guidelines”. Thx!

  84. Shruti Avatar
    Shruti

    Wow… I have so much to learn. Thank you for this inspiring article with the beautiful examples of clean website design. I particularly like Caava Design. The cutout showing the background through it is inspired! Not to mention the other details like the moving arrows and graphics upon scrolling. Gisele, you obviously have a great eye for design. Result

  85. Jerralyn Tanoc Avatar
    Jerralyn Tanoc

    Nice Photoshop tutorial, easy to follow!

  86. Isaac Avatar
    Isaac

    Wawwawaw.. that’s great work Man , but i need the second part where we slice it into a webpage man

  87. jeewan singh Avatar
    jeewan singh

    nice tutorial……

  88. Viacheslav Avatar
    Viacheslav

    vince, agree.

    Nice picture, no more. What to do next? Useless lesson. Designers for designers in isolation from the real development.

    draw car? is not enough, need build to drive.

  89. zakir375 Avatar
    zakir375

    Your efforts is matchless, please send more work and send me your new work. Thanks.

  90. Munim Hossain Sazid Avatar
    Munim Hossain Sazid

    very helpful…..thanks a lot

  91. Tony Tran Avatar
    Tony Tran

    Hi, It’s a very good tutorial. Can you make a tutorial for converting this PSD template to HTML/CSS ? If so, I thank you very much !

  92. dzengineer Avatar
    dzengineer

    hello, this is an awesome tutorial i made one by own thanks ^^

  93.  Avatar
    Anonymous

    thank you.

  94. Parvez basha Avatar
    Parvez basha

    like this i think it will help me alot

  95. Sk Noor Islam Avatar
    Sk Noor Islam

    nice

  96. i hate you Avatar
    i hate you

    no…..just no!!!

  97. Concepter Avatar
    Concepter

    It’s Awesome.
    But I don’t understand one line.
    So please if anybody understand this link please reply.

    “STEP : 4: Now create a simple checker pattern and apply to the header. Pick the Pencil Tool, set the brush size to 2 pixels and add two dots that are touching each others corners. Turn off the background and select the dots. Choose Edit > Define Pattern.”

    Please create an img and show how did you crate pattern.
    Waiting for help.

    Thank You #

  98. Carl Avatar
    Carl

    how to put it into html code ?

  99. InThaLabb Avatar
    InThaLabb

    So what is the process and transferring this layout to dream weaver and act as spectacular as it looks? If you can email at [email protected] or on here I’d greatly appreciate it.

  100. Jai Avatar
    Jai

    I was redirected to this post from a html slicing tutorial of this psd layout. Can some one pls post the link of that html code?

  101. Dougieladd Avatar
    Dougieladd

    This is one the best tutorials on layout for the web I’ve seen. There are sooooo many poor quality tutorials out there. This is one of the good ones, well done!!

    1. satish guddad Avatar
      satish guddad

      this is really a great tutorial,really thanks ! wonderful job

  102. vince Avatar
    vince

    this is just for the image, how about the coding part??

    1. Monis Avatar
      Monis

      it’s adesining tutorial

  103. Hamza Avatar
    Hamza

    Awesome … Thanks ;)

  104. sunil Avatar
    sunil

    Great tutorial. :)

  105. jp2gmd Avatar
    jp2gmd

    cool tutorial!

  106. web developer Avatar
    web developer

    Hi..
    Thank you for making the only actual tutorial that I’ve been able to find. Other ‘tutorials’ haven’a actually explained how to do things, but you did so, very clearly…

    1. uresh Avatar
      uresh

      Yes…..of course

  107. betty Avatar
    betty

    im sorry for asking..

    how to put links and html stuff?

    1. John Personala Avatar
      John Personala

      All work u have to do in dreamviewer, u can apply templates on the web, by dreamviewer,

  108. iraa Avatar
    iraa

    this is just awesome thank you soo much :)

  109. daisopa Avatar
    daisopa

    wow! that’s a great tutorial,really thanks ! great job

Leave a Reply

Your email address will not be published. Required fields are marked *