How to, Clanseite erstellen mit Photoshop

[danis`]

So, nachdem Siza in diesem Thread die Frage stellte wie man eine Homepage mit Photoshop erstellt dachte ich mir nach der langen Diskussion die nachher komplett Offtopic wurde: Schreibe einen Thread indem du zeigst WIE man eine Homepage macht.

Schritt 1: Datei erstellen

Erstelle eine neue Datei, Größe: 900 mal 800 px @ 72DPI



Schritt 2: Der Hintergrund

Denke dir einen Hintergrund aus, ich nehme ein mehr oder weniger dunkles Grau (#929292) und fülle die Hintergrund Ebene per Füllwerkzeug(G).



Schritt 3: Die Headgrafik

Nun erstelle ich mit dem Rechteck Werkzeug(U) eine neue Ebene,
vorher wähle ich aber noch eine schöne Farbe aus, ich habe mich für ein dunkles Rot entschieden(#740000).

Damit ziehe ich nun ein Rechteck, von der linken bis hin zur rechten Seite.
Die Höhe sollte ca 200 px sein, damit erstellen wir den Header.

Nun machen wir einen Rechtsklick auf die Ebene und wählen die Fülloptionen aus.
Jetzt machen wir einen Haken bei dem Schlagschatten und wählen folgende Werte:

- Füllmethode: Multiplizieren
- Deckkraft: 75%
- Winkel: 90% (Den Haken bei globalem Lichteinfall verwenden entfernen)
- Distanz: 2px
- Überfüllen: 0%
- Größe: 2px

Dann bestätigen wir mit dem "OK"-Button.



Weiter gehts, nun gehen wir wieder in die Fülloptionen.
Vorher erstellen wir uns selber ein Muster:

- Neue Grafik (3 mal 3 px)
- Buntstift-Werkzeug (B) 1px Größe
- Farbe schwarz auswählen
- Oben links ein pixel anmalen, genau in der Mitte einen und unten Rechts einen.

Nun legen wir dies als Muster fest:
- Bearbeiten -> Muster festlegen..



Nun wieder zurück zu unserem Design:
Ab in die Fülloptionen und Musterüberlagerung auswählen:
Wie wählen unser Muster, und setzen die Deckkraft auf 40%.



Jetzt machen wir einen Haken bei "Verlaufsüberlagerung" und klicken auf den Verlauf.

Wir wählen die linke Farbe aus und geben ihr die Farbe: #740000
Dann wieder mit OK bestätigen.

Als Füllmethode wählen wir "Multiplizieren" aus und lassen die Deckkraft auf 100%.

Nun bestätigen wir mit "OK".
Das ganze sollte dann ca so aussehen:



Nun nehmen wir uns eine beliebige 3d Grafik, die wir entweder selber erstellen oder nette Menschen fragen, ob wir deren benutzen dürfen ;)

Ich habe nun einen Teil einer 3d Grafik eingefügt,
dies macht ihr, indem ihr die gewünschte Grafik öffnet,
und dann mit dem Auswahlrechteck (M) einen Bereich auswählt und mit
Strg+C kopiert.

In eurem Design drückt ihr dann Strg+V und fügt somit den kopierten Bereich
automatisch in eine neue Ebene ein.

Bei mir sieht es nun so aus:




-----------------ENDE TEIL 1---------------------------------

[danis`]

Jetzt erstellen wir für diese Ebene eine Ebenenmaske.
Dafür klickt ihr unten in dem Ebenenmenu auf das zweite Zeichen.

Nun wählen wir das Verlaufswerkzeug aus(G).
Jetzt klickt ihr auf die Ebenenmaske

Ihr könnt nun einen Verlauf einbauen,
damit bekommt ihr hin das die Ebene sich sozusagen "einbringt".
Ich habe einen Radialen Farbverlauf gewählt

Damit spielt ihr jetzt ein wenig herum.

Um die Grafik besser an das Design anzupassen Drückt ihr Strg+U und den Haken Färben.
Jetzt spielt ihr einwenig mit den Reglern zusammen um die Farben anzupassen.

So, das sieht doch schonmal gut aus..
Nun noch einen Text einbauen und fertig ist der Header.

Ihr wählt das Textwerkzeug(T) und klickt auf den Header.
Nun sucht ihr euch eine schöne Schriftart aus und schreibt euren Clannamen.

Nun geht ihr wieder in die Fülloptionen dieser Schriftebene.
Dort aktiviert ihr einen Haken bei:

- Schein nach außen
Einstellungen:
- Füllmethode: Linear nachbelichten
- Farbe: #8E0000
- Deckkraft: 75%
- Strörung: 0%

- Verlaufsüberlagerung
Einstellungen:
- Füllmethode: Abdunkeln
- Deckkraft: 100%
- Verlauf: einen einfachen Schwarz-zu-weiß Verlauf
- Winkel: 90%

- Musterüberlagerung
Einstellungen:
- Füllmethode: Normal
- Deckkraft: 33%
- Muster: Unser selbsterstelltes Muster vom Anfang

So, das wars nun mit dem Header.
Der fertige Header sieht bei mir nun so aus:

----------------------Ende Teil 2-------------------------------

[danis`]

So, nun kommen wir zu dem Menu.

Schritt 4: Das Menu

Dazu erstellen wir wieder mit dem Rechteck-Werkzeug ein Rechteck.
Dieses "malen" wir am Linken Rand,
einen kleinen Abstand zu dem Header lassen wir natürlich frei.

Jetzt drücken wir auf die Hintergrundebene des Headers mit der rechten Taste und wählen
"Ebenenstil kopieren"



Nun machen wir auf unsere Menuebene ebenfalls rechte Taste und klicken auf
"Ebenenstil einfügen"

Wir gehen jetzt in die Fülloptionen der Menuebene und deaktivieren die Verlaufsüberlagerung.
Dafür aktivieren wir das Kästchen bei "Kontur" und wählen folgende Einstellungen:

- Größe: 1px
- Position: 1px
- Füllmethode: Farbig abwedeln
- Farbe: schwarz

Jetzt erstellen wir wieder mit dem Rechteckwerkzeug eine Ebene, die wir oben im Menu als kleinen "Abschluss" einbringen wollen.
Auf dieser Ebene fügen wir den Ebenenstil der Menuebene.

Jedoch verwenden wir nun ein anderes Muster:

Wir erstellen eine neue Grafik mit 4 mal 4 px.
Dort bauen wir uns nun ein "Carbonmuster",
dies geht wie folgt.

Mit dem Auswahlrechteck markiert ihr genau die Hälfte der Grafik:


Jetzt wählen wir das Verlaufswerkzeug und füllen diesen Bereich mit einem Linearen grau-schwarz verlauf.

Das sollte dann so aussehen:


Jetzt duplizieren wir die Ebene:

Rechte Taste auf die Ebene:
- Ebene duplizieren...

Mit Enter bestätigen.
Nun verschiebt ihr die Ebene um 2 px nach rechts und macht folgendes:

Ihr geht auf:
Bearbeiten -> Transformieren -> Vertikal Spiegeln


Jetzt geht ihr wieder auf Bearbeiten und auf "Muster festlegen...".

So, nun wieder zurück zu unserem Hauptdesign.
In den Fülloptionen geht ihr auf "Musterüberlagerung" und wählt dort unser neues Muster aus.

Folgende Einstellungen benutzt ihr:
- Füllmethode: Weiches Licht
- Deckkraft: 100%

Das sieht dann ca so aus:


Nun erstellen wir dort eine neue Schriftebene und schreiben "Menu" hinein.

Wenn ihr mögt könnt ihr den Fülloptionenstil des Headertextes verwenden.
Nur dann müsst ihr den "Schein nach außen" verkleinern.

Bei mir sieht es nun so aus:


Jetzt erstellen wir wieder eine neue Ebene,
die für die Menupunkte verwendet wird.

Also:
Neue Ebene mit dem Rechteckwerkzeug malen,
diesmal aber mit einem hellen Grauton(#999999)

Hier verwendet ihr folgenden Fülloptionenstil:

Kontur:
- 1px, innen
- Farbe schwarz

Die Allgemeine Füllmethode setzt ihr auf "Ineinanderkopieren"
das sieht dann wie folgt aus:



-----------------ENDE TEIL 3---------------------------------

[danis`]

So, nun haben wir eine Headergrafik, ein Menu, und Linkbuttons
Aber die Buttons sind, wie ich finde, noch zu einfach:
Hier ein kleiner Tip zum schöner gestallten dieser Buttons:

- Wählt wieder das Rechteckwerkzeug aus(U)
- Stellt die Farbe auf einen dunklen Grauton (ich habe die Farbe #3E3E3E gewählt)
- Zieht ein kleines Rechteck im Linkbutton

TIP: Um näher ran zu zoomen benutzt am besten die Tastenkombination Strg + Numpad+ zum raus zoomen einfach mit Numpad- arbeiten.

So das sollte dann ca so aussehen:


Um den Menulink noch mehr hervorzuheben bauen wir jetzt noch einen "Mouseover" Effekt ein.
Am besten dupliziert ihr dazu den Menulink (weiter oben ist beschrieben wie) und versetzt ihn einige Millimeter nach unten.
Nun habt ihr zwei Menulinks.

Ihr klickt nun doppelt auf das Farbfeld eines der zwei Menulinks und wählt einen etwas dunkleren Grauton aus. (z.B. #6A6A6A)

So, das wars nun eigentlich mit dem Menu.
Machen wir weiter mit dem Contenbereich.

Schritt 5: Der Contenbereich

Am einfachsten ist es, wenn ihr einfach den Hintergrund des Menus dupliziert,
das solltet ihr mittlerweile ja wissen wie es geht.

Diese neue Ebene bewegen wir weiter in die Mitte.

Jetzt drücken wir Strg + T, somit können wir nun die Ebene verbreitern.
Wir halten nun die Maus an den rechten Rand der Ebene bis folgendes Zeichen kommt:

Jetzt ziehen wir den Contenbereich einfach um einiges Breiter, entweder ihr möchtet Rechts noch ein zweites Menu haben, oder auch nicht.
Ich entscheide mich dagegen ein zweites Menu einzubauen, also ziehe ich den Contenbereich bis fast an den Rand.

Das gleiche macht ihr mit dem Hintergrund der Menuüberschrift, so das der gleiche Effekt wie im Menu entsteht.

Nun dupliziert ihr die Menuüberschrift und ändert sie einfach in "Content" um.

Fertig ist das Clandesign,
sehr simpel, aber immerhin ein Anfang.

Das fertige Design sollte bei euch so, oder ähnlich aussehen:



Vielen Dank besonders an Pitter,
da ich eine seiner 3D Grafiken verwenden durfte.

So, und nun dürft ihr fröhlich drauf los posten :D

[luksn]

boah....
Also ich war ja vorhin noch bei dir und seitdem hat sich da ja einiges getan! Respekt hast wirklich viel Arbeit investiert!
Ich dachte erst das wären paar viele Bilder, aber das war selbst bei mir recht fix geladen und das will schon was heißen.

luksn.

[danis`]

danke danke lukas, und danke an die andren die mich dafür lobten

falls fragen oder ähnliches sind: Einfach ne Antwort schreiben!

Ich hoffe dieser Thread hält einige Leute davon ab immer wieder ein "Wie mach ich ne Homepage die toll is mit Photoshop aber ich hab doch noch nie PS gehabt und will das nicht lernen" Thread aufmachen..

[Siza]

Danke Schön
Genau so ein tutorial habe ich gebraucht^^
Und komm ma wieda in icq on