[Webinar] Streamline your web hosting managementRegister Today

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

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

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
kdemetri
Asked:
kdemetri
1 Solution
 
Jose ParrotGraphics ExpertCommented:
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
 
lherrouCommented:
>> 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

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now