Anzeige
Tutorialbeschreibung

Website im kinderfreundlichen Look & Feel - Teil 1: Layouterstellung

Website im kinderfreundlichen Look & Feel - Teil 1: Layouterstellung

In diesem Video-Training geht es darum, ein Webseitenlayout für eine Hebamme zu erstellen. Hierbei wird gezeigt, wie man an entsprechende Bilder kommt und wo im Internet man passende kostenlose Schriftarten findet.

Das Design wurde so konzipiert, dass mit Klick auf die Menüpunkte kein Neuladen der Seite erfolgt. Dank der eingesetzten Ajax-Technik ist das Navigieren als Reiter-Lösung möglich. Das gibt neben dem schönen kinderfreundlichen Layout auch ein besonderes Feeling beim Surfen auf der Website. Wie diese Reiter-Lösung umgesetzt wird, zeigt Teil 2.

Als Arbeitsdatei habe ich die komplette PSD-Datei mit allen Ebenen usw. beigepackt.

... übrigens findest du die komplette Serie hier: Photoshop-Workshop-DVD - Webdesign Vol. 2 - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Schritt 1:

Ich erstelle ein neues Dokument in 1600 x 1600 Pixel.

Bilder



 

Schritt 2:

Damit ich jetzt weiß, wo der Hauptinhalt in einer Größe von 980 Pixel erstellt werden muss, gibt es folgenden Trick: Ich lege zunächst eine Hilfslinie genau in der Mitte an (rastet automatisch in der Mitte ein). Jetzt erstelle ich eine Auswahl mit Fester Größe und klicke mit gedrückter Alt-Taste genau auf die Hilfslinie. Jetzt wird meine Auswahl genau von diesem Punkt aus mittig erstellt. Allerdings habe ich anfangs noch darauf verzichtet, weil ich es nach paar Monaten Tutorial-Pause doch glatt vergessen habe. Macht aber nix, weil ich immer darauf achte, alles möglichst als Vektorflächen/Smart-Objekte anzulegen, die ich ja verlustfrei skalieren kann, so oft ich möchte.

Ich gehe jetzt auf Fotolia.com und suche mir entsprechende Bilder für das Design aus.

Bilder



 

Schritt 3:

Ich fange jetzt mit dem Header an. Dazu lege ich mir eine neue Gruppe an und erstelle eine Vektorform mit abgerundeten Ecken. Nichts einfacher als das: Dazu nehme ich das Abgerundete-Rechteck-Werkzeug mit einem Rundheits-Radius von 10px. Farbe ist Weiß. Außerdem füge ich noch einen leichten Schlagschatten ein.

Bilder



 

Schritt 4:

Als Logo habe ich mir bei Fotolia eine Vektorform ausgesucht, die eine Mama enthält, die ihr Baby nach oben hebt. Die anderen Logos kann ich schnell mit Adobe Illustrator entfernen und auch die Farbe schnell anpassen. Wer kein Illustrator hat, kann auch die JPG-Datei bei Fotolia ziehen und diese dann bearbeiten.

Bilder



 

Schritt 5:

Jetzt benötige ich noch eine schöne Schreibschrift, die ich auf www.dafont.com kostenlos downloade.

Bilder



 

Schritt 6:

Die weiße Fläche stelle ich noch in der Deckkraft auf 85% um, damit diese dann später bei meiner eingefügten Hintergrundtextur leicht durchschimmert. In rosa habe ich einen Text in der Schriftart Georgia eingefügt.

Bilder



 

Schritt 7:

Als Nächstes füge ich eine neue Gruppe mit dem Namen "Content" hinzu. Darin füge ich wieder eine neue Fläche mit dem Abgerundeten-Rechteck-Werkzeug mit dem gleichen Grün, das oben das Baby schon hat, ein. Auch diese kann ruhig einen Schlagschatten erhalten. Danach wähle ich das Rechteck-Werkzeug.

Bilder



 

Schritt 8:

Mit diesem Werkzeug kann ich in der Mitte des Content-Bereichs meine Fläche erstellen, wo später der Text eingefügt wird. Als Nächstes erstelle ich noch schnell eine Hilfslinie, wonach sich alles links ausrichten soll.

Bilder



 

Schritt 9:

Jetzt wird es leicht freaky: Ich möchte oben einen Button erstellen, der aber nicht vom Schlagschatten überdeckt wird. Darum lege ich wieder eine neue Gruppe an, ziehe diese über die Content-Gruppe und füge dort eine Maske hinzu. Jetzt maskiere ich nur den unteren Teil aus, und schon ist mein Button, den ich mit dem Abgerundeten-Rechteck-Werkzeug erstellt habe, perfekt, ohne dass er vom Schlagschatten überdeckt wird.

Bilder



 

Schritt 10:

Jetzt schreibe ich mit großen Buchstaben das Wort "Startseite" und setze einen Schnuller ein, den ich bei Fotolia mit noch ein paar Baby-Icons heruntergeladen hatte. Den Schnuller füge ich in weißer Farbe ein (geht sehr schnell über Farbüberlagerung als Fülloption, falls der Schnuller eine andere Farbe haben sollte).

Bilder



 

Schritt 11:

Als Nächstes folgen die inaktiven Buttons. Dazu lege ich wieder eine neue Gruppe an und schiebe diese unter die Content-Gruppe. Die Farbe kann ruhig auch mal eine andere sein.

Bilder



 

Schritt 12:

Zwei weitere Buttons folgen:

Bilder



 

Schritt 13:

Dann setze ich das Baby ein. Weil der Hintergrund nicht ganz weiß ist, stelle ich das Bild schnell frei. Dazu wähle ich das Baby mit dem Schnellauswahl-Werkzeug aus und kann dann mit dem Radius-verbessern-Werkzeug die Haare grob markieren. Schon stellt Photoshop für mich das Bild sehr gut frei.

Bilder



 

Schritt 14:

Damit das Baby perfekt reinpasst, kann ich entweder eine Schnittmaske nehmen oder aber ich wähle einfach die weiße Fläche aus und erstelle auf dieser Grundlage eine Maske in meinem Babyfoto.

Bilder



 

Schritt 15:

Jetzt füge ich Text in der Content-Box ein. "Herzlich willkommen" bekommt dabei die gleiche Schriftart wie "Maxi Musterfrau" ganz oben und der Rest die Georgia. Leider ist mir jetzt erst aufgefallen, dass das Layout nicht optimal für kleinere Auflösung passt. Darum schnell eine Auswahl mit 980 Pixel aufgezogen und daraufhin eine Hilfslinie erstellt. Jetzt weiß ich, wie breit mein Layout maximal sein sollte. Gut, dass ich überall nur Smart-Objekte/Vektorformen verwendet habe. So kann ich alles schnell mit gedrückter Shift-Taste im Ebenenbedienfeld markieren und kleiner skalieren.

Bilder



 

Schritt 16:

Als Schriftart für die Unterschrift habe ich Honey I Stole Your Jumper gewählt, die ich auch von www.dafont.com heruntergeladen habe.

Bilder



 

Schritt 17:

Ganz unten habe ich mit weißer Farbe noch die Adresse + den Link zum Impressum/der Datenschutzerklärung eingefügt. Damit man ihn besser lesen kann, gab ich dem Text noch einen Schlagschatten.

Bilder



 

Schritt 18:

Danach habe ich noch eine schöne Babytextur bei fotolia.de heruntergeladen und als Muster gespeichert (sie ist zum Glück nahtlos kachelbar gewesen).

Bilder



 

Schritt 19:

Jetzt habe ich eine weiße Ebene über der Hintergrundebene angelegt und darauf als Fülloption eine Musterüberlagerung mit meiner neuen Babytextur eingefügt. Wichtig dabei: Ich muss diese kleiner skalieren.

Bilder



 

Schritt 20:

Und so sieht jetzt das fertige Layout aus (ist jetzt kein 1:1-Zoom, darum leicht unscharf):

Bilder



Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 21.10.2016 - 14:40

Danke schön.

Portrait von dorftrottel95
  • 26.05.2013 - 18:37

Sehr ansprechendes Layout! Freue mich jetzt auf Teil 2 :)

Portrait von vanessaherba
  • 04.08.2012 - 01:25

Sehr gut und Hilfreich, Danke

Portrait von lagudal
  • 12.07.2012 - 11:25

Sehr gut, vielen Dank, und bitte noch mehr so änliche Tutorials!

Portrait von Susan99
  • 26.08.2011 - 20:03

Ein sehr schönes Tutorial, vielen Dank!

LG Susan

Portrait von Poseidon1987
  • 20.08.2011 - 15:32

huhu,
auch mir hat das tutorial gefallen =) Die Freistellen funktion bei dem Baby kannte ich noch nicht, muss ich auch mal ausprobieren =)
Bin schon sehr auf den 2. Teil mit der Umsetzung gespannt, allerdings wird das bei mir noch etwas dauern bis ich die 300 Punkte dafür zusammen bekomme =(.. Aber für den "Preis" kannst du ja nichts ^^
super tutorial =)

Portrait von J000S
  • 15.08.2011 - 22:44

Sieht schon super aus! Freue mich auch auf Teil 2 :)

Portrait von RaySpoint
  • 13.08.2011 - 10:26

Hey Stefan,
Danke für diese schöne Idee - ist mal etwas anderes - auch den Hinweis auf fotolia.de fand ich hilfreich.
Jetzt freue ich mich aber besonders auf den zweiten Teil!

Portrait von Matthias
  • 12.08.2011 - 09:27

Der Coding-Teil zu diesem Tutorial ist jetzt auch online: http://www.psd-tutorials.de/video-trainings/web/webentwicklung-und-webadministration/-/view/17400--website-im-kinderfreundlichen-look-feel-teil-2-coding

Portrait von Niobe
  • 22.07.2011 - 09:26

Sehr gut und anschaulich erklärt. Punkt 9 erscheint wirklich freaky - für mich. Nur, wenn das Layout fertig ist, wie mache ich weiter?

Portrait von waltherdruck
  • 19.07.2011 - 14:13

Danke für die tolle Erklärung.

Portrait von racingfee
  • 19.07.2011 - 12:20

sehr schön erklärt, danke schön

Portrait von scarred13
  • 19.07.2011 - 11:15

Schöne Idee, danke dafür!

Portrait von macher
  • 18.07.2011 - 18:21

Zitat: "Als Arbeitsdatei habe ich die komplette PSD-Datei mit allen Ebenen usw. beigefügt."

Aber wo finde ich die Datei?

Portrait von palaiochora
  • 19.07.2011 - 09:27

Zitat: "Als Arbeitsdatei habe ich die komplette PSD-Datei mit allen Ebenen usw. beigefügt. Aber wo finde ich die Datei? "

Hallo, danke für das wirklich schöne Tutorial - aber die Arbeitsdatei finde ich auch nicht...

Portrait von Stefan
  • 19.07.2011 - 09:40

Ok habe ich jetzt hochgeladen.

Portrait von julia_3
  • 18.07.2011 - 14:53

Super schön danke viel mal...

x
×
×