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 Stephie83

    Stephie83

    26.05.2011 - 13:25

    Gut erklärt, trotz HTML Kenntnisse minimal sind, klappte die Umsetzung in wenigen Anläufen :-)

  • Alternative Portrait von yimmy

    yimmy

    18.04.2011 - 21:10

    Freue mich auf den 6. Teil!

  • Alternative Portrait von Superking88

    Superking88

    15.03.2011 - 08:38

    Sehr schön, immer weiter so

  • Alternative Portrait von TheDave252

    TheDave252

    29.12.2010 - 19:10

    wenn man ein Domain dafür haben will, zB www.beispiel.de muss man dafür dann zahlen, oder wie bekommt man es online?

  • Alternative Portrait von kedus

    kedus

    15.12.2010 - 15:25

    sehr gut beschriebenes tutorial, danke!

  • Alternative Portrait von CarpusEst

    CarpusEst

    06.12.2010 - 23:01

    Super, hat mir echt weitergeholfen ;)

  • Portrait von lichtwerker

    lichtwerker

    01.12.2010 - 15:19

    tolle Idee, freu mich schon aufs nachbauen

  • Alternative Portrait von amg94

    amg94

    22.11.2010 - 17:14

    Hey
    einfach klasse erklärt, bei mir funktioniert alles, auch wenn ich jetzt ein paar Anläufe gebraucht habe.

  • Alternative Portrait von shaking

    shaking

    09.11.2010 - 14:49

    perfekter teil! :)

  • Portrait von sweetvelvetrose

    sweetvelvetrose

    04.11.2010 - 12:13

    Wow ! einfach super erklärt hab das ganze tutorial durch gelesen und auch schon teile nach gearbeitet ... entlich ist das ganze nicht mehr nur ein Buch mit 7 sigelen... selbst das mit dem coden hab ich einigermaßen verstanden ( bin absuluter laie !) und trau mich glaub ich jetzt entlich mal mehr zu machen als "nur" Baukasten homepage´s

    ein dickes lob und ein ganz großes 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:20

    Vielen Dank für deine Beschreibung, werde mich auch mal dran wagen.

  • Alternative Portrait von Mary_ru

    Mary_ru

    12.10.2010 - 09:59

    echt suoer beschrieben... =) habs in meiner ausbildung nie so im Detail erklärt bekommen... vielen dank...

  • Alternative Portrait von SommerMond

    SommerMond

    01.10.2010 - 13:51

    Klasse tutorial reihe, nimmt einem echt die angst endlich mal selber was zu basteln und zu versuchen!

  • Alternative Portrait von Bens_Photoart

    Bens_Photoart

    14.09.2010 - 09:08

    Super sache, werde ich gleich mal umsetzen

  • Alternative Portrait von PitPanda

    PitPanda

    04.09.2010 - 19:09

    leider schon etwas out of date. :(

  • Alternative Portrait von seventysixer

    seventysixer

    27.08.2010 - 10:28

    Sowas habe ich schon länger gesucht. Vielen Dank!

  • Alternative Portrait von a_ndi

    a_ndi

    16.08.2010 - 15:13

    super sache ;)
    ich werd dann man mich an ps setzen und mir ein design machen, und dann coden :D

  • Alternative Portrait von katz

    katz

    15.08.2010 - 20:33

    wow, das hat mir nun wirklich einen sehr guten Überblick verschafft und nimmt mir auf jeden Fall die Angst mich mit der Thematik auseinander zu setzen

  • Alternative Portrait von his_dudeness

    his_dudeness

    15.08.2010 - 16:04

    hammer geil.... gut erklärt und mit ein wenig vorkenntnis gut zu meistern

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

Tutorial empfehlen

 

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


Wir sind jetzt wirklich in den letzten Zügen der Vollendung unserer Homepage, in Prozent sind wir zu 70% fertig, nach diesem Workshop sind wir bei 95%.
Denn was die größte Arbeit ausmachen wird, liegt nicht mehr bei mir, sondern bei euch. Schliesslich muss in euere Page ja Text, da kann ich euch also nicht helfen.

Fangen wir also an wo wir zuletzt aufgehört haben. Die Slices sind drin, alle Links sind korrekt verlinkt. Dann kann das speichern losgehen.
Also unter Datei auf ’Für Web speichern’ anklicken. Unten links, in dem Kasten in dem 100% steht auf Ganzes Bild umstellen.
Und jetzt bei Slice 01 anfangen, SHIFT gedrückt halten und nach der Zahlenreihenfolge jeden Slice anklicken.

Habt ihr die ganze Seite markiert, dann wählt als Bildausgabeformat PNG-8 128.
Das ist besser als jpg, außerdem ist das ein Format das Zukunft hat, weil es weniger Speicherplatz braucht und trotzdem bessere Formate als jpg erzielt. 

Bilder

Und nun die Page erstellen lassen, mit einem klick auf Speichern. Wählt euren Homepage-Ordner, erstellt einen neuen Unterordner mit dem Namen Page, öffnen und hineinspeichern.
Bei den Speicheroptionen auf HTML und Bilder gestellt lassen und den Dateiname nicht verändern.

Und jetzt befehle ich euch, sofort Photoshop zu schließen, den Page Ordner aufzusuchen und auf die HTML Datei doppelzuklicken…
Ist das nicht ein verdammt geiles Gefühl, so seine erste semi-professionelle Homepage zu sehen?

Jetzt brauchen wir zwei Dinge. Erstens den Internet Explorer (wir passen die Page mit dem dummen IE an, da der Firefox das eh korrekt darstellt), zweitens den normale Editor.
Also, wir machen auf unserer Homepage einen Rechtsklick, öffnen das ganze mit dem Internet Explorer und auch mit dem Editor.

Der Anfang des Quellcodes sieht dann so aus:

Bilder

Bilder

Bilder

Wie gesagt, ich möchte hier keinen kompletten HTML Kurs anbieten, falls euch die Befehle unklar sind, bitte auf http://www.selfhtml.teamone.de nachlesen!

Bilder

Bilder 

Ihr seht ich habe meine original Homepage.html nicht bearbeitet, sondern nur eine Kopie davon. Das ist sicherer, falls mal ein fataler Fehler auftritt, hat man immer noch den original Quellcode.

Ich erstelle jetzt also eine Tabelle mit den gleichen Ausmaßen der Grafik. TD align=“left“ = der Text ist linksbündig, TD valign=“top“ = der Text beginnt ganz oben. Optional füge ich zwischen den </HEAD> und <BODY> Bereich noch ein kleines CSS-Skript ein.

Bilder


 Bilder

Jetzt haben wir sozusagen die Seite schon fertig. Nun dieses HTML Dokument in allgemein.html umbenennen. Dieses nun kopieren und dann wieder mit IE und Editor öffnen, weil wir jetzt den Newsbereich mit einbauen.

Da müssen wir nur die entsprechende Grafik, Homepage_27, als Hintergrund in einer Tabelle festlegen und dann den Text drauf schreiben. Die entsprechende Zeile lässt sich leicht im Quellcode finden, und durch diese Zeilen ersetzen:


Bilder

Dieses HTML Dokument wird unsere Startseite, also in index.html umbenennen.

So und nun ist eure Fantasie gefragt, ihr solltet nun die allgemein.html kopieren, den Text nach euren Wünschen anpassen, und dann in die jeweilige Seite umbenennen, also zum Beispiel „faq.html“ usw…

Nach dieser Arbeit sieht mein Ordner so aus:

 Bilder


Das war:
Workshop Teil 5.

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.042 • ZF-App 0.521 • Total 0.563