Jump to content
Eroica

Avoiding pixel "aliasing" when creating objects out of smaller shapes

Recommended Posts

Hello,

I have a general question about creating objects with Affinity Designer. Here is a picture that hopefully helps you understand my issue: https://drive.google.com/file/d/1jDIYYxd9ya5fS_qSuebt781eShcrj-Bj/view?usp=sharing

I was trying to recreate a kind of lens which is shown in step a. This object itself is made up of several smaller shapes (b.), one of which is a large blue area which also serves as the outline of the object.

The other shapes, e.g. the white "lens," is a child object of the blue shape. My problem now is that--when enabling pixel view--some blue pixels appear at the edge of the white objects (displayed in c.). This is of course because the white shape is still inside the blue shape.

Instead of the blue shape outlining the whole object, I guess I could create the object out of several smaller shapes, e.g. what I did in d. I then just move every shape close together until they snap to each other.

However, now this leads to the issue that some of the background (e.g. a strong red) will be slightly visible where the shapes touch each other (shown in e., again more visible in pixel preview). Also, when subtracting the blue shape, Affinity Designer often fails to create a "clean" object, and often leaves some stray nodes when subtracting shapes (shown in the red part of step d.).

My question as someone new to this kind of illustration/graphic design would be: How would professionals go ahead to recreate this? Is there a "standard" way which avoids these kind of issues?

My goal would be to some day create "semi-realistic," skeuomorphic icons such as Mac's Automator: Mac-Automator-Resize-Images.png

If you have any other hints or tutorials that can teach me more about this kind of design, I'd be happy to know them as well!

Share this post


Link to post
Share on other sites

The messy Boolean operations will soon be improved, hopefully.

 

A file containing one way, of many, to build your lens: lens.afdesign

 

The key to reducing aliasing in raster output is to rasterise at a higher resolution than required and then resample that raster image to the required size.

So here is the document exported directly to a PNG compared to a PNG export at 4x scale which was then scaled by 1/4 with bicubic resampling, so the images have the same resolution but the edges are much smoother in the latter.

 

Edit: Your web browser will probably scale these images, so drag them to the desktop and view at 100% in some other app such as AD.

 

5ac0e3d897ece_lens1x.png.52f01b661a284a91966e0002111b4c5e.png    5ac0e3d95ae4b_lens4xthenbicubic0_25x.png.a76a3d2b532efebc9c5aa46b328ea026.png

 

 

Share this post


Link to post
Share on other sites

Thanks for your in-depth explanation and the example file. Incidentally, my construction from step a. is the same to your construction!

One follow-up question:

When designing UI elements such as toolbar icons and the like, I learned that you should always try to align your elements on a pixel grid so that they don't get blurry. So when I create a 36x36 px icon, for instance, I also create a 36x36 document and design my icon there, even though it's a vector file in the beginning.

Given that some (Mac) icons get as large as 1024x1024 px, and if you were to use your approach of downsampling the final image, would you still try to align all shapes to a pixel grid? Or can you get a little bit more deliberate if the final icon size won't be as small as 36x36 pixels?

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

×