Fade Image for Use as Website Background

MS
Posted By
Martin_Swanston
Mar 1, 2004
Views
552
Replies
10
Status
Closed
Hi
First post, so forgive me if this is easy – a real noob I’m afraid. Am in the process of setting up a website, and the client (there’s always one!) wants a background image, but the image supplied is very prominent. My plan is to fade it so that it becomes more of a watermark than an image and therefore won’t interfere with site content.
When I open the image, the Fade option is greyed out – what am I missing please? Regards
Martin

Must-have mockup pack for every graphic designer 🔥🔥🔥

Easy-to-use drag-n-drop Photoshop scene creator with more than 2800 items.

CW
Colin_Walls
Mar 1, 2004
First off, look up the Fade command in the manual/help and you’ll see that isn’t what you want.

This is how I would do it [but there are going to be at least 3 other good ways too!]:
1) Create a solid colour adjustment layer, select white. This will be on to of your image.
2) Reduce the opacity of the adjustment layer until it’s what you want.
3) Use Safe for Web to create a JPEG for the Web site.

You might like to keep the 2 layer version as a PSD in case you want to adjust it some more later. You could also experiment with colours other than white.
L
larry
Mar 1, 2004
Double click on the image in the layers pallet to rename the background layer. Then you can apply transparency.

Larry Berman
CW
Colin_Walls
Mar 1, 2004
Double click on the image in the layers pallet to rename the background layer. Then you can apply transparency

Will that be any use if the output format [JPEG] doesn’t support transparency? What I am saying is that this is slightly confusing, beacause you won’t see the result on the screen poperly. PS will just put in white [when you save], which is what I was suggesting in a more flexible and visible way.
L
larry
Mar 1, 2004
The Jpeg dosn’t need to support transparency. The washed out image using my technique will show as a washed out Jpeg. I do it all the time for web site backgrounds.

Larry Berman
MS
Martin_Swanston
Mar 1, 2004
Thanks Guys
As a bit of a ‘haven’t got a clue’ type with Photshop (my 12 year old son can do more than me!) I’ll give your suggestions a try – I’m assuming the image format isn’t an issue (it’s currently a JPEG, as received from the client – will it need to be converted before trying the abve, and if so what to? (see told you I was a noob!)
Thanks again
Martin
DM
Don_McCahill
Mar 1, 2004
Save the file as a psd once you get it. Multiple saves of jpg degrade, so this gives you a good image. Then use save for web to create the jpg after following the steps given by whichever method you choose.

I use Larry’s method, but always insert a white background layer behind the image so those little transparency checkerboards don’t appear, making it hard to visualize the image. I also recommend reducing the opacity BELOW what you think is best … usually 20%. If text will appear on top of the background, then anything stronger is too confusing.
L
LenHewitt
Mar 1, 2004
Martin,

Another way to get that ‘faded-out’ look is to open the Levels d/box (CTRL+L) and move the OUTPUT sliders toward the centre of the scale. LH slider controls how dark the darkest part will be and the RH Slider how light the lightest part will be.
MS
Martin_Swanston
Mar 3, 2004
Hi Again
Thanks to you all for the suggestions – used Larry’s as it was the most simple ( like me 🙂 ) As Don noted, I ended up with 20% opacity to get it as I wanted it. I then wanted to do the same thing for another image, but I could not ‘open’ the layer in the same way – it had a padlock against it, which I assume means it’s locked, and I could not for the life of me figure out how to unlock it so that I could change the opacity.
Any clues please?
Cheers for your help
Martin
L
larry
Mar 3, 2004
The quick way would be to right click on the layer and duplicate it. Then uncheck the eyeball on the background layer so you don’t see it anymore. The duplicate layer will allow you to set transparency.

Larry Berman
MS
Martin_Swanston
Mar 3, 2004
Thanks Larry
Am sure all the options under right click were greyed out, but I’ll give it a go. Will post again tomorrow if I have no luck.
Thanks again
Martin

MacBook Pro 16” Mockups 🔥

– in 4 materials (clay versions included)

– 12 scenes

– 48 MacBook Pro 16″ mockups

– 6000 x 4500 px

Related Discussion Topics

Nice and short text about related topics in discussion sections