607 ratings
Guide to create your animated Steam artworks for free!
By Debjit_M
I know there are already several guides available on Steam that explains how to create your own animated artworks for Steam's Artwork Showcase. While all of them are great and useful, most of them requires you to have the knowledge of Adobe Photoshop and / or After Effects or more programs which are not free. I just wanted to create a simple guide on how to create free animated artworks for your Steam profile.
30
2
2
2
3
2
   
Award
Favorite
Favorited
Unfavorite
Using normal Profile Backgrounds
Main requirements:
  1. Chrome[www.google.com] or any other web browser that has the 'Inspect element' / 'Developer tools' or a similarly named feature which allows user to access the Console.

  2. Access to the websites Steam.design[steam.design],Giphy[giphy.com], EZGIF[ezgif.com], CloudConvert[cloudconvert.com]* and GIFSGIFS[gifgifs.com]*.

    Note: Giphy[giphy.com] now requires you to have an account on their website, in order to let you create and customize .gif files. You do get the option to delete your account.
    *Site is needed for Animated Profile Backgrounds (.webm) only, not for traditional .jpg.
Optional:
  1. Search for "Folder Options" in the Start Menu, click on the result that comes under Control Panel / Settings. Once it opens, click on the "View" tab and uncheck the checkbox "Hide extensions for known file types". Click "Apply" and then "OK" to close it. It's not required, but can prove really helpful. Especially to quickly differentiate animated and non-animated files.

  2. Open Steam client, go to Settings, then click on the "Interface" tab. Tick the checkbox "Display Steam URL address bar when available". Click "OK" to apply this setting. This is not required but could come in handy.

  3. Open this website[coolfont.org] in incognito mode or temporarily disable your preferred emoji browser extension(s) to be able to see the actual characters and not emoticon images. This is really not needed unless you're looking to go that extra step in making your artwork stand out.

In this guide, I'm assuming that you're using all of the above. Don't worry if you're not using those optional stuff as it won't make much difference at all. I tried to explain everything in detail. Please use the navigation panel on right accordingly and whenever required. Good luck!

Time to create your artwork!
Disclaimer: You will not get extremely high definition artwork(s) by using this guide / method.
Step 1 of 3: Obtaining the basic images
  • Go to Steam.design[steam.design] and sign in with your Steam account. Once the website finishes loading all of your Profile Backgrounds from your inventory, click on the one you'd like to animate / use in your artwork.
    Or
    If you don't want to do that, open Steam client, go to your Inventory and select the Profile Background that you'd like to animate / use in your artwork. Click on the "View Full Size" button. This should open up a link on your default web browser to show you the full sized image. But we're here just for the URL of that page. So copy the URL from the address bar of that page & paste it on Steam.design's[steam.design] "Paste a background URL here" section. Then click on the "Change BG" button.

  • Once you're done doing either of these steps, click the "Download Images" button and save the file in your computer. You can extract it using Windows or any third-party program of your choice.

Tip: You can choose the length of your middle and side artworks here. You can also choose to have your Profile Background as Screenshot Showcase or Workshop Showcase by clicking the "Customize Cropping" button. Do it if you're going to display either of them first and not your Artwork Showcase.

Note: Codes for Artwork Showcase, Workshop Showcase and Screenshot Showcase are available in this guide but obviously, I'm focusing on the Artwork Showcase. If you want, you can skip to the upload sections where you'll find the appropriate codes and instruction on how to use them.
Step 2 of 3: Animating and customizing
  • Go to Giphy's GIF Maker[giphy.com] and click "Choose Photo or GIF" (you need to be logged in for this). Navigate to the folder where you had extracted that .zip file in the previous step and select the file "Artwork_Middle.png". Once it's been uploaded, you'll find tons of possibilities to customize and animate that image. Take your time to familiarize yourself with everything the website has to offer. I would not recommend using the Filters tab because some of the filters can mess up the whole color of the image while others are generally not used for most Steam artworks but feel free to experiment. Once you're done customizing that image, click on the purple "Continue to Upload" button and then "Upload to GIPHY" button. Be patient as this can take some time. Once it's done, you'll find several links on the right side of your newly created .gif file. Click on the "Media" link and copy the "Social" URL to the clipboard.

  • Now open a new tab on your browser and right-click inside the address bar and select "Paste and go" then wait for the page to stop loading! After that, right-click on that animated image and select "Save image as..." then save it in your computer.

Tip: If you're feeling creative when customizing the artwork, search for specific gifs to include in your artwork. You can resize everything you're adding and put them in different locations of your artwork. You can also use special characters from Cool Fonts[coolfont.org] and can re-upload your animated file again if you still want to add something but don't want to redo all your work.
Step 3 of 3: Resizing the artwork
  • Now it's time to resize your .gif file to match Steam.design's[steam.design] downloaded file resolution! Go back to the folder where you had extracted that .zip file from step 1. Right-click on the non-animated version of the image and go to "Properties", click on the "Details" tab, you should be able to see the height & the width values of that image.
    Width values are usually 506 for the middle image and 100 for the side image. Unmodified height values are usually 808 or 928 for most Steam Profile Backgrounds. Yours is probably different, so check the exact values before moving on!

  • Now go to EZGIF[ezgif.com] and click on the "Choose File" button and select the newly animated .gif file from step 2, then click on the blue "Upload!" button. Or you can simply copy-paste that "Social" URL I talked about in the previous step. My instruction for saving that image in your computer was just to be safe from any losses. For instance, should the tab or the browser crashes during this procedure or if your PC gets a BSOD.

  • Enter the same values on width and height sections that you see on the appropriate image in that .zip file's extracted folder (read the first bit of step 3 again, if you get confused). For the resize method, select "ImageMagick + coalscale (undo optimizations)". You can change it later if the resized image size goes beyond Steam's upload limit which is 8 MB. Don't do anything in the "If the aspect ratio does not match" section, just make sure it's set to default: "Center and crop to fit". Now it's finally time to click that blue "Resize image!" button. Once the resizing is done, right-click on the new image and click on "Open image in new tab" then wait for that tab to finish loading, then save that image in your computer by using right-click on the animated (and now resized) image and clicking on "Save image as...".

Tip: If you're not satisfied with the quality of your artwork, you can go to EZGIF's Effects[ezgif.com] tab, then tick the checkbox "sharpen" and click the "Apply selected!" button. Unfortunately, you can't go much further than this to improve the quality of your artwork using any free methods that I know of.
Uploading your artwork to Steam!
  • First of all, you'll have to use a web browser to do this. This cannot be done from the Steam client. Open Chrome[www.google.com] and just click here to go to the uploading page.

  • Now give your artwork a title, fill in the description box if you want, keep the visibility setting "Public" and tick the checkbox that says "I certify that I created this artwork". Click on the "Choose File" button and select the animated and resized .gif file. Before doing anything else, copy this code:
$J('#image_width').val('1000');$J('#image_height').val('1');
If that code is not working for you, use this code (but never use both codes at the same time):
document.getElementsByName("image_width")[0].value = 1000;document.getElementsByName("image_height")[0].value = 1;
  • Now right-click anywhere on that page and click on "Inspect" then go to "Console" tab. Paste that copied code there & press Enter. Now you're ready to click that tempting "Save and Continue" button! You're now done creating and uploading the first half of your Steam artwork!
Just repeat these steps for the second half / right side artwork. Remember to provide correct values when resizing your .gif file! Check the troubleshooting section if you run into any problems.
Upload to Workshop or as Screenshots
  • Code(s) for uploading to Workshop Showcase:
    Click here to go the uploading page.
    If you want to see the small Steam Workshop icon in the corner, use this code:
    $J('[name="appid"]').val("766");$J('[name="consumer_app_id"]').val("766");$J('[name="visibility"]').val("0")
    If you want to see a transparent / invisible icon[/b] in the corner, use this code:
    $J('#ConsumerAppID').val(480),$J('[name=file_type]').val(0),$J('[name=visibility]').val(0);
Note: You don't have to fill in the description box or check any categories and you can safely ignore the page that asks for additional work afterwards. Always keep the height and width of your Workshop image same. For example: 512x512, 600x600, 777x777 etc. Workshop image upload size limit is currently 1 MB. To access all your Workshop images uploaded by using these methods, go to your profile and check the "Workshop items" or "Merchandise" section of your "Content" page.

  • Code(s) for uploading to Screenshot Showcase:
    Click here to go to the uploading page.
    If the height of the image is less than 506 pixels, use this code:
    $J('[name="file_type"]').val("5");
    If the height of the image is more than 506 pixels, use this code:
    $J('#image_width').val('1000');$J('#image_height').val('1');$J('[name="file_type"]').val("5");
Using Animated Profile Backgrounds
Please read this part first. This section is for new, Animated Profile Backgrounds that are available for use since the Steam Summer Sale 2020. Since some people are having trouble following the method mentioned below, I've created basic .gifs of most of the Animated Profile Backgrounds from Summer Sale 2020. Use this Google Drive link[drive.google.com] to download a .zip file which you can extract using Windows or any third-party program of your choice. If you choose to download that file, there's absolutely no need to do anything that is written below unless I haven't acquired a specific Animated Profile Background that you maybe using. Just make sure to use the proper code which can be found in the upload section. If you want to customize those .gifs before uploading, follow this guide from step 2. Good luck!

Assuming you didn't download that file. To use this method, you'll need a web-browser as this can't be done from the Steam client. Use this section only if you understand what you're doing.
  • The following Animated Profile Backgrounds "Chess", "Ink", "Jelly" and "Relaxing Lamps" goes beyond 20 MB when converting to .gif. If you are using any of these Animated Profile Backgrounds mentioned above and are here for creating artworks from them. Please send me a friend request and I'll try to send you the basic .gifs of it in chat (with proper size and quality). Remaining 10 Animated Profile Backgrounds should work perfectly if done right, by using this method below. If you need help, just leave a comment. Good luck!
  1. First of all, choose to edit your profile and pick your Animated Profile Background and apply it on your profile. After that visit your profile. Right-click anywhere on the animation (on either side) and select "Save video as..." and save it in your computer. The file should be of .webm format if you did everything correctly.

  2. Go to CloudConvert[cloudconvert.com] and click on "Select File", pick that .webm file, then click "Convert". Once you see the green "Download" button click on it to save the .gif file in your computer. If the file size goes beyond 20 MB, just temporarily add me as a friend and I'll try to send you the basic .gifs.

  3. Now go to GIFSGIFS[gifgifs.com] and click on "UPLOAD GIF", pick the .gif file that you just saved in your computer. Enter these values after the file is uploaded. "X" = 493, "Y" = 256, "WIDTH" = 506 and "HEIGHT" = 928. Click on "SET" and then click on "CROP" at the bottom. Right-click on the newly created image and select "Open image in new tab". Wait for that tab to finish loading and then just right-click on that animated .gif and save it in your computer by selecting "Save image as...".

  4. We are not done yet! To get the second half / right side portion, change those values to these: "X" = 1007, "Y" = 256, "WIDTH" = 100 and "HEIGHT" = 928. Now just repeat the above mentioned process to create and save that .gif file in your computer.
  • You're now done acquiring the basic images for your Animated Profile Background. If you want to upload and use them as they are, go to the upload section and don't forget to use the code. If you want to further customize these .gifs, just follow this guide from step 2 to customize the animation even more before uploading the artwork with the mentioned code.

Note: If you choose to follow from step 2, you'll find that some references are different such as image names and file paths / formats etc. Right now, I'm leaving the rest to people's common sense and intelligence. If you've managed to follow this section correctly, you'll most likely have no problem following the guide. However, please do ask for help if you need to.
Troubleshooting section
Here are some problems one could run into. Hopefully you won't have to use this section.

  • Artwork looks small or does not align with the Profile Background and it looks weird.
If the artwork doesn't fill the entire Artwork Showcase, you most likely did not properly enter and execute the code mentioned in the upload section. If the alignment is incorrect, you probably did something wrong when resizing the artwork. Make sure that you type in the exact same height and width values from the non-animated image that you got from Steam.design[steam.design] into EZGIF[ezgif.com] when resizing the artwork. Also, don't change the aspect ratio during this process, leave that as it is. Last but definitely not least, don't forget to use that code in your browser's console in the upload page. Feel free to contact me if you're still having trouble.

  • Need help with new Animated Profile Backgrounds, guide for that is confusing.
If you are having trouble acquiring the basic images and don't want to use this Google Drive link[drive.google.com] it'll be best if we talk in chat about that. I can try to walk you through the process with more detailed information or just send you the .gif file(s) that you need. If you're confused about the mention of step 2 and are having trouble customizing those images further, I suggest trying to animate a normal Profile Background first just for the experience. Temporarily forget about your Animated Profile Background. Once you've successfully learned how to animate a normal Profile Background, then move on to your Animated Profile Background - this time it should become easy. Customization, resizing and upload process for Animated Profile Backgrounds are the same, only the acquisition method of those basic .gifs is different.

  • Synchronization issues with Animated Profile Backgrounds.
Please understand that all Animated Profile Backgrounds are of .webm format and your artworks are of .gif format. I have tested and can confirm that .webm Animated Profile Background itself pauses automatically when that tab / window goes out of focus while .gif artworks stays on loop. This can cause everything to go out of sync the next time that tab / window comes in focus. It should also be noted that as with most artworks, the very first time you visit your profile after setting up the Artwork Showcase and Animated Profile Background, they will take a few moments to load and therefore, may not be in sync. Just reload your profile page to fix this browser cache issue. You probably won't even notice it if you have a fast internet connection.

  • I'm having trouble using the Artwork Showcase or can't find the artwork.
Your Steam account level must be at least level 10 for it to be eligible to have a Profile Showcase of any kind. You must keep your artwork's visibility "Public" in order for it to actually show up when you're selecting something to be used on your Artwork Showcase. Lastly, for some reasons, artworks don't seem to show up as full sized images if they are animated. You'll see some thin horizontal lines, click on one of those when you're setting up the Artwork Showcase, you'll see which artwork you've selected after clicking on those lines. From top left to right, it goes from new to old uploads.

  • Unsatisfying artwork quality, don't know what to do.
We can only go so far using free methods. Did you follow that tip on step 3? If yes, then unfortunately there's nothing more I can do to help. You might want to consider using paid methods if you're looking for HD artworks (which is not what this guide is for). Be very careful though, there are people that can create HD artworks for you but I can't vouch for anyone (not that it matters). I will never be responsible if you get scammed or worse! I'm really sorry to see that this guide didn't help you.

  • There's an error when trying to upload an artwork on Steam.
Sometimes it could just be a problem with Steam servers, wait a few minutes, reload the upload page and try again. If the file size is not less than 8 MB, you can fix this by using EZGIF's[ezgif.com] optimization tools to lower the quality of your .gif file. There are plenty of options to optimize your artwork there, so don't hesitate to try them out. Also, try to reduce the number of stuff you have added on your artwork from Giphy.[giphy.com] If the file size is less than 8 MB but you're still getting some kind of error(s), send me a friend request, I might be able to help.

  • I'm looking for alternatives to the websites listed in this guide.
Pretty sure there are other similar websites available to do these stuff but the ones I found don't stick their watermarks on your artwork, that's one of the reasons why I chose them. If you know of any websites that can do these stuff better than the ones on this guide and will not put any watermarks on the artworks while also being completely free to use, please share it in the comment section. Free software alternatives are welcome too as long as the process is less complicated than this current method. I'm open to suggestions but can't guarantee to modify this guide completely.


You can add me as a friend to get help but if you don't leave a comment on the guide first, your friend request might be ignored. Please speak good English. I can try to help but can't make any promises to fix the problem(s). You can always unfriend me afterwards - no hard feelings.
Credits / Thanks
Myself, for the guide. Guide logo was created using the help of CoolText[cooltext.com] and then was modified by me. So my thanks goes to the owner(s) of that website.
Owner(s) of: Steam.design, Giphy, EZGIF, Cool Fonts, Google, CloudConvert, GIFSGIFS & Valve.
Creator(s) of all the mentioned codes in this guide.
Maker(s) of the only .gif used in the guide that you can see below, I just found it on the Internet.
If I forgot to credit you, please leave a comment here and after that, get in touch with me.

This is my first guide on Steam. I apologize for wasting your time, if this guide didn't help you.
If this was helpful to you, please 'Rate Up' and / or 'Favorite' this guide. Thank you so much! 'Awards' will be appreciated but spend your Steam Points if you think this guide deserves them.

If you need help or want to report a broken / outdated link(s) or feature(s), leave a comment.
< >
159 Comments
ettiaaroni:) Jan 12 @ 7:27pm 
Hey, have a problem with the uploading as the images come out as one being artwork and the other as a screenshot :/
Jasmin Jan 10 @ 1:16pm 
Thank you for your help :Upvoter:
alex Jan 2 @ 10:18am 
Cheers :steamthumbsup:
Debjit_M  [author] Jan 2 @ 9:43am 
Hello, I had that Profile Background but thought it was a non-animated one. Anyway, basic .gifs of the Animated Profile Background "SEGA 60th Background" has just been added to the .zip file.
alex Jan 2 @ 8:25am 
Hi did you see my message about the SEGA 60th Anniversary Background?
Debjit_M  [author] Jan 2 @ 2:54am 
Happy to help.
Mataku Jan 2 @ 2:35am 
Hello there! I might need some help regarding the animated backgrounds (i sent you a friend request)
Yeyith Dec 30, 2020 @ 11:19am 
Thank you :winter2019happydog:
Debjit_M  [author] Dec 30, 2020 @ 10:50am 
Hey there, I have just added the basic .gifs of "Irid Novo" to the .zip file.
Yeyith Dec 30, 2020 @ 9:08am 
Pls add irid novo too