Anfang: (1) HOMEPAGE: Farbwahl und Aufbau

Transkript

1 2D-Tutorials >> Adobe Photoshop Anfang: (1) HOMEPAGE: Farbwahl und Aufbau Autor: efox Inhalt: Homepage erstellen (1) Hier lernt ihr in nur 6 Tagen eine komplette Homepage zu erstellen. Teil 1 behandelt das Thema 'Farbwahl und Aufbau'

2 (1) HOMEPAGE: Farbwahl und Aufbau Hallo, Willkommen zum Ersten Workshop zum Thema: Homepage Ihr lernt hier professionell eine schöne Homepage in mehreren Schritten zu erstellen. Schritt 1: Farbwahl und Aufbau Weiterhin wird es geben Schritt Schritt Schritt Schritt Schritt 2: 3: 4: 5: 6: Beschriftung und Elemente Bilder einfügen Feinschliff Homepage & HTML Publizieren Solltet ihr bis jetzt noch keine Photoshop Kenntnisse haben und wisst nicht mal was HTML ist, dann rate ich euch davon ab diesen Workshop zu machen. Er wird anspruchsvoll und richtet sich an Fortgeschrittene und Profis. Bitte davor erst HTML Grundkenntnisse erlernen und mit Photoshop umgehen können. Zuerst erstellt ihr einen neuen Ordner Homepage unter Eigene Dateien. Dort kommt alles rein was mit der Page zu tun hat; Bilder, Quellcode, PSD, Text 2

3 Dann öffnet ein neues Photoshop Dokument mit folgenden Einstellungen: Ich habe mir jetzt gedacht der Page einen schlichten Look zu verpassen, der aber trotzdem modern aussieht und klar strukturiert ist. Sollte vom Aufbau so aussehen: 3

4 An den roten Linien kann man später die Page in Frames unterteilen, ich werde jedoch ein gesondertes Tutorial dazu verfassen. Sieht natürlich etwas statisch aus aber das wird sich alles noch ändern, ihr werdet überrascht sein. Jetzt brauchen wir noch ein paar Farben, welche den gut zusammen harmonieren und welche der Page einen richtig guten Look verpassen. Dazu kann ich diese Seite empfehlen: 4

5 So sieht meine Auswahl jetzt aus. Ich werde mich nicht 100% daran orientieren, aber eine gute Hilfestellung kann diese Farbwahl durchaus geben. Natürlich könnt ich auch andere Farben wählen, versucht es einfach mal. Jetzt geht es munter los nachdem ihr das alles ausgewählt habt, erstelle ich mir zuerst einen Balken (siehe Bild: Aufbau), der dann mit einem Verlauf gefüllt wird. 5

6 Also eine neue Ebene erstellen, diese Trennung nennen und am besten Orange hervorheben (Ebeneneigenschaften). Orange wird jetzt alles, das mit dem Körper der Page zu tun hat. Dieser Balken trennt zur Abtrennung zwischen Header und Content. Sollte dieser Schritt unklar sein, Abschlussbild anschauen :) Und weil ich grad so lustig bin, können wir schon mal jetzt anfangen ein kleines Logo zu gestalten, ihr könnt auch meins übernehmen. Ich mache mir eine Neue Ebene Logo (Blau) und erstelle mir einen Kreis (SHIFT gedrückt halten). Dann erstelle ich mir noch eine neue Ebene, ziehe einen kleinen Kreis auf 6

7 und ordne ihn so über der Logo Ebene an, dass ich einen Halbmond erhalte. Dann zurück in die Logo Ebene wechseln, kurz auf ENTF drücken und ihr habt einen Halbmond, die kleinere Kreis Ebene könnt ihr jetzt löschen. Dann nehme ich das Auswahllasso, wähle die Spitze des Halbmondes aus, dupliziere diese und ordne sie zweimal nebeneinander an. Außerdem erstelle ich mir noch ein paar kleine Rechtecke und ordne sie oberhalb des Mondes an, gegebenenfalls noch etwas weichzeichnen lassen und schließlich auf eine Ebene, der Logo Ebene zusammenkopieren. 7

8 Jetzt sollten wir den Bereich für die News formen. Dazu neue Ebene erstellen, Auswahlrechteck auspacken und ein Stück (rechts) auswählen, dass dann mit einem Verlauf ins Weiße befüllt wird. Am besten geht das wenn ihr euch ein paar Hilfslinien vom Lineal wegzieht und dann die jeweiligen Stücke mit dem Auswahlrechteck markiert. Dann nur noch befüllen. Die Stückelung ergibt erst nachher für euch einen Sinn, also noch nicht wundern. Jetzt mit dem Zauberstab nur das unterste Rechteck markieren, diese Ebene duplizieren, die neue Ebene News Verlauf nennen und das 8

9 Rechteck der original Ebene mit einem kurzen ENTF löschen. Dann mit der Ebene News Verlauf zu den Fülloptionen wechseln und so befüllen: Ich habe optional noch eine Linie auf einer gesonderten Ebene (Verlauflinie) gezogen (Buntstift, 1px, schwarz) und diese unten etwas anradiert und danach Bewegungsunschärfe nach unten angewandt, so kommt eine bessere Abgrenzung zustande. Die oberen zwei Rechtecke habe ich auch schon passend gefüllt (siehe Farbtabelle). Damit jeder auch weis auf was für einer Seite er sich befindet, muss natürlich jetzt noch eine URL passend dazu. Neue Ebene erstellen, Auswahlrechteck und zu 1/2 aufziehen, ich füll das Stück jetzt mit der gleichen Farbe wie die oberen zwei Rechtecke. 9

10 Ich habe diese Ebene URL Anzeige genannt und darauf den Bewegungsunschärfefilter angewendet (horizontal, 700). Die Ebenendeckkraft jetzt auf 80% herabsetzen und über den Ebenen ganz oben anordnen. Sollte das alles zu unklar gewesen sein, dann betrachtet bitte dieses Bild: Das war: Workshop Teil 1. Teil II: Beschriftung und Elemente efox Alle Bilder und Grafiken die in diesem Tutorial verwendet werden sind geschützt und stehen somit unter dem Copyright des Autors. Die Verwendung von jeglichem Material in diesem Tutorial ist nur mit Erlaubnis des Autors gestattet. 10

11 Besuche jetzt unseren Shop Nachschub für kreative Köpfe Foto-Design Grafik-Design Web-Design 3D-/Motion-Design Finde dein passendes Training auf