Good design is often about smooth transitions, and blend modes can help you achieve that with ease. In fact, using blend modes can make your designs more dynamic and visually interesting. By experimenting with different blend modes, you can create new color combinations and textures to add depth to your work.
Today, we’ll walk you through how to use blend modes in Sketch and share some insight on how to implement them in your designs.
How to use blending modes in Sketch
You can apply blending modes to fills, borders, shadows, and inner shadows, which you can adjust independently. For example, you could apply a Soft Light blend to a fill and a Multiply blend to a shadow. All you have to do is click on the blend icon in the Inspector and select your preferred blending mode.
Each of these blending options will affect the base color of your fill, border or shadow depending on which you choose. But there’s no need to go in blind! You can easily preview how the blending modes will look by simply hovering over each item on the blending menu.
You can preview how each blend will look by hovering over the menu items.
Understanding blend modes
We categorize blending modes into five sections based on their main outcome: Darker, Lighter, Contrast, Color, and Comparative.
Darker
Blend modes under Darker will help you amplify dark colors in your designs. Here’s a quick run-through of the options available to you:
- Darken: keeps the darkest colors between the blend and base layers.
- Multiply: keeps only the darker colors of the blend layer and makes light colors less opaque. The resulting color is always darker, except for where it’s pure white.
- Color Burn: uses the colors from the blend layer to darken the base layer and increases the contrast between the two. Blending with white produces no change.
- Plus Darker: works like Darken but with a stronger impact on mid-tones.
Darker blend modes are great for working with shadows or dark base layers. You can use them to create a more realistic and dynamic shadow effect or to add depth and texture to an image.
Lighter
Blend modes under Lighter will help you amplify light colors in your designs. Let’s take a look at the blend modes in this section.
- Lighten: keeps the lightest colors between the blend and base layers. It’ll only lighten if the top layer is lighter than the brightness or luminance of the bottom layer.
- Screen: keeps only the white and lighter colors of the blend layer and makes black or dark colors less opaque. In other words, it multiplies the inverse of the base and blend colors, giving a lighter result except for where it’s pure black.
- Color Dodge: uses the colors from the blend layer to lighten the base layer, reducing the contrast between the two. Blending with black won’t produce any change.
- Plus Lighter: works like Lighten but with a stronger impact on mid-tones.
Lighter blend modes are great for creating a shining effect or increasing the brightness of an image.
Contrast
Blend modes under Contrast are all about having the base and blend layers play off of each other. Here are the blend modes you can find in this section:
- Overlay: works like Multiply if the base layer is darker or like Screen if it’s lighter.
- Hard Light: combines Multiply and Screen using the brightness values of the top layer to make its calculations, whereas Overlay uses the base layer.
- Soft Light: Similar to Overlay, it applies either a darkening or lightening effect based on the luminance values, but more subtle, without the harsh contrast.
Contrast blend modes are great for adding depth and dynamism to your images. For example, you can combine them with a Gaussian blur and use them to add a soft glow to a portrait photograph. And, of course, they’re also great for adding contrast to an image without needing to go through the Color Adjust settings.
Comparative
Blend modes under Comparative basically invert white or light colors. Here’s a quick run-through of the blend modes in this section:
- Difference: subtracts the blend color from the base or vice versa, depending on which is brighter. When two pixels are the same, the result will be black.
- Exclusion: behaves much the same way as Difference, but with less contrast between the layers because it doesn’t invert mid-tones.
Comparative blend modes are useful for creating subtle layered effects or inverting colors. You can also use them to test the difference between colors — if you’re into the scientific side of design.
Color
Blend modes under Color play with hues, saturation and brightness to help bring your designs to life. Here’s an overview of the blend modes in this section:
- Hue: uses the blend layer’s hue while preserving the saturation and brightness of the base layer.
- Saturation: uses the blend layer’s levels of saturation but keeps the hue and brightness of the base layer.
- Color: uses the blend layer’s hue and saturation while preserving the brightness of the base layers.
- Luminosity: uses the base layer’s brightness while preserving the hue and saturation of the base layer, creating the inverse effect of Color.
Color blend modes are great for photo editing. For example, you can use it to add warmth to a cool-toned photo or to create a retro look by desaturating the colors.
Best practices for using blend modes
Okay, so we’ve covered all the technical stuff. But how can we actually use these blend modes in our designs? Here are a few examples showing you how to put each blend mode type to good use — but feel free to play around with the other options!
Multiply seamlessly incorporates the tattoo into the back’s shadow.
Plus Lighter makes it look like the lamp is on, which we’ve made more elegant by adding in a Gaussian Blur.
Overlay makes it easy to change the overall texture of any image.
You can use Hue as if it were a Tint. It can change any color while also preserving its underlying texture.
Flip the switch on your images with Comparative, turning light to dark and dark to light.
And there you have it! We hope this gives you a better idea of how to work with blending modes and unleash your creativity. Made something awesome using blending modes? Share it with us on social media using #MadeWithSketch.
