Inset Typography effect


#1

Hey Yanni. Whoops I mean Jules.

I’m trying to make an inset typography effect. The inset effect is essentially two steps:

  1. apply dark shadow to the text negative, offset so that it shadows top left of the characters
  2. apply light “shadow” to text positive, offset so that it looks like the lower right of the characters is shiny

However, shadows cannot be an arbitrary colour. May we be allowed to set this?


#2

I’m thinking that you are going to want to first create a single channel mask out of the text. White lettering on a black background. This is the “stencil” mask.

Duplicate the mask, and apply a gaussian blur to it. This becomes the “shadow” mask, and it will be larger than the stencil mask. I posted code for doing this very conveniently (and faster than the Juce blur):

http://rawmaterialsoftware.com/viewtopic.php?f=6&t=6644

Apply the stencil mask to the Graphics context as a clipping region so that drawing only takes place on the interior of the stencil.

Now, take the blurred mask and call drawImage() with fillAlphaChannelWithCurrentBrush=true after setting the current brush to some transparent level of black (or dark blue?). Draw the image at some offset from the original location.

The result will be a shadow similar to the one posted in your screenshot.


#3

The function to produce the shadow mask is RadialConvolutionKernel::createConvolvedImageFull ()

Make sure your stencil mask is single-channel.


#4

Interesting idea. I’ll probably use that method if I need to do this with larger text.

I figured out a satisfactory hack by overlapping 3 duplicate labels (dark, light, desired colour) slight component translations to mimic the shadowing.

That’s a cool filter, though. Sure it would be good for animations. You ever sleep Vinnie?