Live Mockups · Screen · 2 min read

Add screen effects

Give the display of a 3D device a real glass look in Live Mockups. Add a reflection and a CRT pixel texture, then dim the screen, and watch each change on the moving scene.

Start from the plain screen

Open a scene in Live Mockups and add your design to the screen. Press Back to start under the canvas so the scene waits on its first frame. The picture on the screen is flat and evenly lit.

Live Mockups with a phone hanging from an orange cord and a dark blue design on its screenLive Mockups with a phone hanging from an orange cord and a dark blue design on its screen
The scene before any screen effect.

Open Screen effects

In the right panel, click the arrows next to Media, Lights and HDR to fold them. Screen effects moves up and shows four rows: Opacity, Reflection, CRT and Glass Ghosting.

The Screen effects section with Opacity at 100 and Reflection, CRT and Glass Ghosting at 0The Screen effects section with Opacity at 100 and Reflection, CRT and Glass Ghosting at 0
Opacity starts at 100. The other three rows start at 0.

Add a reflection

Click the number field next to Reflection, type 100 and press Enter. A soft sheen of the room lands on the glass. The Reflection row only shows up on scenes that have an HDR environment.

Reflection set to 100, with a grey sheen across the top of the phone screenReflection set to 100, with a grey sheen across the top of the phone screen
Reflection at 100 puts a sheen on the glass.

Add a CRT look

Set CRT to 80 the same way. The picture breaks into a fine grid of pixels, like an old monitor.

CRT set to 80, with a fine pixel grid over the circle design on the screenCRT set to 80, with a fine pixel grid over the circle design on the screen
CRT at 80 adds a pixel grid to the picture.

Dim the display

Set Opacity to 50. The screen fades toward black, as if the display were turned down. At 0 the display looks switched off.

Opacity set to 50, with a darker screen that still shows the reflection and the CRT gridOpacity set to 50, with a darker screen that still shows the reflection and the CRT grid
Opacity at 50 dims the whole display.

Questions

Why is there no Reflection row?

Reflection only shows up on scenes that have an HDR environment.

How do I make the display look switched off?

Set Opacity in Screen effects to 0. At 50 the screen fades toward black, as if the display were turned down.

Why can’t I see the CRT grid?

It is a fine detail. Open the picture at full size to see every pixel of it.

What does Reflection add to the screen?

A soft sheen of the room on the glass, which makes the display look like real glass.

Try it in the Live Mockups

Real 3D devices you turn, light and animate.

Open editor