Jump to content
hannah

AfP : blurry results, blurry texts. Please help

Recommended Posts

Maybe I am not understanding something, but one thing that is driving me nuts, is, that I seem to be unable to export smaller images (lets say for web and with a size around 200 or 300 px) in a crisp way when text is included. My results are terrible. I get that you can't fill a pixel with two colors but i can't shake off the feeling, that there is something very tricky going on with the rendering machine/ anti-aliasing setting of Affinity when it comes to exporting text and I just wish that it would do a better job there (sorry, I otherwise really love the apps). 

Anyway to temper with the anti-aliasing?
I have Questions like why is a screenshot of 400px picture viewed in half the size (50%) crisper that a 200 px export (no resizing and lanczos3 setting)?
Why can a browser show small fonts crisp and why can i not even come close to that when exporting?

Latest example: 236x236px web-image, viewed in 100% in AfP looks ok I guess, too small to tell, hahah (due to my screen-resolution?). Now i see the same picture in 100% in the browser and it appears double the size and extremely blurry. Wtf am I missing?

To the good people out there : Has anyone of you a best-practice for me, when creating/exporting smaller stuff for web? Can someone help with advice?

Thank you very much, Hannah

 

 

Screen Shot 2018-05-18 at 15.29.04.png

Screen Shot 2018-05-18 at 15.28.13.png

Share this post


Link to post
Share on other sites

Hi Hannah,

 

Do you see the picture sharp in the Preview window? ( Photo Viewer)

 

Can you attach the image and a link to the web-page so we can have a look?

 

Resizing to a smaller size (in px) will increase the sharpness. So technically, a 200px will not be as sharp as a 400px resized to 200px. 

 

Thanks,

Gabe. 

Share this post


Link to post
Share on other sites

It depends on the image size versus the file format used. 200 pixels is a tiny image, so text will suffer if you try to view it larger

 

Look at these two identical 200 pixel wide images I have included

 

The image has the text exported as part of the jpeg file, so the text is a bitmap. Enlarge it and see what happens.

 

The PDF file has the text exported as text. It will be sharp no matter what size it is viewed at. Although the bitmap will be poor.

 

jpeged.jpg.ebc1e636709e8aeb5082abc6b8743e5f.jpg

 

In other words, you need the text to remain as text, which is why the CONTACT details are sharp.

texted.pdf


Windows PCs. Photo and Designer, latest non-beta versions.

Share this post


Link to post
Share on other sites

Thanks guys!

Maybe this is the point. I get better results in creating 400px pictures and resizing them to 200, than when directly creating in 200px. This shouldn't be the case, as the font, when written, is as good as it gets and should be "bitmaped" as good as possible.
Are you webdesign-boys-and-girls working like this?
My point is: I know that there are straight lines in the font I am using, so I expect to see them in one size or another but it doesn't matter which size i try the program is judging poorly and (almost) never applies a crisp edge. (like on the left side of the "R", which is a rare exception) So whatever I try after in exporting will just amplify the underlying problem, right?

This is very confusing: The 2nd image shows a screenshot from a pdf (top) and the exported picture from AfP (bottom). when you zoom in, you can clearly see how much sharper the font got rendered. It means I am better off using screenshots of pdfs, where it's my computer/screen/Preview/engine that determines which color the pixel has than letting AfP judge?!?

hm.

 

Screen Shot 2018-05-18 at 16.30.53.png

Screen Shot 2018-05-18 at 16.59.04.png

Screen Shot 2018-05-18 at 16.59.38.png

Share this post


Link to post
Share on other sites

It would be very helpful if you attached some files to look at

1 hour ago, hannah said:

Thanks guys!

Maybe this is the point. I get better results in creating 400px pictures and resizing them to 200,

 

How do you resize them from 400 to 200 ?

 

It would be very helpful if you attached some original files.

 

I just did a test, exported as a JPEG at 200px, exported at 400px and resized to 200, then exported as a PNG (despite it saying jpeg) for comparison (no lossy compression with png.

 

I cant see a massive difference between them.

test.thumb.jpg.087b432a6c7e46f7fda9eba4cb741eb7.jpg

 


Windows PCs. Photo and Designer, latest non-beta versions.

Share this post


Link to post
Share on other sites

If you are designing a website, using images with embedded bitmapped text isn't really the way to go. Take a look at this: https://www.w3schools.com/howto/howto_css_image_text.asp you will get much better results if you follow this method, its got a learning curve but definitely worth learning.

 

If you have to go the text in an image route, choosing the right font and colour is important.


iMac 27" Late 2015 Fully Loaded, iMac 27" Mid 2011 both running High Sierra 10.13.6 - Affinity Designer/Photo, Publisher Beta 1.7.0.140, Illustrator CC, Inkscape, Blender, Sketchup, Pepakura Designer, MTC, Pixelmator & Pixelmator Pro + more... XP-Pen Artist-22E, - iPad Pro 12.9 B|  

Affinity Help - Affinity Desktop Tutorials Instagram & Flickr - Affinity Live 19th June 2019

Share this post


Link to post
Share on other sites

Image is 236px x 236px

 

JPG Best 100% @ 63kb 

5aff2cd9d2b14_background-bestquality.jpg.918756fc2f60596f85db968e2f91e31e.jpg

 

JPG Med 60% @ 9kb 

5aff2cda9fe32_background-jpgmedquality.jpg.f91d2e8592b9b2231996d66ace6c3651.jpg

 

PNG 24 100% @ 79kb 

background-png24.png.d935838717b3971127cfd2b4d6008639.png

 

SVG Text is scalable @ 33kb 

background-svg4web.svg


iMac 27" Late 2015 Fully Loaded, iMac 27" Mid 2011 both running High Sierra 10.13.6 - Affinity Designer/Photo, Publisher Beta 1.7.0.140, Illustrator CC, Inkscape, Blender, Sketchup, Pepakura Designer, MTC, Pixelmator & Pixelmator Pro + more... XP-Pen Artist-22E, - iPad Pro 12.9 B|  

Affinity Help - Affinity Desktop Tutorials Instagram & Flickr - Affinity Live 19th June 2019

Share this post


Link to post
Share on other sites
18 hours ago, hannah said:

Why can a browser show small fonts crisp and why can i not even come close to that when exporting?

Because you are not using the method @firstdefence mentioned in this post above. If you did, browsers would not render the text as pixels embedded in your exported rasterized image but as a separate HTML text element rendered over it. Note that in the W3Schools web page example, if you move your mouse pointer over the text, it changes to an 'i-beam' text cursor & you can select & copy it, just as you can with any other ordinary HTML text element on a web page. You can't do that with text embedded in a raster image because it isn't really text, just some of the pixels in that image.


Affinity Photo 1.7.1, Affinity Designer 1.7.1, Affinity Publisher 1.7.1; macOS High Sierra 10.13.6 iMac (27-inch, Late 2012); 2.9GHz i5 CPU; NVIDIA GeForce GTX 660M; 8GB RAM
Affinity Photo 1.7.1.143 & Affinity Designer 1.7.1.1 for iPad; 6th Generation iPad 32 GB; Apple Pencil; iOS 12.3.1

Share this post


Link to post
Share on other sites

Thank you all for your help and patience, I really appreciate it!!!

@ firstdefence / CSS Text Overlay : 
Good idea, I will definitely try it the css-way, as it would save me time and hassle in the long run. Would you also know an easy way to make this happen as an mouse-over-effect, using the onmouseover? Also thanks for introducing the svg-graphics to me.

@ owenr / sharpness of screenshot:
Yes, sorry, I got tricked by my screen-resolution and was posting before double-checking the situation. Reality is a bitch.

@ Oval / wtf am I missing:
Hahahaha, nice summery. Text-size, kerning, line-height etc. are definitely crucial!

@ R C-R / Pixels ain't text:
Yes, I can accept that, hahaha. But when you say "it isn't really text, just some of the pixels in that image" than I say, that "real text" on a screen is also represented to me as pixels, right? It's the method used of representing and the anti-aliasing; it's the underlying rules, together with the resolution of my device what determines the visual result. By taking screenshots of html-texts and zooming in on them, I come to understand, that there must be some kind of rule, that the baseline of the font and the top of straight font-characters like "z"  are always rendered crisp (no grey pixels underneath and above the letter). A job well done in my opinion, as it makes fonts appear sharper even if there is lots of blur in between.

So I took a screenshot here on this page of the word "would". When I put the word right next to it in AfP, I have to play around with 0.1pt-adjustments of size, kerning, etc. to achieve a similarly good result. I can get close, but at the top of the "w" and the "u" there is a line of grey pixels I can't suppress. So in my opinion the anti-aliasing method used by AfP is somewhat "low-contrast". 5b02d8dbe17b7_ScreenShot2018-05-21at16_31_35.thumb.png.6a4b0e3ddccf96baf8d0d564a4bd5c1a.png
Ok, I am splitting hairs here; It's not what I wanted. I was just hoping to be able to adjust the anti-alias method used by AfP...

 

However, thank you very much for your time, I have learned a lot!

 

 

Share this post


Link to post
Share on other sites
4 hours ago, hannah said:

By taking screenshots of html-texts and zooming in on them, I come to understand, that there must be some kind of rule, that the baseline of the font and the top of straight font-characters like "z"  are always rendered crisp (no grey pixels underneath and above the letter). A job well done in my opinion, as it makes fonts appear sharper even if there is lots of blur in between.

The 'rules' that allow this to be "well done" in a browser are the same ones that @firstdefence mentioned earlier. Applying them, your browser can recognize text so that it & your operating system can select a font installed on your computer to use to display it. They do not apply when you take a screenshot of a browser window -- the screenshot is just an image, a bunch of pixels rendered on your screen. That image has no text attributes like a font style, point size, characters or glyphs, kerning, or any of the rest of them.

So because the screenshot is just a bunch of pixels, neither Affinity nor any other app can recognize that any of it is text or has text attributes. For that to happen, you would need to copy the text in the browser window to the clipboard & paste it into the application's window.


Affinity Photo 1.7.1, Affinity Designer 1.7.1, Affinity Publisher 1.7.1; macOS High Sierra 10.13.6 iMac (27-inch, Late 2012); 2.9GHz i5 CPU; NVIDIA GeForce GTX 660M; 8GB RAM
Affinity Photo 1.7.1.143 & Affinity Designer 1.7.1.1 for iPad; 6th Generation iPad 32 GB; Apple Pencil; iOS 12.3.1

Share this post


Link to post
Share on other sites
28 minutes ago, R C-R said:

the screenshot is just an image

:)i know that. I am aware that the image of a bird isn't a bird. but what i mean is, that once all the attributes for a text are set and I want to see it, then I have to look at it through a media (a screen or a piece of paper). And there, every program, device, app, browser, printer has a finite amount of dots/pixels per inch to represent the text to me. Those pixels have to decide whether they wanna be white or black or grey. And I say, the baseline of a text is the edge/beginning of all straight characters and I'd like the app to recognize this too and help me out a bit.

By carefully adjusting the size and position of the text in AfP i got   m u c h   b e t t e r    results!
best practice for me was :
1. turn
force-pixel-alignment and move-by-whole-pixels on (if the font is well designed that should help Affinity establish a crisp baseline, something that i probably haven't done in the fist place, causing problems that where hard to adjust later on)
2. write a "zZ" with artistic Text tool (baseline should be sharp)
3. turn force-pixel-alignment and move-by-whole-pixels off
4. adjust size (using the top right adjustment corner) until the top of the "zZ" is also crisp
5. turn force-pixel-alignment and move-by-whole-pixels on again and write your text

I finally solved my problem via css: https://www.androphyne.com/spectacles/

Share this post


Link to post
Share on other sites
36 minutes ago, hannah said:

... once all the attributes for a text are set and I want to see it, then I have to look at it through a media (a screen or a piece of paper).

The text attributes do not exist in a screenshot. They do on a web page if you use the method @firstdefence mentioned because a web page is not sent as a single document file but as a number of 'marked up' elements that allow a browser & the OS to cooperatively assemble them into something you can see. Basically, think of it as various kinds of data 'tagged' with instructions that suggest (but do not require) that they be assembled in a certain way to be displayed on your device's screen.

This is why that for example, most browsers let you 'zoom' in or out on the page without the text elements getting blurrier & why text remains as crisp as the device's screen resolution allows, even among devices with vastly different screen resolutions. It is all because the "ML" in HTML stands for "markup language," the standard almost all browsers support to provide tags (markups) that machines use to identify text, images, & other elements of a web page. You sacrifice all of that by taking a screenshot -- there is no HTML in them.

So the bottom line is simple: if you want your web pages to have crisp text, do not include it in your Affinity document. Use a web page app to add it using the method @firstdefence mentioned.


Affinity Photo 1.7.1, Affinity Designer 1.7.1, Affinity Publisher 1.7.1; macOS High Sierra 10.13.6 iMac (27-inch, Late 2012); 2.9GHz i5 CPU; NVIDIA GeForce GTX 660M; 8GB RAM
Affinity Photo 1.7.1.143 & Affinity Designer 1.7.1.1 for iPad; 6th Generation iPad 32 GB; Apple Pencil; iOS 12.3.1

Share this post


Link to post
Share on other sites

ok, i do follow and like your way of explaining though it seems we might be on same page but in a different book.

In my world a screenshot is a one-to-one visual replica of how my device is interpreting and therefor showing me all the tags and markups and attributes. 

Let's say you make a screenshot of a website, everything but the browser-menu and address-bar. Then you open this image again in a browser. What do you see?
If you don't look at the URL and you don't use your mouse (trying to click "a button" or the "scrollbar"), can you tell, just by the look of it, that it's just a screenshot?
I dare say, you can't tell the difference between the real website and the screenshot until you try to "interact" with a screenshot and feel stupid. So the bottom line is simple: A pixel is a pixel is a pixel.

Share this post


Link to post
Share on other sites
1 hour ago, hannah said:

In my world a screenshot is a one-to-one visual replica of how my device is interpreting and therefor showing me all the tags and markups and attributes. 

Nope. There are no tags, no attributes, & no markups in a screenshot. It's just pixels. Moreover, there is not even necessarily a one-to-one correspondence between the image pixels & the screen pixels on your screen. That's why an image displayed on a web page can be larger or smaller (have more or fewer pixels) than your screen (or the window it is displayed in).

1 hour ago, hannah said:

So the bottom line is simple: A pixel is a pixel is a pixel.

Nope. "Pixel" just stands for "picture element." There is no single, context-independent "master" definition for what that means. It is a catchall term that is always context dependent. An image pixel is not the same thing as a screen pixel nor are either of them the same thing as a "dot," a term that really only makes sense in a printing context. They are related, but in a similar way to how a real bird & a picture of a bird are related. Some pixels are properties of physical things, but in the digital world others are virtual ones that can be rendered in different ways to give them a physical form.


Affinity Photo 1.7.1, Affinity Designer 1.7.1, Affinity Publisher 1.7.1; macOS High Sierra 10.13.6 iMac (27-inch, Late 2012); 2.9GHz i5 CPU; NVIDIA GeForce GTX 660M; 8GB RAM
Affinity Photo 1.7.1.143 & Affinity Designer 1.7.1.1 for iPad; 6th Generation iPad 32 GB; Apple Pencil; iOS 12.3.1

Share this post


Link to post
Share on other sites

you can keep taking my words apart, but you never "see" any tags, or attributes or markups, just their interpretation. All you see are colored pixels in a given density.

You talk about "What is" and I care, but more interesting for me is what "I see".

 

Share this post


Link to post
Share on other sites
29 minutes ago, hannah said:

You talk about "What is" and I care, but more interesting for me is what "I see".

Nevertheless, if you want to use computer applications to create or see what you want to see, you cannot just ignore "what is," most particularly the differences between what they can see & interpret compared to what humans can.


Affinity Photo 1.7.1, Affinity Designer 1.7.1, Affinity Publisher 1.7.1; macOS High Sierra 10.13.6 iMac (27-inch, Late 2012); 2.9GHz i5 CPU; NVIDIA GeForce GTX 660M; 8GB RAM
Affinity Photo 1.7.1.143 & Affinity Designer 1.7.1.1 for iPad; 6th Generation iPad 32 GB; Apple Pencil; iOS 12.3.1

Share this post


Link to post
Share on other sites

IF you can't avoid having images with text, try to use larger images and “resize” them with CSS, they'll look better. A larger banner spread at 100% width of your screen will look better than the same banner at the exact pixels size.

Same rule apply to print documents: once we used 900pdi B&W bitmap — and applied color to the black parts —  but 300dpi images (photos) in grey or colors in ours files.

Share this post


Link to post
Share on other sites
3 minutes ago, Wosven said:

IF you can't avoid having images with text, try to use larger images and “resize” them with CSS, they'll look better.

They will also take longer to load on your screen, especially on mobiles and on slow broadband connections. They also waste money for people that pay for every data byte they download.

A big no no, in my world


Due to the ongoing Brexit negotiations, punctuation, spelling and grammar will be used sparingly until further notice.

Share this post


Link to post
Share on other sites

I know you have only used a whole image site as an example but any website requires some interaction, the mere fact of going to the website is interaction, once there, people will expect to be able to do something so having no interaction is an implausible expectation on your part. I get the "you couldn't tell" but that would get sussed very quickly and the ruse would fail, again, getting a negative response.

Having a Flyer site is fine i.e. a single image with info on it that can be noted down but people will get tired very quickly if they expect some interaction,  if this wasn't possible this would result in a negative reaction overall and people talk, so, that site would fade quickly as people pass information on about it's lack of response.

There is always a need for images and text on a website and banners and ad's play an important part in a websites support, how else do you tell people what you do, what you are going to do, what you sell, etc.

At the end of the day you do what you feel is best for you and your viewers and we will give you all the advice and help we can. Just pick out what you need to help you achieve your goal. :)

 

 


iMac 27" Late 2015 Fully Loaded, iMac 27" Mid 2011 both running High Sierra 10.13.6 - Affinity Designer/Photo, Publisher Beta 1.7.0.140, Illustrator CC, Inkscape, Blender, Sketchup, Pepakura Designer, MTC, Pixelmator & Pixelmator Pro + more... XP-Pen Artist-22E, - iPad Pro 12.9 B|  

Affinity Help - Affinity Desktop Tutorials Instagram & Flickr - Affinity Live 19th June 2019

Share this post


Link to post
Share on other sites
59 minutes ago, carl123 said:

They will also take longer to load on your screen, especially on mobiles and on slow broadband connections. They also waste money for people that pay for every data byte they download.

A big no no, in my world

I don't mind paying for better visuals I can zoom in on my phone... I'n less happy with sites that preload a bunch of images or scripts to track/get infos, whatever...

We begin this converdation talking about 200x200px image... I don't advise to get instead a 2000x2000px image, but a 400x400 would be enougth and wouldn't do a big difference.

Now, if a site is only made with this sort of images instead of a more appropriate solution, I would advise to look at other CMS that'll help ypu get better results and easier mantenance.

Share this post


Link to post
Share on other sites
8 hours ago, hannah said:

I finally solved my problem via css: https://www.androphyne.com/spectacles/

@Wosven Hannah has sorted her problem and made a slick interface using CSS :)


iMac 27" Late 2015 Fully Loaded, iMac 27" Mid 2011 both running High Sierra 10.13.6 - Affinity Designer/Photo, Publisher Beta 1.7.0.140, Illustrator CC, Inkscape, Blender, Sketchup, Pepakura Designer, MTC, Pixelmator & Pixelmator Pro + more... XP-Pen Artist-22E, - iPad Pro 12.9 B|  

Affinity Help - Affinity Desktop Tutorials Instagram & Flickr - Affinity Live 19th June 2019

Share this post


Link to post
Share on other sites
14 hours ago, hannah said:

I have to play around with 0.1pt-adjustments of size […] at the top of the "w" and the "u " there is a line of grey pixels I can't suppress

Nope! Simply use 15/x.

Share this post


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

I get the "you couldn't tell" but that would get sussed very quickly and the ruse would fail ...

For example, several browsers support making just the text on a web page larger or smaller without changing the size of its images. (If you are running Safari on a Mac you can try it now on this page via the View menu with the option key pressed or with the keyboard shortcuts option-command-plus & option-command-minus respectively.) Many allow users to set a minimum font size that automatically overrides font sizes smaller than that or a special 'reader' mode that presents only the text elements of some web pages. Just about all of them support user style sheets that can automatically alter the appearance or even remove almost any element of a web page, text included.

Any of these features intended to work on marked up text won't work on images of text so it isn't even necessarily true that "you couldn't tell," even with no interaction other than opening the page.

Beyond that, it should be obvious that web page translation services won't work on images of text, nor will assistive technologies like rollover text-to-speech or output to Braille devices.


Affinity Photo 1.7.1, Affinity Designer 1.7.1, Affinity Publisher 1.7.1; macOS High Sierra 10.13.6 iMac (27-inch, Late 2012); 2.9GHz i5 CPU; NVIDIA GeForce GTX 660M; 8GB RAM
Affinity Photo 1.7.1.143 & Affinity Designer 1.7.1.1 for iPad; 6th Generation iPad 32 GB; Apple Pencil; iOS 12.3.1

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

×