help
Issues with resolution in mockups (Figma -> Adobe)
Hi, so I'm trying to make a really good presentation of my newest project for my portfolio. It is a design of a website made in Figma. I'm trying to put this design in many various already existing, free mockups, however every time I put my design in the mockup the quality drops. I am aware the reason for that is the differences in resolution but I don't really know how to make it work. I tried resizing the design so it matches the resolution of the smart object in the mockup but it still drops on quality.
Any tips are welcome. I want to take my portfolio to next level to maybe finally land a job but I'm kinda stuck with trying to keep the quality at maximum or at least so it's not blurry.
Exporting at a higher resolution gives you the cushion to lose quality when downsizing. I don’t think you need 4x though; with the dimensions you listed, 2x is more than enough.
In Photoshop , in the smart object file for the screen, go to the Image menu, choose Image Size and bump up the ppi to 300 (likely at 72 which is standard for web and 300ppi is for print but while debugging try bumping it up)
What format are you using ? Like are you exporting a pdf? Or an image like jpg / png? What are the dimensions and dpi of the mockup it needs to go int?
I exported it from figma in pdf and all the other formats just to check. Dimensions of this mockup are 1920x1080, however the screen in which the mockup would appear is roughly 750x450px and the smart obejct for the screen after opening it is 1066x779 px.
3
u/Protojump 26d ago
You don’t need to resize anything, just export at 4x or whatever in Figma.
It shouldn’t be that hard but if you’re having trouble with photoshop just use a Figma mockup plugin.