How to Create a Unique Wordpress Theme
With each new tutorial I try to bring you more ingenious design ideas making your site the most vivid and dynamic source on the web. Today I try to create another creative layout which can be converted very easy in a wordpress theme.
You can use this layout to showcase your portfolio, or to sell your products.
Preview full size | Variation 2 | Variation 3
Create a new document (press CTRL+N) or go to File > New. Use the following values.
Change your foreground color to #232323 and with Paint Bucket Tool press one time over your canvas.
Next step is to add some noise for this background. You can add noise if you go to Filter > Noise > Add noise
On top of the website I will place a shape with Rectangle Tool. It doesn’t matter the color right now.
I will create a new document and with Pencil Tool (set the brush size to 1 pixel) I will make the following drawing. Please note this image is zoomed to 1600 %.
The normal size is:
Please note that you can create this triangle also with Pen Tool.
From this triangle I will create a pattern. To create a pattern first you need to go to Edit > define pattern. Choose a name for this pattern and click on OK. You can now close this small document. On our layout please create a selection at the bottom of the orange shape.
Create a new layer (press on CTRL+SHIFT+ALT+N), and be sure you have the new layer selected. With Paint Bucket Tool fill the selection. Please choose the pattern you just created a few steps ago.
Here is my result. If your selection is too big you will have the following result.
We will fix this problem in my next step. Be sure you have the layer with triangles selected, and then with Rectangular Marquee Tool make a selection like mine.
Hit the Delete key from your keyboard. In the same way you can create a selection on the top. Here is my result
With Move Tool I will place this layer near the orange shape
I will select both layers in my layer palette (the layer with triangles and the big orange shape) and then I will press on CTRL+E. This shortcut will merge both layers into a single one, and it will allow me to work further on the layout. For the new layer I will add the following layer styles
This is my result
On the bottom of the layout I will create a shape with Rectangle Tool
I will create another layer, and then with Rectangular Marquee Tool I will make a selection on top of this shape. I will add the same pattern but this time. I will use the same color I have used for the big shape.
With Eraser Tool I will delete the left side
I will duplicate this shape (select the layer and then press on CTRL+J) to duplicate a layer. The next step is to go to Edit > Transform > Rotate 180
With Move Tool place the layer on the bottom of the shape like in the following image.
Select all three layers on your layer palette, and then press on CTRL+E. The next step is to add a layer style
Hold down the CTRL key and with your mouse pointer click on the layer thumbnail.
You will see that a selection will become active around the shape. Select Rectangular Marquee Tool, and hold down the ALT key
When you hold down the ALT key you will activate subtract from selection feature. Make a selection around the left side of the selection. After you release the mouse button you will have the following selection.
With this selection active create a new layer (press on CTRL+SHIFT+ALT+N) and then with Paint Bucket Tool fill the selection with a random color. I have used #b2a891. Press on CTRL+D to deselect. This is my result.
Create another shape with Rectangle Tool
With Pen Tool I will create another shape
With the same tool I will create also some sort of shadow for this shape.
Between the header and the body of this layout I will create other shapes. Please click on image to see full size image
I will add some images in the white area. The images are from my last tutorials.
On the left side I will add a button
The same I will add on the right side. I will not explain one more time how this button was made. You have the steps above.
Now I will add some text and images on the layout. Please click on the image to see the full size layout.
With Line Tool I will add some details. I will create two lines both with a weight of 1 pixel. The top line will have a white color and the bottom line will have a dark color.
I will create a new layer above all layers, and with Brush Tool I will make a drawing
I will change the blending mode for this layer to Soft Light. This is my final result. Click on the image to see the full size layout
If you are a VIP member you can download this set of 27.000 Photoshop Gradients. It will allow you to change the color of this layout in seconds. Here are other color variations
If you want to download this layered PSD layout please apply for a VIP account. It will allow you to download our entire PSD layout collection together with ALL our VIP resources.
[private]Download PSD Layout[/private]
Get certified in easy way with guaranteed 70-648 preparation by examsheet! Our training package also includes 1Y0-A08 dumps and 642-357 practice test to help you prepare successfully for next exam.
what font did you used for logo?
Bookman Old Style , Bold Italic , 60 px , Crisp
I’m sorry, but it doesn’t look very unique to be honest.
Other than that, the tutorial is quite nice. One other small detail, but it’s perhaps a comment of liking, that I personally would say to align the top images in the grid, and make them 4 instead of 5.
Nice tut
keep it up
“how to create a unique wordpress theme” – copy it from Grafpedia – lol!
Nice theme though, just not sure about the uniqueness
Nice techniques in there. I especially like the labels on the sidebar how they “float” out of the area. Will you be showing how to code this layout as well?
Very Nice Tutorial…. Nice Design Too….
Good Work…
DKumar M.
This article is really amazing. I am waiting new article about, how can we create wordpress theme from PSD file
5 star tutorial with Awesome web layout
Thanks for sharing your valuable knowledge with us
Thanks so much for your time & kind effort for making
such a nice tutorials
your all web layouts trick is very useful for me & all visitor of Grafpedia
your are Genus
keep up good work
God bless you
Nice theme, thanks for the tut. and inspire..
V nice tut =) Thanks for you work =)
Bummer, I thought this was going to be more about optimizing a layout for Wordpress and the effort between Photoshop and working Wordpress site. I did pick up a few nifty PS techniques from you though. Consider article titles in future?
Thanks for your efforts, cheers!
The familiar cut-edge design seems to be catching on throughout the internet. Nice tut.
cool, even more so if you give the application stage to the “wordpress templates”
Thanks for these nice article. Really useful.
Ok, sorry that I’m new with this wordpress thing. I can design a layout in photoshop but how can I make it work as a wordpress theme? What I mean is that once I created a photoshop layout/theme what else do I need to make it work in wordpress? What’s the process?
Thanks!
Wow! I learn so many photoshop tricks in this tute. Thanks so much for sharing your techniques with us!
wow very inspiration for me.. Thnx for tuts
choen and ansuz both addressed the missing element to what the title to this tutorial promises: How to make a WP theme. As it is, it’s just a nice looking page. And for that, I applaud you. It is a well done layout. But it is not a usable WP theme.
yeah……..it’s a “innovative” tut….TNX for ur tut
Hi
Very nice site,
What are the supported browsers?
Firefox, Chrome, IE, Opera
I’ve made an XHTML and CSS for this one and it’s totally great, just for practice.
nice tutor
Great tutorial, I’m inspired as I am about to try and design my first ever WP Theme from scratch for a client … wish me luck!
I really liked this tutorial, what a great job!
I would just rephrase this:
“The same I will add on the right side. I will not explain one more time how this button was made. You have the steps above.”
To this:
“Please refer to the previous steps for instructions on how to create that button” (or similar).
very nice design, thanks..