My basic process for converting a PSD into an HTML page begins by slicing out all the images. As I go through the PSD, this helps me build out the structure in my head, how this container holds that element, etc. This also helps me streamline my work flow.

My next step is to build out the raw HTML.  As of late I have been using (or at least trying to) the HTML5 Boilerplate. This is a great base for getting started quickly. I have a stripped down version that has many of the server settings and extras pulled out that I just don’t need for many projects.

As I build out my HTML structure, I add in my class names and ids. I can get a good 70%-80% of the majority of the structure put in place in one flow. I then add any additional copy that I have on hand. I then follow up with adding all the classes and ids to the style sheet.  This is typically a tedious back and forth process of pouring through all that HTML I just wrote and copying and pasting the names.

I came across this great bookmarklet called aptly “HTML to CSS Tool” by Neal Grosskopf.  The article describes the process of building this tool but right at the bottom is the bookmarklet link.  Just grab that and put it in your favorites.  Now load up your local HTML file and click the bookmarklet, it adds a textarea at the top with all the ids and classes (no duplicates) so you can select all and copy and paste into your style sheet. It even grabs any inline styles as well. I find this incredible handy.

Once I have all the classes and ids I being filling them in with their respective properties.

After the page is pretty rock solid and I of course have tested using IETester – (able to load multiple versions of IE in one simple app) and Portable Apps browsers (install multiple versions of Firefox and Chrome as separate installs) I move on to optimization.

UPDATE – 9/20/11:  I now use IE9 and the F12 Developer Tools. You can select the different rendering engines 7+ (still no IE6 but I have stopped supporting IE6)

Ive said it before and Ill say it again, I really don’t know how people made websites without Firebug (a Firefox Add-on and THE reason I continue to use Firefox).  I also add YSlow to Firebug, both of which can be found through the Add-ons menu in Firefox. YSlow has a few tools that can help you minify your Javascript and CSS as well as runs an extra compression on the images in this page with little to no quality loss. It then provided a package of images for you to replace. The down side to this is it only does one page at time so I only use it when doing heavy site performance audits and clean up.

UPDATE – 9/20/11:  I also use Firebug Lite on non Firefox browsers.  I still like it better than Webkits inspector.

Once all this is in play, I work on converting my individually sliced images into sprites with SpriteMe. This is another bookmarklet that will pull the background images from the page and let you configure and combine them into sprites. It then gives you a package of sprite images and the line by line css to incorporate the sprite image(s).  Down side is that it doesn’t handle rollovers you have built or added already but its a great start. This can really help reduce the number of HTTP requests specially for all those little icons.

I wanted to make sure that I added that I recently made the move to the editor Espresso by MacRabbit. This is a light weight, fast code editor with auto complete and it handles numerous languages. Still trying to figure out the internal FTP but Filezilla is still tried and true.

UPDATE – 9/20/11: I have finally found a way to SVN in the Mac Finder.  On the PC I use Tortoise SVN but there was no equivalent for the Mac until SCPlugin. The problem for the last year was that it would error out and not allow me past the bad security certificate from BeanStalk.  Here is how to overcome that:

To fix that, you’ll need to use the Subversion command line, one time.  If you don’t have Subversion command line installed, no problem: we installed one for you!  Just open a Terminal window and type:
  /Library/Contextual\ Menu\ Items/SCFinderPlugin.plugin/Contents/Resources/ ls https://….
Note that that’s one long line, though it probably got broken up into two or more by the email system.  There are spaces in “Contextual Menu Items”, which you’ll either need to escape with “\”, as I have shown, or put “quotes” around everything from “/Library” to “/svn”.
Where I show “https://…”, of course, you should put your own URL.  ex:
When you do this, you should get a prompt complaining about the server’s certificate, and offering to let you accept it “(p)ermanently”.  Just answer “p”, and both command-line Subversion and SCPlugin will always accept that certificate.  –

When checking out – be sure to select the recursive check box or it won’t get any of the folders inside that directory.

UPDATE 5/11/2012: beanstalk updated their certificates so you need to re-accept them.

Hope you find at least one of these tools useful, I know I have.