How are Lyra logo textures created? (RGB channels contain different data)

[heretic133]

Hi everyone,

I’ve been working with Unreal Engine’s Lyra project for a while, and I’m now in the process of replacing the default Lyra branding with my own logo.

I’ve narrowed it down to two specific texture files (attached below). It seems that if I replace these correctly, most of the in-game “Lyra” icons will update automatically.

However, these textures appear to be more complex than standard logo images. When I analyzed them in Photoshop, I noticed that each RGB channel contains different information:

• One channel contains a clean version of the logo

• Another appears blurred

• Another contains a stylized/glow variation

Because of this, simply creating a flat PNG in Photoshop and replacing the texture does not produce the same visual quality as the original Lyra assets.

My main question is:

What technique or workflow did the Lyra creators use to produce these multi-channel logo textures?

Any guidance on how to properly recreate this type of texture (with custom text/logo) would be greatly appreciated.

P.S.1. Here is my images:

This is the result:

And here is Lyra’s:

P.S.2. English is not my native language, I used ChatGPT to help edit this post.

[jblackwell]

What’s your planned use case for this rebranding of Lyra? Is there a reason you’re trying to get an exact 1-1 of the logo’s graphics, or is an approximation acceptable?

[heretic133]

This is the game I’ve been working on for the past couple of months. I tried to deviate from Lyra as little as possible, so I didn’t want to change the main menu and UI too much. That’s why I decided to use a Lyra-style logo as well.

Ali | Geno

[glitchered]

the blue is the logo. the red is preblurred bloom. you can do with the green whatever you want. in the lyra logo it’s ran thru some type of threshold filter and a texture applied. it’s just extremely packed while being editable.

to generate it in gimp or photoshop, you’d have to paint a blue logo. duplicate the layer, change it to red and blur it. and you can do whatever with green as background blend. then change the layer blendmode to screen overlay and it will combine it into the rgb texture.

here’s a crappy example howto combine it in engine. text over background and added “bloom”. precomputed. very fast.

you could even change the channel packing if you wanted. like layer1, layer2 and layer3. and alpha ofc.

[heretic133]

This is exactly what I wanted. Thank you very much.

EDIT:

This is what I did:

1. Created four grayscale images in Photoshop (Image → Mode → Grayscale), each containing a different map. The background is black, and the white areas represent what I want to display.
2. Created a separate image file in Photoshop with a white background (for some reason, it’s important that the background is not transparent in the initial stage).
3. In the Channels panel, selected the appropriate channel and pasted each grayscale image into its corresponding channel. Then created an additional channel for Alpha and pasted the alpha map there.
4. Exported the image in .tga format. PNG did not work for me.