Jump to content

.gif is blurry (Windows BETA)


Recommended Posts

Hello,

 

I'm very new to Affinity Designer and I was so happy to see it coming to Windows. I'm used to Adobe Illustrator, so both programs are a bit different, but I want to get used to Affinity. I just installed Affinity Designer Windows Beta and tried out a simple logo design for first impressions. After I was finished, I wanted to save it as a .gif file. When i opened the .gif file, it was pretty blurry somehow. What am I doing wrong?

I will attach a comparison between the exact same file, once saved as .gif in Affinity Designer and Illustrator.

 

 

As you can see, the Affinity .gif is not sharp at all, the .gif from Illustrator though is crystal clear. The .jpeg although is fine for some reason. Looks like the Affinity file is exactly 1/2 the size of the Illustrator file. So again, what am I doing wrong here?

post-32508-0-44207800-1467412131_thumb.jpeg

post-32508-0-59831100-1467412131_thumb.gif

post-32508-0-81674500-1467412131_thumb.gif

Link to comment
Share on other sites

Yes, yours is perfect. Although I tried your settings, it does not work for me, it's still blurry.. Another thing is, your file size is 4.82KB and mine is just 1.16KB. There must be something wrong... I mean even Microsoft Paint does a crystal clear "This is just a text" .gif ;)

 

I have reinstalled Affinity Designer, still the same.

Link to comment
Share on other sites

Did you use a transparent background? The problems seems to be with transparent background only, a white background works fine and the text is sharp. I need transparent backgrounds though.

Link to comment
Share on other sites

What is

 

1) The pixel size of the block you have exported

2) The Font

3) The Font pt size

4) The line pt size

5) and the settings used

Windows 11 Pro 64bit ¤ AMD Threadripper 3990x ¤ Nvidia RTX 3090 ¤ 256GB DDR4 Ram ¤ ROG Zenith II Extreme Alpha

Link to comment
Share on other sites

I created a 450x120 px document. The font I used is Arial with 15 pt size and 15.5 pt line size ('default').

You can see the settings and export preset on the attached screenshots. I have played around with the export settings, but sadly did not help. The attached screenshot from Bhikkhu Pesala is perfect, but he got a white background. I can export the same text with any colored background and the text will be perfectly sharp. My problem is, that text on a transparent background is not sharp at all.

As you can see, the 'T H I E' are perfect, but the 'S A X' are strange.

post-32508-0-33257100-1467742542_thumb.gif

post-32508-0-13950200-1467742552_thumb.png

post-32508-0-12023300-1467742555_thumb.png

Link to comment
Share on other sites

Well, but still.. what if I wanted the file to be .gif or make an .gif animation based on transparent background? It might be a rare case... I don't know... but I DO use .gif and so far it did not work properly with Affinity Designer, sadly :(

 

Maybe I just use the wrong settings!? I can just hope there is or at least will be a solution in the future. As you can see in my first post, it works perfectly fine with Illustrator, I'd bet there is a solution for Affinity as well.

Link to comment
Share on other sites

This looks like the export of gif's requires more options. It is only exporting at 1bit depth which is why the file size is smaller than AI which (I guess) has exported at 4bit depth. The reason I say this is because DP has more options and can export a 4bit depth gif that is the same quality and filesize as the AI gif. When I exported the same DP file at 1bit depth it produced a filesize and quality the same as AD - see files attached

 

post-28493-0-84472900-1467751914_thumb.gifpost-28493-0-87438500-1467751941_thumb.gifpost-28493-0-41288000-1467752058_thumb.gif

Windows 11 Pro 64bit ¤ AMD Threadripper 3990x ¤ Nvidia RTX 3090 ¤ 256GB DDR4 Ram ¤ ROG Zenith II Extreme Alpha

Link to comment
Share on other sites

In my case, as I posted on another topic, I just can't get any export to be transparent. I tried exactly the same settings for gif as well, posted by @Bhikkhu Pesala and it also did not help. :(

 

Couldn't find a way to post the images of the settings I tried or the affinity file. But I basically did a blue bg with a red square and a pink circle in front and tried to export either the circle alone or both the circle and the box, leaving a transparent bg and that never works, no matter what :(

 

I have version 1.5.0.4

 

 

---> Edit.

Ok, @Ken Cope solved it on the other thread. Thanks.

Link to comment
Share on other sites

  • Staff

Well, but still.. what if I wanted the file to be .gif or make an .gif animation based on transparent background? It might be a rare case... I don't know... but I DO use .gif and so far it did not work properly with Affinity Designer, sadly :(

 

Maybe I just use the wrong settings!? I can just hope there is or at least will be a solution in the future. As you can see in my first post, it works perfectly fine with Illustrator, I'd bet there is a solution for Affinity as well.

Could you attach the file you're trying to export please?

 

The problem with GIF transparency is that only 1 colour can be marked as transparent therefore a pixel is either 100% transparent or 0% transparency (fully opaque). This can lead to some very jagged/aliased looking images (especially with curves). The PNG format however is much better as it allows for pixels to have a range of transparency from 0% transparency (fully opaque) to 50% transparency to 100% transparency. This means that curves get a nice feathered effect.

 

Unfortunately what you are trying to do with a transparent background is simply not possible using the GIF format. Looking at the output from Illustrator it is actually 'cheating' with the transparency. It is fading out from black to grey to white to improve the look. However this looks bad when placed on a dark background (see attached).

 

We do offer different resample options for export which ideally should help with these situations however it currently doesn't appear to affect the outputted file in anyway so I shall take a look into that.

post-37-0-69667800-1467790995_thumb.png

Link to comment
Share on other sites

There is no problem getting antialised text with GIF. I exported this from Affinity as PNG, opened it in IrfanView, and saved it as GIF with transparency. The quality is far better than exporting from Affinity, because there are many more colours. 

post-28512-0-94632700-1467791052_thumb.png

post-28512-0-72212700-1467791057_thumb.gif

AMD A10-6800K, with Radeon HD Graphics 4100 GHz

8 Gb on Windows 10 64-bit build 17763.316 •  My Free OpenType Fonts

Link to comment
Share on other sites

  • Staff

There is no problem getting antialised text with GIF. I exported this from Affinity as PNG, opened it in IrfanView, and saved it as GIF with transparency. The quality as far better than exporting from Affinity, because there are many more colours. 

This is not particularly helpful to the user and to us. We are looking at trying to resolve issues with Affinity and not telling users to put it through some other software.

 

Sorry, I may have misunderstood your intent. I am struggling to get Affinity to give this output so will get an issue reported - however it is the same as the Mac. Still it is worth noting that the GIF approach is still not the best when using text on transparent backgrounds as i've shown above it looks horrible when placed on darker backgrounds.

Link to comment
Share on other sites

  • Staff

There is no problem getting antialised text with GIF. I exported this from Affinity as PNG, opened it in IrfanView, and saved it as GIF with transparency. The quality as far better than exporting from Affinity, because there are many more colours. 

 

It looks like InfanView blends the antialiasing to white. This will cause a very visible white halo around the object when shown on anything but a white background. Is this something people want? We can add it if people would find it usable.

Link to comment
Share on other sites

I think the user should be able to choose how many colours to use for export. People should abandon GIF in favour of PNG because it is a superior format, and often produces smalller file sizes for the same number of colours.

 

Although one can change the GIF options for the attached file, it is not exported with RGB 8-bit.

 

However, some may need GIF for some reasons, especially animations.

 

Maybe BPG is the way to go for the future

Just Text.afdesign

AMD A10-6800K, with Radeon HD Graphics 4100 GHz

8 Gb on Windows 10 64-bit build 17763.316 •  My Free OpenType Fonts

Link to comment
Share on other sites

This looks like the export of gif's requires more options.

 

I think the user should be able to choose how many colours to use for export.

 

File > Export does have many more options, that are hidden under the More button at the bottom of the dialog. These include options for setting the number of colours for PNG and GIF. However, for GIF on Windows those options seem to be permanently disabled when they should be permanently enabled. I'll add this to the bug list.

Link to comment
Share on other sites

  • 5 months later...

I have only just noticed this when I was exporting .gif AND .png!

 

See the attached files:

 

PNG

 

display.png

 

 

GIF

 

display.gif

 

These were exported via default settings.  I have tried various settings but still the same.  In Affinity Design, it is clear and crispy but when exported, it's a bit blurrey?

Link to comment
Share on other sites

Well, I have just found a solution, by selecting 'Nearest neighbour' when exporting.  This is what it should look like this:

 

display%20nearest%20neighbour.gif

 

I don't know why it isn't 'default' preset for exporting GIF and PNG?

 

I think it has to do with image size being in decimal points - e.g. in program, the size is actually 468.7 x 378.8, which I believe, can cause 'blurred' export?  Is there a way to stop program using decimal points in pixel size?

Link to comment
Share on other sites

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.