Jump to content
Tevya

Designer suddenly exporting very soft or fuzzy vector to bitmap

Recommended Posts

Hi, Affinity Designer has been fine in the past. But suddenly (maybe it's just this one image?) is exporting a very soft or fuzzy image. It's 100% vector and text, so there's no raster/bitmap involved until I export it to PNG. But when I do, it looks much softer, to the point of blurry, than it does in Designer at any zoom level. This happens when exporting at both 100% and at quarter-size. I'm attaching the affinity file and the PNGs so you can see.

I've tried adjusting the document DPI (since one post suggested that could help), but this is for the web and is all pixel-based, so DPI shouldn't matter (from what I understand).

banner-772x250.png

banner-1544x500.png

rich reviews banner.afdesign

Share this post


Link to post
Share on other sites

FYI: I can take a screenshot of it, then pull that into Photoshop, resize there, and export and get a sharper image. AD's renderer is rendering it just great inside the app. But for some reason goes all soft and blurry when exporting. It has to translate to pixels in it's internal-renderer, why can't it use that same method to convert to pixels as part of the exporter? I always assumed it did something like this in the past, since it's always looked nice and sharp. But suddenly (or on this specific project) it's not handling it well.

Oh, and I think you'll need Roboto font to view the affinity file correctly.

Share this post


Link to post
Share on other sites

Hi Tevya,

It doesn't look fuzzy when I export it either (see attached) Please could you go to File > Export choose PNG then hit the more button and provide a screenshot of the window that appears?

Thanks

C

rich reviews banner.png

Share this post


Link to post
Share on other sites

I appreciate both your effort, but yours both look soft, even blurry, just like mine.

To me the easiest offender to identify is the sides of the white boxes on the blue background. What should be a nice, crisp line white one pixel and blue the next, is instead a few lines of pixels that are gradient from the solid white to the solid blue. But it's not just there, all the text, shapes, etc, it's all that way. It's just easiest to see there, because it should be solid white one pixel and solid blue the next one over. The export produces very soft edges on everything and is much softer/blurrier than inside Affinity Designer. Didn't used to be this way.

See attached to see more what I'm talking about (taken from one of your images, though mine are the same). On the corners some transition is justifiable for anti-aliasing. But it's too much, making them look blury:

Screen Shot 2019-09-30 at 10.06.50 PM.png

Screen Shot 2019-09-30 at 10.14.51 PM.png

Share this post


Link to post
Share on other sites

@Tevya

Before I say what I did (which may be nothing useful), does this look better to you? It does to me zoomed in with Preview. 

Screen Shot 2019-09-30 at 8.34.26 PM.png

rich reviews banner.png


https://bmb.photos | https://vocallength.com | https://khonsuapp.com Focus: The unexpected, the abstract, the extreme on screen, paper, & other physical outputTools: macOS (Primary: Mojave, MBP2018), Canon (Primary: 5D3), iPhone (Primary: X), Epson

Share this post


Link to post
Share on other sites

Hey Brad, I'm not entirely certain. I'd have to get it into photoshop to see if it's any better. But initial impression is it's about the same. I'd be interested to know though, just so I can try and see if it does anything?

I dunno, am I crazy all? Are my eyes just blurry? I've been looking at pixels for design for like 25+ years now, and trust my eyes pretty good.... But ya'll are making me doubt myself. : )

Share this post


Link to post
Share on other sites
4 minutes ago, Tevya said:

Hey Brad, I'm not entirely certain. I'd have to get it into photoshop to see if it's any better. But initial impression is it's about the same. I'd be interested to know though, just so I can try and see if it does anything?

I dunno, am I crazy all? Are my eyes just blurry? I've been looking at pixels for design for like 25+ years now, and trust my eyes pretty good.... But ya'll are making me doubt myself. : )

For your own testing then, what I did is turn on Force Pixel Alignment under the Snapping dropdown (see attached).

EDIT: But now that I'm thinking about it, that checkbox by itself probably didn't actually do anything, as you're noting. I wonder if you have some things aligned on boundaries that don't export well and may take a little tweaking.

Screen Shot 2019-09-30 at 8.46.41 PM.png


https://bmb.photos | https://vocallength.com | https://khonsuapp.com Focus: The unexpected, the abstract, the extreme on screen, paper, & other physical outputTools: macOS (Primary: Mojave, MBP2018), Canon (Primary: 5D3), iPhone (Primary: X), Epson

Share this post


Link to post
Share on other sites

Thank you. That's probably a good thing to do anyway, for anything that's meant for screens (pretty much everything I do). Tomorrow I'll see if I can take some screenshots and do some enlarged comparisons between the exported file and what I see on my screen in AD. The ones provided above are smoothed over and don't really provide a clear picture. I need to enlarge them the way you did Brad, for more accuracy.

Share this post


Link to post
Share on other sites

I’m not a designer so I don’t normally reply to Affinity Designer questions, however looking at the file from the perspective of Affinity Photo, rather than Affinity Designer, some of the objects in the file don’t align to the pixel grid.

In the below example (which is the white/blue edge as shown in your above screenshot), the vertical edges of the white curve aren’t straight, which will cause anti-aliasing.  The same thing with the grey curves also in this group.

001.thumb.png.454623f8b3eb2d43b31d787f3be0e370.png

002.thumb.png.7da863e7058589ca1a9553aecc8da177.png

 

In the below example, the blue rectangle (and it’s 8px white stroke) are aligned at the top-left corner to 740.3px—rather than 740px—meaning it straddles the pixel grid.  This results in softer edges and the green layer below showing through the anti-aliasing.  

However, not being a designer I don’t know how other software handles partial pixels like this, especially when the final image may be exported at various different sizes; meaning even if it’s pixel perfect at the original size, it may not be at the exported dimensions.  I don’t know whether it’s just accepted that there will be some anti-aliasing in this type of scenario, or whether other software forces the objects in the image to align to whole pixels when exporting or resampling.

003.thumb.png.a965899e4261ce6e164beb4f5775611a.png

004.thumb.png.a34c6649d2c2f93df779bb56639ddbe9.png

 

Share this post


Link to post
Share on other sites

Hi Tevya,
Welcome to Affinity Forums :)
Most of your objects are not aligned with the pixel grid or their dimensions are not integer values. Check their X,Y coordinates and width and height dimensions in the Transform panel. You may have to increase the Pixels value in Affinity Designer Preferences, User Interface section, Decimal Places for Unit Types area, to ensure the input fields in the Transform panel are not rounding the numbers to integer values and are indeed displaying a few decimal places (so you can remove them). Objects that not aligned with the pixel grid end up blurred on export. You can also preview this on canvas going to menu View > View Mode > Pixels (there's also an icon on the main toolbar) to force a rasterised view of the objects - it will show the blurring as well.

To prevent this from happening  enable Force Pixel Alignment in the main toolbar (the first icon in the magnet icon group) to ensure the objects you draw are always created/moved/transformed on integer values. Also make sure Move By Whole Pixels (the icon immediately on the right of the Force Pixel Alignment icon) is disabled since it keeps the decimal parts/values when you move the objects. Note the Force Pixel Alignment only affects objects you create after enabling it. It does not align objects previously created.

Share this post


Link to post
Share on other sites

I find this baffling @MEB on several levels, from a user experience perspective.

1. Does this mean I'd have to re-create this entire graphic in order to get pixel alignment to work and stop making this image so soft? What if I just resized them all some, wouldn't they then snap to the pixels? And what about vector elements I copied from other sources? They weren't created with this turned on. So will they inevitably turn out soft, no matter what I do?

2. If Affinity can render it all so sharply as pixels (don't forget, our screens are still pixel-based) while I'm working with it, why can't it use that same rendering to make exported raster images look nice even if I didn't happy to Force Pixel Alignment? Seems like the obvious choice for a great user experience, so we don't run into exactly the issue I'm running into now (and you save money not having to help educate people about this issue). Illustrator has pixel snapping too, but renders it out just fine for raster/bitmap, if you don't use it. Plus, I'm almost certain I've never used that before, and not had this issue in the past. I pulled up past images just to check, and they look fine.

3. Doesn't that mean "Move by Whole Pixels" does exactly the opposite of what it should? If disabling it actually causes it to move by whole pixels? Maybe rename that setting?

4. Is there really no way to "snap" or "convert" all existing to pixel alignment? So much about this makes no sense.

Share this post


Link to post
Share on other sites

To expound on point #2 above and why it's so confusing/frustrating to me that it can convert to pixels just fine, inside Affinity as it renders live on-screen, but can't replicate that when exporting. I can actually take a screenshot of this and get a nicer PNG, than if I export it. See attached screenshot version. Call me crazy, but to me that seems like a technical bug, or a UX bug at the very least. It's doubly so, when you add the fact that the only solution (outside of a screenshot) is to completely re-create the graphic with the pixel alignment turned on!

There's a lot I like about AD over Illustrator, but this one is baffling and frustrating on several levels. Telling your users "you have to do your whole project over, because you didn't toggle that setting" is just horrible UX.

Screen Shot 2019-10-01 at 10.41.56 PM.png

Share this post


Link to post
Share on other sites

The design can be fixed. You need to vist each element and make it whole pixels and that it aligns h/v on whole pixels. Also, I find/found that I needed to set line weights to pixels and increase the decimals from 1 to 3.

I don't make webby stuff, but I think this works. png is also in the zip with a mod. AD file.

mike

rich reviews banner-1.zip

Share this post


Link to post
Share on other sites
2 hours ago, Tevya said:

I can actually take a screenshot of this and get a nicer PNG, than if I export it.

And do you have exactly the same resolution (same image dimensions)? And do you use the same rasterization method for display and export?


Affinity Store: Affinity Suite (ADe, APh, APu) 1.7.3.481.
Windows 10 Pro, Version 1909, Build 18363.476.
Dell Latitude E5570, i5-6440HQ 2.60 GHz, 8 GB, Intel HD Graphics 530, 1920 x 1080.
Dell OptiPlex 7060, i5-8500 3.00 GHz, 16 GB, Intel UHD Graphics 630, Dell P2417H 1920 x 1080.

Share this post


Link to post
Share on other sites
7 hours ago, Tevya said:

I find this baffling @MEB on several levels, from a user experience perspective.

1. Does this mean I'd have to re-create this entire graphic in order to get pixel alignment to work and stop making this image so soft? What if I just resized them all some, wouldn't they then snap to the pixels? And what about vector elements I copied from other sources? They weren't created with this turned on. So will they inevitably turn out soft, no matter what I do?

2. If Affinity can render it all so sharply as pixels (don't forget, our screens are still pixel-based) while I'm working with it, why can't it use that same rendering to make exported raster images look nice even if I didn't happy to Force Pixel Alignment? Seems like the obvious choice for a great user experience, so we don't run into exactly the issue I'm running into now (and you save money not having to help educate people about this issue). Illustrator has pixel snapping too, but renders it out just fine for raster/bitmap, if you don't use it. Plus, I'm almost certain I've never used that before, and not had this issue in the past. I pulled up past images just to check, and they look fine.

3. Doesn't that mean "Move by Whole Pixels" does exactly the opposite of what it should? If disabling it actually causes it to move by whole pixels? Maybe rename that setting?

4. Is there really no way to "snap" or "convert" all existing to pixel alignment? So much about this makes no sense.

Hi Tevya,
1. No, you don't have to re-create it from scratch. Enable Force Pixel Alignment and adjust the existing elements on canvas (by moving, extending, scaling or stretching as needed so they snap to integer values automatically) or using the Transform panel (editing the input fields). For new projects enable Force Pixel Alignment from the beginning.

2. Vector objects are resolution independent. You can enlarge/zoom in as much as you want without losing quality - they never become pixelated as in bitmap editors because they are recalculated/redrawn for the screen each time the zoom values changes - that's why I suggested to enable View > View Mode > Pixels from time to time so you can actually see how these vector objects are translated/rendered as pixels when you export the file. This view rasterises the objects for screen in realtime (the same thing happens when you export your work to a raster format like PNG).

Since the exported PNG will have the dimensions you specified in your document, you can only compare the exported PNG and what you see on canvas when the zoom is set to 100% since this is the actual (visual) size it has on the exported file otherwise you are comparing apples with oranges - that is, a rasterised (exported) image which only looks great when viewed at the dimensions it was created with vectors that are redrawn/recalculated for screen depending on the zoom level.  If you compare the exported image with what you see on canvas/screen at 100% zoom you will see that both match. 

3. No, Move By Whole Pixels means the object moves integer values only. If the object you are moving has an initial X coordinate of 10,56px for example and you start moving it to the right on canvas you will see the X value increasing keeping the decimal part (so for example if you move/drag it 5 pixels to the right the final X coordinate will be 15,56px which means it still remains misaligned). If you turn off Move By Whole Pixels and start dragging/moving the object to the right you will see the X coordinate in the Transform panel snapping to integer values only so in the example above you will end up with either 15 px or 16 px as the X final coordinate which is aligned to the pixel grid).

4. No, currently there's no way/options to force align previously drawn objects to the pixel grid as in Illustrator. In Affinity Designer you must enable Force Pixel Alignment from the beginning.

Share this post


Link to post
Share on other sites

Thanks for taking time to reply, all. I appreciate the help and insight. Understand that part of my frustration comes from 1. I've not had this happen before on AD, and I've been using it a while. Or perhaps I just didn't notice? 2. Illustrator doesn't require this. It uses the same kind of "magic" that AD uses to render on the screen when exporting as raster.

Remember that anytime you see it on the screen, it's rendered as pixels. It may be vector, but it's still being rendered as pixels. It looks sharper/clearer to me, even at 100%, in vector view than in 100% pixel view or exported as raster. That's why I gave the example of the screenshot above. I can get a clearer bitmap/pixel export by screenshooting it at 100%. That tells me that AD could export the same way it's rendering on screen, which I assume is how Illustrator does it. But for some reason AD does/is not....

Quote

1. No, you don't have to re-create it from scratch. Enable Force Pixel Alignment and adjust the existing elements on canvas (by moving, extending, scaling or stretching as needed so they snap to integer values automatically) or using the Transform panel (editing the input fields). For new projects enable Force Pixel Alignment from the beginning.

Great. so glad I can do this. What about existing vector objects that I'm importing from elsewhere? If an item wasn't designed to the pixel grid, it's going to likely have an edge somewhere that looks blurry. This is the key reason that AD needs a solution for this: you can't expect people to only use it for items they designed on the pixels grid at a particular pixel dimension/resolution. There needs to be a solution to render more sharply, regardless.

Quote

2. Vector objects are resolution independent. You can enlarge/zoom in as much as you want without losing quality - they never become pixelated as in bitmap editors because they are recalculated/redrawn for the screen each time the zoom values changes - that's why I suggested to enable View > View Mode > Pixels from time to time so you can actually see how these vector objects are translated/rendered as pixels when you export the file. This view rasterises the objects for screen in realtime (the same thing happens when you export your work to a raster format like PNG).

I understand what vector objects are and how they work. The issue is how AD rasterizes them. It rasterizes them great in Vector view mode, but not in pixel view or export.

Quote

Since the exported PNG will have the dimensions you specified in your document, you can only compare the exported PNG and what you see on canvas when the zoom is set to 100% since this is the actual (visual) size it has on the exported file otherwise you are comparing apples with oranges - that is, a rasterised (exported) image which only looks great when viewed at the dimensions it was created with vectors that are redrawn/recalculated for screen depending on the zoom level.  If you compare the exported image with what you see on canvas/screen at 100% zoom you will see that both match.

As shown in the screenshot in my previous message, they are not the same. Vector view, 100% looks as it should: sharp and crisp. In pixel view or exported they're soft and fuzzy. In vector view it looks sharp and crisp at any zoom level. And it's having to render those to my screen's pixels. Surely it can't just happen to match my screen's pixel grid at EVERY SINGLE zoom level, but not the pixel grid of the exported file? Unless I'm missing something, this is what you're arguing.

This is the root of the frustration: AD has the ability to render sharp, crisp vectors, as raster, even when they're not snapped to the pixel grid. It can do it at 100% zoom, or at 50% or 72.8%, or at 139.3% zoom. They all look sharp, crisp, the way a vector should. But they're all being rendered as a raster, because a screen is made of pixels, and therefore a bit-map... a pixel-grid. And they can't all just coincidentally be aligned with my screen's pixel grid. But for whatever reason AD doesn't (or isn't) using that same sharpness when exporting to raster. : (

Quote

3. No, Move By Whole Pixels means the object moves integer values only. If the object you are moving has an initial X coordinate of 10,56px for example and you start moving it to the right on canvas you will see the X value increasing keeping the decimal part (so for example if you move/drag it 5 pixels to the right the final X coordinate will be 15,56px which means it still remains misaligned). If you turn off Move By Whole Pixels and start dragging/moving the object to the right you will see the X coordinate in the Transform panel snapping to integer values only so in the example above you will end up with either 15 px or 16 px as the X final coordinate which is aligned to the pixel grid).

Ah, that makes sense. Thanks for explaining. My mistake.

Share this post


Link to post
Share on other sites

On further thought and testing, this might be a HiDPI screen problem: on my screen the PNG image is being enlarged by twice it's normal dimensions (4x total pixels), and therefore looks softer.... Not sure yet, but might be a factor, or the factor.... Will test more soon.

Share this post


Link to post
Share on other sites

Hi, maybe my question fits in here...

I develop watchfaces for a screen supporting 300px x 300px.

I am really frustrated, as the png export files don't show the details. It's all blurred 

I tried to build in 300 x 300 so I won't have to compress it later. The look in pixelview is not overwhelming but ok, but the export png again is much more unsharp.

(I already set the view in win settings to 100%. Didn't help, automatic pixel snap, whole px off, checked by hand everything is alligned to a full px. But the restult ist still frustrating) backgroundcand left digits are bitmap from affinity, right digits directly inserted.

Any help would be appreciated.

Greets. Barbara

2019-10-22 (5).png

Share this post


Link to post
Share on other sites

Apparently I do not understand what you are comparing to, but the right column does not exactly correspond to the left one (and it is not just the sharpness of the font, which of course is better at higher resolution, as is also in your example).


Affinity Store: Affinity Suite (ADe, APh, APu) 1.7.3.481.
Windows 10 Pro, Version 1909, Build 18363.476.
Dell Latitude E5570, i5-6440HQ 2.60 GHz, 8 GB, Intel HD Graphics 530, 1920 x 1080.
Dell OptiPlex 7060, i5-8500 3.00 GHz, 16 GB, Intel UHD Graphics 630, Dell P2417H 1920 x 1080.

Share this post


Link to post
Share on other sites

Okay, It's not the same font, as I didn't have it supported in this editor. But it's the same resolution. 

This is the editor I'm building the clockfaces in, wich supprts 300 x 300.

The background (some brushed aluminium) and the left column are one png i built and exported as png from affinity designer. 

The png is all blurred and the color is "yello-ish"

 

Share this post


Link to post
Share on other sites
3 hours ago, GonzoC said:

wich supprts 300 x 300

It is area for single number?

 

On 10/22/2019 at 12:35 PM, GonzoC said:

I already set the view in win settings to 100%

Yes, it is settings for windows. And display in Affinity is also 100%?


Affinity Store: Affinity Suite (ADe, APh, APu) 1.7.3.481.
Windows 10 Pro, Version 1909, Build 18363.476.
Dell Latitude E5570, i5-6440HQ 2.60 GHz, 8 GB, Intel HD Graphics 530, 1920 x 1080.
Dell OptiPlex 7060, i5-8500 3.00 GHz, 16 GB, Intel UHD Graphics 630, Dell P2417H 1920 x 1080.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

These are the Terms of Use you will be asked to agree to if you join the forum. | 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.