[HTML] /CSS] PSD to HTML

[#Saiirex]

Hey, gibt es ein Tutorial wie aus einer PSD eine .html/.css Seite erstellt?

Also wo der weg erklärt wird wie man ein Design in Code umsetzt?

Damit meine ich auch slicen usw.

[Daifoku]

PSD to HTML ? slicen ? Das war mal im Jahr 2000 angesagt, mittlerweile wird alles per CSS gemacht.

Zunächst einmal nimmst du dir ein HTML5 Grundgerüst
Das erweiterst du dann mit semantischen containern (<header>, <footer>, <nav>, <section>, ...) oder eben divs ... und bildest dein Grundgerüst.
Das Grundgerüst rückst du dann mit CSS zurecht.

Beispielsweise ein 2 Spalten layout mit header und footer darüber.
evtl benötigst du faux columns für die beiden spalten oder einen CSS Hack oder Javascript. Ich bevorzuge faux columns. Einfach mal googln...

<header></header>
<section id="content">
<div class="spalte1"></div>
<div class="spalte2"></div>
</section>
<footer></footer>

Wenn das alles richtig angeordnet ist, kannst du deine Grafischen Elemente einfügen. Dazu solltest du background-image in der Stylesheet Datei verwenden.
Die Elemente schneidest du dir in photoshop einach zurecht und speicherst sie als jpg oder gif.

Das komplizierteste sind wohl grunge boxen (wenn man denn auf sowas steht....)

<div class="box>
<div class="boxtop"></div>
content....
</div class="boxbottom"></div>
</div>

.box würdest du auf relative setzen, einen border geben und eine background-color.
boxtop und boxbottom auf absolute und diese eben im Top oder Bottom Bereich der .box anordnen. Diese enthalten die Grafiken der Box als background-image.

[#Saiirex]

Originally Posted by Daifoku

PSD to HTML ? slicen ? Das war mal im Jahr 2000 angesagt, mittlerweile wird alles per CSS gemacht.

Zunächst einmal nimmst du dir ein HTML5 Grundgerüst
Das erweiterst du dann mit semantischen containern (<header>, <footer>, <nav>, <section>, ...) oder eben divs ... und bildest dein Grundgerüst.
Das Grundgerüst rückst du dann mit CSS zurecht.

Beispielsweise ein 2 Spalten layout mit header und footer darüber.
evtl benötigst du faux columns für die beiden spalten oder einen CSS Hack oder Javascript. Ich bevorzuge faux columns. Einfach mal googln...

<header></header>
<section id="content">
<div class="spalte1"></div>
<div class="spalte2"></div>
</section>
<footer></footer>

Wenn das alles richtig angeordnet ist, kannst du deine Grafischen Elemente einfügen. Dazu solltest du background-image in der Stylesheet Datei verwenden.
Die Elemente schneidest du dir in photoshop einach zurecht und speicherst sie als jpg oder gif.

Das komplizierteste sind wohl grunge boxen (wenn man denn auf sowas steht....)

<div class="box>
<div class="boxtop"></div>
content....
</div class="boxbottom"></div>
</div>

.box würdest du auf relative setzen, einen border geben und eine background-color.
boxtop und boxbottom auf absolute und diese eben im Top oder Bottom Bereich der .box anordnen. Diese enthalten die Grafiken der Box als background-image.

Ja sowas meinte ich. Ist ja im Endeffekt psd to html

[NotEnoughForYou]

PSD to HTML ? slicen ? Das war mal im Jahr 2000 angesagt, mittlerweile wird alles per CSS gemacht.

Trotzdem muss man (sofern man Elemente hat die nicht rein mit CSS umsetzbar sind) Elemente aus der PSD ausschneiden (engl. slice). Oftmals wird die Umsetzung eines Designs (sofern man vom Designer nur eine PSD bekommt) eben PSD to HTML genannt. Im Grunde ist daran ja auch nichts falsch, was du meinst ist denke ich eher auto generierte Elemente oder reine Bilder die dann per image map aufgeteilt werden.

[Daifoku]

Originally Posted by NotEnoughForYou

Trotzdem muss man (sofern man Elemente hat die nicht rein mit CSS umsetzbar sind) Elemente aus der PSD ausschneiden (engl. slice). Oftmals wird die Umsetzung eines Designs (sofern man vom Designer nur eine PSD bekommt) eben PSD to HTML genannt. Im Grunde ist daran ja auch nichts falsch, was du meinst ist denke ich eher auto generierte Elemente oder reine Bilder die dann per image map aufgeteilt werden.

Wenn man von PSD to HTML spricht, dann ist es nur logisch, dass man an die implementierte Photoshopfunktion denkt, die alle Slices in ein fertiges HTML Gerüst steckt.

Wie man einzelne Elemente Sliced, die komplizierter sind, habe ich bereits anhand eines Beispiels erklärt. Aufteilen in Top und Bottom und den Rand per CSS stylen und ggf. ein background-repeat rein.

Ich denke die Antwort zur Frage steht bereits in meinem ersten Post. Falls nicht, sollte der TS die Frage spezifizieren und ein Beispiel angeben.

[#Saiirex]

Originally Posted by NotEnoughForYou

Trotzdem muss man (sofern man Elemente hat die nicht rein mit CSS umsetzbar sind) Elemente aus der PSD ausschneiden (engl. slice). Oftmals wird die Umsetzung eines Designs (sofern man vom Designer nur eine PSD bekommt) eben PSD to HTML genannt. Im Grunde ist daran ja auch nichts falsch, was du meinst ist denke ich eher auto generierte Elemente oder reine Bilder die dann per image map aufgeteilt werden.

Genau das meine ich. Also wie wird aus einem Design in Photoshop eine Homepage.

Originally Posted by Daifoku

Wenn man von PSD to HTML spricht, dann ist es nur logisch, dass man an die implementierte Photoshopfunktion denkt, die alle Slices in ein fertiges HTML Gerüst steckt.

Wie man einzelne Elemente Sliced, die komplizierter sind, habe ich bereits anhand eines Beispiels erklärt. Aufteilen in Top und Bottom und den Rand per CSS stylen und ggf. ein background-repeat rein.

Ich denke die Antwort zur Frage steht bereits in meinem ersten Post. Falls nicht, sollte der TS die Frage spezifizieren und ein Beispiel angeben.

z.B. wie wird daraus eine Homepage:

[Daifoku]

Naja... was brauchst du denn für die Obere Navigation ? Den Hintergrund und jeweils ein Bild für den Hover/active Zustand eines Menü Items. Wenn du die Navigation fertig hast, arbeite dich weiter runter.

Ich würde Navigation + Login in den Header packen.. also quasi ein großes background-image für den header Bereich. header auf 100% breite und background-image mittig zentrieren ohne skalierung. Auf Alpha Kanäle willst du verzichten.... außer du stehst auf 5MB+ Bildmaterial pro Seitenaufruf

Ich glaube du solltest die gesamte Seite ohne Text als ein Slice nehmen... die Seite ist so ineinander verschnörkelt, dass man da ohne Änderungen nichts dynamisch machen kann.Dann ordnest du deine Elemente per CSS auf dem Bild an.

[Epvp User]

#Bootstrap benutzt man heute.

[.SkyneT.]

hat ne PSD extract Funktion, ob die was taugt weiß ich jedoch nicht.