Photoshop to a Website
September 20, 2007
I’ve been asked on many occasions: how can you take a Photoshop layout and turn it into a web page?
Actually, here is a snippet of an email from a reader:
“I would love to see an example of taking a psd file, which is how I usually start. And then go to Step One, Step Two, etc to turn it into a web page.”
You have a few options … let’s start with the option you should avoid: slicing images.
Why slicing images is bad:
Note: to be clear, I am talking about slicing up an entire page and then reassembling it within an HTML table.
Image slicing was invented in the mid 90’s (I remember when I did it manually!) where you would create your web page layout in Photoshop (any image editor really,) and then use the guides to create ‘slices’ out of your page.
These pieces were then cut out (using the selection tool + copy) and saved as individual images (gif’s for solid color, jpg’s for continuous tone – photographs) where you would reassemble the pieces in an HTML table.
Why would you slice images, why not just import the sliced graphics/page as one big image?
In a nushell: optimization / file size. You would select portion of the image that were best save as gif’s and select other portions that were best saved as jpgs to reduce the over all size/weight (in Kb’s) of your image.
I’m getting to the point … later Photoshop provided an image slicing tool and made this easy. But you should not use image slicing anymore because:
- Image slicing requires tables to hold images together .. not good.
- Web pages built this way are terrible to manage and update. You always have to go back to Photoshop to make any changes.
- Web pages built this way are NOT search engine friendly.
- It’s just so 1996 … ach!
That said, there maybe is a time when you can use this ‘old-school’ approach to building a web page: when you are prototyping.
… That is to say, when you need to get something out quickly to perhaps, show clients some early mock-ups. Or maybe when it is a one page job that is temporary.
Beyond that, you ought to be using modern web design techniques that largely includes CSS for web page layout.
So what is the best approach?
If you are comfortable with laying out pages in Photoshop, that’s cool. But once you’ve done that, you need to go to HTML and CSS and recreate your basic structure. If you are not comfortable with CSS, you can use free open source web templates that can serve as a framework for your website.
About Using Website Templates
.. You are basically looking for (in a template) a basic layout that goes with your design, for example:
- 1 column.
- 2 column.
- center aligned.
.. etc.
Once you’ve found a template that works, you can then drop your images into place.
What if you don’t understand HTML and CSS?
You can turn to programs like Dreamweaver … they can help because web design programs like that, make creating web pages fairly easy with features like:
- drag-n-drop web page editing
- CSS templates
… And much more.
I would suggest that if you see yourself doing more and more web work, that you help yourself and learn the code behind the web pages.
Thanks for reading.
Stefan Mischook
www.killersites.com
www.killerphp.com
