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
I agree that photoshop should not be used to slice images into HTML. However, I don’t agree with one of your points.
“Web pages built this way are NOT search engine friendly.”
That’s so untrue - search engines are able to understand pages built in what we would class an “old fashioned” way. I would agree that doing the site in pure CSS is likely to perform a little better than one with lots of tables etc. But it certainly wouldn’t make the site “NOT search engine friendly”.
My two cents…
Er, this is the most misleading and incorrect blog I’ve read in a long time. Slicing is by far the best way to take a psd into a web layout. Saying you need to use tables for assembling slices is the most untrue thing in your whole blog - I do not know of anyone who is still using tables to assemble layouts. You slice your images and then create your divs, how exactly is that a bad approach?
Ok,
I should update my article just a touch:
1: Photoshop sliced based web pages are LESS search engine friendly. On the other hand, if you have a great site with lots of content, you can override that.
2: If you are moving your slices into div’s rather than html tables .. it is better. I was referring to the fact that the Imageready export option (after you slice the image,) exports the page using a table.
… Perhaps Adobe has changed that?
Stefan
I think what you should stress in the post about these programs ‘playing’ at being web applications is that they do (Most of the time) produce the layouts in Tables … Which is actually COMPLETELY in-accessible… A much bigger reason not to use it than it might effect your SEO.
Also the programs that do ‘try’ to produce a CSS based design using DIVS will 99% of the time use absolute positioning… Which is absolute’ly CRAP (See what I did there) and all the ones I have seen are never cross browser compatible… And try increasing the text size on them.
In short don’t use them and pay a real web designer to turn you’re PSD into a website… :o)
This is ridiculous.
You say:
“Image slicing requires tables to hold images together .. not good. ”
- That’s simply not true… you’ve tried to rectify yourself on an earlier post but it is a ridiculous statement nonetheless.
Further on:
“Web pages built this way are terrible to manage and update. You always have to go back to Photoshop to make any changes.”
- So you would make an update on an image without Photoshop?!!? What, you use notepad to edit you .gif files?
And it continues
“Web pages built this way are NOT search engine friendly.”
- The way you cut-up your images have NOTHING to do with SEO. The coding involved on putting them up is what matters.
Finalizing:
“It’s just so 1996 … ach!”
- Maybe if a technology is around on the world’s most use image editor since 1996 it probably means it is a good one.
I stand by my statements.
Image slicing is an antiquated method of web design. The main reason to slice images:
- to optimize different parts of an image with either gif or jpg pieces … based on the portion of the image. This was to keep the image size down.
- to facilitate layouts that were not possible in the late 1990’s.
Both these reasons are now gone given we have CSS positioning.
Thanks for the comments though.
Stefan
i think you are confusing slicing images to a export to HTML feature.
i do remember in the 90’s when programs life fireworks had the option to transform you whole png file in a html - the result would be pretty much a html with one big image file (you could even add in links and menus that would work with hotspots).
Now CSS positioning does not in anyway replace or even relate to slices. Slices are simply an easy way to get your images cut up in a way that they will easily combine when setting up the CSS puzzle.
I wonder what you really do to cut your images across, say - a header for your main div. You either use slices or rectangle selection tool + copy + paste onto a new file (which is what slices do for you) i honestly cannot think of any other way.
Anyways… to be honest it doesn’t matter to me. Just thought would be nice to share my thoughts.
You said:
“Now CSS positioning does not in anyway replace or even relate to slices. Slices are simply an easy way to get your images cut up in a way that they will easily combine when setting up the CSS puzzle”
Why would you want to do this?
We are discussing a whole page in Photoshop being converted to a web page, not an image in Photoshop being cut up and made a web page element.
This means that the whole web page contains almost nothing in text, other than perhaps a title, a couple of meta tags and some alt tags for the cut up images. The rest of the text are in the cut up images and cannot be read by search engines.
This is not the kind of page that search engines would rank high. At least, not normally. For this reason alone, I don’t think that this is a good idea.
look, in layman terms. how do you take a template, (pre - designed), downloaded with psd, css, html and turn it to a web site.
You need to learn some basic web design:
www.how-to-build-websites.com
right now i have fireworks cs3 and a generic html editor, (front page). i sliced my document and saved it to my folder. now theres like 40 small documents in my folder. how do i put them together? please help guys.
Les,
I would suggest that you take a step back and forget the whole Fireworks slice-&-dice approach to page layout.
If you can spare some time, you should learn the basics of CSS positioning and then layout your pages that way.
Check out: http://www.csstutorial.net
THANKX 4 THE ADVISE. i don’t have alot of time and my project to this point is simple.
i just want to take the file i’ve already completed and transfer it to my text editor, (first page 2006). i can, but when i sliced the page in fireworks, i changed some slices to html.
Then when i got the file everything was there, but i can’t integrate the html slices, so theres holes in my template.
u guys out there have all the info. i need to make it to the next stage. please share…. if u have the time.
how do i integrate everything i send to save, into my editor?
@Ridzwan: If you use the correct properties of the tag then you can direct spiders to read the contents of the image, i.e.
this would direct the spider to a page which described the image correctly and the search engine would treat the contents as text.
The slice can be used to good effect I feel, although i really do love CSS: the big thins about slicing is browser compatability and how Firefox basically screws up ANY slicing you do.
My 2pennies worth. Oh and putting sliced images into can e tedious at best i feel; the spacers needed for some of the slicing jobs can be a real pain the rear-end!
Boog’s
Just so I understand what is being said here - If the body, header and footer were all rectangular, I could easily layout my page with CSS and upload a 1px .gif for repaet for background color, but lets say the body of my template has rounded corners or some other kind of design. What is wrond with creating the image in Photoshop, then making a top, middle and bottom slice, saving as optimized for the web, placing the top slice in a div, repeating the middle slice, and then placing the bottom slice? Plenty of the templates on your free template site do this.
I think sums it up:
“We are discussing a whole page in Photoshop being converted to a web page, not an image in Photoshop being cut up and made a web page element.”
Cutting out an image to insert is fine; it is the whole page conversion thing that sucks.
Stefan
hey guys,
i prefer to call myself a beginner in web design. Just have a little query in mind, hope the experts out there can help me with the answer.
Is it true that if you go about the method of converting slices into creating .html page, hard to update (as i think) in the sense that if you need to change a property of a certain slice (component)….lets say, the size, then one has to go back to do the whole slicing process again after changing the size of that particular component??? because…otherwise, the components wont fit in the puzzle if the page is not sliced again. Is this true?
I use CSS to layout my page in dreamweaver, which makes it much easier for updating design components, however, i always had this question in mind about converting slices directly because for me web design using photoshop and dream weaver is a self study through research. I always created sites using Flash previously.
appreciate your time and hope to get some help.
thanks
“lets say, the size, then one has to go back to do the whole slicing process again after changing the size of that particular component??? because…otherwise, the components wont fit in the puzzle if the page is not sliced again. Is this true?”
If I understand your question, yes it is true.
Hi Stefan,
I love this site by the way, just found it and I think its great.
But I guess at the end of the day, each website has a purpose doesnt it? So if the website meets its objectives of Generating revenue or create branding or whatever else its supposed to do, then why does it matter whether or not the images are sliced?
Strictly speaking the standpoint of using CSS to lay out the site is the most advanced way to create a functional website with the most control.
As a website designer, you need to pick your battles. Do you really need to go the extra mile (and sometimes you do) or will a slice and text over in tables (which displays just fine) suffice?
The CS3 package from Adobe also has a very good combination of fireworks, dreamweaver and of course photoshop that’s handy for pure designers (non-coders). We also think it’s best for designers to focus on designing for web standards and over the years we’ve found that there exists a pattern applied by designers in an effort to achieve accessible and highly usable designs.
Slicing images is bad? Sorry man, I am a graphic designer for a major internet company and slicing images is an integral part of the process of creating a site. Translating text rendered in Photoshop to CSS rendered through browsers is the major problem here with people designing for the web. I think what you are trying to say is that people should not be slicing images of Helvetica text in Photoshop because its easy NOT slicing and implementing photos or graphic based images, or custom fonts that are not browser compatible. Your article is confusing and misleading… we all make mistakes. Its easy to edit your blog right?
Wonder what CSS you used to create this image? Point taken.
http://www.killersites.com/blog/wp-content/uploads/2007/10/psd-to-web1.gif
Hi,
Perhaps I was not being clear enough in my article; when I am talking about image slicing I am talking about create a enter page based on sliced images that are then reassembled in the web page.
From my article:
“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.”
For individual images, you may need to use the selection tool in Photoshop to ‘cut’ it out for insertion into a web page … that is clear and acceptable.
Again, I am talking about the old practice of creating entire page layouts with sliced images.
Hope that clears things up.
Stefan
Stephan,
Yes you are clear. I agree that the old school way of slicing and then placing a full page of “Pieces” into an HTML document is obsolete with CSS now taking the place of tables.
I still slice individual graphics to be placed into my pages using CSS, and that works great. For instance if you need a stylized box with rounded corners or some type of graphic design inserted into your page, you simply slice it up and use the graphic sections that cannot be rendered in CSS to complete your design.
However, most of the page can now be rendered with CSS Styling instead of millions of little pieces, and it makes for a much smaller, cleaner, and faster loading page.
As far as updating your images/slices, it’s much easier to do when your whole page doesn’t rely on sliced puzzle pieces. You can modify only the images/graphics you need to update without disturbing the rest of the layout.
Best.
Stefan, Please excuse my mistake in the spelling of your name. If you can please correct it for me.
That’s what happens when I get in a hurry!
=:]
I’m glad you wrote about this.
I found this blog when someone we contracted out explained to one of my co-workers how to make a web site using sliced images from Illustrator (RED FLAG). We are re-designing our web site to be more SEO friendly and to be easy to update. I didn’t even know where to start to explain that the splice-n-dice method of web site creation is antiquated.
I agree with you completely- layout design should not be sliced images.