#RSS 2.0 Atom 1.0 Photoshop Tutorials » Minimale Portfoliowebseite aus einem Foto erstellen Kommentar-Feed Glaseffekt für Typo und Layout erstellen Lichtscheineffekt für Backgrounds in Flyern, Websites und Wallpaper Photoshop Tutorials bietet immer aktuelle und interessante Informationen / Tutorials zu Adobe Photoshop. * Kontakt * Impressum * Startseite * Tutorials * Video-Trainings * Downloads * Lern-DVDs * Forum * Suchbegriff...______ Suchen Tutorials Minimale Portfoliowebseite aus einem Foto erstellen Weddingplan 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: [webdesign-sparpaket.gif] 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 Ãhnliche Artikel 1. Sepiaeffekt und Büttenrand in einem Foto erzeugen 2. Zerteiltes Foto erstellen – 3 clevere Varianten 3. Text auf einem Pfad 4. Hintergrund in einem Bild tauschen Unsere Empfehlung für dich: Freistellen mit Photoshop 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 Hinterlasse eine Antwort Hier klicken, um die Antwort abzubrechen. ______________________ Name (erforderlich) ______________________ E-Mail-Adresse (wird nicht veröffentlicht) (erforderlich) ______________________ Website __________________________________________________________ __________________________________________________________ __________________________________________________________ __________________________________________________________ __________________________________________________________ __________________________________________________________ __________________________________________________________ __________________________________________________________ __________________________________________________________ __________________________________________________________ _ Kommentar senden [ ] Benachrichtige mich über nachfolgende Kommentare per E-Mail. [ ] Benachrichtige mich über neue Beiträge per E-Mail. 31.05.2012 Tutorials Matthias Petri How-to-Netzwerk Tag-Navigation Airbrush Aquarell Ausbessern-Werkzeug Basics Bildbearbeitung Bokeh Composing Design Effekte Erodierbare Pinselspitzen Feld-Weichzeichnung Flyer Fotobearbeitung Fotoeffekt Freistellungswerkzeug Glasseffekt Gravureffekt Inhaltsbasiert verschieben-Werkzeug Iris-Weichzeichnung Kontaktabzug Kontaktbögen Konturen Layout Leuchtkonturen Lichtscheineffekt Morphing Neue Funktionen PDF-Präsentation Perspektivisches Freistellungswerkzeug Photoshop CS6 Pinsel Pinselhaltung Pipette Portfolio Portrait Texteffekte Texturen Tilt-Shift Tipps & Tricks Typografie Typografieeffekt Webdesign Webseite weichzeichner Zeicheneffekt Blog via E-Mail abonnieren Gib deine E-Mail-Adresse ein, um dieses Blog zu abonnieren und Benachrichtigungen über neue Artikel per E-Mail zu erhalten. (WordPress.com Service - Datenschutz). SchlieÃe dich 3 anderen Abonnenten an E-Mail-Adresse______ Abonnieren Webdesign Darmstadt Unsere Empfehlung Freistellen mit Photoshop Cover-Freistellen-mit-Photoshop Referenzkarte für Photoshop Referenzkarte für Photoshop Anzeige Anzeige 4-eck-media Commag - Online-Magazin Commag Anzeige Suche Suchbegriff...______ Suchen © 2013 4eck-Media GmbH & Co. KG • Alle Rechte vorbehalten • Kontakt | Impressum Hat dir der Artikel gefallen? Dann teile ihn doch auch mit deinen Freunden: