Stream Deck Background Template

Tips & Tutorials
1

So this topic is a bit Keyboard Maestro adjacent, but seeing as how I use my Stream Deck for literally nothing other than executing Keyboard Maestro scripts, I wanted to share how I make it pretty.

Problem: I wanted to make my Stream Deck icons have a background so that it looks like the button are placed over a wallpaper of some kind.

Elgato has a site for this but I always found it lackluster in terms of feature set. It also doesn't give you the ability to save the set of images as an editable file which means adding a button to your stream deck or updating a button means starting all over on their website.

So I set out to make my own solution that I find easier to use. YMMV.

Solution: I made a template using Affinity Designer that has an embedded background document. Double clicking on the icon of the embedded background document in the layers panel allows you to edit the background.

2020-05-16 23.47.59
2020-05-16 23.47.591433×1019 503 KB

You can then enter the Export persona and export the slices as individual images which you can then import into your stream deck.

2020-05-16 23.52.51
2020-05-16 23.52.511428×1013 3.03 MB

Here's a small example of a page I'm currently working on with a few icons:

app-code-template
app-code-template2350×1150 180 KB

Some Important Notes:

  • In order to appear in the correct icon during export, individual icon artwork (like the hammer and play button above) need to be in the same layer as the given slice. They're all named so it shouldn’t be too hard to find.
  • The slices are numbered according to a grid. The bottom left is slice-1-1 and the top right is slice-8-4 with the first number indicating the horizontal position and the second number indicating the vertical position.

Here's a link to download the templates from my Dropbox. I recommend using the .afdesign file since that's what I used and tested, but I put up the same file exported to a .psd file in case someone wants to give it a whirl with photoshop.

5 Likes
2

This is awesome, thank you! I'm trying to make one of these for my smaller Stream Deck (5 columns x 3 rows), and when I create slices using the export persona, the project only exports graphics of the rectangles in my slices layer. You mentioned

"In order to appear in the correct icon during export, individual icon artwork (like the hammer and play button above) need to be in the same layer as the given slice."

Does this mean dragging a duplicate layer of the embedded document nested into the Slices layer, or masking the duplicate layer of the embedded document to one of the slices? This has always confused me in Affinity...

I've attached a Dropbox link of my attempt at doing this:

3

THANKS!!! Very helpful! I love Affinity Designer. You can also use these with Affinity Photo.

1 Like
4

Uh oh, looks like I moved some stuff around in my Dropbox and the links are now ded. Unfortunately I can't edit the original post but here's a fresh link that should bring you to the templates!

If an admin sees this and wants to update the original post with the new link, please feel free!

1 Like