Graphic Design Asked by sonicfroots on December 8, 2021
If I create a website design in Adobe XD (artboard size: 960px x 1000px), which contains text, vector shapes and images. When I export it to send to the client as either a JPG or PNG, it doen’t show up crisp quality. Even the text is a bit blurry. Does anyone else have this problem?
Assuming the vectors and text are crisp in the original design, the two most likely explanations for this are:
A) You're not viewing the exported image at its exact size. 1000px is too tall to fit on many laptop screens, so your image viewer might be scaling it to e.g. 95%. Any scale that's not an even multiple of 100% will look blurry.
If you're viewing the image already embedded in a website, the site's layout determines the image's scaling. You might want to sanity-check it in a standalone image viewer separately for comparison.
B) The image wasn't exported at the right DPI multiplier for the screen you're viewing it on -- or the website is loading the wrong version of the image. On a 1x DPI screen (like most older external monitors) you'll need the @1x
image; on a Retina or 4k screen you need the @2x
image; etc. If the image's DPI mismatches the screen's DPI, it will also look blurry or pixellated.
Since websites can be viewed on different screens, you'll want to export several sizes of the image and configure the site so it automatically loads the right size as needed. As suggested above, checking each image in a standalone image viewer can help tell you whether the blurriness is in the image itself, vs. a problem with how the webpage is embedding it.
If you can say more about what screen hardware you're viewing the exported image on, and what export settings you used in XD (like a screenshot of the Export dialog box), it might help pinpoint the problem further.
Answered by peterflynn on December 8, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP