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


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 '14 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 '14 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 '14 at 21:13

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 '14 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 manian@adobe.com Dec 1 '14 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, end-cap-left@2x.png).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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