Anzeige
Tutorialbeschreibung

Minimale Portfoliowebseite aus einem Foto erstellen

Minimale Portfoliowebseite aus einem Foto erstellen

Im folgenden Tutorial werde ich erklären, wie ich aus einem einzigen Foto eine gesamte Webseite designe. Das Ziel ist es, eine Webseite zum Thema Hochzeitsplanung zu erstellen. Diese heißt im Anschluss www.my-weddingplan.de.

Angeregt zum Design der Webseite wurde ich durch einen Beitrag im Photoshop-Weblog von Dirk Metzmacher.

http://www.photoshop-weblog.de/?p=657
http://www.creativepro.com/story/howto/24213.html?cprose=daily

Das Design der Startseite mit allen fotografischen Elementen sind 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.

Bilder



Die Erstellung dieser Webseite erkläre ich im Folgenden:


 

1. Hintergrundebene und Contentebene

Als Erstes öffne ich ein Dokument mit Größe 1024x768 und mache die Hintergrundebene zu einer Ebene mit Doppelklick darauf im Ebenenfenster. Da die Hochzeit ein rosiges Thema ist, nehme ich als Hintergrundfarbe auch einen rosafarbenen Ton: 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.

Bilder



 
Mit dem Füllwerkzeug (G) fülle ich die Ebene dann mit dem Rosaton.

Als Nächstes lege ich mir Hilfslinien an, die den Contentteil der Webseite begrenzen werden. Dazu gehe ich mit dem Mauszeiger auf das eingeblendete Lineal und ziehe mir die beiden Hilfslinien für den Bereich der nächste Ebene. Falls das Lineal nicht eingeblendet ist, kann dieses über Strg+R oder Ansicht>Lineal eingestellt werden. Hilfslinien ermöglichen, dass ich mit dem Auswahlwerkzeug an diesen den Bereich perfekt ausrichten kann. Komme ich nahe an die Hilfslinie heran, dann ergibt sich eine Art magnetischer Effekt und mein gewünschter Bereich wird genau an dem von den Hilfslinien eingegrenzten Bereich ausgewählt.

Nun erstelle ich eine neue Ebene mit Shift+Strg+N bzw. Ebene>Neu>Ebene. Ich wähle das Auswahlrechteck-Werkzeug (M) aus der Werkzeugleiste und ziehe an den Hilfslinien den Bereich für meine neue Ebene. Im Anschluss fülle ich diese wieder mit dem Füllwerkzeug (G) mit weißer Farbe.

Um einen leichten 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: 49% - Distanz 5px – Größe 5px ein, damit die zweite Ebene sich vorteilhaft von der rosafarbenen Ebene absetzt.

Bilder



 

2. Auswählen der Bildelemente

Als nächsten 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.

Ich öffne das zuvor gewählte Bild (Quelle: ID678967@Fotolia.de). Mit dem Auswahlrechteck-Werkzeug (M) wähle ich passende detailreiche Bildausschnitte. Diese sind hier rot angezeigt.

Bilder



Nachdem jeder Ausschnitt für sich mit dem Auswahlrechteck-Werkzeug (M) ausgewählt wurde, kopiere ich diesen Bereich mit Strg+C bzw. Bearbeiten>Kopieren. Die Fotoebene muss zum Kopieren markiert sein. In einer neuen Ebene füge ich den kopierten Bereich mit Strg+V bzw. Bearbeiten>Einfügen wieder ein. So verfahre ich mit allen Bildausschnitten.

 
Da das Foto in einer neuen Datei geöffnet wurde und zuvor nicht in die bereits bestehende Arbeitsdatei übernommen wurde, ziehe ich jetzt mit Drag&Drop die Bildausschnittebenen in die Wedding-PSD.
Jetzt sehe ich, dass die Bilder noch ungeordnet und in der Auflösung nicht harmonisch sind.

Bilder



Vorab bereite ich mittels der Hilfslinien die Aufteilung der Bildausschnitte vor. Die Hilfslinien zeigen an, wo die Bildausschnitte positioniert werden sollen. Dabei werde ich gleich die rosafarbenen Flächen berücksichtigen, die später im Mouseovereffect die Farbe wechseln sollen.

 
Die Vorschau mag jetzt etwas unübersichtlich aussehen. Daher bietet es sich an, die einzelnen Hilfslinien Schritt für Schritt mit der Anpassung der Bildausschnitte zu setzen. Auf diesem Bild sind allerdings alle Hilfslinien eingezeichnet.

Bilder



 
Wähle ich jetzt die Ebene eines Bildausschnittes und habe in der Werkzeugleiste das Auswahlrechteck-Werkzeug (M) gewählt, dann erscheint der Begrenzungsrahmen zur Veränderung der Größe des Bildes. Falls sich kein Begrenzungsrahmen zeigt, dann muss dieses aktiviert werden mit Klick im Kästchen.

Bilder



Jetzt sehe ich an den Seiten und Ecke des Bildausschnittes den Rahmen. An den Eckpunkten klicke ich und ziehe mit gehaltener linker Maustaste an dem Bild. Jetzt kann ich die Größe des Bildes anpassen. Halte ich dabei noch die Shift-Taste, dann verändere ich das Bild proportional zu allen Seiten. Es kommt also zu keinen Verzerrungen. Nach und nach kann ich an den Hilfsinien entlang meine Bildausschnitte der Größe nach anpassen. Ich achte darauf, dass zwischen allen Bildern ein kleiner weißer  Abstand bestehen bleibt.

 
Wenn ich damit fertig bin, dann wähle ich mit dem Auswahlrechteck-Werkzeug (M) nacheinander in jeweils einer dafür eigenen Ebene die drei fehlenden Flächen aus und fülle diese mit dem Füllwerkzeug (G) mit einem stärkeren Rosaton: F3A0AF.

Bilder



Zur Bearbeitung des Fotos arbeite ich in der anfangs geöffneten Fotodatei, weil diese eine viel größere Auflösung hat. Würde ich das Foto gleich in die Wedding-PSD übernehmen, so wäre das Arbeiten damit unbequem, weil das Foto sehr groß angezeigt wird. Daher müsste ich entweder die Arbeitsfläche über Bild>Arbeitsfläche vergrößern oder die Auflösung des Fotos verkleinern. Zu Beginn einer Arbeit ist das nicht immer sinnvoll, weil ich nicht weiß, inwieweit ich eine große Auflösung eines Bildausschnittes noch benötige. Ich komme jetzt zum nächsten Schritt. Diesen führe ich daher weiter in der Fotodatei aus.


 

3. Freistellen des Fotos und Platzierung im Header

Für den Header nehme ich das gesamte Foto. Allerdings möchte ich das Motiv freistellen, damit nur das Objekt ohne den grauen Hintergrund im Header erscheint. Hierzu füge ich der Foto-Ebene eine Ebenenmaske hinzu. Das geht über das zweite Zeichen von links im Ebenenfenster. Die entsprechende Ebene muss dafür angeklickt sein. Nun wähle ich das Pinsel-Werkzeug (B) mit schwarzer Farbe über den Farbwähler aus der Werkzeugleiste.

Bilder



Die Ebenenmaske muss markiert sein. Nun kann ich mit dem Pinsel-Werkzeug (B) mit schwarzer Farbe die unerwünschten Bildteile ausblenden. Wenn ich damit fertig bin, wähle ich mit rechter Maustaste auf die Ebenenmaske die Funktion Ebenenmaske anwenden. Nun ist das Objekt freigestellt. (Zum genauen Umgang mit Ebenen und Masken u.a. beim Freistellen empfehle ich die beiden Grundlagen-Tutorials Ebenen - Die wichtigste Arbeit in Photoshop und Masken für Ebenen, Sets und Einstellungsebenen).

 
Nun kann ich die Ebene wieder per Drag&Drop in die Arbeitsdatei Wedding-PSD schieben. Danach, weil die Auflösung wieder zu groß ist, skaliere ich das Bild in die gewünschte Größe und  platziere es an die rechte Seite des Headers.

Bilder



 
Des Weiteren werde ich, um das Layout abzurunden, noch einen blauen Balken am oberen Rand des Headers setzen. Hierzu werde ich ich mit Hilfslinien die Fläche abmessen, um danach mit dem Auswahlrechteck-Werkzeug (M) die Fläche auszuwählen und in einer neuen Ebene diese mit dem Füllwerkzeug (G) und der blauen Farbe:3D4760 zu füllen. Die Farbe habe ich mir zuvor mit dem Pipette-Werkzeug (I) aus den fotografischen Elementen gewählt. Hierzu das Pipette-Werkzeug (I) in der Werkzeugleiste wählen und damit auf die fotografischen Elemente im Bild mit linker Maustaste klicken. Das gewünschte Blau wird sogleich für die Vordergrundfarbe eingestellt.

Bilder



Tipp zur Übersichtlichkeit:
Alle Vorlagen, die ich für Arbeiten verwende, belasse ich einmal als unveränderte Ausgangsdatei. Diese lege ich in ein Set, sodass ich im Laufe der Arbeit immer wieder darauf zurückgreifen kann. Das ist für mich sinnvoll, weil manchmal die Ausgangsdatei bearbeitet wurde und sich im Laufe der Bearbeitung gezeigt hat, dass ein andere Bearbeitung vielleicht kreativer wäre etc. So brauche ich die Vorlagen (z. B. Stocks/Illustrationen/etc.) nicht extra wieder zu öffnen und in die Arbeitsdatei zu schieben.

 
Alle grafischen Designelemente, die ich im Bild verwendet habe, werde ich auch in ein Set einfügen. So behalte ich den Überblick über alle Ebenen. Bei umfangreicheren Arbeiten können sich leicht über 50 Ebenen ergeben. Diese sortiere ich thematisch und lege alle in eigene Sets. Bei mir gibt es somit bei dieser Arbeitsdatei folgende: Vorlagenset, Elemente-Set, Mouseover-Set, Texte-Set. Das Mouseover-Set wird später Bedeutung haben, wenn ich zu ImageReady wechsle und den Mouseovereffect beschreibe. Im Folgenden werden wir die Webseite mit Texten versehen.

Bilder



 

4. Textinhalte setzen

Als Nächstes werde ich die Texte setzen für Header, Navigation I und II sowie Footer.

In dem blauen Balken vom Header werde ich mit weißer Schrift mit dem Text-Werkzeug (T) den Namen der Webseite setzen. Wenn ich mit dem Text-Werkzeug (T) ein Textfeld ziehe, erstelle ich automatisch eine neue (Text-)Ebene. Nun passe ich mit folgenden Werten die Schrift dem Balken an.

Bilder



Für den Footer sowie Navigation I und II werde ich ebenfalls die Eurostile-Schriftart nehmen. Für den Header werde ich – passend zum Thema – eine geschwungene Schriftart wählen. Hier nehme ich den Evergreen unter den geschwungenen Schriften: Scriptina.

 
Navigation I ist die Zeile unterhalb des Headers und führt zu den formellen Inhalten: About Me, Contact und Impressum. Die Navigation II sind die rosa Flächen. Diese führen später zu den Themeninhalten: Vor der Hochzeit – Hochzeitstag und Feier – Nach der Hochzeit. Das soll die Schritte der Planung einer Hochzeit verdeutlichen. Hierin werden die Leistungen des Hochzeitsplaners aufgeführt.

Die einzelnen genauen Texteinstellungen bleiben hier unberücksichtigt.

Bilder



 

5. Slicen

Nun ist das Template soweit fertig. Nun muss es nur noch gesliced werden. Das heißt, dass das Design für das Web vorbereitet wird. Alle Flächen und Texte, die linkuntersetzt sein und zu weiteren Contents führen sollen, muss ich slicen.

Hierzu wähle ich das Slice-Werkzeug (K). Mit diesem kann ich wieder entlang der Hilfslinien die einzelnen Bereiche wählen, die später zu weiteren Inhalten führen sollen. Das Slice-Werkzeug (K) kann ich dabei handhaben wie das Auswahlrechteck-Werkzeug (M). Habe ich mich vertan oder ist die Fläche nicht richtig gesetzt, dann kann ich anhand der Eckpunkte wie beim Verschieben-Werkzeug (V) nachbessern. 

Ist die Fläche oder der Text gesliced, dann klicke ich doppelt mit linker Maustaste darauf. Dann kann ich bereits die Ziel-URL angeben. So beispielsweise: index.html, about.html, contact.html.

Es ist wichtig, vorher in der Werkzeugleiste das Sliceauswahl-Werkzeug (K) gewählt zu haben.

Bilder



 

6. Mouseovereffect hinzufügen

Für den Mouseovereffect bei den drei rosafarbenen Flächen wähle ich eine hellblaue Farbe: 91B2DF aus. Nun dupliziere ich die drei blauen rosafarbenen Flächen und verschiebe sie innerhalb des Ebenenfensters in das neue Set: Mouseover. Nun wähle ich die hellblaue Farbe und fülle diese mit dem Füllwerkzeug (G) mit Klick auf die Fläche. Für jede Fläche muss die entsprechende Ebene im Ebenenfenster aktiviert sein. Wichtig ist, dass die hellblauen Flächen oberhalb der rosafarbenen Flächen im Ebenenfenster platziert werden. Wenn ich jetzt mit dem Auge im Ebenenfenster eine hellblaue Ebene ausblende, dann erscheint darunter wieder die rosafarbene Ebene.

Bilder



 
Nun wechsle ich von Photoshop in ImageReady mit dem untersten Symbol in der Werkzeugleiste (Shift+Strg+M) bzw. Datei>Springen zu>ImageReady. ImageReady ermöglicht einige nützliche Möglichkeiten zur Darstellung von Webinhalten.

Ich öffne über Fenster>Web-Inhalt das Fenster, das zur Einfügung des Mouseovereffects notwendig ist. In älteren Versionen von Photoshop heißt das Fenster Rollover.  Ich will nun den Mouseovereffect einstellen, das heißt, wenn ich mit der Maus über („Mouse over“) die Fläche gehe, dass diese sich dann in ihre Farbe von Rosa in hellblau ändert. Wahlweise gibt es auch noch mit Klick eine Änderung, oder „On Mouse down“ und weitere.  Meine Ebenen werden im Ebenenfenster angezeigt. Im Fenster Web-Inhalt sehe ich alle Flächen und Texte, die zuvor von mir gesliced wurden.

Bilder



 
Als Erstes aktiviere ich die geslicte Ebene im Fenster Web-Inhalt, die den ersten Mouseovereffect bekommen soll. Dazu klicke ich auf das Symbol Rollover-Status erstellen im Fenster Web-Inhalt.

Unter dieser Ebene hat sich diese dupliziert. Sie ist noch in der Ursprungsfarbe Rosa. Ich gehe in das Ebenenfenster und klicke auf das Auge der entsprechenden blauen Ebene, also der Fläche, die beim Maus rüberfahren erscheinen soll. Nun ändert sich die unterlegte rosafarbene Fläche in hellblau im Fenster Web-Inhalt. Auch in meinem Template ändert sich jetzt die Farbe in hellblau.

Zur Prüfung, ob der Mouseovereffect funktioniert, wähle ich das IE-Symbol in der Werkzeugleiste. Nun öffnet sich der Internet Explorer und ich kann mit der Maus über die zuvor bearbeitete Fläche fahren. Meine rosafarbene Fläche ändert sich in hellblau. Die Schrift darin bleibt davon unberührt, weil diese Textebenen im Ebenenfenster höher liegen als die anderen Ebenen.

Bilder



 
Die gleichen Schritte wende ich jetzt bei den anderen beiden Flächen an. Wenn ich nun im Web-Inhalt-Fenster auf die unterlegten Flächen klicke, sehe ich im Ebenenfenster, wie die aktivierten Ebenen mit dem Auge eingeblendet werden, während die anderen wieder ausgeblendet werden.

Bilder



 

7. Webseite ins Internet einfügen

Mein Template kann ich nun über Datei>Ausgabe-Einstellungen>HTML speichern für das Web speichern. Auf meiner Festplatte ist nun die Index.html und ein Ordner mit den Bildern.

Bilder



Nun brauche ich nur noch den nötigen Webspace, um meine Webseite auf einem Server zu hosten. Diesen kann ich über verschiedene Anbieter kostengünstig erwerben.

Meine Empfehlung - bitte hier schauen: http://www.psd-tutorials.de/contentid-40.html

 
Wenn ich dies getan habe, dann erhalte ich von dem Hoster einen FTP-Zugang zu meinem Webspace. Auf diesen mir zur Verfügung gestellten Platz kopiere ich die Index.html und den Ordner mit den Bildern. Um via FTP diese zu übertragen, benötige ich ein entsprechendes Programm. Dieses kann ich mit dem Windows Commander realisieren. Ich empfehle aber den Servant Salamander. http://www.altap.cz/

Dieser ist wie ein besserer Explorer und verfügt über zwei nebeneinander gestellte Arbeitsfenster. Dort kann ich bequem mit den Dateien navigieren etc. Mit Servant Salamander>Strg+Shift+F wähle ich das Fenster für den Zugang zum FTP-Server. Dort gebe ich unter Adresse die entsprechende Adresse ein und unter Username und Passwort die Daten, die ich von meinem Webhoster zugewiesen bekommen habe. Im Anschluss kopiere ich den Order Bilder und die Index.html auf meinen Serverplatz.

Bilder



 
Im Anschluss kann ich mir meine Webseite im Internet anschauen unter www.my-weddingplan.de 

Bilder




Weitere Teile


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von CCMan
  • 20.04.2014 - 11:06

Danke für das tolle Tutorial, schöne Ostertage.

Portrait von Dare
  • 14.09.2012 - 14:54

Für einen Anfänger optimal! Vielen dank

Portrait von hcmt
  • 15.09.2011 - 02:09

Ganz toll.
Schlicht und elegant.

Portrait von picaZZo
  • 13.11.2010 - 20:43

Das Tutorial verwenden wir zur Zeit in der Schule. Wirklich eine große Hilfe!

Portrait von sh_72
  • 03.09.2010 - 08:11

gute Anleitung, damit kann man was anfangen

Portrait von regina
  • 01.09.2010 - 06:17

sehr gut erklärt! Das werde ich sofort umsetzen

Portrait von Susan99
  • 02.08.2010 - 15:25

Eine gute Idee und gut erklärt. Vielen Dank!
LG
Susan

Portrait von tiekay
  • 31.07.2010 - 12:21

super anleitung, macht weiter so!

Portrait von ebc104
  • 30.07.2010 - 16:46

super, danke...
kann ich im moment als hilfestellung für meine seite gut gebrauchen.

Portrait von peter86
  • 30.07.2010 - 12:24

great...sehr gute Idee ... danke, schönes Tutorial !

(für Anfänger wäre vielleicht hilfreich eine Photoshop-Datei)

Portrait von regina
  • 29.07.2010 - 06:26

Hab es mir gerade runtergeladen, und kurz angeschaut - sehr gut erklärt, werde das die Tage mal ausprobieren.

Portrait von garth
  • 28.07.2010 - 22:12

eine recht gute Idee, vielen Dank

Portrait von poisonchild
  • 28.07.2010 - 16:55

Ich muss gerade für die Ausbildung eine Site erstellen, kommt also gerade richtig, danke!

Portrait von qwertzuio
  • 28.07.2010 - 12:10

schönes, knackiges tutorial... ich mag die langen tutorials allerdings etwas mehr, sonst aber natürlich wieder gut gemacht!

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 28.07.2010 - 09:58

Muss ich mir unbedingt anschauen da ich meine Seite endlich fertig aufbauen will.

Portrait von NoLimit
  • 26.09.2010 - 13:02

gefällt mir ziemlich gut danke !

Portrait von nukem21
  • 30.12.2009 - 14:03

leicht verständliche und nachvollziehbare Anleitung, danke für das Tut

Portrait von tric1
  • 24.09.2009 - 13:55

ziemlich gut :) danke

Portrait von ZakkWylde76
  • 03.08.2009 - 19:10

Sehr gut erklärt! Danke dafür.

Portrait von Matze400
  • 18.07.2009 - 10:51

super gemacht, sehr gut erklärt, auch für leihen wie mich, Danke

x
×
×