[TUTORIAL]Einfaches Metin2 Webdesign mit PS Teil2/4
Discussion on [TUTORIAL]Einfaches Metin2 Webdesign mit PS Teil2/4 within the Metin2 PServer Guides & Strategies forum part of the Metin2 Private Server category.
[TUTORIAL]Einfaches Metin2 Webdesign mit PS Teil2/4
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:
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 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:
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.
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!
[TUTORIAL]Einfaches Metin2 Webdesign mit PS 01/24/2013 - Metin2 PServer Guides & Strategies - 44 Replies http://simply-unbelievable.de/advent_tutorial/gedi cht1.png
http://simply-unbelievable.de/advent_tutorial/gir lande.png
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.
SonyVegas Pro9-Intro-Tutorial-Teil1 +Teil2 08/14/2010 - Video Art - 8 Replies Hey Com,
Ich sah zwar das XxCrankxX ein gemacht hat indem es so ziemlich ums gleiche geht, jedoch habe ich ein Video-Tutorial gemacht...und möchte euch das nun zeigen=)
Teil-1 meines Tutorials:
SonyVegas Pro9-Intro-Tutorial-Teil1
YouTube - SonyVegas Pro9-Intro-Tutorial-Teil1
![[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}
