Animated Logo with artefacts/steps

Community Beginner ,
Apr 17, 2022 Apr 17, 2022

Copy link to clipboard

Copied

Hello guys,

 

I'm creating a new homepage and I want to have my vector-logo (*.svg) to be animated at some time.

The static image of my logo is sharp and crisp when I convert it to PNG and upload it to wordpress.

The animated logo instead (*.gif) shows some artefacts/steps on the sharp edges when uploading it. We already tried it in different pixelsizes, but didnt help either.

Can you help out what we doing wrong, or do you know an other solution? Im really frustrated. Is it an export problem?

Thats my homepage:

https://bavariandronedude.com/lol1/ 

left is the GIF, right is the static picture.

Hope you can help me out.

TOPICS
Import and export , Performance

Views

103

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 17, 2022 Apr 17, 2022

Copy link to clipboard

Copied

Due to Gif limitations, you will never get a sharp reslut with GIF as it supports only 256 colors 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 17, 2022 Apr 17, 2022

Copy link to clipboard

Copied

oh well, thanks. thanks for providing a solution ;).....

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 17, 2022 Apr 17, 2022

Copy link to clipboard

Copied

As already pointed out by Mohammad, this is a limitation in the file format since it technically can only have exactly one transparent color. That and of course AE not being great at even outputting GIFs. If at all, you may want to reconsider your strategy and export a regular clip or imagte sequence from AE and optimize it in Photoshop or one of the gazillion online GIF converters. Otherwise you may have to create an animated SVG and export it with Bodymovin'/ Lottie from AE or create it in Animate in the first place. Certainly your logo isn't impossible to create in a pristine quality, but you need to change your workflow.

 

Mylenium

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 17, 2022 Apr 17, 2022

Copy link to clipboard

Copied

Hey you both.

thanks for the comment. But I even dont need 256 colors - it has exactly 2 colors. transparent and white/black. 😉 If you took a look at the Homepage, the logo itself is very simple. 

Do you guys know whether i can upload a lottie file (or sth else) into wordpress and keep the sharp edges? It is really necessary.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 17, 2022 Apr 17, 2022

Copy link to clipboard

Copied

Wordpress accepts SVGs as regular images. HTML canvas objects can only be inserted via the Blocks editor or by messing around with the source code in a template. If you don't have full control over your WP install, the latter may not be an option, since many hosted sites don't allow full admin access. That aside you have a general misunderstanding. Even a two-color pixel image technically never has only two colors when it uses antialaising. The smooth curves and such produce inbetween steps and gradations in the color and need to be accounted for. That's why even a GIF like yours would and should effectively be saved with 16 or 32 color at least. 256 would of course be excessive, but wouldn't be an issue, since RLE compression as used by GIFs in this case doesn't bloat the file size. It's sort of self-optimizing due to the math.

 

Mylenium

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 18, 2022 Apr 18, 2022

Copy link to clipboard

Copied

Thanks again for the answer.

Am i something misunderstanding? A *.svg-File can NOT be annimated - at least I always thought that? You mean, we should export it as an animated *.svg-file?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 18, 2022 Apr 18, 2022

Copy link to clipboard

Copied

LATEST

We tried an animated, but the logo itself "BDD" is not rendering when genarating an animated svg...harp_black.gif

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines