Skip to main content
T
tristanc97457499
Participating Frequently
February 14, 2017
Answered

Clipping mask via placed illustrator file?

  • February 14, 2017
  • 3 replies
  • 3441 views

Hi,

I'm having an issue working out how to create a clipping mask with placed (not copy and pasted) illustrator artwork.

I have an icon set that I manage in illustrator. I create an artboard per icon and then place individual icons into InDesign via the 'place... > show import options' to select the artboard specific to the icon I want. I have a single layer enabled on the placed artboard which is a simple shape layer, black fill, no outlines, simplified as much as possible (all strokes outlined beforehand in illustrator and 'unionized').

The trouble I am having is applying colour plus blending modes to the icon. My current solution is to enable an inner-glow big enough that it acts in a similar way to a 'colour overlay' layer in Photoshop, but it feels a bit of a hack. Plus, it doesn't allow me to zero the opacity of the artwork if I want to screen blend the colour overlay for example.

Is there a way to do this? I know I can create an inverse of the desire effect by:

  1. Grouping the icon with a filled rectangle set to the desired colour/blend mode and placing it behind the icon
  2. Setting the icon opacity to 0%
  3. Setting the containing group to 'knockout group'

I would rather not simply copy and paste the artwork from illustrator as the icons are being modified frequently so it's a much smoother workflow to simply update links.

I've tried to set the layer in Illustrator to a clipping mask but couldn't seem to get this working. I feel I must be missing something simple but googling is bringing up nothing specific.

This topic has been closed for replies.
Correct answer vinny38

Thanks for taking the time to make that example Vinny!

Yes, I'm able to get as far as you have in your example. I'm able to set the tint of an icon to a fully opaque colour. However, in the last part of your example, notice as you bring down the opacity how the inner-glow mixes with the original black fill of the icon, until finally the icon completely disappears.

I would like the inner-glow to be at 100% opacity whilst the original black fill is completely translucent. This is to ensure the original black fill of the icon doesn't interfere with the colour, opacity and blending mode of the applied inner-glow effect.

Perhaps my example wasn't clear because I used a solid background fill. Sorry about that. I've used a photo as the background in this new example which hopefully makes it a bit clearer:

Video commentary:

  1. In the first part of the video I apply a 'colour overlay' effect (not blending mode) with maximum opacity and a 'normal' blending mode. More or less the same effect I get when using an inner glow with InDesign.
  2. Then in the second part, I set the blending mode of the colour overlay effect to 'overlay' keeping its opacity at 100%. You can see the icon goes back to black and the effect is rendered invisible. This is because the 'colour overlay' is blending with the original black of the icon rather than the background.
  3. I resolve this by setting the 'fill opacity' of the icon layer to 0%. This makes the black of the icon completely disappear whilst leaving the layer effects completely intact. You can see that the original black fill of the placed icon completely disappears and the colours of the background blend with the white icon set to the 'overlay' blending mode. Notice how the icon blends with the photo in the background.

Hope that makes sense. It doesn't help that 'colour overlay' and the the 'overlay blend mode' are two different things, and 'fill opacity' is different to 'layer opacity' but fingers-crossed the video makes it a little clearer.


Hi again.

So I slept well, my brain is back to normal but... I understand what you're saying, however I don't get what is the problem reproducing this in INDD?

If you apply a blending effect to the graphic, of course it will not work.

But if you apply it to the frame itself, it does what you want, doesn't it?

Same thing in Photoshop: in your demo, you applied blending to the effect instead of applying it to the layer itself...

I still feel like I'm missing something

3 replies

vinny38
vinny38
Legend
February 16, 2017

Hi

Imo, using inner glow sure is a hack, but not a bad one really. I don't see any workaround that would be as fast and easy.

My only concern would be PDF rendering.... might be a bit dizzy...

That said, here are a couple a thoughts:

1- If you want to use the "knockout group" method, you can easily get rid of the hairline by applying a stroke to the icon frame (nb: you may want to consider using Objet style). Indd preview issue isn't an issue really, since it's just... a preview ^^. About Mac preview, I don't know about it, being a Windows user...

2- Another workaround: In Illustrator, export icons as TIFF files. Make sure Greyscale mode is selected and don't forget to check "Use artboards" in order to save a tiff file per icon. In INDD, you'll then be able to colorize the icon using direct selection tool. However, the remaining icon background might be a problem. If your icons are always placed on a 1-color background, then you can get back to Selection tool and change the icon background color applying same swatch than document background. If not, well... this just won't work.

Hope that helps

Vinny

T
tristanc97457499Author
Participating Frequently
February 16, 2017

Hi Vinny, thanks for the response – and yeah, I think you're right, the inner-glow is likely the simplest solution. I would have liked a way to set the opacity of the icon and the inner-glow independently, to allow for transparency/blending effects of the colourised inner-glow that show through to the background but I think I'll have to give up on that dream.

The 'knockout group' method does allow this, but I really miss the preview mode. I'm using InDesign for UI work and I'd miss just being able to hit shift-w to get a quick look of where I'm at. Exporting to PDF and then viewing on device via dropbox lengthens the workflow a little too much for my tastes.

If I'm desperate, maybe I'll try combining the two – setting some object styles for the layout workflow (inner-glow) which I then switch around for export (knockout group). Even then I need to export to PDF/X-3:2003 as that's the only way I can preview my design on an iOS device.

It's a shame, because despite this, I still think InDesign is the best tool for UI design and I've tried them all. Photoshop, Illustrator, Sketch, the new Adobe XD beta. I think Adobe built a great tool for layout in InDesign and it's strange to see that they've tried to replicate Sketch in XD whilst ignoring all the relevant pieces from InDesign.

Good to know about the stroke on the icon frame trick! Thanks again.

vinny38
vinny38
Legend
February 16, 2017

I would have liked a way to set the opacity of the icon and the inner-glow independently, to allow for transparency/blending effects of the colourised inner-glow that show through to the background...

Doh!

I don't understand what you mean here...

Maybe a picture of what you want to achieve would help...

BobLevine
Community Expert
BobLevineCommunity Expert
Community Expert
February 15, 2017

You cannot edit Illustrator artwork in InDesign. Beyond that I'm not really sure from your description what you're trying to achieve and based on the lack of responses, I'm guessing that nobody else does either.

Lack of available information is one reason. In the future, version of InDesign, operating system and if you're having problems viewing a PDF, what reader you're using. Generally speaking, anything other than Acrobat or Reader is going to be a crapshoot and Mac Preview is horrible.

T
tristanc97457499Author
Participating Frequently
February 15, 2017

As suggested elsewhere, I have made an inverse of the artwork in illustrator as the first step in my workaround above, and whilst this is effective, the 'knockout group' has the unfortunate attribute of not exporting correctly to PDF. In Acrobat it displays a hairline artefact around the icon, and in Preview on Mac and the PDF renderer in iOS the 'knockout group' appears to have no effect.

T
tristanc97457499Author
Participating Frequently
February 15, 2017

To others who may face the same issue down the line, the PDF export issues are resolved to a large extent via selecting to export using the PDF/X-3:2003 standard in the export dialog.Ensure the transparency flattener is set to High Resolution under the 'advanced' tab in export. I also opted to set the compression for images to a multiple of 72 to avoid any anti-aliasing issues. (My PDFs are for viewing on a mobile device.) Some more obvious hairline visual artefacts remain when viewing in Mac Preview but are almost invisible on an iPhone.

J
Community Expert
Jeffrey_SmithCommunity Expert
Community Expert
February 15, 2017

Thank you for your responses.

To give you some context: I am using InDesign to layout a User Interface. I know InDesign is predominantly designed for print, but it has flirted with interactive design as evidenced by the Web and Mobile document intents. (In any case, I find it a far superior tool to Sketch and XD  for UI design in almost every way bar a couple of exceptions , one of which is described in this thread.)

A big part of the UI is the various Icons used in the app. The icons are managed in an Illustrator file, an icon per artboard, and InDesign's integration with Illustrator and the ability to update all links with a double-click is perfect for that. Illustrator also allows me to export my icons fairly quickly by exporting all my artboards for the various device resolutions required.

UI icons laid out on their artboards in Illustrator

However, what I would like is some functionality similar to photoshop where I can 'tint' a placed object. This would mean that I can update an Icon in my illustrator file, and automatically have it updated in InDesign with my chosen tints and blending effects. In Photoshop, this might be accomplished using the 'colour overlay' blending mode for a shape. Or using a fill layer set to a clipping mask (hence the thread title). As there is no 'colour overlay' mode in InDesign I used the 'Inner glow' object style as a replacement which works fairly well but is a bit of a hack.

So my question is, is there a better way to do this in InDesign?

The best way I have found so far is to use a 'knockout group':

  1. Create an 'inverse' version of each icon in a separate illustrator layer
  2. Place the inverse icon in InDesign selecting the correct layer to display
  3. Group the icon with a filled rectangle set to the desired colour/blend mode and placing it behind the icon
  4. Setting the icon opacity to 0%
  5. Setting the containing group to 'knockout group'

UI icons laid out on their artboards in Illustrator – now inversed.

Whilst this works, and also allows a blending mode to be set on the chosen tint, it has its own issues that make it unusable for me:

  1. It doesn't render properly in InDesign (aliasing illustrated below)
  2. It doesn't render at all in Mac Preview/iOS (I'm prototyping UI on an iPhone)
  3. It renders with a hairline artefact in Acrobat

1) Icons rendered in InDesign (100% zoom) colourised using 1) the 'inner glow' method, 2) the knockout group method. The second icon displays heavy aliasing.

2) Icons rendered in Mac Preview colourised using 1) the 'inner glow' method, 2) the knockout group method. The second icon does not render.

3) Icons rendered in Mac Acrobat Pro (100% zoom) colourised using 1) the 'inner glow' method, 2) the knockout group method. The second icon displays hairline artefact (at every zoom level to varying degrees)

Is there a better way!? Fingers-crossed.


Here is a workaround: from Illustrator, export the icons as a 1bit BMP (OS/2 format). There will be one image that contains all artboards, but this will allow the ability to colorize icons without transparency involved, and allow a link to master Illustrator file for editing and updates.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices