-
PSD-Portfolio-III Webseite - Teil 1: Erstellen des Weblayouts mit Photoshop
04.11.2009 in Webdesign von hellemon
- Zum Downloadmanager hinzufügen
- PDF-Datei herunterladen
- Arbeitsmaterialien herunterladen
- Kommentare ansehen (87)
- Kategorie: Webdesign
- Erstellt mit Programmversion: CS3
- Dateigröße (PDF): 3.6 MB
- Dateigröße (Arbeitsmaterial): 4.4 MB
- Bisherige Zugriffe: 7805
Lieber Gast …
… die Inhalte von PSD-Tutorials.de stehen nur registrierten Mitgliedern zur Verfügung. Damit wollen wir den Communitygedanken weiterführen. Als Mitglied trägst du - wenn auch nur im Kleinen - zum Puls der Community bei. Und nur so ist es möglich, weiterhin hochwertige Inhalte für alle bereitzustellen.
Vorteile der kostenlosen Mitgliedschaft
Mit der kostenlosen und schnell erledigten Registrierung erhältst du viele nachhaltige Vorteile, die wir dir hier in aller Kürze aufzeigen möchten:
- PSD steht für professionelles Know-how in den Bereichen Bildbearbeitung mit Photoshop, Fotografie, Webentwicklung, Layout- und Vektorbearbeitung, 3D-Bearbeitung mit Cinema 4D und Co.
- Über 3.000 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
- Mehr als 1.900 Video-Trainings als Stream zur Direktanzeige und zum Download
- Abruf von über 2.200 Downloads zu Photoshop-Presets, 3D-Modellen, Grußkarten, Texturen & Co
- Zugriff auf ein sehr aktives Forum mit Antworten im Minutentakt
- Deine Daten sind sicher. Sie werden nicht weitergegeben! Die Mitgliedschaft kann jederzeit und ohne Aufwand wieder gelöscht werden.
-
Registriere dich bei uns und du erhältst die Selection-DVD mit über 24 Stunden Video-Trainings zu Photoshop, InDesign uvm. als Download gratis (sofern Newsletter aktiviert).
Reinschnuppern als Gast
Niemand kauft gerne die Katze im Sack, auch wenn sie kostenlos ist. Wir haben eine Handvoll Tutorials und Video-Trainings ausgesucht, die du auch als Gast ohne Registrierung ansehen kannst. Gefallen sie dir, stehen dir nach der Registrierung alle oben genannten Inhalte zur Verfügung.
- Download: Vektor-Logo (Eidechse)
- Download: Sepia-Vintage-Effekt-Aktion
- Download: Screenguide-Magazin als PDF zum Download
- Download: Spiegelungen 2
- Tutorial: Linien zum Glühen bringen
- Tutorial: Ballons aus einer Schublade
- Tutorial: Neue Pinsel erstellen leicht gemacht
- Tutorial: Kommerzielle Fotografie 01: Berufswunsch Fotografie
- Videotraining: Die Programmoberfläche und der Arbeitsbereich von Adobe InDesign
- Videotraining: Lichtscheinkontureneffekt mit Animation
- Videotraining: CorelDRAW X6 Grundlagen - Hilfsmittel Freihand, 2-Punkt-Linie, Bezier, B-Spline, Polylinie, Stift, 3-Punkt-Kurve
- Videotraining: CorelDRAW X6 Grundlagen: Hilfsmittel Form - Heranziehen, Zurückweisen
Photoshop-Workshop-DVD - Webdesign
- Webdesign mit Photoshop: alle erstellten Layouts mit Arbeitsdatei (PSD)!
- Umsetzung erstellter Weblayouts in HTML/CSS
- Tipps & Tricks zum Webdesign in Photoshop und zur Webentwicklung
Kommentare
Weitere KommentareAnleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)
Datei --> Neu --> 1024x768 Pixel

Im nächsten Schritt legen wir rechts eine neue Gruppe an --> Ebene --> Neu --> Gruppe aus Ebenen --> mit den Namen "Hintergrund", danach legen wir drei neue Ebenen an, entweder über Ebene --> Neu --> Ebene oder über den Abrissblock
in der Ebenenpalette mit dem Namen "unterer Balken", "mittlerer Balken" und "obere Balken"Sieht wie folgt aus:

Als Nächstes generieren wir einen waagerechten Balken im oberen Drittel der Arbeitsfläche mit folgendem Farbverlauf (SHIFT + G) --> dunkler Bereich #a3bab4 und heller Bereich #d8eae5. Mit der Taste STRG + D hebt ihr nach dem Füllen die Auswahl wieder auf.

Im zweiten Part generieren wir einen waagerechten Balken im unteren Drittel der Arbeitsfläche mit folgender Füllfarbe #737373. Am besten, wir duplizieren den oberen Balken, verschieben diesen nach ganz unten und füllen ihn im Anschluss mit einem dunklen Grau über Bearbeiten --> Fläche füllen. Natürlich nicht vergessen, die Ebene vorher mit STRG + linker Maustaste zu markieren, damit sich eine Auswahl um den Balken bildet.

Und im dritten Part füllen wir noch den mittleren Bereich mit einer weißen Farbe.

Wenn diese drei Ebenen fertig erstellt wurden, beginnen wir mit der eigentlichen Webseite.
Dazu erstellt ihr wieder eine neue Gruppe über Ebene --> Neu --> Gruppe oder in der Ebenenpalette auf das Ordner Symbol klicken. Ich nenne die Gruppe "Layout".

In dieser neuen Gruppe legen wir eine neue Ebene an: entweder den Abrissblock in der Ebenenpalette klicken oder SHIFT + STRG + N. Name "Layout_BG".
Nun wählt ihr das Werkzeug "Abgerundetes Rechteck Werkzeug" (SHIFT + U) mit einem Radius von 10 Pixel. Nachdem ihr die Fläche aufgezogen habt, klickt ihr in die Fläche und wählt Pfadfläche füllen -- mit weißer Farbe.

Leider wird hier ein unsauberer grauer Rand angezeigt, nachdem die Fläche gefüllt ist. Klickt rechts in der Ebenenpalette mit STRG + linke Maustaste die "Layout_BG"-Ebene an und dann Auswahl --> Auswahl verändern --> Verkleinern --> 2 Pixel.

Danach Auswahl --> Auswahl umkehren und die ENTF Taste.

Mit STRG + D die Auswahl wieder aufheben.
Nun duplizieren wir die Ebene "Layout_BG" und nennen diese "Schatten_Layout_BG".

Wir ziehen diese Ebene unter die Layout_BG, markieren die Schatten_Layout_BG mit STRG + linker Maustaste und gehen über Auswahl --> Auswahl verändern --> Erweitern --> 2 Pixel.
Diese Auswahl füllen wir mit Schwarz, entweder über Fläche Füllen --> Schwarz oder über das Füllwerkzeug.
Nach den Füllen klicken wir auf Filter --> Weichzeichnungsfilter --> Gaußscher Weichzeichner --> 2 Pixel.

Die Deckkraft der Ebene setzen wir auf 50%.

Im nächsten Schritt klicken wir auf die Hintergrund Ebene "mittlerer Balken", duplizieren diese, benennen die kopierte Ebene "Schatten_mittlerer Balken"und ziehen sie unter die Ebene "mittlerer Balken".
Diese Ebene markieren wir wieder mit STRG + linker Maustaste, danach Auswahl --> Auswahl verändern --> Erweitern --> 2 Pixel und füllen diese mit Schwarz. Nach dem Füllen klicken wir wieder auf Filter --> Weichzeichnungsfilter --> Gaußscher Weichzeichner --> 2 Pixel und setzen die Deckkraft der Ebene auf 50%.

Die Ebene "obere Balken" muss ebenfalls noch unter die "Schatten_mittlerer Balken" -

ansonsten funktioniert der Schatteneffekt nicht.
Im nächsten Schritt erstellen wir wieder eine neue Gruppe "Header" und legen eine neue Ebene an.
Danach markieren wir den Header-Bereich und fügen ein Hintergrundbild ein. Das Bild liegt in den Arbeitsdateien dabei.

Dieses Bild öffnen wir in Photoshop und verkleinern es um 50% --> Bild --> Bildgröße.

Danach markieren wir das Bild mit STRG + A oder Auswahl --> Alles auswählen, kopieren das Bild in die Zwischenablage mit STRG + C oder Bearbeiten --> Kopieren,
minimieren oder schließen die Bilddatei und fügen es jetzt in die Auswahl ein mit SHIFT + STRG + V oder über Bearbeiten --> In die Auswahl einfügen.

Über STRG + T oder Bearbeiten --> Frei transformieren passen wir das Bild noch ein wenig an.

Wenn das erledigt ist, klicken wir auf Bild --> Anpassungen --> Gleiche Farbe --> Wählen bei der Quelle die Unbenannt-1 aus und bei Ebene obere Balken.

Die Deckkraft der Ebene setzen wir auf 75%.
Im nächsten Schritt füge ich dem Header-Bereich ein Logo hinzu; dazu nehme ich das Wasserzeichenlogo von PSD-Tutorials. Hierzu verwende ich das erste Mal den Befehl "Als Smart Objekt öffnen". Bitte beachtet, dass diese Funktion nur ab der Version CS2 + funktioniert, alle anderen öffnen das Logo und transformieren es auf die passende Größe.
http://help.adobe.com/de_DE/Photoshop/10.0/help.html?content=WSCCBCA4AB-7821-4986-BC03-4D1045EF2A57.html
http://www.psd-tutorials.de/membertutorial1340-Photoshop-Grundlagen_werkzeuge-verwendung-des-smartobjekt.html
Ich klicke also auf Datei --> Als Smart Objekt öffnen, suche mir das Logo (liegt in den Arbeitsdateien) und öffne es.

Danach verschiebe ich die neu geöffnete Datei in meine Arbeitsfläche, wähle mit der Taste V das "Verschieben-Werkzeug" aus und ziehe die Datei auf meine Arbeitsfläche.

Danach transformiere ich die neue Ebene mit STRG + T auf ungefähr 15% und positioniere das Logo im Header-Bereich - rechts in der Ebenenpalette könnt ihr jetzt sehen, dass diese Ebene ein Smart Objekt enthält. Der Vorteil an dem Smart Objekt ist, dass ihr die externe Datei verlustfrei transformieren könnt - den Rest lest bitte selbst oben in den beiden Links nach.

Danach generiere ich mir eine neue Ebene mit SHIFT + STRG + N oder über den Abrissblock und nenne diese Ebene "Brush".
Danach wähle ich mir das "Pinsel Werkzeug" mit der Taste B und anschließend suche ich mir einen schönen Brush heraus, erstelle mir eine Auswahl, indem ich die STRG-Taste festhalte und auf die Ebenenmaske klicke. Jetzt füge ich den Brush auf der Brush-Ebene hinzu.

Wenn das erledigt ist, fügen wir noch im Header-Bereich ein paar Scanlines hinzu, die wir mit einer Maske auf den unteren Bereich des Headers reduzieren.
Neue Ebene mit SHIFT + STRG + N oder den Abrissblock - Name: "Scanlines".
Danach klickt ihr auf Datei --> Neu und erstellt eine neue Datei mit 3 x 3 Pixel, vergrößert die Datei auf 1600% bzw. 3200 % und macht mit den Buntstift-Werkzeug diese drei Punkte.

Danach speichert ihr diese Datei als Muster ab über Bearbeiten --> Muster festlegen; nun könnt ihr diese Datei schließen.
Jetzt der gleiche Vorgang wie gerade eben, STRG Taste halten und auf die Ebenenmaske klicken, um eine Auswahl um den Header-Bereich zu erstellen. Danach klickt ihr auf Bearbeiten --> Fläche füllen --> unter Verwendung wählt ihr Muster und sucht euer eben erst angelegtes Scanline-Muster heraus.

Nun erstellt ihr euch eine Maske --> Verlaufswerkzeug --> Schwarz auf Durchsichtig --> und nehmt den oberen Bereich der Scanline wieder weg - Deckkraft der Ebene auf 25%.

Und zu guter Letzt kommt die Navigation dran; bei genau dieser möchte ich mich auch nicht allzu lange aufhalten, denn über Web-Navigationen könnte man Bücher schreiben. Die Navigation werde ich später mit CSS einbetten.
Hier ein paar Links, wie ihr in Photohop eine Navigationsleiste erstellen könnt:
http://www.ulf-theis.de/tutorials/photoshop/web-graphics/plastic-navigation
http://psdtuts.com/interface-tutorials/how-to-create-a-stunning-vista-inspired-menu/
http://www.avivadirectory.com/photoshop/vista-style-nav-bar/
http://www.avivadirectory.com/photoshop/professional-dark-web-button/
http://www.webmasterpro.de/design/article/interfacedesign-cleane-silberne-navigation.html
http://www.simplebits.com/bits/bulletproof_slants.html
http://superfluousbanter.org/archives/2004/05/navigation-matrix-reloaded/
In den Arbeitsdateien habe ich einen Navigationsbalken hinzugefügt, den ihr vorübergehend einfügen könnt.

Jetzt beschrifte ich den Navigationsbalken noch, füge noch ein bisschen Text hinzu und fertig wäre das Grundlayout.

Hoffe, es hat euch Spaß gemacht und ihr habt auch wieder ein bisschen dazugelernt.
Gruß hellemon
-
Reklame
-
-
- Fette Kontur in Pfade umwandeln ?
- exportierte Videos sind zu groß
- Earth & Sky Photo Contest
- Bei falschem Login erfolgt weiterleitung
- Hallo :-)
- Droplets werden nicht ordnungsgemäß abgearbeitet
- Keine Internetverbindung nach PC Start
- CSS content bei Link verschwindet (Opera)
- CHM verliert Inhalt bei Verschieben auf andere Festplatte
- Erfahrungen mit der OfG / Online-Schule für Gestaltung
- Kalender mit Import-Funktion
- 15 sec Spot für Website
- mit hover anderes Element steuern
- Kelvin Einstellungen
- Farbunterschiede beim Einfügen
- Farbe der Selbstillumination
- Fehlermeldung beim öffnen von Photoshop
- Beim fertigen Flyer die Schrift ändern - Wie?
- Kalender mit Slider
- Problem mit Textwerkzeug
-
-
Aktuelles Commag
Anzeige
-
Anzeige


SeppelSchulze
17.02.2013 - 21:37
einfach klasse, großen dank
clanfirefox
21.11.2012 - 22:19
Echt Klasse..hat mir super geholfen :)
sinalauren
22.07.2012 - 10:50
Sehr hilfreich, danke
timeless122
28.09.2011 - 22:36
Echt super tut, danke dafür !
roweso
23.09.2011 - 16:01
Das schaffe selbst ich-Ironiemodus..
SEhr anschaulich und strukturiert.
Bin auf weitere Teile gespannt.
OJey
11.07.2011 - 08:48
Kann man nur empfehlen, super gemacht! Lässt sich auch leicht nachmachen!
Suomi74
26.05.2011 - 12:22
Sehr gutes tut, habs ohne prob. nach machen können.
marlo
18.03.2011 - 09:34
Gut gemacht! Anschaulich erklärt.
Superking88
14.03.2011 - 12:42
Sauber weiter so! Hat mir sehr gut gefallen und mich weiter gebracht
ganjaaa
13.03.2011 - 01:20
Top Tutorial ... ist super gemacht und verständlich auch für einen leihen wie mich :3
molle62
22.12.2010 - 20:04
ein sehr gut erklärtes Tut, vielen Dank
Eragon
03.11.2010 - 11:57
Super, vielen Dank für die Ideen :)
SaphiraAmethyst
29.10.2010 - 17:04
Danke, das Tutorial hat mir sehr weiter geholfen.
Lucky_Enno
10.10.2010 - 15:14
Danke, das Tutorial hat mir geholfen
djangohh
22.09.2010 - 19:25
vielen dank - super job
sophie67
06.08.2010 - 16:28
Echt klasse, Vielen Dank.
Spearboy
04.08.2010 - 13:18
Vielen Dank für dieses wunderbare Tutorial!
jr3012
28.07.2010 - 11:11
immer wieder gut anzuschauen....
asad
21.06.2010 - 19:09
SUPER Tutorial^^
Hat mir SEHR geholfen
iphone007
06.06.2010 - 14:07
einfach super, vielen danke