PSDFan Extra

Design a Trendy Yet Professional Website Layout

Final Image

As always, this is the final image that we’ll be creating:

Step 1

Start by creating a document (1100X1400px). Then create some guides to help form the basis of your layout.

Create a vertical guide at 100px and another at 1000px. Then create a horizontal guide at 250px. We will add new guides layer, but these form the start of our layout.

Step 2

Create a new layer called ‘main background’.

Select your entire canvas and fill it with efeade.

Step 3

Now select the top 250px of your canvas using your guides.

Create a new layer called ‘blue header’. Fill your selected area with a linear gradient ranging from 006fa3 to 0a92d2.

Step 4

Create a new layer called ‘header highlight’.

Grab your radial gradient tool and create a gradient ranging from white to transparent.

Then drag this upwards from the bottom-center of your blue header area.

Once you’ve done this, change this layer’s blend mode to ‘overlay’ and reduce it’s opacity to 50%. Then use your marquee selection tool to select and delete the part of the gradient overlapping into the main cream background.

Step 5

Now paste in this awesome paper texture.

Crop/resize it to fit your canvas size perfectly. Call this layer ‘old paper texture’. Then go to image>adjustments>desaturate, to grayscale your texture. Then go to filter>sharpen>sharpen just to bring out the details of the texture.

Reduce this layer’s opacity to 40%, and change it’s blend mode to ‘multiply’.

Step 6

Now download this great clouds photo.

Paste it into your document and resize/crop it as necessary.

Call this layer ‘clouds’.

Go to image>adjustments>desaturate. Then go to filter>sharpen>sharpen.

Now reduce this layer’s opacity to 30%, and change it’s blend mode to ‘multiply’.

Step 7

Now with your clouds layer still selected go to layer>layer mask>reveal all.

You’ll notice that the bottom of your clouds photo has a sharp edge, and doesn’t blend smoothly into your main cream page background.

With your mask created, select a large, soft black paintbrush, and brush over the edges of your clouds image that you want to mask off. This will let you smoothly and non-destructively blend your cloud image into your background.

Step 8

Create a new layer called ‘divider’.

Now use your marquee tool to create a 1px white line underneath your blue header area. Then change this layer’s blend mode to ‘overlay’ and reduce it’s opacity to 30%. This should create a subtle bit of definition between your header and main background areas.

Step 9

The use of multiply layers has dulled the colors of our layout slightly, so create a new vibrance adjustment layer.

Vibrance Adjustment Layer:

Vibrance: +100
Saturation: +40

This added a level of brightness to our design:

Step 10

Now added some more guides to your document. Add two horizontal guides set at 130px and 1100px.

Using these new guides and your side guides, create a new layer called ‘main content area’. Create a selection using your guides and fill this area with ‘f1efe9′.

Step 11

Now go to blending options and add an ‘outer glow’ effect.

Outer Glow Settings:

Color: Black
Blend Mode: Normal
Opacity: 15%
Noise: 0%
Spread: 0%
Size: 32px

Step 12

Now download this blogging icon and paste it into your header. Call this layer ‘logo icon’. Then create some logo text:

Font Settings

Font: AW Conqueror Slab (light)
Size: 30pt
Color: ffffff (and also: ffcc01).
Kerning: -75

Step 13

Now use your rounded rectangle shape tool (5px radius) to create a shape for your header’s search form. Call this layer ‘search form’.

Make sure you create a white rounded rectangle in the top right of your header, and then reduce this layer’s opacity to 30%.

Step 14

Now create a button for your search form. Use your rounded rectangle tool again, and then apply a gradient overlay and inner shadow blending option:

Gradient Overlay Settings

Gradient Ranging From: 1d9ed0 to 028bc0.
Blend Mode: Normal
Opacity: 100%
Angle: 90 degrees

Inner Shadow Settings

Blend Mode: Normal
Color: White (ffffff)
Opacity: 10%
Angle: 90 degrees
Distance: 3px
Choke: 0%
Size: 0px

Step 15

Now add some text over your search form/button.

Font Settings

Font Face: Arial
Color: b0e8ff
Size: 14pt
Kerning: -50

Step 16

Now we want to construct a menu design. First of all, let’s plan it out using guides.

Create two new vertical guides (90px and 1010px). Also create a horizontal guide (180px).

The image below shows where we are at with our guides:


Step 17

Now create a new layer called ‘menu bar’. Use your marquee selection tool to create a menu shape within your guides. Then fill this selection with a linear gradient ranging from ffc000 to ffa200.

Step 18

Now go to blending options for this layer and apply a drop shadow and inner shadow.

Drop Shadow Settings

Color: Black
Blend Mode: Multiply
Opacity: 50%
Angle: 90 degrees
Distance: 5px
Spread: 0%
Size: 15px

Inner Shadow Settings

Color: White
Blend Mode: Overlay
Opacity: 75%
Angle: 90 degrees
Distance: 1px
Choke: 0%
Size: 0px

Step 19

Now create a new layer called ‘menu 3d edge’. Use your lasso tool to create a black triangle beneath the part of your menu that juts out into your background. This should give the impression of your menu wrapping around your main content area:

Step 20

Now type out some text over your menu area.

Font Settings

Font Face: Arial
Color: 55462b
Size: 14pt
Kerning: -50

Step 21

Now create a rounded rectangle (5px radius, fill: 55462b) behind your ‘Home’ link in the menu.

Call this layer ‘menu hover’ and reduce it’s opacity to 15%.

Step 22

Now paste in an attractive landscape photo. I went with this nature photo.

Ensure that you paste your photo BENEATH your menu layers. Then resize/crop the photo to fit well.

I noticed that the drop shadow effect cast by my menu became less noticeable, so I upped the drop shadow opacity from 50% to 75%.

Then apply a gradient overlay and drop shadow blending option:

Gradient Overlay Settings

Blend Mode: Hard Light
Overlay: 40%
Gradient Ranging From: 557305 to 7ea80e
Angle: 90 Degrees

Drop Shadow Settings

Blend Mode: Multiply
Opacity: 40%
Angle: 90 Degrees
Distance: 1px
Spread: 0%
Size: 0px

Step 23

Now create a new layer called ‘black bar’. Use your marquee selection tool and paintbrush to create a black bar at the base of your photo.

Then reduce this layer’s opacity to around 50%

Step 24

Now add some text over the left part of your black bar.

Font Settings

Font Face: Reklame Script DEMO
Size: 60pt
Kerning: -50
Color: dde16b

Step 25

Then use your elliptical marquee tool to create a couple of circles in the right side of your black bar. This acts as the controls for your slideshow setting:

Step 26

Now download this great photo of lined paper.

Paste it into your document, cropping and resizing it to fit as a left column within your main content area. You should position this layer beneath your main slideshow image layers.

Step 27

Now create a layer mask for your lined paper layer and mask off the right side of your image, so that it blends smoothly into your main content area.

Then reduce your lined paper layer’s opacity to 40%.

Step 28

Now apply some text to your left column.

Heading Text Settings

Font Face: Arial
Size: 18pt
Color: 323232
Kerning: -50

Sub-Category Text Settings

Font Face: Arial
Size: 12pt
Color: 544f41
Kerning: -50

Step 29

I don’t usually like to do this, but the main photo wasn’t really working for me. I picked out this great desert landscape photo as a suitable replacement. This was an easy change, simply pasting in the new photo and hiding the original.

The only other change required was that I needed to change the color of my slogan text to f4cb96.

Step 30

Now I want to create a divider to separate my left column from the rest of my main content area.

I start by creating a 1px line (544f41). Then I reduce this layer’s opacity to 25%, and use a rough eraser brush to erase various sections of this dividing line:

Step 31

Now type out some text in your right column area. Be sure to leave a space for an image:

Header Text Settings

Font Face: Arial
Size: 36pt
Color: 313131
Kerning: -75

Main Text Settings

Font Face: Arial
Size: 12pt
Color: 737373
Kerning: -50

Step 32

Now paste in a suitable image into your content area.

I went with this photo of the Sahara.

Step 33

Now time to get to work on that footer!

Start by downloading this wonderful icon set:

WPZOOM Social Networking Icon Set.

Paste the Facebook/Twitter icons into your footer:

Step 34

Finally, add some footer text, including links to your social networking profiles, your contact details and a basic copyright notice.

Facebook/Twitter Text Settings

Font Face: Arial
Size: 18pt
Color: 535353
Kerning: -75

Address Details Text Settings

Font Face: Arial
Size: 14pt
Color: 545454
Kerning: -75

Copyright Text Settings

Font Face: Arial
Size: 14pt
Color: 7f7e7e
Kerning: -75

And We’re Done!

You can view the final outcome below. I hope that you enjoyed this tutorial and would love to hear your feedback on the techniques and outcome.

Download Source File for this Tutorial


Get more of our great design content direct to your inbox
Join our newsletter and receive our best weekly content by email. Also get access to hundreds of free design resources via your Designer Toolkit area.

About the Author:

Tom is the founder of PSDFAN. He loves writing tutorials, learning more about design and interacting with the community. On a more interesting note he can also play guitar hero drunk with his teeth.

Leave a comment

24 Comments:

  1. Sebastian says:

    I like it. Simple, but creative and done with nice, clean technique.

  2. MarkT says:

    Lovely use of bright colours and the added texture effect works brilliantly. As usual Tom you make it look so EASY!

  3. Ciwan says:

    I am not a designer, but I can usually tell when something doesn’t fit ! I’m sure there are others like me.

    In the above web layout. The top looks lovely and cool, the bottom however (in my opinion) doesn’t fit, there is something not quiet right there.

    However great effort and intentions. Thank You.

  4. Tom says:

    Thanks a lot for the kind words guys.

    Ciwan: I’m always keen to get constructive criticism from people. What isn’t working for you about the bottom? I’m glad you enjoyed the tut btw :) .

  5. Ryan says:

    The icons for the social networking sites do not fit, they are too large.

  6. Mike Smith says:

    Hey Tom, nice design. One thing though – the paper on the left side of the design actually extends off of the content area at the bottom, is it supposed to? :)

  7. bas says:

    What background does the theme have when the user has a widescreen and u bigger resolution?

  8. Henok Girma says:

    Hey Tom, first off, i just wanna say, you are amazing! this is the best photoshop tutorial website i’ve ever been on! There is one thing i will never get though. HOW DO YOU PUT THE WEBSITE ON THE WEB??

  9. skele says:

    Nice tutorial, but as bas said in comment, you should include a part where you explain what hapens when the user has a widescreen or 24″ monitor? I guess background image shoul fade to solid color so as the header?

  10. Pretty great template, but do you think about using too many images? A background image is pretty huge and there’s also the loading issue to think about most of the time.

  11. This is brilliant , I got few question if it’s okay … I am good at CSS/XHTML but just starting to design as well , so how do we set guides on the page , and how do we mask layers ?
    it’s totally okay to mail me if you don’t want to talk in comment section , thanks in adv.

  12. dave says:

    Nice tutorial, very clean and professional. Good job.

  13. Wouter says:

    Awesome tutorial. I could follow it easily thanks to your crystal clear explaination. Could you take a look at my outcome? I uploaded it on Imageshack.

    http://img35.imageshack.us/img35/9397/lptakeaway.jpg

    I made up a company selling LPs. It’s called LP Take Away, haha. Have a look please :-)

    Thank you so much for the great tutorial.

  14. Marcelo says:

    Hi Folks! I loved the step-by-step tutorial, but what is the actual product used to create all that? I am intrigued about how do you put the hyperlinks into these items, or how the rollovers and search data are indexed?
    What’s is this product called? (I know is photoshop, but how do you use it so that it becomes a functional website?)
    Thank you for the enlightement!

  15. Wouter says:

    Each and every single component (i.e. button, search bar) is designed on a different layer. Export each layer (component) as a GIF, PNG or JPEG file. To make it into a website you’re gonna need a application to create webpages. I prefer Adobe Dreamweaver myself.

    Try looking up some HTML/CSS tutorials to gain some experience about creating websites. I hope this is the answer you’re looking for.

    Wouter

    • Tom says:

      Thanks Wouter, that’s pretty much what I was about to say :) . We’ll actually have some .psd to html tuts in the future so keep an eye out.

  16. Salomon says:

    Hey, very nice tutorial, though it wasn’t geared for the type of website I was designing, some of the ideas, such as the menu bar, came in handy for creating a new layout for my page. Thank you.

  17. Shon says:

    Nice, i like blue-orange websites!

  18. wael says:

    Thank you
    Lesson fun , wonderful and useful

  19. Ali says:

    nice creative
    thanks for this tutorial

  20. Dan says:

    What would you recommend to do with this, for the wider resolutions?

  21. luich says:

    Good tutorial, just like i look forward.

  22. Meena says:

    How would you code this though?

Leave a Comment:

Related Posts

Subscribe to PSDFAN and Get Your Free Designer Toolkit

Have every post delivered to your inbox and get access to hundreds of useful design freebies.

Your Design Work, But More Awesome:

Do you know the basic tools in Photoshop but feel that your work is still looking average? Join our creative community at FanExtra and get the direction you need to take your work to the next level.

JOIN OUR FANEXTRA COMMUNITY TODAY