Solved

How To Get Transparent GIF but Maintain The Translucent Effect on It

Posted on 2004-04-15
4
543 Views
Last Modified: 2013-12-13
We're in the middle of creating skins for our apps' header.

Pls refer to the below image
http://dev.otsb.com.my/chat/images/example.gif

The GREEN area should be WHITE background.
The WHITE translucent area should be TRANSLUCENT, just like how you see them.
Meanwhile, the YELLOW area, the color is not tied to YELLOW only. It can be red, blue, green, purple, etc. This area should be transparent and takes in whatever background color the cell has in the html file.

My question is, how come when the translucent gif exported, the translucent color lose it's shine?

Reply preferably by today as I need answers ASAP.

Sylvia
0
Comment
Question by:sylviawee
[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
4 Comments
 
LVL 4

Accepted Solution

by:
monolith_888 earned 400 total points
ID: 10833657
Sylvia,

There have been monumental headaches associated with trying to export a faded or gradiated(?) color into the land of the web.  Almost always you will get a pixelated, or distorted look that is yukky.

Basically, you're saying that the white color is the only actual part of the image sitting on the page, and that everything behind it is transparent letting through only the TD color.  When an image is faded to transparent, and *that* is the image that sits on the web, you're going to have issues.

My solution to you would be to have those images ready for use, premade if you will, so that when the user selects their color, that image (purple with white shine, green with white shine, etc...) is swapped in, instead of trying to use the background color of the cell to do that.  That way you won't lose your look.

-hth
Blake
0
 
LVL 2

Assisted Solution

by:itwerx
itwerx earned 100 total points
ID: 10884305
I'd have to agree with Blake. Trying to use partially transparent images will leave you with a very poor quality look. To achieve the effect you are after, you are better off preparing all the variations of the image then controlling the final look using CSS.

Hope this helps...
0
 

Author Comment

by:sylviawee
ID: 10897924
Blake, that's well written. I didnt use the partially transparent-fading images. Made my work easier by choosing slightly rounded but flat edges...
0
 

Author Comment

by:sylviawee
ID: 10897931
itwerx, that's a tedious work so put it off but I did some CSS on it to get the TD color to reflect the transparent area in order to achieve the rounded edges. thanks. u get 100 points.
0

Featured Post

Get HTML5 Certified

Want to be a web developer? You'll need to know HTML. Prepare for HTML5 certification by enrolling in July's Course of the Month! It's free for Premium Members, Team Accounts, and Qualified Experts.

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.
Not only does Prezi allow you to create non-linear presentations, it also makes it easy to apply transition animations between your frames. Learn how to apply a fade-in transition to select items and entire frames in this tutorial Select "Edit Path"…

617 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