How to Create a Unique WordPress Theme
Templates, Tutorials, Web layouts 94 Comments
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.
To download the .psd file please click on the blue button below.
Newsletter
Subscribe for free to the grafpedia’s newsletter and get all updates coupons and exclusive free graphic resources every week. Read this page to have more information about the newsletter or fill the form below to subscribe now !
Responses to “How to Create a Unique WordPress Theme”
Trackbacks
- Excellent Photoshop Web Design Layout Tutorials | MODERN VISION BLOG
- 5 tutoriais para criar layouts « ?
- 20 Kaliteli Photoshop Web Tasarım Dersi | Sorbize
- 20 Kaliteli Photoshop Web Tasarım Dersi | Kaangökçe
- Otros 20 tutoriales de diseño web para Photoshop | Recursos para Diseñadores Gráficos y Web | Creativos Online
- 20 High Quality Photoshop Web Design Tutorials | Where Creativity & Design Thrives
- 30+ Excellent Photoshop Web layout Design Tutorials « Royale9designs a web and graphic design studio – Web Design Services, Web Development Services, SEO Services, Graphic design services, kolhapur, India
- High Quality Web Design Tutorials with Photoshop | Tutorials Photoshop Flash 3d
- 20个高质量的photoshop网友设计教程 | 发现吧-发现新奇与美
- 20 High Quality Photoshop Web Design Tutorials « Dheerajir's Blog
- 30 Fresh Web Layout Design Photoshop Tutorials
- 30 Fresh Web Layout Design Photoshop Tutorials | Web Design Cool
- photoshop网页设计，photoshop网站设计教程，网页设计教程 | 一生设计
- 25 Photoshop Tutorials for Creating High Quality Web Design « Julia Khusainova's Blog
- 20 High Quality Photoshop Web Design Tutorials - www.huedesigner.com
- 30 Fresh Web Layout Design Photoshop Tutorials « Design Invader
- 20个漂亮的Web设计PS教程 « Focusec
- 30 Tutoriales Photoshop para Diseño Web « ——— BLOG ADESIGNS ———
- Design Spartan : actu, inspiration, tutoriels et ressources sur le graphisme, le webdesign, le digital painting...
- 20 High Quality Photoshop Web Design Tutorials | Web Design
- Creating High Quality Web Design | Harry Jay
- » 10 Latest Photoshop Tutorials To Help You Learn New Techniques The Mission Web
- 20 High Quality Photoshop Web Design Tutorials · WS Technocrats – Web Gone Modish – Blog
- 20个漂亮的Web设计PS教程 | 虎鲸趋势
- 20 High Quality Photoshop Web Design Tutorials | Hallo World
- Colours In Modern Web Design (Inspiration & Tutorials) | Online Music,Movie Entertainment Portal
- Colours In Modern Web Design (Inspiration & Tutorials) | 39Articles
- 67 Web Layout Design Photoshop Tutorials
- Aprende a Diseñar Web con Photoshop | Fotografía y Diseño
- 250+ Best Web Design Tutorials to Take Your Creativity to the Next Level – Part 2
- Web Layout Designs Tutorials Part 3 | VapvaruN | Wp Experts
- 10+ Beautiful Textured Website Layout Photoshop Tutorials | Tutorials Share | Photoshop RoundUps, Vector RoundUps, Code RoundUps, Funny RoundUps
Leave a reply
Subscribe for free to the grafpedia’s newletter and get all updates and exclusive free graphic resources every week !
This program is open for all webdesigners, it's easy : send us your best works in a .psd or .ai file format, and if our team select it, we will give you money for it and your work will be on Grafpedia…
- Apple/iPhone (5)
- Backgrounds (5)
- Bacl Office (1)
- Brushes (32)
- Business (5)
- Car (1)
- Designing (16)
- Drawing (13)
- Freebies (5)
- Gradients (5)
- Graphics Resources (258)
- Icons (62)
- Illustrations (2)
- Layer Styles (2)
- Logos (1)
- Mockup (3)
- News (15)
- Photo Effects (3)
- Portfolio (10)
- Psd to HTML (1)
- Templates (113)
- Text Effects (1)
- Textures (19)
- Tutorials (140)
- Vectors (144)
- Videogames (3)
- Web 2.0 (1)
- Web Elements (45)
- Web layouts (118)
- Webhosting (1)
Grafpedia.com is a website created by web designers and dedicated to web designers. Find on Grafpedia lot of graphic design resources, icons, vectors, brushes, pictures, and tutorials! The grafpedia team publishes every week new psd files & tutorials. 
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..
愿你夜夜都有好梦相陪，天天都有快乐相随！
I’ve tried numerous times doing a web design on my own but it always turn out odd in a way. In the end, I decided to use the professional services of an online design site offering web design packages instead (http://www.logodesignstation.com) and got the design I wanted at an affordable price and fast too. I did provide this link for reference and inspiration to my designer as I liked how yours look. Thanks for posting this, by the way. It looks really polished and sleek.
I like your tutorial it benifit for my design!
Can someone help me make the CSS, I have an image splice of the layout but cant develop the CSS to install on my WordPress. I like JQuery and fixed header section, can anyone help me please email me @ myfaytoday@gmail.com
good idea&design！
Very nicely written tutorial. Absolutely beautiful design.
Thank you so much.
good job~ design！
nice tutorial,, i need this.. thanks
Thaks is a grat tutorial, keep in that way !
Grat design.
Regards
I love this website i have learnt lots of things.
I think a tutorial of how to combine colors and create palettes will be very helpful.
Thanks.
Very nice!
I like this design a lot, it’s clean and impressive. Tutorial is great as usual, all steps are described with detailes. Thanks.
very informative
thanx for sharing
i was looking up for something like this from a very long time
graphic designer
Very nicely done. Great tutorial
Very nice, and very original. Well done!
Great One too !
Great tutorial! Thanks so much!
good tutorial , thanks
How do I convert this to html? Is there a file or tutorial that shows this? Thanks in advance!!!
Amazing tutorial. Thank you
awesome tutorial, thanks a lot. any chance to reveal which fonts you used?
all the best!
Nice Tutorial. Thanks for sharing
Extremely helpful and easy to follow. I particularly liked the tips on touches like the 3-D effect. Thanks!
it was good. But it was difficult to understand.The Edit was not good.
Now I’ll start making characters. Nice idea, well explained. Thanx!
Great looking theme.
I am in the process of redesigning my site.
Being a photographer I want to include many of my own photos.
This gives me some ideas. Thank you!
1st Gradient Overlay screen is not the right one:)
It looks great! So clean and beautiful.
Very crisp and clean looking layout. Well done.
This was truely inspirational. The directions were easy to follow. As a beginner I have been struggling with all the commands but this made sence to me. Thank U!
the download shows ‘page not found’……….
Link is broken…
The last symbol is not religious. It’s double Chinese character “喜” (which means happy, happiness, joy) combined together. The symbol is often used in traditional Chinese wedding ceremony, made from read paper, pasted to walls, doors, etc.
Wow, these are real awesome, thanks for sharing free! love the details of each piece!
Awesome man.. excellent
helpful thanks