XHTML and CSS from Photoshop

February 19, 2007 on 12:47 pm | In Web Site Reviews | No Comments

By R Kamalathasan
Edited by Lucky Balaraman

You have a magic lamp in your hands, you rub it, and a genie emanates from the spout.

You to the Genie: I’m an experienced Photoshop user… my wish is that I should be able to program a web page in XHTML and CSS without being adept in these languages and without outsourcing the task. Can you deliver, Genie?

Genie to You: Your wish is granted, oh Mighty User!

***

What the Genie was talking about is SiteGrinder,  a plugin for Photoshop that creates valid XHTML code and CSS code from a web page you design in Photoshop. Here’s an overview of the program:

Firstly, using Photoshop alone to create a web page will be as tedious as walking 200 kilometers without food, water or shoes. It involves slicing the image, exporting it to HTML and creating the other pages using an alternate web authoring program.

Added to that, if you need to change the design of the page later, it will be as tedious as catching a fish, throwing it back into the water and trying to catch it again. You would also need expertise in HTML and CSS to work with the fish. But what if you don’t know HTML or CSS?? Are you doomed to a fishless existence?

Absolutely not! With SiteGrinder, you don’t need to be a PhD in HTML and CSS, you don’t have to slice your images up and you don’t need to create code for rollovers or popups. You merely have to perform a few simple steps in Photoshop to make your page SiteGrinder-ready.

To prepare a Photoshop web page for SiteGrinder, all you have to do is assign an independent layer to each element in the document. You should append a suffix (a “hint”) preceded by a hyphen to the layer name to describe the nature of the element to SiteGrinder.

For example, if a text layer in Photoshop contains the text “About Us”, and the name of the layer is ‘About Us - button’, SiteGrinder will understand that the text ‘About Us’ is a button link and convert it to XHTML accordingly.

In this way, you can create all the pages of your web site in Photoshop, and transform them into an integrated XHTML and CSS web site with a single click. Is that a miracle or what?

SiteGrinder comes with abundant help files including detailed video tutorials. Everything is explained, especially the 35 hints (which comprise a feature unique to SiteGrinder and not commonly known).

CONCLUSION:

I have exercised the basic commands of SiteGrinder (hence my terming of this article an “overview”) and have not found any drawbacks so far. I am convinced beyond a doubt that this tool will definitely save a web developer an incredible amount of time.

It’s certainly worth giving SiteGrinder a try — explore the capabilities yourself: in all probability you’ll be delighted!

You can download a trial version from their site here. (not an affiliate link).

You can download a trial version of Photoshop here (not an affiliate link).

Good luck with SiteGrinder, and come back with comments on your experience!

Technorati Tags: photoshop, css, xhtml, web+design

---