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 mrasl

    mrasl

    26.02.2012 - 23:53

    Danke für die hilfreichen Infos zum Einstieg...

  • Alternative Portrait von Stephie83

    Stephie83

    26.05.2011 - 11:56

    TOP! Danke dafür.... über Frames werde ich mich noch schlau machen :-)

  • Alternative Portrait von yimmy

    yimmy

    18.04.2011 - 21:06

    5 von 5 sterne! Weiter so!

  • Alternative Portrait von Superking88

    Superking88

    15.03.2011 - 08:35

    Wahnsinn hier fehlt ja nichts. super

  • Portrait von lichtwerker

    lichtwerker

    01.12.2010 - 15:18

    tolle Idee, freu misch schon auf den nächsten Teil

  • Alternative Portrait von 53d47

    53d47

    23.11.2010 - 20:40

    gut erklärt danke :-)

  • Alternative Portrait von shaking

    shaking

    09.11.2010 - 14:46

    bin zufrieden, danke

  • Portrait von Tribehunter

    Tribehunter

    02.11.2010 - 21:28

    Hammer erklärt! 5 Sterne von mir!

  • Alternative Portrait von _licht_zeichner_

    _licht_zeichner_

    16.10.2010 - 14:46

    Super beschrieben, vielen dank!

  • Alternative Portrait von dbergsch

    dbergsch

    14.10.2010 - 00:44

    Super Tuturial! Vielen Dank!

  • Portrait von harbin

    harbin

    02.10.2010 - 09:37

    Vielen Dank auch für den sehr anschaulichen vierten Teil

    Viele Grüße,
    harbi

  • Alternative Portrait von scarred13

    scarred13

    27.09.2010 - 11:40

    Genau wie die erste drei Teile... Gut.

  • Alternative Portrait von Bens_Photoart

    Bens_Photoart

    14.09.2010 - 07:42

    Gefällt mir gut und hat mir wirklich geholfen.

  • Alternative Portrait von daunman

    daunman

    06.08.2010 - 15:20

    Deine anderen Workshop`s sehen für mich schon sher viel versprechend aus :)

  • Alternative Portrait von Graf_Zotti

    Graf_Zotti

    04.08.2010 - 22:53

    nice work :) danke sehr

  • Alternative Portrait von Namelessness

    Namelessness

    22.07.2010 - 11:15

    Sehr schön gefällt mir! hab nu fast alle als PDF lohnt sich wirklich!

  • Alternative Portrait von sophie67

    sophie67

    15.07.2010 - 14:35

    Vielen Dank für das Tutorial.

  • Alternative Portrait von Julibe

    Julibe

    04.06.2010 - 04:40

    einfach gut der feinschliff,danke

  • Alternative Portrait von luv007

    luv007

    18.05.2010 - 11:38

    einfach gut der feinschliff,danke

  • Alternative Portrait von WNell

    WNell

    15.05.2010 - 22:09

    Der Feinschliff kommt vielleicht etwas zu kurz. Aber auch wieder gut erklärt.

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

Tutorial empfehlen

 

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


Die Homepage ist nun fast fertig, jetzt kommen wir ganz kurz zum Feinschliff. Mir fällt auf, dass manche Symmetrien noch nicht ganz stimmen. 

Bilder

 

Die URL oben muss genau an der Stelle beginnen, an der der Link "Home" beginnt, ebenso bei "FAQ" und "Kontakt". Außerdem muss der Text im Content genauso bündig beginnen wie der Link "Fragen & Antworten"… Nun gut, das ist einfache Arbeit. Kurz "V" drücken, um damit das Verschiebewerkzeug auszupacken und rüberschieben bzw. die Hilfslinien anpassen.

Weiterhin können wir jetzt anfangen die Homepage zu slicen. Ich sehe schon, das wird etwas verwirrend werden. Ich ziehe mir also immer Hilfslinien vom Lineal weg, bis mein Werk am Schluss so aussieht.

Bilder

Keine Panik, solange ihr seht wo welcher Slice für was nützlich ist, könnt ihr auch nicht durcheinander kommen. Und jetzt geht die Party richtig los. Nehmt das Slicewerkzeug und fahrt an den Hilfslinien entlang, genauer will ich das jetzt nicht schriftlich erklären, bitte schaut auf das Bild wie ich alles gesliced habe.

Bilder

Ich glaube so kann man eher nachverfolgen was ich gemacht habe. Immer von Oben, nach links arbeiten. Ich spreche kurz mal die wichtigsten Slices durch.

01: Wenn man hier draufdrückt soll man wieder auf der Startseite landen, also ändern wir die Sliceoptionen. Dazu Slicewerkzeug nehmen, auf 01 rechtsklicken und dann Sliceoptionen bearbeiten. Wir tragen jetzt nur in das Feld URL ein: index.html danach auf OK drücken.

03: FAQ >> faq.html
04: Impressum
04: Impressum >> impressum.html
08: Kontakt >> contact.html
09: Produkte 09: Produkte >> products.html
10: Login >> login.html
12: Home (ist Startseite) und die Startseite heißt immer >> index.html
13: Über Uns >> about.html
14: Lösungen >> products.html
15: Fragen & Antworten >> faq.html
16: Informationen >> info.html


Ihr merkt das ich mehrere Slices immer auf die gleiche URL zurückführe, so machen es die „großen“ Webseiten auch; im Endeffekt nur ein Marketingtrick. Außerdem sind meine Seiten grundsätzlich mit englischen Namen versehen. Das hat zwei Vorteile die ich aus dem Englischen übernehme:

 

a) Kleinschreibung
b) Keine Umlaute wie ä, ü, ö (Damit haben manche Browser Probleme)

Ich habe meine Slices außerdem so gezogen damit ich die Seite später in Frames zerlegen kann. Ich werde das aber der Einfachheit halber in diesem ganzen Workshop nicht erklären.

Deshalb ist diese Variante der Homepageerstellung nicht die allerbeste Methode, da wir später immer die gleiche Seite haben und dann immer die gleichen Bilder geladen werden müssen, bei Frames kann man alles einzeln kapseln. Wer jedoch schon mit Frames umgehen kann, der kann sich an dieser Grafik orientieren, die roten Linien sollen die Frames ergeben.

Bilder

 

 


 

Jedoch macht das für unsere Zwecke überhaupt nichts wenn wir keine Frames benutzen, schließlich wollen wir ja erst einmal lernen eine Page zu erstellen. Danach kann man sich noch mehr mit Frames befassen. Um euch damit aber nicht im Trockenen stehen zu lassen, werde ich dazu demnächst ein gesondertes Tutorial verfassen.

 

Das war:
Workshop Teil 4. 

Teil V: Homepage & HTML


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.039 • ZF-App 0.532 • Total 0.571