Create an Elegant Photoshop (PSD) Template for Wordpress


Here is my final result:

Elegant Wordpress PSD - Photoshop Template

Let' begin! Create a new document : width 900px, height 950 and as a background color use #191919.
To create a nice effect for header, along with our color #191919 chosen for background I will use an texture also. Please go to: SXC and here look for a concrete texture. Choose one witch you like the most and add it to your canvas.
On Blending Options choose Overlay and set the opacity to 43%. Now go to Layer>Layer Mask>Hide All.
Select gradient tool ( for gradient color choose black-white - default colors). Now select layer mask for our texture (see the screenshot) and drag a gradient from top to bottom.

Layer Mask Selection:

Layer Mask Selection

Now on the header you should see the shape of your texture and at the bottom of template you should see only the background color #191919. This will make your work easier when you will want to integrate this photoshop template in html and then in a wordpress theme.

Let's create the logo and add the top menu. For logo I have used this font: Adobe Garamond Pro, unfortunately this is a commercial font and I don't have the right to share it, but I promise next time when I will write the tutorial I will use only free fonts

To achieve the same effect like I have do with my logo please use the following blending options:

Drop Shodow:

Drop Shadow

Gradient Overlay: #9e9e9e and #d7d7d7

Gradient Overlay

For slogan I have used only a gradient with the folowing colors: #747171, #585757

Here is my result - logo and slogan:

Logo and slogan


Top Menu - Using pencil tool draw a line - color #3f3e3e (master diameter 1px). This line has 739px width. It will be more easier for you to create some guides to help you draw this line in a center position.

Here is my result:

My result

Now under this line we will need to create a shadow effect. Using rectangle tool, create a fixed shape - width 739px , height 20px and as color choose # 0a0a0a.
To look like a shadow I will apply a Gaussian Blur (Filter>Blur>Gaussian Blur) with a Radius of 20px. To have a nice gradient effect (more darker at the top and transparent at the bottom) we will need to apply a layer mask and then to apply a gradient.
Go to Layer>Layer Mask>Hide All. Select layer mask thumbnail from your layer pallet (see the screenshot)

layer mask

than select gradient tool. Make sure that Linear Gradient is selected and for gradient color choose black-white (default colors).
linear

Drag the gradient from the top of our shape to bottom . To finalize it, on Blending Options set the Opacity to 58% and Fill 52%.

Here is my result - dropshadow:

dropshadow

For Main Menu(Top Menu) - I have followed the same steps followed to create the shadow to separator. I have created a shape using rounded rectangle tool, than I have applied a layer mask and a gradient (to make the shape transparent at the bottom). For blending options I have set Opacity to 54%, Fill 69% and I have used outer glow to emphasize it.
As final steep I have added some text using the same layer styles used for logo and slogan.

My result - Top Menu:

top menu


Let's move to the header now. This is quite simple. For text I have used a Franklin Gothic font and as an image I have used a vector elegant jacket. You can find as many vectors as you want on this website: VectorMix

My result - Header:

header preview

Now to enhance this design we will need to add some light spots. This are really easier to create. All you have to do is to draw some circles and then to apply a Gaussian Blur (Filter>Blur> Gaussian Blur ) with a radius of 50.
On this template I have added 5 light spots: one above the logo, two light spots above Top Menu (or Main Menu) one in the header area and another one on main content.

Here's my result - Header with spot lights:

Header with spot lights


Now let's move to main content. Here create a new shape using rounded rectangle tool. Mine has the following dimensions: width: 707px, height: 515px. For this shape I have used the following layer styles:

Gradient: #191919, #252525

gradient

Stroke: #191919, #302f2f

stroke = photoshop template

As you can see the main area is becoming transparent near footer. This effect has been obtained using the same trick like we did to obtain the Main-Menu - by applying a layer mask and then applying a gradient to our layer mask. Please see the exact description above.
Now I will populate this shape with content and the main area has been created

My Result - Main Area for this Photoshop Template

main content for photoshop template


Let's create the sidebar. Using rounded rectangle tool, create a new shape with the following dimensions - width: 229px, height: 311px and apply the following layer styles:

Inner shadow

inner shadow

Outer Glow

Outer Glow

Inner glow

Inner glow

Color Overlay

Color Overlay

Now duplicate this layer, select it (Ctr+T - Windows or Cmd+C - Mac) right click on it and choose Flip Vertical. Align it with the bottom text.You should obtain something like this.

Sidebar

sidebar

To create the shape where I have write the portfolio you will have to use rectangle tool and to apply a similar layer style. To finish the sidebar, we will need to populate it with some text and images.

My final result for sidebar

final result for sidebar


The footer is really easy:
With pencil tool create a line and then duplicate it. On the first line use this color # 010101 on the second one use #3f3e3e. With this 2 lines we have created the separator between main content and footer. Duplicate the logo add a a copy on the footer, write a copywrite text and add rss icon and we're done.
I hope you have had a good read.

Final result:

Elegant Wordpress PSD - Photoshop Template

I have enjoyed writing this tutorial and if you enjoyed it also I would love to hear from you. You can write your thoughts by leaving a comment here but if you are a shameful person you can use our contact form :)

On the next tutorial I will create a photoshop template for Drupal or Joomla. You can see preview for this template on our premium photoshop templates section.


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.

Download Templates

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

Comments (8)

Nice template...
0
I really like this template and I think soon I will jump for it. Keep up the good work!
danny , March 10, 2009 | url
Congrats for this great tutorial
0
That's a shame. I see here 1337 hits and only one comment ? What a people...anyway, thank you for this great tutorial admin and keep them coming!!! I like to design photoshop templates and your designs are A++. I would love to have at least 50% of your skills. Keep up the good work!
vik , March 11, 2009
...
0
Added to www.psaddict.com
psaddict , March 12, 2009 | url
...
0
Very good tutorial, I'll try doing it this afternoon after work :)
Murray , March 12, 2009 | url
Great Layout
0
I love the black gradient effect - very nicely done
...
0
This looks great! Very sleek and elegant design, clean and uncluttered layout. I love the texture that you used. Nice job!
Brochures , April 02, 2009 | url
How to use psd for wordpress
0
Thnx for this tutorial. But to be frank I couldnt understand how to use this template for my wordpress powered site :( Is there such tutorial also around?
free banners , April 08, 2009 | url
Nice
0
I love this look!
Clay , August 12, 2009 | url

Write comment

smaller | bigger

busy
Abs Landing Page Template Abs Landing Page Template $20.00
$5.00
You Save: 75.00%


15 IM Templates - PLR 15 IM Templates - PLR $20.00
$10.00
You Save: 50.00%


photoshop training photoshop training $35.00
$17.50
You Save: 50.00%


Canvas Painting Minisite Design Canvas Painting Minisite Design $20.00
$10.00
You Save: 50.00%


Belly Fat Landing Page Template Belly Fat Landing Page Template $20.00
$5.00
You Save: 75.00%


Garage Sale Graphics Garage Sale Graphics $20.00
$10.00
You Save: 50.00%


Christmas Graphics Package - Minisites - Icons - Wordpress Christmas Graphics Package - Minisites - Icons - Wordpress $20.00
$10.00
You Save: 50.00%


Video Skins - Personal Use Video Skins - Personal Use $20.00
$10.00
You Save: 50.00%


EZ eBook Templates V2 EZ eBook Templates V2 $20.00
$10.00
You Save: 50.00%


Beekeeping For Beginners Beekeeping For Beginners $20.00
$5.00
You Save: 75.00%


EZ Ebook Templates Package 6 EZ Ebook Templates Package 6 $20.00
$10.00
You Save: 50.00%


Dollar Signs 3D - PLR Dollar Signs 3D - PLR $20.00
$10.00
You Save: 50.00%


Templates In A Box - PLR Templates In A Box - PLR Member Price Templates In A Box - PLR Templates In A Box - PLR 	 Member Price $20.00
$10.00
You Save: 50.00%


Buy Dreamhome - Minisite & Content Buy Dreamhome - Minisite & Content $20.00
$5.00
You Save: 75.00%


5 HTML Templates 5 HTML Templates $40.00
$10.00
You Save: 75.00%


Easy Striped Backgrounds Easy Striped Backgrounds $20.00
$10.00
You Save: 50.00%


Bunch Of Headers - PLR Bunch Of Headers - PLR $20.00
$10.00
You Save: 50.00%


A Nice Selection Of Headers A Nice Selection Of Headers A Nice Selection Of Headers A Nice Selection Of Headers $20.00
$10.00
You Save: 50.00%


WordPress Power Theme Collection - Santa Deal Time 08 WordPress Power Theme Collection - Santa Deal Time 08 $20.00
$10.00
You Save: 50.00%


Instant Wordpress Themes Instant Wordpress Themes $20.00
$10.00
You Save: 50.00%


Swift Headers Swift Headers $20.00
$10.00
You Save: 50.00%


Fun Wedding Fun Wedding $20.00
$10.00
You Save: 50.00%


Power Template Package Power Template Package $20.00
$10.00
You Save: 50.00%


15 Complete Minisite Sets 15 Complete Minisite Sets $20.00
$10.00
You Save: 50.00%


20 Minisite Graphics - PLR 20 Minisite Graphics - PLR $20.00
$10.00
You Save: 50.00%


Acne Landing Page Template Acne Landing Page Template $20.00
$5.00
You Save: 75.00%


Super Signup System Super Signup System $30.00
$15.00
You Save: 50.00%


Identity Theft Minisite Identity Theft Minisite $20.00
$5.00
You Save: 75.00%


Social Networking Social Networking $20.00
$5.00
You Save: 75.00%


Migraine Landing Page Template Migraine Landing Page Template $20.00
$5.00
You Save: 75.00%


Video Optin Templates Pack Video Optin Templates Pack $20.00
$5.00
You Save: 75.00%


20 Twitter Backgrounds 20 Twitter Backgrounds $40.00
$10.00
You Save: 75.00%


Golden Goose Adsense Theme Pack Golden Goose Adsense Theme Pack $40.00
$10.00
You Save: 75.00%


OTO Templates With PLR OTO Templates With PLR $20.00
$10.00
You Save: 50.00%


EZ Ebook Template Package EZ Ebook Template Package $20.00
$10.00
You Save: 50.00%


Web 2.0 Covers - Personal Use (Members Request) Web 2.0 Covers - Personal Use (Members Request) $20.00
$10.00
You Save: 50.00%


Magic Tricks Magic Tricks $20.00
$5.00
You Save: 75.00%


Killer Abstract Backgrounds V2 Killer Abstract Backgrounds V2 $20.00
$10.00
You Save: 50.00%


3 OTO Templates Packs 3 OTO Templates Packs $20.00
$10.00
You Save: 50.00%


Web 2.0 Graphics Web 2.0 Graphics $40.00
$20.00
You Save: 50.00%


4 Video Squeeze Page Templates - PLR 4 Video Squeeze Page Templates - PLR $20.00
$10.00
You Save: 50.00%


6 Review Sites 6 Review Sites $20.00
$5.00
You Save: 75.00%


8 Profitable Websites 8 Profitable Websites $20.00
$10.00
You Save: 50.00%


50 Niche Wordpress templates 50 Niche Wordpress templates $20.00
$10.00
You Save: 50.00%


Template Mania 2 Template Mania 2 $20.00
$10.00
You Save: 50.00%


Premium Video Squeeze Pages Premium Video Squeeze Pages $40.00
$10.00
You Save: 75.00%


EZ Ebook Templates Packs EZ Ebook Templates Packs $40.00
$20.00
You Save: 50.00%


10 Nicely Done Themes - Personal Use 10 Nicely Done Themes - Personal Use $20.00
$10.00
You Save: 50.00%


Turbo Power Graphics Turbo Power Graphics $20.00
$10.00
You Save: 50.00%


Animated Web Graphics Pro Animated Web Graphics Pro $20.00
$10.00
You Save: 50.00%


200 Image Pack - PLR 200 Image Pack - PLR $20.00
$10.00
You Save: 50.00%


EZ Ebook Template Package 5 EZ Ebook Template Package 5 $20.00
$10.00
You Save: 50.00%


Golf Minisite - Courtesy Of Julie Stone Golf Minisite - Courtesy Of Julie Stone $20.00
$10.00
You Save: 50.00%


Learn To Play Guitar Minisite Learn To Play Guitar Minisite $20.00
$5.00
You Save: 75.00%


Unique Collection Of Video Squeeze/NewsLatter Templates Unique Collection Of Video Squeeze/NewsLatter Templates $20.00
$10.00
You Save: 50.00%


Organic Gardening Minisite Template Organic Gardening Minisite Template $20.00
$5.00
You Save: 75.00%


5 HTML Templates and 3 Blog Themes 5 HTML Templates and 3 Blog Themes $40.00
$20.00
You Save: 50.00%


Work At Home Landing Page Template Work At Home Landing Page Template $20.00
$5.00
You Save: 75.00%


Christmas Templates and Sales Page Graphics Bundle Christmas Templates and Sales Page Graphics Bundle $20.00
$10.00
You Save: 50.00%


Home Decorating On A Budget Minisite Home Decorating On A Budget Minisite $20.00
$5.00
You Save: 75.00%


Blog Splash Blog Splash $20.00
$10.00
You Save: 50.00%


Animated 3D Signs And Buttons - PLR Animated 3D Signs And Buttons - PLR $20.00
$10.00
You Save: 50.00%


Magazine Publishing Minisite, Wordpress Theme, PLR eBook Magazine Publishing Minisite, Wordpress Theme, PLR eBook $20.00
$10.00
You Save: 50.00%


Feng Shui Minisite, Wordpress Theme, PLR eBook Feng Shui Minisite, Wordpress Theme, PLR eBook $20.00
$10.00
You Save: 50.00%


OTO Templates1 OTO Templates1 $20.00
$10.00
You Save: 50.00%


Film Making - Minisite & Content Film Making - Minisite & Content $20.00
$5.00
You Save: 75.00%


IR Squeeze Page Templates IR Squeeze Page Templates $20.00
$10.00
You Save: 50.00%


Marketing Graphics Pro - Personal Use Marketing Graphics Pro - Personal Use $20.00
$10.00
You Save: 50.00%


DIY Minisite Kit Vol 3 - Personal Use DIY Minisite Kit Vol 3 - Personal Use $20.00
$10.00
You Save: 50.00%


Football - Minisite & Content Football - Minisite & Content $20.00
$5.00
You Save: 75.00%


3 Brand New Minisites - November 08 3 Brand New Minisites - November 08 $20.00
$10.00
You Save: 50.00%


20 MiniSite Graphics Pack - Unrestricted PLR 20 MiniSite Graphics Pack - Unrestricted PLR $20.00
$10.00
You Save: 50.00%


40 PLR Wordpress Themes 40 PLR Wordpress Themes $50.00
$25.00
You Save: 50.00%


Web 2.0 Headers V2 - Personal Use Web 2.0 Headers V2 - Personal Use $20.00
$10.00
You Save: 50.00%


Going Green Minisite Design Going Green Minisite Design $20.00
$10.00
You Save: 50.00%


3 X Minisite Designs 3 X Minisite Designs $20.00
$10.00
You Save: 50.00%


Easy Banner Maker Pro Easy Banner Maker Pro $30.00
$15.00
You Save: 50.00%


Secrets To Hypnosis Secrets To Hypnosis $20.00
$5.00
You Save: 75.00%


Wildlife Template & WP Theme Wildlife Template & WP Theme $20.00
$10.00
You Save: 50.00%


20 Hot Niche Header Graphics 20 Hot Niche Header Graphics $20.00
$10.00
You Save: 50.00%


Instant Optin Pro Instant Optin Pro $20.00
$10.00
You Save: 50.00%


5 Website Themes 5 Website Themes $20.00
$10.00
You Save: 50.00%


Graphical Optin Collection Graphical Optin Collection $20.00
$10.00
You Save: 50.00%


125 Pro Business Header Templates 125 Pro Business Header Templates $20.00
$10.00
You Save: 50.00%


Saving Your Marriage Saving Your Marriage $20.00
$5.00
You Save: 75.00%


cover action plus cover action plus $74.00
$51.80
You Save: 30.00%


Three Audio Squeeze Page Templates - Resale Rights Three Audio Squeeze Page Templates - Resale Rights $20.00
$10.00
You Save: 50.00%


All About Herbs Minisite Design All About Herbs Minisite Design $20.00
$10.00
You Save: 50.00%


Minisite Graphics Package WSO Minisite Graphics Package WSO $127.00
$0.00
You Save: 100.00%


Do It Yourself Minisite Kit VOLUME 2 - Personal Use (MEMBERS REQ Do It Yourself Minisite Kit VOLUME 2 - Personal Use (MEMBERS REQ $20.00
$10.00
You Save: 50.00%


OTO Page Templates - PLR OTO Page Templates - PLR $20.00
$10.00
You Save: 50.00%


50 Glossy Layer Styles 50 Glossy Layer Styles $20.00
$10.00
You Save: 50.00%


DIY Minisite Kit Vol 1 - Personal Use DIY Minisite Kit Vol 1 - Personal Use $20.00
$10.00
You Save: 50.00%


Martial Arts Martial Arts $20.00
$5.00
You Save: 75.00%


Wine Minisite - Courtesy Of Julie Stone Wine Minisite - Courtesy Of Julie Stone $20.00
$10.00
You Save: 50.00%


10 Full Minisites PLUS Bonus Graphics 10 Full Minisites PLUS Bonus Graphics $20.00
$10.00
You Save: 50.00%


EZ eBook Template Package V3 EZ eBook Template Package V3 $20.00
$10.00
You Save: 50.00%


Ready Made Sales Letters - MRR Included - DOLLAR DEAL Ready Made Sales Letters - MRR Included - DOLLAR DEAL $20.00
$10.00
You Save: 50.00%


IM Minisites Pro Pak IM Minisites Pro Pak $20.00
$10.00
You Save: 50.00%


3 Wordpress Theme 3 Wordpress Theme $20.00
$5.00
You Save: 75.00%


Store
Custom Graphics
Free Tutorials
Free Products
Order Cusum PSd Layout

Twitter

Follow me on twitter