![[TUTORIAL]Einfaches Metin2 Webdesign mit PS Teil2/4](https://www.elitepvpers.com/forum/iconimages/metin2-pserver-guides-strategies/tutorial-einfaches-metin2-webdesign-mit-ps-teil2-4-a_ltr.gif){kind=small}
Ho Ho Ho, Nybu ist da
Guten Morgen Epvp, heute release ich Teil2 meines 4 Teiligen Tutorials, wie man ein einfaches
Metin2 Webdesign mit Photoshop erstellt. Teil3 wird am 3. Advent folgen.
In diesem Teil werde ich euch zeigen, wie ihr den Slider und die Textboxen anfertigt.
Teil1 findet ihr hier:
Vorwort:
Um dem Tutorial folgen zu können sollte man über Basiswissen, was
Photoshop angeht verfügen, falls dies nicht der Fall ist rate ich mal
vorbei zu schauen.
Eine 30 Tage Testversion von Photoshop könnt ihr euch
herunterladen.Wenn alles fertig ist wird das Design in etwa so aussehen:
Ja ich weiß, es ist nicht wirklich etwas Besonderes aber es zeigt die Grundlagen
die benötigt werden um Metin2 bzw. MMORPG Webdesigs zu erstellen.
Bevor es losgeht, ladet euch bitte die Rar Datei im Anhang herunter.
Dort sind alle benötigten Grafiken/Fonts etc. enthalten.
So los geht’s!
Zuerst erstellen wir direkt unter der Navi eine Box, mit einem Farbverlauf von
einem hellen zu einem dunkleren grau.
Darüber erstellen wir eine neue Box, die etwas kleiner als die darunterliegende
ist.
Nun wählen wir ein beliebiges Bild, welches wir später im Slider haben wollen.
Ich nehme wieder das Metin2 Wallpaper welches ich auch schon im Hintergrund
benutzt habe. Dieses ziehen wir auf die richtige Größe über die neu erstellte Box
Dann rechtsklick -> Schnittmaske erstellen. Dabei ist darauf zu achten,
das direkt unter der Bildebene die Ebene mit der weißen box liegt.
Anschließend sollte das Bild gleichgroß wie die weiße Box darunter sein.
Nun rechtsklick auf die Ebene mit der weißen box, Fülloptionen -> Kontur,
diese ungefähr wie auf folgendem Bild einstellen:
Nun nochmal rechtsklick auf die Ebene und Schlagschatten wie in folgendem
Bild einstellen:
Danach sollte der Slider in etwa so aussehen:
Nun erstellen wir mit dem Elypse-Werzeug einen kleinen Kreis unter dem
Bild. Während wir den Kreis ziehen halten wir Shift gedrückt, damit dieser auch
schön rund wird
Den Kreis duplizieren wir dann mit strg+j und verschieben ihn ein paar Pixel nach
links. Das machen wir 3 mal (damit wir 3 gleichgroße Kreise haben.)
Nun geben wir einem der Kreise noch einen Farbverlauf von einem dunklen zu
einem hellen Grau. Anschließend rechtsklick auf die Ebene -> ebenstiel kopieren,
dann bei den 3 anderen Kreisen rechtsklick -> Ebenenstiel einfügen
Den 3. Kreis machen wir nun etwas größer indem wir strg+t drücken und ihn dann
mit gedrückter Shift taste an einem Eck größer ziehen.
Anschließend kopieren wir diesen größeren Kreis, erstellen seine Auswahl, indem
wir strg gedrückt halten und dann auf das kleine Miniaturbild neben der Ebene klicken.
Nun Gehen wir oben in der Menüleiste auf "Auswahl" -> Auswahl verändern -> verkleinern
und geben 2 Pixel ein. Nun kehren wir die Auswahl mit strg+shift+i um und drücken entf.
Bei dem nun kleineren Kreis machen wir einen Rechtsklick auf die Ebene -> Fülloptionen ->
Farbüberlagerung -> Orange, dann noch ein Häkchen bei "Schein nach innen" setzten und
diesen wir auf folgendem Bild einstellen:
Direkt unter dem Slider erstellen wir nun ein neues Rechteck, welches etwas dunkler
als der BG ist.
Darauf erstellen wir 4 gleichgroße weiße Rechtecke wie auf
folgendem Bild:
Wir markieren alle 4 Rechtecke -> rechtsklick auf eine -> ebenen auf
eine reduzieren und Legen wieder das Wallpaper darüber. Rechtsklick auf das
Wallpaper -> Schnittmaske erstellen.
Auf das erste Bild machen wir dann noch ein "+" mit dem Textwerkzeug und
der Schriftart Arial, Schriftfarbe: #cdcdcd und 30% Transparenz.
Jetzt erstellen wir eine neue Gruppe mit dem Namen "Slider" und packen
dort alle Ebenen die zum Slider gehören rein.
Kommen wir nun zum Mainbereich. Den eigentlichen Textboxen.
Wir erstellen unter dem Slider ein abgerundetes Rechteck, dass etwas
dunkler als der Hintergrund ist.
Darüber erstellen wir dann ein Rechteck, welches ein Ticken heller als die
darunterliegende Ebene ist, wie auf folgendem Bild:
In diesen etwas helleren Bereich tippen wir nun einen Beispieltext ein.
Hierzu nutze ich immer
mit der Schriftart Trajan Pro, der Schriftfarbe: #4b4b4b und einer Größe von 0,8pt.
In den dunkleren Bereich darüber kommt der Titel der Textbox, in meinem Fall "Home"
diesem geben wir dasselbe gelb wie es auch schon in der Navi zu finden ist und
eine Schriftgröße von 0,9pt. Nun erstellt ihr noch eine neue Gruppe mit dem Namen
"main" und schiebt alle Ebenen der gerade eben erstellten Textbox dort hinein.
Je nach Bedarf kann man diese Gruppe nun einfach mit einem Rechtklick kopieren,
den Text und die Größe anpassen und darunter einfügen.
Ich habe mal noch eine etwas größere Textbox mit dem Namen "Serverinformationen"
eingefügt und die Gruppe in Main#2 umbenannt.
Tipp:
Falls du Probleme mit den Größen und Farben der einzelnen Boxen hast nimm doch einfach
mal das fertige Musterdesign und verschieb es in dein eigenes Dokument, mit dem
Pipetten-Werkzeug kannst du dann genau die gleichen Farben wählen wie die, die ich
habe
So das war der zweite Teil meines Advent-Tutorials wie man ein einfaches Metin2
Webdesign mit Photoshop erstellt. Beim nächsten Mal werden wir mit dem Download
Button, den Sideboxen und dem Footer weiter machen.
Ich freue mich über Feedback
Und allen noch einen schönen zweiten Advent!
