Anzeige
Tutorialbeschreibung

Erstellen eines Weblayouts PSD-Portfolio-II Videotutorial

Erstellen eines Weblayouts PSD-Portfolio-II Videotutorial

So könnte das Webtemplate am Ende aussehen:

Bilder



 

1. Schritt

Wir öffnen Photoshop und erstellen eine neue Datei: Datei>Neu.

Bilder



 
Danach legen wir die Struktur der Webseite fest, indem wir uns Hilfslinien ziehen.

Bilder



Wenn meine Grenzen abgesteckt sind, beginne ich, mir einen virtuellen Hintergrund einzubauen. Diese Hintergrundgrafik sollten wir nur für die Optik verwenden, denn beim späteren Slicen der einzelnen Grafiken benötigen wir den Hintergrund nicht mehr. Dieser wird dann später mit einer CSS-Datei im Quellcode der Webseite definiert.


 

2. Schritt

Hier ist es euch überlassen, welchen Hintergrund ihr wählt; meine Bild-Ressourcen stammen meistens von deviantART, in diesem Fall aber habe ich aber auf die Quelle von http://www.cgtextures.com/ zurückgegriffen. Dort kann man sich dann z. B. Holzplanken als Hintergrund auswählen>Kategorie>Texturen Wood Planks New (old).

Bilder



 

3. Schritt

Ich habe mir jetzt einen bestimmten Hintergrund ausgewählt und bastele diesen für mich später in Photoshop zusammen, um die komplette Fläche von 1024x768 px auszufüllen.

Sieht dann wie folgt aus:

Bilder



 

4. Schritt

Als Nächstes möchte ich die Bereiche Content/Bildgalerie/Fußzeile 1 und 2 definieren; hierzu lege ich mir vier neue Ebenen in Photoshop an.

Bilder



 

5. Schritt

Ich fülle die Bereiche Content und Bildgalerie mit einer weißen Farbe und bei den beiden Fußzeilen wähle ich ein dunkles Braun/Orange #5b2b05 und fülle ebenfalls beide Bereiche mit dieser Farbe. Sieht wie folgt aus:

Bilder



 

6. Schritt

Im nächsten Schritt mochte ich alle Bereiche mit runden Ecken versehen; dazu gehe ich wie folgt vor: Ich halte die Strg-Taste fest und klicke rechts in den Ebenen auf die Ebene Content. Danach sieht man links, dass die Ebene ausgewählt bzw. markiert wurde.

Bilder



 
Danach klicke ich oben in der Menüleiste auf Auswahl>Auswahl verändern>Abrunden und wähle einen Radius von 5 Pixel aus.

Bilder



 
Wenn ihr das gemacht habt, könnt ihr sehen, dass sich die Auswahl verändert hat.

Bilder



 
Um nun die Ecken abzurunden, klickt bitte wieder oben in der Menüleiste auf Auswahl>Auswahl umkehren.

Bilder



 
Wenn das geschehen ist, dann klickt jetzt nur noch auf der Tastatur auf die Entf-Taste - fertig.

Bilder



 
Diese Technik wendet ihr bitte auf alle vier Ebenen an. Sieht dann wie folgt aus:

Bilder



 

7. Schritt

Nun setze ich die Deckkraft bei den einzelnen Ebenen herunter, um eine Transparenz der Content-Bereiche zu erreichen.

Bilder



 
Ebene Content und Ebene Bildgalerie setze ich auf 15 % und die beiden Fußzeilen auf 50%. Sieht wie folgt aus:

Bilder



 

8. Schritt

Um die Bereiche ein wenig hervorzuheben, setze ich um alle Bereiche einen dünnen Rahmen von 2 Pixel; geht wie folgt: Haltet die Strg-Taste und klickt rechts in den Ebenen auf Content.

Bilder



 
Danach klickt ihr oben in der Menüleiste auf Auswahl>Auswahl verändern>Verkleinern.

Bilder



 
Hier wählt ihr 2 Pixel aus; wenn das passiert ist, klickt ihr wieder auf Auswahl>Auswahl umkehren. Jetzt legt ihr eine neue Ebene an und benennt sie Content Rahmen. Klickt auf diese Ebene und füllt diese mit Weiß; entweder über Bearbeiten>Fläche füllen oder über Shift+F5.

Bilder



 
Wenn das passiert ist, hebt ihr die Auswahl mit Strg+D auf, im nächsten Schritt haltet ihr wieder die Strg-Taste fest und klickt rechts auf die Content-Ebene. Diese Auswahl kehrt ihr wieder über Auswahl>Auswahl umkehren um.

Bilder



 
Danach wechselt ihr auf die Ebene Content Rahmen und drückt die Entf-Taste auf der Tastatur.

Bilder



 
Diese Schritte macht ihr noch für die Bild-Galerie und die beiden Fußzeilen. Wenn das erledigt ist, setzt die Deckkraft der 4 Rahmen-Ebenen auf 50%. Sieht wie folgt aus:

Bilder



 

9. Schritt

Im nächsten Schritt setze ich das Logo für die Webseite ein. Sieht wie folgt aus:

Bilder



 

10. Schritt

In diesem Schritt füge ich noch ein paar Embleme und Verzierungen hinzu, um den Headerbereich noch ein wenig auszufüllen. Hier könnt ihr euch selbst nach Lust und Laune austoben. Passende Photoshop-Brushes findet ihr z.B. bei deviantART:

http://browse.deviantart.com/resources/applications/psbrushes/

Bei mir sieht es ungefähr so aus:

Bilder



 

11. Schritt

In diesem Schritt füge ich die Navigations-Buttons hinzu. Nun ist die Frage: Wie bekomme ich in den Navigationsbereich fünf gleich große Buttons? Berechtigte Frage, aber auch dafür gibt es ein sinnvolles Tool in Photoshop. Klickt bitte in eurer Werkzeugleiste das Lineal-Werkzeug an oder ihr könnt auch das Tastaturkürzel Shift+2xI wählen.

Bilder



 
Danach vergrößert ihr euren Arbeitsbereich auf 300% und klickt oben auf die Hilfslinie, haltet die Shift-Taste fest und zieht das Lineal auf die untere Hilfslinie - oben links könnt ihr dann die Pixelzahl ablesen, die ihr gemessen habt. In unserem Beispiel sind es 213,28 Pixel.

Bilder



 
Nun müssen wir ein bisschen rechnen: Wir benötigen 5 Zwischenräume von jeweils 2-3 Pixel; das macht 10 oder 15 Pixel, diese 10 oder 15 Pixel ziehen wir von den 213 Pixel ab, das Ergebnis von 203 oder 198 Pixel teilen wir durch 5 und somit haben wir 5 gleich große Buttons, die in den oben genannten Bereich passen.

Ich persönlich wähle die 3 Pixel Zwischenraum und komme so auf eine Buttongröße von 39,6 Pixel. Da aber nur ganze Zahlen angegeben werden können, entscheide ich mich für 39 x 140 Pixel Buttons. Diese Buttons erstelle ich, indem ich auf Datei>Neu klicke.

Bilder



 
Danach fülle ich den Button mit der Grundfarbe Braun/Orange #5b2b05 und ziehe diesen neu erstellten Button in meine Webseite.

Bilder



 
Ich positioniere den Button und setze die Deckkraft auf 50 % herunter.

Bilder



 
Um nun auch bei den Buttons die Ecken abzurunden und einen kleinen weißen Rahmen zu setzen, bitte ich euch, die Punkte 6-8 nochmal durchzuarbeiten. Hier habt ihr es aber nicht so schwer, weil ihr genau einen Button machen müsst und diesen Button dann 4 x dupliziert. :-)

Sieht dann bei mir wie folgt aus:

Bilder



 

12. Schritt

Die Buttons mit Namen versehen - ich habe folgende Navigation gewählt: Punkte Home - Über mich - Portfolio - Gästebuch - Kontakt.

Bilder



 

13. Schritt

In der Fußzeile ebenfalls eine Navigation einbauen. Fertig ist die Grundwebseite.

Bilder



 
Hoffe, ihr hattet Spaß, das Tutorial nachzubauen. Der Rest wurde nur noch eingebaut, um das Tutorial zu vervollständigen.

Bilder



Viele Grüße

hellemon

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von jenshop
  • 10.07.2012 - 16:40

sehr schönes Anfänger Tutorial! nur der Link zum Pinsel funktioniert nicht :(

Portrait von tortillaInc
  • 24.01.2012 - 17:05

Danke für das tolle Tutorial und den Link zu cgtexture!

Portrait von hcmt
  • 15.09.2011 - 00:30

Danke für das Tutorial.
Da muss ich gleich loslegen.
LG

Portrait von 7himmel
  • 31.08.2011 - 17:33

Sehr gut, danke! Hat mir was gebracht...

Portrait von Thedomay
  • 28.08.2011 - 03:44

Sehr schönes Tutorial , jedoch sind die Links fehlerhaft verlinkt o: ein Http zu viel , jedenfalls bei den Brushes

grüßli

Portrait von Cacara
  • 31.07.2011 - 13:32

Leider sind die Bilder und Erklärungen immer um eine Seite versetzt. Ansonsten gutes Tutorial.

Portrait von Sensi7
  • 04.03.2011 - 14:49

klasse Sache! Danke.

Portrait von iwona
  • 04.02.2011 - 01:53

danke schön
sehr gut erklärt :-)

Portrait von Dennis3107
  • 05.12.2010 - 10:07

Sehr gut erklärt, nettes Tut...danke...

Portrait von racingfee
  • 13.11.2010 - 20:11

Sehr schön gemacht..prima erklärt..Danke

Portrait von Cheremius
  • 29.05.2010 - 16:10

Also erstmal sehr gutes Video alles perfekt erklärt. Für den Anfang genau das richtige. Nur woher bekomme ich jetzt die Brushes die habe ich vermisst? Auf der direkten Website geht der Download leider nicht.

Danke schon im voraus.

mfg

Portrait von Bayernfieber
  • 15.05.2010 - 12:50

Sehr Interessant. Vielen Dank.

Portrait von simoli
  • 17.04.2010 - 14:55

Find ich wirklich sehr gut erklärt.
Dickes Lob und vielen dank für die Arbeit.

Portrait von mirek
  • 21.02.2010 - 19:03

Fantastischer Lehrgang.
für einen Anfänger wie ich es bin ein Absoluter muss.
ich wusste nicht das Grafik Design mit PS so schnell und „einfach“ sein kann !!!
ein Große Lob und Danke für diese Tolle Video

Mirek

Portrait von Hannes125
  • 31.01.2010 - 19:19

Vielen Dank ist echt eine tolle sache, es hat mir echt geholfen, gut gemacht

Portrait von PatrickStar
  • 15.11.2009 - 19:29

Danke sehr mehr davon (:

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 10.11.2009 - 23:28

Danke ich kannt nur das PDF jetzt schau ich mir mal das Video an

Portrait von huebling
  • 21.10.2009 - 11:46

Super!! Vielen Dank, jetzt blick ich mal durch, dank Dir.. DAnKe

Portrait von Photo_Expert
  • 21.10.2009 - 10:12

Danke hellemon. Nachdem ich das Videotutorial heruntergeladen habe probier ich es sofort aus.
Und danach bastle ich mir meine eigene Homepage.

Sehr gutes Tutorial => Punkte 10/10

Portrait von BlackBoSs
  • 18.10.2009 - 22:35

Super Tutorial danke dir,

Ich würde mich total freuen über ein Tutorial wo man sehn kann wie mann es slicen bzw coden tut ...

LG

x
×
×