Learn how to create a nice – brown layout in Photoshop

Mar 29th, 2010View Comments

Hello folks and welcome to another tutorial on PSD-Coder.com (now TrendyTuts.com :) ) In this tutorial I have created a nice – brown – website layout using Photoshop.

Please note that in this tutorial I will explain only how to design this layout in Photoshop but I will not cover the conversion PSD to XHTML. The tutorial on how to code this layout in XHTML it will be available on our PSD to HTML Section available only to our premium members

Click Here To See The Live Preview (CSS/HTML)

Because this live preview was encrypted, browsers such as Internet Explorer wont display the website correctly, that’s why I suggest to use a modern web browser such as FireFox, Chrome or Safari.
This problem will not occur for non encrypted files which are available for our Premium Members.

Brown PSD Layout Tutorial In Photoshop

Open Photoshop and create a new document (Ctrl+D), as a background color I have used #784a24

Then from my stock images (which I have bought few time ago) I will add an image related to nature. You can find some free images on this great website: http://sxc.hu.
So I will place this image on my document (using free transform tool -  Ctrl+T – I will make the image to feet to my document )
Here is my outcome

As you can see the image is too preeminent, and I would like to make it looks smooth. For that I will make sure that image layer is selected and I will apply a layer mask: Layer>Layer Mask>Hide All.

When you will click on Hide All, the image will disappear and on the image layer it will appear a mask. Next you will need to click with your mouse on that mask.

Then select  Gradient Tool

Make sure that you have selected Black and White (on gradient editor) when you choose Gradient Tool (G)

Now drag a line from the middle to the top of the document

Then from the layer palette, reduce the opacity to 30%
Here’s my result:

Let’s move to the logo now.

Step1 – Creating the logo

With rectangle tool create a vertical shape on the top (for color choose # d07931) and then apply this layer styles:



Then with type tool I will add some text for logo

Next apply the following layer styles to create so called “letterpress ” text effect.
For PSD text:



For Coder.com and slogan I have used this layer styles:



Here is my result

Step2 – Creating the navigation

Using again rectangle tool I will create this shape (947 X 60px, as a color I have used : #d07931). Then I have applied this layer styles:




With type tool (T) I will add this links for navigation and I will apply this layer styles:
For “Home” please apply this layer styles:




Then for the rest of the links apply this layer styles:



Final outcome for navigation:

Step3 – Creating the Featured Area

With rectangle tool I will create a shape (color: # d07931, dimensions: 947 by 347px) and I will apply this layer styles:



Next I will use this crumbled paper texture, http://babybird-stock.deviantart.com/art/White-crumbled-paper-texture-48496295. I will place it on featured area and I will apply this layer styles (Note: when you place the texture on featured area you will need to resize it a little bit. You can do that, using free transform tool – Ctrl + T)


Next with type tool I will add some text and I will apply this layer styles (to obtain again that “letterpress” effect)




I think I have pretty nice template until now :P
Next I will add more text… (using type tool, of course)

Now from my stock images, I will add a nice one on the right side.

As you can see the image is not fitting to well on my crumbled paper texture. I can make it a little bit small using free transform tool (Ctrl +T) from Photoshop, but I don’t want that. Instead I will use a little trick.  Make sure that this layer (cowboy image) is just above crumbled paper texture and from your keyboard push Ctrl +Alt + G (or Cntrl + Command + G on your MAC) to create a clipping mask.

Now all I have to do is to make a smooth transition from crumbled paper texture to my image.  For that I will select the cowboy image and I will add a layer mask:  Layer>Layer Mask>Hide All.

Then I will select Gradient Tool (G) (having black and white selected on my gradient editor)


I’ll make sure that the layer mask is selected

And with mouse I will drag a line from left to right on featured area

Here is my final result for Featured Area

Step4 – Creating the Content Area

With rectangle tool I will create this shape (color: # e0d5aa; dimensions: 947 by 507px)

With rectangle tool I will create this shape

and I will apply this layer styles



Then I will select ellipse tool and I will make this shape (black one)

And I will apply a Gaussian Blur (Filter>Blur>Gaussian Blur) with a radios of 10px


Next I will select Rectangular Marquee Tool and I will make this selection

I will hit Delete button on my keyboard to delete the selection and then I will push Ctrl + D to deselect my selection.
Here is my output (as you can see I have created a really nice shadow)
Next with type tool I will add a some text

I will create 2 more columns on the right side, using the same steps

With rectangle tool I will create 2 buttons.

For each button I will apply this layer styles:



Next I will apply a shadow at the bottom of the content
For that I will select ellipse tool and I will create this shape

Then I will apply a Gaussian Blur with a radius of 25px.
Here is my final result for Content Area

Click Here To See The Live Preview (CSS/HTML)

Because this live preview was encrypted, browsers such as Internet Explorer wont display the website correctly, that’s why I suggest to use a modern web browser such as FireFox, Chrome or Safari.
This problem will not occur for non encrypted files which are available for our Premium Members.

Brown PSD Layout Tutorial In Photoshop

Want to Download the Source File? (CSS/XHTML included)

In order to download the source file you will need to become a Premium Member.

Already a premium member?  When you click on the download link please make sure that you are logged in.

  • http://mr-bolica012.blogspot.com Ahmed Bolica

    thankss for topic but why you complete to code it it will be great

  • http://mr-bolica012.blogspot.com Ahmed Bolica

    thankss for topic but why you complete to code it it will be great

  • admin

    Ahmed, we will code in HTML each tutorial posted on this website :)

  • admin

    Ahmed, we will code in HTML each tutorial posted on this website :)

  • http://www.net-kit.com/photoshop-layout-tutorials-mar-2010/ March’s Fresh Photoshop Web Layout Tutorials

    [...] 24. Learn how to create a nice – brown layout in Photoshop [...]

  • http://webdev5.com mupet

    Nice tuts, nice layout, thanks for sharing

  • http://webdev5.com mupet

    Nice tuts, nice layout, thanks for sharing

  • Nathan Anibaba

    Very nice tutorial, would love to know how to code it with CSS.

  • Nathan Anibaba

    Very nice tutorial, would love to know how to code it with CSS.

  • http://www.thinking-forward.co.uk Cheap Printing UK

    I’m going to bookmark this.

    Very nice

  • http://www.thinking-forward.co.uk Cheap Printing UK

    I’m going to bookmark this.

    Very nice

  • http://www.crea-fr.com création sites internet

    Nice tutorial and great webdesign. Thanks.

  • http://www.crea-fr.com création sites internet

    Nice tutorial and great webdesign. Thanks.

  • http://www.nova-media.fr Olivia

    Vraiment un beau tutorial pour faire un beau site comme on aime ! A refaire

  • http://www.nova-media.fr Olivia

    Vraiment un beau tutorial pour faire un beau site comme on aime ! A refaire

  • Junaid Ahmed

    Welldone author… nice tut !

  • Junaid Ahmed

    Welldone author… nice tut !

  • huyen22122000

    Very nice tutorial. Thanks for sharing!

  • huyen22122000

    Very nice tutorial. Thanks for sharing!

  • http://trendytuts.com/psd-to-html-tutorials/psd-to-html-how-to-code-the-brown-web-layout.html [PSD to HTML] How to code the Brown Web Layout « TrendyTuts – Premium Photoshop Tutorials

    [...] Hello. In this tutorial I will explain how I have coded from PSD to HTML the Brown Web Layout [...]

blog comments powered by Disqus