Tutorials

Minimale Portfoliowebseite aus einem Foto erstellen

Das Design der Startseite mit allen fotografischen Elementen ist nur aus einem Foto entstanden. Diese geschickt eingesetzt, ergibt sich ein kreatives und ansprechendes Design. Darüber hinaus werden die rosafarbenen Elemente linkuntersetzt sein und im Mouseovereffect die Farbe wechseln.

Die Erstellung dieser Webseite erkläre ich im Folgenden.

Ein bisschen Reklame in eigener Sache:

1. Dokument einrichten

Ich öffne ein neues Dokument in der Größe 1600×800 px.

Den Hintergrund fülle ich mit einem Rosafarbton, passend zum rosigen Thema der Hochzeit. Der Farbton ist: F4E7E7. Hierzu klicke ich auf den Farbwähler in der Werkzeugleiste, um die Vordergrundfarbe einzustellen. Mit dem Zeiger kann ich dann im Farbfeld den gewünschten Ton einstellen.

Mit dem Füllwerkzeug (G) fülle ich die Ebene mit dem Rosafarbton. Mit dem Shortcut Alt+Rückstelltaste kann ich es auch über einen Tastaturbefehl machen, bei dem die Vordergrundfarbe füllend eingesetzt wird.

Eine Hilfslinie positioniere ich genau in der Mitte bei 800 Pixel. Davon ausgehend ziehe ich mir meinen Hauptcontentbereich auf.

Ich erstelle eine Auswahl in der Breite von 960 Pixeln. Dieser Wert – Scrollleiste berücksichtigen! – ist ungefähr der Hauptcontentbereich bei einer Monitorauflösung von 1024×768. Mit Alt klicke ich auf die Mittelhilfslinie, sodass sich meine neue Auswahl daran ausrichtet.

Nun erstelle ich eine neue Ebene mit Shift+Strg+Alt+N bzw. über das Menü Ebene>Neu>Ebene. Im Anschluss fülle ich diese wieder mit dem Füllwerkzeug (G) mit nahezu weißer Farbe. Reines Weiß empfehle ich nicht, weil der Kontrast sonst zu stark wird und das Weiß ggf. sogar blenden könnte.

Um einen leicht abgesetzten Effekt zu erzielen, drücke ich mit rechter Maustaste im Ebenenfenster auf die Ebene und wähle Fülloptionen. Über Schlagschatten stelle ich den gewünschten Schatten mit den Werten: Deckkraft: 50% – Abstand 3px – Größe 5px ein, damit die zweite Ebene sich vorteilhaft von der rosafarbenen Ebene absetzt.

Ich erstelle nun drei Gruppen; eine für Header, eine für Content und eine für Footer. Die Gruppen unterlege ich farblich mit Rechtsklick auf das Ebenenauge.

2. Header

Nun werde ich einen blauen Balken als Headerobergrenze einfügen. Ich wähle eine feste Auswahlgröße von 920×25 Pixel und klicke mit Alt auf meine Mittelhilfslinie, sodass meine Auswahl nach dem Mittelpunkt ausgerichtet wird. Nun platziere ich meine Auswahl an die gewünschte Stelle ein paar Pixel weiter nach unten und fülle diese mit einem blauen Farbton.

Als nächster Schritt ist es wichtig, ein passendes Bild zu finden, das sich für das Design aus einem Foto eignet. Hierbei ist zu berücksichtigen, dass es erstens als Gesamtes im Header dargestellt wird und zweitens genug Bilddetails haben muss, weil diese in größerer Ansicht auf der Startseite neben den drei rosafarbenen linkuntersetzten Farbflächen angezeigt werden.

Mein Hauptbild (Quelle: Beata Wojciechowska @ Fotolia.de) platziere ich in das Dokument und verkleinere es auf die Größe, in der es später auch im Header angezeigt werden soll. Mit dem Platzieren wird das Bild auch als Smart-Objekt in das Dokument eingefügt. Es empfiehlt sich, diese Ebene einmal zu duplizieren und das Duplikat erst einmal auszublenden. Dieses wird später im Contentbereich benötigt.

Nun kann ich zur optimalen farblichen Harmonie im Design den oberen Balken in dem Blau überlagern, wie es auch die Ringschachtel hat. Dazu rufe ich die Fülloptionen der Balkenebene über das Ebenenbedienfeld auf und wähle das Register Farbüberlagerung. Mit der Pipette picke ich mir nun das entsprechende Blau direkt aus dem Headermotiv. Mein blauer Balken nimmt diese Farbe auf.

Das Bild mit der Ringschachtel hat einen grauen Hintergrund. Daher muss ich das Hauptmotiv erst freistellen, damit es sich optimal in den Header einfügt.

Mit dem Schnellauswahlwerkzeug wähle ich den Innenbereich der Ringschachtel aus.

Das Freistellergebnis sieht folgendermaßen aus, weshalb ich auch den Dialog Kante verbessern über den Shortcut Strg+Alt+R zur Optimierung des Ergebnisses aufrufe.

Im Dialog Kante verbessern wähle ich einen Smartradius von ca. 70 Pixel, damit die Kante zwischen freizustellendem Motiv und zu löschendem Hintergrund schön scharf wird.

Ich bestätige mit OK und wandle meine Auswahl in eine Ebenenmaske um mit Klick auf das Symbol für Ebenenmaske hinzufügen im Ebenenbedienfeld.

Ich wähle in den Fülloptionen einen leichten Schlagschatten mit 50 Prozent Deckkraft, 4 Px Abstand und einer Größe von 20 Pixeln.

Den Websitenamen schreibe ich in einer 80-Punkt-Scriptina neben mein Headerhauptmotiv. Wenn ich mit dem Text-Werkzeug (T) ein Textfeld ziehe, erstelle ich automatisch eine neue (Text-)Ebene.  Alternativ zum Evergreen unter den Hochzeitskartenfonts empfehle ich die Zapfino. Die Glättungsmethode kann in diesem Fall auf abgerundet bleiben, da in der Umsetzung der Schriftzug als PNG-Bild in die Website platziert wird.

In dem blauen Balken des Headers werde ich mit weißer Schrift in einer 15-Punkt-Georgia mit dem Text-Werkzeug (T) das Motto der Webseite setzen. Wichtig ist, dass ich bei der Schrift keine Glättungsmethode einstelle. Im Web wird sie später auch nicht abgerundet dargestellt. Ist mir dadurch die Schrift zu hart, kann ich sie abrunden, muss aber diese Elemente als PNG speichern und als Bild in die Website platzieren. Beim Fließtext ist eine Abrundung daher nicht möglich.

Für den Footer sowie Navigation I und II werde ich eine Serifenschrift nehmen. In diesem Fall wieder die Georgia. Navigation I ist die Zeile unterhalb des Headers und führt zu den formellen Inhalten: Über mich, Leistungen, Kontakt und Impressum. Diese Texte platziere ich ohne Abrundung in einer blauen Georgia. Das wird später eine sehr minimalistische Navigation, die den Navigationskopf des Hauptaugenmerks des Layouts, der Navigation II, bilden wird.

Die Navigation II sind die rosa Flächen. Diese führen später zu den Themeninhalten: Galerie – Video – Blog. Das sind die dynamischen Inhalte, die stetig ergänzt und erweitert werden.  Bevor ich Navigation II einfüge, muss ich noch den Contentbereich gestalten.

3. Content

Für den Contentbereich ziehe ich mir mit Hilfslinien die Felder auf, in denen ich meine rosafarbenen Flächen und Bildausschnitte platzieren möchte. Ich rufe als Erstes die Voreinstellungen auf, um die Rastergröße auf 1cm /4 Unterteilungen einzustellen. Standardmäßig hat das Raster die Einstellung auf 2cm/4 Unterteilungen.

Das Raster blende ich über den Shortcut Strg+Shift+Alt+, ein. Wahlweise kann ich auch den Mausweg über das Menü Ansicht>Einblenden>Raster gehen.

Jetzt lege ich mir die Hilfslinien anhand der Rasterführung an. Das Raster hat eine magnetische Funktion, sodass die Hilfslinien im gewünschten Abstand zueinander platziert werden können.

Das Ganze ist ein bisschen abstrakt auf den ersten Blick. Daher empfiehlt es sich, vorab ein Aufteilungskonzept zu skizzieren.

Zum besseren Handling kann ich die ersten rosafarbenden Navigationsflächen mit dem Rechteck-Werkzeug aufziehen.

Die rosafarbenden Flächen helfen mir, die weiteren Hilfslinien schnell zu platzieren. Für die richtigen Abstände sorgen die Unterteilungsabstände im Raster. Hilfslinien lassen sich übrigens mit Strg+H ein- und ausblenden.

Im Anschluss sehen mein Hilfslinienfelder folgendermaßen aus:

Jetzt kann ich mein Duplikat des Headerhauptmotivs, das ich anfänglich ausgeblendet habe, wieder einblenden bzw. einfach einmal erneut duplizieren und in die Content-Gruppe verschieben. Ich transformiere den Ebeneninhalt, sodass es nahezu dokumentfüllend angezeigt wird.

Ich ziehe mit dem Auswahlwerkzeug eine Auswahl entlang meinem ersten von Hilfslinien definierten Feld.

Mit Klick auf das Symbol zum Hinzufügen von Ebenenmasken wird die Auswahl als Ebenenmaske zur Bildebene gesetzt. Die Auswahl begrenzt den anzuzeigenden Bereich, welcher genau mein zuvor festgelegtes Feld war. Ich löse anschließend das Verbindungsglied zwischen Ebenen und Ebenenmaske im Ebenenbedienfeld und kann jetzt mit dem Verschiebenwerkzeug den Ebeneninhalt verschieben, ohne dass sich die Ebenenmaske ebenso verschiebt. Ich fokussiere ein prägnantes Bilddetail, welches in diesem Feld abgebildet werden soll.

So fahre ich fort mit den anderen mit Hilfslinien angelegten Feldern: Ich erstelle ein weiteres Duplikat meiner Ringschachtelebene, ziehe eine Auswahl auf und füge eine Ebenenmaske hinzu, welche die Auswahl widerspiegelt. Ich löse das Verbindungsglied zwischen Ebene und Ebenenmaske im Ebenenbedienfeld und verschiebe anschließend den Ebeneninhalt, bis sich ein gefälliges Bilddetail zeigt.

Exemplarisch für die spätere Optik dupliziere ich die rosafarbenden Flächen der Navigation II und färbe diese in einen himmelblauen Farbton. So wird der Mouseovereffect aussehen, der später bei der Webentwicklung umgesetzt werden kann.

In die einfarbigen Flächen schreibe ich noch mit der 15-Punkt-Georgia die Navigationsnamen hinein.

4. Footer

Im Footer am rechten Rand schreibe ich mit einer 13-Punkt-Georgia die Websiteadresse als textlichen Abschluss.

Zur harmonischen Unterteilung von Contentbereich zu Footer möchte ich noch eine gestrichelte Linie anlegen. Dazu erstelle ich eine neue Datei in der Größe 6×1 Pixel. Ich zoome sehr weit in das neue Dokument hinein und fülle zwei Pixel mit schwarzer Farbe. Am einfachsten ist es, wenn ich mit dem Auswahlwerkzeug die beiden Pixel direkt auswähle und mit schwarzer Farbe fülle (Alt+Rückstelltaste, wenn die Standardfarben (D) in der Werkzeugleiste eingestellt sind.)

Ich wähle alles aus mit Strg+A und wähle über das Menü Bearbeiten>Muster festlegen. Ich gebe meinem neuen Muster den Namen „Gestrichelte Linie 2 Pixel“.

In meinem Weblayoutdokument ziehe ich mit dem Linienzeichner eine gerade Linie zwischen Footer und Contentbereich mit linker und rechter Begrenzung auf Höhe des Contentbereichs. Halte ich die Shift-Taste dabei gedrückt, wird die Linie auch gerade aufgezogen.

Ich rufe die Fülloptionen der Linienebene auf und wähle im Register Musterüberlagerung mein neues Muster, das ich soeben angelegt habe. Aus meiner Ebene wird eine gestrichelte Linie.

Fertig ist mein in Photoshop erstelltes Weblayout, welches jetzt in HTML/CSS umgesetzt bzw. dem Kunden gezeigt werden kann.

Hier kannst Du dir die Erstellung der Portfoliowebseite als Video anschauen.

Neuerungen in WordPress 3.5 mit Video

Unsere Empfehlung für dich:

Freistellen mit Photoshop

Du willst wissen, wie du Personen und Tiere, Haare und Felle, Gläser und Flaschen, Wolken und Feuer, Bäume und andere filigrane Objekte freistellen kannst? Dann ist das genau dein Praxis-Training!

• 8 Stunden Video-Training - Schritt für Schritt alle Freistelltechniken ergründen
• Geeignet für Photoshop ab CS3, komp. mit MAC, PC & Tablets (iPad)

Mit diesem Training wechselst du als Einsteiger zu den Profis!

HIER KLICKEN für alle Infos zur Lern-DVD