If you want to take your design even further, new design tools allow you to make elegant and beautiful images that match your style.
In this lesson, we’ll focus on the following features:
- Duotone
- Image customization
Photo by Polina Tankilevitch from Pexels
Get prepared
To get started using these image design tools, insert an image block on a new test post from the demo content noted in the Creating your testing environment lesson.
Delve into Duotone
Duotone gives your images an extra pop of color by using preset colors or your own custom colors to filter your existing images. It allows you to further your branding through colors and create even more elegant designs. You might choose to use Duotone to give a gallery of images a synergistic aesthetic or to match your site’s theme.
Click to read video transcript
Let’s add the new duotone filter to an image.
Click on an image from your editor. I’m going to scroll down and select this one of a cupcake. When you select the image, the block menu will appear.
Click on the apply duotone filter, which appears as a dotted circle within the menu. You’ll see a few duotone filters that come with your theme. You can easily just click and it will make the change for you.
You can also click on shadows or highlights and select one of the colors from your palette. This is going to automatically apply that color to the duotone filter.
DESIGN CHALLENGE
Apply Duotone to at least three images on your site. Use colors from your test site’s custom palette.
Experiment with other image design tools
Click to read video transcript
Let’s adjust the media settings for a new image.
Click on an image from your editor. I’m going to click on the cover image within my header. The block menu for that cover image will appear. I’m going to select options, which appears as three vertical dots. Now select show more settings.
Under media settings, there will be a focal point picker function that allows you to select which part of the image will be the focal point. I’m going to click and drag on the circle in the focal point picker to the desired focal point.
I could also use the left and top percentage boxes below. I can highlight the existing number and enter in the percentage for left and the percentage for top. Either option will allow you to choose a different focal point for that image.
DESIGN CHALLENGE
1. Customize your images even further by adjusting the media settings, such as the focal point picker for your Cover Photo if applicable.
2. Add a semi-transparent color overlay on top of your images.
Resources:
Cupcake Photo by Polina Tankilevitch from Pexels