Live Mockups · Post processing · 3 min read

Grade the colors

Warm, enrich and deepen the render of a live 3D phone scene with the Post processing sliders, then change its overall look with Tone mapping.

In ls.graphics Live Mockups, open Post processing in the right panel, set Temp. to 0.12 and Saturation to 0.4 to warm and enrich the render, shape the light with Exposure, Whites and Blacks, then pick a preset in Tone mapping. The whole frame is graded at once, including the design on the screen.

Result: in our test, a white-backdrop iPhone scene turned cream with Temp. 0.12, and AgXToneMapping softened the highlights.

Open Post processing

Open the iPhone scene with the white backdrop in Live Mockups. In Media, click the pencil next to the screen, click Replace Media, choose your picture and click Okay, as in Put your design on the screen. Then fold Media, Lights, HDR, Screen effects, Screen glow and Effects with their arrows so Post processing moves up. It has three groups: Color, Light and Effects.

A phone on a white backdrop with the Post processing section open and every slider at 0A phone on a white backdrop with the Post processing section open and every slider at 0
The scene before grading. Every slider starts at 0.

Warm the colors

In the Color group, click the number field next to Temp., type 0.12 and press Enter. The whole picture turns warm. Then set Saturation to 0.4 so the colors get richer.

Temp. at 0.12 and Saturation at 0.4, with a warm cream backdrop behind the phoneTemp. at 0.12 and Saturation at 0.4, with a warm cream backdrop behind the phone
Temp. warms the whole render. Saturation deepens the colors.

Shape the light

In the Light group, set Exposure to 0.02, Whites to 0.05 and Blacks to −0.4. The bright parts get a little brighter and the dark parts get deeper. For lamps and reflections instead, see Relight the scene.

The Light group with Exposure 0.02, Whites 0.05 and Blacks −0.4 beside the graded phoneThe Light group with Exposure 0.02, Whites 0.05 and Blacks −0.4 beside the graded phone
Light sliders change brightness and contrast.

Pick a tone mapping

Fold Post processing and open Tone mapping at the bottom of the panel. Click the menu and choose a preset. The options are No tone mapping, LinearToneMapping, ReinhardToneMapping, CineonToneMapping, ACESFilmicToneMapping, AgXToneMapping and NeutralToneMapping. Here the scene starts on NeutralToneMapping, and AgXToneMapping softens the highlights.

Tone mapping menu set to AgXToneMapping, with softer colors on the phoneTone mapping menu set to AgXToneMapping, with softer colors on the phone
Tone mapping changes the overall look of the render.

Questions

How do I make the colors cooler in Live Mockups?

Use a negative Temp. value in the Color group of Post processing. Temp. warms the picture when it is positive and cools it when it is negative, and Tint works the same way on the green and magenta axis.

Which tone mapping presets does Live Mockups offer?

No tone mapping, LinearToneMapping, ReinhardToneMapping, CineonToneMapping, ACESFilmicToneMapping, AgXToneMapping and NeutralToneMapping. The scene in this test opened on NeutralToneMapping, so the preset in the menu is already highlighted when you open it.

Where is Post processing in the right panel?

Below Effects and above Camera. Fold Media, Lights, HDR, Screen effects, Screen glow and Effects with their arrows and Post processing moves up, with the Color, Light and Effects groups open.

Do the Post processing sliders change my design file?

No. They grade the rendered scene in Live Mockups, so the picture on the screen is graded together with the rest. Your original design stays as you uploaded it, and the sliders can be set back to 0 at any time.

Try it in the Live Mockups

Real 3D devices you turn, light and animate.

Open editor