Steam

Steam

1,090 ratings
Upload Transparent Images to Steam
By David Macintosh and 2 collaborators
A mega-guide on how to upload transparent artwork, screenshot, workshop and guide images!




3
6
2
2
   
Award
Favorite
Favorited
Unfavorite
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://gtm.you1.cn/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://gtm.you1.cn/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://gtm.you1.cn/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://gtm.you1.cn/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://gtm.you1.cn/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://gtm.you1.cn/sharedfiles/filedetails/?id=2187387847 https://gtm.you1.cn/sharedfiles/filedetails/?id=2216769769 https://gtm.you1.cn/sharedfiles/filedetails/?id=2164230951


   
79 Comments
Piazano󠁳 ⁧⁧[G59] 26 Aug @ 10:32am 
Either I'm doing something wrong, or this doesn't work anymore.
When attempting to modify image data, the Jpeg change the end to 21 fix corrupts the file, and "Hexadecimals Value" isn't an option in the dropdown for the png fix. Any independent troubleshooting gives me a corrupt file.
LIZERGIN 21 Aug @ 5:46pm 
˚∧_∧  + —̳͟͞͞💗
( •‿• )つ —̳͟͞͞ 💗 —̳͟͞͞💗 +
(つ  < —̳͟͞͞💗
|  _つ + —̳͟͞͞💗 —̳͟͞͞💗 ˚
`し´i wish you have a nice weeknd!
text art here! Like and Fav :heart13:
⊹ ⁧⁧⁧⁧ape67 19 Aug @ 7:03pm 
.digital.eye.candy.
Blank 18 Jun @ 11:56pm 
[h1] 5MB Limit Fix [/h1]

In regards to the new upload limit of 5MB.

Best way to fix is, try to get a file that is as close to 5 mb as possible, without losing quality of the image and animation.

Open the GIF in photoshop (7-day free trial), from there depending on your GIF, you could either export it directly and limiting the number of colors as to not have it look bad, but to get it just under that 5 MB limit, or if you can and have the patience you can do some "Control Data", that means, going thru each frame of the GIf and deleting the doubled ones that would be usless, and leaving just one from all of them, and making the duration of that one frame to be as long as all the others deleted, that way you can save a lot of file size, AND not compromise image, color and animation quality.

A helpful youtube video explaining all this, aswell as exporting and color limiting is [ https://www.youtube.com/watch?v=EX0I6t0t4H8&t=145s ] Here [/url] .
lightwo 27 Mar @ 1:37am 
Can't do that, it's been the file size limit since last year or so.
Pepil 26 Mar @ 8:51pm 
It says that i can only upload files up to 5mb. does anyone knows how to fix it?
Demyzix 16 Mar @ 9:50pm 
can't get the artwork nor screenshot one to work the way I was hoping it would. I got the image to be transparent but now there is a background behind it so it kinda defeats the purpose.
Mento 13 Feb @ 11:27am 
still works thx:Emily3_Like:
crypt 18 Jan @ 8:03pm 
no longer working :(
𝒶𝓉𝓇𝑜𝓅𝒶 7 Jan @ 3:46am 
𝓋𝑒𝓇𝓎 𝒾𝓃𝒻𝑜𝓇𝓂𝒶𝓉𝒾𝓋𝑒, 𝒶𝓌𝒶𝓇𝒹𝑒𝒹 :rainbowSmile: