Layout
Also ich werd nur mit Photoshop arbeiten und setze Grundwissen voraus. Erstell zunächst eine neue Datei mit den Maßen 800*800. Dann gleich ne neue Ebene ( umschalt + strgn + n) wo wir den oberen Teil auswählen.
Da fügst du dieses Bild ein. Du kannst natürlich auch ein Bild deiner Wahl einfügen aber ich hab das genommen (ist mit 3DSMax gemacht) . Dazu öffnest du das Bild markierst das Ganze und kopierst es da rein. So dann mal neue Ebene erstellen in die wir den Rand rein machen werden. Dazu markieren wir wieder die Ebene mit dem Header und drücken strg. Jetzt die neue Ebene markieren und durch Bearbeiten/Fläche füllen die Ebene mit Weiß füllen. Jetzt auf Auswahl/Auswahl transformieren und mit gedrückter Shift-Taste die Auswahl verkleinern und mit der Maus in die Mitte bewegen.

Dann löschen und auf Ebene/Ebenenstil/Fülloptionen gehen. Da machst du den Haken bei Abgeflachte Kanten und Relief. Bei Weichzeichnen den Wert auf 16 setzen. Dann noch den Haken bei Kontur machen. Hier bei Größe 1 reinschreiben und die Farbe Schwarz wählen.

So jetzt ist der Rohbau für den Rahmen gelegt. Der Rest ist ganz einfach. Achte darauf das die Ebene mit dem Rahmen markiert ist und ziehe mit dem Auswahlrechteck den Rahmen weiter. Also auf jeder Seite den Teil den du als Rahmen willst markieren und durch Bearbeiten/Fläche füllen weiß füllen.

Das Gleiche machst du jetzt um die Spalten für die Navigation zu erstellen.

So das Einzige was jetzt noch stört is die weiße Farbe. Die ersetzen wir durch nen Orangen Ton. Für die Navigationsspalten Links und Rechts nehmen wir den selben Farbton. Ich hab diesen hier genommen #F8E5BC. Erstell eine neue Ebene die unter der mit dem Rand liegt. Markiere mit dem Auswahlrechteck die linke Navigationsspalte.

Dann auf Bearbeiten/Fläche füllen und den vorher eingestellten Farbton nehmen. Das Gleiche machst du mit der rechten Seite und im Prinzip ist es das Gleiche mit der Mitte. Dort nehmen wir aber den Farbton #F8EDD5.

Full-Size
So vom Grund-Layout is alles fertig. Nun kannst du natürlich noch dein Logo in den Header einfügen aber das dürfte ja kein Problem mehr sein.
Kleiner Hinweis: Ihr könnt mit dem lay machen was ihr wollt. Also is kein copyright meinerseits drauf.

Kommentare
Richtig gutes Tutorial,
<br>echt cool!
joa mal kewles tut, gibts selten
muss ma sagen nice gemacht aber was mir nich gefaellt ist das slicen fehlt ! das design is nich das schwere , das slicen is das schwere am layout!!
<br>
<br>bei mir war so ich hatte schon voll viele designs aber ich ka wie man sliced und wenn ich gesliced habe wars es dann scheisse
*das das slicen fehlt
hmm ja dachte mir das slicen las ich weg weil faiter dazu ja schon nen tut geschrieben hat
Denke man slicen tut reicht aber wenn luncher nix dagegen hat schreibe ich meins um mit seinen Images was hälste davon?
jo kannst machen. soll ich dir die .psd schicken? hat über nen mb :D
Jo mach ma :)
Eine Frage, da ich dank launcher endlich Layouts machen kann würde ich gerne wissen wie man so ein cooles Lay wie das von WebStyleZ machen kann. Bin für jede Hilfe dankbar!
hehe let´s rip ^^
Was soll ich darunter verstehen? :)
@ray üben und net alles vorgeben lassen :)
das klappt bei mir irgendwie nicht -.-
is´ mir n bisserl zu verschachtelt geschriebn
<br>
<br>sonst isses aber gut das tut!
Ich finde das tut überhaupt nicht gut für einen anfänger ist das überhaupt nicht zuverstehen .
<br>gib dir mal n bisschen mehr mühe es zu erklären
<br>mfg HeatoN
deshalb ist das tut ja auch auf level 3 gesetzt. bevor du nen layout machen willst solltest du dich erstmal mit kleineren tuts auseinandersetzen.
ahh ich kenne mich mit vielen tuts aus c4d aus aber net aus photoshop :( muss auch ma lernorn
ich hab probleme mit dem übersetzen... kann mir jemand sagen wo ich PS7 auf DEUTSCH runterladen kann? oder auch ps8.. ich hab ps8 eng-.-
<br>(gutes tut^^)
hoi,
<br>die aktuelle version sprich cs findest du auf der hersteller seite also adobe.com dort auf trialversionen und dann kommt schon der download entweder fpr mac oder windows.
<br>Alles auf deutch sofern du es auf der webseite auswählst als webseiten sprache und somit ist auch der download in deutsch.
<br>Bzw. direkter link hierzu: download.adobe.com/pub/adobe/magic/photoshop/win/8.x/AdobePhotoshopCS_De.zip
<br>
keine bilder
wenn die bilder wenigstens angezeigt werden würden...wüsste ich auch wie das layout auszusehen haben soll...