Premium Wordpress Theme Designs in Photoshop/HTML/CSS Tutorials

Wed, May 20, 2009

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

wordpress-appearance-source

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

part1

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

part2

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.

part3

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.

wordpress-appearance