Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

How to make a pictures background transparent on dreamweaver w/o losing quality?

Posted on 2006-07-08
2
Medium Priority
?
1,435 Views
Last Modified: 2008-02-01
Ok so while making a banner for a website in Photoshop, I made one that had a mostly transparent background so that the picture I used for the websites background showed through. However you cannot put a .psd into dreamweaver or have it show up. So if I make it a .jpg the background goes white instead of transparant which is exactly what I was trying to avoid.  Then I tried it as a .gif and then the back was mostly transparent but there was a white border around everything. The letters in the banner had a substantial glow and a drop shadow added which had a white border around, which looks terrible because the glow and shadow is supposed to kind of fade into the page's background but now fades into a white outline. I also had a little graffic guy next to the letters which similarly had a 5px or so white outline due to the drop shadow on him as well.

The only thing I can think of that I havent tried yet, is too actually make the banner part of the background of the web page, but I believe on different monitor resolution settings the banner would appear off center. I mean sure I could get it centered on my monitor but it would look ridiculous on anyone elses computer.    

Phtotoshop version: http://www.filefactory.com/?d2c5b2

I want it too look EXACTLY like that when I put it on the website. What do I do?

0
Comment
Question by:kdemetri
2 Comments
 
LVL 18

Expert Comment

by:Jose Parrot
ID: 17066841
Hi,

When an image is rendered to have a transparent color, exactly that color will be transparent in gif, for instance.
The rendering process creates an anti-aliasing effect, to avoid jigged limits, that is, the transition from image pixels to background pixels aren't abbrupt, are in steps instead. For example: if you have a white background and a brown sphere, the rendering process doesn't put a brown pixels side by side with white pixels. It makes the transition from  brown to white in 4, 5 or more intermediate colors, in a scale from brown to white. The final result is a soft transition, no crisp, no jagged.

The white pixels you notice around the opaque portion of the image aren't actually white. Are ALMOST white. Probably your "bad" images were created on a white background, then white was chosen to be the transparent color and the final image was applied over a dark background. The almost white pixels that were part of the scale from dark to white are still there. Of course, if you apply the same "bad" images on a white background they will be good images again.

The solution is to chose dark backgrounds (later turned transparent) for images that will be applied on dark web pages backgrounds.

Jose

0
 
LVL 38

Accepted Solution

by:
lherrou earned 1500 total points
ID: 17067630
>> The solution is to chose dark backgrounds (later turned transparent) for images that will be applied on dark web pages backgrounds.

To take it a step further, the solution is to chose a background very close in color to the color (or predominate color) of your current web page background.

You might also take a look at PNG. The Portable Network Graphic (PNG - http://en.wikipedia.org/wiki/Png) format, like GIF, supports transparency. Unlike GIF, it supports levels of transparency. Unfortunately, it is not fully supported by most current versions Internet Explorer, so you have to go through some extra hoops if you want to use it on the web (here's one fix you can use: http://homepage.ntlworld.com/bobosola/).

Cheers,
LHerrou
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Keep your audience engaged and get the most out of your next presentation with these quick Prezi tips.
Technology opened people to different means of presenting information, but PowerPoint remains to be above competition. Know why PPT still works today.
In addition to being a great web-based presentation tool, Prezi also makes it easy to save your presentation as a PDF to share with others as well. Learn how in this tutorial. Select the share icon from the top menu in your Prezi editor: Select "D…
Learn how to use the remote presentation tool in Prezi to allow you to harness the power of this cloud based presentation platform. You can show your presentation with a remote audience using this free tool.

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question