Anzeige
Tutorialbeschreibung

Travel-Website in angenehmer Urlaubsatmosphäre

Travel-Website in angenehmer Urlaubsatmosphäre

In diesem Video-Training zeige ich die Erstellung eines Weblayouts für einen Bauernhof. Besonders wird die Arbeit mit Masken gezeigt, die unter anderem beim Out-of-Border-Slider zum Einsatz kommen. Viele kleine Tipps und Tricks ergänzen dieses Video-Training.

Die Navigation wurde so konzipiert, dass zu jeder Unterseite in der grünen Fläche Platz für Slogans oder einführende Texte verfügbar ist. Die Website enthält einen Slider für Bildwechsel auf der Startseite und eine Video-Integration sowie Schnittstellen zu Facebook und Twitter.

ERGÄNZUNG: Von unserem User uniqueDns habe ich einen Tipp bekommen, dass man für die Navigation auch Formebenen nachträglich Elemente hinzufügen kann, indem man oben in der Optionsleiste den entsprechenden Button aktiviert. DANKE!

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



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

Vielen Dank für das gut erklärte Video

Portrait von Snipers
  • 21.10.2016 - 14:40

Danke schön.

Portrait von hassdenteufel
  • 26.04.2012 - 16:52

vielen dank für diese wunderbare, professionelle seite

Portrait von jogiebaer
  • 15.01.2012 - 19:29

werden wir informiert wenn das Tape bzgl. Umsetzung in CSS/HTML online ist?

Portrait von Matthias
  • 14.02.2012 - 12:35

Hier ist es: http://www.psd-tutorials.de/video-trainings/web/html-css/-/view/19768--html5-css3-umsetzung-einer-kompletten-webseite-mit-slideshow

Portrait von Matthias
  • 02.01.2012 - 16:59

Hey Leute, eure Kommentare haben uns überzeugt. Wir haben das Design jetzt auch noch in der Umsetzung in einem Video-Training erklärt. Das Video ist bereits im Kasten und wird in den nächsten Wochen online gehen.

Portrait von chrisko46
  • 04.12.2011 - 11:00

Gut gemacht und schönes Design der Seite. Mich würde aber auch sehr interessieren, wie das in HTML umzusetzen ist und vorallem, wie geht es mit den anderen Seiten weiter.
Denn gerade bei dem Text ist es ja immer mühselig den in Photoshop ändern zu müssen, zudem wie auch schon vorher mal erwähnt, wie können die Mouseover Effekte optimal genutzt werden, insbesondere wenn dann doch noch wieder Änderungen im Menue z.B. kommen.

Portrait von Matthias
  • 14.02.2012 - 12:35

http://www.psd-tutorials.de/video-trainings/web/html-css/-/view/19768--html5-css3-umsetzung-einer-kompletten-webseite-mit-slideshow

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 19.11.2011 - 11:46

Gut erklärtes Tut und auch ein sehr schickes Design! Die Umsetzung mit HTML und CSS würde mich ebenso sehr interessieren.

Portrait von jivita
  • 18.11.2011 - 08:34

Dieses Tutorial ist grundsätzlich ganz gut...dennoch fehlen mir als Webdesigner ein paar grundlegende Informationen. Wie sieht der Bereich um die Webseite aus? Da die Anzeigegeräte der Nutzer sehr unterschiedliche Auflösungen besitzen, muss man über den Tellerrand sehen und entscheiden, wie sich die Webseite verhalten soll. Ist sie zum Beispiel horizontal zentriert oder laufen die grauen Balken im Header und Footer gar über die ganze Breite des Browserfensters?
Außerdem fehlt mir in solchen Vorlagen immer die Gestaltung der Interaktionsobjekte. Was passiert mit einem Menüpunkt oder einem Textlink bei einem Mouseover?
Generell empfehle ich immer zwei Versionen der finalen Webseite zu machen. Für den Kunden reicht sicherlich die Darstellung der Seite. Dem Webentwickler würde es darüber hinaus helfen, wenn das Raster mit den Abständen der Elemente mit abgebildet wird - zusammen mit einer Liste der verwendeten Grafiken, Schriftarten und Größen. Diese zweite Version ist natürlich nur dann erforderlich, wenn man die Webseite nicht selber entwickelt. ;)

Portrait von Peggie
  • 12.11.2011 - 13:56

Ganz toll, ich werde mich bestimmt daran versuchen.

Portrait von ncbaden
  • 12.11.2011 - 08:39

Sehr gute Anleitung. Vielen Dank

Portrait von sestra
  • 11.11.2011 - 18:09

Auch ich finde das Tutorial gut gemacht. Eine erklärte "Weiterverarbeitung" würde mich besonders freuen. Auf jeden Fall: Danke für die Mühe!

Portrait von Delphin308
  • 11.11.2011 - 15:56

Die Umsetzung für HTML/CSS wäre für mich auch interessant

Portrait von LutzLorra
  • 11.11.2011 - 10:28

Da ich als VB.Net Programmierer nur gelegentlich HTML und Grafik lerne muss ich euch mal ein großes Lob aussprechen. Sehr professionell gemachtes Lern Video.
Wird es dazu evtl. mal einen HTML & CSS Kurs genau zu diesem Bauernhof geben ?

Portrait von scrump
  • 11.11.2011 - 09:25

Ja, wie alle hier, finde auch ich das Tutorial nicht schlecht. Leider ist beim Imageslider der rechte Button verkehrt und die eigentliche Umsetzung fehlt. Die Überschrift hat etwas anderes vermuten lassen.
Allerdings sollte es für den interessierten Webdesigner kein Problem darstellen die Seite umzusetzen.

Auf jeden Fall Danke dafür; Inspirationen kann man nie genug bekommen.

Portrait von womic2000
  • 11.11.2011 - 08:53

Im Prinzip ganz toll gemacht. Aber:
Wenn das obere Bild mit dem Schaf ein Slider sein soll, bleibt der Schafskopf dann immer stehen wenn das nächste Bild rein scrollt ?

Portrait von Matthias
  • 11.11.2011 - 12:53

Nee, das funktioniert schon. Man muss den Slider halt nicht in den oben gezeigten Größen denken, sondern der richtige Slider geht bis in den Navi rein. Die Bilder sind so angelegt, dass der obere Teil den unteren Navipart mit beinhaltet. Entweder so oder der Kopf wird mit einer absoluten Positionierung und -margin aus der Slideshow raus geschoben, wobei die erstere die einfachere in der Umsetzung ist.

Portrait von herstellung
  • 10.11.2011 - 10:08

Sehr gut erklärt. Vielen Dank. Kann mich meinen Vor-Kommentierern ebenfalls anschließen und fragen: Gibt es noch ein Tutorial über die weitere Umsetzung - also der komplette Weg von Design bis Fertigstellung der Seite?

Portrait von Uchiha_Sasuke
  • 10.11.2011 - 08:52

Vielen Dank! Über eine Tutorial fürs erstellen wäre ich dankbar :D

x
×
×