How to create beautiful screenshots for flathub?

[sgued]

Hi!

My app fails multiple metadata guidelines. While most seem easy to fix, I’m not sure at all how to fix the screenshots.

I took the initial screenshots on a white background, but the guidelines expect the background to be transparent and still have the shadow. I’m not sure how to achieve that without removing the background manually and re-creating the shadow over transparency with an image editing tool.

Also, the guidelines taught me that the screenshots can be language specific. Is it also possible to have screenshots for both light and dark mode and have the interface show the one that corresponds to the user’s preference?

[razzeee]

@sgued

I took the initial screenshots on a white background, but the guidelines expect the background to be transparent and still have the shadow. I’m not sure how to achieve that without removing the background manually and re-creating the shadow over transparency with an image editing tool.

You seem to be using gnome, you can screenshot a window with the screenshot tool.

You want the window mode on the right. New screenshot UI (!1954) · Merge requests · GNOME / gnome-shell · GitLab
Then select your window. Shadows and transparency should be fine then.

Is your app really supposed to be in a vertical format, like a mobile app? That’s in general not the best case for us (we will need more to handle these better)

@sgued

Also, the guidelines taught me that the screenshots can be language specific. Is it also possible to have screenshots for both light and dark mode and have the interface show the one that corresponds to the user’s preference?

Yes, that’s possible, but flathub isn’t respecting that yet, due to backend limitations. See environment in Upstream Metadata | AppStream | AppStream 1.0

[sgued]

I’m using libadwaita but I’m not using Gnome, I’m on sway. It’s annoying to have to install gnome just to take the screenshot. Is there no other way to do this?

Is your app really supposed to be in a vertical format, like a mobile app? That’s in general not the best case for us (we will need more to handle these better)

The app is meant for use on desktop but it’s a very simple app, meant to be a small window. In a larger format it just looks pretty empty.

[sgued]

Do you think that screenshots like this would be better?

I installed Gnome to take them and indeed the shadows look significantly better.

[razzeee]

Yes, that would be better, if the pixel sizes don’t get too small. Should be about 700 to 1200 width ideally

[sgued]

I’s only 659x452, that’s indeed not a lot, but by setting display scaling to 200% I was able to get a much higher res image of the same content.

This also prompted me to change the default window size to something that made sense for the screenshots and therefore also makes sense for most users.