How to Design a WordPress Theme in Photoshop
In this tutorial I will show you how to create another wordpress layout with Photoshop. In 20 minutes I am sure you will be able to create this layout. The design is very simple and I you can use this layout also for a clean corporate layout, or even for a business template.
Register to download all PSD files for each tutorial including this one.
I will start with a new document with the following settings
I will select Rectangle Tool, and I will create some simple shapes. Click on the image to see the full size image
On the big bottom shape I will add the following gradient. To add a gradient to a shape you need to go to Layer > Layer Style > Gradient Overlay
I will use the following settings for my gradient
This is my result
On the right side I will create 2 shapes
My shapes are made with black. You will see better where I will place the shapes in this way. You can use white colors for these 2 shapes. I will add the following layer styles for both shapes
This is my result
In this area I will create another shape with Rounded Rectangle Tool
Again with Rounded Rectangle Tool (with a radius of 30 pixels) I will create above a new shape
With Pen Tool I will create a small triangle
I will select both layers in my layer palette and I will press on CTRL+E
You will see that you have a single layer right now. For this layer I will add the following layer styles
This is my result
I’ve made this chat bubble because I want to place here some social bookmarking icons. After I will add there the icons, and some text this is my result
On the header of this layout I will add some globe brushes
I will add also a nice vector background. You can visit the tutorial here to learn how these wonderful lines were made: Lines in Illustrator
This is my result so far. You can see that I placed also some text
In the middle of this layout I will add some images, and some text
On the sidebar I will add also some text
I will create a new layer above all layers (press CTRL+SHIFT+ALT+N), and I will load the following set of pixel arrows and dingbats
I will choose one brush from this set of 325 pixel arrows, and I will place them near each category
This is my final result. If you want to download this layout you can apply for a VIP subscription, and you will be able to play with this layered PSD file. Please note that you will be able to download all our resources for a small fee.
Apply for a VIP account to download all our premium resources. For 9.95 $ you can download all psd layouts for each tutorial together with our huge collection of downloads and stock photos.
Responses to “How to Design a WordPress Theme in Photoshop”
Leave a reply
-
Web design jobs- Nonpublic project #609030 by SeoWebLogix
- Blog writer by acerothstien
- Fading pictures and flash navigation by wiliss87
- Banners for musicshops by BasepointMedia11
- Video Views by marcuskw
- Private Project PTJ 13 - WebGallery Only by simonix
- Private Project PTJ 12 - WebGallery Only by simonix
- php guys needed by Pascal79
- Joomla template purchase and integrate by bnmagic
- W3C validated xhtml conversion with script integration by begwise
-
Thanks for this tut, its helpful!
wow amazing doing this atm
Awesome tutorial as always
your tutorials are very useful & valuable for us
please keep them coming
Thanks so much
God bless you:-)
This was one of the coolest tutorials that i have ever seen!
nice theme design for wp. thanks for tut..
woa! wonderful! thanks very much
This tutorial will surely come in handy for Wordpress users. Thanks for sharing it! Hope to read more useful tutorials from you.
Very nice. Great job on that design!
Great job nice tutorial thanks
Nice Tutorial. This post is different from what I read on most blog. And it have so many good things to learn. Thank you for your sharing!
Awesome tutorial as always
your tutorials are very useful & valuable for us
please keep them coming
Thanks so much
Great photoshop post.I have been a Graphic Designer for a long time, and am quite competent in Photoshop, but an absolute newbie to Wordpress. My question is: Is there some basic structure to keep in mind when designing for Wordpress, ie there must be a header, footer, sidebar, main content area, etc. Would it be possible to develop a tutorial that is structural rather than creative? And show where these areas must be, max sizes, use of photographs etc.
thank for the tut.. think it will be very useful!!
nice tutorial for me.
now i am able to make any type of Wordpress theme