PDA

View Full Version : Creating design comp in photoshop, exporting graphics to code in HTML/Css



rimeister
17 May 2011, 01:35 PM
I just want your thoughts on creating a design comp/mockup in photoshop and then exporting some (or all) of the graphics to be coded with html/css to create the functional site. Does anyone have a specific method or approach to this that they would like to share? I have been looking at tutorials on slicing a design in Photoshop and then exporting the images/html using the "save for web feature", but this seems to produce table-based designs and semantically bad code. I'm also reading a tutorial from volume six of Web Designer Magazine (http://www.webdesignermag.co.uk/) where they show how to take photoshop designs and convert them into HTML pages, but I notice they don't make use of the 'slice' feature in photoshop and instead focuses on using the 'crop' tool to cut out the different parts of the image so they can be saved as individual images and later inserted into the html/css code.

I feel like this is the route I want to go for my design process (Drawing site layout by hand -> polished Photoshop design-> Show comp to client -> take photoshop design and render in HTML). Has anyone refined this process and if so could you share details on your working method?

Best,

Rimeister

cadenuo
17 May 2011, 05:27 PM
well i know i do my mock ups in photoshop but anything and everything that can be done in html and css i do i use as few images as possible