Overview

This tutorial covers how to fine tune the tones and colors in the final rendered image of your level using the Environment Editor and Photoshop to provide a custom lookup table.

The procedure is to use Photoshop to modify the standard color chart below while consulting reference images of your game, to export the modified color chart as a CryTIFF file, and finally to activate the color grade in the Engine. CRYENGINE compares the expected values with the modified colors you create, and adjusts the game image in real time.

Standard Color Chart

The entire basis for this workflow is the color chart image below, which you need to download by right-clicking on and saving it.

Steps

• Download the standard lookup table above.
• Create a new Photoshop (.PSD) document with Color Mode set to RGB Color and 8 bit, large enough in resolution to accommodate the screen shots you plan to capture (HD, 4K, etc.). Make sure you assign the sRGB color profile to your file to insure consistent color throughout the workflow.

Photoshop - New document

Exporting the New Lookup Table

All CRYENGINE needs is the color chart whose colors have been changed through your adjustments. You can either crop your image down to only include the lookup table and then export it (this is the recommended method, as it will be a smaller, faster loading file), or export it as-is; CRYENGINE will auto-detect the lookup table and ignore any image outside of it.

• Make sure your CRYENGINE project is open so the required .cryasset file for your lookup table will be generated automatically.
• In Photoshop, flatten your layers. (Layers → Flatten Image).

• Save your image in CryTif format (File → Save As, and set CryTif as the file format). Append _cch.tif to the filename so the Resource Compiler will automatically choose the correct shader. Set the path as follows in your project folder: Assets\textures\colorcharts. Note that you may have chosen a custom name for your assets folder. Also, if these folders don't already exist, you may need to create them.
• In the Resource Compiler dialog box, make sure your image is not tiled and that Preset is set to ColorChart. Click on Generate Output (not the OK button) to export your file.

Resource Compiler

• Open your project's Assets\textures\colorcharts folder and verify that the file exported with a .dds extension name and that a corresponding .cryasset file was created. The lookup table is ready to use.

Loading the Lookup Table in CRYENGINE

Now you're ready to apply the new lookup table to your game:

First, insure that color grading is enabled (it is by default) by typing r_ColorGrading 2 (or 1) in the Console.

There are several ways to activate your custom color grade:

Important Facts

Color grading is the last step in the render pipeline.

Since you can modify colors and tones in any way you like in a lookup table using Photoshop's sophisticated tools, it's possible for lookup tables to perform more precise color and tonal adjustments to the overall image than what can be done with Variables → HDR → Color Balance and Saturation properties, even though their capabilities overlap.

For example, you could;

• just desaturate deep shadows to get better blacks;
• split tone an image with cool shadows and warm highlights;
• or create a color grade to desaturate all colors and change all shadows and highlights past a threshold you choose to a colorful overlay; this helps identifying clipping or extreme tones that you might want to adjust lighting before beginning the actual color grade process.

You can see examples of these debugging color grades in the free GameSDK's textures.pak file in the color charts folder. You don't need to create a GameSDK project; just open the .pak file in a compression utility like 7Zip and extract the color grades that interest you into your own project's textures\colorcharts folder, then assign them using one of the methods described above.

Best Practices

• In general, we recommend lighting and configuring your environment preset for a somewhat flat, low-contrast look, then develop a color grade that adds contrast to bring the image to its final desired look. Adding contrast works better than trying to reduce it at the color grading stage. If your lighting ends up producing a very high-contrast image, you risk losing highlight and shadow detail that will be difficult or impossible to recover. Trying to do so through color grading will often reveal undesirable banding (posterization) artifacts.
• Don't forget that color grading will also be applied to your game's UI and menu, so be sure to include screen captures of the relevant screens in your Photoshop file to check with your final grade - or create a separate color grade and load it when menus appear.
• Don't forget to disable any existing color grade before capturing screen shots for use in a new color grading process.
• Make sure that you capture a wide range of images from your game that represent the full range of lighting conditions, place them into your Photoshop file, and view the effect of your color grade on each of them individually.
• Be especially sure to include screen shots of your highest contrast scenes where HDR is trying to balance interior and exterior lighting levels to insure that you aren't clipping shadows or highlights through your color grade.

Photoshop Best Practices

Since color grading often goes through a long iteration process with input from art directors and many stakeholders, it's common for your Photoshop layers to grow and grow, to get disabled, the layer opacity adjusted, etc. Thus keeping your Photoshop layers well-organized will save you a lot of trouble. Here are some suggestions to help save you time and confusion:

• Use adjustment layers (Layer → New Adjustment Layer) in Photoshop (not Image → Adjustments) so you affect the look of all screen capture layers (as well as the color chart) rather than making permanent changes to an individual image layer.
• Be sure not to use layer masks in your Photoshop adjustment layers, as your color grade will be applied globally, not locally.

An easy way to fine tune the strength of adjustments whose influence you like but whose effect is too strong is simply to reduce the layer opacity of adjustment layers. You can apply the same approach to a group of adjustment layers by putting them into a layer group and varying its opacity to alter the strength of the entire color grade. This is especially helpful when you want to vary the intensity of complex adjustments, like curves that have many points across the RGB channels, without having to modify every point while maintaining numerical relationships.

Naming your adjustment layers to identify their intended purpose (desaturate reds or increase contrast, etc.) is a simple way to facilitate communication across teams and saves time spent trying to figure out what each layer is doing, especially when you come back to update it some months or years later. If you develop a habit of clicking on an adjustment button in the Adjustments palette while holding the Alt key:

- you'll be prompted to choose a name for the layer, a blending mode, and layer opacity:

Keep in mind that color grading is the last step performed in the render pipeline (in 8-bit sRGB color space), after HDR settings are applied (in 10-bit color space from 16 bit calculations). Therefore the screen captures that you use in the color grading process have already been adjusted by any HDR settings, and a color grade isn't affected by HDR once it's activated. However, this also means that if you go back and make changes to your HDR settings in the environment preset (or anything else that affects the final image), you'll essentially invalidate your color grade and have to start all over again. Thus color grading should be the last step in the configuration of your environment preset. (Note that there are non-physical post-render effects that happen after the image is rendered and color grading is applied, like Variables → Sun Rays Effect → Sun Rays Custom Color.)

You can create and activate color grades for special purposes, such as momentarily switching to a stylized look when a player is struck and injured, for menus, special view modes, or for troubleshooting purposes, such as applying a bright, saturated colors to very dark and very bright RGB values to visually identify shadows and highlights that are darker or lighter than a threshold you have chosen. If you need to switch between color grades very rapidly, you may need to adjust the CVar r_ColorGradingChartsCache, which sets how many frames pass between updates to the color grade. The default is every four frames, but you can force it every other frame with the value 1, or even to every frame with 0. Forcing the Engine to refresh this cache more often than your color grade is changing will only degrade performance with no gain.

Troubleshooting

If you encounter visual glitches on the PC, please ensure that you haven't overwritten 3D settings for either the Editor or game launcher in the control panel of your video driver. This is a major source of visual artifacts.

In particular, enforcing multi-sampling or anisotropic texture filtering can break post processing effects, deferred shading, and other aspects of the final image.

This tutorial is also available in video form on our YouTube channel here: