Photoshop - using smart objects and generate assets
- Started
- Last post
- 9 Responses
- Ranger
I'm trying to get my head around how to simplify the workflow from photoshop visuals for apps to generating assets at 2x and 3x resolution.
I've been trying to work at canvas size and use high-res images placed as smart objects hoping that the extract assets function would use the higher resolution within the smart object to export high-res assets but it doesn't, it just treats the original size as a raster image and scales it up resulting in a blurry 2x and 3x image.
Is the only way to do this to start at 3x and scale down?
- skwiotsmith0
Unfortunately yes. When you create a smart object, whatever size you created the smart object at becomes the new 100% (even though the image in the smart object may be bigger).
Not sure if that makes sense, but yes, start big and scale down. Also make sure, especially when you're dealing with vectors, to optically correct for smaller sizes.
I've not used it myself, but I know many people who speak highly of Sketch, which allows you to export @2x + @3x images right from the program.
- Ranger0
Yeah Sketch looks like it has some nice features, would be good to have a play about with it but for now I've got to keep things in PS so the files can be passed around amongst various people.
The smart objects work ok if I resample the whole file into the higher resolution and then use the generate assets function to generate reduced sizes. Just seems like it should be something that the function should do seeing as you can do it yourself manually.
- set0
I use vector assets and then once the design is finished I just upscale the whole file by x2/x3 and generate assets
- Frosty_spl1
Make the largest file first. Make everything a smart object. Use vectors wherever possible. Then work your way down to the smaller sizes.
Wouldn't this work?
- PonyBoy0
use SVG files whenever possible— write a little CSS to dump the SVG file in old browsers (if it's even an issue)... keep an eye on file size of course— makes sense to stick w/PNGs at times (and as Frosty stated... start big first and work your way back)
- haha... ignore the css / svg comment - for some reason I was thinking you were talking about high-res for web...
But... as frosty said... use as many vectors as possible and always start at your highest resolutionPonyBoy - wait... you were talking about hi-res for web (apps)... use SVG if possible— you won't have to worry about scaling issues... and for the third time... start big first if you have to output rastersPonyBoy
- haha... ignore the css / svg comment - for some reason I was thinking you were talking about high-res for web...
- organicgrid0
You guise...really knew your Photoshop!
Kudos QBN Peeps:)
- doesnotexist0
use illustrator
- i_monk0
I don't do web stuff, but why wouldn't you do most of this in Illustrator if that's where your key assets are coming from? It has that pixel grid and web-oriented stuff now.
- meatball0
Maybe work at 3x, use generate>image assets then create an action that resizes them down to 2x, and 1x and run that action on the folder and save out the result into another folder