Hoe converteer je PSD naar HTML/CSS?

Question

Stel dat ik een UI kit of een web design kit geplukt heb van het internet met een PSD bestandsextensie; hoe breng ik deze in html/css.

Ter verduidelijking; stel ik heb deze template: http://forum.fok.nl/templates/forum2009/html/showimg.html?http%3A//d13yacurqjgara.cloudfront.net/users/18812/screenshots/1153384/attachments/149235/realpixels.png

Hoe kan ik bijvoorbeeld die videospeler in der mate in html/css of in psd zetten dat er een video wordt geladen welke ik wil i.p.v. dat er zo'n foto te zien is met en halve groene bufferlader en een 'play' button midden op het scherm.

Evenals bijvoorbeeld die login tab waarin staat 'Emilie Clark' dat die naam een variabele is en dus afhankelijk is van de gebruiker die inlogt.

Kort gezegd: Het interactief maken of bruikbaar i.p.v. die standaard dingen.

 · Answer

Het antwoord is simpel, maar daarom niet moeilijk. 
Om een PSD file om te zetten naar HTML/CSS dien je alles te "slicen" zoals dat heet en vervolgens om te gaan zetten in code. Hoe je HTML en CSS schrijft kan je goed leren op http://www.w3schools.com

Inzake die videospeler zal het iets moeilijker worden dan je denkt. Daarvoor heb je de html5 videoplayer nodig samen met javascript om het resultaat te bereiken dat je graag zou willen. Iets die, wanneer je nog geen html & css kent, niet zo vanzelfsprekend is.

Ik zou zeggen start eerst eens met je te verdiepen in HTML en in CSS, en probeer eens de psd die je daar hebt na te maken. Zonder veel filmpjes etc. Wanneer dat klaar is, probeer dan eens een custom (zelfgemaakte) videospeler erin te stoppen.

De easy way is je video gewoon op youtube of vimeo zetten en dan de "code" die je nodig hebt (iframe heet dat) gewoon kopiëren en plakken in je website. Maar dan zit je natuurlijk vast met de styling van youtube/vimeo.

 · Answer

Via Photoshop kun je een PSD automatisch "slicen" of opknippen naar HTML. Photoshop creëert dan automatisch een HTML pagina met de plaatjes die zijn opgeknipt. De uitleg staat op deze pagina:

http://helpx.adobe.com/en/photoshop/using/slicing-web-pages.html

Dit is een snelle methode, maar niet netjes.

Het beste blijft om alles handmatig netjes te ontwerpen vanuit de PSD lagen, en elke laag apart te bewaren als een plaatje. Je hebt sowieso HTML kennis nodig als je dit wilt doen.

Hoe converteer je PSD naar HTML/CSS?

Antwoorden (2)

Bekijk alle vragen in deze categorieën: