3.5 Das Design slicen
Jetzt stellen Sie sich bestimmt die Frage woran Sie erkennen können, welche Grafiken Sie für die Umsetzung benötigen. Dies ist in der Regel bei jedem Design anders, daher erfordert es vor allem Erfahrung in der Entwicklung mit HTML und CSS. Bereits nach wenigen Webseiten dürften Sie ein Gespür dafür erhalten, wie Sie eine Webseite geschickt einteilen können. Ich mache Ihnen dies in diesem Kapitel vor. Sollten Sie sich anschließend an anderen Designs versuchen so kann ich Ihnen für den Anfang empfehlen, zunächst mit der Umsetzung zu beginnen und dabei dann die einzelnen Bestandteile zu slicen. So werden Sie schnell merken, welche Grafik Sie gerade benötigen. Ebenfalls gut zu wissen ist es sicherlich, dass es fast immer mehrere Möglichkeiten gibt, ein Design in Einzelgrafiken zu zerlegen. Dabei gilt es diese Grafiken so klein wie möglich zu machen oder gar vollständig auf sie zu verzichten. Je kleiner die Grafiken sind, desto geringer ist auch die Ladezeit der Seite. Größere Flächen, wie etwa der graue Inhaltsbereich dieser Webseite, könnten sicherlich auch durch eine Grafik eingefärbt werden, aber hier empfiehlt es sich zum Beispiel auf CSS-Eigenschaften zurück zu greifen um somit auf eine entsprechende Grafik verzichten zu können.
Hintergrund-Grafik
Um den Hintergrund wie im Design mit HTML und CSS nachbauen zu können, benötigen Sie lediglich eine kleine Grafik. Wählen Sie dazu das Auswahlrechteck-Werkzeug und erzeugen Sie eine wie in Abbildung 1 dargestellte 1 Pixel breite Auswahl. Diese Auswahl sollte nach Möglichkeit exakt so hoch sein wie der Verlauf, denn Sie zu Beginn von Kapitel 3 im Hintergrund erzeugt haben. Den unteren Bereich, in dem die Pixelfarbe gleich bleibt benötigen Sie demnach nicht, da Sie diese Farbe später als Hintergrund festlegen können.
Um aus Ihrer Auswahl eine Grafik zu erzeugen gehe ich vermutlich etwas unkonventionell vor. Diese Technik hat sich bei mir jedoch bewährt gemacht. Drücken Sie zunächst Strg + Shift + C. Damit kopieren Sie jegliche Inhalte in Ihrer Selektion, egal auf welcher Ebene sich diese befinden. Erstellen Sie anschließend eine neue Datei (Strg + N) und fügen Sie den zuvor kopierten Inhalt in diese Datei ein (Strg + V), die aufgrund der kopierten Auswahl bereits die richtigen Maße besitzen sollte. Zu guter letzt müssen Sie diese Datei speichern. Dafür verwende ich immer die dafür ausgelegte Photoshop-Funktion Für Web und Geräte speichern (in älteren Photoshop-Version heißt diese Funktion einfach Für Web speichern unter...). Ich verwende die in Abbildung 2 dargestellten Einstellungen. Für den Anfang ist dabei für Sie lediglich das Dateiformat wichtig. Ich wähle in diesem Fall oben rechts das Format png aus, da dieses neben jpg für den Verlauf die beste Kompression aufweist. Die Dateigröße können Sie unten links kontrollieren. 373 Bytes sind für diese Grafik vollkommen okay. Geben Sie dieser Grafik nach einem Klick auf Speichern beispielsweise den Namen background_gradient.
Hinweis: Ich verwende übrigens grundsätzlich englische Dateinamen, da diese keine Umlaute enthalten.
Banner-Grafiken
Den Banner könnten Sie in einer Grafik abspeichern, das heißt Sie machen eine Selektion über die gesamte Bannerbreite und kopieren diese wie zuvor gezeigt in eine neue Datei und speichern diese ab.Um Ihnen möglichst viel mit auf den Weg zu geben, möchte ich dies jedoch anders realisieren. Und zwar erstelle ich zunächst nur eine Selektion um die linke Bannerhälfte und kopiere diese in eine neue Datei. Dabei orientiere ich die Breite an der zu Beginn von Kapitel 3 mittig platzierten Hilfslinie. Meine neue Datei ist 944 Pixel breit und 90 Pixel hoch, da ich beim Anlegen der neuen Datei einfach die Breite von 472 Pixeln auf 944 Pixel verdoppelt habe. Die Werte können von Ihren sicherlich minimal abweichen, je nachdem wie groß die Spiegelung unter der Schrift bei Ihnen ist. Diese sollte auf jeden Fall vollständig in diese Grafik passen.
Nachdem Sie den Titel der Seite in die neue Datei kopiert und dort linksbündig ausgerichtet haben, ändern Sie die Einstellungen der Spiegelung des Titels. Ich habe dafür die Deckkraft der Textspiegelung auf 40% erhöht. Nun erzeugen Sie erneut eine Kopie des Banners.
Wichtig: Die Grafik muss exakt der vorherigen Grafik entsprechen mit dem einzigen Unterschied, dass Sie die Deckkraft ändern. Mein Ergebnis entspricht dem in Abbildung 3. Diese Grafik speichern Sie mit der aus Abbildung 2 bereits bekannten Funktion im jpg-Format mit einer Qualität von 60%. Diese ist für Webseiten meines Erachtens in den meisten Fällen vollkommen ausreichend.
Jetzt fehlt lediglich der rechte Teil des Banners. Diesen können Sie wie gehabt selektieren und erneut im jpg-Format mit einer Qualität von 60% speichern, so dass Sie eine Grafik wie in Abbildung 4 erhalten. Bedenken Sie jedoch bitte, dass die Größe der beispielhaften Banner-Grafiken nicht den Originalgrafiken mit einer Höhe von 90 Pixeln entsprechen.
Navigations-Elemente
Für die Navigation benötigen Sie lediglich 3 kleine Grafiken. Dies sind zum einen die beiden Ecken mit ihren Rundungen und natürlich der Verlauf im Hintergrund. Zweiteres können Sie ganz einfach wie zuvor beim Hintergrund der Seite ausschneiden. Demnach benötigen Sie lediglich eine 1 Pixel breite Selektion. Die obere Linie über der Navigation würde ich persönlich mit in diese Grafik aufnehmen, die untere jedoch nicht, da diese sehr einfach mit CSS-Eigenschaften definierbar ist. Ihre Grafiken müssten den stark vergrößerten Slices in Abbildung 5 ähneln, die bei mir jeweils 30 Pixel hoch sind. Für jede Grafik verwenden Sie bitte eine separate Datei. Aus der Benamung sollte übrigens unbedingt hervorgehen, welche die linke und welche die rechte Rundung ist.
Sonstige grafische Elemente
Zu guter Letzt fehlen Ihnen lediglich die Rundungen am unteren Ende der Seite. Auch wenn diese nur minimal sichtbar sind, sollten Sie bei der Umsetzung nicht fehlen. Wenn Sie die Rundung entsprechend meinen Vorgaben 2 Pixel groß gemacht haben, reichen hier 2 Pixel breite und ebenso hohe Grafiken.Um sich dabei nochmals etwas Arbeit zu sparen empfehle ich Ihnen, lediglich eine Rundung in eine neue Datei zu kopieren, diese abzuspeichern und anschließend die Datei zu spiegeln. Dies können Sie über Bild => Bilddrehung => Arbeitsfläche horizontal spiegeln bewerkstelligen. Anschließend können Sie die gespiegelte Grafik erneut abspeichern. Diese Technik empfiehlt sich generell bei symmetrischen Grafiken, damit diese identisch aussehen.