Anzeige
Tutorialbeschreibung

Die klassische Website im medizinischen Bereich

Die klassische Website im medizinischen Bereich

In diesem Video-Training wird gezeigt, wie eine Webseite für eine Zahnarztpraxis erstellt wird. Dabei wird vor allem die Verwendung von Vektorformen erläutert wie z. B. bei der Erstellung eines Logos.

Das Design ist klassischer in der Erscheinung und auch ein wenig steriler von der Farbwahl her, was gut zum medizinischen Bereich passt. Die geschwungenen Formen im Header mit Navigation und im Footer geben dem Design eine freundliche Note. Die Website ist so konzipiert, dass im Header ein Bildwechsel eingebaut werden kann. Die rechte untere Box enthält zudem auch eine Galeriefunktion mit Slider (Bildwechsel).

... ü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 1800 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. Danach erstelle ich einen Hauptordner "Zahnarzt" und diverse Unterordner, damit mein Layout schön aufgeräumt ist. Färben kann ich die Ordnerstruktur auch, indem ich mit der rechten Maustaste auf das Auge klicke.

Bilder



 

Schritt 3:

Mit dem Abgerundeten Rechteck-Werkzeug erstelle ich jetzt im Ordner "Header" eine Fläche.

Bilder



 

Schritt 4:

Mit dem Ankerpunkt-hinzufügen-Werkzeug füge ich in meiner Formebene noch einen Punkt hinzu, verschiebe diesem mit dem Direktauswahl-Werkzeug und verbiege ihn an den Griffen.

Bilder



 

Schritt 5:

Unten verbiege ich die Form auch noch leicht und füge danach als Fülloption einen Verlauf ein. Danach füge ich oben einen Text ein (dazu klicke ich mit dem Textwerkzeug genau auf den oberen Rand der Formebene, damit der Text entlang des Pfades läuft.

Bilder



 

Schritt 6:

Oben links habe ich vor, ein Logo einzufügen. Wenn ich sehr faul sein möchte, dann nehme ich einfach ein Logo aus Fotolia, wie z. B. dieses:

Bilder



 

Schritt 7:

Ich werde es mir diesmal aber nicht so leicht machen und das Logo einfach als Vektorform nachbauen. Dazu erstelle ich eine Auswahl aus den zwei gefüllten Linien und klicke im Pfade-Bedienfeld auf Arbeitspfad aus Auswahl.

Bilder



 

Schritt 8:

Mit dem Direktauswahl-Werkzeug korrigiere ich jetzt noch die Kurven, die von Photoshop nicht so gut umgesetzt wurden.

Bilder



 

Schritt 9:

Jetzt kann ich meine Form als Vektorform speichern.

Bilder



 

Schritt 10:

Als Nächstes färbe ich mein Logo in blau, lege im Hintergrund mit dem Ellipse-Werkzeug einen Kreis an und fülle diesen mit einer Verlaufsüberlagerung.

Bilder



 

Schritt 11:

Oben füge ich noch das Logo hinzu. Entweder ich ziehe eine Linie mit dem Zeichenstift-Werkzeug auf, die gebogen ist, und füge auf diesem Pfad meinen Text ein, oder aber ich klicke gleich oben auf meine Formebene mit dem Text-Werkzeug. Für den unteren Text habe ich einen Pfad mit dem Zeichenstift-Werkzeug erstellt und mit dem Ankerpunkt-hinzufügen-Werkzeug einen Punkt in der Mitte hinzugefügt und die Linie entsprechend gebogen. Darauf habe ich dann meine Navigationstexte eingefügt.

Bilder



 

Schritt 12:

Jetzt habe ich noch neben jedem Navigationstext einen kleine Linie eingefügt (mit dem Linienwerkzeug). Damit die nach oben hin ausgeblendet wird, spendierte ich der Linie noch eine Maske mit einem Schwarz-Weiß-Verlauf.

Bilder



 

Schritt 13:

Als Nächstes füge ich für meine Verlaufsform einen Schlagschatten ein und wandele diesen in eine eigenständige Ebene um (rechte Maustaste auf den Effekt im Ebenenbedienfeld und dann Ebene erstellen klicken). Danach transformiere ich ihn mit gedrückter Strg-Taste, damit er links & rechts oben weiter hervorschaut.

Bilder



 

Schritt 14:

Jetzt füge ich ein Foto ein. Ich nehme aber eine Auswahl von meiner Verlaufsform (gedrückte Strg-Taste im Ebenenbedienfeld) und füge dann in mein Foto eine Maske ein. Danach nehme ich die Verbundenheit (Kettensymbol im Masken-Icon) weg und transformiere die Maske so, dass ich sie oben und unten ein Stück kleiner zerre. Schon wird die Navigation oben und unten wieder eingeblendet.

Bilder



 

Schritt 15:

So komme ich endlich zum Content-Bereich. Darin füge ich eine Formebene mit grauer Kontur ein.

Bilder



 

Schritt 16:

Danach noch eine schöne Überschrift und Text mit der Schriftart Georgia.

Bilder



 

Schritt 17:

Als Nächstes füge ich noch ein Foto ein, und dieses erhält dann noch eine kleine Bildunterschrift.

Bilder



 

Schritt 18:

Jetzt füge ich innerhalb des Content-Ordners einen weiteren Ordner bzw. eine Gruppe mit dem Namen "Rechte Boxen" und darin "Aktuelles". Alles natürlich schön mit Vektorformen und Fülloptionen wie Verlaufsüberlagerung.

Bilder



 

Schritt 19:

Jetzt kopiere ich die Gruppe, ziehe diese weiter nach unten und ändere entsprechend den Text.

Bilder



 

Schritt 20:

Wieder kopiere ich die Gruppe, nur dieses Mal möchte ich eine Galerie einfügen. Dazu importiere ich erst einmal ein Bild und erstelle darauf eine Maske. Auf dieser Maske erstelle ich mit dem Ellipse-Auswahl-Werkzeug eine große gekrümmte Auswahl und blende dann oben und an der Seite den Bereich aus.

Bilder



 

Schritt 21:

Damit der Besucher mehrere Bilder sehen kann, habe ich oben mit dem Ellipse-Werkzeug 4 Kugeln erstellt und die erste blau gefärbt, die den Aktivzustand verdeutlichen soll.

Bilder



 

Schritt 22:

Jetzt geht es zum Footer. Da kopiere ich mir einfach die Form aus dem Header und skaliere die von der Höhe kleiner. Darin setze ich das Logo rein, welches ich größer skaliere (geht ja zum Glück ohne Qualitätsverlust, da alles Vektorformen sind). Danach noch die Kontaktdaten mit weißer Schriftfarbe eingetragen und schon sieht der Footer ganz passabel aus.

Bilder



 

Schritt 23:

Im Hintergrund meines Layouts möchte ich eine Textur einfügen. Entweder ich nehme mir eine schöne Textur aus der Texturen-DVD mit über 14.500 Texturen oder aber aus Fotolia.com. Diese Textur speichere ich mir als Muster ab (alles markieren und dann ab ins Menü Bearbeiten>Muster festlegen).

Bilder



 

Schritt 24:

Jetzt muss ich nur noch eine neue Ebene ganz unten erstellen, die ich mit z. B. schwarzer Farbe fülle und dann folgende Fülloption einfüge:

Bilder



 

Schritt 25:

Und so sieht jetzt die fertige Webseite aus:

Bilder




DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Dessert
  • 06.06.2017 - 01:02

Vielen Dank für das gut erklärte Video

Portrait von oli_kardos
  • 19.11.2014 - 16:49

Hallo Stefan,
vielen Dank für das Super Tutorial. Die vielen Details und die ganzen Tipps sind sehr hilfreich.

Jetzt noch eine Frage: Wie bzw. womit würdest du dieses webdesign jetzt umsetzten oder programmieren? kann ich dieses Design mit einem CMS umsetzten?

Portrait von Stefan
  • 19.11.2014 - 16:52

Wir haben so eine ähnliche Seite für einen Kunden erstellt. Dafür haben wir WordPress verwendet. Mehr dazu hier: http://4eck-media.de/referenzen/schmerzpraxis-beisken-de/

Portrait von wachechristian
Portrait von despo
  • 27.01.2012 - 19:31

Schönes Tutorial, habe auch alles nachgebaut um am Ende festzustellen, dass ich lediglich eine Grafik einer Webseite habe. Ich kann zwar HTML, aber laut Tutorial sollte man hier doch lernen, wie man in Photoshop eine HTML oder Flashwebseite macht. Habe mich sehr geärgert und würde mich freuen wenn hier demnächst erklärt wird, wie dies funktioniert, da ich ansonsten wieder per Hand coden werde. Trotz allem lernt man ein paar Funktionen bei Photoshop kennen, nur leider kann ich damit im Moment nichts anfangen um eine Webseite zu erstellen.

Portrait von herstellung
  • 25.01.2012 - 14:32

Danke, danke, danke. Hammerhart. Wirklich klasse erklärt. Was natürlich das i-Tüpfelchen wäre: Die Umsetzung in HTML und CSS

Portrait von robertriesa
  • 19.01.2012 - 11:11

das video hat mir mal wieder sehr gut gefallen, weiter so...klasse job

Portrait von teste123
  • 14.01.2012 - 17:44

Vielen Dank für die Schöne Anleitung
MfG

Portrait von plusMan
  • 16.09.2011 - 16:51

Danke, hat mir in vielen Bereichen geholfen!

Portrait von Niobe
  • 14.09.2011 - 18:29

Vielen Dank für das schöne Tut, Klasse Arbeit, wobei mir die Berufsgruppe nicht ganz fremd ist...
allerdings habe ich mit den Schritten 23 und 34 so meine Schwierigkeiten. Ist die Textur die gleiche nur 1x in rosa und 1x in hellblau oder wurde daran etwas gemacht?

Portrait von PachN
  • 12.09.2011 - 11:43

Schönes Tut und tolles Design.

Portrait von reek
  • 30.08.2011 - 18:06

Ich fande es super verständlich und klar strukturiert, läßt sich gut nachvollziehen. Alles in allen ist der Look klasse!

Portrait von Matte
  • 30.08.2011 - 10:34

Für euch beide :o)

http://www.psd-tutorials.de/tutorials/2d/adobe-photoshop/webdesign/view/1729--website-designen-und-erstellen-klassischer-look

Ab Schritt 62 gehts los. Viel Spass


@ Stefan:

Hast du die 3 Links da oben rechts absichtlich grade gelassen? Irgendwie stört das diesen runden Look ein wenig. Ansonsten sieht die Seite durchweg klasse aus. Auch dem Thema entsprechend genau getroffen.

Gruß

Matte

Portrait von Funbrake
  • 29.08.2011 - 10:53

Das Design ist super.
Aber was mich wirklich mal interessieren würde: Wie schafft man es, diese Photoshopdatei in eine echte Website umzusetzen? Kann mir das bitte mal irgendjemand erklären?

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 30.08.2011 - 09:38

Der Frage stelle ich mich an. Habe schon viele geniale Designs von Webseiten in Photoshop gesehen, aber die Umsetzung in reale Seiten habe ich bisher nicht verstanden.

Portrait von xyxyxy323
  • 30.08.2011 - 16:09

Zum erstellen eines HTML Dokuments sprich einer Website daraus zu machen muss man das Design in Photoshop Slicen und dann kann man es gleich als HTML Dokument speichern! Geht alles ganz einfach, falls ich ein Tut dazu machen soll, gebt einfach mal bescheid!

Portrait von Matthias
  • 30.08.2011 - 18:33

Sehr gern. Zur Umsetzung ein Tutorial wäre cool

Portrait von despo
  • 27.01.2012 - 19:33

Ja das wäre schön, wenn das jemand erklären würde, den nach genau dem habe ich gesucht und nach stundenlanger Arbeit festgestellt, dass dies hier nicht einmal erläutert wird, sondern lediglich Designvorschläge für eine Seite gemacht werden.

x
×
×