Adobe Photoshop

**Daevild** · 12-29-2006, 01:29 PM

I'm currently designing my website in Photoshop and I recently learned that we use fluid/liquid layout in the coding so that everything fits in every screen resolutions.
So my question here is: in Photoshop, should I draw eveything very big, like I use a canvas 1280x1024 or I draw everything small, like I use a canvas of 640x480? If I go big.. it will take forever for the browser to compact it and and if I go small, i would lose quality when the browser enlarges it. So how big should I draw my stuffs because I'm currently using a canvas of a size of 800x600 but will it be good on a bigger screen or smaller screen?

**Republikin** · 12-29-2006, 02:17 PM

When making a fluid layout I usually use the smallest size pallet I can get away with and just make sure that I can slice the image in a manner that will leave me with design elements that are easily repeatable. For instance, if your header is 90% a blue and black gradient with only a logo on the left then for everything but the logo you only really need to slice a portion of the rest of the gradient. Then, with CSS you can make it a background image and repeat it.

**talk2frank** · 12-31-2006, 11:05 AM

I never make fluid layouts anymore as I believe fixed width enables more precise placement of design and content elements, but in the past I would have done something similar. Your layout in photoshop needs to be as big as the 'unstretchable' aspects of it are, and the parts that will be repeated or stretched need to be as wide as the pattern that must repeat.

I hope that makes sense but its the same as what Republikin said anyway, I believe...

**Daevild** · 06:57 PM

hmm.. thanks guys for these tips. Well I've done my layout, which should look like this:

I think I'm gonna change a few things in it so it will be easier for me to do the coding.
And about the slicing, I tried to slice the layouts and I ended up with like 30 .gif files, is it normal or is that too many?
I also tried to generate the css source by using ImageReady but ppl says it isn't good and, I would not say it isn't good, but I don't understand anything written in the source; everything seems to compicated. I would like to learn the css language, so if I have to change anything in the website later, I will know where and what to modify.
Does anyone have a good site for css complete beginner tutorials?

PS. By the way, some comments on the layout would be nice!

**woosh** · 01-02-2007, 08:07 PM

Try http://www.w3schools.com/css/default.asp for learning and this is a handy site too .... http://protolize.org/index.php?