AFF DESIGNER | Text - Blurring when Rasterized and Exported to PNG

[affuser9001]

Hi,

Affinity Designer V2.1.1 • macOS Monterey V 12.6.7

Accelerated Hardware is checked in Preferences.

Designing a 700 x 700 px, 300 dpi with image and text.

Exported as png at full size.

Noticed that when uploaded to website, the font/text is blurry.

Edited original doc and Rasterized the font layer, exported once more to png, the font is still blurry.

See images: The Rasterized Layer within the original document is blurry. The text layer is clear.

Any tips to fix?

 

 

[affuser9001]

 

 

[affuser9001]

Bumping up ... The TEXT is blurring when rasterized in Affinity Designer Layer .... 27 views no answer???

[walt.farrell]

It would help if you provided screenshots showing the complete application window, as there is relevant information missing from the partial screenshots you've shown us. If you do that, please make sure that the Layers panel is also visible, and the Text layer is selected, and the Text Tool you used is active, and the cursor is in the text.

For example, we can't tell what size that text is, or what Zoom level you're using.

If you are viewing the file zoomed in (that is, > 100% zoom), then when you Rasterize the text you should expect it to become fuzzier. Note that you can use View > View Mode > Pixels or View > View Mode > Split View to see how the vector objects would look, at that zoom level, when Rasterized. Split View will let you compare the vector and raster views.

[Aammppaa]

Also worth searching the forum for previous discussions of blurry text.

From what I recall Affinity doesn't have such sophisticated antialiasing for text as Photoshop, or at least there are some bugs in the current implementation, and it is complicated to use.

See this excellent post that explores the options...

[affuser9001]

Thanks Walt.

I'll give View Mode a try in a minute. Trying to get this uploaded to website this afternoon. 

Affinity Designer V2.1.1 • macOS Monterey V 12.6.7

 

Here are the Screenshots of AFF Designer Layers with Text Mode (Artistic) as well as how the Image Export to PNG.

Playfair Display 5.5 pt

 

 

[affuser9001]

I've used 600x600 px 300 dpi image files for logos in Photoshop CC and didn't suffer pixel loss / quality.  

• I designed the image w/ text over again.
• shut down the program
• Changed Display to Software
• Retina Rendering changed to High Quality
• Hardware Acceleration is Checked.

 

[walt.farrell]

You're viewing the image (in one screenshot) at over 500% zoom, and in the other at over 300% zoom.

You should use try with 100% zoom.

[affuser9001]

Thanks again, Walt.  Really -- I just want the image to look the way that I designed in the AFF Designer program.  When I uploaded the png to the website, the clarity was very poor. I've spent 3 hours trying to design a small element for a website.  I've seen gorgeous images all over Affinity's website - 100s of layers or more.  VIBRANT AND CLEAR! How do those Designers get pin point clarity and I can't get that for 3 layers?

What's the whole anti-aliasing issue about?

Is Affinity planning on refining this soon?

Is my program not working right?

[Dan C]

12 hours ago, affuser9001 said:

How do those Designers get pin point clarity and I can't get that for 3 layers?

With such a small image size, I would recommend using a vector format (if able) for uploading to your website - as this will retain 'clean' vector lines for your text, without having to be rasterised and anti-aliased.

12 hours ago, affuser9001 said:

Is Affinity planning on refining this soon?

Is my program not working right?

There is nothing inherently 'wrong' with your application, though as shown in the threads linked above some users have found this can be improved by tweaking the anti-alias and blending settings within Affinity before exporting.

We do hope to continue to improve the Affinity applications, including our anti-aliasing pipeline and raster exporter - though we have no direct timescale for this at this time.

[walt.farrell]

14 hours ago, affuser9001 said:

When I uploaded the png to the website, the clarity was very poor.

Is the website displaying it at the same size you designed it at? Or is the website displaying it larger?

If it's at the same size you designed it, I would have expected it to look as it does in the application with 100% zoom.

But, like @Dan C, I wonder if perhaps using an SVG output file would work better.

[Old Bruce]

20 hours ago, affuser9001 said:

Exported as png at full size.

 

17 hours ago, affuser9001 said:

I just want the image to look the way that I designed in the AFF Designer program.

You are taking Vectors (the text) and exporting them as Pixels. You are not going to see the vector's smooth lines in a pixel export.

[affuser9001]

Here is my unconventional work around on the Font Clarity Issue:

1) Design in Affinity Designer

2) Once document complete - take a Screenshot with your Mac and the image quality is the same. 

3) Rename your Screenshot

4) Upload to Website

🤣😂🤣

@walt.farrell Yes, there is an 2) additional issue with the website theme as well.  From tech support: 

The image with text section (especially set to full-width) is meant to be 50/50 image/text. So if you're viewing on a 27" screen, you'll get half of that screen as an image, and the other half as text. This is how the section was designed. 

 

It IS blowing up the image file. The image is intended to be an accent, not a full-scale photo. I could use some advice from any web designers or developers on the Forum regarding a work around for that 50%/50% image/text.  One thought I have as a workaround is to design the image with a transparent border in order to avoid portions of the image getting cropped off the top and bottom, when using the theme editor slider to lower the height.  So, on an iPhone this will scale to its screen width - which would be fine.  On a desktop, the example below is what will be displayed - problem.

Regarding improving the text quality yesterday, I increased the image size to 700x700 to test the waters. As mentioned, the theme blows it up. It maintained the text quality with the screenshot image. 🫣

This "Section" of the theme is not suited for my purposes from an image standpoint. But I like how I can alternate the information of the web page.  I'm going to try a few things Affinity Support recommended to tweak and size it at 200x200 - 114dpi for web. If that doesn't work, I'll design floating it in the middle with a transparent border. I have been using 300 to get more clarity out of the image.

This is what it looks like on the website today (ridiculous!). The design is the Mac screenshot image I uploaded (text looks good!!!)

On to redo this for the 4th Time . . . I'm losing pixels and hair. 💙

 

 

[affuser9001]

@Old Bruce 

Hey Bruce,

What steps do you recommend? I have AFF Designer, Photo and Publisher.

Convert the text layers to Curves or what exactly?

 

[affuser9001]

Hi,

Wanted to share how I tackled both issues 1) Affinity blurry text and Export and 2) Website 50%/50% image issue

The first image is the result - a screenshot of the web page which is much better than the HUGE images.

 

 

I'm sure there is a better way for that template designer to code this Section (Shopify). But it is what it is ...

I "forced" a smaller image by placing the design inside a 400px x 400px transparent document.  I moved the design over 60px on each side left or right, as needed, so it would be closer to the text in the website theme.  Then, in theme editor I chose Fixed Height @ 300px. (for now .... ha!)

 

 

For the Affinity Image quality, font blurry issue, as suggested I Exported to svg @ 114 dpi, Allow JPEG compression > changed to 100, Unchecked Export Text as Curves (maybe this would have made it clearer??). Overall, it looks much better layout wise and text is legible.

 

 

 

[affuser9001]

{Noting Missing Video that was posted on this thread.  While playing that video, my computer "went down" and came back up.}