Jump to content

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

Recommended Posts


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

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

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.

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.


  • Create New...

Important Information

Please note the Annual Company Closure section in the Terms of Use. These are the Terms of Use you will be asked to agree to if you join the forum. | 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.