2

I have made a simple tab UI with 3 possible buttons, left, center and right. The first thing I wanted to do was to simply make one big tab (which includes the left and right and center parts in itself), and copy it 3 times and add a mask to each of them, so only the desired part of the tab will be shown....than I renamed the layers to something like tab_left.png so Photoshop would generate the png file for me automatically....BUT the file generated wasn't the same as the one in photoshop.

each image had a effect, so placing the mask will make the effect change it's position, so I marked Layer Mask Hides Effects option in the effects menu, but the generated image was generated as if this option was not selected....how can I make this work? Or is it a bug in photoshop?

I am now using slices, but I really don't like slices, specially because it isn't as practical as the generate option, and to make the images with transparency things get a lot more complicated.....any good advices?


EDIT: Some images of what's happening... This is the bar, there will be text to indicate the buttons positions, but no separation on the buttons...when the user touches (or the mouse passes over it) the button appear (the button in the left)....when the button in selected (clicked) the button turns brighter (the button in the right). I have marked the left portio, the right portion and the center portion with red indicators, they are not in the project.

bar complete

In order to get this to work, I made 5 images: left, center, right, focused and clicked. If I have a bar and copy it 2x times and add a mask to make the left button it becomes like this:

bar with mask bar with maks and zoom

Which won't work for my purpose since as I add buttons to it's right there will be always a border, so to get it borderless I have to add the Layer Mask Hides Effects option to get this:

bar with mask hide option bar with mask hide option zoom

Same goes for the center and right buttons:

bar buttons

Just to be clear, there will be a leftbutton, many center buttons and a final right button.

The layers look like this:

bar layers

From top to bottom: 2 shapes to be the focused and clicked buttons, 3 layers that have the same image, but every single one with it's own mask, and the bottom layer is the image of the complete bar, just for reference.

When I make photoshop generate (File> Generate> Image Assets) this is what I get:

buttons generated

They are basically all the same, as if the Layer Mask Hides Effects option wasn't selected at all.... you can see the borders there in every single image, where they should not.

I like the Generate option because the images will be easily generated with their transparencies, where the other option is to copy it to another file with a transparent background and save it in there...which takes lots of time for many images and it's prone to error, and slices aren't the best thing also, since it won't give me the transparencies, unless I change many other objects visibilities...for websites slices might do ok, but this will be for a App, so individual transparencies are most welcome.

So I ask it again: What am I doing wrong and what's the correct way of doing it?


EDIT 3:

I am at Windows 7 x64 Photoshop CC version 14.2.1 x64 (same happens in the 2014 version: 2014.0.0 20140508.r.58.x64)


EDIT 4:

I submitted the files to Adobe and they confirmed it's a bug, once there is any fix for this I will place it in here.

8
  • 1
    Could you post example images of what you want, what you are trying to do and what is happening?
    – Joonas
    Jul 18, 2014 at 0:05
  • @Joonas just posted a better explanation with images
    – mFeinstein
    Jul 18, 2014 at 20:25
  • I was not able to recreate the issue. Seems to work fine with me :/
    – Joonas
    Jul 18, 2014 at 21:53
  • I am at Windows 7 x64 Photoshop CC version 14.2.1 x64...
    – mFeinstein
    Jul 19, 2014 at 22:59
  • 1

2 Answers 2

2

[Updated based on updated question]

In a quick test on Ps CC and Ps CC 2014 (x64, Windows 7 and 8.1), Generate is working as expected including the changes introduced by turning "Layer Mask Hides Effects" on and off. The PNGs correctly reproduce the three layer appearances.

From a production viewpoint, though, I think by trying to make things simpler you've making things overly complicated. Since you're creating assets for an app, these items are position-independent other than the fact that they're in a mockup. It would actually be more straightforward to simply create your right, left and intermediate buttons as standalone layers.

Selectively removing parts of an effect can be done in a number of ways besides "Layer Mask Hides Effects," which is a fairly all-or-nothing proposition that doesn't give you a lot of control. I'd suggest either of these as more flexible alternatives:

  • Create your object with effects, turn it into a Smart Object, then apply whatever masking you need. (This will also work with your single-candy-bar approach. Just copy the smart object twice and mask the copies separately.) A bonus with this approach is that if you change the color, gradient or whatever in one copy, the others update automagically.

  • Create the object with effects, then right-click the "Effects" tag in the Layers Panel and choose "Create Layers." This gets you a set of layers with the effects as actual raster layers, complete with transparency, which you can edit to taste, then merge or turn into a smart object.

I can't tell from your screenshots exactly what effects you're applying or why you would be having a problem with the generated PNGs. As I said, I see effects hidden or not in the output, depending on whether "Layer Mask Hides Effects" is checked. In troubleshooting strange anomalies, resetting your Photoshop preferences is one of the first lines of attack. You might give that a try.

10
  • @AlanGibertson please look at the edit that I made in which I better explain my process...can you see anything wrong in it?
    – mFeinstein
    Jul 18, 2014 at 20:26
  • I've updated the answer. Still not entirely clear to me why you have the issue, because I can't reproduce it, but I've suggested other ways to approach this workflow that bypass the problem anyway. Jul 20, 2014 at 0:21
  • I have tried another project from scratch and I got the same results... I will read your answer and see if things get better....worst is, this is a fresh install, I am not even after the 30 days trial time...
    – mFeinstein
    Jul 20, 2014 at 5:48
  • I will try your suggestions, for now I am using Stroke, Inner Shadow, Inner Glow and Gradient Overlay. I have placed a file in here if you want to try it: app.box.com/s/a3tvjgszgf5h3pa0ilwd
    – mFeinstein
    Jul 20, 2014 at 5:57
  • The Smart Object approach works well on your test file. Just remember to create the Smart Object, duplicate it, then apply the masks. Jul 20, 2014 at 23:45
0

If you set effects to layers and then mask it, effects applies to masked area.

Follow this steps:

  1. Create your layer and set effects to this layer
  2. Group your layer
  3. Mask your grouped folder
  4. Name your folder for generate-image assets (Don't set name to your layer for generate file)
  5. For every part (left-mid-right) duplicate your group and change mask position.

Sample Photoshop screen:

Sample photoshop screenshot

2
  • The problem isn't making the images is making the auto generated ones that don't reflect what's in photoshop. They should have already fixed this, but I didn't updated my photoshop yet to test.
    – mFeinstein
    Feb 19, 2015 at 15:14
  • @mFeinstein ok, I understood the question now. This problem seems to have corrected.
    – patapity
    Feb 19, 2015 at 15:38

Your Answer

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

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