Anzeige
Tutorialbeschreibung

Klassische Business-Webseite im Portfolio-Stil erstellen

Klassische Business-Webseite im Portfolio-Stil erstellen

Schritt 1:

Ich erstelle ein neues Dokument in 1600 x 1600 Pixel.

Bilder



 

Schritt 2:

Im Ebenenbedienfeld lege ich drei Ordner an, damit alles auch seine Ordnung hat, wenn ich meine zahlreichen Ebenen erstelle. Die Hintergrundebene färbe ich in Schwarz um.

Bilder



 

Schritt 3:

Ich füge jetzt ein Logo in das Dokument ein. Kleiner Trick: Wenn ich ein zweites Dokument/Bild aufhabe, kann ich dieses sehr einfach in ein anderes Dokument einfügen, indem ich es per Verschieben-Werkzeug in das andere Dokument über die Tabs oben halte und dann an der gewünschten Stelle einfüge. Es geht aber auch noch einfacher: Ich klicke dazu im Ebenenbedienfeld mit der rechten Maustaste auf den Namen der Ebene und dann auf Ebene duplizieren und als Ziel mein Webseitendokument. Damit ich mein Logo jederzeit verlustfrei skalieren kann, wandele ich es in ein Smart-Objekt um (rechte Maustaste auf den Ebenennamen und dann In Smart-Objekt konvertieren).

Bilder



 

Schritt 4:

Damit ich jetzt weiß, wo der Hauptinhalt in einer Größe von 980 Pixel erstellt werden muss, gibt es folgenden Trick: Ich lege zunächst eine Hilfslinie genau in der Mitte an (rastet automatisch in der Mitte ein). Jetzt erstelle ich eine Auswahl mit Fester Größe und klicke mit gedrückter Alt-Taste genau auf die Hilfslinie. Jetzt wird meine Auswahl genau von diesem Punkt aus mittig erstellt.

Bilder



 

Schritt 5:

Ich positioniere jetzt das Logo in den Haupt-Inhaltsbereich, damit auch User mit geringerer Auflösung das Logo ordnungsgemäß und nicht beschnitten sehen. Als Nächstes kommt der Name der Firma in "Myriad Pro Bold" + Portfolio in einer Schriftart "Brush Script Std".

Bilder



 

Schritt 6:

Damit das Logo noch besser rüberkommt, habe ich ihm einen Ebenenstil verpasst: Abgeflachte Kante und Relief mit einer sehr dezenten Einstellung. Außerdem habe ich noch einen minimalen Schwarz/Weiß-Verlauf mit geringer Deckkraft eingestellt.

Bilder



 

Schritt 7:

Als Nächstes habe ich die Navigation erstellt. Dazu habe ich im Ordner Header einen Unterordner namens Navigation eingefügt und den Ebeneneffekt vom Logo mit gedrückter Alt-Taste auf den Firmennamen + Navigation übertragen.

Bilder



 

Schritt 8:

Damit mein aktiver Navigationspunkt gut zur Geltung kommt, füge ich mit dem abgerundeten Rechteck mit einem Rundheits-Radius von 10px einen blauen Button hinter dem Text vom Navigationspunkt "Webseiten" ein. Dem Button verpasse ich noch einen Verlauf von Blau zu dunkelblau und füge gleichzeitig eine 1px Kontur mit der ersten Blaufarbe vom Verlauf ein (kann ich direkt mit der Pipette anwählen, sofern ich in den Fülloptionen die Farbe für die Kontur auswähle). Die Deckkraft des Buttons ändere ich auf ca. 80%, damit der Button wie ein Glasbutton aussieht.

Bilder



 

Schritt 9:

Als Nächstes erstelle ich im Ordner Content eine neue Form mit dem Rechteckwerkzeug und füge darauf eine Kontur mit 2px weißer Farbe ein. Die Fläche im Ebenenbedienfeld setze ich relativ gering auf 29%. Warum die Flächendeckkraft reduzieren? Weil dadurch später ein Hintergrund durchschimmert, aber die Effekte, in meinem Fall die Konturfarbe, ihre volle Deckkraft behalten.

Bilder



 

Schritt 10:

Damit ich den Glaseffekt gleich mal besser begutachten kann, färbe ich einen Teil der Hintergrundebene in Grau. Außerdem kopiere ich die Glasfläche und setze diese wieder auf 100% Flächendeckkraft und füge zusätzlich einen leichten Schein nach außen in der Farbe Schwarz im Modus Normal ein. Die Konturfarbe ändere ich von Weiß auf Grau.

Bilder



 

Schritt 11:

Ich blende mir mit Strg+H wieder die Hilfslinien ein und sehe, dass die Flächen zu nah an der Begrenzung sind. Darum markiere ich beide Ebenen mit gedrückter Shift-Taste im Ebenenbedienfeld und drücke dann Strg+T, um beide Objekte gleichzeitig zu transformieren. Die Breite reduziere ich auf 98%.

Bilder



 

Schritt 12:

Als Nächstes füge ich den Text "Unsere Webseiten" ein. Die Schriftgröße habe ich auf 37 Pt eingestellt und die Farbe auf Grau.

Bilder



 

Schritt 13:

Ich habe jetzt im Content-Ordner einen Unterordner namens PSD-Tutorials.de eingefügt und habe dann www.psd-tutorials.de angesurft und Alt+Druck gedrückt, damit nur das aktive Fenster ohne Windows-Startleiste als Screenshot in meine Zwischenablage gespeichert wird. Dann habe ich eine Auswahl aufgezogen, wo mein Screenshot gleich rein soll.

Bilder



 

Schritt 14:

Ich klicke jetzt im Menü auf Bearbeiten>Einfügen Spezial>In die Auswahl einfügen (Ab CS5). In CS4 ist der Befehl direkt unter Einfügen im Bearbeiten-Menü.

Bilder



 

Schritt 15:

Das Geniale ist, dass mir Photoshop automatisch eine nicht verbundene Maske erstellt und ich so die Möglichkeit habe, mein Bild bequem genau in meiner vorherigen Auswahlgröße zu positionieren und skalieren.

Bilder



 

Schritt 16:

Ich füge jetzt in das Bild eine weiße Kontur von 2px ein und außerdem noch einen schwarzen Schein nach außen mit Füllmethode Normal.

Bilder



 

Schritt 17:

OK, so sieht jetzt der Kontureffekt bei einer 100%-Auflösung aus:

Bilder



 

Schritt 18:

Als Nächstes setze ich eine Textbox neben das Bild und ganz oben die Überschrift und darunter mit grauer Farbe und nicht ganz so großer Schrift und vor allem größerem Zeilenabstand den Beschreibungstext ein.

Bilder



 

Schritt 19:

Jetzt brauche ich noch ein Häkchen. Das gibt es bei den Eigenen Formen schon von Haus aus. Als Farbe/Effekt kopiere ich mir mit gedrückter Alt-Taste alles vom Button aus der Navigation.

Bilder



 

Schritt 20:

Wenn ich jetzt die Aufzählungszeichen mit Strg+J insgesamt 3x kopiert und an die richtige Stelle positioniert habe, kann ich den gesamten Ordner auf das Neu-Symbol ziehen, damit ich davon eine Kopie habe.

Bilder



 

Schritt 21:

Den kopierten Ordner einfach angeklickt und mit dem Verschieben-Werkzeug nach unten positioniert. Aber aufgepasst: Mein Screenshot ist eine nicht verbundene Maske; diese muss ich jetzt aber mit dem Kettensymbol verbinden lassen, weil sonst mein Screenshot nicht mitverschoben werden kann. Jetzt füge ich zwischen den beiden Ordnern eine Linie mit dem Linienwerkzeug ein, die auch nur 1 Px hoch ist (ich halte dabei die Shift-Taste, damit die Linie absolut gerade ist).

Bilder



 

Schritt 22:

Damit ich eine schöne gestrichelte Linie bekomme, erstelle ich ein neues Dokument mit nur 5 Pixel Breite und wandele die Hintergrundebene durch einen Doppelklick in eine normale Ebene um, markiere alles und entferne die weiße Fläche, sodass alles transparent ist. Jetzt fülle ich mit dem Buntstift nur einen oder nach Belieben auch zwei Pixel. Danach speichere ich das als Muster ab (Menü>Bearbeiten>Muster festlegen).

Bilder



 

Schritt 23:

Der Linie gebe ich jetzt eine Musterüberlagerung, und zwar genau mein neu gespeichertes Muster.

Bilder



 

Schritt 24:

Ich habe jetzt einfach meinen Screenshot von PhotoshopTutorials.de eingefügt und die Maske+Ebenenstile einfach von meiner PSD-Tutorials.de-Ebene verschoben. Danach konnte die PSD-Tutorials.de-Ebene gelöscht werden. Sieht doch bis jetzt schon ganz gut aus.

Bilder



 

Schritt 25:

Das Gleiche wiederhole ich komplett, nur jetzt mit Texturen-Download.de. Die gestrichelte Linie muss ich natürlich auch kopieren.

Bilder



 

Schritt 26:

Jetzt geht es dem Footer an den Kragen: Ich füge eine Text-Ebene ein. Sitemap, Kontakt und Impressum verpasse ich eine hellblaue Farbe.

Bilder



 

Schritt 27:

Den Hintergrund habe ich jetzt komplett schwarz umgefärbt. Sieht doch schon nicht schlecht aus. Aber es fehlen noch diverse Eyecatcher.

Bilder



 

Schritt 28:

Ich möchte jetzt ganz oben noch ein Twitter-Icon einfügen. Das habe ich z. B. auf www.smashingmagazine.com mit dem Stichwort: Twitter Icon gefunden. Wenn ich das heruntergeladen, entpackt und geöffnet habe, kann ich dieses mit der rechten Maustaste im Ebenenbedienfeld über Ebene duplizieren in mein Webseitenlayout einfügen.

Bilder



 

Schritt 29:

Das Icon werde ich wie immer noch schnell in ein Smart-Objekt umwandeln und dann in eine sinnvolle Größe transformieren.

Bilder



 

Schritt 30:

Jetzt benötige ich noch ein RSS-Feed-Icon. Ganz tolle Icons gibt es auf www.iconspedia.com. Darunter auch das RSS-Icon!

Bilder



 

Schritt 31:

Das Icon gehört ab in den Footer, und ich werde es wie immer noch schnell in ein Smart-Objekt umwandeln und dann in eine sinnvolle Größe transformieren.

Bilder



 

Schritt 32:

Kleiner Tipp: Damit man eine noch bessere Übersicht hat, sollten die Ordner verschiedene Farben haben. Dazu klicke ich mit der rechten Maustaste auf das Auge und stelle dann die Farbe ein.

Bilder



 

Schritt 33:

Damit im Header und Footer noch ein toller Spezial-Effekt hinzukommt, erstelle ich zunächst ein neues Dokument mit einer Größe von 1600 x 800. Die Hintergrundebene färbe ich mit einer dunklen Farbe. Dann erstelle ich mit dem Rechteckwerkzeug eine Form und klicke mit dem Ankerpunkt-hinzufügen-Werkzeug genau oben in der Mitte der neuen Form und halte dabei die linke Maustaste gedrückt, sodass ich Ankergriffe rausziehen kann und eine geschwungene Form erstelle.

Bilder



 

Schritt 34:

Als Nächstes füge ich einen Ebenenstil ein - Schein nach außen mit folgenden Einstellungen:

Bilder



 

Schritt 35:

Ich dupliziere die Ebene und klicke Strg+T und dann rechte Maustaste>Verkrümmen. Jetzt werde ich die Form leicht abändern, siehe Bild:

Bilder



 

Schritt 36:

Die Deckkraft habe ich auf 50% gestellt und die Füllmethode auf Ineinanderkopieren. Außerdem habe ich den Schein nach außen ein klein wenig reduziert (muss man aber nicht unbedingt).

Bilder



 

Schritt 37:

Mit Strg+Alt+Shift+E habe ich alle sichtbaren Ebenen zu einer neuen kopiert, diese auf 60% Deckkraft gestellt und danch wieder ein wenig verkrümmt.

Bilder



 

Schritt 38:

Jetzt habe ich die Füllmethode noch auf Farbig abwedeln gesetzt, damit die Farben noch mehr strahlen.

Bilder



 

Schritt 39:

Ich habe die neue Ebene dupliziert und nochmal verkrümmt. Danach habe ich eine Verlaufseinstellungsebene eingefügt. Welchen Verlauf man nimmt (bzw. man kann auch einen eigenen erstellen), ist jedem selbst überlassen. Die Füllmethode muss ich dabei ändern auf z. B. Farbton.

Bilder



 

Schritt 40:

Die neue Grafik habe ich jetzt kopiert und in meinen Header eingefügt. Mit einer Ebenenmaske habe ich nicht benötigte Bereiche wieder ausgeblendet.

Bilder



 

Schritt 41:

Die Grafik habe ich dupliziert und in den Footer eingefügt + gedreht und verkrümmt.

Bilder



 

Schritt 42:

Und so sieht das Ergebnis aus:

Bilder



 

Schritt 43:

Zum Schluss noch ein Trick. Möchte ich irgendwann mal eine andere Farbe vom Spezialeffekt im Hintergrund, muss ich immer beide Smart-Objekte bearbeiten. Das geht auch anders. Ich ziehe mein erstes Smart-Objekt auf das Neu-Symbol.

Bilder



 

Schritt 44:

Jetzt das Smart-Objekt noch nach unten in den Footer einfügen, drehen und verkrümmen. Und wenn ich dann irgendwann mal die Farbe im Smart-Objekt (per Doppelklick komme ich in die Bearbeitung) ändere, wirkt sich das sofort auch auf das Header-Smart-Objekt aus!

Bilder



Ich hoffe, ihr konntet viele Tipps mitnehmen und ich freue mich schon, wenn ihr auch beim nächsten Workshop von mir mit dabei seid!

Weitere Teile


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von gordon65
  • 15.07.2011 - 14:14

für ein anfänger vl. noch nichts. evtl. manche sachen etwas genauer erklären. Aber sonst super !

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 11.05.2011 - 20:10

echt gut Beschrieben wie einige Vorredner schon sagten...!
hat mir sehr geholfen danke!

Portrait von kfzslay87
  • 08.05.2011 - 22:11

Sehr schön erklärt, Echt Super

Portrait von DaKleene
  • 15.04.2011 - 16:43

sehr schön. danke für dieses tutorial

Portrait von tortillaInc
  • 29.03.2011 - 01:20

Super Tutorial, sehr hilfreich, gut erklärt und mit vielen praktischen Shortcuts!Thx a lot!

Portrait von pinochino
  • 13.03.2011 - 00:44

Fantastische Arbeit. Hilft mir sehr! Danke.

Portrait von Desilein
  • 19.02.2011 - 20:30

Super Idee! Das Design gefällt mir sehr gut. Bin gespannt ob ich es umsetzten kann. Vielen Dank!

Portrait von Marshell8282
  • 11.02.2011 - 18:50

super tolles tut und von der aufbauweise sehr gut umgesetzt! Danke

Portrait von d_schimpl
  • 06.02.2011 - 19:45

Ich denke, da werd ich eine lange Zeit damit beschäftigt sein :-)) Danke

Portrait von Boudless
  • 05.02.2011 - 19:30

hey sehr schön :D
cool wär wenn du die logos und so freigeben könntest

Portrait von TheRoellsche
  • 02.02.2011 - 21:37

geil, das habe ich gebraucht!

Portrait von themo_23
  • 01.10.2010 - 14:34

Ich habe es nachgebaut (sehr einfach) und auch das umgestaltet gelang mir gut.

Vielen dank für dieses sehr nützliches Tutorial

Portrait von Halgrim
  • 08.09.2010 - 12:03

Auch von mir die 5 Sterne. Man fühlt sich einfach wohl hier. Immer wieder Tipps und Tricks mit viel Herzblut.
Danke

Portrait von manno22
  • 30.08.2010 - 15:23

ein sehr gelungenes tut!
danke

Portrait von angel_web_shop24
  • 29.08.2010 - 21:23

da ich ja schon weis wie gut deine tuts sind kann ich unbesort schon vorher sagen danke und einfach klasse

Portrait von phmovie
  • 28.08.2010 - 18:01

Das mit den Facebook-Hinweisen find ich toll, so rentiert sich FB noch mehr ;-)

Portrait von flashpix
  • 27.08.2010 - 21:05

Jetzt lohnt sich der Besuch bei Facebook erst recht

Portrait von Susan99
  • 27.08.2010 - 18:33

Vielen Dank für das schöne Tutorial! Ich finde es klasse, dass Ihr jetzt auch bei Facebook dabei seit.

LG
Susan

Portrait von klaf
  • 27.08.2010 - 12:54

Vielen Dank für den Download!

Portrait von CruelAngel
  • 27.08.2010 - 11:15

Vielen Dank :-) Da hat es sich gelohnt heute morgen mal wieder bei Facebook reinzuschauen.

x
×
×