Title: Exploring design tools
Published: 17 December 2021
Last modified: 10 July 2024

---

[Home](https://learn.wordpress.org)[Lessons](https://learn.wordpress.org/lessons/)
Exploring design tools

[Exit lesson](https://learn.wordpress.org/lessons/)

# Exploring design tools

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

[⌊Editor with cupcake cover image edited with red and white duotone⌉⌊Editor with
cupcake cover image edited with red and white duotone⌉[

Cover image with duotone filter applied
Photo by [Polina Tankilevitch](https://www.pexels.com/@polina-tankilevitch?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels)
from [Pexels](https://www.pexels.com/photo/photo-of-person-holding-cupcake-4110157/?utm_content=attributionCopyText&utm_medium=referral&utm_source=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](https://learn.wordpress.org/lesson/create-your-testing-environment/(opens%20in%20a%20new%20tab))
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.

Apply duotone filter

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

Adjusting media settings

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](https://www.pexels.com/@polina-tankilevitch?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels)
from [Pexels](https://www.pexels.com/photo/photo-of-person-holding-cupcake-4110157/?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels)

##  Suggestions

 Found a typo, grammar error or outdated screenshot? [Contact us](https://learn.wordpress.org/report-content-feedback/).