Compositing transparent paths so topmost pixel wins

Question

I'm having difficulty wording what it is I want to accomplish, but I'll try to explain. Let's start with the images below:

   (a)           (b)

Image (a) shows the image as I have it right now, with the proper transparency for the topmost layer. What I would like is for the darker rectangle not to show the angled rectangle behind it, like in image (b), but without breaking the path into pieces (and without the additional stroke next to the upright rectangle. It's not clear, but if you look at (b) closely, the dark rectangle still is transparent.

The catch, is that there won't be one angled rectangle, but many, each with varying degrees of opacity. I only want the topmost pixel to show through for each shape, though. I also need to be able to change it flexibly, so copying each shape into a clipping group for each layer below it would be really cumbersome.

This seems like this should be a compositing mode or something, but I don't know what to call it, or how to do it (if there is a simple way. Also, I'm using Illustrator (CS5).

Update

Since it seems my motivations aren't entirely clear, let me explain some more. The image is going to be used in a UI for the Cocoa environment. It's going to be a template image, which means the only color used is black. The only way to introduce shades of gray is by varying the opacity. That's why I need what seems like such a strange constraint.

Update 2

I updated my images to better reflect the transparency problems. The bottom layer is now also transparent. The only chroma value in both images is now Black, at varying opacities.

Answer 1

100% Black + 0% Black = still Black

The question sounds sort of funny at first glance - "How can I make a translucent object be opaque?" Technically, this isn't possible by definition of the words. There are ways to do this in Illustrator without creating new objects, but they will not work for you if the only color you can work with is Black.

The thought process is that you can have 2 aspects to your object:

1. An opaque "base coat"
2. A varied-opacity upper layer.

You've stated your palette only contains Black so that makes the Base Coat simple -- it has to be black. At this point, it doesn't matter what you do with the top-coat because a translucent Black on top of opaque Black is going to produce, well, Black.

Unless...

End Use / Constraint

I'm not sure I understand your constraint. If you are just creating a monochromatic template image, why not use gray-scale opaque gradients in your Illustrator objects to produce the final image. Then use the produced image as an opacity mask on an all-black object to produce a final image that is varied opacities of Black without being opaque?

Just because your final image must be monochromatic and vary only in opacity doesn't mean that the objects used to create this image must be similarly constrained.

Here's how:

Compositing

There is a way to create flexible objects that have complex appearances without involving clipping masks or layer groups. Starting with CS3 (or earlier?), you can add multiple fills to your objects. When your object has multiple fills they get stacked like layers in the Appearance palette.

If you create an object with an opaque White fill, and then add another fill with gradient-opacity Black above it, you will have 1 object with the desired effect. Your artboard will stay very clean - no extra paths, no cluttered layers or groups, no unnecessary clipping masks, no fear that Direct Selection will only grab some of the anchor points you need, no fear of "tearing" from objects not being lined up to the milli-point.

Example:

It should be noted that, for your example, this is not going to produce a different result than just using a grayscale gradient. However, it's a good technique to have in your kit.

There is a great tutorial at TutsPlus.com that demonstrates the use of multiple fills to create complex effects. It has several good examples of the flexibility and power of this technique.

Answer 2

I think what you are looking for is a layer blend mode to do what you want to do. Illustrator doesn't have blend modes, and even if it did, there isn't one (at least in Photoshop) that allows you to do what you want to do. Transparency is a blunt tool in this case because the blend modes react to it; you simply need to allow for the transparency or turn it off completely.

This is precisely what layers are for: to allow you to show the whole of the topmost objects without having to clip everything underneath them. Place each object on its own layer, and you have the editing capabilities you need without having to clip objects to make it all work. Layers are a simple tool that you can use strategically to your advantage.

So, based on your example, you can have the topmost frame with filled rectangles underneath—one with transparency and one opaque—you can swap out as needed. Not ideal, but it is a lot easier to turn a layer on and off than clipping shapes every time you have an edit.