Prototypr

Prototyping, UX Design, Front-end Development and Beyond 👾 | ✍️ Write for us…

Follow publication

Hollywood Movie Filters using LUTs

--

Colour Grading using Lookup Tables & Beyond

What is a LUT, and how is it used?

LUT is the short form for the Look-Up Table. In simple terms, it’s a format that can store mathematical instructions to replace a color with another one.

Consider this math problem, R=S+L.
“R” is the result you are looking for
“S” being the source (starting point)
“L” is your LUT to help make up the difference between your source and the desired outcome.

A LUT is used to achieve color correction using a post-process method. A 3D LUT offers a more sophisticated color transformation as compared to a 1D LUT. Primarily, 3D LUTs are used in the film industry for showing how colors will be reproduced, either after color grading or on another display device.

LUTs in the Tech Industry

Ever since the launch of photo filter and beautification apps, folks in the tech industry are doing all sorts of things around filters. Colour filters are one of them. But the funny thing is that they can say implement color filters in mobile apps in many ways — why use LUTs then?. Let’s explore some of them:

  • RGB Spline Curves: This involves plotting value coordinates for each color curve. Things like brightness, saturation, and contrast have to be mentioned separately in the code.
Saturation: -100
Curves: Composite (0,38), (63,66), (195,191), (255,219)
Curves: Red (0,15), (101,92), (129,129), (255,255)
Curves: Green (0,15), (85,65), (128,128), (255,255)
Curves: Blue (0,10), (59, 70), (158,170), (255,245)
Brightness: +20
Contrast: +50

As you can see, for complex curves, the number of values that need to be plotted will become a nightmare for both designers and the dev.

  • Adobe Photoshop curves (ACV): ACV is more or less the same. It’s an adjustment layer in Photoshop that can store the spline curve values in it. But now, a designer no longer needs to note down every coordinate. The only catch with this is that Android & iOS needs a third-party library integration to support/read an ACV file. Which will increase the overall size of the compiled app plus, it introduces third-party dependency.
  • Look-Up Table (LUT): One of the reasons the tech industry started using LUT is when they noticed a lag in switching between filters. At a given point in time, a mobile app is always running many background processes — this makes filter applying an extensive battery-consuming task. LUTs can be stored as .png/.3dl/.cube.

Creating LUTs using Photoshop

I can say that LUTs in Photoshop (Pisare somewhat like a hidden gem. It is completely possible to create a stellar photo effect using Ps and save it as a single LUT file. Check out the tutorial shown down below, which uses a mix of adjustment layers such as Curves, Channel Mixer, Gradient Map, Levels, Black & White, and Color Balance to create the desired effect and then combine all of that in a single layer using LUT. All inside Ps.

In short, once you have played around to get the final effect, with your background layer locked and adjustment layers ready to go, click on File, Export, and then Color Lookup Tables. From there, Ps will ask for a description, quality, and format. The suggested method is to lower the quality to Medium or High rather than Maximum and to use CUBE instead of 3DL (CUBE is more widely accessible across other applications). Rename and save this LUT file where you want to.

LUTs using PNG (Hald)

Hald is a graphical representation of 3D LUT in the form of a color table that contains all of the color gradations of 3DLUT. If Hald is loaded into editing software and color correction is applied to it, then you can use a 3D LUT creator to convert your Hald into 3DLUT and apply it to a photo or a video in your editor.

A 3D LUT is converted into a 2D image (JPG or PNG file) in simpler terms. Hald is a pattern containing all color values (pixels) for a specific size of the grid. Bigger the grid, the better color accuracy in the output result. Bigger grids have lesser interpolation of values than the smaller ones but are heavier to load into the system as a tradeoff.

Effects are applied over a neutral Hald file and saved using Ps to get the final LUT. Neutral Hald files of different grid sizes are shown below:

HALD16 [Size: 256х256х256]
HALD8 [Size: 64х64х64]
HALD10 [Size: 100х100х100]
HALD5 [Size: 25х25х25]
HALD4 [Size: 16x16x16]
Sample LUT effect

End Thoughts

LUTs are really popular among colorists in the video industry and are just starting to get noticed among photographers. They are easy to make, fast to use, works in a slew of applications, and it doesn’t reduce your image quality.

I hope this write-up can help you get started with LUTs. Since LUTs are easily exported as a single file, they are easy to distribute. That means you can get some free LUTs from the web and start experimenting with them.

Give me a shout!

Thank you for reading this far! 😁 Let me know if you have any questions or comments on my design — or — If you’d like to have a chat about anything design-related, I’d love to hear from you!

Before you go…

👨🏻‍💻 Connect with me on LinkedIn, Twitter, and YouTube (Subscribe).
💭 Comment
your thoughts, feedback, anything!
👋 Alternatively, you can also book a design mentorship session by sending a request on Calendly. If you want to learn more about design, check out my short 2–3 minute design education videos on AntWak.

--

--

Published in Prototypr

Prototyping, UX Design, Front-end Development and Beyond 👾 | ✍️ Write for us https://bit.ly/apply-prototypr

Written by Dhananjay Garg

Product Designer who narrates stories. Love designing products that are accessible & usable. Connect on https://www.linkedin.com/in/djgarg/

No responses yet

Write a response