Colorgrading Tutorial

Preparing the Colorgrade in the Editor

All you really need to do for this step is to take a screenshot of the level (or several if you're grading the entire level). Ideally in your shot you should try to include the main character, an enemy, and a diverse environment that includes the sky and a few different materials, just so that you have good coverage of how everything in the level will react to the LUT.

Grading the screenshots in Photoshop

Once you have your shots, open up Photoshop.

Load the images, and place them all in the same document, arranged next to each other.

You also need to add the default LUT image to your Photoshop document.

default_cch.tif

Your Photoshop document should look something like this:

Note that should should never re-size the document with the default LUT image, if you change/scale the pixels, it will not export properly.

Now we can grade it! There's a few things to keep in mind when doing the grade in Photoshop:

Grading must be done across the whole image, so always use adjustment layers on the very top layer.
You can't do local over-paints or selections of the image, it must affect the default LUT.
You shouldn't do any adjustments that affect the brightness or contrast of the image. So no levels/curves/brightness/contrast. The reason is that this can be destructive to the shading model in the engine. We have controls in the Time of Day editor to affect brightness and contrast.
Therefore, you should only focus on color adjustments (Hue/Saturation, Color Balance, Photo Filter, etc).

Here's an (extreme) example of a grade in photoshop:

Now you simply flatten the image, so all the color data is baked onto the LUT.

Optional: Crop the image all the way down to only show the LUT. This can help prevent issues with saving.

Save the image, choosing the CryTIFF extension format.

If you name the file with a cch suffix (ie, "colorgrade_cch.tif") then the CryTIFF plugin will automatically use the correct preset. If not, then switch the preset to "Colorchart"

Make sure to save the image in the correct folder (GameSDK/Textures/Colorcharts/)

In case you have issues with the color chart/LUT not appearing in the editor as it does in Photoshop, or just simply not loading, you might have had an error while saving.
Here's a few things to note when exporting the LUT in Photoshop.

When saving, the preview window for the CryTIFF plugin should look like this:

If it looks like this:

The plugin might not be able to accurately find the colorchart texture border within the image. You should be able to fix it by cropping the image down exactly to the border of the LUT texture.

If it looks like this:

The plugin might not be able to determine the border of the colorchart. It could be that the color or contrast of the border has changed too drastically from the original.

I find that the best way to fix this is to copy/paste the original border back over your new LUT texture so that it looks like yellow/black stripes again.

Applying the LUT in the Editor

There are a few ways to apply the LUT in the editor. Unfortunately there's no UI integration for this, so for previewing purposes, you need to use the Console.

Using the Console

Make sure colorgrading is active by default (it should be) with this CVar:r_ColorGrading 1

Load the new colorchart/LUT using this cvar: r_ColorGradingChartImage Textures/Colorcharts/colorgrade_cch.tif

Note that you need to give the full path with GameSDK as the root.

Using Flowgraph (applying the LUT during gameplay)

Open flowgraph, and add the node:Image:ColorGradient

For single player missions, you will also need to add a few nodes to set "default" colorgrading options. This is because the UI calls certain colorgrading LUTs when the player is hit, or when the player uses Focus.

The node is called: Image:ColorGradientDefaults

You'll need to set the "Effect" input to "ColorGradeTexture" to set this LUT as the default applied LUT
Depending on the grade, and how it looks in gameplay when you get hit or use focus, you might also need to apply this LUT to the Effects named "FadeOutHitGradeTexture", and "FocusStartGradeTexture".

In the "TexturePath" input, add the full path of the LUT (just like in the Console example above).

Trigger it all on GameStart or something else.

The flowgraph should look something like this:

Now when you jump in game (or trigger it), the grade should be switched on.

Note that if you have multiple grades throughout a level, you can use the "TransitionTime" input to blend them together.