Image Editor Vectorscope Improvement #116973

New Issue

Jonas Dichelle · 2024-01-10T08:49:28+01:00

Jonas Dichelle commented

2024-01-10 08:49:28 +01:00

Image Editor Vector Scope Improvement

Overview

The vectorscope in the image editor currently has several issues, mostly in terms of readability.
I've made some updates to the code in an attempt to improve the UI.

Old Scope Design	New Scope Design

Key Issues

Readability:
- Low contrast: White points on a light gray background make it hard to read.
- Transparency problems: The skin tone line's semi-transparency reveals the underlying image instead of the scope itself.
Color Representation:
- Color indication: There's no clear representation of what colors are shown in different scope areas.
- Color targets: The color targets are bulky and lack labels.
Aesthetic Concerns:
- The circles have a low point count, which doesn't look great.

The Proposal

The code changes I have made tackle the issues I've outlined above.

The Color Point Cloud
- I added an RGB mode to the scope, which colors the points, according to the color they represent, the old display mode is still accessible through the Luma option.
- The Vectorscope Opacity affects the opacity of the individual points allowing the user to find areas where certain colors are more concentrated.
The Scope
- Changed Background color to increase readability.
- Made the colors of the outermost circle represent the colors at that point.
- Removed the outside target to reduce visual bloat.
- Added labels to the targets for clarity.
- Removed color and transparency from the skin tone line.

Demonstration

Demonstration of the usability improvements of the update

PR: https://projects.blender.org/blender/blender/pulls/116974 # Image Editor Vector Scope Improvement ## Overview The vectorscope in the image editor currently has several issues, mostly in terms of readability. I've made some updates to the code in an attempt to improve the UI. | Old Scope Design | New Scope Design | |:----------------:|:----------------:| | ![The current vector scope](/attachments/c02637a3-7293-4355-899d-d95a13c7935f) | ![My proposed update](/attachments/d377258f-8ce6-4829-bbd9-21c3357a9a9d) | --- ## Key Issues - **Readability:** - Low contrast: White points on a light gray background make it hard to read. - Transparency problems: The skin tone line's semi-transparency reveals the underlying image instead of the scope itself. <video src="/attachments/d65cdfb0-3d7c-4fac-86f1-4d5e505fea29" title="blender_0VbqGXzK2K.mp4" controls></video> - **Color Representation:** - Color indication: There's no clear representation of what colors are shown in different scope areas. - Color targets: The color targets are bulky and lack labels. - **Aesthetic Concerns:** - The circles have a low point count, which doesn't look great. --- ## The Proposal The code changes I have made tackle the issues I've outlined above. - **The Color Point Cloud** - I added an `RGB` mode to the scope, which colors the points, according to the color they represent, the old display mode is still accessible through the `Luma` option. - The `Vectorscope Opacity` affects the opacity of the individual points allowing the user to find areas where certain colors are more concentrated. <video src="/attachments/62ebd31b-ea79-442e-8cd3-bfa58c5c72d6" title="blender_oal5AqaZyP.mp4" controls></video> - **The Scope** - Changed Background color to increase readability. - Made the colors of the outermost circle represent the colors at that point. - Removed the outside target to reduce visual bloat. - Added labels to the targets for clarity. - Removed color and transparency from the skin tone line. --- ## Demonstration <video src="/attachments/8fb87777-0d3d-4fc0-b441-47f9adc64464" title="blender_PJI7YesVfc.mp4" controls></video> _Demonstration of the usability improvements of the update_

blender_PJI7YesVfc.mp4

1.5 MiB

blender_oal5AqaZyP.mp4

153 KiB

blender_WyHyiDabIS.mp4

81 KiB

blender_0VbqGXzK2K.mp4

301 KiB

blender_iDafwRuw4a.png

24 KiB

blender_Gx1VuBZXM0.png

39 KiB