Hi, have been trying to figure this out the whole nite and wld appreciate some help. How do i convert my PSD files to CSS? I have figured out roughly about using the 'slice' tool. What I figured was to use layer slices, such that each layer of my design has a slice and I don't have to manually draw the slice. However, the CSS code generated is nowhere near the final CSS generated by my coder. It's all absolute and the background is a fixed image rather than using functions like repeat-x. Can someone point me in the right direction of what I should be doing? Is using layer slice the best way? Or are the CSS generated from PSD done manually? What is the best way of converting PSD to CSS? Tks alot for sharing!
Photoshop generates very ugly CSS. The best way to create a CSS stylesheet of a layout designed in Photoshop is to generate the CSS code from scratch.
hmm..... so all good coders generate the CSS from scratch?? I knew that some modification of the CSS was necessary, but not expecting that it will be done from scratch. Then how does the PSD files help? How will one determine the exact color, shading, blending, etc options used in PSD and translate into CSS? Tks for helping.....
The PSD is used as a mock-up. When I'm creating a template based on a PSD, I usually cut out the individual graphic portions of the template, then create XHTML and CSS based on the colors and measurements of the PSD. A good link: http://erraticwisdom.com/2006/01/29/tutorial-coding-a-layout
tks Jim, u've been most helpful. Actually, have scoured the web for good tutorial and couldn't find anything. Have actually seen the site u recommended. It's still not clear how i can get the shading settings, etc into CSS. Usually, the background is done in CSS by using the repeat-x function. So how is this achieved? Do you just cut out a small portion of the graphic portion and then use repeat to achieve the shading, textile effects?
Exactly. CSS does not have any shading settings like Photoshop does. To duplicate the effect, it is necessary to use an image.
Yes, it's done from scratch. At least the good ones do it from scratch. The PSD files are sliced and then bits and pieces are used for the site. The absolute minimum use of images is what I try to do to keep file sizes low. Colors are grabbed with the eyedropper in PS and then the hex code is used in the CSS. Shading and other similar elements are simply images that are controlled with the CSS in the XHTML doc. Np...
tks so much.... so how do u create the single small strip of graphics to use with the repeat-x function when the background is with blending, glow, stroke, etc effects? Can someone enlighten?
Take your original PSD and crop the segment which contains the graphic you wish to use to repeat and save it.
tks, but what if the graphic has texture like blending that is not directly horizontal or vertical but diagonal? By cropping and repeating, u won't get the same effect.