Beiträge von Tom

  • Creative-Walkers | V2 Design

    Ich finde der Header, genauer gesagt der Titel "Creative-Walkers" könnte mehr Power vertragen. Der geht im Gegensatz zum Menü unter. Und im Vergleich zum Footer sowieso. Ich denke das würde reichen, starker Header und starker Footer könnte die Sache abrunden.


    Muss man aber wie immer ausprobieren und gesehen haben ;)


    Ansonsten gutes Design :thumbsup:


    Wobei ich jetzt doch noch kleinlich werden muss, entweder alles linksbündig, oder alles zentriert. Menü und Header kann man lassen, aber das Willkommen muss linksbündig ausgerichtet werden.

  • Tutorial Stilerstellung - Teil 1: Erstellung des Designs

    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.

  • Tutorial Stilerstellung - Teil 1: Erstellung des Designs

    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.

  • Wie geht das Menüeinträge Expodieren oder Hinzufügen.

    Ich weiss nicht was du hast? Ich habe dich nur darauf hingewiesen dass:


    1. Das hier der Supportbereich für unsere Plugins ist


    Für Themen rund um das WBB3 haben wir einen extra Bereich:


    http://www.cls-design.com/foru…php?page=Board&boardID=36


    Ebenso wie für Probleme die mit dem WBB3 zusammenhängen:


    http://www.cls-design.com/foru…php?page=Board&boardID=37


    2. Dass das Plugin ein eigenes Supportforum hat (was nicht jedes Plugin hat, eigentlich sonst kein anderes).


    Also kein Grund sich gleich auf den Schlips getreten zu fühlen.

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



  • *aufstöhn* was für ne Hitze

    Ne ich steh total auf Sonne aber nicht auf im Haus schwitzen ^^


    Ein Eis und eine Rundfahrt später, hab euch mal ein paar Bilder gemacht, da könnt ihr bischen mit der Google-Map Rumspielen:


    Rundfahrt


    Das Eis hab ich mal weggelassen :P

  • 3D Box [Toni-Designs]

    Na du markierst alle Objekte die die verzerren willst gleichzeitig und verzerrst sie dann. Dann bleiben die Verhältnisse und die Perspektive erhalten. Oder du reduzierst alles auf eine Ebene wenn du mit der Gestaltung fertig bist, oder, oder, oder... Es führen so viele Wege nach Rom ;)