Tutorials Upload

Fireworks > Slicen

Autor: jens
Wie kann man ein Design, das man in einem Grafikprogramm erstellt hat (Photoshop, Fireworks...), in HTML umsetzen? Wie man das realisieren kann wird in diesem Tutorial erklärt.

Schritt 1

Wie kann man ein Design, das man in einem Grafikprogramm erstellt hat (Photoshop, Fireworks...), in HTML umsetzen? Egal ob Ladezeitoptimierung oder sonstige Verwendungszwecke, geschnittene Bilder brauch man häufig. Wie man das realisieren kann wird in diesem Tutorial erklärt.
Schritt 2

Bild zu Schritt 2  - Das Segmentierwerkzeug [K]
Das Segmentierwerkzeug [K]
Als erstes müsst Ihr ein Segmentobjekt erzeugen, das kann auf zwei verschiedene Arten geschehen.
  • Man klickt das Objekt das man slicen möchte an > Rechtsklick > Bearbeiten > Einfügen > Segment.
    [ALT + Umschalt + U]

  • Aus der Werkzeugliste das Segmentierwerkzeug [K] auswählen und per Hand ein Segmentobjekt zeichnen, das geschieht durch auswählen des Segmentierwerkzeug, und dann bei gedrückter Maustaste das Segmentiertobjekt erstellen.


Schritt 3

Sobald das Segmentieren abgeschlossen ist, müsst Ihr die Segmente exportieren.

Ihr klickt dazu auf Exportieren [ALT + Umschalt + R], dort erscheint nun ein Fenster wie Ihr die Segmente speichern wollt.

Dateiname: Hier wählt ihr den Pfad, sowie den Prefix. (Vorsilbe des Dateinames)
Dateityp: Hier wählt ihr den Dateityp aus.

Speichern klicken, fertig!
Schritt 4 - HTML-Editor

Bild zu Schritt 4  - Bild vor dem Segmentieren
Bild vor dem Segmentieren
Nun einen HTML-Editor (in unserem Beispiel Dreamweaver) und den Ordner, indem sich die geslicten Grafiken befinden, öffnen.
Ihr müsst als erstes eine Tabelle einfügen mit einer Zeile sowie drei Spalten. [STRG+ALT+T] Nun im Grafikordner nachschauen welche Grafik als erstes kommt und wie hoch/breit diese ist.
Schritt 5

Bild zu Schritt 5  -

Nachdem 3 Segmentobjekte mit dem Segmentierwerkzeug gezeichnet wurden, sieht das Bild so aus.
Schritt 6

Bild zu Schritt 6  -

Im Bild ist dargestellt, wie die einzelnen exportierten Segmentobjekte in eine Tabelle eingefügt werden.

  • Aktuell 1/5 Sternen.
  • 1
  • 2
  • 3
  • 4
  • 5


Dieses Tutorial wurde geschrieben von jens - Homepage
Tags: slicen fw fireworks

Kommentare

Kommentare schreiben
Um einen Kommentar zu schreiben musst du eingeloggt sein.

Noch nicht registriert?

Ähnliche Tutorials

Ähnliche Tutorials zu 'Slicen'