PSD to HTML sliceing example

Question

I am not an expert in conversion of PSD to HTML. But would like to know the experts' opinion. The problem is when I see this kind of designs the only thing comes to my mind is that this design will have really big size (and geometrical and disk size) images in final html code inserted.

http://www.internetcoachingschool.com/demo/1.jpg

http://www.internetcoachingschool.com/demo/2.jpg

http://www.internetcoachingschool.com/demo/3.jpg

For example the third link I will slice a biiig background which includes all the things except text and the blue background. Then will add texts on that image in html and will say that body background-color is blue. Is it professional approach? If yes, then what drawbacks this approach has for this concrete page? What is the right way of treating this kind of designs?

Answer 1

Probably all of these can be created in under 300kb on disk. Creating a website out of a PSD while keeping bandwidth usage low is part of the profession of a web developer. Telling you how to do this is like telling a lawyer how to be a lawyer. There are no shortcuts to this, I'm afraid. To give you a little insight:

• The first is pretty easy. The gray gradient moves from top to bottom, so I can use image 1 pixel wide and repeat it using CSS. The blue blocks would be a .gif image, with 1 bit transparency. The image of the woman and the logo are JPGs. Altogether, with some CSS and a couple of images this design is easy to put together.

• The second has a some gradients but they're fairly unidirectional; again, slice in 1px wide images and repeat horizontally. The yellow bar could consist of 3 images; the left part, a repeating middle area, and the right part. The shiny 'Thank you' could either be a fairly large JPG or a PNG.

• The third image is fairly annoying because there are gradients everywhere and going in every direction. I'd probably discuss this with the designer, asking him/her to try to cut down the gradients to have just one direction (up-down). The uncommon large font ('Thank you') would be replaced with webfonts (either by finding something very similar, or buying them).

To be honest, in all of these cases, I'd discuss them with the designer because a 'Thank you' page with this much glows, gradients, shades and shadows is probably overkill. Designing web pages is a very specific skill and doesn't even come close to designing for print or other media, and usually when you're dealing with a web designer, he or she knows how to make a developer's life easier.

Good luck!

[edit] I wouldn't recommend CSS3 or mozilla/webkit specific solutions for rounded corners and gradients. These pages probably have to work in IE6 or 7, too. Don't rely on javascript too much, either.

Answer 2

A lot of that stuff can these days be done with CSS 3. But that should only be used if it's ok that users of older browsers have a less neat experience.

http://www.css3.info/preview/

But if you were to make it all into images I think you should use one large image to keep the http requests down.

Answer 3

Looking at the third example: You can do all of that in css and html if you leave out the spotlight effect at the bottom. http://css3pie.com/ will give you gradient, shadows and rounded corners in IE

It's clear the designer of these pages know little or nothing about webdesign to even design something like that.