Working without a Net
If you are not working from a wireframe and you simply want to creatively "play" to see what happens, you can develop your Web design on a blank Photoshop "page." Some people find being faced with a blank page to be kind of intimidating; others find it exhilarating. Work in whichever way is most comfortable for you and suits the intent of the project you are working on:
The advantage of working from a blank page is that your creativity can take you anywhere:
The disadvantage of working from a blank page is that your creativity can take you anywhere:
Exporting Web Graphics from Photoshop, Part Two
The Slice Tool, when used with Photoshop's Save for Web and Devices exporter also gives you the option of letting Photoshop generate html for you.
To do this:
1. Open the Save for Web and Devices... dialogue and select the appropriate file type and amount of compression for each slice:
6. In the Save for Web and Devices... dialogue, hit the Save button and the Save Optimized As dialogue will pop up. At the bottom of the Save Optimized As dialogue, select HTML and Images and All Slices and hit Save again.
Photoshop will save the entire image sliced into as many pieces as necessary and generate an HTML document that puts all of the pieces together.
The above Web site, when exported from Photoshop using the HTML and Images setting:
<tr>
<td colspan="9">
<img id="splatter_site_01" src="images/splatter-site_01.jpg" width="640" height="86" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="86" alt="" /></td>
</tr>
<tr>
<td colspan="2" rowspan="6">
<img id="splatter_site_02" src="images/splatter-site_02.jpg" width="48" height="304" alt="" /></td>
<td rowspan="2">
<img id="video" src="images/video.jpg" width="46" height="49" alt="" /></td>
<td colspan="6">
<img id="splatter_site_04" src="images/splatter-site_04.jpg" width="546" height="36" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="36" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="3">
<img id="splatter_site_05" src="images/splatter-site_05.jpg" width="357" height="201" alt="" /></td>
<td colspan="2" rowspan="2">
<img id="photography" src="images/photography.jpg" width="175" height="48" alt="" /></td>
<td rowspan="7">
<img id="splatter_site_07" src="images/splatter-site_07.jpg" width="14" height="358" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="13" alt="" /></td>
</tr>
<tr>
<td rowspan="4">
<img id="splatter_site_08" src="images/splatter-site_08.jpg" width="46" height="255" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="35" alt="" /></td>
</tr>
<tr>
<td colspan="2">
<img id="splatter_site_09" src="images/splatter-site_09.jpg" width="175" height="153" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="153" alt="" /></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img id="splatter_site_10" src="images/splatter-site_10.jpg" width="310" height="67" alt="" /></td>
<td colspan="2">
<img id="painting" src="images/painting.jpg" width="122" height="50" alt="" /></td>
<td rowspan="4">
<img id="splatter_site_12" src="images/splatter-site_12.jpg" width="100" height="157" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="50" alt="" /></td>
</tr>
<tr>
<td colspan="2" rowspan="3">
<img id="splatter_site_13" src="images/splatter-site_13.jpg" width="122" height="107" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="17" alt="" /></td>
</tr>
<tr>
<td rowspan="2">
<img id="splatter_site_14" src="images/splatter-site_14.jpg" width="17" height="90" alt="" /></td>
<td colspan="3">
<img id="game_design" src="images/game_design.jpg" width="177" height="69" alt="" /></td>
<td rowspan="2">
<img id="splatter_site_16" src="images/splatter-site_16.jpg" width="210" height="90" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="69" alt="" /></td>
</tr>
<tr>
<td colspan="3">
<img id="splatter_site_17" src="images/splatter-site_17.jpg" width="177" height="21" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="21" alt="" /></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="17" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="31" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="46" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="100" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="210" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="47" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="75" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="100" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="14" height="1" alt="" /></td>
<td></td>
</tr>
</table>
<div style="position:relative; top:86px; left:48px; z-index:10;"><img id="video" src="images/video.jpg" width="46" height="49" alt="" /></div>
<div style="position:relative; top:73px; left:450px; z-index:10;"><img id="photography" src="images/photography.jpg" width="175" height="48" alt="" /></div>
<div style="position:relative; top:220px; left:410px; z-index:10;"><img id="painting" src="images/painting.jpg" width="122" height="50" alt="" /></div>
<div style="position:relative; top:245px; left:18px; z-index:10;"><img id="game_design" src="images/game_design.jpg" width="177" height="69" alt="" /></div>
</div>
Because of this wasteful and inefficient use of depreciated HTML tags and invisible image spacers, Photoshop can be used to create image slices but should not be used to generate HTML. (The only application that produces worse HTML than Photoshop is Microsoft Word.)
