How do you do this? Gradient with background image blended

[nachoninja]

I can't find a tutorial anywhere, and need to recreate this for several colors. Notice how the diagonal lines fade away at the bottom.

 

[krazyjosh5]

why dont you do something like this:

body {
    [B]background: white url(whatever.gif) repeat-x top;[/B]
}

thatll stretch your gradient across the top while setting the page background to white

edit: oh shit, do you mean having the diagonal lines fade out over some sort of gradient?

if its in a site already, as always, check how the site does it.

check this out, too: Fading Corners using a Background Gradient | BittBox

 

[nachoninja]

no no, I need that image recreated in different colors

 

[krazyjosh5]

hmm... let me think about this one for a few...

 

[agua]

Just open it in Photoshop and do a color overlay or replace color, or hue saturation.

Heres on I googled Photoshop Tutorials From New Tutorials | COLOR ADJUSTMENT: Hue Saturation Tutorial

 

[illkity]

Create 2 layers:

1. bottom layer, white background, black foreground.
2. top layer. solid color of your choice.
3. select bottom layer, use gradient tool to create a fade black to white (or white to black)
4. select top layer. set mode to addition. flatten image, done.

I can make a tutorial for GIMP if you like. But those are the basics.

 

[Zurvan]

I don't know what software you're using, but in Fireworks, there's a transparency option in the gradient, on top of the bar, with the colours below. I would set up the green with diagonal lines, and then on top of that, put a solid white rectangle, and gradient it to transparent from bottom to top. I think that will give you the effect you want.

 

[nachoninja]

Just open it in Photoshop and do a color overlay or replace color, or hue saturation.

Heres on I googled Photoshop Tutorials From New Tutorials | COLOR ADJUSTMENT: Hue Saturation Tutorial

Perfect! +rep

Thanks to you illkity as well

 

[krazyjosh5]

oh doh i thought you wanted a solution where all you had to do was change a hex value (ie in a CSS document) :X i could have told ya that

 

[Fewleftstanding]

Use photoshop, google for a couple gradient tutorials.

 

[smap]

Creating it from scratch is pretty easy with the gradient tool but depending on situation these might be easier:

Photoshop -> Image -> Adjustments -> Variations (very nice/quick/easy - see attached)

or

Layer -> New Adjustment Layer -> Color Balance