Development Center
Development Center » Anleitung - Erstellung eines wBB-Style

Anleitung - Erstellung eines wBB-Style

Voraussetzungen:

Bevor du mit dieser Anleitung beginnst, solltest du sicherstellen, dass du die benötigte Soft- und Hardware besitzt und installiert hast. Du benötigst ein Grafik-Programm, einen Hex-Editor und eine Woltlab Burning Board Forensoftware. Du solltest gewisse Erfahrungen im Umgang mit Grafik-Programmen mitbringen, denn alles kann und möchte ich euch nicht erläutern. Bei Fragen aller Art stehe ich euch natürlich selbstverständlich IM FORUM mit Rat und Tat zur Verfügung.



Schritt 1: Vorlage

Ich fange an, indem ich mir eine passende Vorlage suche. Dies kann ein beliebiger Forumsstyle sein, z.B. der Standard-Style von Woltlab.de. Per Druck-Knopf und Tastenbefehl "einfügen" (STRG + V) füge ich das soeben geschossene Bild in Paint ein und speichere es auf meinem Datenträger. Anschließend öffne ich Photoshop oder ein anderes, gleichwertiges Grafik-Programm, je nachdem was ihr besitzt. Ulead PhotoImpact und Fireworks eignen sich ebenfalls zum Erstellen von Grafiken. In diesem Beispiel arbeite ich mit Photoshop, in der Version 7.0. Nachdem das Grafik-Programm geladen hat, öffne ich das Bild bzw. die Vorlage.

>Klick<




Schritt 2: Header (Banner & Menü)

In dieser Lektion nehme ich Veränderungen am Banner und an der Forennavigation vor. Ich beginne damit, einen Auswahlbereich um das Banner festzulegen. Ich erstelle eine neue Ebene und fülle den zuvor festgelegten Auswahlbereich mit der Farbe #575C67. Anschließend benenne ich die Ebene in "Banner" um.

>klick<

Wende ich mich nun der Navigation zu. Ich setze einen neuen Auswahlbereich fest, der sich über die gesamte Breite und Länge der Navigation in der Vorlage erstreckt. Ich erstelle eine neue Ebene und fülle den Auswahlbereich mit der Farbe #AEAEAE. Anschließend gebe ich der Ebene den Titel "Navigation".

>klick<

Meine nächste Aufgabe wird sein, einen progressiven Beginn für die Navigation zu gestalten. Dazu lege ich einen neuen Auswahlbereich, der sich ebenfalls über die gesamte Länge der Navigation erstreckt und 1px Breit ist und erstelle danach eine neue Ebene. Für die neue Auswahl suche ich mir eine helle Farbe, z.B. #FFFFFF.

Nun sollte man sich Gedanken um die Wahl der Schriftart- und farbe machen. Ich wähle die Schriftart "mints-mild" in der Farbe #FFFFFF , Kanten-Glättung habe ich ausgestellt. Ich klicke auf die Bildfläche und schreibe, in ausreichenden Abständen die Linkbeschriftungen auf, z.B. "Forum" "Profil" "Suche" "Kalender" etc.

>klick<




Schritt 3: Hintergrundfarbe & Kategorien

Nachdem ich den Header in groben Zügen verändert habe, ist es an der Zeit, sich um das Aussehen der Kategorien und der Wahl der Hintergrundfarbe zu kümmern. Beginnen möchte ich mit den bzw. der Kategorie. Mein erster Auswahlbereich umfasst die Kopfzeile.

>klick<

In der Optionsleiste wähle ich "Auswahl", "Auswahl speichern". Im darauffolgenden Fenster gebe ich bei "Name" den Namen "Kopfzeile" ein, anonsten nehme ich keine Einstellungen vor und klicke auf OK. Die Auswahl ist nun in einem neu angelgten Kanal gespeichert und kann in der Kanal-Palette oder über die Optionsleiste angewählt werden. Die selbe Prozedur nehme ich bei der Spalte direkt darunter vor. Bei "Name" gebe ich "Halszeile" an. Nun folgt der Rest der Kategorie, der "Körper". Diese Auswahl speichere ich ebenfalls ab.

Um die Auswahlen anzuwählen, wechsel ich in die Palette "Kanäle". (Zur Info: In Kanälen sind und werden die Eigenschaftswerte von Bilder gespeichert). Dort finde ich unter den Kanälen "RGB", "Rot", "Grün", "Blau", meine Kanäle mit den Namen "Kopfzeile", "Halszeile" und "Körper". Damit ich meine Auswahl anwählen kann, muss ich meinen Mauszeiger auf den gewünschten Kanal setzen (Setzen, nicht klicken), und dann STRG und linke Maustaste drücken. Mit diesem Befehl wähle ich nun den Kanal "Kopfzeile" aus.
Die Auswahl ist geladen. Jetzt wechsel ich in die Ebenen-Palette, um eine neue Ebene zu erstellen. Dies lässt sich auch über die Optionsleiste abfertigen ("Ebene", "Neu", "Ebene") Die soeben gewählte Auswahl, bei mir die "Kopfzeile", fülle ich nun mit einem Verlauf, #848B97 und #545964. Das selbe mache ich jetzt mit dem Kanal "Halszeile": Ich lade die Auswahl, erstelle eine neue Ebene und fülle diese mit der Farbe #AEAEAE. Diesen Vorgang Wiederhole ich noch einmal mit dem Kanal "Körper", Farbe #DADADA.

>klick<

Abschließend ist der Hintergrund dran. Diesen möchte ich mit der Farbe #E3E3E3 versehen. Um den Hintergrund mit Farbe füllen zu können, muss ich auch hier wieder einen Auswahlbereich ziehen. Wie das funktioniert dürfte bekannt sein.


>klick<




Schritt 4: Buttons & sonstige Grafiken (Eigenständiges arbeiten erforderlich!!!)

Jetzt erweitere ich die Startseite um verschiedene Grafiken. Wie bereits darauf hingewiesen, ist in dieser Lektion eigenständiges arbeiten und denken erforderlich. Es würde schlichtweg den Rahmen sprengen, würde ich euch die Erstellung von z.B. den on, off und offlosed-Grafiken näher bringen. Nichtsdestotrotz gebe ich euch ein paar Tipps & Tricks und Bezugsquellen von Grafiken und der Erstellung dieser. Photoshop zum Beispiel bietet eine Vielzahl von vorgefertigten Mustern & Formen. Mit Hilfe dieser lassen sich wunderschöne Grafiken zaubern, ideal für die on, off und offlosed-Grafiken. Auf Everaldo.com und ähnlichen Seiten findet man Desktop-Icons, die sich für die verschiedensten wBB-Grafiken eignen, z.B. als Profil-Icons. Bei der Verwendung von fremden Eigentum sollte man aber der höflichkeitshalber ein Copyright-Vermerk o.ä. in den Footer setzen.

Tutorials zur Erstellung von Buttons, Smileys und sonstigen Grafiken gibt es im Internet viele. Im Folgenden habe ich euch die -meiner Ansicht nach- nützlichsten Tutorials zusammengestellt:


Buttons:
http://www.photoshoptutorials.de/tut_button_index.php
http://www.photoshop4all.de/frameset.html
http://pstutor.esmartdesign.com/PS/on/misc.htm
http://www.psd-tutorials.de/tutorialansicht.php?tutorialnr=26

Mein Style sieht mittlerweile so aus.

>klick<

Ich habe Veränderungen am Header, der Menüleiste und der Kategorie vorgenommen. Außerdem habe ich einen Schriftzug im Banner platziert und die kompletten Profil-Icons, 18 an der Zahl, erstellt. Was nun folgt, ist etwas lästiger und zeitintensiv. Es gilt die Grafiken zurechtzuschneiden und zu speichern.




Schritt 5: Der Einbau ins wBB


5.1: Die Templates
Nun sollte alles soweit sein, dass der Style ins wBBoard eingebaut werden kann.
Die Images sollten sich am besten schon im ordner images/stylename befinden.

Als erstes geht es darum, die Templates zu erstellen, falls der Style anders aufgebaut ist als die bisherigen Installierten Styles. Das heisst, ihr habt Images an anderen Stellen oder bei den Kategorien etwas verändert,...
Ich gehe dazu im ACP (Admin Control Panel) auf "Templatepack erstellen", gebe die Sachen ein und danach gehe ich auf "Template erstellen".
Dort wähle ich das Templatepack logischerweise unter "Templatepack wählen" und gebe den Namen des Templates ein.
Wichtig: Der Name des Templates sollte genau gleich heissen wie in anderen Templatepacketen. header heisst header, footer heisst footer u.s.w.

>Klick<

Um den Inhalt des Templates zu machen, geht es einfacher, wenn man erst den Inhalt aus einem anderen Templatepack kopiert und diesen dann so ändert, wie er sein soll. Voraussetzung bei diesem Schritt ist Wissen über HTML oder XHTML.
Dies wiederhole ich nun so oft, wie ein Template geändert werden muss. Wenn ein Template gleich ist wie beim Original, so muss man kein neues erstellen.


5.2: Farben & CSS
Jetzt geht es darum, die Farben und den CSS-Code für den Style zu erstellen.
Dazu gehe ich im ACP auf "Designpack bearbeiten" und Kopiere am besten einfach mal das Designpack "Standart"
So können nun alle Farben angepasst werden, so wie es auf der Vorlage ist. Dazu muss man natürlich die richtigen Hex-Codes kennen.
Wenn ihr Probleme mit dem CSS habt oder ihr bestimmte Codes sucht, so könnt ihr bei SELFHTML nachschauen oder bei uns im Forum nachfragen, wir geben euch gerne Auskunft.
Sind alle Farben eingegeben und sollte alles Stimmen, ist es schon so gut wie fertig.

>Klick<


5.3: Der Einbau
Templates sind fertig, Images sind auf dem FTP, Designpack ist erstellt.
Jetzt sollte alles zusammen noch zu einem Style gemacht werden.
Um das zu machen, gehe ich auf "Style erstellen" und wähle dort den Namen meines Styles, das Template-, sowie das Designpack.
Dann kann ich den Style nun im Forum anschauen.


5.4: Fehler
Wenn es nun noch Fehler mit Farben oder Templates gibt, kann dies noch nachträglich bearbeitet werden.
Templates: Im ACP auf "Templates bearbeiten", das Templatepack wählen, dann das Template markieren und "Template editieren" anklicken.
Farben: Im ACP auf "Designpack bearbeiten" und beim Designpack auf "bearbeiten".
Images a: Fehlen alle Images, so kann es sein, dass der Ordner nicht korrekt angegeben wurde. Dies ist ca. in der Mitte vom Designpack einzustellen.
Images b: Fehlen einzelne Images, so kann es sein, dass sie Im Ordner fehlen oder ihre Namen nicht stimmen.




Abschlusswort:

Diese Anleitung soll keinesfalls als Musterlösung für die Erstellung eines wBB-Styles dienen. Vielmehr soll sie dazu anregen, eigene Techniken & Arbeitschritte zu entwickeln und sich auch Gedanken darüber zu machen, was es überhaupt bedeutet einen kompletten Style zu entwickeln.


Auf der Datei:

Sind Photoshopdateien von mir, die das Designen erleichtern. In der Datei "vorlage.psd" sind vorgefertige Auswahlbereiche und Ebenen enthalten. Die Datei "rohling_icons.psd" enthält, wie schon der Name sagt, eine Rohling einer Icon-Grafik mit frei wählbaren Symbolen.

>klick<

© 2004/2005 by Development Center
Diese Anleitung darf nicht ohne ausdrückliche Genehmigung des Autoren (_dns / Development Center) weitergegeben und/oder kopiert werden. Das Verlinken auf diese Seite ist gestattet.
nach oben

© 2002-2010 Development Center | Impressum