DEPTH & LIGHTING

Well hello my name is Carey, and today we’re gonna get into some lighting techniques for more dynamic depth to give your design that eeeeeextra!

This time we’ve got another one from Dan Skvaril for the 5th challenge in the Visual Design Lab. He gave me two, I’m doin two! In this challenge, you develop a design based on a theme, and the theme he chose was “winter”. He was working on evolving his image by iterating on it, and had started to develop some better scale relationships between elements. In this version, we’re starting to see some depth in the frame too, but there’s still a lot we could do to improve the depth, so I thought that would be cool to work with. It’s pretty flat, but he’s a UI/UX designer, and I imagine flat stuff is exactly what he’s workin with all day long!

But depth really makes your imagery pop, and there are some simple strategies for developing depth, whether you’re a motion designer or a UI designer, or whatever. The first is to use perspective. The second is to simply show elements clearly occluding one another. And the third is to use lighting. Once you have those, there are also tricks like fogging and focal blur, but these three are right at the core.

Perspective is pretty basic, right? These radiating lines kind of tell your eye that this is far, and this is near. Foreground and background. But what it really is, is a contrast in scales. These elements are larger here and smaller here, and if that’s all we have to go on we tend to assume that what’s bigger is closer. So the bigger circle is in the foreground.

Occlusion is also pretty simple. Have one sit in front of the other and noticeably block part of it, so your eye can really tell which is in front, and which is in back. And then do that a lot. You get more depth the more the viewer can distinguish where each element is in relation to the others, and how they all sit in space from foreground to background, so letting one significantly occlude the other really helps. And to do that, you need some kind of textural or color contrast between the overlapping elements, to let us distinguish between them and see the edge of the one in front. So we can use hue, saturation, and value to do that, which means you can use lighting.

And lighting is its own thing, it’s a little more complicated. Whole careers are built on lighting. But you don’t have to get that complicated with it. Where is it bright? Where are the shadows? I’ll show you some tricks I use when working with photos or illustrations, and you can use them in 3d too.

In this case, it’s mostly photos and the imagery here is a little hard to work with. Last time we talked about using photography, and that it works a lot better when you find shots that have lighting already baked into them. These elements are all really flat, which means it’s gonna be hard not to end up with something flat. Look at this, flat. Flat. Flat. And the dragon just has lighting coming from every which way, I don’t know what’s goin on, some kind of cave-based sex party I don’t know let’s keep moving here.

I’m gonna strip most of these out, but what’s nice about this one is that even though the lighting is flat or nonexistent, there’s some real perspective in this aurora that wasn’t getting used. Big here, small here, you can feel it coming out at you as a result. So I’m gonna start with that and start roughing out some ideas by adding big foreground elements that occlude the background. I’m not gonna worry about lighting yet, that can come a little later when the scales and positions of things are a little more worked out. We’ll start by just blocking out where things might go and how big they might be.

Like, in the original, there are these microscopic hikers goin up the flat hill, and i want to bring that idea of people out in nature more into focus. And while I was looking for environmental stuff online, I found this image, and thought I could silhouette this girl against the brighter aurora. She doesn’t have hiking gear or anything, but she definitely looks to be outside adventuring, so that works.

I’m also gonna try using the mountain part of this image, which might be more interesting as a foreground element. And y’know, these things are never really like tailor-made for your project, so you usually have to fudge with them a little. I’m gonna darken it up quite a bit, so it doesn’t have to be perfect but I’m just quickly cloning some extra bits that were cropped out. And the other side of that same mountain works pretty well over here.

Now, notice a few things about why I chose this source image: first, there’s a sense of perspective in it. Big things in the front, getting smaller toward the back. Second, there are a bunch of parts of it that overlap other parts and occlude them, so you can see that they’re more in the foreground, and others are more in the background. And third, the image is pretty bright overall, but there are still lighting cues in it. You can tell that it’s lit from this side, the sun is over here. Each of those three things helps a ton. And we’ll use this image in ways that accentuate all of those things even more. Already, this mountain is occluding the background, and this mountain is occluding that one. Not much, and it would be better if it were even more significantly in front, but we’ll see how it plays out.

Having done that, the placement of these hills with this V shape made me think of putting a definite geometric shape in here, to kind of echo it. We’ll see if that goes anywhere, but I’m blocking it in there for now. Drop some more stuff into the foreground and I think this is more or less how things will sit.

And now that it’s set, we can start really thinking about the lighting. On the most basic level, I want the lighting to help the viewer’s eyes see what’s in front of what. That means a lot of things, like using delineation to establish clear silhouettes, and to do that, we need various forms of contrast… shout out visual design lab people you know what i’m talkin about. In this case, let’s use value. Right now, the foreground elements are really visible against the background because they’re bright and it’s dark. There’s a value contrast helping us see which is in front, and we want to keep it that way. But at the same time, I want that background aurora to be a bright pop of color, so let’s darken the foreground stuff to create dark silhouettes that are more backlit. Kind of swap what’s bright and what’s dark, and we’ll bring brighter values back in where we need them.

But now, we have dark on dark. No bueno. Can’t see the shapes of the mountains very well. But when we bring back the bright values of that aurora, we can start seeing some of the mountain edges. Now, if we pop some brighter sky behind them, the edges up here start becoming a little bit more apparent. We’re building that silhouette by delineating its edges through value contrast. Now let’s find some interesting ways to brighten it up even more behind those mountains, so the edges are even more apparent and those silhouettes start popping out. That works, and it’s just value contrast, right? But I’m also adding bright values in a way that will let me motivate some lighting. These bright streaks, again, help certain parts of the dark mountains pop out in front, because they really occlude it, but it also looks like lighting sources, and we can pretend that they illuminate some things. So in a minute, I’ll get a little trickier and start adding in some bounced light from those sources. Should look pretty cool.

But first, I actually want to simplify this background. I’m gonna construct something new that’s less busy but still bright enough to stand in contrast to the dark girl and the dark mountains. And then I’ve got this simpler, less busy image of an aurora. Not quite as much sky magic goin on, and i’m not entirely sold on it, but it works for now. Her silhouette is a lot easier to see, and she’s definitely in front of the background, not sort of mixed up in it.

So now we can get a little trickier. We’ve got a group of elements that are in the background: the triangle, the landscape in it, the bright streak lighting, the faint night sky behind that. And then we’ve got our darker foreground stuff: the girl, the mountains, these near foreground hills. And you can’t really distinguish the hills from the mountains, but we want them to at least help with the depth, so now I’m gonna start separating out individual parts of these foreground objects. Instead of this just being one dark mass, I’m gonna get in there and see if I can start adding slightly brighter and darker values to delineate some edges and get some parts of it to look like they’re occluding other parts. This is really the detail work, and it actually makes a huge difference.

I’m gonna let this one catch a lot more light on its right side, and I’ve got a simple technique that works pretty well for that. Here’s the mountain layer. I’ve used adjustment layers to desaturate it and crush the levels so it’s pretty dark, obviously. I take a copy of all of that, put it on top, and set the levels to something brighter. It takes some fiddling, and the setting depends on what you’re going for, but this by itself looks pretty great. But I actually want to take it another step and be more selective about where the light is hitting. So what I do is make a mask on that brighter top layer, invert it, so the whole thing is completely transparent, and then start painting it back in where I want it brighter. So I’m basically just making a dark version of the element and painting a brighter version of it over the top, and it makes it way easier to decide which areas are hit with light. You just paint in the top layer. And where you want shadow, you just paint the top layer out. You want to turn the light down? Bam, EASY. You want to shape the light so it looks like it’s just coming from these brighter areas? Just paint more of the bright layer in. Bam, EASY. And if you play with the levels on that top layer, you can make it crisp or flat or blown out or whatever, and it’s all still totally adjustable.

And while i’m painting, I’m paying attention to where I can cast light to highlight certain edges so you can start to see what’s in front and what’s behind. I want to do that with this near foreground pile of rocks, but I actually think it might work better to replace it with some snow. That’s just more wintery, and I found this image which has those clean diagonal shapes that work so much better with all of the diagonals already goin on elsewhere.

I’ll use the exact same technique here to crush the levels down to something shadowy, and then paint back in some of the brighter original. It’s not gonna catch a ton of light here, but I want it bright enough that you can see the edge of it up against the darker thing behind it. It’s just light on dark, dark on light, to help delineate certain edges to help you see which shape is in front. I’ll pop those rocks back in front, just to add yet another layer of depth. It’s subtle, but i’m just building these things up bit by bit. This rolling fog is just another tiny bit of slightly brighter detail to pop out some darker edges. You can go overboard with this stuff, but you can also probably do it more than you’d assume. I mean, there’s definitely a better sense of what’s in front of what than there was before. And we can still dial it up or down if we need to, it’s not that hard to adjust if you take it too far.

That comes in really handy when you want to change things. Like, I thought maybe I’d try out some other images for the background, and that can totally affect the lighting. Maybe an iceberg. That’s kind of cool with the water at the bottom, makes it look like this is behind glass. Or this frozen ocean kind of works. This one’s probably just too busy, it’s starting to become more difficult to make out the shapes of the girl. This one’s alright, but not my favorite. That’s pretty cool, not too busy, and we could brighten up the bottom part to delineate the edges of her dark legs a little better.

But here’s where it starts getting fussy, and where paying attention to the details really helps: in this particular image, the lighting is fairly ambient, but you can tell it’s actually coming from the left. Bright here, shadows here. Now, the light from the sky we’ve added is more from the right, and that’s the way the rest of the scene’s lighting has been built out, light mostly mostly coming from here, shadows mostly on the left, and then a few bits spilling over here. So either flipping this horizontally, or choosing a different image like this makes better sense with all of the other lighting going on. Light from the right, shadows on the left. Because again, if you’re pulling in imagery from disparate sources, not only do you want the right content, or attitude, or whatever you’re looking for, but you also want the lighting to match as well as possible. You can fudge it a little, but the more it matches, the better off you are.

Dan also has these blurred out planets or something in the back of his, so i’m grabbing some images to add in, and doing it with the same concern in mind. They need significant lighting on them, and I need to pay attention to how that plays out in the frame, namely, light on the right, shadows on the left. And now I’ll let on that I’m kind of designing this as a companion piece to last episode’s workup of his other piece for the same challenge, if that wasn’t already apparent. 😀 Nighttime, the moon, a hero girl, little fire and ice series. C’mon! Bootiful!

We’ll maybe brighten this mountain back up a bit, bring back Dan’s sexy dragon party. And let’s just go with the first image we had here. I like that there’s an indication of a city down here, it feels like we’re way high in altitude. I also like those little bright orange details in the background. And maybe we’ll give it a little ripple, like this is some kind of portal she’s stepping through. That’s just a small story moment that adds some intention to what’s going on here, and I’ll try to keep it pretty subtle. I want her to be the real focus, and as in most design, there’s a lot of balancing how much attention certain things get. She’s almost entirely in silhouette, so it’s pretty easy for other elements, with all of their potentially distracting details, to seem more important. I’d like to make these moons significantly bigger, but they start becoming really important, so it’s better to compensate in some other way. In this case, I’m just dimming them way down. They don’t need to be screaming for attention.

And then these touches are sort of just little extras. A little more life to the color up here. An extra spot of brightness and some detail down here. Y’know, in the refinement stage you’ve got it mostly worked out, so you try these things out and sometimes they help, sometimes they’re too much, and you just have to be asking which it is with every little thing.

So overall, to get more depth and visual interest, first I chose images that have some depth in them. I chose this over this. This instead of this. I chose things that seem to be reaching toward us or extending into the background, and that also have some useable lighting already in them. At every little turn, you want each of these parts to be doing their job to push that sense of depth, so choosing imagery that indicates that is important.

And second, I used scale to imply some perspective. Small things like the girl and some rocks, and some snow up front. Behind that, a vast landscape. Behind that, even more massive moons or planets. Objects that we know to be of dramatically increasing sizes, scaled down as they move farther into the distance. I mean, if these planets moved into the foreground, they would absolutely dwarf everything else, obviously. So we read it as decreasing scale toward the background. Perspective!

Third, in a lot of cases I tried to significantly overlap elements, so that one clearly occludes the other, making sure the overlapping edge of the one in front is visible so your eye reads it as being in front. And in this case I’m doing that mostly with value. It’s not something that’s going to work everywhere, but the more places it does work, the more solid the overall indication of depth will be. What’s in the foreground, and what’s in the background. I actually did this quick alternate, just to show that effect. Just bringing the triangle and the beam of light in front up here, and leaving it behind down here gives your eye a much better sense of how this part of the mountain is in front of that.

And then finally, I tried to make all of the elements agree on where the lights and shadows are, as well as I can. Again, that mostly comes down to choosing or making imagery that has similar lighting, but also to working with them once they’re in there, to make sure they all agree. The lighting on this mountain is more from the right, and there’s plenty of ambient light illuminating the whole thing, but it’s much more shadows on the left. So using it here totally works if the light source is somewhere over here. But using the shadowed side of the mountain over here isn’t gonna make as much sense. In reality it’s gonna catch light from that same source, coming from this direction, so those baked-in shadows are mostly gonna feel wrong. So I had to do a lot of work to cover that up, and pretend that it’s only receiving minimal light. The idea I went with is that maybe it doesn’t get the full blast of light because it’s too far forward, so the light source is way in the background. And that works because I’m looking for ways to indicate depth, but in this case it did take a lot of thinking about how to paint that light in selectively. Sometimes you’re gonna find an image that’s great, it’s just not perfect in every way, and you’ll figure out whether you can get it there or not. It might take some fussing to make a photo work in that sense, but for things like this, it’s often worth it to use an actual photo because the time it takes to create a photoreal render of the thing you want is just prohibitive, so you spend your time searching for what’s already out there and then working with it.

I found most of these on Unsplash, which is where Dan grabbed a lot of his stuff, so you can see how important it is to choose good images. Typically it’s easier to spend a little while grabbing a bunch of stuff that might work, and then try them out as you go. These mountains ended up working much better than the rocks and the field I had at the start. It can evolve over time, but make sure you have good materials to work with so you can test things out and let it evolve. If you’re going for depth, that means searching through images until you find some that evoke the right things and that also have some of their own indications of depth, whether that’s perspective, or parts that occlude each other, or useable lighting already baked in. Hopefully all three! No more of this mushy shit! 😀

So thank you again to Dan. These were fun. Hopefully you can take these basic strategies and test them out on your own work. Get to it! See you soon.