Anzeige
Tutorialbeschreibung

Anfang: (1) HOMEPAGE: Farbwahl und Aufbau

Anfang: (1) HOMEPAGE: Farbwahl und Aufbau

Homepage erstellen (1)



Hier lernt ihr in nur 6 Tagen eine komplette Homepage zu erstellen. Teil 1 behandelt das Thema 'Farbwahl und Aufbau'


(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 2: Beschriftung und Elemente
Schritt 3: Bilder einfügen
Schritt 4: Feinschliff
Schritt 5: Homepage & HTML
Schritt 6: 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…

Bilder

Dann öffnet ein neues Photoshop Dokument mit folgenden Einstellungen:

Bilder
 

 

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:

Bilder

 

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: http://www.colormatch.dk

Bilder

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.

Bilder

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 und ordne ihn so über der ’Logo’ Ebene an, dass ich einen Halbmond erhalte.

Bilder

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.

Bilder

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.

Bilder

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

 

Bilder

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.

Bilder

 

 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:

Bilder

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.


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von EikeNiebuhr
  • 28.10.2014 - 14:36

kurz und knapp, man muss wirklich sich ein bisschen auskennen um dieses tutorial zu meistern.

Portrait von Shambles1994
  • 28.03.2012 - 14:51

Top :) danke
Gute Schritt für Schritt anleitung

Portrait von KretaKater
  • 21.11.2011 - 13:57

Danke erst einmal, ist gut erklärt . . . ABER: das Tutorial ist von 2005 !?!
Wie kommt sowas zustande . . . ich dachte immer, dass nur neue Tutorials "beworben" werden . . .
In den letzten 6 Jahren hat sich ja bei PS einiges getan . . . ich mein ja nur . . .

Portrait von eFoX
  • 22.11.2011 - 00:34

Es gibt auch noch einen Tutorial-Fortsetzung (von 2009 von mir)...alles etwas moderner! Ansonsten: Das war damals, 2005, wenn nicht DAS Tutorial in der deutschen Szene zum Website erstellen :)
Das sich das alles vollkommen gewandelt hat und ich auch anders vorgehe mittlerweile ist klar

Portrait von dplaschg
  • 28.08.2011 - 15:14

Top!
Sehr gut erklärt! Hat mir super weitergeholfen.
greez

Portrait von Lapen
  • 13.07.2011 - 00:42

Super Tutorial hilft mir echt sehr.

Portrait von Tiger235
  • 08.07.2011 - 08:58

super auf sowas habe ich gewartet

Portrait von Stephie83
  • 26.05.2011 - 10:55

Nach solch einer Anleitung habe ich gesucht, sehr gut erklärt und mit guten Photoshopkenntnissen für mich auch unkompliziert umsetzbar. Resultat sieht professionell aus. Danke!

Portrait von Toby046
  • 14.05.2011 - 12:57

Endlich, mal ein eine gute Schritt für Schritt Anleitung. Danke.
Vielleicht hätte man den zweiten oder dritten Teil noch mit einfügen können, aber sonst sehr gut.

Portrait von Ai_relav
  • 05.05.2011 - 21:45

Sehr gut erklärt :) aber ich habe mich gefragt warum du das in photoshop und nicht im ilustrator gemacht hast ?

Portrait von yimmy
  • 18.04.2011 - 20:52

Super Tutorial! Freue mich auf das nächste!

Portrait von Superking88
  • 15.03.2011 - 08:30

Feine Sache, Ich bin schon gespannt auf Teil2

Portrait von Acchan
  • 08.01.2011 - 15:45

Danke dir!
War durchaus hilfreich!

Portrait von wikki11
  • 05.01.2011 - 16:30

Gutes Tutorial! 5Sterne....ist zwar Anspruchsvoll, aber dennoch nachvollziehbar!

Portrait von Aybi13
  • 16.12.2010 - 23:47

Ist genau das was ich lernen will .. ist aber doch noch ne nummer zu hoch für mich

Portrait von greenbeen
  • 01.12.2010 - 21:57

wiiiiirklich ein großes Dankeschön :D endlich kann auch ich als Laie mal ne Webseite (die coool aussieht) erstellen! DANKE!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 15.11.2010 - 22:11

Ein schönes tutorial auch wenn ich das mir den Url informationen noch nicht so ganz verstanden habe. werde mir auf jeden fall noch die anderen angucken

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 15.11.2010 - 20:30

Top Danke kann ich grade gut gebrauchen

Portrait von quester_max
  • 15.11.2010 - 18:08

klasse, hats mich weiter geholfen, weiter so :)

Portrait von Taurenlord
  • 09.11.2010 - 21:16

Super Anleitung, läuft alles super

Von mir bekommst 5 Sterne!!!

TOP

x
×
×