[Tutorial] Flyff Design von A-Z

[xsrf]

Herzlich Willkommen epvp,

zu meinem ersten Tutorial in Sachen Flyff-Design.


Ich möchte euch Anhand folgender Grafiken & Erklärungen beibringen
wie ihr Ingame CS/Waffen/Rüstung/Homepage und Interface umdesignt.

Fangen wir mit dem WebDesign an.

Was wir dazu brauchen sind folgende Sachen.

- Adobe Photoshop (Trial Version hier:

Dann überlegen wir ob wir die Homepage im Querformat oder Hochformat erstellen wollen.

Ich mache das ganze jetzt im Hochformat.

WICHTIG: EINE HOMEPAGE (DER CONTENT) DARF NICHT GRÖßER ALS 1000px SEIN,
DA ES SONST VIEL ZU GROß WIRD. DAS HINTERGRUNDBILD MUSS FALLS ES GANZ VERWENDET WIRD 1980px BREIT
UND 1080px HOCH SEIN. IHR KÖNNT EIN BILD ABER AUCH ZURECHT SCHNEIDEN.


Fangen wir an die Homepae zu erstellen und unsere Vorlage anzufertigen.

Wir erstellen eine Homepage mit den Maßen (1342x994) und färben den den Hintergrund.

Bei der Farbcode: 191919.

Nun gehen wir auf unser Abegrundetes Rechteck Werkzeug, stellen den Winkel für uns persönlich ein und
fügen den Farbcode '232323' hinzu, der etwas heller als der Hintergrund ist.

Suchen wir uns ein Bild raus, das wir als "Header" verwenden wollen.

Ich benutze das Bild von Flaris.

Dann wählen wir unser Radiergummi aus.

Vergrößern die Fläche, stellen Härte auf 0 , Deckkraft auf 100% und Fluss auf 25%.

Nun radieren wir solange über das Bild bis es einen schönen Übergang zum Hintergrund aufweißt.

So sollte es dann bei euch in etwas aussehen.

 Spoiler

Haben wir das, folgt nun der "Ebenestil vom Content.

Dazu gehen wir auf Fülloption und stellen folgendes ein.

Schlagschatten:

Fülloption: Normal
Deckkraft: 13%
Winkel: relativ
Abstand: 0
Überfüllen: 0
Größe: 5

Kontur:

Größe: 1
Position: Innen
Fülloption: Normal
Deckkraft: 100%
Farbe: 2d2d2d

Nun erstellen wir den "Bottom-Part", das ist der unterste Rand des Layouts.

Dazu ziehen wir eine Linie, und fügen bei den Fülloption folgendes ein.

Fläche 0%

Farbüberlagerung:

SCHWARZ
Deckkraft 58%

Schlagschatten:

Deckkraft: 4%
Farbe: Weiß
Winkel: 90°
Abstand:1

Dann erstellen wir ein Rechteck das die gleiche Farbe wir der Hintergrund hat und ziehen es unter die Linie.
Dann fügen wir folgendes als Fülloption ein.

Schatten nach Innen:

Füllmethode: Multiplizieren
Deckkraft: 22%
Winkel: 90°
Abstand:5
Größe:5

Musterüberlagerung:

Füllmethode: Ineinanderkopieren
Deckkraft: 23%
Muster: Beliebig

Hab ihr alles richtig gemacht, sieht das jetzt so aus.

 Spoiler

Nun zu euren Logo.

Überlegt euch was zu eurem Namen passt, und versucht es so anzupassen.

Hier die PSD von meinem Logo, da ich nicht wirklich weiß wie ich das erklären soll.



Hier der Download-Link:

Nun überlegen wir, wie wir die Navigation gestalten.

Damit nicht alles auf ein und dem selben Stil beruht, benutzen wir diesmal nicht nur eine Leiste als Navigation sondern Buttons.

Fangen wir einmal an, den Download & Register Button fertigzustellen.

Ich benutze eine Form die eine Wolke darstellen soll.

Diese platziere ich neben das Logo und gestalte sie ein wenig.


Dieses mal benutze ich folgende Optionen.

Fläche: 0%

Kontur:

Größe: 5
Position: Außen
Füllmethode: Normal
Deckkraft: 100%
Farbe: 205079

Schatten nach Innen:

Füllmethode: Farbig abwedeln
Winkel: relativ
Größe: 5
Deckkraft: 35%

Diese kopieren wir dann mit STRG+J.

Danach drücke wir STRG+T zum transformieren machen einmal Rechtsklick und klicken auf "Horizontal Spiegeln".

Wir gehen in die Fülloption der kopierten Eben und ändern die Farbe auf ein schönes Organe.

Haben wir das alles so gemacht, sollte das ganze nun wie folgt aussehen.

 Spoiler

Dort können wir jetzt beliebig drauf schreiben was wir an Buttons haben wollen.

Begeben wir uns jetzt zum Content, so sieht es sehr kahl aus.

Das ändern wir schnell, in den wir uns eine Boxen Struktur überlegen.

Ich benutze jetzt in diesem Tutorial die Struktur von Stefan Pfeifer,
da die meisten Leute sich denke ich auf das CMS etwas aufbauen wollen.

Übernehmt also die Boxen Struktur von Stefan Pfeifer und bestimmt dann die Stile.

Ich erstelle jetzt einmal eine Login Box.

Dazu ziehen wir uns ein Rechteckt als Box.

Haben wir das unterteile wir diese noch in die MainBox für den Inhalt, und den Headpart der Box.

Schauen wir uns nun den Mittlerenteil etwas genauer an.

Wir benutzen wieder die Fülloptionen, wobei das dieses mal etwas kniffliger wird.

Wir benutzen einen weichen Pinxel, den wir zu einer Elipse gestalten.

Diesen passen wir dann ca. auf die größe der Box an und verschieben links und rechts die ebene hinter die Box.

Dann gehen wir auf unsere Box und bearbeiten die Fülloptionen.

Kontur:

Größe: 1
Position: Außen
Füllmethode: Normal
Deckkraft: 17
Füllartverlauf:
Winkel: 90°

Schatten nach Innen:

Füllmethode: Normal
Deckkraft: 56%
Winkel: Relativ
Größe: 3
Farbe:787878

So können wir uns jetzt getrost eine Strukur aufbauen wie wir unseren Boxen haben möchten.

Ich werde jetzt erstmal wieder ein paar private Sachen erledigen,
ihr könnt diesen Part des WebDesign ja schon einmal einüben.

Das ganze sollte ca. so aussehen.

 Spoiler

[Marv!n]

Nun werde ich erst einmal Frühstücken gehen, und danach das Tutorial fortsetzen.

Wollte schon zum Rundumschlag á la "Das ist alles?" ausholen, aber als ich das dann las, ist wieder alles gut. ^^

Ausbaufähige Basis hast du da zumindest schon einmal erstellt, mal schauen, wie ausführlich/detailliert das wird. Befürchte aber, dass der Thread verschoben wird (fähigem 1337-uberpro-Moderator sei dank), da er durchaus eher in irgendeinen (Web-)Designbereich passen würde.

[xsrf]

Originally Posted by Xxl3lubbs

Wollte schon zum Rundumschlag á la "Das ist alles?" ausholen, aber als ich das dann las, ist wieder alles gut. ^^

Ausbaufähige Basis hast du da zumindest schon einmal erstellt, mal schauen, wie ausführlich/detailliert das wird. Befürchte aber, dass der Thread verschoben wird, da er durchaus eher in irgendeinen (Web-)Designbereich passen würde.

Es geht hierbei nicht nur um WebDesign.

Denk mal daran, das es Welten sind zwischen FlyffDesign & zB WoW Design.

Ich werde nach dem WebDesign Tutorial, darauf eingehen, wie man Ingame CS/Waffen etc umdesignt.

Ich versuche eine simple Grundbasis zuschaffen auf der sich leicht arbeiten lässt.

Mehr ins Detail zu gehen halte ich nicht für nötig, da die meisten das nicht verstehen werden.

Naja jetzt gehts erst mal weiter.

[19Dani92]

Es wäre sehr hilfreich wenn du anhand eines Beispiels erklärst wie man am besten die div's mit css so formatiert, das die Bereich sich nicht in verschiedenen Browsern überschneiden. Oder generell etwas mehr zum CSS bereich schreibst.

Danke im Vorraus

[xsrf]

Darauf gehe ich hier nicht ein, jedoch habe ich von Timmy gelernt das man es folgender maßen Positionieren sollte.

Man gibt die Maße des Backgrounds an, und platziert die main Sachen einfach

mit

margin: auto 0px;

So mach ich es zur Zeit und es funktioniert wunderbar,.

[xsrf]

Originally Posted by Castielx3

Also ich finde deine HP maße übertrieben.



WTF, du willst die leute verarschen.
1980px breit, ohje da muss ich mit meinen 1280px breiten Bildschrim lange scrollen.

Aber naja, ich würde euch raten die HP´s so zu gestalten das jeder die gut sehen kann.
Bei Photoshop gibt es eine Kategorie wo steht Web und da sind gute Website maße.

Du bist unfähig zu lesen ...
Nicht mehr als 1000px.

Für eine Flyff Hp reichen 500-700px.

Falls du ein ganze Hintergrund Bild verwendest, damit es auf FULL HD Bildschirmen net dreckig aussieht, musst du den background auf 1980px Breite machen...

Bitte vorher lesen bevor du soinen Müll schreibst.

[Marv!n]

Originally Posted by Pure.

Du bist unfähig zu lesen ...
Nicht mehr als 1000px.

Für eine Flyff Hp reichen 500-700px.

Falls du ein ganze Hintergrund Bild verwendest, damit es auf FULL HD Bildschirmen net dreckig aussieht, musst du den background auf 1980px Breite machen...

Bitte vorher lesen bevor du soinen Müll schreibst.

Naja, es sollte sich zwischen 1100 und 1000 Pixeln bewegen, das stimmt schon. Außerdem kann man gerade bezüglich eines Hintergrundbildes, dass nicht den richtigen Hintergrund der Homepage darstellt (SapphireFlyff hatte bspw. oben und unten jeweils diese Berge, als "richtigen" Hintergrund aber eine Rauschtextur), mit min-width und max-width spielen. Und solange nur der Hintergrund 1920 Pixel breit ist, dann muss man nicht unter Umständen nicht scrollen, da hat Pure schon recht.

Beachtet aber, dass große Grafiken eine längere Ladezeit nach sich ziehen und somit alles Andere als performant sind.

Das mit margin:0 auto klappt nur, wenn eine Breite mit angegeben wird. Probiert es selbst aus, indem ihr die width:1000px;-Zeile aus dem folgenden Beispiel einfach entfernt:

<html>
	<head>
	<title>Kleiner Zentrierungstest</title>
	<style type="text/css">
		body {
			margin:20px;
			padding:0;
			background:#efefef;
		}
		.pagebody {
			width: 1000px;
			background: #ff0000;
			margin:0 auto;
			padding:10px;
		}
		.pagebody p {
			background: #00ffff;
			padding:5px;
		}
	</style>
	</head>
	<body>
		<div class="pagebody">
			#div class="pagebody"
			<p>
				#div class="pagebody" p<br />
				<br />
				<br />
				Dieser Text befindet sich im p des "pagebody"-Divs; dieser "pagebody"-Div ist stets zu jeder Zeit zentriert - egal, wie weit ihr den Browser auseinanderzieht.
				<br />
				<br />Anstelle des p kann man selbstredend jede Menge weiterer divs o.Ä. hier hineinpacken; "pagebody" bildet also eine Art zentrierter Container. Ich nutz(t)e einen derartigen div immer als Grundebene für mein gesamtes Design, es kommen also alle weiteren Elemente (wie das p und der sich darin befindliche Text) in ein stets zentriertes Element.
				<br />
				<br />~ xBlubbs
			</p>
		</div>
	</body>
</html>

[Sedrika]

Kann mir einer erklären, was das mit Flyff zu tun hat ? Sonst nenn ich den titel um und schieb es in die Design Area.

[マリブ]

Originally Posted by Sedrika

Kann mir einer erklären, was das mit Flyff zu tun hat ? Sonst nenn ich den titel um und schieb es in die Design Area.

Vielleicht kommt noch mehr ? Man kann nie wissen.

@Topic.
Sieht gut aus, hast nen Thanks für deine Arbeit :3.