Anzeige
Tutorialbeschreibung

Minimale Portfolio-Webseite im eleganten Look erstellen

Minimale Portfolio-Webseite im eleganten Look erstellen

In diesem Video-Training erkläre ich dir, wie ein Portfolio durch den Einsatz von schwarzen Flächen in abgestimmter Transparenz sehr elegant wirken kann. Du erfährst darüber hinaus die wesentlichen Vorteile beim Arbeiten mit Smart-Objekten sowie einige Tipps im Umgang mit Icons/Symbolen anderer Websites.

... übrigens findest du die komplette Serie hier: Photoshop-Workshop-DVD - Webdesign - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Schritt 1

Ich erstelle ein neues Dokument in 1600 x 1600 Pixel.

Bilder



 

Schritt 2:

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 3:

Im Ebenenbedienfeld lege ich sechs Ordner an, damit alles auch seine Ordnung hat, wenn ich meine zahlreichen Ebenen erstelle. Die Hintergrundebene wandle ich durch einen Doppelklick um. Durch einen Klick mit der rechten Maustaste auf das Auge vor jedem Ordner kann ich die Farbe innerhalb der Ordner definieren, damit die Übersichtlichkeit weiter erhöht wird.

Bilder



 

Schritt 4:

Die Hintergrundfarbe ändere ich in dunkelgrau und erstelle dann eine neue Formebene mit der Farbe Schwarz. Die Ebene bekommt von mir eine Deckkraft von 80%, damit ein späteres Hintergrundbild darin leicht durchscheint.

Bilder



 

Schritt 5:

Als Nächstes füge ich den Webseitennamen als Textebene ein. Außerdem kommen noch in einer weiteren Textebene die Links hinein. Die Links werden mit einem senkrechten Strich getrennt und bekommen von mir eine hellgraue Farbe.

Bilder



 

Schritt 6:

Ich kopiere jetzt einfach die schwarze Fläche mit Strg+J , schiebe sie nach unten und werde sie auch gleich vergrößern.

Bilder



 

Schritt 7:

Damit die schwarze Box auch mit einem schönen Foto gefüllt wird, öffne ich ein entsprechendes Bild und füge das in mein Layout ein. Jetzt wandle ich das Bild in ein Smart-Objekt um. Als Nächstes ziehe ich eine Auswahl für den unteren Teil, der ausgeblendet werden soll, und füge jetzt eine Maske ein.

Bilder



 

Schritt 8:

Damit der Besucher sieht, dass man die Slideshow auch selber steuern kann, füge ich einen kleinen Pfeil aus den eigenen Formen ein. Darauf kommt noch eine schwarze Kontur per Fülloptionen.

Bilder



 

Schritt 9:

Da mich mein selbst gebauter Pfeil nicht 100% vom Hocker haut, werde ich mir einen von www.iconspedia.com besorgen.

Bilder



 

Schritt 10:

Den Pfeil werde ich ins Layout einfügen, wieder in ein Smart-Objekt umwandeln und duplizieren + spiegeln. So kann ich auch später die Farbe oder Form eines Smart-Objekts ändern und die Änderungen wirken sich sofort auf den zweiten Pfeil aus, weil es sich um eine Instanz des ersten handelt.

Bilder



 

Schritt 11:

Ich habe jetzt die schwarze Fläche wieder kopiert und vergrößert nach unten geschoben. Jetzt füge ich eine große Überschrift ein.

Bilder



 

Schritt 12:

Als Nächstes muss ich einen Text einfügen. Weil ich mir diesen Text nicht aus den Fingern saugen will, bediene ich mich der Webseite www.loremipsum.de. Hier kann man einstellen, wie viele Wörter benötigt werden, und schon hat man einen Platzhaltertext.

Bilder



 

Schritt 13:

Sieht doch schön gefüllt aus, oder?

Bilder



 

Schritt 14:

Ich benötige jetzt die gleiche Box noch einmal samt Überschrift. Dazu kann ich den gesamten Ordner "Das bin ich Box" auf das Neu-Symbol ziehen. Schon habe ich eine Kopie und kann diese komplett mit den enhaltenden Ebenen bequem nach unten verschieben.

Bilder



 

Schritt 15:

Jetzt füge ich in der Box drei Fotos hinzu. Dazu gibt es mehrere Möglichkeiten. Entweder ich öffne ein Bild und klicke dann mit rechter Maustaste auf Ebene duplizieren und gebe als Ziel mein Weblayout an, oder aber ich ich kopiere einfach mit einer Auswahl das komplette Foto, kopiere es und füge es über die Zwischenablage in mein Weblayout ein. Jetzt noch schnell in ein Smart-Objekt umwandeln und verkleinern. Danach füge ich mit den Ebeneneffekten eine weiße Kontur mit 5Px ein. Wichtig zu wissen: Die Standardeinstellung bei Kontur - Position: Außen fügt mir eine runde Kontur bei den Ecken ein. Das möchte ich aber nicht, weil ich ein eckiges Design habe.

Bilder



 

Schritt 16:

Ich werde die Position auf Innen umändern. Schon habe ich auch meine gewünschten Ecken.

Bilder



 

Schritt 17:

Jetzt muss ich neben dem ersten Foto noch zwei einfügen. Dazu kann ich auch wie folgt vorgehen: Ich klicke per gedrückter Strg-Taste auf die Foto-Ebene und erzeuge so eine Auswahl. Diese verschiebe ich mit gedrückter Shift-Taste nach rechts (bleibt dann so in der gleichen Höhe). Dann öffne ich das nächste Foto, kopiere es mir in die Zwischenablage und füge es dann in meine Auswahl über Menü>Bearbeiten>Einfügen Spezial>In die Auswahl einfügen ein.

Bilder



 

Schritt 18:

Photoshop fügt mir jetzt automatisch eine nicht verbundene Ebenenmaske ein und ich kann das Foto jetzt in meinen zuvor ausgewählen Bereich bequem verschieben und transformieren.

Bilder



 

Schritt 19:

Mit gedrückter Alt-Taste übernehme ich den Ebeneneffekt Kontur. Und so gehe ich auch mit dem dritten Foto vor.

Bilder



 

Schritt 20:

Ich kopiere jetzt die komplette Foto-Gruppe und schiebe sie nach unten. Aber aufgepasst: Ich muss jetzt die nicht verbundenen Ebenenmasken wieder verbinden, weil die sich sonst nicht mit verschieben.

Bilder



 

Schritt 21:

Die Navigation von oben kopiere ich in den Footer. So muss ich da erst gar nichts neu schreiben.

Bilder



 

Schritt 22:

Ganz unten würden sich auch ein paar Icons für RSS, Twitter usw. gut machen. Dazu gehe ich wieder auf www.iconspedia.com. Ich wähle mir dort mal einen im Briefmarkenstil aus.

Bilder



 

Schritt 23:

Die Icons wandle ich jeweils immer in Smart-Objekte um und werde diese verkleinert nebeneinander positionieren.

Bilder



 

Schritt 24:

Ich werde mir jetzt ein Foto in einer relativ guten Auflösung besorgen und im Hintergrund meiner Webseite einfügen. Dabei muss das Foto nicht unbedingt komplett in der Seite zu sehen sein. Ich finde, man kann sogar Fotos abgeschnitten zeigen. Mein Beispiel würde wie folgt aussehen:

Bilder



 

Schritt 25:

Hier mal die 1:1 Ansicht. Man sieht jetzt wunderbar, wie die 80%-Deckkraft gut zur Geltung kommt bei den schwarzen Flächen.

Bilder



 

Schritt 26:

Ich kann auch mal mehrere Hintergründe ausprobieren. So sieht es mit einem Wasserhintergrund aus:

Bilder



 

Schritt 27:

Und mit einem Feuerfoto sieht das Ganze auch sehr spektakulär aus. Genial in Photoshop ist, dass ich mehrere Entwürfe als Ebenenkomposition speichern kann. So muss ich nicht jeden Entwurf als eigene PSD-Datei speichern oder wild anfangen, Ebenen ein/- auszublenden.

Bilder



 

Schritt 28:

Mit einem Stadtfoto im Hintergrund würde das Ganze auch ganz toll aussehen:

Bilder



 

Schritt 29:

Leider ist dann aber die weiße Schrift im Footer nicht mehr zu lesen. Darum kann ich für die Links im Footer eine Farbüberlagerung in Schwarz einstellen, und selbst das wird in den Ebenenkompositionen mit gespeichert.

Bilder



 

Schritt 30:

Wem das Hintergrundbild zu dominant ist, kann auch dessen Deckkraft reduzieren. Ich habe sie in meinem Beispiel jetzt auf 40% gestellt:

Bilder



 

Schritt 31:

Wenn ich jetzt das Hintergrundbild in ein Smart-Objekt umwandle und dann darauf einen Weichzeichner setze, kann ich in der Maske mit einem Schwarz/Weiß-Verlauf das Bild auch unten weichzeichnen und es nach oben hin immer schärfer werden lassen. Ich finde diesen Effekt auch ganz interessant. Wie man sieht, kann man in der Tat so viele Spielereien machen; die Möglichkeiten sind einfach unendlich.

Bilder



 

Schritt 32:

Und so sieht die Seite jetzt fertig aus:

Bilder



Bildquelle fotolia.com:
sexy woman © Gabi Moisa, beauty © nutech21, Giorgio Gruizza, Ontario Ltd, water flow effect1 © 2jenn, Glamour portrait of beautiful sexy lady © T.Tulic, SmaragdDaily Spa © Dash, Fire frame © -Misha, Traffic in Los Angeles under the moonlight © Mike Liu, Amir Kaljikovic



DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von mustografie
  • 11.09.2012 - 20:53

daumen hoch ;) find ich echt klasse von dir

Portrait von peter86
  • 01.05.2012 - 11:03

Danke für das Tutorial und die interessante Design-Idee.
Hab auf alle Fälle von diesem guten Tutorial sehr viel gelernt.

Kleines subjektives Erfahrungs-Feedback:
Hab's versucht und dann den "Nachbau" irgendwie auch geschafft.
Gestolpert bin ich über den Anfangsschritt "Auswahl mit fester Größe".
Den "Trick" hab ich noch kapiert
allerdings hab als "Amateur" nicht verstanden was ich mit dieser Auswahl anfangen sollte.

Wollte das 1:1 nachbilden; ist mir nicht ganz gelungen,
da ich die (im Screenshot oder Text nicht angezeigten) verwendeten Fonts wohl nicht richtig erraten habe.

...und warum man für ein Web-Design eine Breite von 1600 Pixel wählt wurde mir nicht klar.
Gleiches gilt für die Höhe von 1600 Pixel. Für das ganze Design hat (bei mir) das nicht ausgereicht.

Dass Design-Tutorials nicht zu einer Web-Seite führen hab ich inzwischen verstanden
und daher mit dem Tutorial "Layoutübergabe aus Photoshop" weiter gemacht.




Portrait von tomess
  • 27.04.2012 - 08:46

super tutorial. danke.

Portrait von Miss_Lili
  • 18.04.2012 - 22:05

sieht echt toll aus!^^

Portrait von chrisscha
  • 18.03.2012 - 22:10

Super Tut! Danke!
Gruß

Portrait von teste123
  • 14.01.2012 - 17:55

Vielen Dank für die Schöne Anleitung
MfG

Portrait von janedde
  • 18.10.2011 - 07:34

toll! Kann man echt gut drauf aufbauen...

Portrait von Oceanny
  • 17.10.2011 - 13:11

Ich fand das zwar gut erklärt und so, aber wie macht man daraus jetzt eine funktionierende Website, bei der ich die Schrift und so auch anklicken kann? Kann mir das vielleicht einer erklären?
Danke.

Portrait von NorskCat
  • 15.10.2011 - 23:32

Tolles Tutorial. Auch das gewählte Layout der Webseite gefällt mir sehr gut.

Portrait von timeless122
  • 28.09.2011 - 22:24

Sehr gutes Tut, danke.

Portrait von Hannes1709
  • 25.09.2011 - 21:12

alles bestens, funktioniert sehr gut.

Portrait von Deexlo
  • 22.09.2011 - 11:22

Gutes Tut , gut gemacht

Portrait von 2406
  • 09.09.2011 - 12:27

Ein gutes Tutorial ohne Frage und bis ins Kleinste erklärt, aber nur bis zur Hälfte! Wie geht es weiter?
Schließlich soll es ja eine Webseite werden!

Ob man nun mit Slices arbeitet oder eine andere Möglichkeit findet es als FUNKTIONIERENDE Webseite einzubinden und eben nicht nur als Bild - Hm, dadrüber schweigt sich der Autor leider aus...

Schade eigentlich, denn es wäre eine sinnvolle und wie es in den Feedbacks rüberkommt, wohl auch notwendige Ergänzung.

Portrait von mud_diver
  • 05.09.2011 - 07:08

Wirklich gut gemacht und sehr übersichtlich. Ausgezeichnetes Tutorial !

Portrait von 7himmel
  • 31.08.2011 - 17:32

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

Portrait von HackerSindDieGuten
Portrait von Revan76
  • 31.08.2011 - 02:44

Hallo Stefan,

dein Tutorial fand ich wirklich klasse!
Finde ich auch eins von dir, über die Umsetzung in die Webfähige Version?
Sprich Slices, etc.
Da hab ich einfach noch zu wenig Erfahrung. Also vom Bild, zur Website.. sowas suche ich..

Vielen Dank für die Unterstützung!

VG, Revan

Portrait von Revan76
  • 31.08.2011 - 11:39

Ich hab jetzt vorerst das gefunden und schau es mir mal an..
http://www.psd-tutorials.de/tutorials/2d/adobe-photoshop/webdesign/view/1729--website-designen-und-erstellen-klassischer-look

Portrait von Lenny21
  • 25.08.2011 - 14:29

Super sache!
Ich habe meine alte page nur mit dem dreamwever erstellt. Und will jetz ein neues design, mit diesem tut. hast du mir sehr viel weiter geholfe!

Portrait von Holzknecht477
  • 24.08.2011 - 11:29

super tut, einfach und toll... danke

x
×
×