Thứ Bảy, 7 tháng 8, 2010

 

Create joomla template psd

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



Joomla-Drupal- Photoshop Template
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:

Drop Shadow
Outer Glow:

Outer Glow
Bevel and Emboss:

Bevel and Emboss
Gradient Overlay:

Gradient Overlay
You should have something like this

Logo

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

Drop Shadow
Outer Glow

Outer Glow
Inner Glow

Outer Glow
Gradient Overlay

Gradient Overlay
You should have something like this

navigation bar
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

Gradient Overlay
You should obtain something like this

Search Bar
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 Shadow
Inner Glow

 Inner Glow
Color Overlay

 Color Overlay
Now add some text
Here's my final result for navigation + search bar

Search Bar + Navigation 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

Inner shadow for header
Gradient Overlay

Gradient Overlay for Header
With type Tool (T) write some text and add a image
For image I have used the following layer styles
Drop Shadow

Drop shadow - header image
Outer Glow

Outer Glow - Header  Image
My result

Search Bar + Navigation Bar + Header

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

Inner shadow - main area
Outer Glow

Outer Glow - main area
Gradient Overlay

Gradient Overlay - main area
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

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

Outer Glow - Footer
Gradient Overlay

Gradient Overlay - Footer
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

Gradient Overlay - Footer
Here's my result

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

Nhận xét: Đăng nhận xét

Đăng ký Đăng Nhận xét [Atom]





<< Trang chủ

This page is powered by Blogger. Isn't yours?

Đăng ký Bài đăng [Atom]