Make a game-style avatar frame

Turn a ring shape into a lit, beveled gold frame with a drop shadow, transparent everywhere else.

Game-style avatar frame

The gold ring around a character portrait in a game UI: a beveled metal frame, lit, cut to its own shape, with a soft shadow. It comes straight out of a shape node.

1. Draw the ring#

Add an SDF Shape node, set Shape to Ring, and turn Angle up to 360 for a full circle (less makes an open arc). Tick Transparent BG so only the ring is solid.

2. Bevel the edge#

Add a Bevel node and wire the shape's Distance output into the Bevel's Distance input. Feeding it the distance rather than the picture gives a smooth, rounded edge with no stair-stepping. Turn Normal Intensity up for a pronounced, light-catching bevel.

3. Make it gold metal#

Add a Gradient Map and wire the Bevel's height output in, then set a gold ramp (bright gold into deep bronze). Add a Material node: wire the Gradient Map into Albedo, the Bevel's Normal into Normal, and set Metallic to 1. It now reads as solid gold.

SDF Shape  --Distance-->  Bevel  --Normal------------>  Material (Metallic 1)
                            |
                            +----height-->  Gradient Map  -->  Material (Albedo)

4. Light it#

Add a Material Light node and wire the material in. Move Light Angle and Light Elevation until the highlight sits where you want it, and raise Ambient so the shaded side still reads as gold.

5. Cut it out and shadow it#

Add an Alpha Merge node: wire the lit result into RGB and the ring shape's picture into Alpha. Everything but the ring goes clear. Wire that into a Drop Shadow node for a soft shadow behind the frame.

Material  ->  Material Light  ->  Alpha Merge (RGB)  ->  Drop Shadow
SDF Shape  ---------------------> Alpha Merge (Alpha)

6. Export#

Wire the Drop Shadow into an Export node and save a transparent PNG, ready to drop into your UI.

Take it further#

  • Rivets around it: add a small SDF Shape disc and a Splatter Circular node set to the frame's radius, then bevel and light those the same way for a studded border.
  • Any shape frame: swap the ring for a hexagon or heart, then wire that shape's Distance into Splatter Circular to ring ornaments along its outline.
  • Engraved detail: blend a scratch or filigree normal into the frame with a Normal Combine node before the Material.

Where to next#