Rephrasing my question for clarity. I have a navigation bar that I've created from a Shape that has a border and a gradient.

How can I use Generate Assets, or Extract Assets to get 2nd end caps and a repeating 1px-wide vertical slice for both 1x and 2x resolution? i.e. from the Shape I want to end up with

[email protected]
[email protected]
[email protected]

enter image description here

Should I extract the whole nav bar to 1x and 2x and then slice, or is there smarter method

Thanks in advance for any help, Steve

  • 1
    Can you please add some images to show what you mean?
    – Mensch
    Oct 25, 2014 at 20:34
  • Off-topic, but if this design is to be used on the web, the above can be done in pure CSS
    – Tom
    Nov 26, 2014 at 18:37
  • Hi Tom, I was trying to create client-friendly designs in Photoshop and hoping extract assets could just dump a load of 1x and 2x images for me, including slices of the precisely gradiented, shadowed, bordered nav bar I'd created. Photoshop's Copy CSS should work on the shape, but everything is in 2x for retina so the dimensions are all doubled. Maybe I'm missing something... a life?
    – Steve
    Nov 26, 2014 at 21:13

2 Answers 2


It seems like you would want slices for this and using Save for Web using Slices. We are looking to add support for slices in Extract Assets but it is a long way off. Is there a reason you wanted to use Extract Assets for this instead of Slices + Save for Web?

(I look after Extract Assets dialog in Photoshop, so your feedback will be super useful!)

  • Hi Divya. When I started I thought the new Extract Assets might get around the need for slices but it seems like I have to take slices of any shapes that may have variable height/width that may need end-caps and repeat-x or repeat-y. Extract Assets seems useful only for fixed-size objects to producing same size and 50%-size. 200% results in anti-aliasing. Do I therefore have to create all my designs in Photoshop at 2x for retina, doubling my font-size, and element dimensions? This scuppers paragraph styles and CSS export features.
    – Steve
    Nov 26, 2014 at 21:06
  • You are right, Extract Assets right now is only useful for fixed-size objects. We are investigating what would a 9-slice extraction look like but we are no where close to solving that problem (others are taking priority!) Could you tell me what about the 200% results in anti-aliasing? It shouldn't Happy to investigate if you can send me your PSD [email protected] Dec 1, 2014 at 19:29

There are a number of ways to do this. You might be better off creating several shapes and extract assets separately. However, you could convert your shape to a smart object, copy the smart object layer twice so you have the same object on 3 layers. Now apply a different mask to each layer and name them accordingly if you're using Generate Assets (e.g. 50% end-cap-left.png, [email protected]).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.