Here you’ll find content and resources for creating image assets for the Keyboard Overlay App. If you have resources you’d like to share, or have a question please reach out in the Discord Server.
The Keyboard Overlay is made of several customizable components: a Base component and 7 Key components (each with an Idle & Active state).
Resources
GDrive containing the blend & obj files.
Figma & GDrive for UV maps/templates.
Useful Blender Guide that shows how to bake materials into UV maps, great for procedural materials with seamless textures.
https://youtu.be/fVp903np6lo
Image Specifications
Requirements: PNG or JPG image under 10 MB.
Currently only a “diffuse” image is supported. Roughness and Normal maps are not supported.
How to Upload a Custom Image to the Keyboard
- Open App Settings
- Right-click on your Keyboard Overlay source in your scene, click Properties, then click App Settings.
- On the left-nav of Streamlabs Desktop, select the dropdown beside App Store and click Keyboard Overlay.
- Select Skin Gallery (top-right) and select the Custom skin
- Click on the Upload tab. Here you’ll find the Base component and each Key component with their Idle & Active states.
- Click on a component and click Add photo.
- Once uploaded, a user can change additional material properties to further customize the look:
- Color: White (#ffffff) by default. This color is multiplied with the image texture.
- Roughness: How rough the material appears.
- Metalness: How shiny/metallic the material appears.
- Opacity: How transparent the material is.
- You must click the Apply Button in order to save the component’s settings.
How to Export a Transparent Image of the Keyboard
- Enable designer settings by navigating to the Home Page of the app. Click Keyboard Settings (top-right).
- Click Other and toggle Enable Designer Settings.
- Go back to your Custom skin in the Skin Gallery (also works for other skins) and click the Screenshot Button. You may need to scroll down on the page. If the screenshot appears cropped, you need to the camera out further by using the scroll wheel.
I’m considering adding more designer features inside of the Keyboard Overlay App and I’m open to suggestions. Things like customizing the background of the page to make greenscreen/bluescreen recording, useful for creating videos with transparent backgrounds. Let me know if there are any tools/resources you’re looking for!