![[TUTORIAL]Einfaches Metin2 Webdesign mit PS](https://www.elitepvpers.com/forum/iconimages/metin2-pserver-guides-strategies/tutorial-einfaches-metin2-webdesign-mit-ps_ltr.gif){kind=small}
[TUTORIAL]Einfaches Metin2 Webdesign mit PS
Ho Ho Ho, Nybu ist da
Guten Morgen Epvp, heute release ich Teil1 meines 4 Teiligen Tutorials, wie man ein einfaches
Metin2 Webdesign mit Photoshop erstellt. Teil2 wird am 2. Advent folgen.
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 öffnen wir ein neues Dokument mit strg+n oder über Datei -> Neu
und mit einer Breite von 1317px und einer Höhe von 1420px bei 700dpi.
Nun machen wir rechtsklick auf die Hintergrundebene -> ebene aus Hintergrund.
Nochmal rechtsklick auf die Ebene, Fülloptionen -> Farbüberlagerung und wählen
ein dunkles Grau aus. Ich habe mich für ein Grau mit dem Farbcode #0c0c0c
entschieden.
Als nächstes ziehen wir den Wallpaper, welches im Anhang beiliegt über
die Hintergrundebene. Jetzt rechtsklick auf die Wallpaper-Ebene -> Ebene rastern
anschließend Doppelklick auf die Ebene und umbenennen in "BG".
Nun wählen wir das Radiergummi-Werkzeug mit einer Härte von 0% und einer
Größe von 400px und radieren einmal rechts, unten und links um den Wallpaper.
Jetzt gehen wir unten rechts unter den Ebenen auf diesen zweifarbigen Kreis
und wählen "Farbton/Sättigung" aus.
Die Farbton/Sättigung Ebene sollte nun über der "BG" Ebene sein. Jetzt
rechtsklick auf die Farbton/Sättigung Ebene -> Schnittmaske erstellen.
Nun Doppelklick auf dieses graue Zeichen bei der Ebene und die Sättigung auf
-73 und die Helligkeit auf -36 stellen. Die BG Ebene nun auf 60% Transparenz stellen.
Nun erstellen wir ein abgerundetes Rechteck mit einem Radius von 6px wie
auf folgendem Bild:
Rechtsklick auf die Rechteck Ebene -> Ebene rastern, nochmal rechtsklick -> Fülloptionen ->
Verlaufsüberlagerung und wählen einen Farbverlauf von einem hellen Grau oben
zu einem dunklen Grau unten.
Nun erstellen wir eine neue Ebene und erstellen eine Auswahl von dem
abgerundeten Rechteck indem wir strg gedrückt halten und auf das kleine
Miniaturbild links neben der Ebene klicken. Auf der neuen leeren Ebene erstellen
wir nun mit dem Verlaufswerkzeug einen Farbverlauf von weiß zu transparent,
dabei halten wir shift gedruckt, damit der Verlauf vertikal wird.
Nun markieren wir knapp die Hälfte des neu erstellten Verlaufes und drücken
auf die entfernen "entf" Taste.
Danach noch Deckkraft etwas runter drehen (in meinem Fall 24%)
Nun kopieren wir die Abgerundetes Rechteck Ebene mit strg+j und wählen die obere
aus, rechtsklick -> Farbüberlagerung und wählen ein helles Grau.
Nun erstellen wir eine Auswahl, sodass nur ein paar Pixel der neu erstellten
Ebene behalten bleiben und drücken die entfernen Taste.
Nun kopieren wir die Erste Abgerundetes Rechteck Ebene, verschieben diese
ein paar Pixel nach unten (am besten mit den Pfeiltasten auf der Tastatur)
und machen rechtsklick auf die Ebene -> Fülloptionen -> Farbverlauf,
wie auf folgenden Bild:
Diese Ebene wieder kopieren, den Farbverlauf einen Ticken heller machen und
einen Pixel nach oben verschieben.
Nun kommen wir zu den Texturen.
Wir ziehen die Textur aus dem Anhang über die oberste Ebene, rechtsklick -> Ebene rastern
und erstellen eine Auswahl des ersten Abgerundeten Rechteckes (strg und auf Miniaturbild)
Diese Auswahl kehren wir nun um indem wir strg+shift+i drücken, wechseln auf
die Texturebene und drücken entfernen.
Jetzt setzten wir die Deckkraft der Textur auf 28%, drücken strg+u und stellen
die Sättigung ganz nach links.
Die Texturebene kopieren wir mit strg+j, drücken strg+t um sie zu transformieren,
dann rechtsklick auf die Textur (nicht auf die Ebene sondern links im Hauptfenster)
und wählen "horizontal spiegeln", die beiden texturebenen stellen wir nochmal auf
100% Deckkraft, den Übergang der beiden verfeinern wir etwas mit einem Radiergummi
mit 0% Härte, markieren beide Ebenen -> rechtsklick -> Auf eine Ebene reduzieren und
setzten die Deckkraft wieder runter (in meinem Fall auf 28%).
Nun kopieren wir die Texturebene nochmal und verschieben diese über die Orange Ebene
und verschieben sie ein Paar Pixel nach unten sodass sie direkt über der Orangen Ebene
Liegt.
Nun erstellen wir eine neue Ebene, über allen anderen und wählen das Pinselwerkzeug mit
einer Härte von 0% und einer Größe von 60px. Wir markieren die Erste graue Abgerundete Rechteck
Ebene indem wir strg gedrückt halten und auf die kleine Miniaturansicht neben der Ebene klicken.
Wir wechseln wieder auf die neue, leere Ebene und fahren mit dem Pinselwerkzeug und weißer Farbe
Ein bisschen über die Ecken und die obere Kante. Je nach Bedarf die Deckkraft noch etwas reduzieren.
Dasselbe machen wir dann noch mit der orangen Ebene aber stellen die Ebene dort auf "Ineinanderkopieren".
Das kann man links neben der Deckkraft wo "normal" steht einstellen.
Auf folgendem Bild kann man sehen, wie dann die Orange und die Graue Ebene an manchen Stellen
etwas heller ist.
Nun erstellen wir eine neue Gruppe indem wir unten rechts unter den Ebenen auf dieses kleine
Ordnersymbol klicken und benennen diese in "Navigation" um.
Dort hinein verschieben wir alle Ebenen die zur Navigation gehören. Jetzt Rechtklick
auf die Gruppe -> Gruppe duplizieren. Rechtsklick auf "Navigation Kopie" -> Gruppe zusammenfügen.
Die neu entstandene Ebene verschieben wir nun in die "Navigation" Gruppe als unterste Ebene,
rechtklick auf die Ebene -> Fülloptionen -> Schlagschatten und stellen ihn in etwa wie auf
dem folgenden Bild ein.
Nun erstellen wir ein Rechteck mit derselben Farbe wie der Hintergrund unter
der Navigation, bis zum unteren Ende des Dokumentes. Ebene umbenennen in "content_bg".
An dieser Stelle möchte ich mich dafür bedanken, dass du dir das Tutorial schon so weit
durchgelesen hast. ;D
Diese Ebene kopieren wir, erstellen die Auswahl des Rechteckes (klick auf Miniatur)
gehen oben in der Menüleiste auf "Auswahl" -> Auswahl verändern -> verkleinern -> 1px
Jetzt Auswahl umkehren (strg + shift + i) und auf die Entf. Taste drücken.
Der soeben um ein Pixel verkleinerte Ebene geben wir nun noch ein etwas helleres Grau
damit eine Art Rand entsteht.
Jetzt wählen wir das Linienzeicher-Werkzeug aus, welches sich hier versteckt:
Mit diesem Werkzeug ziehen wir nun eine vertikale weiße Linie über den grauen Teil
der Navi. Dabei halten wir shift gedrückt, damit der Strich grade nach unten geht.
Nun erstellen wir direkt daneben noch eine schwarze Linie, welche genau gleich groß ist.
Wir markieren beide Ebenen, rechtsklick auf eine von beiden -> Auf eine Ebene reduzieren.
Diese Ebene stellen wir auf "Ineinanderkopieren" und drehen die Deckkraft etwas runter,
in meinem Fall auf 25%. Jetzt noch in "Trennlinie" umbenennen.
So, jetzt füllen wir die Navigation mit Text.
Wir wählen das Textwerkzeug und eine gewünschte Schriftart, in meinem Fall ist das
"Trajan Pro", welche auch im Anhang dabei ist und geben ihr ein relativ dunkles Grau.
In meinem Fall ist das #2e2e2e.
Wir kopieren die Textebene, setzten die untere einen Pixel nach unten, dies macht ihr
am besten mit den Pfeiltasten auf eurer Tastatur, und gebt ihr ein relativ helles Grau.
In meinem Fall wäre das #a5a5a5
Das Selbe machen wir jetzt noch mit allen gewünschten Menüpunkten. In meinem Fall wäre
das: Home; News; Registrieren; Itemshop; Rangliste; Forum; Login; Vote
Hinter jeden Menüpunkt setzten wir noch eine Trennlinie.
Nun erstellen wir eine neue Gruppe mit dem Namen "Text", verschieben alle
Trennlinien und Textebenen dort hinein und verschieben die gruppe in "Navigation"
an oberste Stelle.
Tipp:
Wenn man mehrere Ebenen (z.B. alle Textebenen) markiert und dann strg+t drückt kann
man alle miteinander vergrößern/verkleinern.
Ach und nicht vergessen, beim Arbeiten immer zwischendurch mal abspeichern (als PSD)
So das war der Erste Teil meines Advent-Tutorials wie man ein einfaches Metin2
Webdesign mit Photoshop erstellt.
Ich freue mich über Feedback
Und allen noch einen schönen ersten Advent!
Special Thanks:
.JαyZoN - Der mich tatkräftig unterstützt hat.
Er hat mich dazu gezwungen das zu sagen O_o
Teil2:
Das Tutorial ist dir wirklich sehr gut gelungen, man sieht das du dir Mühe gegeben hast.
