Affinity Designer is not drawing pixel free lines/contures

[DanielLestrange]

The issue is simple, the solution IMHO even simpler (it should just work)

 

1. Create a new DOC in AD with the highest possible settings 

- Either a QFHD Web Doc with 74 DPI or a Custom DOC with 400 DPI

 

2. Draw a Circle with 1000px * 1000PX

 

3. Switch to Pixel View (to see how it will look once exported as a PNG)

 

4. Zoom up and see the border of the Circle as in my screenshot "Bad"

 

5. Switch off Pixel View and see the border of the Circle as in my Screenshot "Good"

 

I want to be able to create a simple thing in AD, and export it as seen in "Good"

Instead, if I export as PNG, I get "Bad"

 

I also want to be able to create this as a 1000*1000 Circle, and freely resize smaller with the h/w settings, export.

Instead results are worse.

 

I am used to AI and there you just do this without even thinking of bad results.

 

Please elaborate how you can export a object created with AD, to a PNG, without having borders/details/etc pixeled instead of a "neat line"

 

That is simply a must.

 

I understand that AD is way cheaper then AI but if a simple thing like the above is not possible with AD, I do not see the sense in buying a license.

 

Thank you

[Hokusai]

Daniel,

 

Hello and welcome to the forums. I'm not sure why your PNG files are showing up pixelated but an easy way to fix it is to export as a SVG, problem solved. You might want to mention which version of Affinity Designer you are using as well as your OS, it might help someone here on the forums to figure out the solution to your problem. Affinity Designer is a great and very powerful piece of software. Judging software by price isn't the best way to measure the power or usefulness of a piece of software. Sure there are some issues with Affinity Designer that need to be worked out but the reason for those issues is time. Illustrator has been in development for over 28 years, Affinity Designer has been around for a few years. Maturity takes time, don't simply look at what you can do with Affinity Designer right now, look at how well it does so many things right now and then you can imagine how much better things will be in the future. I think if you stick with Designer you will be amazed at how powerful it is and how quickly the developers are fixing things and adding new features. 

 

Best of luck,

Hokusai

[R C-R]

PNG is an extensible raster image file format. Like every other pure raster image format (jpeg, tiff, gif, etc.) it can't display smooth vector shapes as anything other than as pixels on a grid, which means you will always get that stair stepped, anti-aliased effect you don't like. You can minimize that by using a grid with more pixels (higher resolution), but you can't can't completely eliminate it -- it is an inherent property of all raster image formats.

 

As Hokusai said, you can use a file format like .svg (or .eps, illustrator's native .ai, or Affinity's native .afphoto & .afdesign file formats) that do not rasterize vector graphics, but as long as you store your work in any of the raster formats you will see this effect.

[DanielLestrange]

I disagree

 

PNG is very possible to be created in a scaled format and no pixels.

 

I have done it with AI - do you think a Logo in WordPress is in SVG format, or you create  a new Logo for each single dimension in PNG forma you need?

I think we misunderstand each other.

 

It must be possible to resize a (created with AD) image to a smaller size without loss of quality, and *then* export to PNG

 

But simply this is not possible - as elaborated in my initial Post.

 

What do I miss?

[DanielLestrange]

Maybe if I reformulate my question:

 

How do you create a Logo with Affinity Design, that is Web ready?

[R C-R]

I disagree

 

PNG is very possible to be created in a scaled format and no pixels.

PNG is a raster image format. See for example Portable Network Graphics (PNG) Specification (Second Edition) for all the gory details about compression methods, supported image types, & so on, but there is no question that the format is limited to storing rasterized bitmap images, which inherently are composed of a grid of pixels.

[MEB]

Hi DanielLestrange,

Welcome to Affinity Forums :)

Only Adobe Fireworks can output PNG's with vector data (and a few more features). All other graphic applications and browsers are only able to read the raster data present in the file and will ignore the rest, so in practise it can't be used as a vector format for anything other than for editing in Fireworks (and eventually other Adobe apps). Those additions used data chucks in the file to store metadata in a specific format than nobody was yet able to decipher. Since Adobe doesn't support Fireworks anymore (it was originally developed by Macromedia) its use is becoming very limited and will eventually stop working in new OS's. This has nothing to do with being cheaper or not.

There's other (open) formats as SVG (as Hokusai pointed out) that are vector based and can be edited and viewed in any graphic application and all major browsers. Affinity is able to import/export SVG files. If you need vector output for print then PDF is the best choice.

[DanielLestrange]

25% of all websites in the world can not display SVG

 

Wordpress as a key word

 

The Media will simply not be recognized as a Image.

 

Since PNG is as per above not able to render a simple circle - I am lost.

And wonder how a designer in future will create a Logo for WP.

 

Sorry if I am dumb - how do you suggest to create a Logo for 25% of worlds websites, using Affinity?

[MEB]

Hi DanielLestrange,

You can still export your logo as PNG but as i said no browser will display it as vector data. In that regard it's exactly the same as if you have exported it from Photoshop, Illustrator or any other app. You can try it yourself. Just create a 100x100 px circle (72dpi) in both Illustrator and Affinity Designer, export as PNG and check in Apple Preview or in a browser. Zoom both circles the same amount and you will see that both are raster and display the "stair steps" you are referring to in your first post.

[R C-R]

25% of all websites in the world can not display SVG

{...}

how do you suggest to create a Logo for 25% of worlds websites, using Affinity?...

There are hundreds of references on the web about different ways to handle this issue. An old but still relevant one is this Stack Overflow discussion. It is full of links to "how to" pages, plus the second answer describing how to use a .png or .jpg file as a fallback for browsers that can't render .svg files (which I think is what you meant instead of websites, right?). 

[DanielLestrange]

No

 

Just upload a SVG to any WP site and you will see what I mean

 

Wordpress needs a custom permission to even upload a SVG

 

Still, this will not be handled as a Image.

[R C-R]

Regarding Wordpress sites, see for example Using SVG Images in WordPress or https://wordpress.org/plugins/svg-support/

 

Of course, if the site is not under your control, you will need both permission to upload SVG files to it & site support for the plugin or the special code. There isn't anything you can do about that, but the same would be true regardless of what app you used to create the SVG version of the file.

 

As MEB said, if you have to use PNG or JPEG images, they must be rasterized & you cannot avoid the "stair step" effect.