How to Design a Professional PSD layout

Designing websites might look complicated at first sight, but once you understand the algorithm/pattern it gets a lot easier.

This tutorial won’t be that long or complicated as usual webdesign tutorials. I want you to get hold of some basic techniques and methods of designing that are often ignored or not known.

Design a Professional Psd layout

This design is a great example to show a layout can look professional without being complicated.
Also it isn’t cluttered with elements (due to horror vacui), but the space provided is still used correctly.
The pattern we’re going to teach you here might help you in a lot of future works.

Step1

Create a new document with the size of 1146 x 1178 px. Make sure your dpi is on 72 and not 300. (That’s the difference between web and print documents)

Fill the background with #ebebeb

It is strongly advised to double check if your units and rulers are set to pixels instead of points or mm. This can be done in the Photoshop preferences menu.

We are going to set up a grid of guides so everything is easier to explain. This can easily be done by going to View > New Guide…
There you get a new options window where you can chose between vertical and horizontal. It might be a repetitive task to add all these guides, but it’ll help you.

Vertical: 100 120 130 140 230 320 340 380 400 700 720 740 760 1010 1020 1040
Horizontal: 56 166 186 316 326 416 420 446 486 527 646 686 907 918 1133

Or if you’re in a lazy mood, just download the .psd at the end of this tutorial.

Step2

Create a new Layer Group. Call it “Logo”. In there put 2 text layers. One with the main logo/title and one for the subline. In our example we used Myriad Pro as font, but feel free to use any other or just a graphic logo. The font sizes are 50pt and 14pt. Notice how the sub-line has #5e5e5e as color.

Position these on the grid we made like so:

2_positioning

Step3

Next up is the Menu. Create a new Layer Group and name it “Menu”.
Take the Rounded Rectangle Tool and set the corner radius to 10px.
Now draw a long rectangle (bar) from the guide of 100px to 1040px (left to right) and position it on the 166px guide (downwards).
After that, take the Rectangular Marquee Tool and select just the bottom part of your rounded rectangle and use the eraser to delete that part (Just press OK on any prompt messages). We are doing this to get rid of the rounded edges at the bottom.

Add a Gradient Overlay on it in the Layer Styles window.
The color goes from Black to #302b2b (on position 25) to Black again.

3_gradient

Result:

3_result_far
3_result_close

Between the guides of 120 and 230 you draw a normal rectangle on top of the menu bar. Make it overlap the bar a bit at the top.
Then add a Gradient Overlay. The color goes from #d9d9d9 to #a4a3a3 at position 96% and then to #666666

3_gradient2

Result:

3_result_highlight

In the center (vertically) of the bar we’re going to add the menu text of course. We used Verdana 20px in White. To separate the text blocks, use 9 spaces between each for equal spacing. Also consider setting the anti-aliasing mode from Smooth to Sharp for this text. This option is usually chosen for bright text on dark backgrounds.
Finally add a Drop Shadow:

3_dropshadow

Step4

Inside the Menu group, add another group called “Social Media”
Then download the Vector Social Media Icons from Icondock and pick the ones you like at 32px size. Place them above your menu at the right side, we spaced them with 6 taps of the arrow keys while holding Shift.
Draw a black rounded rectangle behind these icons and make the opacity 10%.

Result:

4_result

Step5

Create a new Layer Group “Slide”, place the group below the menu one and pick the Rounded Rectangle Tool.
Draw a rectangle with the same width as the menu bar, but make it go down all the way to the 446px guide. Also make sure the top runs behind the menu bar so you don’t see the rounded corners.
Set the color to #2d2929

On top of that create a Rectangle, it doesn’t matter what color it is. Place it like this:

5_positioning_and_size

Find a good and big enough picture to fill this rectangle with, place it on a new layer and place your cursor in between the picture layer and the rectangle layer. Then hold Alt and the cursor should look different now, then just click and a clipping mask should be created.

If everything went correctly, it should look like this (with your own image of course).

5_clippingmask

Step6

Draw a new white rectangle like so:

6_whitebar

Then set the opacity to 55%.
On top of that put some dummy text in Arial (14px for regular text, 20px for the title)

Step7

Create a new Layer Group called “Main Content”.
Draw a white Rectangle below the slide, like so:

7_boxsize

You can place some dummy test at the bottom already.

7_dummytext

The same counts for the rest, there’s an image placeholder where the green rectangle is. You can use the same technique with the clipping mask as is Step5.

7_moretext

The button is a Rounded Rectangle with white text on it. The button has these Layer Styles:

7_dropshadow
7_innershadow
7_gradient

The gradient goes from #191919 to #5b3939

Step8

Create a new Layer Group “Footer”.
Draw a Rectangle in any color, sized and positioned like this:

8_footersize

Apply this Gradient on it. Color goes from #111111 to #212020 at 25%(position) to #212020.

8_gradient

Finally add some footer text on it in white. The font we used is Georgia at 12pt for the regular content and 18pt for the titles. Also consider setting the anti-aliasing mode to Sharp again.
Also try making the text fields by dragging boxes with the Text Tool instead of just clicking somewhere. Use the guides we made at the beginning to position everything equally.

For the quick navigation at the left, we used the color #7b7b7b and for the copyright we used #2c88b7.

Conclusion

Don’t go mental with design elements that are not needed, well placed and aligned text blocks can give a powerful visual direction and hierarchy.

Try to think as a coder sometimes, think in divs or boxes and try to create these boxes with as few design elements as possible.

Of course i am not trying to say you can’t use fancy details in any projects, but i am trying to show you a basic clean style.