Pinned Tutorial Stilerstellung - Teil 1: Erstellung des Designs

    This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

    • 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:


      TwitterFacebook

      Mein Blog: TwentyMag <- Lesen, Teilen, Liken, Kommentieren, Abonnieren. Ihr wisst bescheid, was labere ich hier groß rum
      :eyes:
    • 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.
      TwitterFacebook

      Mein Blog: TwentyMag <- Lesen, Teilen, Liken, Kommentieren, Abonnieren. Ihr wisst bescheid, was labere ich hier groß rum
      :eyes:
    • 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.
      TwitterFacebook

      Mein Blog: TwentyMag <- Lesen, Teilen, Liken, Kommentieren, Abonnieren. Ihr wisst bescheid, was labere ich hier groß rum
      :eyes:
    • 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
    • Hi,

      die Grafiken speicherst du im Stilordner (wcf/images/Stilordner) ab und wählst sie im ACP beim Stil aus bzw. lädst sie über CSS als Hintergrund des jeweiligen Elements rein.

      Das Tar-Archiv wird im WCF beim Stil exportieren selbständig erstellt. Dafür brauchst du noch keinen Tar-Packer. :)

    • 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:

      Habe dazu eine Frage, was meinst du mit "alles in eine Datei packen". Wie ist das zu verstehen?

      MfG
    • Darkboy250 wrote:

      Und meine Frage überhaupt, was ist die optimalste Größe um in Photoshop mit einem Design anzufangen?

      Ich nehme meistens 1100 x 800. Feste Breiten haben ja 960Px, so bekommt man noch einen Eindruck vom Hintergrund, bzw. hat man noch Platz dafür.

      M4ng0 wrote:

      Habe dazu eine Frage, was meinst du mit "alles in eine Datei packen". Wie ist das zu verstehen?

      Hmm, mach ich jetzt eigentlich nicht mehr so. Mittlerweile habe ich meistens 3 Dateien:

      Das Grunddesign
      Die Buttons (Small und Large)
      Threadhintergründe

      Ich mag diese Layerklickerei nicht.

      Hier gehts übrigens auch demnächst weiter, das Coding ist ja noch offen.
      TwitterFacebook

      Mein Blog: TwentyMag <- Lesen, Teilen, Liken, Kommentieren, Abonnieren. Ihr wisst bescheid, was labere ich hier groß rum
      :eyes:
    • Hi Tomsen,

      ich hoffe, dass mich Tom, Cr@@gle und Eragon nicht dafür queer durch das Forum jagen :D , aber vielleicht hilft dir die Erklärung, die ich einmal gefunden hatte. Vereinfacht in meinen Worten zusammengefasst:

      Grundsätzlich geht es beim "Slicen" ja darum, dass man mit einem Bildbearbeitungsprogramm eine Seite in ihre Bildsegmente aufzuteilen. Diese Segmente nimmt man dann, um sie auf der Seite wieder darzustellen. Durch die extrahierte Form sieht man dann deutlicher, welche Elemente z.B. im Design wo platziert sein sollen, wie groß sie sind usw.

      Wenn man das so macht, dürfte die Menge an Darstellungsfehlern eher gen Null tendieren, da das "Slicing" ja explizit die Segmente aufgeteilt darstellt. Arbeitet man an einem aufwendigen Design, dürfte das mit dieser Methode praktisch sein, weil man so nichts übersieht.

      Auf der anderen Seite gibt es ja CSS 3 und wenn man sich diese Designs ansieht, kommt man auch ohne das "Slicen" aus. Wenn ich es jetzt nicht verwechsle, ist CSS 3 besonders bei flexiblen Templates hilfreicher als wenn man es "slicen" würde bzw. das ginge dann ja gar nicht.


      In der Regel führen Entwickler bei Fachdebatten auch gerne die Performance und/oder den Traffic an, aber dazu kann ich leider nichts sagen. Da müsste doch einmal einer der Designer reinsehen und vielleicht einen 1:1-Vergleich notieren, um so festzuhalten, ob es signifikante Unterschiede und somit ein klares Pro/Kontra gäbe.





      Damit belasse ich es dann einmal, sonst rede ich mich noch um Kopf und Kragen und muss zur Strafe bei den cls-Designern nachsitzen. :D



      Es grüßt freundlich
      Gabbid :coffee:






      P.S. Cr@@gle war schneller, war ja klar. :D Cr@@gle, korrigiere mich sofort, wenn ich etwas falsch beschrieben habe, ja? Dann lerne ich gleich auch noch mit. :)
    • Soweit in Ordnung - bis zu dem Zeitpunkt, wo du in die CSS3-Thematik geschwankt bist. :D

      CSS3 bietet einige interessante Funktionen zur Darstellung, die den Einsatz von Grafiken vermindern/ablösen sollten (zum Beispiel zur Darstellung von Verläufen, Schattierungen usw. wo ich früher noch Grafiken benötigt hätte). :thumbup:
    • Also wenn ich das richtig verstehe:

      Ich mache das Design beispielsweiße mit Photoshop (fast) so wie es später aussehen soll, von Texturen bzw. Backgroundgrafiken her, alles wie es oben steht. Dann schneide ich alle Teile die ich brauch aus um sie dann mit CSS wieder so zusammenzufügen nur das es alles einzelne Elemente sind und nicht eine komplette Textur?

      Gut das klingt schonmal logisch und macht mir einiges klarer. Aber wenn ich zB.: bei einem Header die Eigenschaft "Nach außen Strahlen/Leuchten" an habe und es dann so aussieht Klick wie soll ich das dann rausschneiden, geht ja schlecht da das ja so halbtransparent ist.. :S

      - Tomsen