1

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.

  • Hi user385, welcome to GDSE and thanks for your question. If you want to know more about the site, please see the help center or ping one of us in chat once your reputation is sufficient (20). Keep contributing and enjoy the site! – Zach Saucier Mar 28 '15 at 13:10
3

.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.

1

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

  1. 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.