How to get high quality offical art for your non-Steam games

[The OmnIsaiah]

TLDR: Use inspect element on a Game's official website to get official artwork.

The new Steam library layout has a lot of options for custom artwork. If like me, you like to use Steam to launch all your games, you'll find that they don't look very nice without the fancy logos and artwork. Luckily, we can add custom artwork to any of these locations by hovering over the artless element and right-clicking, which should have an option to "Set Custom Artwork" (This also works for games that already have official art if you really want to customize the look of your Steam library).

I'm trying to make this really easy to follow, so apologies if some parts seem really basic or self explanatory, but here are some tips for getting good images to use.

There are 4 different pieces of artwork for each game (Recommended image sizes for 1080p):

• A ~2x3 box art for the tiled home view (≥175 x 261 px)
  
• A ~2x1 banner for your most recently played game on a "Recent Games" shelf (≥369 x 171 px) This image is also used when you hover your mouse over a game in your steam library.
  
• A ~5x1 large banner for the game's detail page (≥1632 x 320 px)
  
• A variable sized logo

You don't have to use art that is in the ratios here, as Steam will automatically crop the images to fit the correct aspect ratio. The files do have to be in JPG or PNG format however.

If you're not too picky, it is pretty easy to find art for whatever game you want by using google images. You can even specify the resolutions you're looking for. However, if you insist on using only 100% official artwork by the game's publisher/developer, there are a few tricks you can use, but you may not be able to find stuff for all four pieces of artwork.

I've used this strategy to get artwork for Apex Legends and Battlefield 1 (I'll link to the images I used if you want them for these games) which are both EA games, but I'm confident it'll work for others that aren't available on Steam. Keep in mind, this may not work for small indie games that don't have their own website.

When you click the option in Steam to set artwork, it will bring up a File Explorer window that lets you select a file. One handy feature about this window, is that the textbox where you input the filename accepts URLs, so you don't even have to save anything to your downloads folder or make a special folder for all your custom Steam art as long as you have a URL linking directly to the image (the URL will end with something like <name-of-img-file>.jpg or <name-of-img-file>.png).

Start by going to the game's official website or the publisher's website. For the logo, a good place to start is the home page. If they have a large logo on the page, you can right-click and should get a prompt to "copy image address"; if you don't get this, you can click "inspect element" which will show the HTML code for the page. In here, there should be a direct link to the image. If you're having a hard time finding it, hovering over the code should highlight parts of the page. Make sure just the image is highlighted and expand sections of the code by clicking the little arrows to the left of each line. Logos are usually formatted as PNG files, but may be formatted as an SVG file, which will require you to convert it to a PNG to maintain any transparency. Luckily there are many good online resources to do this for you such as this site[svgtopng.com].

For other artwork, you can just find images on the site and use the same method. Many games' sites will have a "Media" tab with high-quality art and/or screenshots that you can use. Large companies like Activision/Blizzard[blizzard.gamespress.com] or EA should have a dedicated press site with all sorts of official logos and artwork. You can check if your game publisher has one of these by scrolling to the bottom of their site and looking for a "Press" option.

Not much more to it than that. Let me know if you find this helpful or have any other tips or questions.

Some high quality art I found:

• Apex Legends:
  
  • Key art with logo
    
  • Key art
    
  • S3 key art
    
  • Logo SVG
    
• Battlefield 1:
  
  • Key Art
    
• Star Wars Battlefront II:
  
  • Key art
    

All these EA key arts can be found by inspecting elements on this page. The art is scaled down so you may have to edit the URL to get the full sized version.

[HighSquid]

Hey dude I really appreciate your guide for these artworks!
But I have one request for you, do you know how we can change the "hover with mouse" picture in library for non-Steam games?

https://imgur.com/gallery/H0Zf2gW

[The OmnIsaiah]

Originally posted by Skuidius:

Hey dude I really appreciate your guide for these artworks!
But I have one request for you, do you know how we can change the "hover with mouse" picture in library for non-Steam games?

https://imgur.com/gallery/H0Zf2gW

I believe that is the 2x1 banner I mentioned so to change it, you'll have to play the game and then look in the "recently played" in your library (you may have to make this shelf if you don't have it, just click the "add a shelf" button and select "recent games" from the drop down menu). If the game with the artwork you're trying to change is your most recently played game, it will have a bigger artwork in its card. Just right click the bigger card and change the art from there. I believe that should also change the art whenever you hover over the game in your library.

I don't know how to do the slideshow thing that some games have on hover though.

[HighSquid]

First, thank you for your quick answer!
I searched a little and found a reddit thread telling me the same thing, which didn't work. I mean that it works in recent games but doesn't apply for the hovering image.
Am I doing something wrong or did it change with steam updates?

https://www.reddit.com/r/Steam/comments/gjgk8s/image_previews_when_hovering_over_game_in_library/

[The OmnIsaiah]

Originally posted by Skuidius:

First, thank you for your quick answer!
I searched a little and found a reddit thread telling me the same thing, which didn't work. Am I doing something wrong or did it change with steam updates?

https://www.reddit.com/r/Steam/comments/gjgk8s/image_previews_when_hovering_over_game_in_library/

It might have changed recently. You could try taking some screenshots in the game and see if that works. Otherwise I'd have to mess around with it. There may be a folder in your Steam installation ("C:\Program Files (x86)\Steam" on Windows) for those images, but I don't know what it would be.

[HighSquid]

Okay, thank you again. I don't know what I did wrong but it works now perfectly, it appears also in "favorites" which is what I wanted. :)

I will look for that folder because I would like to display more than one picture. If you see what I want, for the official Steam games, when you hover with your mouse it will display a different image every time, and I would like to display different pictures for my non-Steam games too.
I imagine that you must place these different pictures in a folder corresponding to each game... I'll let you know if I can!

[Naoko]

Ahh thanks for this