Upload Transparent Images to Steam

A mega-guide on how to upload transparent artwork, screenshot, workshop and guide images!

Intro

                 Before you start...

        Please, do not upload any content to Steam if you are not the creator of it,
            do not have a copyright for it nor do not have a permission to upload it!

            For more information, read this article on Content Rules...

       This guide is a continuation of my previous guide:

https://steamcommunity.com/sharedfiles/filedetails/?id=2174159512

  This new all-in-1 guide will teach you how to upload transparent images for
       Artwork / Screenshot / Workshop / Guide showcases!

         What should you know before following the guide?

             Your image must contain transparent elements!

         Modifying transparent images requires basic skills at hex editing.

          This method works for all supported file types (except for JPG)
                  independently of size and frame count!

          This trick also allows you to upload long workshop/guide images!

Modify image data (GIF/JPEG)

     Please follow these steps if you're uploading a transparent GIF.

                   Open this site: https://hexed.it/

          Click "Open file" and select your image you want to modify.



                Scroll to the very bottom of the page.



             Change the last byte of your file to 21 or 2C, like this:



              Click "Export" and save your modified file.

Modify image data (PNG/APNG)

     The method described in the previous section can also be applied to PNG images.
  However, the image will not be displayed properly in some web browsers including Firefox.
               This fix allows you to avoid this problem.

              DISCLAIMER

         This trick will increase your file size by 1 byte.
    But this is a really small amount so you don't have to care about it much.

    Please follow these steps if you're uploading a transparent PNG.

                   Open this site: https://hexed.it/

          Click "Open file" and select your image you want to modify.



                Scroll to the very bottom of the page.



               Copy the following sequence of bytes.

             01 49 45 4E 44 00 D1 1A 4F E1

         Select the first "00" byte tracing from the end and press Ctrl+V.
    Choose "Overwrite the bytes at the cursor position" and "Hexadecimal Values" options
                   and click the "Apply" button.



              Click "Export" and save your modified file.

Upload Transparent Artwork

     Please follow these steps if you want to upload your image
              as transparent artwork.

          Open this link with a web browser (Chrome, Firefox, etc.):
          https://steamcommunity.com/sharedfiles/edititem/767/3/

     Give your artwork a title and select your transparent image as the artwork file.

               Press F12 to open the developer console.

             Click the "Console" tab and paste the following code:

                  $J('#image_width').val(1000),$J('#image_height').val(1);

                  Press ENTER to apply the code.

          Tick the "I certify that I created this artwork" checkbox.

          Click the "Save and Continue" button to upload your artwork.

Upload Transparent Screenshot

     Please follow these steps if you want to upload your image
              as transparent screenshot.

          Open this link with a web browser (Chrome, Firefox, etc.):
          https://steamcommunity.com/sharedfiles/edititem/767/3/

     Give your screenshot a title and select your transparent image as the artwork file.

               Press F12 to open the developer console.

             Click the "Console" tab and paste the following code:

   $J('#image_width').val(1000),$J('#image_height').val(1),$J('[name=file_type]').val(5);

                  Press ENTER to apply the code.

          Tick the "I certify that I created this artwork" checkbox.

        Click the "Save and Continue" button to upload your screenshot.

Upload Transparent Workshop

     Please follow these steps if you want to upload your image
              as transparent workshop.

          Open this link with a web browser (Chrome, Firefox, etc.):
          https://steamcommunity.com/sharedfiles/edititem/767/3/

     Give your workshop a title and select your transparent image as the artwork file.

               Press F12 to open the developer console.

             Click the "Console" tab and paste the following code:

$J('[name=consumer_app_id]').val(480),$J('[name=file_type]').val(0),$J('[name=visibility]').val(0);

                  Press ENTER to apply the code.

          Tick the "I certify that I created this artwork" checkbox.

         Click the "Save and Continue" button to upload your workshop.

Upload Transparent Guide

     Please follow these steps if you want to upload your image
                as transparent guide.

                      Open this link:
         https://steamcommunity.com/sharedfiles/editguide/?appid=480

     Give your guide a title and select your transparent image as the branding image.

       Tick the "I am the original creator of this guide, or I have legal authorization
            from the guide's creator to post this." checkbox.

          Click the "Save and Continue" button to upload your guide.

Outro

          Honorable Examples

                   Written by David Macintosh

https://steamcommunity.com/sharedfiles/filedetails/?id=2187387847 https://steamcommunity.com/sharedfiles/filedetails/?id=2216769769 https://steamcommunity.com/sharedfiles/filedetails/?id=2164230951

   

[Caedes]

Update: I was able to find a solution to the problem. Simply switch from the illustration gallery to the favorites gallery, and then there will be no black bar.

[Caedes]

It was worth trying, of course, but the GIF still couldn't be centered and there was a black stripe, which is annoying. I don't think I did anything wrong, it's just that either the instructions are outdated or it wasn't relevant for GIFs in general, judging by the comments. Well, I hope someone can explain it to me.

[DipyBrick]

When doing the gif it stops the loop, any fixes?

[Marionette]

Am i doing something wrong ? Background is still black...

[OscarknightSFM]

ME HAS 0 BRAINNNN

[OscarknightSFM]

IT SHOULDN'T BE THIS COMPLICATED

[OscarknightSFM]

WHAT THE FUCK IS THIS

[Ale]

The background still black ;c

[᲼᲼᲼᲼᲼᲼᲼᲼᲼]

The guide works perfectly with the pngs, but when I do the gif method and create the guide, it isnt displayed properly and its not centered, anyone knows how to fix that? ty c:

[ᗷᑌᒪᗩᗰᗩTᗩRI]

@𝓿𝟏𝓬𝓽𝓸𝓻 "Shits fucking ass and doesnt work"

What a fine tongue you're running there. I wouldn't even touch what you take in yer reekin' mouth. Anyway, ever wonder why ye're the only one for whom things ‘don't work’ when they work for all the others? Can ye read, or do ye have at least a dumb AI that can, or a Da who can read texts to ye? Like, quote:

"What should you know before following the guide?

              Your image must contain transparent elements!"