Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

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

Posted on 2006-07-08
2
1,411 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:JoseParrot
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 500 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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
I want to find a font for a Boxing logo 6 1,248
Screenshot Markup 6 105
D3, SVG, dragging a star. 2 166
VCD to mp4 11 194
Many programs have tried to outwit PowerPoint in terms of technology and skill. These programs, however, still lack several characteristics that PowerPoint has possessed from the start. Here's why PowerPoint replacements won't entirely work for desi…
Technology opened people to different means of presenting information, but PowerPoint remains to be above competition. Know why PPT still works today.
Learn how to set up basic frames and paths in Prezi and understand the open space that Prezi allows you to create presentations in.
It’s easy to embed any of your public Prezi presentations on your website or social network to share with others. Learn how simple it is in this tutorial.

856 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