PSD in HTML/CSS umsetzen

Hallo Com,

ich habe mir einige kostenlosen .PSD Templates heruntergeladen und wollte mal üben und diese versuchen umzusetzen. Man kann ja direkt die CSS aus Photoshop rauskopieren das scheint mir ganz interessant.

Möchte jemand mir einige Tipps geben wie ich das ganze Strukturier und überhaupt angehen soll? Habe bisher noch nie wirklich mit Photoshop gearbeitet, meine Aufgabe wird es sein ein Bootstrap Template aus einer PSD Datei umzusetzen.

Meine wichtigsten Fragen sind:

1. Gibt es bestimmte Techniken solche PSD files umzusetzen oder wird es von jedem gemacht wie es ihm gerade recht ist und man arbeitet sich von Ebene zu Ebene ran?

2. Die Grafiken die in der .PSD Datei sind, benötige ich einzeln wie z.B. den BG, Carousell Grafiken usw. wie bekomme ich diese? Ich kenne "Datei > Scripten > Ebenen in Dateien exportieren" aber kann man auch einzelne Ebenen exportieren?

3. Da es sich um Bootstrap handelt, müsste ich auch wissen wie ich das Markup schreibe, gibt es dazu Informationen im PSD file z.B. für die Heading Überschriften oder ist es so selbstverständlich für Webdesigner bzw. Webdeveloper die es dann umsetzen dass sie es entweder wissen oder einfach mal ausprobieren?

Hoffe auf hilfreiche Antworten, vielen Dank im Vorraus

Wie wäre es erst mal die Basics zu Lernen ?
Das Verstehen ist Grundlage und hierzu gibt es einige Grundkurse.
Sowohl in YouTube als auch auf Google

Mit Basics meinst du genau was?
Jeder Tipp ist hilfreich, meine oben beschriebene Frage ist auch eben das Ziel. Wenn du möchtest kannst du mir auch gerne eine Liste schreiben was man wissen/kennen sollte um sich an solche PSD files ranwagen zu können, Danke.

CSS3 und HTML5 lernen. Eigene Seite schreiben. Grundlagen verstehen. Und dann kannst du drüber nach denken eine PSD Datei in Quellcode zu "übersetzen".

LG Argon

Quote:

Originally Posted by TheArgon CSS3 und HTML5 lernen. Eigene Seite schreiben. Grundlagen verstehen. Und dann kannst du drüber nach denken eine PSD Datei in Quellcode zu "übersetzen". LG Argon

Danke für den sehr hilfreichen Tipp..

Ich möchte von jemanden der schon einmal so gearbeitet hat oder arbeitet wissen wie ich an die Sache rangehen kann, der mir meine oben genannten Fragen beantwortet. Mit HTML/CSS kann ich mittlerweile gut arbeiten, meine Frage war ob es einen Standardweg gibt solche Sachen umzusetzen oder ob man die einfach nach Auge und Hand einfach zusammenbaut.

Ich könnte bereits einfach mit den Informationen aus der PSD wie die CSS ein Template umsetzen, nun ist es aber alles zu umständlich wenn alles in CM und absolut positioniert ist.

Quote:

Originally Posted by Undaground [...] einfach nach Auge und Hand einfach zusammenbaut. [...]

Das ist der Punkte, deswegen erstmal basics.
D.h downloade dir keine fertigen PSD Datein sondern erstelle dir deine eigene (simple) und versuche diese erstmal in HTML und CSS zuschreiben.

NVU ist ein gutes Tool um zu sehen was man Wandelt bzw erstellt immer hin und her switchen dann Lernst du schnell dazu. (So war es zumindest bei mir früher).

höre zum ersten mal von so einer funktion.

früher hab ich alles per hand gemacht.
halte sowieso nicht soviel von so automatischen kram. funktioniert nie gut mEn

Quote:

Originally Posted by xinternet höre zum ersten mal von so einer funktion. früher hab ich alles per hand gemacht. halte sowieso nicht soviel von so automatischen kram. funktioniert nie gut mEn

An sich muss ich auch alles per Hand machen, wenn man in Photoshop mit Rechtsklick auf eine Ebene klickt kann man sich die Ebene CSS anzeigen lassen in der die Informationen zur Grafik stehen wie Position usw. es gibt zwar Programme die das ganze Projekt in HTML/CSS konvertieren können aber man hat am Ende bei weitem nicht das Ergebnis wie von Handgemacht.

Photoshop ist meiner Meinung nach kein gutes Programm für Webdesign, da gibt es viel bessere. Die Mehrheit aber benutzt Photoshop aus welchen Gründen auch immer, wahrscheinlich weil die meisten das dann nicht umsetzen müssen sondern die Agentur die den Auftrag bekommt.

Achso, die Fragen haben sich erledigt habe es nun hinbekommen - Danke an die Professoren hier ;)

#closed (on request)