Jelen07 Posted August 3, 2017 Share Posted August 3, 2017 Hi, how should I setup a document settings for web page design? I am using macbook pro with 2560 x 1600 px resolution (native 1680 x 1050) and every time, I've made an export, the site was blurred or too big. I've tried every combinations of res and DPI, but no config works :-/ My best try was 1680 x 1050 px, 300 DPI. @1x was ok by dimensions but blurred, @2x was too big. When I use my design in Google Chrome and zoom out to 50% (using @2x export), the result was ideal (fit the screen and no blurred). But I can't making designs like that :-( Quote Link to comment Share on other sites More sharing options...
jer Posted August 3, 2017 Share Posted August 3, 2017 Welcome to the Affinity forum! Can't specifically answer your question but I looked in the Resources category of this forum and found some Templates for web design such as this one: https://forum.affinity.serif.com/index.php?/topic/13150-web-design-template-for-affinity-designer/#comment-57762 There are others, click on HOME in this forum, scroll down to RESOURCES and type template in the search field at the top right. Perhaps reviewing this template will help you to set up your own. FYI Note: When you post a new item, there is a FOLLOW field at the top right you can click. This way you will be notified when someone posts a reply to your question. Quote ♥ WIN 10 AD & AP ♥ Lenovo Legion Y520 15.6" Laptop Link to comment Share on other sites More sharing options...
Staff DWright Posted August 4, 2017 Staff Share Posted August 4, 2017 If you are designing for responsive website this link is a site that gives an overview of web page dimensions most commonly used. Quote Link to comment Share on other sites More sharing options...
Jelen07 Posted August 8, 2017 Author Share Posted August 8, 2017 @DWright No, it's not really about most commonly used dimensions. Coder will use Bootstrap 4, so dimensions and responsive is not a point here. @jer I've made same template for my own, 1140px with 12 cols (30px gutter) - Bootstrap default. But let me explain what the problem is. I'm using this document setup And when I export slices (slice1.png and slice1@2x.png) and load them into my "page", slice1@1x is blurred but dimensions are OK. When I will use slice@2x, it's ok, but I have to zoom out to 50% in browser to get sufficient result. Check screens: @1x blurry, dimensions OK. @2x no blurry, but wrong dimensions - have to designing in 200% (twice bigger) zoom and in browser zoom out to 50% (twice smaller). It is really frustrating, because I send my designs to client. Quote Link to comment Share on other sites More sharing options...
doeboy Posted August 8, 2017 Share Posted August 8, 2017 First Learn HTML5 Using Bootstrap 4 while it's still in its alpha stage is like using AD or AP Betas for production work you are bound to run into bugs. Quote Link to comment Share on other sites More sharing options...
Jelen07 Posted August 8, 2017 Author Share Posted August 8, 2017 @doeboy Oh good. This isn't topic about Bootstrap. I was answering to DWright... How do you even know, that the site would be used in production? Could it be internal help desk application where some alpha bugs can simple be? I'm using Bootstrap 4 alpha for more than one year, and I can't imagine, that we will develop new application in something old as Bootstrap 3. HTML5 is a huge topic. Which part you have on your mind? tldr; I'm working as a web developer over 10 years. Last 6 years I'm focusing on backend technologies. I know how @2x works, the meta tag "viewport" and so on. Maybe I'm missing something. But I would like to design a web page at 100% scale (1:1), export it and load it in browser. Here is my document - Document-Setup-AD-1140.afdesign. Or is this problem caused by export setup? Quote Link to comment Share on other sites More sharing options...
Staff MEB Posted August 8, 2017 Staff Share Posted August 8, 2017 Hi Jelen07, Welcome to Affinity Forums Change the DPI to 72 in the Document Setup (the document type will change to Web automatically) then export the slices as usual. Let me know if you still have trouble. Absref 1 Quote A Guide to Learning Affinity Software Link to comment Share on other sites More sharing options...
Jelen07 Posted August 9, 2017 Author Share Posted August 9, 2017 Hi MEB, thank you for your welcome. Setting DPI to 72 headed to that I'm actually designing at 200% zoom scale, is it OK? Here is my HTML which I use to preview my designs: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Preview</title> </head> <style type="text/css"> body { background-image: url(slice1.png); background-position: center top; background-repeat: no-repeat; height: 3184px; } @media all and (-webkit-min-device-pixel-ratio : 1.5), all and (-o-min-device-pixel-ratio: 3/2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) { body { background-image: url(slice1@2x.png); background-size: 1680px 3200px; } } </style> <body> </body> </html> Now I'm satisfied. THX. 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.