Jump to content
You must now use your email address to sign in [click for more info] ×

Recommended Posts

I am not able to export clear images created in Affinity Design. I have used Affinity design and photo for web design for the past year and have had bad luck with it.

In this example, I opened a new file and made a few lines to demonstrate this. Demo1 is the affinity design file, and demo 2 is the exported file. I exported it by creating a slice and using the export persona. the only way I can get usable images for clients is to export it at twice the display size.

I have been using GIMP photo and Inkspace lately because the exports are clear and the edges/curves are sharp. What am I doing wrong? I love using affinity but anything I create in it is unusable.

I am using windows 10 and a 4k monitor, if that helps.

Thanks in advance!

demo1.afdesign

demo2.png

Link to comment
Share on other sites

Have a read of this post: 

 

iMac 27" 2019 Somona 14.3.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9  
B| (Please refrain from licking the screen while using this forum)

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Link to comment
Share on other sites

all media lab -

Both examples you have posted have blurry edges. I also viewed them on other devices / retina screen and they were still very soft.

I created icons, and the end result is similar to the junk I made in MS paint back in 1999. For those who remember making great icons in paint then saving the file as BMP or JPG and ending up with a blurry navigation buttons. Hah! - then using <td>, <tr> tags to style your whole page!  That's where I'm at in 2018 with AD.

I would assume the export options are default since I reinstalled the software just before I created this example. For this one I selected default in export persona. The results are the same, hazy edges. I can't use the resulting image. Am I the only one seeing this? Also, I attached a simple picture I made that shows how bad this looks.

Assuming these are the default settings, what would I change to fix this?

I looked at the two threads above. This is visible on non-4K screens as well. None of this happens with Inkscape. I'l post an example of that when I'm back on my Linux box.

newslice.png.be6975b20757f8907f6b02c16a503bd5.png

newslice.afdesign

helmet.png

Link to comment
Share on other sites

Hi,

Yes instead of tables we use <section> and <div> now!

The examples I posted are PNG's because that's what you posted for comparison (in a small size of 1000px X 685px like yours), for a pixel image they look OK not perfect but pixels are not vectors. When you are looking for crisp and sharp results in all sizes on all resolution screens in a website you can export as SVG (Scalable Vector Graphics) instead of pixels you use vectors that show no quality loss in different sizes. Disadvantage is that if the image is to complicated it uses a lot of code or doesn't look good.

Do you prefer to use images (PNG JPG *WEBP) for the web, then you have to provide images for all screen sizes like in the examples of my previous posts.

To use it for print you have to change the DPI settings according to what it is used for. (this doesn't work on screen and is of no use there!!!).

In Affinity Designer the source is always Vector (as long as you don't use a pixel layer or persona). That way you can export in any size and *almost any file extension without quality loss only in that particular current size. As an example (when export in pixels) for a full screen image on a 4k screen you need an image of 4096px x 2304px and 5k  5120px x 2880px (iMac) to get a sharp and crisp result. If you normally use an small image size of a 1000px width for a image on a web page to view on a 1920px x 1080px screen (HD) you need at least more then 2x that size on a 4k sceen and almost 3x that size on a 5k screen to see it without artifacts.

The SVG code for HTML of your drawing:

<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 1280 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><rect x="60" y="40" width="1070" height="730" style="fill:#fffffe;stroke:#000;stroke-width:4.66px;"/><path d="M370,110l230,520l-460,0l230,-520Z" style="fill:#ff2c07;stroke:#000;stroke-width:4.66px;"/><ellipse cx="500" cy="335" rx="340" ry="105" style="fill:#00bdff;stroke:#000;stroke-width:4.66px;"/><ellipse cx="645" cy="380" rx="245" ry="270" style="fill:#f0ff00;stroke:#000;stroke-width:4.66px;"/><path d="M140,110c462.81,252.485 879.748,510.365 720,550c-159.748,39.635 150,-340 150,-340" style="fill:none;stroke:#000;stroke-width:4.66px;"/></svg>

Link to the SVG file:

demo1.svg open in your browser (on the 4k screen) to see it and look in the source code of the web page to discover the code! Make the browser smaller or bigger to experience the scaling effect with no loss of quality.

*Unfortunately webp is missing in the export possibilities. 

Regards,

David

example-vector-export.jpg

Link to comment
Share on other sites

@occultiv8or: The blurriness is the result of anti-aliasing, routinely applied to vector objects when they are exported to raster image file formats like JPEG, PNG, or BMP. For a technical explanation of what anti-aliasing is & why it is done, see for example the first section of this article, but briefly it is because vector objects do not usually fit perfectly into the pixels of a raster image. So unless anti-aliasing is applied the result is blocky, stair-stepped aliased edges informally known as "jaggies."

It is impossible for the fit to be perfect for any vector object other than perfectly horizontal or vertical lines, & for them only if they are perfectly aligned to pixels edges & completely fill them. So for example, a stroke that is 2.53 px wide (like for all 3 vector objects in your newslice.afdesign file) can never be a perfect fit, nor can any circle, any diagonal line, or any shape or line that is curved.

So, unless jaggies are acceptable, if you are exporting to any raster image format, you can never completely avoid the blurriness, only minimize it, typically by increasing the pixel resolution of the image.

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

33 minutes ago, All Media Lab said:

Yes also be sure to tick: Menu > View > Snapping manager > Force Pixel Alignment and you can view the results in: View > View Mode > Pixels or Pixels Retina or Vector.

That is a good way to see another, often encountered issue with exporting to raster image formats, the one discussed in the HWS article in the paragraph beginning "There are other issues involved in mapping real-number coordinates to pixels."

In Affinity, pixel coordinates are not mapped to pixels centers, but instead to the intersecting lines along pixel boundaries. So for example, even with Force Pixel Alignment enabled, the pixels of a perfectly horizontal 1 px wide line will be rasterized & antialiased to extend into two rows of pixels on each side of that line.

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

Thank you, guys! 

I made an SVG and it worked. I'll have to work more with the the code side of it for web.

All-media-lab - a few more question. So, for icons and pixel perfect stuff, I should go with SVG format because this will scale to screen resolutions but stay at the same "view size." But, in the case that I'm exporting to JPG or something, here's where I'm confused and also don't know the right terminology. Lets say I want an image to fit a 600px area. I edit the image and crop it down to 600px. But this 600px width picture, when scaled on a higher resolution screen, will show artifacts when viewed at the same "view size" fitting that 600px area. How do I increase the resolution of a 600px image but keep it at the same visual width - i.e.- fitting a 600px area? Do I just export a larger image and scale it down in the css? What's the best method.

On your website's examples you loaded multiple image sizes for different screen resolutions. I assume this is to keep the file that is actually loaded as small as possible. So for each version of the image, are the images the same "visual sizes" but higher resolution? or are they larger sizes scaled down to fit the same area - like a 600px container, to compensate for resolution.

Again, thanks for the help, I've been struggling with this for months. I have created tons of good stuff in Affinity and love how fast the UI is and didn't want to stop using it.

Link to comment
Share on other sites

Your welcome!

For images (JPG PNG WEBP) on the web "resolution" is the actual size in pixels. If you have a 4 k monitor 4096px x 2304px is the amount of pixels that fill the screen. It's as simple as that. When you have a HD monitor 1920px x 1080px fills the screen. 

This is a app I created for full screen images (enlarge the browser or make it smaller (or look on your mobile phone) to see the effect). It's only HD quality, but you get the idea. Notice in Chrome it's loading webp and in Firefox jpg: http://full-screen.yourweblab.nl/  my code is open source and free to use, except for the images. For 4k I have to add a 4096px x 2304px image.

Just try this free app, upload an image and you will understand when downloading the images and code what I mean, yes images in different sizes for different devices  and art directions like portrait mode for mobile phones and tablets . https://www.responsivebreakpoints.com/ using picture and srcset makes the browser decide what image to load. You only have to provide the different sizes.

The higher resolution screen the larger the image has to be, PPI or DPI doesn't work on screen. Only image size in pixels.

Regards,

David

Example of breakpoints I generated for a background image I made this week (image is made by me and edited in Affinity Photo):

breakpoints.jpg

Link to comment
Share on other sites

  • 4 weeks later...
On 11/7/2018 at 3:31 PM, R C-R said:

That is a good way to see another, often encountered issue with exporting to raster image formats, the one discussed in the HWS article in the paragraph beginning "There are other issues involved in mapping real-number coordinates to pixels."

In Affinity, pixel coordinates are not mapped to pixels centers, but instead to the intersecting lines along pixel boundaries. So for example, even with Force Pixel Alignment enabled, the pixels of a perfectly horizontal 1 px wide line will be rasterized & antialiased to extend into two rows of pixels on each side of that line.

So you are saying the fact that there is still no way to fine tune or set proper anti aliasing with Affinity ... we get stuck until they fix it ?

Never be the Same Again !
---
Dell Optiplex 5090 SFF
Intel Core i5-10500T @2.30GHz with 12GiB 2666MHz DDR4
Intel UHD Graphics 630 for 10th Generation
M.2 2280, 512 GB, PCIe NVMe Gen3 x4, Class 40 SSD

Windows 11 Pro x64 22H2 + LibreOffice 7.5.3

Link to comment
Share on other sites

15 minutes ago, Uncle Mez said:

So you are saying the fact that there is still no way to fine tune or set proper anti aliasing with Affinity ... we get stuck until they fix it ?

No. I am saying you need to be aware of how pixel coordinates are mapped to image pixel boundaries & 'tune' them accordingly.

As discussed in the Pixel Coordinates section of the HWS article, the coordinates define pixel locations, but they are not the same thing as the points that define the edges of a digitized graphic object. 

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

4 hours ago, R C-R said:

No. I am saying you need to bare of how pixel coordinates are mapped to image pixel boundaries & 'tune' them accordingly.

As discussed in the Pixel Coordinates section of the HWS article, the coordinates define pixel locations, but they are not the same thing as the points that define the edges of a digitized graphic object. 

Ok got it !

Now how can the blurriness be reduced (it's Ok that it can't be 100% fixed)?

Please a non-technical Instruction would be of great help !

Never be the Same Again !
---
Dell Optiplex 5090 SFF
Intel Core i5-10500T @2.30GHz with 12GiB 2666MHz DDR4
Intel UHD Graphics 630 for 10th Generation
M.2 2280, 512 GB, PCIe NVMe Gen3 x4, Class 40 SSD

Windows 11 Pro x64 22H2 + LibreOffice 7.5.3

Link to comment
Share on other sites

7 minutes ago, Uncle Mez said:

Ok got it !

Now how can the blurriness be reduced (it's Ok that it can't be 100% fixed)?

Please a non-technical Instruction would be of great help !

I wish I could be non-technical. Anti-aliasing, blurriness, is an attempt at reducing a basic short coming of computer graphics that rely on a rectangular grid for display. Basically, a pixel, or once upon a time, a single pin from a dot-matrix printer, made a point either all black or white. W. some improvement in either/both intensity and resolution, a middle grey could be placed between squares of black and white. The "jaggy" was reduced. But blurry was added by filling a space with an average.

So an image that is rasterized/pixellated will either be jaggy or somewhat blurred. Generally jaggy is considered to be bad, unless one is trying to imitate old 8-bit displays. So the blur is added. Any time an image is scaled up, the blur spreads. One might increase the contrast before enlargement, hoping that edges will remain clearer, but then colors may distort. Going in the opposite direction works better. If the image is reduced, some of the blur will be averaged into the smaller area. But if one is reducing something like a photo, the image may remain fairly sharp, but details will disappear. So starting w. a large vector image that has been rasterized will likely produce a fairly sharp image. But inn both directions, it is just averaging information into a larger or smaller area. 

For some years there has been another way of working w. bitmaps called wavelets. This is something about which  I have only a rudimentary understanding. Take an image, and look for features that span a large area. Then look for areas half that size.  And again, until features as small as a single pixel are defined. Perhaps those are just noise. Wipe them out by making an average. Step up to the larger features, and modify those somewhat less. I think this is more or less how the AP denoise filter works. 

Then work the other way around, and increase the contrast at only the smaller scales, so that details larger than what might be noise are heightened. Unsharp mask is a very simple way of doing this, AFAIK. 

 

iMac 27" Retina, c. 2015: OS X 10.11.5: 3.3 GHz I c-5: 32 Gb,  AMD Radeon R9 M290 2048 Mb

iPad 12.9" Retina, iOS 10, 512 Gb, Apple pencil

Huion WH1409 tablet

Link to comment
Share on other sites

As bigger an image or object... or as more DPI as less blurry the raster will become.

So for print.... increase the dpi and you get better results. Problem is for screen and its 72dpi-standard. Its quite impossible to get an unblurred 10p-text-raster. Depending on the background and the object colors, sometimes help to duplicate the layer, set to "average" with a opacity of 50%, but there is nor guarantee that it works for all situations. 

OSX 12.5  / iMac Retina 27" / Radeon Pro 580X / Metall: on! --- WWG1WGA WW!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • 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.