frankstallone Posted April 10, 2018 Share Posted April 10, 2018 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. Quote Link to comment Share on other sites More sharing options...
firstdefence Posted April 10, 2018 Share Posted April 10, 2018 I don't know whether this will help but take a look at this: https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions Quote 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 (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 More sharing options...
frankstallone Posted April 11, 2018 Author Share Posted April 11, 2018 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.