Solved

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

Posted on 2006-07-08
2
1,410 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Add text to png file. 3 118
add colored shadow in AI CS5 9 191
Lite dgn, dwg free viewer 1 116
Employee Badges -- COLOR printer & software ? 2 125
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.
In this second Micro Tutorial in the series,  viewers will learn more basic shortcuts and functions of Illustrator. In this tutorial you will learn about the eyedropper tool, zoom , ellipses and more.
Learn how to create interesting presentations by including videos to keep your audience engaged using Prezi. Select "Insert" from the top menu in your Prezi editor: Select "YouTube Video": Paste the video URL into the prompt: "Select "Insert":…

813 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now