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.
In order to get this to work, I made 5 images:
If I have a bar and copy it 2x times and add a mask to make the
left button it becomes like this:
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:
Same goes for the center and right buttons:
Just to be clear, there will be a
center buttons and a final
The layers look like this:
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:
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?
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)
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.