[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 225
  • Last Modified:

Fading an Image for web page background

Hi guys.

I am fairly new to photoshop and have been asked to produce an image that my company can use as a background on its web page. It is a photo from a marketing photo shoot and is very bright and the contrast is excellent.

I am trying to take this picture and make it almost transparent / translucent so that it look fairly subtle as a background rather than an "in your face" photo.

Any help would be most appreciated

Regards

Duncan
0
DavidMein
Asked:
DavidMein
  • 6
  • 4
  • 3
  • +2
5 Solutions
 
walkerkeCommented:
Is there something behind the image that you need to show through (partial transparency/translucence)? Or do you just want to dim the image so that the foreground will not be obscured?

To dim the image, select either Levels or Curves from the Image/Adjustments menu. If you select curves, grab the dark end and make the curve nearly flat instead of diagonal. If you select levels, grab the dark end of the bottom slider (output) and drag it nearly all the way to the other end.

If you need something behind to show through, you may be out of luck. It is possible to make an area totally transparent so long as it is saved as a GIF, PNG, or JPEG 2000. But I don't know of a way to make the image partially transparent.
0
 
cre8tiveCommented:
You can try a technique similar to the one here:


http://www.experts-exchange.com/Web/Graphics/Photoshop/Q_21824312.html

If you just want to make the image lighter try this:

Open the image in photoshop.
Go to the layers palette.  Create a new layer. Make sure its under the one you want to lighten.
Choose the layer you want to make transparent. In the layers palette adjust the opacity until its as subtle as you want.




0
 
YoungBonziCommented:
1. make sure windows > layer is open
2. duplicate layer
3. delete the original layer
4. slide the opacity bar on the copied layer to desired transparency

that's all you need to do there.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
walkerkeCommented:
cre8tive and YoungBonzi,

You've both given methods of making an image partially transparent in Photoshop, how do you propose to save the image to be used in a web page?
0
 
YoungBonziCommented:
Are you asking how to save the image or the code to put it in a webpage?
0
 
walkerkeCommented:
What format? GIF doesn't support partial transparency. I'm not sure about JPEG 2000 or PNG.
0
 
jfredricksonCommented:
PNG24 supports partial transparency, but IE6 or earlier doesn't support transparency in PNG images. This will improve when IE7 becomes the norm since it includes support for alpha transparency in PNG. There are workarounds in the mean time, but none that work for background images as far as I am aware.
0
 
SlynkyCommented:
Hi, DavidMein,

I make "watermarked" images or "washed out" images for pages all the time.  There is no problem lowering the transparency as suggested above and then doing a "Save for Web".  The image will not have any transparency after the save but the effects of lowering the opacity will carry through to the output type of JPG.  This is what the questioner wants and Saving for Web as a JPG will give him that.

One other note (because this irritates me some).  Lowering the opacity on the layer with the image (make sure it's not the background image or you can't adjust it) usually results in all those B&W transparency squares "taking over" the screen...especially if you make it really (!) light (like around 5% -15%).  Here is another way to do it so you can see how light it is right away:

(1) Fill a layer UNDERNEATH your image with white THEN do the the opacity setting on the image

(or)

(2) Just use Image -> Adjustments -> Hue/Saturation and then slide the Lightness slider to the right as needed.

Hope this helps.

Regards,
Slynky
0
 
cre8tiveCommented:
David Mein,

I think we are all giving you similar techniques for doing this.
If you are using the methods that Slnky and I suggested you wont need to save the image as a transparent one. You just need to save it for web. Its similar to the way it was done on the link I gave you. Make sure you save it as a jpg as Slnky suggested.

To save for web in photoshop:

http://www.tutorialoutpost.com/count/3758
0
 
walkerkeCommented:
I think the author has abandoned the question. He hasn't responded to any of my requests for clarification. The title of the question suggests he wants a faded image which is easily doable in Photoshop and saved for the web. But the question suggests that he wants it "transparent/translucent" which is not doable in Photoshop as an independent image (apparently it will be in IE7). He can blend the transparent/translucent image with the background and create the desired affect in Photoshop, but they cannot be saved independent of one another for use in the web. They can, however, be permanently combined and saved for the web using the methods listed here as well as others.
0
 
jfredricksonCommented:
Why do people keep saying that transparent images are not possible? It is most certainly possible with certain fixes. For example, take a look at: http://homepage.ntlworld.com/bobosola/

The only limitation is that none of these fixes work on transparent images that are placed as a background.
0
 
walkerkeCommented:
I stand corrected -- thanks for enlightening me. Modern compliant browsers (mozilla/firefox, opera, et.al.) do support partially transparent images; yet-to-be-released-but-still-non-compliant IE7 will also support them; a hack is available for non-compliant IE5.5-6. I didn't know this before.

Other experts above have shown how to achieve the effect in Photoshop. Once the desired effect is achieved, choose Save for Web from the file menu and choose the PNG-24 preset, making sure that transparency is selected.
0
 
SlynkyCommented:
I didn't bother to join the debate because I feel confident the questioner has no need of transparency in the final image (even though s/he used the word, translucent.  It seems clear enough to me that there is only a need for a washed-out image to "sit quietly" in the background and not "interfere" with whatever is destined for the foreground.

Slynky
0
 
cre8tiveCommented:
jfredrickson,

I agree with Slynky. I just didn't think it was needed.
0
 
jfredricksonCommented:
Well the author never really clarified what he was looking for, so all of the answers given could have been helpful. It's hard to say though with no feedback from the author.
0
 
walkerkeCommented:
I agree. It ended up as more of a discussion forum in which I learned as well as advised.
0
 
cre8tiveCommented:
I say distribute the points evenly between all.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 6
  • 4
  • 3
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now