Buttons erstellen mit Photoshop

[Terror]

Hier mal ein kleines Tutorial wie man Standart-Buttons für das vB mit Photoshop CS3 selber erstellt. Dabei versuche ich alles so einfach und ausführlich wie möglich zu erklären, damit es auch Leute verstehen, die sich mit GFX nicht auskennen (PS-Experten also nicht rummeckern von wegen "is doch Grundwissen" usw). Dafür benötigt ihr folgendes:

- vBulletin 3 Graphics Development Kit
Bekommt ihr im Kundenbereich von vBulletin-Germany unter Ressourcen (erste Version mit grossen Grafiken)

http://www.arcade-syndicate.com/images/tutorials/buttons/Bild1.jpg

- Den Font tahoma-bold
Könnt ihr hier runterladen Free Fonts - 6500 Free TTF Fonts (T) (http://www.webpagepublicity.com/free-fonts-t.html)

- Adobe Photoshop CS3
Eine kostenlose Testversion bekommt ihr hier Adobe - Adobe Photoshop CS3 (http://www.adobe.com/de/products/photoshop/photoshop/)


Und los gehts. Als erstes startet ihr Photoshop und öffnet die Datei "QuickReply.psd" aus dem Ordner Buttons des Development Kit.

http://www.arcade-syndicate.com/images/tutorials/buttons/Bild2.jpg

Eine .psd-Datei besteht im Gegensatz zu einer .gif in der Regel aus mehreren Ebenen (auch Layer genannt), also aus mehreren einzelnen, übereinandergelegten Bildern. Die Anzahl und Reihenfolge der Ebenen seht ihr auf der rechten Hälfte des Bildes.

Aus diesem Image basteln wir uns jetzt einen Rohling für zukünftige Buttons. In dem Paket ist warum auch immer keiner mit bei und einen fertigen anhängen darf ich hier aus Lizenzgründen wahrscheinlich nicht. Aber egal, so lernt man wenigstens was :cheese

Dazu macht ihr einen Rechtsklick auf die Ebene "Quill" (auf dem Bild schon dunkel unterlegt) und entfernt sie mit "Ebene löschen". Das gleiche mit der Ebene "Paper", sie wird ebenfalls nicht mehr benötigt. Danach sollte der Button so aussehen.

http://www.arcade-syndicate.com/images/tutorials/buttons/Bild3.jpg

Als nächstes ändern wir die Grösse des Rohlings. Wie das geht seht ihr auf den folgenden zwei Screenshots. Die Pixelmaße einfach auf 70*22 und den Haken bei "Proportionen beibehalten" rausnehmen.

http://www.arcade-syndicate.com/images/tutorials/buttons/Bild4.jpg

http://www.arcade-syndicate.com/images/tutorials/buttons/Bild5.jpg

Jetzt sieht das ganze schon etwas mehr nach vB-Button aus http://www.arcade-syndicate.com/board/images/smilies/wink.gif

http://www.arcade-syndicate.com/images/tutorials/buttons/Bild6.jpg

Nun kommen wir zur Beschriftung des Buttons. Dafür legen wir eine neue Ebene an und nennen sie "Beschriftung".

http://www.arcade-syndicate.com/images/tutorials/buttons/Bild7.jpg

http://www.arcade-syndicate.com/images/tutorials/buttons/Bild8.jpg

Danach das Text-Werkzeug http://www.arcade-syndicate.com/images/tutorials/buttons/Bild9.jpg links am Rand auswählen und folgende Einstellungen vornehmen.

http://www.arcade-syndicate.com/images/tutorials/buttons/Bild10.jpg

Nun könnt ihr auf dem Bild euren Text eingeben und mit der Maus entsprechend platzieren.

http://www.arcade-syndicate.com/images/tutorials/buttons/Bild11.jpg

Damit das Ganze optisch besser rüberkommt, unterlegen wir die Schrift noch mit einem Schatteneffekt (dadurch sind u.a. die Konturen besser sichtbar). Dazu macht ihr zunächst einen Rechtsklick auf die Ebene und wählt im Kontextmenü "Fülloptionen..." aus. Die entsprechenden Einstellungen entnehmt ihr folgendem Screenie.

http://www.arcade-syndicate.com/images/tutorials/buttons/Bild12.jpg

http://www.arcade-syndicate.com/images/tutorials/buttons/Bild13.jpg

Zum Schluss noch ein Icon auf die linke Seite des Buttons, ich nehme mal einen Smilie.

http://www.arcade-syndicate.com/images/tutorials/buttons/Bild15.jpg

Den markiert ihr komplett mit dem "Auswahlrechteck-Werkzeug" http://www.arcade-syndicate.com/images/tutorials/buttons/Bild14.jpg und klickt oben in der Leiste auf "Bearbeiten" -> "Kopieren". Nun auf dem Button Rohling eine weitere Ebene "Icon" anlegen und den Bereich markieren wo die Grafik hin soll. Jetzt oben auf "Bearbeiten" -> "Einfügen" und der Smilie wird in dem markierten Bereich platziert. Diese Ebene unterlegt ihr genau wie die mit dem Text noch schnell mit dem Schlagschatten und der Button wäre fertig.

http://www.arcade-syndicate.com/images/tutorials/buttons/Bild16.jpg

Jetzt könnt ihr eure Arbeit über "Datei" -> "Speichern unter..." als .gif sichern und sie in eurem Board verwenden (vorgeschlagene Einstellungen verwenden). Bedenkt dabei aber, das als .gif alle Ebenen verloren gehen, also speichert den Button zusätzlich als .psd, wenn ihr ihn noch einmal bearbeiten wollt http://www.arcade-syndicate.com/board/images/smilies/wink.gif