When I used the slice tool on each part and export as HTML, does it generate a skeletal HTML code where it consists of frame layouts? I would like to know for both Photoshop CS4 and GIMP.
To give you a candid answer, the answer is "terrible HTML". As Scott said, Photoshop will produce a table based layout. The same goes for GIMP.
Here is a sample output for GIMP:
<table cellpadding="0" border="0" cellspacing="0"> <tr> <td><img alt="" src="slice_0_0.png"/></td> <td><img alt="" src="slice_0_1.png"/></td> </tr> <tr> <td><img alt="" src="slice_1_0.png"/></td> <td><img alt="" src="slice_1_1.png"/></td> </tr> </table>
This is an incredibly outdated and incorrect way of web design. For a more detailed explanation on why, check out this article: Why tables for layout is stupid
The problem with using tables
- mixes presentational data in with your content.
- This makes the file sizes of your pages unnecessarily large, as users must download this presentational data for each page they visit.
- Bandwidth ain't free.
- This makes redesigns of existing sites and content extremely labor intensive (and expensive).
- It also makes it extremely hard (and expensive) to maintain visual consistency throughout a site.
- Table-based pages are also much less accessible to users with disabilities and viewers using cell phones and PDAs to access the Web.
It's okay to use Photoshop or GIMP to produce web design mock-ups, and it's okay to use the slice tool to subdivide and export necessary images for your site, but it is not okay to generate your HTML using the slice tool!
Adding to John's answer:
The slice tool (both in Photoshop or Gimp) lets you define rectangular areas to export as individual images, with some limitations: only one set of slices can exist per document, and slices cannot overlap.
The final result will be a table filled with images. Apart from the reasons mentioned before, tables are the worst idea for responsive layouts, because you can't change the order of the
TDs (even frames are better for this).
Graphic programs are good for trying styles and preparing mockups (along with wireframing tools), but once you need to transition to HTML, the best thing you can do is write your own code.