Smart Object - PNG Assets blurry
thejae opened this issue · 6 comments
I believe this might be related to this issue #316
Am not sure if my parameters are incorrect. The 2x images generated by image assets are of very low quality. If anyone could be of any help, it would be greatly appreciated.
Source image (converted to smart object):
Image Assets:
Manually created (using Image Size panel and File > Save as > PNG):
Parameters used:
default 200% hi-res/@2x + 100% lo-res/
Download my PSD file:
http://adobe.ly/1LZvyAT
@thejae Sorry you are experiencing problems. The parameters you are using are correct.
The issue here is one that plagues generator (and other smart object workflows): Because the smart object is scaled, the circle (in your image) doesn't end up pixel aligned. That results in off-by-slightly-less-than-1-pixel problems in calculating the bounds, which causes the scaled assets to look bad.
We definitely need to do more work on this on the Generator side. However, one work around that can help in these situations is doing all your work in PS at the retina resolution and then scaling everything down for the non-retina resolutions. This is usually best practice if you are working with all raster artwork (which this icon appears to be). So, you would double the size of your artwork and then instead use: default 100% hi-res/@2x + 50% lo-res/
Here's a modified version of your file that does just that: http://cloud.joelbrandt.org/473F3P0g2a3P
Using that file, I get these two assets:
Regular, 12x12px
Retina 24x24px
I realize switching to a working-at-retina-resolution workflow may not be possible for you.
I'll leave this bug open so we have another example when we tackle the issues surrounding bounds of smart objects.
Actually, this has to do this how Photoshop scales different smart object types. In a nutshell, use PSD based smart objects in your design and you'll get what you want (I opened the close_button.png smart objects, saved as close_button.psd, go back to original file and replace contents to use the PSD instead of the PNG.
Here's the long answer. The reason for this is some issues with the different file formats. When you place a smart object in your design, photoshop makes a bitmap version of that smart object and uses that for rendering. When you edit how the smart object is placed in your design, like clipping or scaling, photoshop will resample the original and make a new bitmap rendering for the design so it looks crisp after you edit it.
For Generator, when you scale a design that has smart objects, if the smart object source is a PSD, photoshop will scale the smart object PSD at the new scale and make a new bitmap rendering of it. If the smart object is not a PSD, then photoshop will scale the bitmap rendering instead and not resample the original smart object file.
Again, if you use PSD for all your smart objects you should be good. If you use something else then design at 2x and scale down and that will generally look ok.
to expand further on the comments made by @chrisbank . In order to expand the current PSD behavior to other types of smart object we need to investigate the thread safety of the code that scales those types of smart objects. We can add this as a backlog item
Just wanted to add another use-case for this. I ran into this problem with a massive set of scripts I was writing, and the assets the designers were used to working with were @2x, but composed entirely of psd and .ai assets. We ended up just re-sizing everything manually to @3x first, and then the scripts were able to resize them pretty efficiently.
To add to this thread, I'm running into the same issue if I simply drag a file from my desktop to an open PSD file and place it as a Smart Object (SO). This is usually a jpeg or something like a stock photo. I'd like to scale it 200% from Generator.
In my latest attempts, the original source file is 5168x3648px.
It is then scaled down to 1200px wide during placement.
The generated asset is blurry and resampled.
To fix this, I've found that if I open the image (rather than drag/drop) and copy/paste it to my destination PSD, then convert to SO, the generated asset looks great.
One other thing to mention... I usually like to apply a little bit of sharpening to the image. If I do that to either instance, the image is blurry again.
Here's my source PSD to see it in action:
https://www.dropbox.com/sh/3ddaxjc5uepcqyn/AACeYmcYiyc5rsIZQZT5WU2Ta?dl=0
cross-referencing this with Adobe internal JIRA card: https://jira.corp.adobe.com/browse/PS-3334