Lieber Gast …

… die Inhalte von PSD-Tutorials.de stehen nur registrierten Mitgliedern zur Verfügung. Damit wollen wir den Communitygedanken weiterführen. Als Mitglied trägst du - wenn auch nur im Kleinen - zum Puls der Community bei. Und nur so ist es möglich, weiterhin hochwertige Inhalte für alle bereitzustellen.

Jetzt kostenlos registrieren!

Vorteile der kostenlosen Mitgliedschaft

Mit der kostenlosen und schnell erledigten Registrierung erhältst du viele nachhaltige Vorteile, die wir dir hier in aller Kürze aufzeigen möchten:

  • PSD steht für professionelles Know-how in den Bereichen Bildbearbeitung mit Photoshop, Fotografie, Webentwicklung, Layout- und Vektorbearbeitung, 3D-Bearbeitung mit Cinema 4D und Co.
  • Über 2200 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
  • Mehr als 500 Video-Trainings als Stream zur Direktanzeige und zum Download
  • Abruf von über 1000 Downloads zu Photoshop-Presets, 3D-Modellen, Grußkarten, Texturen & Co
  • Zugriff auf ein sehr aktives Forum mit Antworten im Minutentakt
  • Deine Daten sind sicher. Sie werden nicht weitergegeben! Die Mitgliedschaft kann jederzeit und ohne Aufwand wieder gelöscht werden.

Reinschnuppern als Gast

Niemand kauft gerne die Katze im Sack, auch wenn sie kostenlos ist. Wir haben eine Handvoll Tutorials und Video-Trainings ausgesucht, die du auch als Gast ohne Registrierung ansehen kannst. Gefallen sie dir, stehen dir nach der Registrierung alle oben genannten Inhalte zur Verfügung.

Das Punktesystem

Einen winzigen Haken gibt es noch. Es gibt bei uns ein Punktesystem. Damit soll erreicht werden, dass Mitglieder sich aktiv in unserer Community beteiligen. Sobald du im Forum schreibst oder Tutorials kommentierst, bekommst du Punkte. Mit diesen Punkten kannst du wiederum Tutorials anschauen oder Downloads herunterladen. Mit der Registrierung bei PSD-Tutorials.de erhältst du ein Startguthaben von 100 Punkten, womit du schon ein gutes Stück weit kommst.

Jetzt kostenlos registrieren!

DVD-Werbung
Passend zum Inhalt empfehlen wir unsere:

Photoshop-Workshop-DVD - Webdesign

  • Webdesign mit Photoshop: alle erstellten Layouts mit Arbeitsdatei (PSD)!
  • Umsetzung erstellter Weblayouts in HTML/CSS
  • Tipps & Tricks zum Webdesign in Photoshop und zur Webentwicklung
Jetzt informieren Trailer ansehen

Kommentare

  • Alternative Portrait von despo

    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.



    geändert von despo am 27.01.2012 - 19:34
  • Alternative Portrait von teste123

    teste123

    14.01.2012 - 17:44

    Vielen Dank für die Schöne Anleitung
    MfG

  • Alternative Portrait von plusMan

    plusMan

    16.09.2011 - 16:51

    Danke, hat mir in vielen Bereichen geholfen!

  • Alternative Portrait von Niobe

    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?

  • Alternative Portrait von PachN

    PachN

    12.09.2011 - 11:43

    Schönes Tut und tolles Design.

  • Portrait von reek

    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!

  • Alternative Portrait von Matte

    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



    geändert von Matte am 30.08.2011 - 10:37
  • Portrait von Funbrake

    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 von Vignard

      Vignard

      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.

      • Alternative Portrait von xyxyxy323

        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

        Matthias

        30.08.2011 - 18:33

        Sehr gern. Zur Umsetzung ein Tutorial wäre cool

    • Alternative Portrait von despo

      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.

Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.

Tutorial empfehlen

 

Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)


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


Webdesign Darmstadt • vBulletin 0.034 • ZF-App 1.415 • Total 1.449