How can I delete border lines from a 2 frame gif in photoshop?

Question

I am creating an animated logo for my web site. It is a simple 2 frame gif. The only difference between the 2 frames is that the first one has a glowing object and the second one doesn't.

Here's the first frame.

Now, after hitting save for web, I choose not to use matte because the background color I am using on the website is a gradient. And that creates this ugly thing.

As I said before, I can't just use matte because my website's background color is a grey and black gradient.

Is there anything I can do? I need this logo to be clean without lines and it needs to fit the gradient on my website.

Answer 1

.gif does not support alpha transparency, that is the reason for the “line” around your logo. The easiest way would be to include the gradient in the background.

The only problem would be a dynamicly changing background. To get alpha transparency on the web is using a .png, which does not support animations. But since you only have two frames, you can simulate the animation with a simple CSS or JS Animation.

Answer 2

As Afterlame suggests, the best solution to your problem is either:

1. Include the gradient in your image so that it can render the half opacity drop shadow that you're looking for.

OR

2. Simulate your animation through CSS or JS. This is the vastly superior option, as it gives you complete control over your situation. You won't have to edit a gif, or any difficult, framed resource like that. You can simply create two static images and toggle them back and forth, even apply nifty animations and transitions. This is definitely the way to go in this case.

An example would be to have a DIV with a background of your first picture, and then put the second frame as an IMG inside of it. Using css/js, simply fade the enclosed IMG in and out to achieve the effect you're looking for.