Tutorial Stilerstellung - Teil 1: Erstellung des Designs

  • Vorwort


    In diesem Tutorial wird ein Stil für das WBB 3.1 mit einer fester Breite von 960 Pixeln erstellt.


    Wie immer, viele Wege führen nach Rom, das ist meine Vorgehensweise bei der Stilerstellung, das heisst natürlich nicht dass man es anders machen kann. Ich werde hier nur auf die Erstellung ausserhalb des Stileditors eingeben, die Optionen und Funktionen innerhalb des Stileditors müsst ihr euch schon selber aneignen. Alles was ich hier schreibe ist meine persönliche Meinung und natürlich kann man auch anderer Ansicht sein.


    Teil 1: Erstellung des Designs


    Zu einem vollständigen WBB3.1-Stil gehören meiner Meinung nach folgende Grafiken:


    • Header (960x284)
    • Logo
    • Mainhintergrund (960x20)
    • Footer (960x156)


    Damit hat man schonmal das Grundgerüst des Stiles und man kann sich den Hintergründen widmen:


    • Seitenhintergrund
    • Footerhintergrund


    Anschliessend kann man sich um das Kleinzeug kümmern:


    • Kategorien- und Editorhintergrund
    • Kleine Buttons (50x50)
    • Grosse Buttons (900x120)
    • Tabs (250x35)
    • Spaltenköpfe (160x24)
    • Forenhintergrund (900x100)


    Und für die Threadansicht werden noch benötigt:


    • Hintergrund Themenstarter (225x500)
    • Hintergrund normaler Poster (225x500)
    • Hintergrund Beiträge (400x500)


    Nun wo klar ist was alles an Grafiken benötig wird, kann man sich an die Designerstellung machen. Gewöhnlich packe ich alle Elemente bis auf die grossen Buttons und die Grafiken der Threadansicht in eine Datei, das kann dann zum Beispiel so aussehen:



    Und gesliced sieht das dann so aus:



    Um die bisherigen Zusammenhänge zu verstehen hier ein Überblick wo die Grafiken zum Einsatz kommen:



  • Hier kommen nun die grossen Buttons und die Threadansicht.


    Da es sich bei den grossen Buttons um ein sogenanntes CSS-Sprite handelt, weicht die Form hier von der bekannten Darstellung ab. bei CSS-Sprites wird die Position der Grafik über CSS gesteuert. Der Vorteil an der Sache ist, das nur eine Grafik geladen wird. Der grosse Button besteht also gleichzeitig aus:


    • Dem Normalzustand (oben)
    • Dem Hoverzustand (unten)
    • Dem Endstück (ganz Rechts)


    Am besten bleibt man bei dieser Vorlage, dann kann man den CSS-Code aus dem Sunrise-Stil übernehmen und braucht sich darum schon nicht mehr zu kümmern.


    Zur Threadansicht braucht man wohl nicht viel sagen, erklärt sich wohl von alleine.



    Und dann noch schnell das ganze eben slicen:



    Somit wären nun alle Grafiken fertig und wir können uns an die Umsetzung machen.

  • Vorher aber noch ein paar Anmerkungen zu den Grafiken:


    Formate


    Ich verwende gewöhnlich folgende Formate:


    PNG 24 - Bei Allen Elementen die keine Transparenz benötigen
    PNG 32 - Bei allen Elementen die Transparenz (Alphatransparenz) benötigen


    In Ausnahmefällen:


    JPEG: Wenn PNG einfach zu gross wird (mein Richtwert liegt bei ca. 150 Kb beim Header)
    GIF: Wenn 8 Bit und eine Indextransparenz ausreichen und der Stil dadurch vollständig IE6-kompatibel wird


    Der IE6 kann von Haus aus keine Alphatransparenzen anzeigen, stattdessen wird die transparente Fläche grau angezeigt.


    Slicen


    Ja man kann natürlich alle Flächen kleiner slicen, 1 Pixel Breite würde ja schon reichen da die Hintergründe alle gekachelt werden, ich mache das aber trotzdem nicht weil:


    1. Die Dateigrösse meist nicht sonderlich geringer wird.


    Beispiel der Posterhintergrund:


    In der Grösse 450x550 Pixel ist er als PNG 24 2,0 Kb gross. In der Breite 1 Pixel 0,3 Kb.


    2. Wenn ich in den Stilordner schaue, sehe ich meist anhand der Thumbnailvorschau auf den ersten Blick, ohne das ich die Dateinamen lesen brauche, was ich da vor der Nase habe.


    3. Ich kann mal so eben was Testen ohne jedes mal in den Quelldateien zu editieren. Hab ich den Hintergrund nur 1 Pixel breit geliced, muss ich ihn erst noch verbreiten usw. -> umständlich.


    Darum slice ich die Grafiken immer recht gross.

  • Zum Thema Slicen noch eine kleine Anmerkung meinerseits:


    Handelt es sich um eine (Halb-)transparente Hintergrundgrafik, ist man gezwungen, etwas größer zu slicen, da der IE (speziell der IE7 neigt dazu) sonst mit dem Laden nicht zusammenkommt. :S

  • Hallo,


    und wenn die ganzen png/jpg fertig sind, wie güfe ich die dann im 3.1. WBB Forum ein?
    Ich sehe immer .tar Archive, das ist ein Linux Format oder? Das ist mir zu mühsam, gibt es Möglichkeiten?


    Bitte um ausführliche Beschreibung, ansosnten finde ich dieses Tutorial top! :)


    Mfg,
    Dadi

  • This threads contains 21 more posts that have been hidden for guests, please register yourself or log-in to continue reading.