How to create a sleek wordpress theme


Hello. This is our first tutorial here on If you don’t know already we will create a premium website only with free premium downloads.
Soon you will find here on our website one of the best resources: vectors, icons, templates, wordpress themes, PSD files, so please bookmark our website and come back often to download some very good resources.

If you need different types of resources, please leave a comment at the end of the post.

Now let’s start with the tutorial. In this tutorial i will show you how to create a clean business layout. You can use this layout also for a wordpress theme, or for a portfolio layout. This is the final result.

For start open a new document with the following size: 1200×1200 pixels. Fill the background layer with the following color: #e8e8e8, and then with Rectangle Tool create a new shape. use the same colors i have used.

With Rounded rectangle tool create a dark shape

On the bottom create a new shape with Rectangle Tool. here we will place some links later in this tutorial.

On the top of the layout i will create another shape.

I will use a colorful  image, which will be placed on the top of the layout.

With pen tool create a shape like in the following image

Then go to Filter > Blur > Gaussian Blur, and use a value between 10-15 pixels. The previous shape will look blurry. This shape will be used as a shadow for a big shape which will be created in the following step..

With Rounded Rectangle Tool create the following shape, and place it like in the following image.

The layer styles i have used for this are shown bellow

I will select Horizontal Type Tool, and i will add some text over this layout.

With Line tool i will create 4 lines

Then i will place some icons like in the following image. To add another images, or icons on your document go to File > Place.

On the footer of the layout i will create a shape

Then i will use the following layer styles, which are very important, and you need to follow exactly the same settings if you want to have the same result as mine.

This is the result so far

On the right side i will create another shape, and of course i have used the same layer styles as above.

I will create a new document with the following size: 15 x 7 pixels, and after i will zoom it to 3200 % i will create a triangle like in the following image.

I will go to Edit > Define Pattern. i will choose a name for my pattern, and i will click on OK. Then i will close the document because i will don’t need it anymore.
I will come back to my business layout, and i will make a new layer on top of all layers ( the shortcut is CRL+ALT+SHIFT+N ), and then with Rectangular Marquee Tool i will make the following selection.

Select paint Bucket Tool, and select the pattern you just created a few seconds ago, then click inside your selection.

This is how it will look the pattern over your layout.

Do not forget to add the following layer styles on for this layer

Do the same on the bottom part, but this time please be careful when you choose the settings for your layer styles.

On the footer of the layout, i will create a dark line with Line Tool

Then right above this line i will create another line with a lighter color.

Add as many lines as you need

This is how my website will look like so far.

On the top of the layout i will create some circles. These circles will be used for the jQuery slideshow. Later you will learn also how to create such a slideshow.

For all these layers i will use the same layer styles.

Then on the top i will add a new shape with Rounded Rectangle Tool. This shape will be used to create a search form. Please use the same layer styles i have used for the small circles.

One of the last steps is to add some bullets on the footer, near each link.

This is the final result.

If you like this layout please download it , and use it as you like, but please try to link back to us or at least share this tutorial via the social bookmarks networks.

Want this freebie? Enter your email and get it now!

Simply enter you're email address and the download link will be sent right to you're inbox.

Like or share to download this freebie.

After you share this message you will be able to see the download button.

28 Responses to “How to create a sleek wordpress theme”

  1. Reply 20+ Blog Website Layout Photoshop Tutorials - Design Bump says:

    […] 9. How to create a sleek wordpress theme […]

  2. Reply 20+ Website Layouts Photoshop Tutorials | Web Design Library says:

    [...] How to Create a Sleek WordPress Theme [...]

  3. Reply daviddone says: nice,perfect.

  4. Reply Web Design PSD says:

    I very love your design themes. Thanks for your share.

  5. Reply Mehedi Hasan says:

    Thanks for sharing this tutorial with us. I am looking for some other tutorial.

    However, you may be skipped the steps of creating menu bar at the top and the bar at the bottom, right? How to create them?

  6. Reply Brett Widmann says:

    This is an awesome tutorial! Thanks for the help. I love the final look.

  7. Reply cgvector says:

    Hellow Dear this is very nice tutorial
    i like it very much
    i have my own vector graphic website i want like this template
    i need wordpress theme for it if you provide me i will be thankful to you thanks in advance

  8. Reply Swastik Solutions says:

    Nice one. Great colour choosing.

  9. Reply Al S says:

    Nice! So now that you’ve shown us how to create a layout… how about giving a tutorial on converting this PSD into a fully working WordPress theme? :)

  10. Reply maloy75 says:

    very useful tutorial. thanks

  11. Reply Extension:103 says:

    Looking forward to seeing the rest of these tutorial series.

  12. Reply machbio says:

    great work.. give out some freebies

  13. Reply Robert Creare says:

    Very slick and smart wordpress theme here. I really like the use of Apples OS starlight background effect and feel that the black content box adds a real sense of depth to the designs structure. I would really like to see a supporting post on converting this from PSD to HTML and wordpress integration. Thanks

  14. Reply Great Designer Sailer says:

    this is really nice and professional. I love it. Thanks and keep up the good work. Nice design tips!

  15. Reply Darrin Leisten says:

    Just what we wanted to learn, thanks for posting it.

  16. Reply wparena says:

    well explained and very nice theme

Leave a Reply

Free WordPress Themes

Premium WordPress Themes
WordPress Themes ThemeForest