Jump to content
You must now use your email address to sign in [click for more info] ×

9-Slice Scaling for pixel and vector layers or symbols.


Recommended Posts

Hi there!

I'm a UI designer in a mobile games development company.

We use Unity and NGUI as our UI framework.

All UI elements are sprites even if it is simple square.

Pretty all elements created to be 9-Sliced (when you scale a sprite - its corners do not scale). This functionality is essential for all UI frameworks (even HTML)

 

Here is a video example.

Youtube link in case forum bugs (https://www.youtube.com/watch?v=8mhKJZVd58E)

 

Here is a thread in Photoshop Community on this topic

https://feedback.photoshop.com/photoshop_family/topics/add_9_slice_scaling_in_photoshop_cs6

 

Do you have this feature?

I can say for sure if you do - I will immediately switch from PS to AfD.

 

Our team workflow is (example names used):

 

  1. Design an element and give it appropriate name (http://service.crazypanda.ru/v/clip2net/V/v/aNCQ1yj6tg.png)

  2. Convert an element to a Smart Object and drop it into appropriate Creative Cloud Library (Atlas_Panels) so all teammates could use it. (http://service.crazypanda.ru/v/clip2net/x/f/5ZzKG4sNJB.png)

  3. Place this Cloud Smart Object into a special Atlas_Panels.psd document and give a layer name a ".png" suffix. (http://service.crazypanda.ru/v/clip2net/S/e/m8DTluWUiv.png)

  4. This PSD document continuously exports all assets into Perforce folder (http://service.crazypanda.ru/v/clip2net/T/0/lsCO6FBzgg.png)

  5. Another designer uses an element from the Library and it is 100% the latest version!

 

This workflow is really good. BUT!

If you have Icons atlas - it is ok.

If you have Art atlas it is ok as well.

But if you have Panels atlas it's not ok because each designer have to drag-drop element sources from the library so he/she could resize it properly (http://service.crazypanda.ru/v/clip2net/B/3/jgLKglo7VF.png)

And as a result there is no guarantee that this certain panel is "100% latest" in all windows\screens.

 

If you can provide similar workflow I will push a company-wide decision on switching to Affinity (after couple test-runs of course  :) )

Link to comment
Share on other sites

  • Staff

We don't currently have 9-slice scaling for raster elements.  We do have constraining which will work with vector components.

 

As for cloud support - we don't have our own cloud implementation, but try to support the main ones: iCloud, DropBox and GoogleDrive.  These all have their little inconsistencies, for which I am currently ironing out the niggles (mainly how to handle simultaneously conflicting changes to files in cloud storage).

 

Our export persona will enable you to perform continuous export of slices in a document.  Slices can be configured to output a number of files types, with control over size/scaling/dpi etc.

SerifLabs team - Affinity Developer
  • Software engineer  -  Photographer  -  Guitarist  -  Philosopher
  • iMac 27" Retina 5K (Late 2015), 4.0GHz i7, AMD Radeon R9 M395
  • MacBook (Early 2015), 1.3GHz Core M, Intel HD 5300
  • iPad Pro 10.5", 256GB
Link to comment
Share on other sites

We don't currently have 9-slice scaling for raster elements.  We do have constraining which will work with vector components.

 

As for cloud support - we don't have our own cloud implementation, but try to support the main ones: iCloud, DropBox and GoogleDrive.  These all have their little inconsistencies, for which I am currently ironing out the niggles (mainly how to handle simultaneously conflicting changes to files in cloud storage).

 

Our export persona will enable you to perform continuous export of slices in a document.  Slices can be configured to output a number of files types, with control over size/scaling/dpi etc.

 

It is really sad the AfD do not support raster 9-slice scaling :(

I can say for sure that games market is almost 3 times larger than apps & online services. Our total audience recently surpassed 180 000 000 players around the globe.

The thing is that we are all here know how to make proper tooling for a project and how to do efficient graphics programming. As a result, many studios have its own proprietary software for the desired production pipeline even if "the pipeline" is pretty common(hehe).

It's a really huge niche that you can take over just with a couple specialized features like "9-slice scaling for Symbols & raster elements"

the other really cool way you can go - make Affinity Designer - extensible, like Unity so each studio could use it as a platform.

Link to comment
Share on other sites

  • 1 year later...
  • 1 year later...
  • 5 months later...
  • 8 months later...
  • 1 month later...
  • 1 month later...

This for sure would put Affinity ahead compared to other software. I've migrated to Affinity to design game interface and would be great to have this feature.

Unfortunately, constraints doesn't work very good when we're talking about 9-slicing. Constraints doesn't work for this purpose when you have a more complex design for assets.

Edited by onimetal
Link to comment
Share on other sites

  • 11 months later...
  • 2 months later...
  • 4 weeks later...
  • 5 months later...
  • 2 weeks later...
  • 4 months later...

There is a workaround possible.

  1. Load the attached file "9 slice tutorial"
  2. Export your "to-be-resized"  pixel layer as PNG (assuming square aspect ratio)
  3. choose the layer "Constrain group" in the layer stack, expand it
  4. now select all 9 rectangles (child layers to constraint group)
  5. choose fill tool, set mode to "bitmap"
  6. select your file exported in step 2
  7. if required, move nodes to adjust size, aspect ratio, and position
  8. now you can select the "constraint group" and resize the 9 slices.
    • corners are fully constraint,
    • edges constraint to 1 axis,
    • centre tile will scale in both axis.

If you need different aspect ratios for the 9 tiles, duplicate it, adjust size, and save as asset.

I know this is a weak workaround, and fully support your feature request to get a better function.

9 slice tutorial.afdesign

Mac mini M1 A2348 | Windows 10 - AMD Ryzen 9 5900x - 32 GB RAM - Nvidia GTX 1080

LG34WK950U-W, calibrated to DCI-P3 with LG Calibration Studio / Spider 5

iPad Air Gen 5 (2022) A2589

Special interest into procedural texture filter, edit alpha channel, RGB/16 and RGB/32 color formats, stacking, finding root causes for misbehaving files, finding creative solutions for unsolvable tasks, finding bugs in Apps.

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.