PSD Templates - Photoshop Layouts

[Tutorial] - Create a Photoshop (PSD) Template for Joomla or Drupal

Here is my final result:

Let' begin! Create a new document : width 1000px, height 1300 and as a background color use #01466d.

Once you have setup this let's create the logo. Grab Type tool (T) and write some letters (your desired text for logo) than apply the following layer styles

Drop Shadow:

Outer Glow:

Bevel and Emboss:

Gradient Overlay:

You should have something like this

Let's move now to the navigation bar

Grab rounded rectangle tool(R) with a radios of 5px and create the navigation bar- mine has the following dimensions: Width 904px, height 37px, set the opacity to 56% (to make it transparent) and apply the following styles

Drop Shadow

Outer Glow

Inner Glow

Gradient Overlay

You should have something like this

All you to do now is to populate this navigation bar with some text

Let's make now the search bar - located on the navigation bar

Grab rounded rectangle tool(R) with a radios of 20 px and draw a shape. Mine has width: 374px, height: 26px and apply the following layer styles:

Gradient Overlay

You should obtain something like this

Now on the middle of this shape we need to create another shape using the same rounded rectangle tool(R) but this time with a radios of 7px, width: 265, height: 22 than apply the following layer styles:

Inner Shadow

Inner Glow

Color Overlay

Now add some text

Here's my final result for navigation + search bar

Let's move to the header now

Here is quite simple: With rounded rectangle tool (5px radios) draw a shape - with 904px, height 274 and apply the following layer styles:

Inner Shadow

Gradient Overlay

With type Tool (T) write some text and add a image

For image I have used the following layer styles

Drop Shadow

Outer Glow

My result

Let's move now to the content area. Here, again is quite simple to create.

Grab rounded rectangle tool (radios 5px) and create shape with the following dimensions: width 904px, height 587px and apply the following layer styles:

Inner Shadow

Outer Glow

Gradient Overlay

On the top of this shape add another one using Rectangle Tool with the following dimensions: width 859px, height 534px. For this shape use only a white color (#FFFFFF)

Let's populate his area with some content on the left. As you can see on the right side I have added some boxes. I will exemplify how to create them for a single box

I will exemplify for About Us box

Grab rounded rectangle tool, with a radios of 10 px and draw a rectangle. Now select rectangle marquee tool and select 80% of it (without bottom area -make sure that the layer is selected)

Select Rectangle tool

Once you have done this, hit DELETE bottom on your keyboard. The bottom area for our rectangle is gone now. In this way we have created the area where we will write the title. In the same manner you will create the main area where we will add the text.

Let's move to the footer now. Select rounded rectangle tool with a radios of 5px and draw a shape with the following dimensions: width 904px, height 170px, than apply this layer styles

Outer Glow

Gradient Overlay

Now select Rectangle tool and draw 3 shapes - each shape with the following dimensions - width 271px, height 141 px than apply the following styles

Gradient Overlay

Here's my result

Now populate this area with some text and images. To create a nice footer you can duplicate the logo and place it on the bottom along with a copyright notice.

The tutorial is finished now. If you have questions you can ask them here on in private by contacting us.

I hope you have had a good read, and invite to visit us, to learn how to create another photoshop template tutorials. You can see which tutorials will come next be visiting our Upcoming Tutorials area

To download this file you will need to be a Premium Member. For only $8.99 you can become a Premium Member and you will be able to download all of our Premium Files.

Don't want to pay? Usually we release one Premium File per day and it's free for the first 200 downloads. Visit our website daily and you will be able to download all of our files for free....

Bookmark

Email This

Comments (25)

...

Added to DrupalSightings.com

Jim , March 20, 2009 | url

-1

...

What should I say ? I really like this template. How can I download it ? :D

kevin , March 20, 2009

great

great, thank you

sivas , March 21, 2009 | url

Question..

Hi i liked so much this template, the colors, the composition, everything!!!! but can you make another tut exporting this template to html ccs to joomla?

Christian Sosa , March 21, 2009

...

any chance of a template -> working code tutorial for joomla?
looks good!

deathsupport , March 22, 2009

PSD Template

Hello and thanks for the feedback.

Kevin, you can download this template by applying for a subscription to our website - for only $9.99 you will get access to our existing photoshop templates + the next one which will follow in the next 3 months.

Christian Sosa & deathsupport - soon I will make a tutorial to convert this template in html. For joomla it's a little bit difficult and require few time. Maybe in the near future I will create one.

Administrator , March 22, 2009 | url

Joomla

The title of this article is misleading -- this is not a tutorial for creating a template for Joomla or Drupal; it doesn't even contain any code -- it is a Photoshop tutorial.

Jon , March 24, 2009 | url

Perfect theme

Well this is a great photoshop template. I like the color combination, that nicely green. Perfect job! Keep up the good work

jack , March 24, 2009

Thank you!

Thank you so much for your time and for this great tutorial. Really inspiring!

brick , March 24, 2009

...

Great looking template. I love your work and I think I have a job for you. Please check your email. Thanks!

adi , March 24, 2009

Awesome!

Awesome Work! Looks so pleasing. Glad that I found your blog. I was looking for such a blog for a long time. Thanks!

Abhisek , April 02, 2009 | url

...

You can convert it into a drupal/joomla template using psd2cssonline. Just have to rename some of the layers in accordance with some of the rules mentioned on their website

Dee , April 09, 2009

Added to lemonix.nl

Hello, posted your tut. on my site, with your link under it.

Got problems? mail me

Kind regards,
Roelof, webmaster Lemonix.nl

Roelof , April 11, 2009 | url

-1

Misleading

This article has nothing to do with creating a joomla-template. If you haven't noticed yet, a css-template is not a photoshop image, to create one is something completely different to making an image in photoshop.

Julian , April 24, 2009 | url

...

Hello Julian

It's not misleading at all. If you will read the title you will see that it's stated clear! This is a Photoshop template for Joomla or Drupal!

Administrator , April 24, 2009

-1

...

Thanks for the tutorial.

How can i make it a drupal page once i am done with photoshop?

ALS , May 03, 2009

...

Hi ALS,

You can read this article http://psdtemplate.com/article...ricks.html

Cheers

Administrator , May 03, 2009

-1

Not a template

Umm...nice Photoshop IMAGE, but this is not a joomla/drupal template whatsoever.

bob , May 14, 2009

hello

very cool realy thanks....evden eve nakliyat

evden eve nakliyat , May 22, 2009 | url

evden eve nakliyat

thanks. very cool.

evden eve nakliyat , May 25, 2009 | url

Nice!

I don't really like any of the free Joomla or Drupal themes, I'm going to try to make my own.

Photoshop Tutorial , May 29, 2009 | url

web design company,web designer,web design India,website design,web design

Thanks u r information

its very useful

web designer , June 02, 2009 | url

adult

thanksss

adult , September 26, 2009 | url

adult

thank you very much

adult , September 26, 2009 | url

...

Very good tutorial on Photoshop but I too was expecting (hoping?) that the tutorial would include taking this all the way through to producing a working Joomla template.

HC , November 27, 2009