Creating a transparent frame around an icon overlay

[Tam9]

First of all, I am a bloody Illustrator beginner, so please explain it for dummies, not experts! 🙂
Also, my version of Illustrator is in German, not english, so mind that I might use different wording than in the actual program.

I have to create and change software icons from already existing icons. These are all .svg files and have to be saved as svg again.

For many of those, I need to add overlays to the icon.

Example:

This is the icon:

This is the overlay:

 

Added together (without a frame):

The overlay now needs to be sorrounded by a 1pt wide transparent frame, like this:

Now, I have finally found a way to make this work at all. The problem is that I have to do about 200 of these and it is currently incredibly tedious and takes up to 30minutes per icon.

This is my way to go:

1. I copy the overlay (here: checkbox)

2. I delete all details of the overlay and only keep the outer shape/ outline.

3. I turn the outline into an object (object > path > outline (/3rd option in list)) and delete the inner path (doubleclick on object, selecting it, delete) to make it a flat filled object.

4. I add a new outline of 1pt width to create my required frame. I repeat step 3 and end up with a flat object that is 1pt wider than the original overlay. (Transparent here for better visibility) Then I move the extended overlay exactly centered over the original overlay.

5. I turn every path that is part of the icon (here: document) into an object.

>Very tedious because I have to check every layer seperately. If I just select all layers of the icon and try to turn it into an object, it won't work as soon as there is one layer among them which isn't a path. This step is necessary because subtracting directly from a path causes problems and changes the shapes.

6. I copy the extended overlay numerous times and place them all on top of each other.

>Very tedious. Is there a way I can copy and paste into the exact same position by default?

This step is necessary because as soon as I subtract the extended overlay from one layer, the layer of the extended overlay is replaced by the result of the cut out layer. (Note layers "EO" and "TEXT" in the picture, here I subtracted EO from TEXT, the image on the right is the result - EO and TEXT are gone and a new group has been created instead.) Can I avoid this (=keep the e. overlay intact and keep the cut out layer in its position)?

before (notice layers EO and TEXT)after subtracting EO from TEXT

7. I select the extended overlay + one single layer of the icon. I subtract the extended overlay from that layer (Pathfinder > subtract icon in foreground ) Rinse and repeat for every single layer of the icon.

>As soon as I select several layers of the icon, it won't work or it gives me some weird unwanted result. Now this icon only has 3 layers but imagine more complex stuff.

8. I drag the cut out icon layer back to where it originally was (in the layer list!) since it has moved into the position of the extended overlay which I subtracted from it (> explained in step 6).

>It can be really difficult to remember the right position for the layer since neither the name of the foreground layer nor thus of the background layer is kept.

9. Delete the extended overlay and make the overlay visible again. Done.

I really hope there is a simpler solution to this because the task in itself sounds very simple at first. Any tips or ideas on how to do this more efficiently? Isn't there a way to just create an outline around the overlay that makes everything behind it transparent?

Thank you in advance.

Tamara.

[Doug A Roberts · Accepted solution]

If I'm understanding you correctly, add another stroke to the tickbox object at the size you need (i.e. to form the transparent area). In the appearance panel, give that stroke only an opacity of 0%. Group the objects, then in the transparence panel, tick 'Knockout Group'.

I'm not 100% sure which parts need to be transparent, but obviously if you need the white areas to be, remove the fills:

[Tam9]

Thank you! I didn't know you could add a second stroke.

The white bits don't need to be transparent, what you did is just what I'm looking for.

What I don't understand is how you managed to create the transparency like in your image. I added a stroke and chose opacity 0% and knockout group, but all it does is become transparent. Do I need to regroup something or did I select the wrong bit?

Also, is it necessary to keep the outline stroke as a path? I can't always have it as a path because a) I sometimes need to adjust the size of the whole overlay but keep the proportions identical, b) some overlay icons come with outlines as objects by default and c) the stroke is alway centered and will hide a bit of the second stroke.

But if I add a stroke to the outline as an object, it adds one inside too like so

I can't find a way to turn that stroke into an object as well, double clicking doesn't work on that one as it also isn't show under "layers", but just "appearance".

[Doug A Roberts · Accepted solution]

You need to group the whole thing, including the page/list object, and apply Knockout Group to the transparency options of that group, not individual objects. Knockout group works only within a group.

If you need to adjust the size proportionally, in the transform panel tick 'Scale Strokes and Effects' before resizing.

You can drag the stroke down in the Appearance panel so that it is below the fill or other strokes, similar to objects in the layers panel.

[Tam9]

I did it, thank you! 🙏 This is so much easier. Perfect answer!

[Tam9]

One thing actually: Is there a way I can place the icon into the corner so that the entire stroke is inside the visible area, without changing the stroke to be on the inner side of the path (because that would change the appearance)? Here is what it does usually but I need the whole black stroke to be visible

[Doug A Roberts]

I'm afraid you've lost me there. What isn't visible in that image?

[Tam9]

If I align an object into the corner, the path is aligned and the stroke is partly placed outside of the artboard, since it is centered over the path. I need the edge of the stroke to be aligned, not the path.

What I wantWhat I don't want

[Doug A Roberts]

Oh I see, yes. In the Align panel, open the menu and check 'Use Preview Bounds'. Then use the align tools with 'Align to Artboard' on.

[Tam9]

You're an angel. I'm really not used to getting quick useful answers online! 🙂 Thanks a lot.

[Tam9]

I just noticed that the knockout group setting gets deleted as soon as I save the file and reopen it and there is no transparent stroke anymore. Do I need to change something in the setting when I save? These are my current settings:

[Doug A Roberts]

I'm afraid I don't know enough about the SVG standard to help you with that. It's possible that SVG doesn't support knockout groups.

If that is the case, you might have to flatten transparency before export. (Object > Flatten Transparency. Move the Slider to 100% vector)

[Ton Frederiks]

And check "Preserve Alpha Transparency"

[Tam9]

Oh great thanks 👍

[Tam9]

Okay, so... this happened.

before reducing transparenceafter reducing transparence

This only became visible after saving and reopening the files, meaning I just messed up 10 files (and yes I should create more frequent backups).

[Doug A Roberts]

Is this in the SVG export or the Illustrator original?

[Tam9]

This is an svg (saved in illustrator and then reopened) but it was an svg all along.

[Monika Gause]

Don't use SVG as your working file format. Just. Don't.

Most probably you saved with the default decimals setting. And this shifts your paths.

[Tam9]

So what should I do instead? Save as .ai and then export into .svg in a seperate file?

I was initially supposed to edit these icons in inkscape where .svg isn't a problem, but since I couldn't find a solution for my problem in there, I settled over to Illustrator.

[Monika Gause]

As long as you work on it, save as AI, which is the native file format that also keeps effects and knockout groups live.

SVG is only a deliverable.

That is different when working in Inkscape. For Inkscape SVG is its native file format. Although Inkscape also makes a difference between an Inkscape SVG and a general purpose deliverable SVG.

[Tam9]

Unfortunately, exporting the files to SVG afterwards does the same thing and I can't use the icons like this 😓 My boss is telling me to use inkscape for everything now, but I can't figure out how to do anything in there since it doesn't even display any layers and I've never used it before.

There isn't perhabs a waterproof way to export to SVG without messing up my files? I'm starting from zero again if I now have to figure this out in another program 🤦‍:female_sign:

[Monika Gause]

Before the final export you will of course have to first expand your effects and then flatten everything. Especially knockout groups need care before exporting to SVG.

But what exactly needs to be done, depends on how exactly it has been built. So you will have to dive deep into Illustrator and your files in order to figure out a workflow for all of that. There are of course ways to do it efficiently, but there's a learning curve to it. There are no easy-one-size-fits-all recipies.

BTW: of course Inkscape can show you layers: In the Objects Panel.

[Tam9]

That definitely fixes the distance I need but it unfortunately turns the transparent stroke into opaque white.