Guys i really wanted to learn how to perfectly create a website from PSD.. can you give me a comment on how you do it On your own way so i can understand easily... Will rep if i find your post useful at my questions.. thanks, Kojak
I draw boxes around the parts of the site to keep in mind what is where and name them: header, colomn, navigation, footer, useless mainpage image, etc. These will be my div boxes to play with, or the site builder's. If I make an image of a webpage for someone to build, I don't make them open a graphics programme and cut out the images. I make the images seperate as I build the page image, and send the seperate image files to the HTML writer. That's the way to do it, especially with gradient backgrounds-- I'll make a few pixels thick tiny itty bitty gif, and the site builder can use background-image: url(blah.gif) repeat-x or repeat-y whatever.
Cutting up images before it's done will ensure the design will probably break on font-size increasing (example here: http://codepress.co.uk/guide.html#filepreparation ). It's fairly important to have the ability to open up the graphics program because good developers have all the tools to do the image cutting up themselves and may use better methods for the site. If the image is flattened (would always recommend a PSD or AI file over this), it should be in a lossless format, with no added gamma, such as a TIFF if the developer is to work with the best quality images for cutting. A really top tip to ensure almost pixel perfect layouts; Make a jpg of the PSD, load that jpg into a HTML page, so you have a flat screenshot of the final site. When you're building the site, open up two tabs in your browser. One for the development and one for the screenshot. You can then 'flick' between the two tabs to ensure everything lines up perfectly.
The images only break if they are not big enough for the size of the container. If it's a gradient background, you have a background color (hopefully) of one end of the spectrum which takes care or any enlarging of the div due to increased font size (good to have anyway, some people turn images off). This can always be taken care of in advance (but yes the user increasing font size does have to be considered). And there is one problem with tiffs-- there is no one tiff. I make a tiff in one imaging program, unless the other guy has the same program, I dunno if he will be able to open and see the exact same file, as it matters which type of tiff it is. Tiff still needs to be converted to a png or better (for older IEs) a gif, since tiff is not (yet) able to be displayed on many browsers. It is nice for color depth, but I haven't met anyone (yet) who is that picky about it-- I don't work for a printer. I haven't done that yet, but it sounds like a good idea. I'll try it, except I won't change to a jpg because I'm lazy (my final main image is usually a png when I'm done).
thanks for the input guys.. rep added. my main problem about designing is the background image of the content.. like the round border at the contents.. i want it to be flexible without limitation on how many text i add.. KOjak