Jump to content
frankstallone

Getting used to Points instead of Pixels

Recommended Posts

I am creating a web app in React, but designed for iPhone X (to be implemented with Cordova). The mock ups I create will be distilled into (mostly) CSS. The Affinity Designer iPhone X device presets points instead of pixels. I think I got this right, finally, but want to ensure. Searching on the forums here I haven't seen anything that seems to make heads or tails of this definitively for me.

Depending on what your DPI is 1pt is 1pt. Whether its 72DPI (web) or 216DPI (iPhone X). So, if that's true, does that mean that if I want to create a rectangle 10px from the left edge, I would make it 10pt from that edge? If I have this right that means if I export @1x then it will come out at 10px distance from the edge but @3x it would be 30px.

Basically I want my designs to translate easily from Retina on my MacBook Pro when presenting to something I can annotate for CSS. Maybe there is a better way to do this than to use the default iPhone X? Thanks in advanced for you 2 cents.

Share this post


Link to post
Share on other sites

I don't know whether this will help but take a look at this: https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions


iMac 27" Late 2015 Fully Loaded, iMac 27" Mid 2011 both running High Sierra 10.13.6 - Affinity Designer/Photo & Publisher - Illustrator CC, Inkscape, Blender, Sketchup, Pepakura Designer, MTC, Pixelmator & Pixelmator Pro + more... XP-Pen Artist-22E, - iPad Pro 12.9 B|  

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Share this post


Link to post
Share on other sites
On 4/10/2018 at 6:06 PM, firstdefence said:

I don't know whether this will help but take a look at this: https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

Thanks but no, that did not help. =)

I am trying to clarify how I can work with point's but translate those appropriately to pixels for web mock ups. If my mock ups have a 20 point margin on both sides, can I safely tell a developer that will be 20 pixels of margin? I don't want final product to look like my mock ups.

 

EDIT: Furthermore confusing is The Ultimate Guide To iPhone Resolutions has the iPhone X as 375 x 812, while Affinity Design's document dimensions for Devices > iPhone X is 950 x 812.

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.

Guest
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.