Learn how to create a nice – brown layout in Photoshop
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
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)
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:
Then I will apply a Gaussian Blur with a radius of 25px.
Here is my final result for Content Area
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.