Jump to content
Teo_

Non squared pixel interface design workflow

Recommended Posts

I have to create icons and interface design for a project for multiple devices. Some of them have a square pixel ratio (1:1) and another device has something like 1:0,93 pixel ratio.

I’m looking for the right approach to export the correct assets without too much manual work.

An approach could be creating icons in an artboard for square pixels, then each icon or interface element could be converted in symbols. The symbols should then be placed in another artboard inside in a rectangular shape. Once done, the shape should be transformed changing the with (actual with/0,93).

This could work but it isn’t too easy to manage with large amount of layouts or editing elements after the transformation.

Do you have a suggestion to get it easier?

Share this post


Link to post
Share on other sites

If you have Affinity Photo you could use the Equations filter ( Filters > Distort > Equations... ) to record a Macro changing the width of the image/icon. You could then use this Macro with Batch Processing to iterate through the folder containing your images/icons.

Share this post


Link to post
Share on other sites

Thanks for your suggestions. I’ll try it but for this specific work I have to produce svg icons and I don’t think this method could work.

Share this post


Link to post
Share on other sites

Naturally vector formats like SVG vector drawings have no pixel aspect ratio, so it will be here more a matter of scaling/distorting when used let's say on some devices screen in a HTML context etc. So for SVG overall the viewbox setup will play a role here for a correct scaling and preview on different device screens. - You can get some tips and hints how to deal with this from these resources ...


☛ Affinity Designer 1.7.1 ◆ Affinity Photo 1.7.1 ◆ OSX El Capitan

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

×