Anzeige
Tutorialbeschreibung

Die luftige Website im medizinischen Bereich

Die luftige Website im medizinischen Bereich

In diesem Video-Training wird gezeigt, wie ein Weblayout für eine Zahnarzt-Praxis erstellt wird. Dabei gibt es viele Tipps & Tricks zum Umgang mit Formen und Masken.

Zielsetzung dieses Designs ist ein offener, freundlicher Look für eine Zahnarztpraxis. Die Grundstimmung des Praxis-Designs ist - im Gegensatz zu den eher bekannten "sterilen" Designs im medizinischen Bereich - warm und einnehmend.

... ü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 1280 x 1600 Pixel. Die Auflösung ist dabei egal (ist nur relevant für Dokumente, die gedruckt werden sollen).

Bilder



 

Schritt 2:

Jetzt wird es Zeit, im Ebenenbedienfeld zwei Gruppen zu erstellen.

Bilder



 

Schritt 3:

Damit ich 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.

Bilder



 

Schritt 4:

Als Nächstes erstelle ich mithilfe des Abgerundeten Rechteck-Werkzeugs eine Form mit einem Rundheitsradius von 15 Pixel, wodurch eine Navigation entsteht mit einer Verlaufsüberlagerung von Schwarz zu Weiß. Der Effekt erhält eine Deckkraft von 15 %. Den Verlauf kann ich natürlich auch von Schwarz zu Dunkelgrau einstellen.

Bilder



 

Schritt 5:

Damit ein wenig Farbe ins Spiel kommt, ziehe ich ganz oben wieder eine Form auf, nur diesmal nicht abgerundet, sondern rechteckig mit einem leicht grünen Verlauf.

Bilder



 

Schritt 6:

Jetzt kommt der Name der Webseite unter die Navigation. Als Schriftart nehme ich die Futura. Danach färbe ich den Hintergrund noch in ein leichtes Grau/Beige.

Bilder



 

Schritt 7:

Als Nächstes suche ich mir bei z. B. Fotolia ein schönes Logo für mein Layout.

Bilder



 

Schritt 8:

Jetzt markiere ich mit dem Auswahlellipse-Werkzeug das Logo und schneide es aus.

Bilder



 

Schritt 9:

Ich füge es in ein neues Dokument ein und entferne mit dem Zauberstab noch den Innenbereich des Zahns.

Bilder



 

Schritt 10:

Danach füge ich das Logo in mein Layout ein und wandle es in ein Smart-Objekt um, damit ich es ständig kleiner & größer skalieren kann, ohne Angst haben zu müssen, dass dabei die Qualität leidet. Mit einer Einstellungsebene Farbton/Sättigung färbe ich mein Logo grün um und wandele die Ebene danach mit gedrückter Alt-Taste zwischen beiden Ebenen im Ebenenbedienfeld in eine Schnittmaske um, damit nicht mein gesamtes Layout grün wird.

Bilder



 

Schritt 11:

Jetzt füge ich eine neue Gruppe namens "Bildereyecatcher" ein, und da hinein kommt eine fast eiförmige Form mit den Fülloptionen Schlagschatten und Abgeflachte Kante.

Bilder



 

Schritt 12:

Jetzt platziere ich drei Fotos, die ich jeweils mit einer kreisförmigen Auswahl maskiere.

Bilder



 

Schritt 13:

Eine 10 Pixel dicke, weiße Kontur und einen Schlagschatten füge ich dem Bild hinzu.

Bilder



 

Schritt 14:

Ich kopiere das Smart-Objekt zweimal (mit der rechten Maustaste) und ändere im Smart-Objekt einfach nur das Bild.

Bilder



 

Schritt 15:

Als Nächstes lege ich eine neue Gruppe mit dem Namen "Inhalt" an und füge dort eine Überschrift ein.

Bilder



 

Schritt 16:

Der eigentliche Text ist bei mir in der Schriftart Verdana. Unten setze ich noch ein Bild mit Bildunterschrift ein.

Bilder



 

Schritt 17:

Jetzt geht's zur rechten Seite. Darin lege ich erst einmal im Ebenenbedienfeld eine Gruppe mit dem Namen "Aktuelles" an und füge dort eine Überschrift + Text mit den News ein.

Bilder



 

Schritt 18:

Mit dem Abgerundeten-Rechteck-Werkzeug ziehe ich eine Form auf, die ich unter die News lege und der ich eine Fülloption Schein nach außen mit folgenden Einstellungen hinzufüge:

Bilder



 

Schritt 19:

Danach ändere ich den Effekt zu einer eigenen Ebene. Dazu muss ich nur mit der rechten Maustaste auf den Effekt klicken und dann auf Ebene erstellen. Jetzt kann ich meinen Schein nach außen so transformieren, wie ich möchte (z. B. verkrümmen) und auch maskieren.

Bilder



 

Schritt 20:

Wenn die Box endlich fertig ist, kopiere ich die Gruppe und ändere nur noch den Text + die Position.

Bilder



 

Schritt 21:

Jetzt füge ich eine neue Gruppe mit dem Namen "Footer" ein. Da kommt eine graue Form hinein. Über die Form setze ich den grünen Streifen von oben sowie das Logo, welches ich leicht größer skaliere. Danach noch die Anschrift + Kontaktdaten hinein und fertig ist die Webseite.

Bilder



 

Ergebnis:

Hier die Webseite in der kompletten Ansicht:

Bilder


Update Mai 2012: 
Wer dieses Design einmal "live" sehen will, kann hier schauen: http://schmerzpraxis-beisken.de Wir haben dieses Design jetzt in einem Kundenprojekt über unsere Webagentur (4eck-media.de) umgesetzt. Da das besondere Design bei längeren Texten nicht einfach wie gewohnt eine Standardscrollleiste haben kann, wurde die Scrollleiste mit jQuery umgesetzt. Die Scrollleiste ist dabei dynamisch und erscheint erst, wenn der Seiteninhalt eine bestimmte Länge überschreitet. Siehe Vergleich Startseite (ohne Scrollleiste) und Impressumseite (mit Scrollleiste).

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

Vielen Dank für das gut erklärte Video

Portrait von schacho
  • 28.04.2014 - 19:39

Sehr angenehmes Tutorial. Das Design ist wie ich finde sehr ansprechend.
Vielen Dank!

Portrait von Matthias
  • 16.05.2012 - 14:36

Wer dieses Design einmal "live" sehen will, kann hier schauen: http://schmerzpraxis-beisken.de
Wir haben dieses Design jetzt in einem Kundenprojekt über unsere Webagentur (4eck-media.de) umgesetzt. Da das besondere Design bei längeren Texten nicht einfach wie gewohnt eine Standardscrollleiste haben kann, wurde die Scrollleiste mit jQuery umgesetzt. Die Scrollleiste ist dabei dynamisch und erscheint erst, wenn der Seiteninhalt eine bestimmte Länge überschreitet. Siehe Vergleich Startseite (ohne Scrollleiste) und Impressumseite (mit Scrollleiste).

Portrait von Matthias
  • 16.05.2012 - 14:27

Hey Leute, wir haben dieses Design jetzt in einem Kundenprojekt über unsere Webagentur (4eck-media.de) umgesetzt, siehe hier: http://schmerzpraxis-beisken.de

Da das besondere Design bei längeren Texten nicht einfach wie gewohnt eine Standardscrollleiste haben kann, haben wir die Scrollleiste mit jQuery umgesetzt. Die Scrollleiste ist dabei dynamisch und erscheint erst, wenn der Seiteninhalte eine bestimmte Länge überschreitet. Siehe Vergleich Startseite (ohne Scrollleiste) und Impressumseite (mit Scrollleiste).

Portrait von annedawn
  • 06.02.2012 - 11:49

Schönes Tutorial. Frage mich nur, ob 1600 px Höhe nicht zu viel sind. Was nehmt ihr denn so?

Portrait von teste123
  • 14.01.2012 - 17:42

Vielen Dank für die Schöne Anleitung
MfG

Portrait von Inhome
  • 18.12.2011 - 11:10

Vielen Dank für die neuen Denkanstöße ;-)

Portrait von s_qw23
  • 15.11.2011 - 23:02

Wirklich gute Arbeit. Immer wieder erstaunlich mit wie wenigen Handgriffen man eine gute Arbeit machen kann. Mir fehlt dazu leider einfach ein bisschen das Auge...

Portrait von katertheo
  • 15.11.2011 - 20:36

Sieht sehr schön aus und lässt sich mit entsprechenden Bildern auch für andere Seiten verwenden.
Vielen Dank bin mal wieder echt begeistert

Portrait von gisszmo
  • 28.10.2011 - 21:08

Toll. Super erklärt und ein tolles Design.

Als Anfänger wüßte ich allerdings ganz gerne was ich noch lernen müßte um so einem Design bzw. generell einem Design die entsprechenden "Funktionen" - also die LInks öffnen - zuzuweisen.

Was brauch ich dazu?
Ich hab schon eine Webseite erstellt, allerdings denke ich sehr sehr umständlich in einem Tabellendesign.
Und ja mittlerweile wurde ich schon mehrfach drauf hingewiesen, dass diese Vorgehensweise von Anno Dubbak ist.

Portrait von s_qw23
  • 15.11.2011 - 23:06

@gisszmo
Rein um das Design umzusetzten solltest du dich mit HTML und CSS auseinandersetzen. Diese geben dir alle nötigen Werkzeuge um eine einfache Webseite zu erstellen.
Solltest du Daten (Formulare, Logins etc.) benötigen kannst du dich noch mit PHP bspw. auseinandersetzten.

Umfassende Informationen unter: www.self-html.org und www.self-php.org
Css ist glaub ich auf der HTML Seite mit dabei...

Viel Glück

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 28.10.2011 - 09:22

Vielen Dank für das Training und das tolle Design! Hatte gerade einige Aha!-Erlebnisse.

Portrait von Susan99
  • 28.10.2011 - 08:45

Wirklich ein sehr schönes Layout und hervorragend erklärt! Vielen dank.
LG Susan

Portrait von muermel
  • 21.10.2011 - 14:24

Schönes Einsteigertutorial... besonderst das Layout gefällt mir sehr gut!

Portrait von Tetra
  • 16.10.2011 - 21:25

War sehr hilfreich! Danke

Portrait von JeT66
  • 30.09.2011 - 12:38

Sehr gute Tutorial. Gut umgesetzt.

Portrait von BubuBaba1
  • 27.09.2011 - 11:22

Danke für das hilfreiche Tutorial.
Super für Anfänger wie mich geeignet

Portrait von Wiese14
  • 26.09.2011 - 17:02

Danke!
Sehr schönes Tutorial, auch für Anfänger wie mich leicht zu verstehen!

Vielen Dank!

Portrait von siegfried_E
  • 25.09.2011 - 20:59

kann man auch ein drop down menue erstellen?

Portrait von global_one
  • 24.09.2011 - 16:42

Tolle Idee, genau was ich gesucht habe.

x
×
×