Jump to content
drumnkyle

Pixel Perfect Drawing Not Possible

Recommended Posts

I am trying to make pixel perfect icons, but no matter what values I use in the transform studio it doesn’t align on the pixel exactly. In the pixel preview I see the aliasing sometimes. Sometimes I have to enable and disable it (separate bug maybe). I exported to SVG and opened in Sketch and it showed that the values were actually 151.99 instead of what Affinity showed me (152). I have attached the file. I bought this app solely for the purpose of being able to do icon design on the go. I would really appreciate help as soon as you can as I’m trying to finish my app. 

Metronome 2.afdesign

Share this post


Link to post
Share on other sites

Hi Drumnkyle,

Welcome to the forums,

The Transform panel shows 152 because the app is not set to show decimal places. In the desktop app you are able to change this in preferences but unfortunately at the moment this isn't a feature of the iPad apps. You will have to select your objects then then type the size you want manually in the transform tab this should give the exact size you typed.

C

Share this post


Link to post
Share on other sites

Hi Drumnkyle,

This worked fine when I tried it here in the office. Please could you export the attached file to SVG and send me a screenshot of the values in sketch?

Thanks

Callum

 

test 152.afdesign

Share this post


Link to post
Share on other sites

I will when I get to the office. But I just opened your file and turned on the pixel split view and can still see that the 152 one is not exactly aligned. See the screenshot here. You could also tell if you export it to a png and zoom it will be blurry on the edge. 

602B17BD-36CB-4A83-893B-08B002FEBE7F.png

Share this post


Link to post
Share on other sites

I don't have Sketch, so I'll have to ask someone to do it for me on Monday. But, the above post should prove what I'm seeing. If it doesn't, let me know and I'll get the Sketch screenshot.

Share this post


Link to post
Share on other sites

Is this what you are referring to?

CFCB01A2-9F7D-425F-8C01-2F509567D7E8.jpeg


IPad Pro 10.5 512GB iOS 12.1 Affinity Photo 1.6.10.83 Affinity Design 1.6.4.45

Share this post


Link to post
Share on other sites

Yep. That’s it. When you export the PNG and view it, it shows up as being blurry on the edges. And when you bring the SVG into Illustrator or Sketch it shows as 151.99 pixels which explains why. But there is no way that I can find to make it exactly 152 in the iPad app. I don’t have the Mac Affinity Designer app because I wanted to try the iPad app first. 

Share this post


Link to post
Share on other sites
On 11/3/2018 at 12:55 AM, Callum said:

Hi Drumnkyle,

This worked fine when I tried it here in the office. Please could you export the attached file to SVG and send me a screenshot of the values in sketch?

Thanks

Callum

 

test 152.afdesign

Hi Callum the same issue is present in your supplied file as can be seen in the screen shot above ( which was made using your file). :)


IPad Pro 10.5 512GB iOS 12.1 Affinity Photo 1.6.10.83 Affinity Design 1.6.4.45

Share this post


Link to post
Share on other sites

Hi DM1,

Please could you make sure you are snapping to whole pixels? To do this turn on the grid and then click the button in my attached screenshot. You should see the objects in your document line up with your grid when you move them around.

Thanks

C

 

 

Screenshot 2018-11-12 at 10.47.42.png

Share this post


Link to post
Share on other sites
On 11/12/2018 at 9:48 PM, Callum said:

Hi DM1,

Please could you make sure you are snapping to whole pixels? To do this turn on the grid and then click the button in my attached screenshot. You should see the objects in your document line up with your grid when you move them around.

Thanks

C

 

 

Screenshot 2018-11-12 at 10.47.42.png

Is this the same setting on an iPad? Appears to have removed the blur on export.

6DBCF814-EB04-451A-932B-988B9DC39590.jpeg

8D23A705-901B-43FB-881A-AB98380B6BC5.jpeg


IPad Pro 10.5 512GB iOS 12.1 Affinity Photo 1.6.10.83 Affinity Design 1.6.4.45

Share this post


Link to post
Share on other sites

I tried with that setting on and off and it made no difference. Are you saying you are having a different experience @DM1? If so, can you try my original file and attach the exported PNGs?

Share this post


Link to post
Share on other sites

Yes that setting fixed it for me. You have to move the object to snap the pixel alignment. Below is a shot of your artboards 2. Looks sharp when zoomed.

E7B33994-B21B-4326-ABD4-6A82F95A7996.jpeg


IPad Pro 10.5 512GB iOS 12.1 Affinity Photo 1.6.10.83 Affinity Design 1.6.4.45

Share this post


Link to post
Share on other sites

Zoom was over 100000%. No blur evident. You do need to move each object so that it snaps on both axis. The red square was a single pixel painted with pixel brush for size comparison. The rectangle is the one contained in your file, Artboards 2. Just changed the snap settings and moved the existing rectangle until it snapped on both axis.


IPad Pro 10.5 512GB iOS 12.1 Affinity Photo 1.6.10.83 Affinity Design 1.6.4.45

Share this post


Link to post
Share on other sites

This video with the huge percentage shows the problem. It is in a different spot when you change from pixel to vector. Right?

Can you export a PNG so we can see if the edges are blurred?

In my video, was I not snapping it too?

Share this post


Link to post
Share on other sites

Yes, I see what you mean. iOS doesn’t like the png output either. Try and zoom a little after opening camera roll and it converts to a black screen until shut down. Very odd behaviour. Stopped this strange behaviour after closing camera roll and reopening.

373AC1D6-03D8-4EE5-84B7-3ADAB20DCCD1.jpeg


IPad Pro 10.5 512GB iOS 12.1 Affinity Photo 1.6.10.83 Affinity Design 1.6.4.45

Share this post


Link to post
Share on other sites
On 11/17/2018 at 11:18 AM, DM1 said:

Yes, I see what you mean. iOS doesn’t like the png output either. Try and zoom a little after opening camera roll and it converts to a black screen until shut down. Very odd behaviour. Stopped this strange behaviour after closing camera roll and reopening.

373AC1D6-03D8-4EE5-84B7-3ADAB20DCCD1.jpeg

Sorry for not replying sooner. We've been looking into this.

I'm also seeing this in iOS Photos but if I airdrop the same .png to my mac and check in Preview, i'm not getting the blurred edges. If I open the same exported .png back into AFD for iPad, I don't get the blurred edges. Are you seeing the blurred edges when viewing the png file back in AFD for iPad?

Share this post


Link to post
Share on other sites

I just took the PNG exported that shows as blurry in the iOS preview and opened it in Preview on the Mac. Though it doesn't appear blurry at first glance, take a look at the attached screenshot where you can still see that it's not aligned on the pixel perfectly. This will look like a blur on iOS and is not acceptable for iOS asset design.

As you can see in the video I posted, if you zoom in A LOT in AFD on iPad and switch do the split with pixel preview, you can see it's off by a bit. The easiest thing to check was that I exported an SVG instead of a PNG and gave it to a friend with Sketch. When they brought it in, they found that the lines were drawn on numbers like 151.99 instead of 152, which is what I was talking about in my first post of the thread. I never bought Sketch, because I wanted to use AFD instead, so I can't do the test easily.

Screen Shot 2018-11-27 at 9.44.02 AM.png

Artboard1.png

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

×