Smart Type Halos in Photoshop and Illustrator

Gentle readers, I am back again with yet another tutorial that relates to the legibility of type. I love the art of map labeling, and the fact that this will be my third post on integrating type into a map suggests that I’ve probably thought way too much about it. While my two previous posts were on type knockouts, this time around, I’m going to talk about another favorite trick of mine: making type halos that appear only when needed.

Notice in the map below that there’s a faint glow around parts of the label for the Cadillac Plain. You can see it most prominently on the left side of the label. By the time you get to the right side of the label, it’s mostly gone.

Halo-01

Clipped from the map featured in my Terrain in Photoshop: Layer by Layer walkthrough.

Notice what happens when I turn off the label, but leave that glowing halo. You can see that it shows up only in some areas.

Halo-02

Also, notice how the Lake Mitchell halo is much more prominent than the Lake Missaukee one.

Specifically, it pops up only where the underlying map is darkest, and then it gracefully fades away as the map lightens. This halo is a tool that we bring in only when it’s necessary to help the label’s legibility. When the map is light, the dark label survives fine, and a glow serves no purpose. The labels only need a boost when the underlying map is darker, since the contrast between the label and the map will be weaker. You can see the value that the glow brings by looking at how the labels appear without it.

Halo-03

We don’t want to overuse the glow when it’s unnecessary, since it’s covering up our map and it feels clunky when it’s used in places where it’s not needed. Compare the first image, with the glow that fades in-and-out, with a glow that doesn’t change based on its context.

Halo-04

Now the label for Lake Missaukee has a glow around it, but it’s not really necessary. It looks a little silly, and/or heavy-handed. A needless intervention.

So, how do we make these variable label halos, that fade in and out as needed? Well, that depends on what software we’re working in. Let’s start with Photoshop.

In Photoshop

Let’s start with a map, and some labels. You might have imported these labels (and/or parts of the map) from Illustrator, or perhaps you made the whole thing in Photoshop. It doesn’t really matter. Here’s my starting setup, though. For simplicity in this demonstration, I have a single map layer, and a group with a few labels in it.

HaloExercise-01

Click for a larger version (you can do this with most of the screenshots below).

To start, I’m going to need to make a copy of the Labels group. Click on the it (in the Layers panel) and drag it down to the bottom until you’re hovering over the icon that looks like a piece of paper with a corner turned up. Release the mouse and you’ll have a copy of your group.

HaloExercise-02

Double click directly on the name of one of these groups to rename it. Call the topmost one “Labels” and the bottom one “Glows” (you can also click and drag group in the Layers panel to re-order them). Then, turn the Labels group off by clicking on the eyeball icon to the left of the group name. We’ll be setting this aside until later.

Now I need to make some nice glowing halos. I can do that selecting the group that contains my labels, then clicking on the fx icon found at the bottom of the layers panel, and choosing Outer Glow.

HaloExercise-03

There are a lot of settings here — probably more than you’d need in most situations. They’re all worth playing around with to understand, but for simplicity, let’s focus on just a few.

For color I’m going to go with a white halo, set at 60% opacity, so that my glow simply whitens up my map a bit. And if it’s not already set, the normal blending mode is probably called for here, so that I don’t have this white color blending into the map in unexpected ways.

The size slider controls how far from the type your halo will extend, and the spread slider controls how soft and fuzzy its edges are. The settings you see in my example above are not likely to be the best settings for you. This is something you need to experiment with — there’s no one-size-fits-all sort of answer that I can give you. The overall goal is to make something that’s effective, but subtle. It should give the labels a boost, but not be too noticeable on its own.

Next up, it’s time to start making things fade in and out. Select the Glows group and then go down to the bottom of the Layers panel and click on the image of a rectangle with a circular hole.

HaloExercise-04

This creates an opacity mask for the group. We’ve worked with these before, if you’ve been following along with my other tutorials. If not, go check out the Opacity Masking section of this tutorial before proceeding, which will explain the basic concept (though in an Illustrator, rather than a Photoshop, context). For now, our mask is empty, and so it’s represented by a black rectangle, which means: hide everything in this layer.

HaloExercise-05

We’re going to put a copy of our underlying map into this mask, so that the glows get more or less opaque as the map gets darker or lighter. I’m going to go click on my map layer, hit Cmd-A (or Ctrl-A, if on a PC) to select the whole thing (or go to the Select menu at the top and choose All), and then I’m going to copy it (Cmd-C on a Mac or Ctrl-C on a PC) to the clipboard. From there, Alt-click on the opacity mask to go inside. To paste in our map, go to the top menu and choose Edit  Paste Special  Paste in Place to ensure that the map ends up in the correct place.

HaloExercise-06

Since we’re in a mask, we’re only working in shades of grey, which correspond to levels of transparency for our glows. Dark means “make the Glows layer very transparent” and white means “leave it opaque.” What that means is, right now, our mask is completely inverted from what we want. Dark areas of the map (where we want our halo to help out) are also dark in the mask, meaning that the halo is being made more transparent. To fix this, hit Cmd-I to invert the mask.

HaloExercise-07

With that, you can Alt-click the mask again to escape it and once again see your map, labels, and glows. Now they’ll begin to fade in/out based on the mask, which is based on the map. The problem, of course, is that our labels are also fading in and out, not just the halos around them.

HaloExercise-08

And this is why we made a second copy of our labels. Turn those back on. They’re untouched by the mask and remain solid, so they cover up the fading labels beneath. Now we have solid labels and fading glows.

HaloExercise-09

From here, you may wish to make some further tweaks, either editing the glow effect, or possibly even the mask. You might use the Levels or Brightness/Contrast adjustments to modify the mask’s overall effect. But the basic idea is now in place: the labels receive more help where they need it, and the glows generally get out of the way when they are useless.

Bonus content: This is a good time to show off a cool feature in Photoshop, even though it’s one that’s unnecessary for this process. Turn Labels group back off for a moment, and then select the Glows group. Right above it on the Layers panel you’ll see an option marked Fill that’s set to 100%. Set that to 0% instead. What this does is get rid of the layer’s main artwork (the labels), while still keeping the glow on the labels. The fill setting is almost exactly like opacity, except it doesn’t operate on any layer effects (like glows). The opacity setting, on the other hand, will make both the labels and the glows get more and more transparent.

HaloExercise-10

So now you’re left with just the glows, and then you can turn the Labels group back on. Again, this is totally unnecessary in this situation, because the labels in the Glows group are hidden by the solid labels in the Labels group, so there’s no need to hide the former. But, this could be handy if you wanted a Labels group that was semitransparent, and you didn’t want it affected by the labels fading in and out in the Glows group underneath.

In Illustrator

Now, if you don’t happen to be working in Photoshop, fear not! This same idea works just fine in Illustrator, which also has the ability to create both glows and masks.

Once again, let’s set up a map and some labels. And this time, I’m going to invert things: I’ve got light labels that need a dark halo, rather than the other way around.

IllustratorHalo-01

I’m going to click on the small circle next to my Labels layer to target its appearance (if you want to know more about appearance attributes in general, I recommend taking a detour and first reading The Power of Appearances, another Illustrator tutorial I posted on here some time back). Then I’ll go up to the Effects menu and choose Stylize → Outer Glow.

IllustratorHalo-02

There are far fewer settings on the Illustrator version of the Outer Glow (I appreciate that simplicity). Again, they require a little messing around to find the exact look that’s best for your map, so I can’t tell you what to pick. One piece of advice: by default, the blending mode is usually set to “Screen,” which is likely not what you want. I don’t want to get into the mysteries of Adobe’s blending modes, but I’ll simply say that Screen is generally for lightening underlying things. In this case, we want a dark glow, and so if you set the mode to Normal, you’ll get a result that’s probably more in line with what you were expecting.

I’ve set my glow to 45% opacity, a black color, and a 0.5pt blur, and this seems to be enough for my labels to stand out against the lighter areas of the underlying map.

IllustratorHalo-03

This time, for demonstration purposes, we’ll do things in a bit different order. I’m going to modulate the glow’s opacity, and then I’m going to create a separate, untouched version of the labels. It gives me a chance to show you a couple of other useful things.

As we did in Photoshop, we’re going to put a copy of our underlying map in an opacity mask, to modulate the label glows. In the case of my example map, I’ve got a bunch of hexagons and other stuff in my basemap layer. I’ll copy everything in that layer to the clipboard. Then, I’ll once again target the appearance of my Labels layer by clicking the small circle next to the layer name. From there, I’ll open up the Transparency panel.

IllustratorHalo-04

Hit the Make Mask button. Once again, we start with an all-black opacity mask, which means: hide everything in this layer. Uncheck the Clip box — this (annoyingly default) setting tells Illustrator: hide everything that falls outside of the bounds of the artwork we have inside our opacity mask. Since we have nothing inside in our opacity mask at the start, everything on our map counts as “outside the bounds of the artwork inside the mask” and is hidden. Unchecking the box turns out mask white, so everything shows up again.

IllustratorHalo-05

As with Photoshop, Alt-click on the mask (the white rectangle on the right) to go inside. Then go to Edit  Paste in Place to drop our basemap in at just the right location.

IllustratorHalo-06

Unlike our exercise in Photoshop, we don’t need to invert our mask this time. We want our dark glow to be strongest when the basemap is lightest. When we were working earlier in Photoshop, the opposite was the case: we wanted our glow to fade out when the basemap was lightest, so we needed to invert the mask, so that its light parts became dark and told Photoshop to render the glow invisible.

A note: if, in the future, you do need to hit the Invert Mask button in Illustrator, note that it will have the intended effect, but won’t actually make the mask look any different, as Photoshop does.

Alt-click on the box to the left of the mask in the Transparency panel to go back to the map. Once again, our glows now fade in and our as needed. But, so do our labels.

IllustratorHalo-07

We need, once again, an untouched copy of our labels to go on top. As with Photoshop, you can duplicate the Labels layer by clicking and dragging it to the icon on the bottom of the Layers panel that looks like a page with an upturned corner. Rename/reorder so that there’s a Glows layer on the bottom and a Labels layer on the top.

IllustratorHalo-08

Note that the glow gets stronger now that there are two of them, one stacked atop the other.

Now, both layers are presently masked. We want to get rid of both the glow and the mask on the top, Labels, layer, so that it’s just a layer of plain, unadorned labels. Target the appearance of the Labels layer (again, click that little circle) and open the Appearance panel. You’ll see that the layer has an Outer Glow on it.

IllustratorHalo-09

If you click on the words Outer Glow, you can go and change your glow settings. That’s handy for later on if you need to make adjustments. But we’re not working with our Glows layer, we’re working with our Labels layer, so I really want to just get rid of this spare glow. Click to the right of the words Outer Glow to highlight the effect (don’t click on the words, just next to them). Then, click the trash can icon at the bottom of the Appearance panel. That glow will be removed.

IllustratorHalo-10

Keep targeting the appearance of the Labels layer and go to the Transparency panel next. Here, we can see that we still have an opacity mask in place. Hit the Release button.

IllustratorHalo-11

This unfortunately doesn’t just get rid of the mask. It actually takes all the contents of the mask and dumps them back on your map. So now I have two copies of my basemap: the original, and the one that used to be in the mask. We need to delete the latter. In the Layers panel, expand the tree to see what’s inside the Labels layer. Notice that the first thing there is a Group.

IllustratorHalo-12

That’s got all the stuff that used to be in the opacity mask. Select and delete it. And now we’re back to just a simple Labels layer, with no fancy effects. It sits atop the Glows layer, and hides the fact that the Glows layer labels are fading in and out. With that, we’re all set: we have white labels that get a little dark glow behind them when they need it. The glow fades away when it’s less useful.

IllustratorHalo-13

Again, this would have been easier if I’d just duplicated the Labels layer before applying a glow and opacity mask, but it’s useful to know how to alter/remove those things later. And now you know how to adjust your glow using the Appearance panel, if you decide it’s necessary.

So, that’s how to make glowing type halos in Photoshop and Illustrator that respond to the basemap underneath. It’s a subtle touch. It’s not something I do all the time, but it’s a handy tool to bring out when it can help. Enjoy!


This tutorial is, and will remain, free, but if you derive some value from it, you are welcome to make a donation to support my continued work.


 

Advertisements

Outside Readings

While I’ve not been posting here this summer, neither have I let my writing faculties lie idle. The newest issue of Cartographic Perspectives, which is the free & open journal of NACIS, came out today and it happens to have two pieces that I wrote, along with a third one that’s connected to my work. I hope you’ll check them (and the whole issue) out.

  1. The Power of Appearances” is a combination and re-working of two tutorials I’ve previously put together here: Even Fancier Type Knockouts in Illustrator and The Power of Appearances. I reworked some figures and hopefully presented everything in a cleaner, more coherent package.
  2. A Freelancer’s Approach to Teaching Cartography” involves me musing about how I bring my experiences as a practicing mapmaker into the classroom. I teach introductory cartography occasionally, and I continue to alter the structure, expectations, and content of my course in order to make the experience of my students more like my own as a freelancer.
  3. While I didn’t write it, you can also check out Daniel Cole’s “Review of the Ecological Atlas of the Bering, Chukchi, and Beaufort Seas.” I made 130+ maps for the Ecological Atlas, which was published last year. You can also see the whole atlas for free, online.

Before I leave off, I’ll also immodestly drop in those donation buttons you’ve probably seen me adding everywhere. In the mapmaking community, practitioners both inside and outside academia come together to share knowledge through journals or conferences. Academics build their CVs and get tenure based partly on this sort of work, and are highly incentivized to do so. But many of the rest of us have no such incentive (in fact, some people’s companies would prefer that their employees not spend work time writing tutorials or presentations). It’s an ongoing challenge with a journal like Cartographic Perspectives, which relies on getting content from non-academics. If you’re outside academia, I hope you’ll consider being a part of the journal sometime, if you’re in a position where you have the time and resources to share your knowledge.