I made new graphics

[KAMiKAZOW]

For my personal use, I've made a bunch of new graphics that look better in the Steam UI than the current icon. I'm not a pro designer or anything like that. They are CC-BY-SA 4.0 licensed. You may use them if you want.

Steam grid, horizontal:

Steam grid, vertical / Poster:

Icon (small):

Logo / Icon (big):

Created in Inkscape on Steam Deck. Graphics have no intend of being scientifically accurate at all.

[DavidoTek]

Thanks for the submission!
I was thinking about changing the icon too, this is a good starting point. I quite like the color scheme, but maybe something could be added to make clear what the app does (like a download arrow, not sure).

[KAMiKAZOW]

I was experimenting with an up arrow but it looked too crowded.

[DavidoTek]

Okay, cannot think of a way to accomplish this now either.

I will think about it and maybe someone in the community has another idea.

[onlyreportingissues]

How about 2 sticking plasters arranged like a cross on the top left part of the green area? An up arrow can be added then on the cross also & not take too much space, since it gonna be small anyway.

[DavidoTek]

Like this?

My original plan was to draw the structure of a Proton and draw an arrow inside the Up quarks. I didn't come up with a better idea than the current logo though.

[onlyreportingissues]

Yes, looks cool. And you could add maybe like 3 green arrows:

It's a quick editing. Transparent background is better ofc.

Image for the arrow: https://toppng.com/uploads/preview/light-green-arrows-115501175909msugzhdqi.png

[KAMiKAZOW]

And that's not too crowded? Is it even legal to use those arrows under CC-BY-SA 4.0?

What is even the purpose of the plasters?

[onlyreportingissues]

Yea, the arrows are maybe too much.

The plasters can imply that it's still Proton, but with tweaks to "pach the abrasions".

[DavidoTek]

Yes, I think that's a bit too much. The Icon should be easily identifiable even when it's small. And with the plaster and the arrows that's unnecessary repeated.
In my opinion the arrow suggests some sort of "up"grade while the plaster rather suggest some sort of patch.

[SecularSteve]

Let me get in on this.

I've got an idea for a new logo of my own:

proton-up-new.zip

Minimalist, simple and elegant.

ZIP contains the SVG and the PNG.

[DavidoTek]

Thanks, that's an interesting and minimalistic style. I like it.
What do you think @sonic2kk?

I wonder how it looks on a black background when dark mode is enabled or in GNOME's application menu.
Can you add some sort of white border to the "Proton-ray"?

Maybe the "ray" can also be a bit thicker and the arrow a bit larger to be more noticeable when scaled down for the title bar/task manager. (that a problem with the current ProtonUp-Qt logo)

PS: I'm not a graphics designer, maybe the "making it thicker" makes it look less good.

---

Played a bit around with different backgrounds.

[sonic2kk]

Oh! I think it looks neat! My own preference would be some kind of "mild lighting", I'm not a graphic designer so I am unsure how to word it. But something along the lines of a slightly lighter green for example along one side to give it a bit of "depth". A somewhat-muted border would also work I think. But, that's nitpicky.

Another nitpick are the colours. The black here is full #000000. Generally it's good to slightly deviate from absolutes like this because they are a bit too "harsh". Also, maybe it would be good to use a solid colour for the arrow? That might help the logo to be more compatible with other background colours.

Maybe if there was a way to include the wave or the colour of the wave from the current logo as well that could be cool. Then we'd be keeping the same "design colours" but repurposing them. Maybe iit could go through the arrow still, or in the top center.

My two main comments on the current iteration here are:

1. As shown by the picture above, darker backgrounds make this more difficult to see. KDE Plasma has an "Application Dashboard" which is a blurred background with a list of applications. If your background is mostly black, the background of the Application Dashboard becomes black. Depending on your monitor, parts of the logo become a little more difficult to see.

2. Some parts of the logo are not quite as pronounced as they could be. This somewhat leads back to the colours as well where the green could be a little bit more compatible with other background shades. I think the picture DavidoTek took kind of shows this off well; look at the 2nd shade of grey. The green doesn't quite blend in well. Perhaps adding a bit of the "light" or "depth" effect I mentioned would help here. Or even a full border if you want to go for a full minimaliist.

I also agree that the ray could be thicker and the arrow could be larger. An approach for the ray could be to add a border around the ray, to make it thicker without simply making it bigger. Although that reduces the space in the center which may not be desirable. And as mentioned using a fill colour for the arrow might be good. Maybe taking the background colour from the current logo could work (#e4e4e4)? Adding a border around the arrow might also look good. I messed around in GIMP and a 1px border using #b7b9b7 looked quite nice to my eyes along with the filled arrow.

A subtle blurred drop-shadow might also work but I'm not sure if drop-shadows are a good idea from an icon-design perspective since that's usually left to whatever draws the icons 😅

---

I am no graphic designer, please take all of what I've said with a grain of salt. Overall I think it's pretty neat! My personal preference is some kind of "accent" to accompany the flat colours, maybe a couple of very minor tweaks to the colours used.

My own icon tastes stem from the Papirus icon set (which isn't perfect, but that's along the lines of my framing) and that may be polluting factoring into my feedback here. This icon set and design language has somewhat fallen out of favour in recent years so maybe I'm not the best frame of reference for this reason either.

[SecularSteve]

Here's the revise based on your collective feedback. With only slight liberties taken.

proton-up-new_2.zip

For example, I did try including the wave, but it didn't look as good as I've imagined it. No matter where I've put it.
But I could try some more things depending on your newest opinion.

As last time, ZIP contains the SVG and PNG.

[sonic2kk]

I think this looks pretty great! The extra green shade was immediately noticeable to me even on my phone.

I wanted to mention something here, the border looks significantly bigger with the vector as opposed to the png. Maybe this is a quirk of how vectors work, or maybe it is from an alternative version where the border was larger?

Here is the png for comparison:

As for which I think looks nicer, I'm on the fence a little bit. Perhaps the border should and the inside should be bigger, but I don't really know. Maybe I slightly lean more towards the thinner border. Either or is probably fine, the main thing I wanted to mention here was what appears to be an inconsistency between the two.

---

I have a couple of questions that may have already been weighed up and that may not look good or be desirable. These aren't suggestions at all but more just questions.

• What about replacing the wave with an orange dot in the top center, perhaps with the same shading idea? Not the full size of the circle but kind of the same idea as the green center, so the same kind of padding around the sides. It might be too distracting and stick out too much. The orange and black contrast might be too distracting! The more I think about it the more I think it might be but I'd be interested in your thoughts!
• What about a slightly wider gap with the ray? It's almost a closed loop which looks fine but with a bit more breathing room I wonder how it might look? There was more before the border was added so the border I think ate up this room understandably, and maybe it would look too much like something is missing. Also, I'm not a designer, but I reckon this isn't a trivial change to make for something that may not even look much better.

Please don't feel like you have to make any changes off of this. These are extremely minor I almost didn't think they were worth mentioning.

---

The more I look at this logo the more I like it to be honest. I have such a thing for that little shading effect, I think it adds a ton and you got it pretty much how it was in my head. I like the white outline, I think it looks great on darker backgrounds and complements lighter backgrounds well. The dark grey is a really nice change as is the slightly lighter shade of green. It looks visually lighter but at first I thought it was because of the filled arrow.

@DavidoTek What do you think of this iteration? I think it looks pretty snazzy, to use the technical term 😄

[sonic2kk]

It's not something for this issue but on the subject of ProtonUp-Qt artwork: When ProtonUp-Qt is added to Steam as a Steam Shortcut, it is missing everything except the icon which we insert into shortcuts.vdf. It might be a good idea to eventually store more artwork such as the hero (banner image in library), logo (goes overtop the hero), boxart (vertical grid in main library view), and tenfoot (the horizontal grid that appears for most recently played games). This would make the entry in the Steam library a bit more colourful.

These are put into /path/to/steam/userdata/<userid>/config/grid where the files are named as follows. When you manually set artwork for a game via the Steam Client, it uses this naming convention as well. If you manually place artwork here, next time the Steam Client loads it will use this artwork.

• <appid>_hero.jpg - Hero image
• <appid>_logo.jpg - Logo image
• <appid>p.jpg - Boxart image
• <appid>.jpg - Tenfoot image

The file format can be JPG or PNG, the Steam Client won't let you set any other file formats but manually placing them may work; JPG is probably fine for us though and I just used it as an example

This would mean we would need to bundle such artwork ourselves in the project which could impact filesize by at least a few megabytes.

A user can always download artworkk from SteamGridDB manually though. Some tools even let you do this (like SteamTinkerLaunch 😉). Doing it automatically could be a nice quality of life thing though instead of the app being added as a grey box in the library.

---

Something that might be relevant for this PR though, if DavidoTek is fine with it, you could submit your art to SteamGridDB, so that users can optionally use this artwork on Steam when adding ProtonUp-Qt as a shortcut, or to make it more generally discoverable. There is some artwork submitted already it seems.

[SecularSteve]

Third time's the charm, and that was a great suggestion.

proton-up-new_3.zip

ZIP contains the SVG and PNG.

[sonic2kk]

No other comments from my side, that dot adds a lot I think! I will probably be using this as my icon for ProtonUp-Qt.

Thanks for all your hard work on this 😄

[DavidoTek]

This is great!!

This would mean we would need to bundle such artwork ourselves in the project which could impact filesize by at least a few megabytes.
you could submit your art to SteamGridDB
There is some artwork submitted already it seems.

I'm open to both solutions. I assume it can't be more than 10MB, but that would increase the package by almost 20% which is... a lot.

I actually wasn't aware of SteamGridDB and that there are already existing artworks. I think submitting an "official" one there and letting ProtonUp-Qt download it seems like a good solution.
Sidenote: If we do that, we should add it to the README Credits section which kinda acts like a "which services are we using"/data privacy section.

The outline looks a bit blocky in some scenarios but I don't think there's anything we can do about that, and any similar logo would suffer the same problem if it had the same kind of contrast I think

I think we need to export it with different resolutions, otherwise the app store will probably just downscale the highest resultion to the one required. Not sure which ones exactly we need.
I think all icons should be exported with the margins just like the PNG @SecularSteve provided. I think the margins are the same as GNOME's HIG https://gitlab.gnome.org/Teams/Design/HIG-app-icons/blob/master/template.svg

[sonic2kk]

As a follow-up, I am using this icon full-time now and it looks pretty great!

The outline looks a bit blocky in some scenarios but I don't think there's anything we can do about that, and any similar logo would suffer the same problem if it had the same kind of contrast I think (as it becomes more noticeable with the higher contrast).

I am quite happy indeed with this logo personally :-)