18 Replies Latest reply on Feb 17, 2017 2:01 AM by vinny38

    Clipping mask via placed illustrator file?

    tristanc97457499 Level 1

      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.

        • 1. Re: Clipping mask via placed illustrator file?
          tristanc97457499 Level 1

          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.

          • 2. Re: Clipping mask via placed illustrator file?
            tristanc97457499 Level 1

            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.

            • 3. Re: Clipping mask via placed illustrator file?
              BobLevine MVP & Adobe Community Professional

              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.

              • 4. Re: Clipping mask via placed illustrator file?
                Willi Adelberger Most Valuable Participant

                Your recommendation is terribly dangerous. If someone needs to place PDFs from Illustrator or InDesign, don't use PDF/X-1a or X-3, use only PDF/X-4 with Live transparency.

                • 5. Re: Clipping mask via placed illustrator file?
                  tristanc97457499 Level 1

                  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.

                   

                  Screen Shot 2017-02-15 at 19.02.32.png

                  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'

                   

                  Screen Shot 2017-02-15 at 19.22.08.png

                  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

                   

                  Screen Shot 2017-02-15 at 19.11.43.png

                  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.

                   

                  Screen Shot 2017-02-15 at 20.26.39.png

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

                   

                  Screen Shot 2017-02-15 at 20.29.49.png

                  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.

                  • 6. Re: Clipping mask via placed illustrator file?
                    Jeffrey_Smith Most Valuable Participant

                    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.

                    • 7. Re: Clipping mask via placed illustrator file?
                      tristanc97457499 Level 1

                      Hmmm, just tried to output, a few issues:

                      1. As you say, all artboards on one image, will need to manage a set of illustrator files – one for each icon
                      2. Export is at 100% resolution, and so low-fidelity on the 2x and 3x scales required for different devices
                      3. Anti-aliasing isn't supported so all icons are jagged (makes sense, 1-bit is either 'on' or 'off', so no chance for a graduated colour scale.)

                      Screen Shot 2017-02-16 at 09.58.17.png

                      Exported 1bit BMP (OS/2 format)

                      • 8. Re: Clipping mask via placed illustrator file?
                        vinny38 Level 4

                        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

                        • 9. Re: Clipping mask via placed illustrator file?
                          tristanc97457499 Level 1

                          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.

                          • 10. Re: Clipping mask via placed illustrator file?
                            vinny38 Level 4

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

                            • 11. Re: Clipping mask via placed illustrator file?
                              tristanc97457499 Level 1

                              So, in Photoshop you can set the opacity of the blending effects and 'fill opacity' independently. It means the blend mode of say a 'colour overlay' effect isn't blocked by the pixels.

                               

                              So, for example, in Photoshop I'd do it like this:

                               

                              Screen Shot 2017-02-16 at 13.59.41.png

                              1) Place black icon from source illustrator file on arbitrary background  (here represented by the cobalt blue fill layer)

                               

                              Screen Shot 2017-02-16 at 14.04.11.png

                              2) Set a white colour overlay layer onto my icon to colorise it with a normal blending mode

                               

                              Screen Shot 2017-02-16 at 14.04.40.png

                              3) When I change the blending mode to overlay though, the effect is invisible as the original black icon shows through.

                               

                              Screen Shot 2017-02-16 at 14.20.02.png

                               

                              4) By setting the fill to zero percent however, the black icon is knocked out allowing the background to blend with the colour overlay effect.

                               

                              InDesign gets me to Step 2 above using the 'inner glow' effect in place of the missing colour overlay. In fact it gets me to Step 3, as I can set the blending mode to 'overlay' for the inner glow effect, it's just useless as I can't find a way to knock the opacity of the original black icon back get to get me to step 4.

                              • 12. Re: Clipping mask via placed illustrator file?
                                vinny38 Level 4

                                Huh, I'm having real hard time trying to figure out what you want...

                                If I understand correctly, you want to be able to control color AND opacity to both icon and background?

                                If that so, you can... Using either Selection tool to control background frame and Direct selection tool to control placed graphic.

                                Of course, inner glow is applied to the graphic, not the frame...

                                I feel I'm missing something obvious... maybe after a good night sleep ^^ 

                                 

                                opa.gif

                                • 13. Re: Clipping mask via placed illustrator file?
                                  Jeffrey_Smith Most Valuable Participant

                                  Vinny, what screen capture utility are you using? Is it saving the screen capture directly as an animated GIF? Or, are you converting with another app?

                                  • 14. Re: Clipping mask via placed illustrator file?
                                    tristanc97457499 Level 1

                                    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:

                                     

                                    out.gif

                                    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.

                                    • 15. Re: Clipping mask via placed illustrator file?
                                      vinny38 Level 4

                                      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

                                       

                                      goodornot.gif

                                      1 person found this helpful
                                      • 16. Re: Clipping mask via placed illustrator file?
                                        tristanc97457499 Level 1

                                        Wow! I've spent so many hours trying to work out that combo. Yes! This does exactly what I need. Thank you for you help and patience. Perfect.

                                        • 17. Re: Clipping mask via placed illustrator file?
                                          vinny38 Level 4

                                          Aaaaaaaah I was starting to worry about my sanity.

                                          Glad you solved your problem

                                          • 18. Re: Clipping mask via placed illustrator file?
                                            vinny38 Level 4

                                            Hi Jeffrey

                                            I use ScreenToGif

                                            I think it's a Windows utility (not sure), If you're a mac user, you may try GIPHY Capture as suggested by PECourtejoie in an other thread.