Creating a WordPress Theme from a .PSD file – Part 2 (Photoshop File to HTML)
This is the 2nd part in a series on turning a design done in Photoshop into a WordPress theme. I’m documenting taking a client’s theme from concept to functional site, showing a brief overview of the steps that I take.
When last we met, I had just put the final touches on the WordPress design for “Pray With Africa”. With the design completed, it was now time to take that design and (using a combination of Dreamweaver and Photoshop) turn it into a fully functional WordPress theme.
Before we begin, I know that using the slice tool you can take a .PSD file (very easily) and turn it into a site without needing Dreamweaver. This method does give you the option of exporting CSS / HTML tables with images that do the trick pretty well. However, if you plan on using pure CSS to center the page, you may want to rethink and switch your slices to “images only”. Using the pre-rendered CSS puts everything into an “absolute” position, which doesn’t allow for even centering on any width monitor.
That being said, and having already switched my CSS slices to “images only” in my Photoshop settings, I pulled up the previously created file:
Now, in Dreamweaver, I set up my document space. That requires three things:
1) Creating a new index.html file – this will be sliced into the corresponding .php files later, but for now, I want to work on it as a whole.
2) Creating a blank .css file. This will be named “style.css”, as per standards, and will house the styles for the entire theme.
3) Attach (and copy into the directory) the “reset.css” file. This clears a lot of the browser-specific styling out of the document, and allows me to start with a blank canvas. For more information on “CSS Reset”, visit Eric Meyer’s site where he documents the need for / use of a CSS Reset.
The first div I create is a #wrapper div container. I set the width to 960 (because I’ve used a spinoff of the 960 grid system to design my mockup) and set the margins to “auto”. This pushes the div horizontally into the center of the page, and allows me to center the theme no matter what screen resolution someone is using (my themes are all optimized for 1024×768 and larger).
After that, I begin taking the image from the top down and pulling pictures (either through slicing or cropping) from Photoshop into Dreamweaver. I started with the header:
Notice there’s no logo? We’ll get to that in a second. This image will become the background for it’s own div (a #header div). Inside that div, I’ll position the logo and link it to <?php bloginfo(‘url’); ?>, a template tag that will automatically insert the URL of the blog (even if it’s not on the root of the site).
Continuing on, I’ve divided my navigation (which I’m using images for to get a really nice hover effect) into slices in Photoshop:
Saving them (and their respective hover images) into the image folder, I then create an unordered list to display them. This puts them in a nice vertical line, but since I need them to display horizontally, there’s a few things left to do.
In the CSS code, I add:
.nav li {
float: left;
}
which causes the items to float next to each other in a horizontal line (if you’re not using the CSS Reset, you’ll also have to put:
.nav li {
float: left;
list-style: none;
}
to get the bullets removed.
So, basically, by taking the parts of the Photoshop file and slicing/cropping them in Photoshop, I end up with a web comp that is very close to the mockup. You can see a web comp (non-working) here:
http://mitchcanter.com/test/pwa
Tomorrow I’ll start switching the .html file over to .php files that are separated by their function (index, header, sidebar, footer).