Anzeige
Tutorialbeschreibung

PSD-Portfolio-III Webseite - Teil 1: Erstellen des Weblayouts mit Photoshop

PSD-Portfolio-III Webseite - Teil 1: Erstellen des Weblayouts mit Photoshop

In diesem Tutorial zeige ich euch die Erstellung dieses Weblayouts mit Photoshop.
Es ist das passende Tutorial für mein Download PSD-Portfolio III Webseite.


Hier möchte ich euch zeigen, wie ihr ein neues Webtemplate mit Photoshop erstellen könnt.
Datei --> Neu --> 1024x768 Pixel

Bilder


Im nächsten Schritt legen wir rechts eine neue Gruppe an --> Ebene --> Neu --> Gruppe aus Ebenen --> mit den Namen "Hintergrund", danach legen wir drei neue Ebenen an, entweder über Ebene -->  Neu --> Ebene oder über den Abrissblock 
Bilder
in der Ebenenpalette mit dem Namen "unterer Balken", "mittlerer Balken" und "obere Balken"

Sieht wie folgt aus:

Bilder


Als Nächstes generieren wir einen waagerechten Balken im oberen Drittel der Arbeitsfläche mit folgendem Farbverlauf (SHIFT + G) --> dunkler Bereich #a3bab4 und heller Bereich #d8eae5. Mit der Taste STRG + D hebt ihr nach dem Füllen die Auswahl wieder auf.

Bilder


Im zweiten Part generieren wir einen waagerechten Balken im unteren Drittel der Arbeitsfläche mit folgender Füllfarbe #737373. Am besten, wir duplizieren den oberen Balken, verschieben diesen nach ganz unten und füllen ihn im Anschluss mit einem dunklen Grau über Bearbeiten --> Fläche füllen. Natürlich nicht vergessen, die Ebene vorher mit STRG + linker Maustaste zu markieren, damit sich eine Auswahl um den Balken bildet.

Bilder


Und im dritten Part füllen wir noch den mittleren Bereich mit einer weißen Farbe.

Bilder


Wenn diese drei Ebenen fertig erstellt wurden, beginnen wir mit der eigentlichen Webseite.
Dazu erstellt ihr wieder eine neue Gruppe über Ebene --> Neu --> Gruppe  oder in der Ebenenpalette auf das Ordner Symbol klicken. Ich nenne die Gruppe "Layout".

Bilder


In dieser neuen Gruppe legen wir eine neue Ebene an: entweder den Abrissblock in der Ebenenpalette klicken oder SHIFT + STRG + N. Name "Layout_BG".
Nun wählt ihr das Werkzeug "Abgerundetes Rechteck Werkzeug" (SHIFT + U) mit einem Radius von 10 Pixel. Nachdem ihr die Fläche aufgezogen habt, klickt ihr in die Fläche und wählt Pfadfläche füllen -- mit weißer Farbe.

Bilder


Leider wird hier ein unsauberer grauer Rand angezeigt, nachdem die Fläche gefüllt ist. Klickt rechts in der Ebenenpalette mit STRG + linke Maustaste die "Layout_BG"-Ebene an und dann Auswahl --> Auswahl verändern --> Verkleinern --> 2 Pixel.

Bilder


Danach Auswahl --> Auswahl umkehren und die ENTF Taste.

Bilder


Mit STRG + D die Auswahl wieder aufheben.
Nun duplizieren wir die Ebene "Layout_BG" und nennen diese "Schatten_Layout_BG".

Bilder


Wir ziehen diese Ebene unter die Layout_BG, markieren die Schatten_Layout_BG mit STRG + linker Maustaste und gehen über Auswahl --> Auswahl verändern --> Erweitern --> 2 Pixel.
Diese Auswahl füllen wir mit Schwarz, entweder über Fläche Füllen --> Schwarz oder über das Füllwerkzeug.
Nach den Füllen klicken wir auf Filter --> Weichzeichnungsfilter --> Gaußscher Weichzeichner --> 2 Pixel.

Bilder


Die Deckkraft der Ebene setzen wir auf 50%.

Bilder


Im nächsten Schritt klicken wir auf die Hintergrund Ebene "mittlerer Balken", duplizieren diese, benennen die kopierte Ebene "Schatten_mittlerer Balken"und ziehen sie unter die Ebene "mittlerer Balken".
Diese Ebene markieren wir wieder mit STRG + linker Maustaste, danach Auswahl --> Auswahl verändern --> Erweitern --> 2 Pixel und füllen diese mit Schwarz. Nach dem Füllen klicken wir wieder auf Filter --> Weichzeichnungsfilter --> Gaußscher Weichzeichner --> 2 Pixel und setzen die Deckkraft der Ebene auf 50%.

Bilder


Die Ebene "obere Balken" muss ebenfalls noch unter die "Schatten_mittlerer Balken" -

Bilder


ansonsten funktioniert der Schatteneffekt nicht.
Im nächsten Schritt erstellen wir wieder eine neue Gruppe "Header" und legen eine neue Ebene an.
Danach markieren wir den Header-Bereich und fügen ein Hintergrundbild ein. Das Bild liegt in den Arbeitsdateien dabei.

Bilder


Dieses Bild öffnen wir in Photoshop und verkleinern es um 50% --> Bild --> Bildgröße.

Bilder


Danach markieren wir das Bild mit STRG + A oder Auswahl --> Alles auswählen, kopieren das Bild in die Zwischenablage mit STRG + C oder Bearbeiten --> Kopieren,
minimieren oder schließen die Bilddatei und fügen es jetzt in die Auswahl ein mit SHIFT + STRG + V oder über Bearbeiten --> In die Auswahl einfügen.

Bilder


Über STRG + T oder Bearbeiten --> Frei transformieren passen wir das Bild noch ein wenig an.

Bilder


Wenn das erledigt ist, klicken wir auf Bild --> Anpassungen --> Gleiche Farbe --> Wählen bei der Quelle die Unbenannt-1 aus und bei Ebene obere Balken.

Bilder


Die Deckkraft der Ebene setzen wir auf 75%.
Im nächsten Schritt füge ich dem Header-Bereich
ein Logo hinzu; dazu nehme ich das Wasserzeichenlogo von PSD-Tutorials. Hierzu verwende ich das erste Mal den Befehl "Als Smart Objekt öffnen". Bitte beachtet, dass diese Funktion nur ab der Version CS2 + funktioniert, alle anderen öffnen das Logo und transformieren es auf die passende Größe.

http://help.adobe.com/de_DE/Photoshop/10.0/help.html?content=WSCCBCA4AB-7821-4986-BC03-4D1045EF2A57.html

http://www.psd-tutorials.de/membertutorial1340-Photoshop-Grundlagen_werkzeuge-verwendung-des-smartobjekt.html

Ich klicke also auf Datei --> Als Smart Objekt öffnen, suche mir das Logo (liegt in den Arbeitsdateien) und öffne es.

Bilder


Danach verschiebe ich die neu geöffnete Datei in meine Arbeitsfläche, wähle mit der Taste V das "Verschieben-Werkzeug" aus und ziehe die Datei auf meine Arbeitsfläche.

Bilder


Danach transformiere ich die neue Ebene mit STRG + T auf ungefähr 15% und positioniere das Logo im Header-Bereich - rechts in der Ebenenpalette könnt ihr jetzt sehen, dass diese Ebene ein Smart Objekt enthält. Der Vorteil an dem Smart Objekt ist, dass ihr die externe Datei verlustfrei transformieren könnt - den Rest lest bitte selbst oben in den beiden Links nach.

Bilder


Danach generiere ich mir eine neue Ebene mit SHIFT + STRG + N oder über den Abrissblock und nenne diese Ebene "Brush".
Danach wähle ich mir das "Pinsel Werkzeug" mit der Taste B und anschließend suche ich mir einen schönen Brush heraus, erstelle mir eine Auswahl, indem ich die STRG-Taste festhalte und auf die  Ebenenmaske klicke. Jetzt füge ich den Brush auf der Brush-Ebene hinzu.

Bilder


Wenn das erledigt ist, fügen wir noch im Header-Bereich ein paar Scanlines hinzu, die wir mit einer Maske auf den unteren Bereich des Headers reduzieren.
Neue Ebene mit SHIFT + STRG + N oder den Abrissblock - Name: "Scanlines".
Danach klickt ihr auf Datei --> Neu und erstellt eine neue Datei mit 3 x 3 Pixel, vergrößert die Datei auf 1600% bzw. 3200 % und macht mit den Buntstift-Werkzeug diese drei Punkte.

Bilder


Danach speichert ihr diese Datei als Muster ab über Bearbeiten --> Muster festlegen; nun könnt ihr diese Datei schließen.
Jetzt der gleiche Vorgang wie gerade eben, STRG Taste halten und auf die Ebenenmaske klicken, um eine Auswahl um den Header-Bereich zu erstellen. Danach klickt ihr auf Bearbeiten --> Fläche füllen --> unter Verwendung wählt ihr Muster und sucht euer eben erst angelegtes Scanline-Muster heraus.

Bilder


Nun erstellt ihr euch eine Maske --> Verlaufswerkzeug --> Schwarz auf Durchsichtig --> und nehmt den oberen Bereich der Scanline wieder weg - Deckkraft der Ebene auf 25%.

Bilder


Und zu guter Letzt kommt die Navigation dran; bei genau dieser möchte ich mich auch nicht allzu lange aufhalten, denn über Web-Navigationen könnte man Bücher schreiben. Die Navigation werde ich später mit CSS einbetten.
Hier ein paar Links, wie ihr in Photohop eine Navigationsleiste erstellen könnt:

http://www.ulf-theis.de/tutorials/photoshop/web-graphics/plastic-navigation
http://psdtuts.com/interface-tutorials/how-to-create-a-stunning-vista-inspired-menu/
http://www.avivadirectory.com/photoshop/vista-style-nav-bar/
http://www.avivadirectory.com/photoshop/professional-dark-web-button/
http://www.webmasterpro.de/design/article/interfacedesign-cleane-silberne-navigation.html
http://www.simplebits.com/bits/bulletproof_slants.html
http://superfluousbanter.org/archives/2004/05/navigation-matrix-reloaded/

In den Arbeitsdateien habe ich einen Navigationsbalken hinzugefügt, den ihr vorübergehend einfügen könnt.

Bilder


Jetzt beschrifte ich den Navigationsbalken noch, füge noch ein bisschen Text hinzu und fertig wäre das Grundlayout.

Bilder


Hoffe, es hat euch Spaß gemacht und ihr habt auch wieder ein bisschen dazugelernt.

Gruß hellemon

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von SeppelSchulze
Portrait von clanfirefox
  • 21.11.2012 - 22:19

Echt Klasse..hat mir super geholfen :)

Portrait von sinalauren
  • 22.07.2012 - 10:50

Sehr hilfreich, danke

Portrait von timeless122
  • 28.09.2011 - 22:36

Echt super tut, danke dafür !

Portrait von roweso
  • 23.09.2011 - 16:01

Das schaffe selbst ich-Ironiemodus..
SEhr anschaulich und strukturiert.
Bin auf weitere Teile gespannt.

Portrait von OJey
  • 11.07.2011 - 08:48

Kann man nur empfehlen, super gemacht! Lässt sich auch leicht nachmachen!

Portrait von Suomi74
  • 26.05.2011 - 12:22

Sehr gutes tut, habs ohne prob. nach machen können.

Portrait von marlo
  • 18.03.2011 - 09:34

Gut gemacht! Anschaulich erklärt.

Portrait von Superking88
  • 14.03.2011 - 12:42

Sauber weiter so! Hat mir sehr gut gefallen und mich weiter gebracht

Portrait von ganjaaa
  • 13.03.2011 - 01:20

Top Tutorial ... ist super gemacht und verständlich auch für einen leihen wie mich :3

Portrait von molle62
  • 22.12.2010 - 20:04

ein sehr gut erklärtes Tut, vielen Dank

Portrait von Eragon
  • 03.11.2010 - 11:57

Super, vielen Dank für die Ideen :)

Portrait von SaphiraAmethyst
  • 29.10.2010 - 17:04

Danke, das Tutorial hat mir sehr weiter geholfen.

Portrait von Lucky_Enno
  • 10.10.2010 - 15:14

Danke, das Tutorial hat mir geholfen

Portrait von djangohh
  • 22.09.2010 - 19:25

vielen dank - super job

Portrait von sophie67
  • 06.08.2010 - 16:28

Echt klasse, Vielen Dank.

Portrait von Spearboy
  • 04.08.2010 - 13:18

Vielen Dank für dieses wunderbare Tutorial!

Portrait von jr3012
  • 28.07.2010 - 11:11

immer wieder gut anzuschauen....

Portrait von asad
  • 21.06.2010 - 19:09

SUPER Tutorial^^
Hat mir SEHR geholfen

Portrait von iphone007
  • 06.06.2010 - 14:07

einfach super, vielen danke

x
×
×