Design for Developers

Images Demo: Image Overlay Effects

Sarah Drasner

Sarah Drasner

Design for Developers

Check out a free preview of the full Design for Developers course

The "Images Demo: Image Overlay Effects" Lesson is part of the full, Design for Developers course featured in this preview video. Here's what you'd learn in this lesson:

Sarah explores more color and blending options in Photoshop.


Transcript from the "Images Demo: Image Overlay Effects" Lesson

>> Sarah Drasner: Here and the thing that I really wanted to show you was, let's bring this image back, and I know that it's kind of weird right now. I'm gonna ditch the mask, delete, and do it again. It's gonna be sloppy, just live with it, that's fine. Okay, so I can take this and I'm gonna go into the mask and kinda rough and tumble fix it up.

I wouldn't do that in real life. [LAUGH] All right, cool. So, let's say I wanted to affect this image, and change this image, and do some cool imagy things in Photoshop. One thing that I could do is I could take one of these color things that I kinda showed you earlier.

And I could adjust the levels, so I can take, levels is a really good way of affecting images because you can see the beginning and end of what we call a histogram. So you can see the range of colors and usually it kinda starts low, there are some sort of peak and then there's some peak on the other side.

This is not a good image to use because it usually goes kind of like rounded and you bring those in. But let's maybe use the other image that they had, maybe it's better, right? Let's try this again. We're going to bring this down. The other thing I want to do is I don't want to affect the rest of what's going on here.

I only want to affect this layer, so I'll do,
>> Sarah Drasner: Create Clipping Mask, and then it will just affect the layer beneath it and not all of the other layers. So, okay, we'll go into levels and there's that histogram. So you can see I can pull this up.

That's a much better histogram, so I can kinda slide these bars. And you see how it's affecting the entire range of the colors. So, we probably do actually wanted to be like a dark image so that we can see that text. But if you needed to change it so that it had a completely different exposure without really messing with what the image quality is too much, then that's kind of a good way of doing that.

Another one we could use, I just toss that one for now. Another good one we can use, we looked at black and white earlier, that one was pretty cool because we can slide these around and it really affects the way that those black and whites. So instead of it just turning, some of the other black and white filters that you use might just turn it black and white.

This one has more finite control over all of those properties. Let's toss that one. Invert always an interesting one. If you ever get really bored while you're designing and you're like, lets just see what it looks like backwards. Sometimes cool things can happen, sometimes you're like, its way better now.

You're burnt out on the design and you don't think it's going anywhere and you invert the whole thing. And you're like, actually I like it now. This is much better. So if I pulled this invert up, because I didn't do a clipping mask, it would actually invert the whole design.

But I could also drag it back down and it's just affecting what's beneath it right now. Here's another one. Let's do brightness, contrast is kind of what you'd assume. Posterize is kind of interesting, it kind of breaks up the color in this really stylized manner. You've probably seen people use posterize on the web for more magazine quality things.

So if you want to spruce up your design, you can try that, that way. Another good one is we can go to Hue Saturation, and then we have all of these sliders where we can saturate the color. You can also play with hue and get all sorts of crazy effects as well.

Another way to play with it that's not one of those overlays is like what we showed before where we're doing these kind of color overlays or gradient overlays. I'm going to use a color overlay, but there's this blend mode option where I can say, okay, I'm going to do color burn and it's probably more obvious with overlay.

You can do linear lights, pin lights, hard mix, difference. So you see how all of those create almost like a completely different image as you're working with it. So if you have an image that you think the composition of it is great but you're not in to the color.

Or you're not into the way that it works, you can play with it this way. You can add these effects, you can even add them as masks on top of the image and delete parts of it and bring parts of it back. So there's tons of ways that you can work with images that are really super flexible, awesome!

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now