Moin,
Sagt mal ist das die Art und Weise neue Besucher die einfache Fragen haben zu begrüssen?
Ich bin eigendlich nur durch Zufall auf diesen Thread gestossen, und fand es von allen Beteiligten eine Unverschämtheit, eine zwar durchaus einfach zu beantwortende Frage nicht zu beantworten! Thema verfehlt, setzen, sechs! Allesamt!
Wieso hocken in so vielen Foren schreibfaule Semiprofis die auf Fragen antworten ohne was zu beantworten? Das frag ich mich in letzter Zeit immer wieder, diese Tendenz die User selber suchen zu lassen oder gegen die Wand latschen zu lassen, find ich voll mistig Ist das kollegial - nein! Ihr habt alle mal klein angefangen und ich verwette meinen Arshc, das Ihr genauso dämliche Fragen gestellt habt! Wenn Ihr alle nur auf Google oder die Suche verweisen könnt ohne inhaltlilch auch eine Lösung zur Hand zu haben dann behaltet diese wertlosen Kommentare doch einfach für Euch.
Wer helfen will der hilft, und wenn zum 100. Mal die selbe Frage beantwortet wird. Es muss doch nicht ständig das Rad neu erfunden werden...
---
So aber nun zum Thema:
Such selbst
Nein Spass beiseite, also wie fang ich am besten an...
Du solltest für den Anfang schonmal die Grundzüge von PS kennen, und die wichtigsten Werzeuge beherrschen. Davon gehe ich jetzt mal einfach aus, weil sonst kann ich Dir auch nicht weiterhelfen
Mache am besten einen Screenshot deines laufenden Browsers, und schmeiss den Screen in ein neues Dokument in PS. Mit Hilfe des Freistellwerkzeuges schnippelst Du nun die Browserelemte (Scrollbalken, Adress- und Tableiste) und OS-Elemente (Taskleiste, Dock) ab, und hast somit die reine Fläche zu Anzeige deiner Seite.
Mit Hilfe von "Bild skalieren" rundest die Breite ein wenig ab.
(Bei mir sind es aufn 15" TFT etwa 950 Pixel in der Breite, dies kann aber je nach Bildschirmgrösse varieren, und je nachdem ob man eine statische Seite oder eine in der Breite dynamische Seite plant sollten einem die Vor-und Nachteile der beiden Lösungen bekannt sein. Das würde jetzt aber zu weit gehen.)
Die Höhe ist erstmal egal, sollte aber ausreichend sein, als Nominalwert nehmen wir aber mal 1000 Pixel. Da haben wir erstmal genügend Platz.
Den Rest des Screenshot kannste nun einfach löschen oder mit einer Farbe deiner Wahl füllen. Alternativ lösch die Ebene und erstell ein Neue leere.
Nun mach einfach mal 4 Rechtecke in beliebiger Farbe, (Header, Navi,. Main, Footer)
Diese Rechtecke werden später deine grafischen Hintergründe für die Content-tragenden Elemente auf deiner HTML-Seite. Nun hast Du du in Photoshop ein Dokument mit 4 einfachen Boxen die später den Inhalt enthalten sollen. nun musst Du nur noch das Slice-Werkzeug gebrauchen und die Boxen vernünftig in Teile schneiden, stelle es Dir einfach wie ein Puzzle vor, das Du erst auseinandernehmen musst um es wieder zusammen zu setzen.
Denke bei der Erstellung der Seite in Photoshop an später zu nutzenden Platz, (für Banner, Text, und Bilder, dynamische Elemente, diese Slices brauchst du nicht als Bild exportieren da ja eh was anderes den leeren Platz ersetzt.)
Wie jetzt daraus eine HTML-Seite machen?
Es gibt dafür 2 Wege, den einfachen und den nicht so einfachen
Der einfache Weg: (Nicht zu empfehlen, aber für schnelle Ergebnisse ok)
"Male" deine Seite so wie du sie haben willst, inkl Text, exportier sie als HTML mit Tabellen und alles ist gut.
Der nicht so einfache Weg:
Öffne Dreamweaver oder ein vergleichbares Tool, und bereite eine neues Projekt vor.
In PS speicherst Du deine soeben erstellten Slices, speicherst alles und fügst sie als Hintergrund in deine HTML-Umgebung ein. Sobald das Grafische Gerüst in Dreamweaver steht, beginnst damit den Content ein zu fügen.
So Sorry, wir sind zwar noch längst nicht am Ende, aber ich denk das es für den Anfang
schonmmal weiterhilft. Ich hab dafür noch ein paar Links für Dich gesucht, die musste aber selber durchlesen, es sei denn du hast nen Screenreader
Gruß,
Fanthom
---
Weiterführende Links bitte lesen, sonst nix lernen:
How to Slice?:
Slice 1
Slice 2
How can I use Photoshop for the Web?
Photshop-Webdesign 1
Photoshop-Webdesign 2
Photoshop-Webdesign 3
Forenbeiträge:
Photoshop-Webdesign