ONUR BOARD

WBB Style-Tutorial von Benedikt (www.benediktrb.de)

Der Anfang - Vorbereitung

Für dieses Tutorial setze ich voraus, dass du dich mit dem wBB schon ein wenig beschäftigt,

und auch in Photoshop Erfahrung gesammelt hast, da ich nicht jede einzelnen Schritte in

Photoshop und am wBB genau erklären kann. Doch bin ich bereit, Fragen und Probleme zu

beantworten und anschließend auch dieses Tutorial zu ergänzen.

Der Anfang – Gedanken

Zunächst einmal musst du dir Gedanken um das Grundlayout machen. Wo sollen die

Buttons hin? In einer Leiste oder als einzelne Buttons? Soll der Style über die ganze Seite

gehen oder nur die Hälfte? Was für Farben verwende ich? Welche Farben passen zu

meinem Thema?

Gedanken fertig – auf geht’s

Nun weißt du in etwa wie dein Style aussehen soll, und welche Farben er haben wird. Dann

kann man schon in Photoshop loslegen.

Ich habe mich jetzt dazu entschlossen einen Style zu machen, der in etwa dem Style des

Standart Styles gleichkommt. Nur finde ich die Farben Blau und Silber schön und eine

Buttonleiste anstatt Einzelner.

Photoshop – der Style wird designt

Zuerst wird eine Arbeitsfläche geöffnet. Diese würde ich, bei einer Auflösung von 1024*768,

auf 900*600 px beschränken, da man so alles gut im Blick hat und auch nicht scrollen muss.

Fangen wir an zu designen.

Immer daran Denken: Für jeden Schritt eine neue Ebene machen.

Erst einmal eine Hintergrundfarbe wählen, und auf einer neuen Ebene eine Fläche für den

Header machen. Darunter eine Top Leiste, für die Buttons und unten eine Leiste für den

Footer.

Weiter geht es mit Cell und Catpic. Diese beiden sollen am Besten schöne Verläufe sein,

welche sich in den Farben aber unterscheiden. In meinem Beispiel Style: ein blaues Cellpic

und ein silbernes Catpic.

So, nun haben wir schon mal die Grundgrafiken für unseren Style. Jetzt müssen noch

Headerpic und Schriften eingefügt werden. Am Besten kann man ein Bild, wenn man kein

Anderes hat, oder sich mit Cinema 4 D auskennt, ein Stockpic von zum Beispiel www.sxc.hu

nehmen. Da diese Bilder meist sehr groß sind muss man diese erst mal auf eine kleinere

Größe bringen. Hat man dies gemacht kann man das Bild ja einfach in die bestehende PSD

einfügen und über die Ebene des Headers schieben. STRG + G drücken, und schon ist es

angepasst. (bei manchen Bildern ist es Notwendig es Farblich anzupassen.)

Bei mir sieht es nun so aus:

So ich denke es geht jedem so, dass man sieht das es nicht wirklich gut aussieht. Also folgt

nun ein kleines Tutorial um einen Übergang zum Hintergrund zu schaffen. Falls du das

schon weißt, kannste es überspringen.

Tutorial für weiche Übergänge

Das Verlaufwerkzeug auswählen und einen simplen schwarz - weiß Verlauf einstellen. (ist

auch meist bei den Vorgaben) Dann auf die Ebene mit dem Bild gehen, also welches nun so

abgehackt aussieht. Und auf dieses Symbol klicken: (rötlich markiert) Dabei ist

es wichtig, dass ihr immer noch das Verlaufswerkzeug ausgewählt habt!

So nun kannst du einen Verlauf ziehen, dies machst du solange bei dem Bild, bis es gut

aussieht. Falls es mal schief gegangen ist kannst du mit Hilfe des Rechtsklicks auf die

Ebenenmaske, bei dem Bild, auf Ebenmaske verwerfen gehen und alles noch mal machen.

Nun sieht es so aus:

Wie du siehst habe ich auf der rechten Seite eine einheitliche Farbe. Dies ist später wichtig,

wenn der Style breiter werden soll als in Photoshop designt. Doch wenn er gleich breit

werden soll, braucht man diesen Aspekt nicht unbedingt beachten.

Dann geht es schon weiter mit Schriften.

In den Header einfach den Name des Boards schreiben. Dann auf die Top Leiste alle

Buttons, die du brauchst. Standart sind: Register User CP PM-Box Kalender Suche FAQ

Team Mitglieder ACP Mod CP Forum

Zwischen den einzelnen Buttons kann man entweder einfach ein paar Leerzeichen machen,

oder Trennlinien.

Ich habe mich mal für Trennlinien und entschieden und es sieht so aus:

Gut, das Layout ist fertig.

Slicen - schneiden ohne Ende

Das Layout muss nun gesclied werden. Dies kann auch in Photoshop geschehen. Beim

Sclicen muss darauf geachtet werden, dass man alle Buttons, Backgrounds und alle anderen

Pics sinnvoll ausschneidet. Dabei benutzt man diese Funktion: (rötlich unterlegt)

Du kannst dir ein Beispiel an meinem Bild nehmen:

Die kleinen Slices (neben dem Logo, Top Button (Forum), links neben Copyright und die

Beiden auf den Cell und Catpics sind immer die Backgrounds, welche beim coden wichtig

sind.

Dann für Web speichern:

Auf speichern drücken

Dateityp (nur Bilder (.gif))

In einen neuen Ordner Speichern

Fertig

Bilder umbenennen

Nun müssen alle Bilder in dem Ordner wo du die Bilder hingespeichert hast umbenannt

werden. Da du vielleicht nicht weißt, wie die ganzen Buttons im wBB heißen kannste dir das

mal bei mir abschauen.

Achtung: Ich habe hier das Bild top_bg.gif, also den Hintergrund der Top Buttons, vergessen.

Also müsstest du diesen auch noch benennen.

Und immer gut darauf achten, dass man auch alle BG’s hat. Falls du mal nicht weißt was

was ist, da auch noch andere Pics in dem Ordner sind kannste immer auf die Phtoshop Datei

gucken, dort steht eine Zahl jeweils an dem einzelnen Slice dran.

Im Ordner steht dann zum Beispiel Unbenannt_02.gif. In Photshop hast das Headerpic die

Slice Zahl 2. Also musst du Unbenannt_02.gif in header.gif umbenennen. Und das einfach

bei jedem Bild, welches wichtig ist, also was man später braucht.

Vorbereiten - ACP Arbeit

Hier brauchen wir erst mal einen neuen Style.

ACP >> Designpack bearbeiten

Standard >> kopieren

Designpackname: Blackmastah (halt der Name des Styles)

ACP >> Templatepack erstellen

Templatepackname: Blackmastah (halt der Name des Styles)

ACP >> Style erstellen

Stylename: Blackmastah (halt der Name des Styles)

Templatepackname: Blackmastah (so wie du es oben benannt hast)

Designpackname: Blackmastah (so wie du es oben benannt hast)

Style im UserCP auswählen.

So nun haben wir eine Arbeitsgrundlage.

Von nun an werde ich immer den Style als Blackmastah bezeichnen. Du musst anstatt

Blackmastah halt immer deinen Stylenamen hinschreiben.

ACP >> Designpack bearbeiten

Blackmastah >> bearbeiten

Bei den Angaben:

Tabellenkopf

Weitere Attribute (CSS Code):

background-image: url(images/cellpic.gif);

in

background-image: url(images/blackmastah/cellpic.gif);

Tabellenkategorienzeile

Weitere Attribute (CSS Code):

Hier musst du das hinschreiben:

background-image: url(images/blackmastah/catpic.gif);

Runterscrollen zu den Angaben:

Bilder

Hier folgendes eintragen:

Ordner für Bilder: images/blackmastah

URL zum Logo des Forums: images/blackmastah/header.gif

Hintergrundbild für Kopfbereich des Forums: images/blackmastah/header_bg.gif

Nun auf dem FTP:

Wbb2 >> images >> Neu >> Ordner >> blackmastah

In diesen Ordner musst du jetzt erst mal alle Standart Buttons aus dem wBB einfügen.

So, mit den letzten Schritten hast du:

- einen neuen Style angelegt

- im Designpack den Image Ordner angegben für den Style

- auf dem FTP einen neuen Ordner für den Style angelegt mit den Standart Buttons

Gut jetzt kannst du die Pics von deinem Style in den Ordner auf dem FTP laden. Dabei

überschreibst du ein paar, aber das ist ja egal.

Nun sieht der Style im wBB so aus:

Du siehst:

- Header

- Header_bg

- Top Buttons

- Cellpic

- Catpic

Es fehlt noch oder ist verkehrt:

- Top Leisten Background

- Footer Background

- Header muss links sein

- Top Buttons sollen links sein

Coden / Templates

Vorbereitung:

ACP >> Templates bearbeiten

Standardtemplates >> Header >> Template kopieren

Templatepack wählen:

Templatepack: Templatepack Blackmastah

Speichern

ACP >> Templates bearbeiten

Standardtemplates >> Footer >> Template kopieren

Templatepack wählen:

Templatepack: Templatepack Blackmastah

Speichern

ACP >> Templates bearbeiten >> Templatepack Blackmastah

Header >> editieren

Die einzelnen Codes kann man sich direkt bei wBB-Area.de anschauen.

Buttons erstellen

Erst einmal die Buttons, die unbedingt braucht.

Ich unterscheide immer zwischen 2 verschiedenen. Einmal Große Buttons, welche z.B. bei

Neues Thema, Neue PN etc. sind und kleine Buttons, welche z.B. zitieren, ändern etc sind.

Große Buttons:

Neues Thema (newthread.gif), Antwort (reply.gif), Geschlossen (closed.gif) Öffentlicher

Termin (publicevent.gif), Privater Termin (privateevent.gif), Neue PN (newpm.gif), Antwort

PN (replypm.gif), Weiterleiten (forwardpm.gif), Speichern (downloadpm.gif), Drucken

(printpm.gif), Löschen (deletepm.gif)

Kleine Buttons:

Antwort (replypost.gif), Zitieren (quote.gif), Ändern (editpost.gif), Melden (report.gif),

Benutzer Online (user_online.gif), Benutzer Offline (user_offline.gif), E-Mail (email.gif),

Homepage (www.gif), Suchen (search.gif), Freund (homie.gif), PN (pm.gif), AIM (aim.gif),

YIM (yim.gif), MSN (msn.gif)

Und noch weitere kleine Buttons:

Pfeil nach unten (asc.gif) (firstnew.gif), IP (ip.gif), Pfeil nach oben (goup.gif) (desc.gif), Los

(go.gif), Pfeil nach rechts (lastpost.gif)

Dann noch von der Index:

Neue Beiträge (on.gif), Keine neuen Beiträge (off.gif), Neue Beiträge, geschlossen

(onclosed.gif), Externer Link [nur bei wBB 2.3]

Das sind alle Buttons die man so braucht.

Die Frage also, wie macht man das?

Also, nehmen wir ein Beispiel:

Dazu öffnen wir eine neue Arbeitsoberfläche. Ich habe mal 75*20 px genommen.

Dann einen Verlauf ziehen, in den Farben, wie auch der Style ist.

Mit diesen Einstellungen sieht ein Verlauf immer gut aus

Dann eine neue Ebene erstellen und mit dem Bunstiftwerkzeug [Pinselgröße: 1px] einen

Rahmen in schwarzer Farbe ziehen, damit es abgeschlossen aussieht.

So, jetzt nur noch Schrift drauf und jeden Button, welche ich oben alle aufgeschrieben habe,

abspeichern.

Diese kannst du alle erst mal in einem Ordner speichern, und anschließend auf deinen FTP

in den ordner /images/blackmastah (anstatt blackmastah natürlich wieder deinen) laden.

So und dies machst du mit allen Großen Buttons.

Für die anderen Buttons nimmst du dementsprechend einen anderen Farbverlauf und eine

kleinere der Arbeitsfläche.

Das Endergebnis