Willkommen! Zunächst einmal die Erklärung, was sich hinter dem Begriff "Bilder slicen" verbirgt: Für das WWW teilt man manchmal Bilder in mehrer einzelne Bildteile auf und setzt diese dann wieder über eine HTML-Tabellenkonstruktion zusammen, so daß der Betrachter nur ein Bild sieht. Die Gründe sind sehr verschieden: Zum einen kann der Browser mehrere Bilder gleichzeitig anfordern und somir laden diese dann schneller als ein großes. Bei der heutigen Infrastruktur des Netzes ist dies sicherlich nicht mehr der hervorstechende Grund. Sinnvoller ist diese Technik, wenn man einzelne Bildteile austauschen will. Z.B über DHTML-Techniken. Hauptgrund in meinen Augen ist die Fähigkeit, Bildteile gezielter zu komprimieren. So kann man für eine Schrift eine geringe Kompression wählen, um die Schärfe zu erhalten, der unscharfe Hintergrund verträgt eventuell ein sehr hohe Kompression. Dadurch kann man das Bild optimieren und so Übertragungskapazitäten sparen. Was wird benötigt? Unbedingt empfehlenswert ist mindestens Canvas 7.02 für diese Aktion. Zudem sollte man ein wenig HTML können zum Zusammensetzen des Ergebnisses in einer Tabelle. Ich habe hier mein bekanntes Beispielbild mit ein wenig Text verziert. Dies soll nur exemplarisch dienen. Man kann auch schönere Designs machen! Wer es noch nicht hat sollte mein Tutorial zum Thema JPEG/GIF runterladen, um zu Wissen, welchen Bildteil man wie am besten komprimiert. by bob the visitor - Seite 1
Hier also die verkleinerte Abbildung des Bildes. Hilfslinien In Canvas blendet man nun, falls noch nicht geschehen, die Lineale ein (Layout>Display>Show Rulers). Wir werden sie zur einfachen Konstruktion der Hilfslinien benötigen. Nun folgt der wichtigste Schritt. Wir teilen das Bild auf. Dazu ziehen wir aus dem Linieal Hilfslinien als Schnittkanten heraus. Wenn man mit der Maus über dem Lineal ist, verwandelt sich der Cursor in einen Doppelpfeil. Nun klicken und eine Linie in das Dokument ziehen. (Diese kann auch weitershin verschoben werden.) Ich habe mich für diese 3x3 Matrix entschieden (Screenshot nächste Seite). Sie trennt unscharfe, unwichtige Elemente von scharfen, wichtigen Elementen. Zudem ist die spätere Zusammensetzung nicht schwierig. by bob the visitor - Seite 2
Camera Tool In der Werkzeugpalette befindet sich unten rechts hinter dem "Geist" das Camera Tool. Mit ihm werden wir die einzelnen Sektionen herausfotografieren. Dazu kontrollieren wir, ob unter Layout>Snap to>guides ausgewählt ist. Dann wirken die Hilfslinien magnetisch. Nun kann man jedes Teil einzeln leicht herauspicken. by bob the visitor - Seite 3
Wir ziehen also mit dem Camera Tool den gewünschten Bereich auf. Wir beginnen in einer Ecke und fahren diagonal zur gewünschten Endposition. Dank magnetischer Hilfslinien sollte die Auswahl (rot) auf den Hilfslinien liegen. Man kann an den Anfassern die Auswahl noch verändern. Wir klicken dann anschließend zur Bestätigung des Bereiches in die Auswahl (der Cursor ist derweil ein Hammer) und eine Render-Dialog-Box erscheint. Im Regelfall wählen wir hier 72dpi als Auflösung. So verfahren wir mit jedem Ausschnitt. Anschließend exportieren wir die Bildteile als JPEG oder GIF (Image>Export>GIF/JPEG) und optimieren hier die Datengröße. Dann schreiben wir den entsprechenden HTML-Code. Ich habe hier teilweise einzelne Reihen und Spalten zusammen gefaßt. D.h. dann in diesem Fall muß man bei der Tabelle die rowspan bzw. colspan Tags benutzen. Von einer zu starken Zerkluftung des Bildes sollte man Abstand nehmen. Irgendwann ist der Nutzen dahin. Schauen wir uns auf der nächsten Seite das Resultat an. by bob the visitor - Seite 4
Den oben und linken Teil kann man recht stark komprimieren. Die rechte Seite sollte nicht ganz so stark, die Mitte noch weniger und die Schrift fast gar nicht komprimiert werden. Die Vorschau beim Export läßt den Grad recht feinfühlig einstellen. Übrigens, interssant wird das ganze bei Designs die viele weiße Flächen und wenig Farben verwenden. Hier kann man teilweise auf GIF ausweichen, das dann in diesem Fall die Dateigröße noch weiter schrumpft! Auch diesmal: Happy Canvassing! by bob the visitor - Seite 5