Gradient Tool

Gradient Tool
For my technical specialization course I did a gradient tool to be used for shaders. The tool has two modes, one is for painting a gradient and the other is generating a gradient based on a curve. While painting you can either paint an original design or take an existing image and mask in the gradient into the image. Usually it’s a pain to paint a gradient in Photoshop to do animated materials in games.

Paint Features

  • RGB gradient
  • Brush size
  • Mask against an existing image
  • Export and Import images in PNG, TGA or DDS format
  • Send to Photoshop for quick edit

The curve tool can also generate a gradient based on a shape. The shape is either linear, spherical or a square. It also can be exported or sent to Photoshop by the same formats as the Paint Tool.

Demo in Unreal Engine 4
To show of the tool I did a test project in UE4 where i did a simple animated material. I used a cracked texture showcase my tool. Below you can see the original texture to the left and to the right is how the gradient was exported.

Crack texture

Cracked texture

Painted gradient

Painted gradient

I made two materials which were almost identical, the key difference between the to were that the first was made with the built in radial gradient in UE4 and the other were made with my tool.

Radial Gradient Material

Radial Gradient Material

Crack Gradient Material

Crack Gradient Material

Here is the result of the materials.

Animated crack 10s

10s

Animated crack 10s

1s

Screenshots

Gradient-Tool_2

Gradient-Tool_4

Gradient-Tool_5