Jump to content
You must now use your email address to sign in [click for more info] ×

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.

Link to comment
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" 2019 Somona 14.3.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9  
B| (Please refrain from licking the screen while using this forum)

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

Link to comment
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.

Link to comment
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.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | 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.