Learn how to create a marketing/seo web layout in Photoshop

Apr 14th, 2010View Comments

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

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.


Seo Marketing PSD Layout Tutorial in Photoshop

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:


My result

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:



My outcome:

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.
My result:

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.





For “More Projects” text I will add also some layer styles:




Then I will add some shadows.
With Ellipse Tool create this shape:

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:



Now with type tool I will add some text and a button (is the same one used for featured area)

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:


The final step would be to create the footer

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:

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.


Seo Marketing 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.

Well the tutorial is finished now in Photoshop. Stay tuned because some new and cool tutorials will be posted on trendyTUTS.com

  • http://www.tutoriallounge.com Tutorial Lounge

    beautiful and professional web layout you design in this helping tutorial. thanks for sharing

  • http://www.tutoriallounge.com Tutorial Lounge

    beautiful and professional web layout you design in this helping tutorial. thanks for sharing

  • http://www.bonstutoriais.com.br Victor Tiago

    Cool, I´v learned a lot :)

    thanks

  • http://www.bonstutoriais.com.br Victor Tiago

    Cool, I´v learned a lot :)

    thanks

  • http://www.marketing-grundlagen.de Jennifer

    Very inspiring. Great tutorial. Thanks

  • http://www.marketing-grundlagen.de Jennifer

    Very inspiring. Great tutorial. Thanks

  • augu

    detailed~thanks a lot~

  • augu

    detailed~thanks a lot~

  • Junaid Ahmed

    Thanks a lot…very nice tuts…

  • Junaid Ahmed

    Thanks a lot…very nice tuts…

  • Master

    I always love this tutorial site. Again one more awesome stuff !!

  • Master

    I always love this tutorial site. Again one more awesome stuff !!

  • http://www.philippinewebservices.com/ Philwebservices

    very awesome tutorials!!! Thanks for the post! !

  • http://www.philippinewebservices.com/ Philwebservices

    very awesome tutorials!!! Thanks for the post! !

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

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

  • http://www.maxtnzone.com Nike TN Air

    very good!

  • http://www.maxtnzone.com Nike TN Air

    very good!

blog comments powered by Disqus