Photoshop for Game VFX #3: Styles & Adjustments

bhadra 0 Comments May 25, 2019 Photoshop

– Oh, hey guys. Let’s learn some more about layers in Photoshop. So, we’ve already done two videos. I hope you’ve watched those. There’s a video that I did on the tools in Photoshop, and then a video on introduction to layers and selections in Photoshop, and now, we’re gonna talk a little more about sort of the advanced components about layers, like the layer styles, we’re going to talk about adjustment layers, we’re going to talk about smart objects, this is super exciting. So, David Shovlin, who did this painting, he used these techniques in the paintings that he did for the class, that there’s a link in the description if you want to sign up for the class, and by the way, if you want to get all these .PSD’s, that’s shown in this four part video series, you can get those in the class, so if it’s not out yet, there’s a wait list, there’s an email list you can subscribe to, and if it’s out, then I’ll update that link to the live class.

Okay, so anyway, this painting is so awesome. I actually had Shovlin do it in two parts. I’m gonna move my Cintiq a little closer here. So he did it in two beats, beat one and beat two, where the lightning is striking, and then where it’s dissipating, and he used this really interesting technique called the smart object. Now this layer here is a smart object already. Normally if you wanted to create smart objects, you would just highlight more than one layer, like by holding shift and control, and then you would right click, and say convert to smart object right there. So that’s how they’re created, but let me show you what they are. So basically a smart object is a container of multiple layers inside of one layer, and that’s really powerful because it’s very similar to the functionality, if you’re familiar with After Effects, they use comps in After Effects, or in Flash they use symbols, and it’s basically just a way to organize your work, but also to apply changes on top of that group of layers all at once.

I’ll show you what I mean. So if I double click on the icon, they come down into this .PSB right here, and it’s got all these layers going on, and I can look at these just like any collection of layers in Photoshop, and make all my edits in here to color, size, whatever, and then if I save that .PSB, that will be updated out here on my stage, which is pretty cool, and then out here on the stage, I can apply effects, like I did here, and we’ll get into what those effects are exactly, but when I apply it once, it changes all of the layers together inside of that smart object.

Really cool thing about smart objects, if I select this, remember we have show transform controls, and I scale this down, and I hit enter, and then I go and do other stuff and then later on I’m like, “You know what, I want that to be big.” I scale it back up all the way, it keeps the same fidelity, whereas if that were just a flattened layer like in Photoshop, that fidelity would be lost. I’ll show you what I mean. So I can create a new layer down here, and then I can move that underneath, and then select this and hit Ctrl+E, that merges the two layers together, right.

If I did it this way, I do Ctrl+E, it doesn’t work. The blank layer won’t merge down, so I have to put it down here and then do Ctrl+E to merge it. Anyway, then if I scale that down, hit enter, scale it back up, hit enter, you see that it’s lost its fidelity because I crunched it down, that was a new pixel density and none of that information was preserved when I scale it back up, let alone all the different filters and glows and layer separation that Shovlin included in this guy. So I’ll just hit undo a few times. Get back to where I want to be. Cool, so that’s smart objects. They’re smart, you should totally use them. If you want to get layers inside of you smart object back out to your stage, this is a common thing, you have to kind of do a little funky work-around. This is the only way I found to do it.

If you guys know other ways, that’s fine. Leave a comment. So, if you grab this tab up here, you can tear it off. What that will do is it will tear off the entire document. So all of my layers are still here, and if I click on this document over here, see the layers changed to smart objects, so for clarity I’ll tear that one off as well, so they’re both torn off here. So now if I focus this one, I see the layers for the main Photoshop document. If I click on this one, I see the .PSB layers, so I can come over here, and let’s see, first I’ll go to the Photoshop document, make sure, yeah that’s as good as any. I’ll just create a blank layer up here for good measure just so I can track where I’m gonna be dumping these layers from the inside. So I can come over here and basically just click here, hold shift, click down here, and then drag these up to the Photoshop document stage.

Bam, and there I’ve got them. Oh, I had auto-select turned on. Gosh dangit, it’s all messed up now. Remember what we learned about auto-select, and how terrible that is sometimes? So now I deselected all this and it’s a total mess. Well that’s not, ’cause it’s in the folder. It’s all neatly organized, look at that. So I know that these are right, and I can put that out here on my stage, and now I’ve got all of this stuff, like guts of this smart object are now back out on my stage.

So that’s a way to move that around. So now you know how to create smart objects. Again, I could just come in here and say, highlight all these, and hide it first. Highlight these, convert to smart object, and now I have beat two smart objects, which is weird. Okay, enough about smart objects. They’re useful, try them out. Super good stuff. I’m gonna delete that, yeah, cool. We’re back to where we were. Next up, I wanna talk to you guys about blend modes.

This is super important to know, blend modes in Photoshop. Also, interesting fact, blend modes mimic a lot of behavior that you see in game engines, so like whether it’s translucent, or additive, or subtractive, or some other weird thing that the material in a game engine might be doing, these are sort of a kin to blend modes in Photoshop. Blend modes can be found in a few different places. This is gonna bug me if I leave this. No, don’t save changes, just in case. Don’t maximize, you gotta drag this up until it turn blue again to dock it back to your main frame. Anyway, blend modes, for each layer are shown up here. This right here where it says normal, that’s the blend mode window, and I’m gonna go to the other painting to illustrate this, ’cause Shovlin makes good use of blend modes for this frame.

Get rid of that, transform controls. Okay. So for one, this bright thing, if I highlight it, you can see what it is, is using linear dodge, or that’s basically additive blend mode. If I change that to normal, it doesn’t actually change. So I should probably use a better example of that. Hang on one second, please stand by. No, that’s normal. Wait, warm orange core. Yeah, that’ll be good. Okay, so this orange painted over the top of that reddish core right there, and if I change that to normal, gosh dangit, it looks the same. Well I know somewhere that it’s going to work. (humming) Let’s do this guy on the bottom here. So this orange glow, this nice orange glow here, if I change that. It doesn’t really change, but you can see here, it’s gonna change if I don’t have stuff below it.

So there it goes more saturated where it’s just blending in a normal way, and then here, it goes additive, where it’s lighting up what’s beneath it. So I like to compare this to the lens. So if I have a orange lens, right? I can put that lens on the ground, and it will tint the ground orange when I’m looking at the ground, or I can take that orange lens and put it up on a spotlight that then shines down onto the ground and eliminates that orange, and that’s additive. So additive light, vs just simple subtractive light I guess is what it technically is, but in an engine, you just call that normal, or just translucent, or alpha blend, which is blending the alpha together.

It tends to be more opaque, but then additive tends to be less saturated, so it’s really what you want to go for. Alright, explained that. There’s also some other really fun ones on here. You can play around with these, like fun fact, you can just click here, and then hit the down arrow, and it’ll just scroll through the different blend modes, and you’ll see, in the tutorials that Shovlin does, he does this a lot where he’s playing around with different blend modes to get it to feel just the way he wants. A lot of us just shoot from the hip on this stuff, so. Kinda just make it your own. Keep in mind that blend modes can go away very easy, like say I do multiply, and then I want that to then merge with all these other layers and stuff like that. It will reset it, because the way that they’re overlapping, and then when you try to merge multiple layers together to flatten them together, it will often times ruin whatever interaction they were having of blend modes.

So just be cautious of that as you’re tinkering around with it, and then you want to flatten it, or apply a global overlay to it, or filter, it might have weird interactions. You’re gonna see more of that throughout this video, too, by the way. This is not an exact science. Okay, so next up is layer effects, or layer styles. So to get to those, you’re either gonna double click, there’s three places you can double click to get to these. You can double click here on the thumbnail. If it’s a smart object, that won’t work, ’cause it will go into the smart object. So you can also double click on the blank next to the text. Remember, double clicking on the text highlights it and changes it. You can also double click on the word “effects” beneath it, and it brings up your layer style menu. Guys, this is where it’s at. There’s all kinds of cool stuff in here. Right now, it’s just doing an outer glow.

You can see a preview of what that’s gonna be. Let me pull up a layer that is better suited for this demonstration. Yeah, the red splash, beautiful, perfect. So here’s what it looks like without effects. I can just hide that here, and you can see it’s just red, right? So he’s got a few things going on. Double click on that to get in there.

He’s got stroke, inner glow, and outer glow turned on. A lot of these others, you can tinker with them, but I don’t use them very often. I do use color overlay and gradient overlay, but then things like satin, inner shadow, bevel emboss, you remember bevel emboss, from the 90’s? With the business cards? It’s pretty cool stuff. You can make your art look three dimensional guys.

That’s the pro tip for the day. Okay, nevermind, never use bevel emboss. Okay, so stroke just adds this stroke around the outer edge. See that nice outline? And then he goes in, in addition to this, and he does touch ups. Touch ups, where does he do those? Red touch ups, no, that’s a different one. Maybe he doesn’t do it on this layer. I know he does it on others, because here, it’s kind of rounded at points, and sometimes you want to paint a little bit of a stroke coming in. Guys, you just gotta do that by hand sometimes. The filter will only get you so far. It’s gonna kind of blend out some of these edges. Okay, anyway, I digress. Back inside of the layer style window. Stroke, you can choose your stroke color. You can choose the size of it, et cetera. It’s pretty straight forward. Some fun things here on inner glow. So let’s turn of stroke just so that we can see what these two things, ’cause they’re similar to each other, but different in key ways. On inner glow, he’s got it set to black, and it’s radiating from the center.

You can see it’s center selected here. Now, if it were edge, it would be black on the edge, bleeding in towards the middle, but he inverted that, so that’s it’s black in the middle bleeding out, and then he lowered the opacity, so that it’s not full black, it’s not dark, dark black. You’ve got things like size, which is how far it goes. You’ve got the choke, which is how opaque it is. It’s like how rapidly does it fall off, so like if it’s… It’s gonna be just a crisper edge, or just a sharper fall off of a glow if that choke is cranked up, and then you’ve got softer, or precise. Sometimes I use precise when I want to do an erosion map, because it’s more precise, but it doesn’t look as natural, but it works for more techy type erosion map stuff.

Okay, so, after I ruin that. Put that back to 21. Then we’ve got the outer glow. So outer glow is outside of the shape, right? So we can change that to whatever color we want. You know I want a nice blue glow to show what’s going on. Same thing, I can crank up the size, I can crank up the spread, that’s actually pretty cool. It’s like, vibrating on the screen there with those intense colors.

Okay, fun fact about outer glow. Often times, you’ll want to do something custom, you know, maybe it starts kind of orange, and it bleeds out to something red. I can double click here on these little guys to change that, and then you have this nice fall off, if it weren’t such a terrible spread. Then you can see that it fades to a nice off-color, and this is tricky to do to game engine, depending on the engine. In some of it, you might have to do custom.

It’s like a post effect on the bloom. Other times, man, we just do our glows hand-painted so that we can get nice color variation in the glow. It just gives it that extra sauce that feels really nice. I don’t know, sauce? Jazziness? Whatever, alright, cancel that, ’cause I completely ruined it with the effects. Oh, I forgot to mention. In the effects, the key thing at the top you’ll notice, there’s also a blend mode. So even your glow color, how it’s blending with the rest of your shape can be changed here. Just the glow, not the whole layer, but just the different individual parts. You can set a blend mode for each of those. So that’s fun. Alright, what else do I want to cover? Layer styles, we’ve covered glow. Let’s talk about adjustment layers. Guys, adjustment layers, pretty freaking sweet.

Okay, so an adjustment layer is gonna be down here. Create new layers here. These are your fills. You got three different kinds of fills. I don’t really use those, I guess they might be useful sometimes, to just put in a massive gradient, pattern, or color, but these right here, and I guess all of these, really, are great. They do all kinds of fun stuff. I’m only gonna cover a couple of them. I’m gonna start with hue and saturation, because that’s one of the easier ones to understand. So here on hue saturation, if I change the hue, you’ll notice that it shifts the hue range on everything.

It doesn’t just blanket convert everything to a hue, it actually transitions all the hues along the spectrum, so it’s all going to be relative. Now, let’s say I got this purplish pink, and I’m like, “Yeah, I love that, but I don’t want anything else to be purplish pink, I just want the explosion to be purplish pink.” I can come down here, and I can hold alt, and when I mouse over between the two layers, the one that I want to change, and the one next to it, this icon appears, and it links them together.

Now, it has linked them, but the effects are still unaffected by what was linked, and that’s a downside of this. So if you’re gonna be linking adjustment layers, try not to link them to something that has effects on it. Maybe flatten it first. So like I was saying earlier, hopefully your blend mode, well I guess the blend mode is a whole other issue, but maybe these different individual things have their own blend modes and things and that might break, but I’m sorry, I guess. I don’t know, but once it’s flat, I can link it, and now these two guys are normal, and just this is using the hue saturation, and other things beneath it are also unaffected by that hue saturation shift, whereas if it’s unlinked, then freaking everything is gonna get that adjustment layer’s effect. Okay, so I want all my stuff back. Do not want that to be flattened, and then hide that, so that’s hue saturation. Now fun fact about hue saturation, it has this, I guess every hue adjustment layer has this. It has a mask attached to it. Now this mask is white, so that means everything on the entire canvas is going to be affected by whatever is happening here in these properties in this adjustment layer, and these two are linked, which means that if I move…

I know this one. If I move this around, it will also move this around, but that doesn’t make any sense, ’cause typically, linking only matters when you make a mask like so, and then when you move the image around, it will move the mask with it, but this is just properties. I don’t know why linking matters here. Guys, I don’t know, it’s the mystery of the universe. You can select these individually and delete them, by the way, so I’m just gonna select that mask I created, and delete that. Masks are fun ’cause you can come over here to your channels and you can unhide the mask, and then hide all our GMB properties of this guy, and then you can hit control I, that will invert the mask, so white turns to black, if you control I on the keyboard, and then, I don’t know, you can say, “I want stripes.” Even better, “I want checkers to show up.” This is going to look terrible, guys.

So excited. So now, only the areas that I painted white work like that. You can come in, you can do… We learned a little bit about filters, right? So you can come in here, you can say filter, blur, gaussian blur, like so maybe, you know you want this just kind of blotchy application of it, and now it’s kind of blotchy in here, and you can have fun with it. You can paint whatever the heck you want into your mask, and if a mask is on a normal layer, it’s basically just what of that layer shows up at all, so that can work kind of fun too.

Alright, that’s enough of that hue saturation layer. Let’s get rid of that, oh I deleted the mask, and now I delete the layer itself, okay, so let’s create a gradient map layer. Now gradient map is like hue saturation in some ways, but also totally different and completely not the same. So, it is similar in that you can link them, like in the adjustment layer, right, and then you know, do your thing here. Those effects are really messing it up. So anyway, the link, but I don’t want to do it on this layer, actually, ’cause this is just a solid color. Let’s find a layer that has some color depth to it, or value depth rather is really what I’m after. (humming) You know what, I know what we’re gonna do. We’re gonna go back over to the other painting, ’cause it has a smart object, and also this is using a gradient overlay which is, well, I’ll just show you what a gradient overlay it, how about that? So if I double click on this effects here, that’s happening on this smart object, you’ll see that the only thing he’s using is a gradient overlay, which basically overlays a gradient on top of the colors.

You’ve got the controls here where you can drag this around. If you move it away, it disappears, pops away. You can change the alpha of each position up here, etc. You’ll notice that he’s blending it using color, so that’s his blend mode. He’s not using normal. Normal would actually look quite different, where it’s just kind of slapping a color on top of there, and not really respecting the value shifts, whereas color keeps those values in tact, where the darks stay dark and the whites stay white. So that’s a lot of fun.

You can do a radial gradient, or a linear gradient. There’s linear, so now it’s just top to bottom, or you can do that, radial, deal, cool. So that’s radial gradient effect, but we’re not gonna use that. We’re gonna turn that off so it’s just here, and we’re gonna use instead, a gradient. I use this all the time guys. Oh, well shoot. Okay, for our purposes of our demonstration, I wanna get this red involved. So what I’m gonna do, is I’m gonna do the red bold touch up. I’m gonna merge that down, but I can’t merge down ’cause that had effects on it. Remember? There we go, if I highlight both of them, I can. Fun fact. Magenta glow touch ups, sure. Let’s merge that as well. So, okay. Now we’ve got this gradient map. We’re gonna link it to just this guy here, and we’re gonna play around with what this can do. So if we come over here to my properties, I have a gradient. Right now green is mapped to black, so I can come change black to black.

So now, it’s just overlaying, and it’s really just washing everything out in a bad way, so probably I should do something not so strong as black. Whoa, that’s cool. So you can have a lot of fun with this. You can come over here, maybe I want my whites to be pink. Right, I don’t know, pink’s a lot of fun, and then maybe I want hot whites to be more of a cayenne, but like desaturated maybe. All right, yeah that’s looking pretty sick. I can crank that up so they show up a little sooner, and I mean really guys, you can just have a ball with this.

You can have a lot of fun with your gradient maps. You can toss a spot of blue in there, somewhere along the way just randomly. Maybe make it more saturated. That’ll ruin the whole thing, that’s exciting. When you do a band of black, it can feel like inverted dark magic. That’s kind of crazy. So. Gradient map. It’s a great way to just quickly recolor everything that you do. Now, there’s much more sophisticated ways to do this. Right now, I’m just doing this like blanket on top of all the layers. If I wanted to be more deliberate, I could go in layer by layer and just say, “This layer have a gradient map, this one have a hue transition, and this one over here, put some extra glow on it, or make it additive.” And that’s why you end up seeing so many layers inside of this painting is because it really makes a big difference to fidelity, and readability, and control, artistic control when you use these judicially, rather then just put something on it, and it looks like someone put a post-process effect on it, because that’s exactly what these are.

So… That’s adjustment layers. They do all sorts of neat things. Clicking around in these is not super intuitive. Hopefully you’ve learned something. I can unlink it with alt as well, and yeah guys. I mean, some really cool stuff you can do here. I’m really excited to see what you’re able to crank out. So stay tuned for the fourth and final video. We gotta wrap this up, and by the end of all this, you should be ready to follow along with what Shovlin’s doing in his videos and I hope you guys learned something, and let me know what more you want to learn.

Have a good one. .

As found on Youtube

Posted in PhotoshopTagged 2D Computer Graphics, 3d fx, 3d VFX, Adobe, Adobe Flash (Software), Animated, animation, Animation (TV Genre), Cartoon, Drawing (Interest), effects, Emitter, Flash, Flip Book, Flipbook, FX, game development, Game Effects, how to, jkFX, Particle, photoshop (software), real time VFX, Sprite, Sprite Sheet, Tutorial (Media Genre), Tutorials, unreal engine (software), vfx, Video Game (Industry), Video Game Development (Industry), Visual Effects (Film Company Role Or Service)