How to create a 3 colors band?

[vaindioux]

Hi

I am in the process of learning CSS for web design and a technique for layouts is called "The faux columns". In brief I need to learn how to create a 774 px wide band in 3 colors (A little like if you take a flag like France or Italy but 4px high only.), lets say blue (200px), White (374px) and Red (200px). Then using CSS I repeat the background GIF all the way down the columns as much as needed et voila.
I can easily do a 1 color band but have no clue as a new user how to do a 3 colors one.
Please provide a step by step walkthrough as I am new to PS if possible.

Photoshop CS
Windows XP

Thanks a lot for your help

Patrick

 

[Sark]

Not sure if i've understood correctly, but here goes.

I would create a selection that was 774pix wide by 4pix high, you can use Select/Transform to do this. Fill this selection with Blue paint.
Now add a new layer in the layer palette and use Select/Transform again but this time drag the left middle control handle inward, to the right, whilst constraining with the shift key. When the selection is 574pix wide fill with White paint.
Add another layer and reduce the selection from left to right again until it is 200pix wide and fill with Red paint.
Finally, just merge the three layers.

Sark

 

[BlueFlare]

Seems to me that you should not try to solve this in Photoshop, but CSS itself. It also allows you to be a lot more flexible and I think that's the whole idea behind faux columns.

 

[vaindioux]

Sark

I haven't tried yet what you wrote but it seems right on the money to me, exactly what I needed. I don't use PS a lot only to resize pics but will take a tutorial or two so I don't bug people like you all the time. Thanks again for your answers, you made my day.

BlueFlare

It can't be done in CSS, it's not me saying it, it's the CSS world. This is why the CSS faux columns was invented. I have been playing around with it for a while and the faux columns is the way to go for now until CSS improves.
Try to create a 3 columns layout with only CSS and the columns go all the way down even if they are not totally filled with content( that is key, if they have plenty of content they will go down), and they have different colors. Can't be done yet!
Thanks for your help

Patrick

 

[vaindioux]

I would create a selection that was 774pix wide by 4pix high, you can use Select/Transform to do this. Fill this selection with Blue paint.

That's as far as I can go, I create the new document at the right size and fill with blue. SELECT/TRANSFORM then is grayed out and can't be used. I can create a new layer and that's it.

Patrick


Now add a new layer in the layer palette and use Select/Transform again but this time drag the left middle control handle inward, to the right, whilst constraining with the shift key. When the selection is 574pix wide fill with White paint.
Add another layer and reduce the selection from left to right again until it is 200pix wide and fill with Red paint.
Finally, just merge the three layers.

Sark

 

[sPECtre]

Hello, Vaindioux!
Have you created a selection? (select>all)