Apple - Final Cut Pro - Advanced Color Grading (10.4)
“Professional color grading tools are built into Final Cut Pro, including a dedicated color inspector with color wheels, color curves, and hue/saturation curves. Use keyframes to adjust corrections over time, and apply camera and creative Look Up Tables (LUTs) for the perfect look. All color grading tools and scopes support High Dynamic Range (HDR) video.” (credit: Apple)
Our Role
We were assigned as the design DRI (directly responsible individual), guiding the feature all way way from concept, through design iterations, to working with engineering to implement the designs, and finally testing and verifying the designs with QA.
Background
Existing Color Grading Tool – Color Board
Final Cut Pro X (10.0) introduced a simplified color correction tool known as the Color Board. The goal was to make an intimidating tool more approachable to beginner users. While it made basic color grading intuitive for beginner users, it lacked the advanced capabilities required by more intermediate and advanced user.
Outcome
New Advanced Color Grading Tools
Introduced in Final Cut Pro 10.4, the advanced color grading tools are the result of a year and a half of design and development. The new tools include: Color Wheels, Color Curves, and Hue/Saturation Curves. More experienced and advanced users will instantly recognize some of the tools as industry standards (i.e. Color Wheels and Color Curves), but we also added more modern ways to color grade projects. Namely, the Hue/Saturation Curves, which allow users to color grade based on various axis (including Hue vs. Hue, Hue vs. Saturation, Hue vs. Luma, Luma vs. Saturation).
Color Wheels
Color Wheels allow users to grade the Hue (color) based on specific regions of exposure in a given clip (Master, Shadows, Midtones, Highlights). The brightness and saturation of these said regions can also be adjusted using the sliders that are at the sides of the wheels.
Color Wheels / Design Iterations
Some of the earliest design explorations was most concerned about the layout of the four color wheels. The space available for the controls are strictly defined by the width of the Inspector; to save space, the brightness and saturation sliders followed the curvature of the wheels. The third design shown here provided a lot more information to the user (exact brightness and saturation values, as well as hue as an angle, etc.)
Color Wheels / Final Shipping Design
The final selected design retains the iconic and functional look of the sliders that follow the curvature of the wheels. The controls, however, have been simplified as to reduce components that aren’t absolutely essential, such as the labels for specific parameters. The “X” pattern in background of the circle in previous designs were altered to a “+”, which provide a zero point for the two sliders, and also moves with the hue puck, to indicate change.
Color Curves
Users can use the Color Curve tool to adjustment the components of the Red/Green/Blue color channels. The left-most side represents the shadows, while the right-most side represents the highlights. One of the innovations to the industry-standard Color Curves, was the ability to specify a more specific color channel beyond the Red, Green, Blue found in typical color grading apps.
Hue / Saturation Curves
Users can adjust the hue, saturation, and bright of colors in their projects with the Hue and Saturation Curve tools. These tools include: Hue vs. Hue (adjust a specific color against another color), Hue vs. Saturation (adjust a specific color against the saturation range), Hue vs. Luma (adjust a specific color against the brightness), and Luma vs. Saturation (adjust a specific brightness against the saturation). These tools allow very flexible and precise control over the color and look of the users projects.
Preferences / Default Color Correction
We wanted to keep the default color correction set to Color Board for the beginner users, but to appease the advanced users who may want to set their default to one of the three new color correction tools, we included a setting in the app preference pane.
Color Inspector Icon
These are the various stages of exploring designs of the Color Inspector icon, which would live in the pane cap of the Final Cut Pro Inspector. The icon is a relatively small size, so clarity and recognizability were some of the primary goals. The left side shows a normal (unselected) state, while the right side is the active (selected) state. Introducing a full spectrum of color was explored alongside using the standard Final Cut Pro active tint color (purple).
This layout shows the various explored icons in-context of the app. It should be noted that the Color Inspector icon would live alongside other icons such as: Video Inspector (filmstrip), Audio Inspector (Speaker), etc.
Very early on, we settled on using the full spectrum color as the active (selected) state, it was a matter of selecting the shape. The leftmost icon shows a shape that already existed in the Apple iconographic library, used to indicate Filters in the Apple Photos app. The center icon is a simple ring, a common shape seen when referring to color; the potential issue with this shape was the blandness of the shape when it is in the normal (or unselected) state. The icon on the right is an abstracted gamut shape, typically used to show the range of a color standard in context of what the human eye can perceive. We liked the triangular shape, as it is primitive, but the asymmetric shape gives it more of an organic, crafted look.
Color Inspector Icon / Final Shipping Design
The triangular color gamut shape was ultimately chosen as the final icon that would go live. We liked the primitive shape that was instantly recognizable, and the fact that it wasn’t a circular shape, which is an archetype to symbolize color. The triangle was double stacked with varying opacity levels, to create more depth in the icon, especially when in it’s normal (or unselected) state.
Design Specification
Once the design directions are solidified, design specification documents are created to communicate the design intent as well as specific layout metrics and colors to engineering and QA teams. These are some sample pages of those deliverables produced for this release.