Zum Speichern gehe wie folgt vor:
"Datei" - "Weitere Speicherungsoptionen" - "Für Web speichern" - "Als HTML..."
An dem von Dir gewählten Speicherort legt PI eine HTML-Datei mit dem Namen Deines Bildes, in meinem Fall also "erdbeere.html" sowie einen Ordner " images" ab:
Alle Deine Trennteile findest Du jeweils als Einzelobjekt in dem image-Ordner:
Du könntest jetzt einzeln mit ihnen weiter pixeln.
Webdesigner werden durch einen Blick auf den Quellcode der Datei "erdbeere.html" erkennen, dass PI die Bildeinzelteile über eine Tabellenkonstruktion wieder als zusammengehöriges Bild erscheinen lässt. Ganz nach Wunsch können nun zum Beispiel in bestimmte Tabellenzellen andere Inhalte eingefügt werden.
Hier folgt mein Erdbeerbild als HTML-Tabelle, bei der ich im Quellcode, den PI in der erdbeer.html-Datei erzeugt hat, zwei Zellinhalte gegen zwei andere Bilder ausgetauscht habe:
 |
 |
 |
 |
|
 |
 |
 |
||
 |
 |
 |
 |
|
 |
|
|
|
|
Auf eine andere Einsatzmöglichkeit des Trennen-Werkzeuges für Webdesigner habe ich bereits in der Einleitung zu diesem Kapitel hingewiesen, es handelt sich um Friedhelms CSS-Tipp Fließtext um Grafiken. In der dortigen Anleitung heißt es:"... wird eine passende Grafik mit transparentem Hintergrund im GIF-Format benötigt ..."
ACHTUNG: Hier musst Du mit einem Trick arbeiten, denn ein Bild mit transparentem Hintergrund kannst Du nicht slicen. Dein Bild muss zunächst als JPG abgespeichert werden. Jetzt kannst Du es wie in dieser Anleitung beschrieben slicen und speichern. Öffne sodann alle Einzelbilder in PI, kopiere das erste in die Zwischenablage, öffne eine neue Leinwand, dieses Mal 'transparent', und füge das Einzelbild dort ein. Radiere das "Drumherum" weg und speichere das Einzelbild als transparentes GIF ab. Verfahren so mit jedem Einzelbild. Die Tabellenkonstruktion, also die HTML-Datei, die PI erzeugt benötigst Du für den CSS-Tipp nicht, entscheidend hierfür sind die Einzelbilder.
