Anzeige
Tutorialbeschreibung

Erstellung einer Portfolio-Webseite im Kreidestil mit Photoshop

Erstellung einer Portfolio-Webseite im Kreidestil mit Photoshop

In diesem Workshop erkläre ich, wie ein Portfolio mit nur schwarzen Flächen und Transparenz sehr elegant wirken lässt. Unter anderem werden auch die Vorteil mit SmartObjekt erläutert und Tricks im Umgang mit Symbolen von anderen Webseiten gezeigt. Natürlich sind im Video auch diverse kleine Tipps und Tricks verpackt! Ein Muss für jeden, der Webseiten erstellen möchte.

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


Bildquelle: fotolia.com:closeup of blackboard with pieces of coloured crayons © Oleg Kozlov

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

Auf www.fotolia.de besorge ich mir jetzt ein Bild mit einer Tafel und Kreidestücken.

Bilder



 

Schritt 5:

Das Bild füge ich jetzt direkt unten in meinem Ebenenbedienfeld meines Weblayouts ein.

Bilder



 

Schritt 6:

Jetzt brauche ich ein paar Navigations-Kreidestücke. Dazu muss ich jetzt mehrere Kreide-Stücke freistellen. Das Polygon-Lasso-Werkzeug erweist sich dabei als recht nützlich.

Bilder



 

Schritt 7:

Mit dem magnetischen Lasso geht's aber auch nicht so schlecht, ein Stück Kreide freizustellen.

Bilder



 

Schritt 8:

Noch zwei Stücke brauche ich. Ich versuche es jetzt mit dem Schnellauswahlwerkzeug. Dieses Werkzeug erweist sich als sehr nützlich und vor allem schnell.

Bilder



 

Schritt 9:

Das letzte Stück Kreide, welches ich noch benötige, versuche ich mit dem Zauberstab freizustellen. Damit lassen sich in meinem Beispiel nur gute Ergebnisse erzielen, wenn ich das Häkchen bei Benachbart im Steuerungsbedienfeld aktiviere. Fehlende Bereiche kann ich meiner Auswahl auch noch mit dem Lasso mit gedrückter Shift-Taste hinzufügen.

Bilder



 

Schritt 10:

Meine Kreidestücke, die ich gleich für die Navigation oben einsetzen werde, habe ich jetzt alle freigestellt und auch alle im Ordner "Navigation" eingefügt. Jetzt müssen alle Kreidestücke vom Foto weg und der Teil mit der Tafelfläche erweitert werden. Dazu wähle ich mit dem Auswahlrechteck-Werkzeug den Bereich aus, der mit dem Stück Tafel erweitert werden soll.

Bilder



 

Schritt 11:

Jetzt kann ich diesen Bereich mit der neuen CS5-Funktion: Inhaltssensitives Füllen mit dem Stück Tafel erweitern lassen, ohne dafür wild mit dem Kopierstempel herumfriemeln zu müssen.

Bilder



 

Schritt 12:

Und so sieht das Ergebnis aus:

Bilder



 

Schritt 13:

Als Nächstes wähle ich den oberen und unteren transparenten Teil aus, damit dieser auch mit einem Stück Tafel erweitert wird. Klick auf Inhaltssensitves Füllen, und schon ist auch dieser Bereich gefüllt:

Bilder



 

Schritt 14:

Ist doch ein schön sauberes Ergebnis, und das innerhalb weniger Sekunden.

Bilder



 

Schritt 15:

Auf einer Tafel macht sich natürlich auch eine Kreideschrift ganz toll. Ich suche dazu mir eine passende Schrift auf www.dafont.com aus. Die Schriftart "Tafelschrift" ist zwar ganz gut, nur in meinem Fall vielleicht zu dünn.

Bilder



 

Schritt 16:

Die Schriftart "Eraser Dust" passt dabei viel besser.

Bilder



 

Schritt 17:

Als Titel der Webseite nehme ich einen Platzhaltertext namens Webseitenname. Meine Kreidestücke darunter wollen jetzt noch in die richtige Position platziert werden.

Bilder



 

Schritt 18:

Bevor ich aber die Kreidestücke drehe oder gar skaliere, werde ich sie in Smart-Objekte umwandeln.

Bilder



 

Schritt 19:

Als Nächstes füge ich überall noch einen Text auf jedem Kreidestück ein und werde gleichzeitig jedem Kreidestück einen Schlagschatten verpassen.

Bilder



 

Schritt 20:

Für einen etwas längeren Platzhalter-Text besorge ich mir auf www.loremipsum.de einen entsprechenden Text.

Bilder



 

Schritt 21:

Oben kommt dann eine Überschrift mit der Kreideschriftart und darunter mit Arial ein Fließtext.

Bilder



 

Schritt 22:

Das Geniale ist, dass Photoshop schon von Haus aus einen Kreidepinsel anbietet. Den stelle ich im Pinselbedienfeld so ein, dass der Abstand erhöht wird.

Bilder



 

Schritt 23:

Jetzt kann ich damit im Hintergrund meines Textfeldes eine Kreidefläche erstellen. Den Text werde ich danach in Schwarz umfärben.

Bilder



 

Schritt 24:

Als Nächstes mache ich einen Screenshot von einer Webseite aus meinen Referenzen (Alt+Druck, damit nur die Anwendung in den Screenshot aufgenommen wird). Dann ab damit in Photoshop und in ein Smart-Objekt umgewandelt. Jetzt eine Kontur hinzugefügt. Damit alles Irrelevante wie z. B. die Browser-Symbole entfernt werden, erstelle ich eine Auswahl von dem Bereich, der vom Screenshot erhalten bleiben soll, und klicke dann auf das Masken-Symbol im Ebenenbedienfeld. Sollte jetzt genau der falsche Bereich ausgeblendet sein, einfach die Maske durch Strg+I umkehren.

Bilder



 

Schritt 25:

Anstatt eines weißen Rahmens kann ich auch einen Holzrahmen probieren. Am schnellsten geht das, indem ich mir z. B. eine Holz-Textur von der PSD-Tutorials.de - Texturen-DVD lade und dann alles auswähle und als Muster über Menü>Bearbeiten>Muster festlegen speichere.

Bilder



 

Schritt 26:

Jetzt kann ich unter Kontur die Füllart Muster verwenden und mein neu gespeichertes Holz-Muster anwenden.

Bilder



 

Schritt 27:

Möchte ich jetzt auf meine Holzkontur noch eine abgeflachte Kante hinzufügen, sieht das nur gut aus, wenn ich den Rahmen als eigene Ebene habe. Das kann ich erreichen, indem ich auf meinem Ebeneneffekt mit der rechten Maustaste klicke und dann auf Ebene erstellen. Jetzt werden alle Ebeneneffekte der aktuellen Ebene in eigenständige Ebenen umgewandelt.

Bilder



 

Schritt 28:

Jetzt noch eine Maske auf die neu erstellte Holzebene, damit wieder mein Screenshot durchscheint (vorher die Holzebene über den Screenshot in der Ebenenhierarchie schieben) und dann Abgeflachte Kante und Relief hinzufügen.

Bilder



 

Schritt 29:

Damit der Besucher gleich mitbekommt, dass man auf dem Screenshot auch klicken kann und dann eine größere Ansicht erscheint, möchte ich unten links eine kleine Zoom-Ecke erstellen. Dazu ziehe ich mit dem Rechteck-Werkzeug eine Fläche als Formebene auf. Jetzt werde ich mit dem Ankerpunkt-löschen-Werkzeug einen Punkt löschen, damit es zum Dreieck wird.

Bilder



 

Schritt 30:

Jetzt noch mit dem Textwerkzeug ein Plus hinzugefügt. Die Deckkraft der Fläche kann ich leicht zurücksetzen. Sieht doch schon ganz gut aus, oder?

Bilder



 

Schritt 31:

Wenn ich nur den Innenteil der Fläche leicht transparent haben möchte, kann ich eine Auswahl ziehen und mit einem sehr großen Pinsel mit ca. 30% Deckkraft einmal bzw. mehrmals in den Bereich reinklicken, damit dieser ein/-ausgeblendet wird. Sind aber nur Spielereien :-)

Bilder



 

Schritt 32:

Den ersten Screenshot samt Rahmen habe ich in einen Extra Ordner namens Screenshot 1 gespeichert. Dann alles kopiert mit Raufziehen des Ordners auf das Neu-Symbol. Aber aufgepasst: Bei Smart-Objekten wird die Kopie zu einer weiteren Instanz. Das bedeutet, wenn ich jetzt eines von den beiden Smart-Objekten ändere, ändern sich beide gleichzeitig. Darum am besten, wenn das nicht gewollt ist, auf Neues Smart-Objekt durch Kopie per Rechtsklick auf das Smart-Objekt wählen. Ich möchte hier noch ein Beispiel zeigen, wie auch ein anderer Rahmen erstellt werden kann, und zwar ein leicht gestrichelter. Dazu erstelle ich ein neues Dokuemnt mit der Größe 4x4 Pixel und transparentem Hintergurnd und füge mit dem Buntstift von unten links bis oben rechts eine Gerade ein. Diese speichere ich dann komplett als Muster ab und kann das dann wiederum als Rahmen für meinen Screenshot verwenden.

Bilder



 

Schritt 33:

Im Hintergrund könnte ich jetzt mit dem Kreidepinsel eine Fläche erstellen, die dann auch wie ein Rahmen fungiert. Ich kopiere den Ordner wieder und nenne diesen in Screenshot 3 um.

Bilder



 

Schritt 34:

Ich habe auch noch eine andere schnelle Möglichkeit, das Bild in den dafür ausgewählten Bereich einzufügen. Zunächst klicke ich mit der Strg-Taste in die Maske von Screenshot 3, damit ich genau die richtige Größe und Position als Auswahl habe. Jetzt kann ich mein neues Bild durch Klick auf Menü>Bearbeiten>Einfügen Spezial>In die Auswahl einfügen direkt dort einfügen.

Bilder



 

Schritt 35:

Es wird mir automatisch eine nicht verbundene Ebenenmaske erstellt, sodass ich darin meinen Screenshot verschieben und skalieren kann.

Bilder



 

Schritt 36:

Das Geniale ist, wenn mir die Bilder zur breit sind, markiere ich alle Ordner mit gedrückter Shift-Taste und kann diese dann mit Strg+T zusammen transformieren.

Bilder



 

Schritt 37:

Mir ist noch aufgefallen, dass mir die blaue Fläche vom Plus-Symbol zum Vergrößern der Screenshots in der Ebenenhierarchie verrutscht ist; das habe ich soeben behoben und gleichzeitig über den Screenshots eine Überschrift mit "Ein paar Referenzen" eingefügt.

Bilder



 

Schritt 38:

Als Nächstes werde ich die Leistungen einfügen. Eine Überschrift muss her sowie ein paar Aufzählungspunkte. Dazu wähle ich das Rechteckwerkzeug und erstelle damit eine quadratische Fläche (mit gedrückter Shift-Taste).

Bilder



 

Schritt 39:

Ich habe jetzt der Fläche noch das Holztextur-Muster als Musterüberlagerung hinzugefügt sowie einen kleinen Schatten. Mit gedückter Alt-Taste und Pfeiltaste nach unten (mit ausgewähltem Verschiebewerkzeug) kann ich die Aufzählungszeichen schnell kopieren.

Bilder



 

Schritt 40:

Ich markiere Aufzählungszeichen + Texte und klicke dann Shift+Gruppensymbol. Schon werden alle Elemente gleich in einen neuen Ordner eingefügt, ohne dass ich diese manuell da reinschieben muss. Danach kopiere ich den Ordner noch mal komplett und schiebe den Inhalt nach rechts.

Bilder



 

Schritt 41:

Als Nächstes packe ich mir den Footer. Darin füge ich einen Standardtext ein und möchte da noch ein paar Icons wie Twitter/Facebook/RSS unterbringen. Dazu gehe ich auf www.iconspedia.com und suche mir die entsprechenden Icons, die möglichst alle in einer Serie enthalten sein sollten.

Bilder



 

Schritt 42:

Alle Icons wandle ich jedes Mal in Smart-Objekte um und skaliere sie ein wenig kleiner. Wenn das erste Icon verkleinert ist, kann ich auch mir Hilfslinien aufziehen, um die zwei folgenden Icons in der gleichen Größe aufzuziehen. Oder aber ich mache mir eine Smart-Objekt-Kopie (mit der rechten Maustaste; nicht zu verwechseln mit einfach duplizieren, weil es sonst zu einer Instanz wird) und tausche dann einfach den Inhalt per Doppelklick aus.

Bilder



 

Schritt 43:

Im Hintergrund der Icons kann ich auch eine abgerundete Fläche erstellen. Dazu nehme ich das abgerundete Rechteckwerkzeug.

Bilder



 

Schritt 44:

Möchte ich nur die obere linke und untere rechte Ecke abgerundet habe, kann ich schnell mit einer Hilfslinie + Direktauswahl-Werkzeug die blaue Fläche anklicken, die Punkte verschieben und die Griffe wieder gerade ziehen.

Bilder



 

Schritt 45:

Als Nächstes füge ich noch einen Text über den Icons ein.

Bilder



 

Schritt 46:

Damit der Footer besser getrennt ist, werde ich diesen mit einer gestrichelten Linie sozusagen abtrennen. Dazu erstelle ich ein neues Dokument mit einer Größe von 6 Pixel Breite und 2 Pixel Höhe und fülle davon 2 Pixel in der Höhe und Breite mit weißer Farbe. Danach speichere ich es als Muster ab.

Bilder



 

Schritt 47:

Danach erstelle ich eine Linie mit dem Linienwerkzeug und füge dann als Ebenenstil Musterüberlagerung ein. Die Fläche stelle ich oben im Ebenenbedienfeld auf 0, damit nur die Effektfarbe zu sehen ist.

Bilder



 

Schritt 48:

Das Aufzählungszeichen könne ich auch ersetzen und dafür z. B. ein Stück Kreide von oben nehmen. Das werde ich mir als Smart-Objekt-Kopie duplizieren und dann davon meine Kopieinstanzen erzeugen, indem ich es jeweils immer mit Strg+J dupliziere oder auf das Neu-Symbol ziehe.

Bilder



 

Schritt 49:

Das Geniale dabei ist , wenn ich jetzt z. B. von einem Kreidestück meiner Aufzählungsstücke die Farbe oder Form innerhalb des Smart-Objekts ändere, ändern sich automatisch alle anderen Aufzählungszeichen mit.

Bilder



 

Schritt 50:

Und so sieht jetzt die gesamte Webseite aus:

Bilder

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Echsenauge
  • 24.08.2013 - 14:25

Das Layout an sich war eine schöne Inspiration und das Tutorial war sehr gut erklärt! Vielen Dank dafür!

Portrait von micke_p
  • 02.11.2012 - 03:50

Danke für die ausführliche Mühe !

Portrait von teste123
  • 14.01.2012 - 17:53

Vielen Dank für die Schöne Anleitung
MfG

Portrait von Crillex
  • 03.09.2011 - 22:44

echt geil
sehr sehr gut

Portrait von fcsg4ever
  • 07.05.2011 - 10:41

Tolle Arbeit!!!
Mit diesem Tutorial wurde wieder einmal aufgezeigt, dass man mit so wenigem eine wirklich toll aussehende Internetpräsenz erstellen kann.
Weiter so :D

Portrait von ammersmann
  • 15.04.2011 - 17:12

Gutes Tut. hat mir sehr geholfen alles besser zu verstehen!!

Portrait von addiderdealer
  • 16.03.2011 - 13:23

Hamma Tutorial!
Jetzt habe ich einiges dazu gelernt :D

Portrait von besercer
  • 23.01.2011 - 00:29

Danke, hat mir in vielen Bereichen geholfen!

Portrait von DirectAction
  • 25.08.2010 - 07:44

sehr gut gemacht! Interessantes Video.

Portrait von marDin_H
  • 24.08.2010 - 10:48

ein Video über das weitere Arbeiten wäre interessesant.
Also was passiert nachdem man den Screen in Photoshop gebaut hat, wie macht man nun in Dreamweaver weiter? we werden die ganzen links eingebaut? ....oder geht es inzwischen schon mit FlashCatalyst.

Portrait von garth73
  • 24.08.2010 - 08:14

klasse vielen Dank dafür, ein Tutorial wie man diese Seite codenkann würde das alles noch abrunden. :-)

Portrait von FrankBauer
  • 23.08.2010 - 01:58

Besten Dank .. mal wieder ;-) .... Aber bitte, bitte zeige doch auch wie das dann in Dreamweaver umgesetzt wird Stefan.

Portrait von Momo22m
  • 23.08.2010 - 01:45

wie immer geiles tut super trick thx

bs würde dir ja 100 Punkte geben aber geht ja nicht ^^

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 22.08.2010 - 16:51

Wie immer ein muss wenn man sich sein eigenes Protifolio erstellen will. Danke für die Tipps und Tricks

Portrait von Nickel
  • 22.08.2010 - 12:06

Klasse wie immer. Viele übertragbare Tricks. Die inhaltssensitive Flächenfüllung ist echt der Hit. Leider erst ab CS 5 möglich. ;-) Vielen Dank fürs Tutorial. Sehenswert!

Portrait von TBaE
  • 10.01.2011 - 09:12

Gute Infos, hat mir sehr geholfen

Portrait von Apperat
  • 31.10.2010 - 13:54

richtig klasse
top erklärt

Portrait von Anne_1990
  • 20.10.2010 - 23:38

Tolles Tutorial, weiter so!!!!!!

Portrait von Manuel270383
Portrait von haris_delano
  • 30.09.2010 - 21:19

Hammer Tutorial, konnte leicht mitmachen;-) peace!

x
×
×