Add 9-slice scaling for smart objects

  • 6
  • Idea
  • Updated 8 months ago
In an age of crossplatform development of all kinds of things (games, apps, wesites) we need a way to make our complex interfaces consistent. Placement & Links of smart objects was a huge move in that direction. But this pipeline is still impossible to achieve and thats why:

1. There is no way to create UI Kit PSD and make generator export it as a part of pipeline.
While you design all elements should be right sizes for their context. Like panels, buttons etc.
But in UI Kit they have to be minimum size in pixels so when you export and combine them in atlas it would all fit to 1024х1024 or 2048x2048. Because ALL.. completely ALL.. i mean absolytely ALL rendering engines who work with UI support 9-slice scaling. Some of them even support 9-slice scaling with tiling options for each of 9 pieces.

2. You need a monstrous wokstation to be able to open UI Kit and couple of Screen designs simultaneously.
Simple button smart object can cosist of up to 5 states and each of them should stay editable. so wa have around 50 layers of vercors with fx etc for a single button. Now imagine we have a PSD of game screen with list and each list item uses 3 buttons and 5 lines are visible. Then we have a block of 3 buttons somewhere else at the bottom of the screen and couple at the top of the screen. Each group has its own button sizes.
Which means we will have to hold around 200+ layers !only! for buttons. And it's really hard to change a size of eny complex entity because such a file will be aroumd 600mb and all this FX + vectors stuff works VERY SLOW!.
My personal config is Core i7, 32gb ram, 500gb ssd, GTX 970 ti.. and it's simply impossible to work. Switching takes around 2-5 seconds, selecting layers - 1-2 seconds. It's clean install on a clean system. Symply PS is not capable to manage huge amount of layers with vectors, effects , adjustment layers (Solid color etc.) over top etc.

9-slice scaling smart objects do not need to be updated during scale process. Just use resulting flattened pixel data.

Photo of Alexander Vinogradov

Alexander Vinogradov

  • 27 Posts
  • 4 Reply Likes
  • Do it!

Posted 2 years ago

  • 6
Photo of adobe full

adobe full

  • 1 Post
  • 0 Reply Likes
+1
Photo of Jaroslav Bereza

Jaroslav Bereza

  • 809 Posts
  • 187 Reply Likes
I tried some black magic with pseudo-automatic slices scaling, but I am not sure if I fully understand your problem. Can this help you somehow?



Next thing which could help you is plugin: http://bg-d.net/htmlblock/

And there are some nice new css properties. http://www.w3schools.com/cssref/css3_pr_border-image.asp 
http://www.w3schools.com/css/css3_border_images.asp
I am not sure if HTML block plugin uses most recent browser engine. It works only with Mac.

You could generate patterns for buttons on the fly with generator and css in HTML block could be pointed to generator output and it would be updated with every HTML block resize. :-D
Photo of Alexander Vinogradov

Alexander Vinogradov

  • 27 Posts
  • 4 Reply Likes
9-sclice scaling is nothing to do with Photoshop slices.
Here is what i mean
https://www.youtube.com/watch?v=8mhKJZVd58E

(Edited)
Photo of John O

John O

  • 4 Posts
  • 1 Reply Like
9-slice is at least as useful as corner radius for shapes, arguably much more useful. It's one of my top requests and would make life so much easier.

To add an example for what it would be useful for is resizing buttons that have details along the corners that has to be preserved. Doing this manually in photoshop the proper way can take 10-15 minutes per button, but would be pretty much instant with 9-slicing.
(Edited)