Anzeige
Tutorialbeschreibung

Web: Schlichtes Webdesign Tutorial

Web: Schlichtes Webdesign Tutorial

Schnell und einfach zum "guten" Webdesign... Hier erkläre ich euch Schritt für Schritt wie ihr mit ein paar Grundkenntnissen euch ein Design erstellen könnt.


Grundaufbau
Schritt 1

Wir öffnen ein neues Dokument mit der Breite: 1002 px und der Höhe: 600 px. Bei einer Auflösung von 72 Px/Zoll. Der Modus ist RGB-Farbe und als Hintergrund Transparent.


Schritt 2

Nun füllen wir die Ebene mit dem Füllwerkzeug(Shift+G) mit der Farbe #002234.
Anschließend nehmen wir das Auswahlrechteck(Shift+M)und stellen bei Art:Feste Größe ein.
Als Breite geben wir 800px an, die Höhe beträgt 600px.
Jetzt drücken wir in das Dokument und zentrieren das Auswahlrechteck.


Schritt 3

Nun erstellen wir eine neue Ebene(Shift+Strg+N) und füllen dann das aktivierte Auswahlrechteck von Schritt 2 mit dem Füllwerkzeug mit der Farbe #FFFFFF.

Nun heben wir das Auswahlrechteck auf(Strg+D).


Schritt 4

Nun drücken wir die Rechte Maustaste auf die neu erstellte Ebene und wählen die Fülloptionen.
Dort nehmen wir folgende Einstellungen vor:

Bilder

Bilder


Zum Schluss nennen wir die Ebene noch in „Hintergrund Content“ um, damit wir nicht durcheinander kommen wenn das Design fertig ist.



Header
Nun beginnen wir mit dem Header. Hier gehe ich auch auf den Wunsch vom User Rusty ein, welcher gerne wissen wollte, wie das mit der Rundung funktioniert welche wir bei uns im Header benutzen.


Schritt 1

Wir erstellen ein neues Set(Ebene – Neu – Ebenenset…) und nennen es „Header“.
In diesem Set erstellen wir eine neue Ebene und nennen diese „Verlauf“.
Nun nehmen wir das Auswahlrechteck – Art: Feste Größe, Breite:800px, Höhe:100px – und klicken oben nach dem linken Rahmen in das Dokument und füllen das Dokument mit einer beliebigen Farbe.

Bilder



Schritt 2

Nun heben wir die Auswahl auf und gehen in die Fülloptionen, welche wir wiederrum über die Rechte Maustaste auf die Ebene „Verlauf“ erhalten.

Bilder


Danach erstelen wir wieder eine neue Ebene und nennen diese „Rahmen Header unten“.
Anschließend nehmen wir das Buntstift-Werkzeug(Shift+B). Die Stärke beträgt 3 px(Quadratische Spitzen!). Als Farbe für den Rahmen nehmen wir die Rahmen Farbe vom Content Rahmen(#6B6969).

Danach ziehen wir einfach einen horizontalen Strich genau unter dem Header entlang.


Schritt 3

Nun folgt der Titel. Dafür habe ich die Font „Denmark“ genutzt, da sie mir am besten gefällt und eigentlich überall passt.

Downloaden könnt ihr die Font hier: http://www.searchfreefonts.com/search/?q=denmark
Als Schriftgröße habe ich 40pt genommen und die Schrifteinstellung ist „Abgerundet“.
Natürlich dürfen die Fülloptionen nicht fehlen um den Titel den letzten Schliff zu geben.

Bilder

Bilder

Bilder

Bilder



Schritt 4

Nun kommen wir zu dem Teil, welchen ich auf Wunsch eines Webstone Mitgliedes hier mit einbinde.
Die Rundung welche hier auch bei uns oben im Header zu sehen ist.

Als erstes blenden wir das Lineal(Strg+R) und das Raster ein.
Danach nehmen wir das das Zeichenstift-Werkzeug(Shift+P) und zeichnen ein Viereck welches auf einer Seite Spitz zuläuft.
Bilder


Nun nehmen wir das Punkt-Umwandeln-Werkzeug(siehe Werkzeuglisten Tutorial).
Jetzt klicken wir an die obere Rechte ecke und ziehen den Punkt solange bis ein Huckel entsteht.
Bilder

Nun machen wir das an der Spitze genauso aber genau andersherum.

Bilder


Nun rastern wir die Ebene. Heben das Raster und das Lineal auf und drehen die Ebene Vertikal.
Als nächstes verkleinern(Strg+T) wir die Ebene etwas in der Höhe von 100% auf 65%(sofern es nötig ist. Müsst ihr schauen wie es bei euch aussieht.)

Nun nehmen wir das Buntstift-Werkzeug und malen den Abstand bis zum resten Rand noch nach.
Danach ziehen wir die Ebene 4-6px nach unten und ziehen dann über der Rundung einen 4-6px breiten streifen von links nach rechts.

Anschließend duplizieren wir die Ebene und schieben diese 3px nach unten und 10px nach links und setzen die duplizierte Ebene unter die originale.

Nun zu den Fülloptionen
Obere Ebene
Bilder

Bilder


Untere Ebene
Bilder



Bilder


Bilder



Footer
Bevor wir mit dem Content und die Navigation beginnen basteln wir zuerst den Footer.
Dies wird nicht lange dauern da sich die meisten leute diesen ehh nie anschauen


Schritt 1

Wir duplizieren die untere Rundungsebene(die dunkle) und spiegeln die Ebene vertikal.
Anschließend ziehen wir die Ebene an das Ende des Dokumentes und spiegeln die Ebene horizontal.

Nun zeichnen wir den Platz der noch weiß ist in der Ebene nach.
Aber nur bis zu den anfängen der Ränder!

Nun benutzen wir folgende Fülloptionen:

Bilder

Bilder


Nun transformieren wir die Höhe von 10% auf 80%.
Bilder


Bilder



Navigation
Die Navigation… mit der wichtigste Bestandteil eines Designs bzw. einer Webseite.
Unsere Navigation schlicht aber dennoch seriös. Wir haben eine Kategorie Aufteilung, nicht weil es schön aussieht sondern um eine Übersicht zu haben und dem User die Suche zu erleichtern.


Schritt 1

Wir nehmen das Buntstift-Werkzeug und zeichnen ca. 150px vom linken Rahmen eine 3px starke senkrechte Linie nach unten. Als Farbe nehmen wir # 6B6969.

Bilder



Schritt 2

Wir wiederholen als erstes aus dem Abschnitt „Header“ den „Schritt 4“ bis zum Nachzeichnen der leeren Fläche.

Wenn ihr dies getan habt, Transformieren wir die Ebene in der Höhe von 100% auf 70%.
Danach ziehen wir die Ebene nach rechts oben an den Navigationsrand.

Jetzt duplizieren wir die Ebene und fügen folgende Fülloptionen hinzu:

Bilder


Anschließend schieben wir die Ebene 4px nach rechts und löschen alles was über steht.
Nun erstellen wir eine neue Ebene untere Rundungsebenen der Navigation und füllen das weiße mit dem Buntstift-Werkzeug und der Farbe. Als letztes ziehen wir noch eine 1px starke Linie mit der Farbe „# 737171“ unten an die Hellgraue Ebene.

Bilder


Bilder


Wenn ihr mehrere Kategorien haben wollt, braucht ihr nur noch das Set zu duplizieren und einen 1px starken Strich oben an den Kategorie Hintergrund machen. Aber denkt daran die Ebene „senkrechte Linie“ aus den duplizierten Sets herraus zu löschen, da ihr sonst einen durchgehenden Strich nach unten habt…

Bilder



Content
Last but not least…der Content.
Der Content sollte nicht zu viele Grafiken haben, da diese vom eigentlichen text ablenken können.
Aber ohne Grafiken geht es einfach nicht


Schritt 1

Wir duplizieren als erstes eines unserer Navigationssets und nennen es Content.
Anschließend setzen es ca. 5px unter den unteren Header Rahmen. Danach gehen wir in die Obere Rundungsebene und zeichnen diese bis zum rechten Rand nach. Dies haben wir auch mit dem Rahmen der Hintergrundebene.


Schritt 2

Nun nehmen wir die Auswahlelipse(Strg+M) und ziehen in einer neuen Ebene eine kleine Elipse.

Bilder


Diese Elipse füllen wir mit der Farbe der unteren Rundungsebene. Und setzen anschließend folgende Fülloption:

Bilder


Danach ziehen wir die Ebene nach links.

Schritt 3

Jetzt erstellen wir eine neue Ebene und ziehen in diese mit dem Buntstift-Werkzeug den leeren Raum zwischen der linken Rundung und dem Hintergrund.

Danach ziehen wir mit dem Auswahlviereck ein Viereck welches in der breite von der Linken Rundung bis zum Rechten Rand reicht. Die Höhe kann Variabel sein.
Wenn ihr das Viereck gezogen habt geht ihr auf „Bearbeiten – Kontur Füllen“

Als Breite gebt ihr 1px an, die Farbe ist # 6B6969, und die Position ist mittig.
Bilder


----------
Kleiner Tipp noch… füllt die Boxen mit einen sehr hellen Grau aus. Dadurch heben diese sich besser vom Content Hintergrund.


Bilder


Ich hoffe das Tutorial konnte euch helfen...

Gruss
Marcus
http://www.webstone.info

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Dice77
  • 11.01.2013 - 22:42

Hat mir nicht weitergeholfen aber danke

Portrait von Jricewind
  • 16.04.2011 - 19:10

Hey es ist ein Super Tutorial aber ich komme bei Schritt 4 einfach nicht weiter wie ich diese rundung erstelle
habe es ja so gemacht wie es da steht aber wie fülle ich die mit dem Zeichenstift-Werkzeug gezeichnete Lienien? so das es auch wirklich diese rundung hat mit dem Stift geht es nicht achja ich benutze PS CS5 Exented

Portrait von besercer
  • 23.01.2011 - 00:28

Danke, hat mir in vielen Bereichen geholfen!

Portrait von nosiene
  • 15.10.2010 - 11:07

Vielen Dank für das Tutorial! Sehr hilfreich.

Portrait von datams
  • 12.08.2010 - 00:57

Einfacher und gut erklärte Einstieg ins Webdesign. Danke!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 16.06.2010 - 16:20

Einfach gemacht, super erklärt, sehr wirkungsvoll. Vielen Dank!

Portrait von verenita82
  • 14.06.2010 - 18:32

Schönes Tutorial..dankeschön!

Portrait von volkerr
  • 04.06.2010 - 08:19

Danke ! Einfach erklärt ! Einfach gemacht ! aber große Wirkung!

Portrait von Schlchter11
  • 10.05.2010 - 17:19

Sehr schön ;) Den Tipp nutze ich gleich für meine Homepage

Portrait von CrazyAndre33
  • 12.02.2010 - 04:51

vielen Dank sehr nützlich

Portrait von bergerdi
  • 15.01.2010 - 17:02

Vielen Dank, hat mir sehr weiter geholfen :-)

Portrait von Maki92
  • 11.01.2010 - 22:10

Ich finde man versteht es wirklich gut! Danke für die Mühe.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 23.11.2009 - 01:05

nice job. thanks ;) bin noch totaler anfänger und fühle mich bereichert.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 05.11.2009 - 17:57

Das Tutorial ist okay...
Hätte mir öfters ein Screenshot gewünscht.

Schritt 4 TOTAL unverständlich. Wo soll man bitte das hin zeichnen? Wie haste den Hintergrund so schwarz gemacht?

Schritt 4 ist sehr schlecht zu verstehen und das nicht nur bei mir, wie ich bei den anderen Kommentaren sehen kann.
Würde mich über deine Hilfe freuen bei diesem Punkt.

Sonst sind die anderen Punkte auch nicht so gut beschrieben.
Z.B.: "Jetzt drücken wir in das Dokument und zentrieren das Auswahlrechteck." Für einen Anfänger wie mich ist es nun ein Problem wie man das wirklich genau zentriert bekommt!

Jeden Schritt den ich weiter komme, muss ich wieder nachgooglen, weil ich nicht verstehe wie du etwas machst.

MFG Cookie

MFG Cookie007

Portrait von smegster
  • 05.11.2009 - 14:55

Sehr gelunges Tutorial! Danke schön. hat mir gut weitergeholfen und habe es mit anderen Farben ausprobiert.

Portrait von smokingjoe
  • 24.10.2009 - 22:13

sehr gute tutorial, nur den punkt mit der rundung habe ich nicht ganz verstanden. welche größe sollte das rechteck haben?

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 21.10.2009 - 21:30

Danke, hat mir in vielen Bereichen geholfen!

Portrait von fuchs50
  • 25.08.2009 - 12:30

Würde es gerne nachvollziehen aber bei Schritt 4 im Header komm ich nicht weiter. Bin wahrscheinlich zu blöd dazu da ich noch Anfänger bin. Kann mir jemand helfen? Das Tutorial ist super.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 25.08.2009 - 23:25

Hi,
was verstehst du denn nicht?

Portrait von confuzius2001
x
×
×