Anzeige
Tutorialbeschreibung

Simples Web-Layout mit Adobe Photoshop

Simples Web-Layout mit Adobe Photoshop

Hier möchte ich euch zeigen, wie ihr mit wenig Mühe und in kurzer Zeit ein ganz passables Layout für eine Website erstellt. Das Tutorial eignet sich auch für Anfänger.


Schritt 1:

Bevor wir anfangen können, benötigen wir erst einmal ein neues Dokument. Ein neues Dokument erstellen wir über Datei>Neu... oder via Strg+N. Als Maße habe ich 1000 px mal 750 px genommen. Die Farbe des Hintergrundes ist beim Erstellen des Dokuments egal. Sie kann Transparent, Weiß, Schwarz oder sogar Lila sein.


Schritt 2:

Nun folgt der wichtigste Schritt überhaupt. Wir müssen uns nun festlegen, welche Farbe unser Hintergrund haben soll. Ich habe in meinem Beispiel ein etwas dunkleres Blau (#1da4cb) gewählt.

Nachdem ihr die Hintergrundfarbe gewählt habt, erstellt ihr eine neue Gruppe.

Bilder



 
Klickt nun 2 Mal auf den Namen der Gruppe (wahrscheinlich Gruppe 1) und ändert diesen in "Hintergrund". Danach zieht ihr die eingefärbte Ebene (wahrscheinlich Ebene 1) in die Gruppe "Hintergrund" und gebt ihr den Namen "Hintergrund".

Bilder



 

Schritt 3:

Als Nächstes fügen wir der Hintergrund-Ebene ein Rauschen hinzu. Dies machen wir über Filter>Rauschfilter>Rauschen hinzufügen.

Bilder



 
Im folgenden Fenster setzen wir die Stärke auf 12, die Verteilung auf Gleichmäßig und Monochromatisch auf aus.

Bilder



Unsere Hintergrund-Ebene sollte nun so aussehen: (kommt nun auch drauf an, welche Hintergrundfarbe ihr genommen habt).

Bilder



 

Schritt 4:

Als letzten Schritt für die Hintergrund-Ebene spielen wir noch ein wenig mit dem Licht.

Klickt auf Filter>Renderfilter>Beleuchtungseffekte.

Bilder



Im folgenden Fenster belassen wir die Einstellungen bei Standard und versetzen lediglich die Lichtquelle. 

Die Hintergrund-Gruppe können wir nun zuklappen, da wir sie nicht mehr benötigen. (Zumindest nicht mehr bearbeiten).


 

Schritt 5:

Wir erstellen eine neue Gruppe namens "Logo" und schreiben mit dem Textwerkzeug einen Text auf die Hintergrund-Ebene. Ich benutze hierfür die Schriftart Velocity und die Schriftgröße 60. Die Farbe der Schrift ist egal.

Bilder



Als Nächstes fügen wir unserer Textebene noch einen Ebenenstil hinzu. Dieser sieht wie folgt aus:

Bilder


Bilder


Bilder


Bilder



Nun sollte unser Logo so aussehen:

Bilder



Die Logo-Gruppe können wir nun auch zuklappen, da wir sie zum Arbeiten nicht mehr brauchen.


 

Schritt 6:

Als Nächstes benötigen wir noch eine Navigation. Hier habe ich mich für eine schlichte Navigation entschieden, da das Layout ruhig und nicht zu anstrengend für die Augen sein soll. Als Erstes erstellen wir wieder eine neue Gruppe und nennen sie "Navigation". In der Gruppe "Navigation" erstellen wir noch eine zweite Gruppe und benennen sie "Hintergrund" und erstellen eine neue Ebene in der Gruppe "Hintergrund".

Wir wählen nun das Auswahlwerkzeug und als Art wählen wir Feste Größe.

Bilder


Bilder


Feste Größe: Breite 1000 px, Höhe 50 px.

Wir klicken nun mit der Maus auf unser Dokument und sehen eine Auswahl, die einmal von links nach rechts im Dokument verläuft und 50px hoch ist.

Bilder



Diese Auswahl färben wir nun mit dem Füllwerkzeug (Tastenkombination G) weiß und heben die Auswahl auf. Jetzt setzen wir die Deckkraft der Ebene noch auf 20% herunter. Unsere Ebene sollte nun so aussehen:

Bilder



 

Schritt 7:

Da so ein halb transparenter Streifen aber wirklich sehr schlicht aussieht, erstellen wir in der Gruppe "Navigation" noch eine neue Ebene und wählen wieder das Auswahlwerkzeug. Auch hier arbeiten wir wieder mit der festen Größe. Allerdings stellen wir die Höhe diesmal auf 1 px und die Breite bleibt bei 1000 px.

Nun klicken wir wieder einmal auf unser Dokument und ziehen die Auswahl nun direkt über unseren halb transparenten Kasten. (Pixel an Pixel, es darf kein Pixel Platz zwischen ihnen sein).

Danach füllen wir die Auswahl weiß und duplizieren die Ebene. Die neue Ebene ziehen wir nun direkt unter unseren halb transparenten Kasten. Das sollte nun so aussehen:

Bilder



Jetzt klappen wir die Gruppe "Hintergrund" (in der Gruppe "Navigation") zu und erstellen über ihr eine zweite Gruppe. Diese Gruppe nennen wir "Buttons". Da ich für mich persönlich noch nicht genug Gruppen habe, erstellen wir nun in der Gruppe "Buttons" eine weitere Gruppe und nennen diese "Startseite".

Ja, ich weiß. Hört sich verwirrend an, deshalb hier ein Screen:

Bilder



 
In der Gruppe Startseite erstellen wir nun einen Text. Dazu verwenden wir wieder das Textwerkzeug. Ich benutzte als Schriftart Segoe UI und Schriftgröße 18. Als Text habe ich "Startseite" genommen.

Bilder



Als Nächstes duplizieren wir die Textebene "Startseite" und blenden die originale Textebene aus. Der Kopie geben wir den Namen "Startseite hover".

Bilder



 
Der Textebene "Startseite hover" fügen wir nun noch einen Ebenenstil hinzu.

Bilder


Bilder



Unsere Textebene "Startseite hover" sollte nun so aussehen:

Bilder



Nun blenden wir die "Startseite hover"-Ebene aus und die originale "Startseite"-Ebene wieder ein. Dieses Verfahren können wir nun so oft, wie wir wollen, wiederholen. Ich habe noch 4 weitere Buttons hinzugefügt. "Über mich", "Downloads", "Tutorials" und "Impressum".

Bilder



Jetzt können wir die Gruppe "Navigation" zuklappen, da wir sie nicht mehr benötigen.


Schritt 8:

Vielleicht wollen wir noch Werbung oder Ähnliches einblenden lassen und benötigen dafür noch etwas Platz. Deshalb erstellen wir nun wieder eine neue Gruppe und nennen sie "Boxen". In der Gruppe "Boxen" erstellen wir nun eine weitere Gruppe und nennen diese "Linke Box".

Als Nächstes nehmen wir das Abgerundete Rechteck-Werkzeug und stellen den Radius auf 10. Die Hintergrundfarbe spielt keine Rolle.

Bilder


Bilder



 
Jetzt erstellen wir ein Rechteck mit den Maßen: Breite 200 px, Höhe: 200 px.

Bilder



Als Nächstes wählen wir das Rechteck-Werkzeug (nicht das abgerundete) und ziehen zwei kleine Rechtecke auf. Eins links unten und eines rechts unten in der Box.

Bilder


Nun rastern wir unsere 3 Ebenen und fügen sie via Strg+E zusammen.


 

Schritt 9:

Da so ein weißes Kästchen einfach nur so dahingeklatscht wirkt, verpassen wir unserer Box nun noch einen Ebenenstil.

Bilder


Bilder


Bilder


Bilder



Und so sollte dann unser Ergebnis aussehen:

Bilder



 

Schritt 10:

Da diese Box nun noch recht leer ist, können wir noch einen Text oder irgendwas anderes hineinsetzen. Ich habe mich dafür entschieden, hier im Tutorial nur "Advertise here" zu schreiben. Schriftart Segoe UI, Textgröße 24 und den Ebenenstil vom Logo.

Bilder



 
Das Ganze wiederholen wir drei Mal und das sollte dann so aussehen:

Bilder



Nicht vergessen, für jede Box eine neue Gruppe zu erstellen. Ist übersichtlicher.

Aber die Gruppe "Boxen" können wir nun auch schließen, da wir nun mit dem letzten Punkt, dem Content, fortfahren.


Schritt 11:

Der Content. Neben meinen miserablen Navigationen stellt mich der Content auch immer wieder auf die Probe. Mal ist der zu groß, mal zu klein. Dann wirkt er im Vergleich zum Rest viel zu wuchtig.

Aber ich denke, hier habe ich es ganz gut hinbekommen.

Wir erstellen also eine neue Gruppe. Wir nennen sie "Content". Wir wählen wieder das Abgerundete Rechteck-Werkzeug und ziehen ein Rechteck auf, das ungefähr 90% des Bildes (Breite) beansprucht. Wie auch schon bei den vorherigen Boxen wählen wir nun das Rechteck-Werkzeug (nicht abgerundet) und füllen wieder die beiden unteren Ecken.

Auch hier verfahren wir nun wieder wie bei den Boxen. Die Ebenen rastern und via Strg+E vereinen. Danach den gleichen Ebenenstil wie bei den kleinen Boxen hinzufügen.

Als Nächstes wählen wir wieder das Abgerundete Rechteck-Werkzeug und ziehen ein Rechteck im Inneren des vorhandenen Rechtecks auf. Ca. 5-10 px Abstand zu den Rändern halten.

 
Als Farbe für mein inneres Rechteck habe ich #393939 gewählt. Nachdem das zweite Rechteck steht, fügen wir ihm nun noch einen Ebenenstil hinzu:

Bilder


Bilder



 

Schritt 12:

Fertig. So sollte unser Layout nun aussehen:

Bilder

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 10.12.2012 - 22:38

Mein erstes tutorial hier, Super gemacht. Danke :)

Portrait von teste123
  • 14.01.2012 - 17:48

Vielen Dank für die Schöne Anleitung
MfG

Portrait von Ruffydi
  • 18.10.2011 - 19:05

Vielen Dank für das tutorial man kann immer wieder was dazu lernen.

Portrait von plusMan
  • 16.09.2011 - 16:54

Ich fande es super verständlich. Vielen Dank, interessantes Tut.

Portrait von Xander77
  • 15.08.2011 - 14:54

Gutes Tutorial. Vielen Dank!

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 09.08.2011 - 08:03

Besser gehts fast nicht!

Portrait von antacid
  • 24.07.2011 - 11:42

Super tut... danke, evtl kann ich gebrauchen

Portrait von Gfx_Freaky
  • 29.06.2011 - 16:27

danke echt klasse tut :D

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 29.05.2011 - 18:25

Schön, Ich bin ein Anfänger und du hast es dennoch sehr verständlich erklärt

Portrait von Psychodoc
  • 27.05.2011 - 12:49

Danke für das Tut.
Über Farbe usw. lässt sich natürlich immer streiten, aber die Ideen finde ich ganz gut gelungen.
Immer weiter so und Daumen hoch!!

Portrait von hathor1411
  • 20.05.2011 - 05:25

Danke, supre gemacht und sehr gut erklärt.

Portrait von Mattes5592
  • 12.05.2011 - 11:37

niiiiiice gemacht =) danke

Portrait von kellerkind7
  • 26.04.2011 - 16:09

danke für den beitrag

Portrait von HowieKellerfish
  • 04.04.2011 - 21:26

das tut hat mir wirklich gut gefallen! war sehr hilfreich! nur die stelle mit dem erstellen des content-teils könnte etwas ausführlicher sein, aber sonst sehr schön !

Portrait von Pole18
  • 02.04.2011 - 11:53

leicht und einfach zu verstehen thx

Portrait von frogracer
  • 31.03.2011 - 12:33

Danke für das tolle tut man lernt nei aus ;)

Portrait von kati1708
  • 30.03.2011 - 15:40

klasse Tutorial!

liebe grüße
Kati

Portrait von Cornelia_13
  • 30.03.2011 - 14:24

Danke, hat mir sehr weiter geholfen

Portrait von waendi
  • 29.03.2011 - 12:21

Danke, einige sehr gute Hinweise, die mich dazu gebracht haben, weitere Experimente vorzunehmen.

Portrait von behemoth65
  • 29.03.2011 - 09:54

Zum Thema Monitorauflösung: dpi ist eine Druckauflösung, Monitorauflösung sollte man in ppi angeben. Klingt nach Klugscheisserei, ist aber doch ein großer Unterschied. Moderne Monitore können sehr wohl mehr als 72 ppi darstellen. Kleines Experiment: Messt Euren eigenen Monitor aus (in Zoll natürlich) und rechnet Eure (native) Auflösung mal dagegen (z. B. 24 -Zöller ca 21 Zoll Breite die 1920 Pixel darstellen= ca 92 ppi). Die 72 ppi wurden irgendwann mal im Zeitalter der 15er-Röhrenmonitore als Quasi-Standard festgelegt und geistern noch immer durch die einschlägigen Medien.

Gruß
Jens

x
×
×