Learn how to create a marketing/seo web layout in Photoshop
Hello! In this tutorial I will try to create a nice weblayout, related to a marketing/seo website. Also I think this web layout can be integrated pretty easy with any popular CMS platform, such as WordPress, Joomla, Drupal, etc.
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 +N)
As a background I have used this color: #f0f2eb
Step 1 – Creating the logo and navigation:
First I will select Rectangle Tool and I will make a shape (1020 by 80px) and I will apply this layer styles:
Then I will select Type Tool (T) and I will create the logo. With “Tahoma” font I will write “PSD-Coder.com” with 30px in size, and at the bottom of this I will add a slogan (using again Tahoma font, with 10px in size)
For “PSD” text and for the slogan I will apply this layer styles:
For this chunk of text “-Coder.com” I will apply this layer style (here I will try to create so called “letterpress” effect)
Here is my output
Next I would like to create a shiny zone over the logo. To create this I will select first Ellipse Tool and I will add a white shape over my logo
And I will apply a Gaussian Blur with a radius of 38px
Here is my result:
Now I will create the navigation bar(on the right side of the logo)
With type tool I will add first the “Home” link and I will apply this layer styles:
Then I will select Rectangle Tool and I will create this shape (as a color I have used # 96af22):
For this shape I will apply this layer styles:
Next I will select again Type Tool (T) and I will add more links:
For each of them I have used this layer styles:
Step 2 – Creating Featured Area
Having Rectangle Tool selected, I will create 2 shapes. I have marked them 1 and 2.
For the first shape – 1 – I have used this color #e6e9d4 with this dimensions: 1020 by 341px
For the second shape – 2 – I have used this color #d3d7bc with this dimensions: 1020 by 93px
Next I will add an image on my document and I will place it on the right side of the first shape
On the back side of the image I will add a shape using Ellipse Tool and I will apply a Gaussian blur (Filter>Blur>Gaussian Blur) with a radius of 40px
With Rectangular Marque Tool I will make this selection:
Then I will hit DELETE on my keyboard and I will press Ctrl + D to unload the selection. Also I will lower the opacity to 52%
My result (a nice shadow on the back of the image)
Next I will select again Rectangle Tool and I will make this shape, on the top of the image. The color doesn’t matter now, I have used red for demonstration proposes.
Make sure that you have this shape selected on your layer palette and press CTRL + T (Photoshop Free Transform), rotate the shape 45 degree (clockwise) and place this shape like I did.
Now we will need to Rasterize this layer – we can do that in ways, but I will choose to Rasterize it from my layer palette.
To do that identify the layer in your palette, than right click on it and choose Rasterize Layer:
Then Select Rectangular Marque Tool and make this selection.
Hit DELETE button on your keyboard (then don’t forget to press CTRL + D to unload the selection)
Proceed in the same way for the right side.
Here is my result:
Then apply this layer styles for our shape:
Next create a new layer on your palette (Ctrl +Shift + Alt + N) and having the Brush Tool selected (B) with 3px in size, create this (please note that I have used red and a bigger brush just for understanding proposes)
Here is my output (zoomed)
With type tool I will add some text.
Next on the left side, using Type Tool I will add some text.
The only thing which is missing here is a button. With rectangle tool I will create a black shape.
Then I will apply this layer styles.
And apply a Gaussian Blur (Filter>Blur>Gaussian Blur) with a radius of 4.8px and I will lower the opacity 53%
Featured Area is finished now, let’s move to Content Area
Step 3 – Creating the Content Area
First I will create a white box (268 by 198px) and I will apply this layer styles:
With Rectangle Tool (U) I will create another shape on the top of the box and I will apply this layer styles:
Next I will create another 2 boxes. I have created this boxes because this one can serve as a modules in CMS such as Joomla or Drupal.
With type tool I will add more text just a little bit down
If you’d look closely you will see that I need a separators between those 3 boxes and the content. For that I will select Ellipse Tool and I will create this black shapes:
I will demonstrate what you should need with the first one than you will need to apply the same method for the second and the third one.
Here it goes.
For the first one, apply a Gaussian Blur (Filter>Blur>Gaussian Blur) with a radios of 12px
Then I will select Rectangular Marque Tool (M) and I will make this selection:
Once you have done that, hit DELETE button on your keyboard to delete the selection and make sure that you unload the selection by pressing Ctrl + D on your keyboard.
Next I will decrease the opacity to 18% and I will proceed in the same way for the remaining shapes. My final result for the Content Area:
Step 4 – Creating the Footer
This one is quite easy to create.
With Rectangle Tool, create this shape and apply this layer styles:
Then using Type Tool I will add some text and I will use Rectangle Tool to create the forms from “Newsletter” area. That yellow button has been created in the same way as it was created the button from Featured Area.
Here is my final result for footer:
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.
Well the tutorial is finished now in Photoshop. Stay tuned because some new and cool tutorials will be posted on trendyTUTS.comblog comments powered by Disqus