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

  • Portrait von Shambles1994

    Shambles1994

    28.03.2012 - 14:51

    Top :) danke
    Gute Schritt für Schritt anleitung

  • Portrait von KretaKater

    KretaKater

    21.11.2011 - 13:57

    Danke erst einmal, ist gut erklärt . . . ABER: das Tutorial ist von 2005 !?!
    Wie kommt sowas zustande . . . ich dachte immer, dass nur neue Tutorials "beworben" werden . . .
    In den letzten 6 Jahren hat sich ja bei PS einiges getan . . . ich mein ja nur . . .

    • Portrait von eFoX

      eFoX

      22.11.2011 - 00:34

      Es gibt auch noch einen Tutorial-Fortsetzung (von 2009 von mir)...alles etwas moderner! Ansonsten: Das war damals, 2005, wenn nicht DAS Tutorial in der deutschen Szene zum Website erstellen :)
      Das sich das alles vollkommen gewandelt hat und ich auch anders vorgehe mittlerweile ist klar

  • Alternative Portrait von dplaschg

    dplaschg

    28.08.2011 - 15:14

    Top!
    Sehr gut erklärt! Hat mir super weitergeholfen.
    greez

  • Alternative Portrait von Lapen

    Lapen

    13.07.2011 - 00:42

    Super Tutorial hilft mir echt sehr.

  • Alternative Portrait von Tiger235

    Tiger235

    08.07.2011 - 08:58

    super auf sowas habe ich gewartet

  • Alternative Portrait von Stephie83

    Stephie83

    26.05.2011 - 10:55

    Nach solch einer Anleitung habe ich gesucht, sehr gut erklärt und mit guten Photoshopkenntnissen für mich auch unkompliziert umsetzbar. Resultat sieht professionell aus. Danke!

  • Alternative Portrait von Toby046

    Toby046

    14.05.2011 - 12:57

    Endlich, mal ein eine gute Schritt für Schritt Anleitung. Danke.
    Vielleicht hätte man den zweiten oder dritten Teil noch mit einfügen können, aber sonst sehr gut.

  • Alternative Portrait von Ai_relav

    Ai_relav

    05.05.2011 - 21:45

    Sehr gut erklärt :) aber ich habe mich gefragt warum du das in photoshop und nicht im ilustrator gemacht hast ?

  • Alternative Portrait von yimmy

    yimmy

    18.04.2011 - 20:52

    Super Tutorial! Freue mich auf das nächste!

  • Alternative Portrait von Superking88

    Superking88

    15.03.2011 - 08:30

    Feine Sache, Ich bin schon gespannt auf Teil2

  • Alternative Portrait von Acchan

    Acchan

    08.01.2011 - 15:45

    Danke dir!
    War durchaus hilfreich!

  • Portrait von wikki11

    wikki11

    05.01.2011 - 16:30

    Gutes Tutorial! 5Sterne....ist zwar Anspruchsvoll, aber dennoch nachvollziehbar!

  • Alternative Portrait von Aybi13

    Aybi13

    16.12.2010 - 23:47

    Ist genau das was ich lernen will .. ist aber doch noch ne nummer zu hoch für mich

  • Portrait von greenbeen

    greenbeen

    01.12.2010 - 21:57

    wiiiiirklich ein großes Dankeschön :D endlich kann auch ich als Laie mal ne Webseite (die coool aussieht) erstellen! DANKE!

  • Alternative Portrait von Dragonfly828

    Dragonfly828

    15.11.2010 - 22:11

    Ein schönes tutorial auch wenn ich das mir den Url informationen noch nicht so ganz verstanden habe. werde mir auf jeden fall noch die anderen angucken

  • Alternative Portrait

    User hat PSD-Tutorials.de verlassen

    15.11.2010 - 20:30

    Top Danke kann ich grade gut gebrauchen

  • Alternative Portrait von quester_max

    quester_max

    15.11.2010 - 18:08

    klasse, hats mich weiter geholfen, weiter so :)

  • Alternative Portrait von Taurenlord

    Taurenlord

    09.11.2010 - 21:16

    Super Anleitung, läuft alles super

    Von mir bekommst 5 Sterne!!!

    TOP

  • Alternative Portrait von Flash18ca

    Flash18ca

    05.11.2010 - 23:52

    TOP richtig gut erklärt ;p

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

Tutorial empfehlen

 

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


(1) HOMEPAGE: Farbwahl und Aufbau

Hallo,

Willkommen zum Ersten Workshop zum Thema: Homepage
Ihr lernt hier professionell eine schöne Homepage in mehreren Schritten zu erstellen.

Schritt 1: Farbwahl und Aufbau

Weiterhin wird es geben…

Schritt 2: Beschriftung und Elemente
Schritt 3: Bilder einfügen
Schritt 4: Feinschliff
Schritt 5: Homepage & HTML
Schritt 6: Publizieren

Solltet ihr bis jetzt noch keine Photoshop Kenntnisse haben und wisst nicht mal was HTML ist, dann rate ich euch davon ab diesen Workshop zu machen. Er wird anspruchsvoll und richtet sich an Fortgeschrittene und Profis. Bitte davor erst HTML Grundkenntnisse erlernen und mit Photoshop umgehen können.

 Zuerst erstellt ihr einen neuen Ordner ’Homepage’ unter Eigene Dateien. Dort kommt alles rein was mit der Page zu tun hat; Bilder, Quellcode, PSD, Text…

Bilder

Dann öffnet ein neues Photoshop Dokument mit folgenden Einstellungen:

Bilder 

 

Ich habe mir jetzt gedacht der Page einen schlichten Look zu verpassen, der aber trotzdem modern aussieht und klar strukturiert ist. Sollte vom Aufbau so aussehen:

Bilder

 

An den roten Linien kann man später die Page in Frames unterteilen, ich werde jedoch ein gesondertes Tutorial dazu verfassen.
Sieht natürlich etwas statisch aus aber das wird sich alles noch ändern, ihr werdet überrascht sein. 


Jetzt brauchen wir noch ein paar Farben, welche den gut zusammen harmonieren und welche der Page einen richtig guten Look verpassen.
Dazu kann ich diese Seite empfehlen: http://www.colormatch.dk

Bilder

So sieht meine Auswahl jetzt aus. Ich werde mich nicht 100% daran orientieren, aber eine gute Hilfestellung kann diese Farbwahl durchaus geben. Natürlich könnt ich auch andere Farben wählen, versucht es einfach mal.

Jetzt geht es munter los nachdem ihr das alles ausgewählt habt, erstelle ich mir zuerst einen Balken (siehe Bild: Aufbau), der dann mit einem Verlauf gefüllt wird.
Bilder

Also eine neue Ebene erstellen, diese ’Trennung’ nennen und am besten Orange hervorheben (Ebeneneigenschaften). Orange wird jetzt alles, das mit dem Körper der Page zu tun hat. Dieser ’Balken’ trennt zur Abtrennung zwischen Header und Content.
Sollte dieser Schritt unklar sein, Abschlussbild anschauen :)

Und weil ich grad so lustig bin, können wir schon mal jetzt anfangen ein kleines Logo zu gestalten, ihr könnt auch meins übernehmen. Ich mache mir eine Neue Ebene ’Logo’ (Blau) und erstelle mir einen Kreis (SHIFT gedrückt halten).

 Dann erstelle ich mir noch eine neue Ebene, ziehe einen kleinen Kreis auf und ordne ihn so über der ’Logo’ Ebene an, dass ich einen Halbmond erhalte.

Bilder

Dann zurück in die ’Logo’ Ebene wechseln, kurz auf ENTF drücken und ihr habt einen Halbmond, die kleinere Kreis Ebene könnt ihr jetzt löschen.
Dann nehme ich das Auswahllasso, wähle die Spitze des Halbmondes aus, dupliziere diese und ordne sie zweimal nebeneinander an.
Außerdem erstelle ich mir noch ein paar kleine Rechtecke und ordne sie oberhalb des Mondes an, gegebenenfalls noch etwas weichzeichnen lassen und schließlich auf eine Ebene, der Logo Ebene zusammenkopieren.

Bilder

Jetzt sollten wir den Bereich für die News formen. Dazu neue Ebene erstellen, Auswahlrechteck auspacken und ein Stück (rechts) auswählen, dass dann mit einem Verlauf ins Weiße befüllt wird.
Am besten geht das wenn ihr euch ein paar Hilfslinien vom Lineal wegzieht und dann die jeweiligen Stücke mit dem Auswahlrechteck markiert. Dann nur noch befüllen.

Bilder

Die Stückelung ergibt erst nachher für euch einen Sinn, also noch nicht wundern. Jetzt mit dem Zauberstab nur das unterste Rechteck markieren, diese Ebene duplizieren, die neue Ebene ’News Verlauf’ nennen und das Rechteck der original Ebene mit einem kurzen ENTF löschen. Dann mit der Ebene ’News Verlauf’ zu den Fülloptionen wechseln und so befüllen:

 Bilder

Ich habe optional noch eine Linie auf einer gesonderten Ebene (Verlauflinie) gezogen (Buntstift, 1px, schwarz) und diese unten etwas anradiert und danach Bewegungsunschärfe nach unten angewandt, so kommt eine bessere Abgrenzung zustande.

Die oberen zwei Rechtecke habe ich auch schon passend gefüllt (siehe Farbtabelle). Damit jeder auch weis auf was für einer Seite er sich befindet, muss natürlich jetzt noch eine URL passend dazu.

Neue Ebene erstellen, Auswahlrechteck und zu 1/2 aufziehen, ich füll das Stück jetzt mit der gleichen Farbe wie die oberen zwei Rechtecke.

Bilder

 

 Ich habe diese Ebene ’URL Anzeige genannt’ und darauf den Bewegungsunschärfefilter angewendet (horizontal, 700). Die Ebenendeckkraft jetzt auf 80% herabsetzen und über den Ebenen ganz oben anordnen.

 Sollte das alles zu unklar gewesen sein, dann betrachtet bitte dieses Bild:

Bilder

Das war:
Workshop Teil 1. 

Teil II: Beschriftung und Elemente

 eFoX

Alle Bilder und Grafiken die in diesem Tutorial verwendet werden sind geschützt und stehen somit unter dem Copyright des Autors. Die Verwendung von jeglichem Material in diesem Tutorial ist nur mit Erlaubnis des Autors gestattet.

Webdesign Darmstadt • vBulletin 0.044 • ZF-App 0.525 • Total 0.569