Hvordan lage perfekte CSS/HTML-maler ut fra Photoshop-design

Hvordan lage perfekte CSS/HTML-maler ut fra Photoshop-design

Innleggav lifeform » tir 07.02.2012 7:40

Noen som har en step by step tutorial på hvordan man lager perfekte CSS/HTML-maler fra en PSD-fil?

Jeg vet hvordan man slicer, men skulle gjerne hatt en tutorial på hvordan de profesjonelle maldesignerene konverterer sine Photoshop design og layout over i perfekte maler.

Har hatt en lang pause fra webutvikling, men har brukt helgen til å prøve sette meg litt inn i dette igjen, og har kommet over http://blueprintcss.org/ som CSS-rammeverk som jeg synes virker lovende.

Gjerne hatt en step-by-step guide for hvordan proffene gjør dette.
medlem i 108 måneder
 

Re: Hvordan lage perfekte CSS/HTML-maler ut fra Photoshop-design

Innleggav Forth » tir 07.02.2012 11:39

Jeg gjør dette "daglig" :)

Skal du ha pixel perfect implementasjon og ikke minst optimalisert grafikk slik at det tiler og laster optimalt er det ingen "gylden oppskrift" på dette.

Jeg skriver både HTML og CSS fra bunnen, og tar ut grafikkbiter fra photoshop filene for å bygge element for element. noe er ren "copy paste" over som nye grafikkfiler, og noe må tilpasses før implementasjon (feks en forløpning, hvor man lager en bit med riktig høyde og bare noen piksler bredde man looper på x-aksen). her må man bare bruke erfaring på hvordan det er best å hente ut grafikk. hva som er .jpg, hva som er transparente png, hva man evt lager som en grafikksprite for hovereffekter ol.

Slice verktøyet er ubrukelig om du bryr deg om god kode og god implementasjon, det samme er etter min mening et predefinert malverk, såfremst ikke photoshop designet er basert på dette til å begynne med.

Så her er det godt gammeldags håndtverk som må til, samt kjennskap til å bygge rammeverk fra bunnen i HTML / CSS, slik gjør "proffene" det hvertfall. ingen easy way one button løsning desverre :)

Brukerens avatar
medlem i 169 måneder
 

Re: Hvordan lage perfekte CSS/HTML-maler ut fra Photoshop-design

Innleggav lifeform » tir 07.02.2012 12:06

Ok supert :-)

Synes det var litt knotete å designe til dette Blueprint-rammeverket, så den er grei :-)

Konkrete fordeler med å designe til et slikt CSS-rammeverk - hva er de evt?
medlem i 108 måneder
 

Re: Hvordan lage perfekte CSS/HTML-maler ut fra Photoshop-design

Innleggav Forth » tir 07.02.2012 13:15

Du sparer deg for noe tid, mtp styling for reset av default browser stiler, uttskriftsversjoner og predefinerte grid.

Bruk gjerne et rammeverk, men gå gjennom manuellt og plukk kun det du trenger fra det.
Det ligger antagelig en bråte klasser og ID'er i den css fila du aldri kommer til å bruke :)

Jeg bruker jo i prinsippet et slikt rammeverk selv, bare at det er egenutviklet over tid,
har mye "default" stuff jeg tar med, som reset og clearfix etc. dette skriver jeg ikke på nytt hver gang :)

et tips er hvertfall å ha full kontroll på hva alt er, sånn får du også ryddig og fin kode :)

Brukerens avatar
medlem i 169 måneder
 

Re: Hvordan lage perfekte CSS/HTML-maler ut fra Photoshop-design

Innleggav lifeform » tir 07.02.2012 18:11

Super. Hva er dette reset.css-stilsettet? Hvordan funker det og hvordan tar jeg det i bruk
?

Tenker jeg bør lære meg CSS3 og HTMl5. God plan? :-) XHTML, hva er det godt for?

----

Update: WOHO! Klarte lage mitt første noelunde perfekte CSS-stilsett med custom grafikk, avrundede hjørner osv... :-)

https://skitch.com/lifeform/g9ues/min-f ... ed-hjorner

Er jo rimelig enkelt når man bare skjønner at man må bygge alt ut i bredde og høyde. Piksel for piksel.

Hvordan blir IE-støtten for dette her ? Hva må jeg gjøre for å lage det perfekt også for IE ?

Forstår Microsoft selv fraråder IE 6-8 nå, så kanskje på tide slutte bekymre seg for denne nettleseren endelig?
medlem i 108 måneder
 


Returner til CSS



Hvem er i Forumene

Registrerte brukere: Google [Bot]