Discussion on [TUTORIAL]Einfaches Metin2 Webdesign mit PS within the Metin2 PServer Guides & Strategies forum part of the Metin2 Private Server category.
View Poll Results: Wie gefällt euch das Tutorial?
Super! Ich freue mich schon auf Teil 3-4.
68
91.89%
Nicht sehr hilfreich. Teil 3-4 kannste dir sparen.
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".
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.
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 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:
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.
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.
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.
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
Als du mir davon erzählt hast war ich sehr begeistert aber wenn ich das ganze jetzt Lese bin ich EXTREM erstaunt es ist echt Perfekt geworden Frohes Fest dir auch und viele vielen Danke für das Tutorial
Lol mega ausführlich und gut geschrieben. Steckt bestimmt sehr viel Arbeit dahinter. Freue mich schon auf Teil 2. Wird einigen helfen. Dankeschön
***, war extrem viel Arbeit... aber wenn ich damit Leuten helfen
kann mach ich das doch gerne
Quote:
Originally Posted by 'Hooligan
Webdesign als PSD oder auch auf Script?
Im tutorial zeuge ich nur wie man die PSD erstellt.
Im Download ist weder die fertige psd noch ein script enthalten...
aber vll wird das Script i wann ja noch folgen :P
Einfaches Smudging Tutorial 11/26/2011 - Artist Tutorials - 24 Replies Ja hab mir gedacht das ich mal die Grundprinzipien des Smugdens zeige ;).
Also als erstes erstellen wir uns eine neue Ebene und ziehen dann den Render in die richtige Position, ich hab es so gemacht:
http://www.imgbox.de/users/public/images/hI8ltGop 4F.png
Als erstes duplizieren wir den Render ein paar mal und blenden diese dann bis auf die unterste aus.
Danach erstellen wir erst mal den Background, dazu öffnen wir den Wischfinger ...
[Tutorial Nr. 2] Webdesign mit DIV coden 03/03/2010 - Coding Tutorials - 3 Replies Bezüglich meines letzten Tutorials über DIV-Container und spezifisch darüber, wie man ein Webdesign (Vorlage psd) mit DIV-Containern anpasst.
1. Das Design
Hch habe mir ein ganz einfaches, schlichtes Design ausgesucht. Das Grundlegende habe ich ja schon in meinem vorigen Tutorial erklärt, da muss ich ja jetzt nicht mehr darauf eingehen.
http://i50.tinypic.com/1z721k1.jpg
WebDesign Tutorial - With Codes + Pictures 10/05/2009 - CO2 Private Server - 46 Replies *Note To Moderators, im not sure where this post should be placed, so im just posting here. Feel free to move to the correct forum at anytime!
Thanks*
Also Special thanks to W3Schools Online Web Tutorials!(google em for advanced help or leave an post!)
WebDesign Tutorial!
(This tutorial will teach you the basics of html & css and possibly some java and php scripts! Now you can make your own pserver websites instead of paying someone too or using a free template u may not even like!)
...
![[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
Das Tutorial ist dir wirklich sehr gut gelungen, man sieht das du dir Mühe gegeben hast.
