Solved

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

Posted on 2006-07-08
2
1,417 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
[X]
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
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 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: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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

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 this Micro Tutorial viewers will learn how to remove an unwanted object using Photoshop’s feature known as content-aware fill.
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":…
Suggested Courses

628 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