Fading Scanlines

*smw* · 07-29-2009

I was wondering how to make the backgrounds that fade into a solid color.

For instance I have a thick scan line background, and a nice gradient. But how do I make it so I have the scan lines on top, and then fade into a solid color.

I realize this is a very basic thing to do, but I'm more code oriented than graphic.

Thanks.

Culann · 07-29-2009

Put your background that you want faded on one layer, then create an empty layer on top of it. Then get your gradient tool, and choose your foreground color as the solid color you want. Go to the gradient chooser dropdown menu, and select "foreground to transparent" (the second option). Make your gradient on the empty layer, and you're done.

*smw* · 07-29-2009

How would I apply it into my css. I can't use the repeat option can I? Then it wouldn't do the effect I'm looking for would it?

Culann · 07-29-2009

Put the picture file into a standard graphics format and put it in there normally? I'm a Photoshop guy, not a code guy

.

**Tamlin** · 07-29-2009

I'm assuming - since you mentioned css - that you want this as a background for a web page? The problem there is that you have to take into account that your visitors will most likely be viewing your page at a number of different screen resolutions. The usual way to get around it is to create an image file that is narrow (only a few pixels wide) but longer than the greatest screen-height that a visitor is likely to use. This will then repeat horizontally but never get a chance to repeat vertically - creating the illusion of a perfect vertical gradient.

According to the latest statistics, the majority of people browsing the web are using a screen res of 1024 x 768 or higher but currently I think it's unlikely you'd find many people with a screen res greater than 1920 x 1200. With this in mind, if you create an image that is, say, 10 x 2000 this should give the impression of a seamless vertical gradient for all visitors when used as a web page background - but remember that most visitors will only see the top half or so of the image.

Jacorre · 07-31-2009

I have a tutorial that might help.