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:

Current Desired

   (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).


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.

  • I don't get this. Why would you vary opacity when you need the objects to be opaque? That's what "only show the topmost pixel" means. If you make each object opaque then you have no problem. Aug 18, 2011 at 4:56
  • I honestly do not understand this question.
    – Hanna
    Aug 18, 2011 at 7:18
  • My resultant image needs to have nothing but black, at varying opacities. The resulting image needs to have transparency, but I don't want the layers' transparency to accumulate.
    – Dov
    Aug 18, 2011 at 11:44
  • What does (a) have to do with this question? You reference (b), but not (a), and that might be what is missing here so the question makes more sense. Aug 18, 2011 at 11:45
  • @PhilipRegan: good point, I updated the paragraph below the images.
    – Dov
    Aug 18, 2011 at 11:50

2 Answers 2


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.


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:

How to create an opacity mask


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.


Complex appearance

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.

  • The info on multiple fills is interesting, but as you acknowledge, not pertinent to my current task. If I take your suggestion and make a grayscale composition, can you detail how I would then take that and apply it to an all-black object with the same silhouette?
    – Dov
    Aug 18, 2011 at 18:26
  • @Dov brief how-to added to the answer.
    – Farray
    Aug 18, 2011 at 18:46
  • Hey, the I got it done - the tough part was getting the solid shape on the left side of the mask. I needed to have all the paths used in the mask selected, but the layer of the background shape selected. But, that is exactly what I was looking for.
    – Dov
    Aug 18, 2011 at 20:38

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.

  • The problem, is that the bottom layer shows through, and I don't want it to. I've updated my question a couple times in the last few minutes.
    – Dov
    Aug 18, 2011 at 11:51
  • I updated my images again to better illustrate my requirements. I'm making a Cocoa template image, so there are no grayscale areas, only varying transparency. Both (a) and (b) demonstrate this now.
    – Dov
    Aug 18, 2011 at 12:08
  • @Dov: I think I understand now, so here is one last edit. Aug 18, 2011 at 12:24
  • Okay, thanks, that sounded like what I was looking for. I think for now my best bet is to use the Trim pathfinder tool on a duplicate of my layers. That mostly gives me the appearance I want (it's what I used for the B image above). Thanks for your help.
    – Dov
    Aug 18, 2011 at 12:31

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.