Upscaling artwork for multiple resolutions how to keep FX intact?

[Stefan Cargoski]

Hi Community,

I’m currently working on a user interface design collaboration, where each functional asset needs to be delivered in multiple resolutions. The developer will then implement these so the design can upscale or downscale depending on the user’s monitor resolution.

One challenge I’m facing: I created a canvas at 1000 × 500 with several layers that have Layer Style FX applied. When I upscaled the document to 2000 × 1000, the layer effects did not scale proportionally — I had to manually adjust Scale FX for each layer. I also tested starting from 2000 × 1000 and downscaling, but ran into the same issue.

My questions are:

• What is the best workflow or output method to prepare designs that need to scale cleanly across multiple resolutions, while keeping layer styles intact?

• Is it better practice to design at one master resolution (e.g., the largest), and let the developer downscale to x1, x2, x3, x4?

Any guidance on best practices for resolution scaling and maintaining consistent FX would be greatly appreciated

Thank you.

[Conrad_C]

I'm not a web design expert, but one workflow is to design at 1x using vector/live effects whenever possible so that they scale well, then use File > Export > Export As where you can add multiple scaled copies to be generated in one step at export time. I think this should scale effects properly, but you should test it.

Another way is to use Generator, a feature where Photoshop will auto-export layers as web assets to the specifications you enter in the name of the layer itself. This can include copies at multiple sizes. This is an excerpt from the page linked below, an example of how naming a single layer in a specific way created multiple output files:

Putting it all together
100% Delicious, 42% Layer 1.png24 + 100x100 Layer.jpg-90% , 250% Quux/Foo Bar Baz.gif results in three files (the "100% Delicious" string is ignored, because it's not a filename):

Layer 1.png, at 42% scale, as a 24-bit png
Layer.jpg, as an absolute size of 100x100 pixels, as a 90% quality jpg
Foo Bar Baz.gif in subfolder Quux, at 250% scale, as a gif.

Read about Generator here:

https://helpx.adobe.com/photoshop/using/generate-assets-layers.html

[Stefan Cargoski]

Thank you Conrad

Ill keep this method in mind. Hopefuly when the time comes, this feature will be helpful saving me lots of time.

Kind regards.

[Stephen Marsh]

I don't agree with the decision that moved the scale style checkbox in image size to be hidden from view under the gear/cog icon, especially as it's the only control hidden there and the UI and UX didn't improve. It needs to be heads up for just this reason.