Premium WordPress Theme Designs in Photoshop/HTML/CSS Tutorials

Author: | Posted in CSS, Freebies, HTML, Photoshop, XHTML 1 Comment


Making a Premium WordPress themes in Photoshop Tutorials from scratch is an necessary skill for designers to learn and will become increasingly significant as WordPress continues to become the web publishing tool of choice. In this two part tutorial will we cover how to make Premium WordPress themes happen. Part 1, enclosed below, shows how the Photoshop mockup is created, and in Part 2 we’ll sketch how to turn the PSD into HTML/CSS and wordpress theme files.

Premium WordPress Theme Design Part 1 – The Photoshop Mock Up


I’m Alvaro Guzman and in part 1 I’ll show you how to design a contemporary web interface from scratch using Photoshop and stock pictures. You can download the finished PSD file at the end of this tutorial. Initially let’s have a look at the finished PSD mock up:

Download the photoshop psd file

Premium WordPress Theme Design – Part 2 – HTML + CSS + WordPress Theme Files


Hi, I’m Alvaro Guzman and this is the second part of the Premium WordPress theme tutorial continued from Part 1. This time you’ll learn how to slice the design and change it into XHTML + CSS, then I’ll show you how to use the css files to mock-up a WordPress template. This isn’t a essential tutorial, if you’re a newbie, maybe you should read some basic HTML+CSS tutorials, and understand the fundamentals of CSS tags and WordPress features and structure.


If you’re a programmer, you must have some basic information about Phothoshop, layers, slicing and obviously WordPress. Anyway, if you’re an intermediate – advanced level Web Designer, I’m sure you’ll find this useful.


Tutorial files

  1. Posted by ilike2photoshop

Add Your Comment