Webwork
/
More Photoshop

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:

empty_window_black

The advantage of working from a blank page is that your creativity can take you anywhere:

scribble

The disadvantage of working from a blank page is that your creativity can take you anywhere:

scribble

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:

save4web01

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.

save_as02

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 problem with this is that Photoshop really sucks at HTML.

The above Web site, when exported from Photoshop using the HTML and Images setting:

Photoshop HTML:
<table id="Table_01" width="641" border="0" cellpadding="0" cellspacing="0">
<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>
CSS HTML:
<div style="margin: 0 auto; width: 641px; background: #000 url('images/bg.jpg') repeat top right; width: 641px; height: 480px">

<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.)

Previous | Webwork Table of Contents | Next >
photographs:

Semblance Portrait Project
The Built World
Greece
Hungary/Czech Republic
Poland
Graffiti
Simple Truths
Israel


Paris
Puebla, Mexico
Spain
Along the Mississippi
Italy
Santa Fe
The Reliance Building
Providence
archive:

Webwork
The Web Page from Hell
The Portals Project
Transition
Insights
Internet Spelling Guide
Ape Silverback (Primate Ruminations)
Revenge of the Movie Poster
GIFs 4 Us
The Web Rules
Webpix
Backgrounds 4 Us
Webpaper
Digital Sketches
Fonts
Sounds
© Jay Boersma   See also jayboersma.com