How To Make Animated Steam Artwork Free

Using

normal

Profile Backgrounds

Main requirements:

Chrome[www.google.com] or any other web browser that has the 'Inspect chemical element' / 'Developer tools' or a similarly named feature which allows user to access the Console.
Access to the websites: Steam.design[steam.pattern], EZGIF[ezgif.com]. Giphy[giphy.com] and / or PhotoMosh[photomosh.com].
Note: Giphy[giphy.com] now requires you to accept an account on their website, in order to let you lot create and customize .gif files. Y'all practice get the choice to delete your business relationship.

Optional:

Search for " Binder Options " in the Start Menu, click on the result that comes under Command Panel / Settings. In one case information technology opens, click on the "View" tab and uncheck the checkbox " Hibernate extensions for known file types ". Click "Apply" and and then "OK" to shut it. It'southward not required, but can evidence really helpful. Especially to quickly differentiate animated and non-animated files.
Open up Steam client, go to Settings, then click on the "Interface" tab. Tick the checkbox " Display Steam URL accost bar when bachelor ". Click "OK" to apply this setting. This is not required just could come in handy.
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 lot're using all of the above. Don't worry if you lot're not using those optional stuff as it won't make much divergence at all. I tried to explain everything in particular. Please employ the navigation panel on right accordingly and

whenever required

. Proficient luck!

Time to create your artwork!

Disclaimer: Y'all may not get extremely high definition artwork(s) by using this guide / method.

Pace 1 of 3: Obtaining the basic images

Become 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 similar to animate / use in your artwork.
Or
If you don't want to do that, open up Steam client, go to your Inventory and select the Profile Background that you'd similar to breathing / use in your artwork. Click on the " View Full Size " button. This should open upwardly a link on your default web browser to bear witness you the full sized image. But we're here just for the URL of that page. And so copy the URL from the address bar of that page & paste it on Steam.blueprint'southward[steam.design] " Paste a background URL here " section.
Once you're done doing either of these steps, click the " Download ZIP " button and save the file in your reckoner. You can extract it using Windows or whatsoever third-party program of your choice.

Tip: By using Steam.design's[old.steam.design] quondam site, you can cull the length of your middle and side artworks here. You can likewise cull to have your Profile Background as Screenshot Showcase or Workshop Showcase by clicking the " Customize Cropping " button. Exercise it if yous're going to display either of them kickoff and not your Artwork Showcase.

Annotation: Codes for Artwork Showcase, Featured Artwork Showcase, Workshop Showcase and Screenshot Showcase are available in this guide but obviously, I'grand focusing on the Artwork Showcase ,

not

on the Featured Artwork Showcase. If you desire, you can skip to the upload sections where you'll observe the appropriate codes and didactics on how to use them.

Step 2 of 3: Animating and customizing

Go to Giphy'southward GIF Maker[giphy.com] and click "Cull File" under "GIF" (you need to be logged in for this). Navigate to the binder where you had extracted that .zilch file in the previous step and select the file " Artwork_Middle.png ". Once information technology'due south been uploaded, you'll find tons of possibilities to customize and animate that image. Have 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 colour of the image while others are mostly not used for most Steam artworks but feel free to experiment. Once you're done customizing that paradigm, click on the regal " Continue to Upload " button and so " Upload to GIPHY " button. Be patient equally this can have some time. Once it'due south done, yous'll observe several links on the right side of your newly created .gif file. Click on the " Share " link and copy the " Original " URL to the clipboard.
At present open up a new tab on your browser and right-click inside the address bar and select "Paste and go" then expect 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 y'all're feeling creative when customizing the artwork, search for specific .gifdue south to include in your artwork. You can resize everything you lot're adding and put them in different locations of your artwork. Yous can too utilize special characters from Absurd Fonts[coolfont.org] and can re-upload your animated file again if you still want to add together something but don't want to redo all your work. Last merely definitely not to the lowest degree, you can take your .gifs to PhotoMosh[photomosh.com] to add together various filters simply this can mess up your artwork'due south duration which may lead to synchronization bug.

Note: If you employ PhotoMosh[photomosh.com] to customize your artwork(s), and so you'll most likely also have to reduce their file size to below eight MB using EZGIF'south[ezgif.com] Optimization tools along with resizing tool which is mentioned on the next step.

Pace 3 of 3: Resizing the artwork

At present it's time to resize your .gif file to match Steam.design's[steam.design] downloaded file resolution! Go back to the binder where you had extracted that .zip file from step 1. Right-click on the non-blithe version of the image and get to "Properties", click on the "Details" tab, you should be able to see the elevation & 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 nearly Steam Profile Groundworks. Yours is probably different, so check the exact values earlier moving on!
Now go to EZGIF[ezgif.com] and click on the " Choose File " button and select the newly blithe .gif file from step two, and so click on the blue " Upload! " push button. Or yous tin can simply copy-paste that " Original " URL I talked almost in the previous pace. My instruction for saving that image in your computer was merely to be rubber from any losses. For example, should the tab or the browser crashes during this process or if your PC gets a BSOD.
Enter the same values on width and acme sections that you see on the appropriate image in that .zip file'southward extracted folder (read the first bit of pace 3 once again, if y'all go confused). For the resize method, select " ImageMagick + coalscale (disengage optimizations) ". You tin modify information technology later if the resized paradigm size goes beyond Steam's upload limit which is 8 MB. Don't practice anything in the " If the attribute ratio does non match " department, only make certain information technology'south set to default: " Middle and crop to fit ". Now information technology'south finally time to click that bluish " Resize prototype! " push button. In one case the resizing is washed, right-click on the new image and click on "Open epitome in new tab" and so look for that tab to finish loading, and then save that prototype in your computer by using right-click on the animated (and at present resized) image and clicking on "Relieve image as...".

Tip: If you're not satisfied with the quality of your artwork, you tin can go to EZGIF's[ezgif.com] Effects tab, and 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 whatever costless methods that I know of.

Uploading your artwork to Steam !

Kickoff of all, you'll take to use a spider web browser to do this. This cannot be washed from the Steam client. Open Chrome[www.google.com] and merely click here to become to the uploading page.
Now give your artwork a title, fill in the description box if you want, go along 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. Earlier doing annihilation else, copy this lawmaking:

$J('#image_width').val('k');$J('#image_height').val('i');

If that lawmaking is non working for you, use this code (but never utilise 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 "Audit" then go to "Console" tab. Paste that copied code there & press Enter. Now you're prepare to click that tempting " Salve and Continue " button! You're now washed creating and uploading the first half of your Steam artwork!

Just repeat these steps for the 2d one-half / right side artwork. Remember to provide right values when resizing your .gif file! Check the troubleshooting section if you run into whatsoever problems.

Tip: If you desire to go out your artwork name blank, copy this character "⠀" and use that as title.

Upload to

Workshop

or as

Screenshot

Code(due south) for uploading to Workshop Showcase:
If you want to see the small Steam Workshop icon in the corner, utilise this lawmaking on this page:
$J('[name="appid"]').val("766");$J('[name="consumer_app_id"]').val("766");$J('[proper noun="visibility"]').val("0")
If you desire to see a transparent / invisible icon in the corner, utilize this code on this page:
$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 cheque whatsoever categories and you can safely ignore the page that asks for additional work afterwards. Try to go along the height and width of your Workshop image same. For example: 512x512, 600x600, 777x777 etc. Workshop

image upload

size limit is currently one MB merely you can use the 2nd upload method to

featherbed

that. To access all your Workshop images uploaded by using these methods, get to your profile and bank 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 superlative of the image is less than 506 pixels, utilise this code:
$J('[name="file_type"]').val("five");
If the tiptop of the paradigm is more than 506 pixels, use this code:
$J('#image_width').val('1000');$J('#image_height').val('1');$J('[proper name="file_type"]').val("5");

Using Animated Profile Backgrounds

Disclaimer: Yous may non become extremely high definition artwork(southward) past using this guide / method.

Assuming y'all didn't download that file. To use this method, you'll need a spider web-browser as this can't be done from the Steam client. Use this section only if you understand what you're doing.

Some Animated Contour Background's size go beyond 20 MB when converting to .gif. If y'all are using any of those Animated Profile Backgrounds and are here for creating artworks from them. Please refer to the software alternative section. All other Animated Profile Backgrounds should work perfectly if washed correct, by using this method below. If you lot need help, just leave a comment. Skillful luck!

First of all, choose to edit your profile and pick your Blithe Profile Background and employ information technology on your profile. Afterwards that visit your profile. Right-click anywhere on the animation (on either side) and select "Save video as..." and salve it in your computer. The file should be of .webm format if you did everything correctly.
Go to CloudConvert[cloudconvert.com] and click on " Select File ", pick that .webm file, and so click " Convert ". In one case you lot see the greenish " Download " button click on it to save the .gif file in your computer. If the file size goes beyond twenty MB, refer to the software alternative department or the troubleshooting department. If you still need help, leave a comment. You may have to temporarily add together me equally a friend and I'll try to transport you the basic .gifsouth.
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 later the file is uploaded. "X" = 493, "Y" = 256, "WIDTH" = 506 and "Acme" = 928. Click on " SET " and and so click on " Crop " at the lesser. Right-click on the newly created image and select "Open up image in new tab". Await for that tab to cease loading and then merely right-click on that animated .gif and salvage it in your figurer past selecting "Save image as...".
Nosotros are not done yet! To get the 2d half / right side portion, alter those values to these: "X" = 1007, "Y" = 256, "WIDTH" = 100 and "HEIGHT" = 928. At present simply repeat the higher up mentioned process to create and save that .gif file in your figurer.

You're at present washed acquiring the basic images for your Animated Contour Background. If you desire 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 .gifdue south, just follow this guide from pace 2 to customize the animation even more than earlier uploading the artwork with the mentioned code.

Note: If you cull to follow from step ii, you'll find that some references are different such every bit image names and file paths / formats etc. Correct now, I'm leaving the rest to people's mutual sense and intelligence. If you've managed to follow this section correctly, you'll most likely have no problem following the guide. However, delight practise ask for help if you need to.

The Featured Artwork Showcase

Disclaimer: You may non become extremely high definition artwork(s) by using this guide / method.

To create artworks for your Featured Artwork Showcase, merely practice the following:

Follow step 1 and obtain the basic images for your Profile Background, in that location should be a file chosen "Artwork_Featured.png" in the extracted folder.
Follow step ii and customize that image using Giphy'south GIF Maker[giphy.com] and / or PhotoMosh[photomosh.com] until you lot're fully satisfied with your work.
Go to the artwork upload section of this guide and upload your artwork to Steam. Lawmaking for uploading to Artwork Showcase and Featured Artwork Showcase are the same.

Featured Artwork Showcase and Animated Profile Backgroundsouthward:

Read and understand the nuts of obtaining the .gifs from Animated Profile Groundworks from the section higher up.
On GIFSGIFS[gifgifs.com], upload your .gif and put these values in their appropriate boxes: "X" = 493, "Y" = 256, "WIDTH" = 630 and "HEIGHT" = 928. Click on "Gear up" and so click on "Ingather" at the bottom, you should now have your basic .gif, set to be used for Featured Artwork Showcase.
Get to the artwork upload section of this guide and upload your artwork to Steam. Lawmaking for uploading to Artwork Showcase and Featured Artwork Showcase are the same.

Complimentary

software alternative - exercise information technology yourself

This is simply for Animated Profile Backgrounds,

non

for traditional .jpg Profile Backgroundsouthward. I'g bold you have a piffling more than basic computer skills. Don't worry too much almost information technology, if y'all get stuck, just inquire for aid in the comment section. The software we'll be using is open-source.

Disclaimer: Y'all may not get extremely loftier definition artwork(s) past using this guide / method.

Download Avidemux from their official website[avidemux.sourceforge.net] & install information technology on your PC.
Whichever Animated Profile Background you are going for, set it equally your current Steam groundwork. Subsequently that, visit your profile, Right-click on either side of your profile (on the Blithe Profile Groundwork), and click on "Relieve video every bit..." then save the .webm file on your PC.
Open Avidemux, click on "Open Video" and select that .webm file which you just saved on your PC. Check the "Video Output", click on "Copy" to open a drop-down menu and click on "HEVC (x265)".
Now click on "Filters", then double-click on "Crop". Yous should now see a new window where should be four boxes with "0" value, "Left", "Right", "Tiptop" and "Bottom".
Enter the values for your desired showcase which tin can be found below and press "OK", and so "Close". Now click on "Save Video" and save information technology on your PC.

Values for the .gif for Featured Artwork Showcase are: "Left" = 493, "Correct" = 797, "Pinnacle" = 256 and "Lesser" = 0.

Values for the middle (left side) .gif for Artwork

Screenshot Showcases are: "Left" = 493, "Right" = 921, "Top" = 256 and "Bottom" = 0.

Values for the slim (right side) .gif for Artwork

Screenshot Showcases are: "Left" = 1007, "Right" = 813, "Top" = 256 and "Lesser" = 0.

The software part is now over. It's time to go your

final

base of operations .gif.

Go to EZGIF'due south[ezgif.com] Video to GIF converter tab, click "Choose File" and select that cropped output file from Avidemux earlier clicking on "Upload video!"
Do non mess with the times. For "Size", select "Original (up to 800px)". For "Frame rate (FPS)", select "20 (max fifteen seconds)". Brand sure that the "Method" is set to "FFMPEG". Y'all can now click on "Convert to GIF!" button.
Whorl downwards a bit and click on "optimize" which should open a new page. Utilize the "Lossy GIF" optimization method and increase the "Pinch level" all the style to 200. Now click on "Optimize GIF!"
Wait a moment for your .gif to fully load. Right-click on the newly appeared animated .gif and click on "Open up image in new tab". Go to that tab, Correct-click on that blitheness and relieve your final base .gif past clicking on "Save image as...".

Note: If you're planning on uploading your .gif without further customization from Giphy[giphy.com] and / or PhotoMosh[photomosh.com], you can play around with the lossy slider to increase the quality of your .gif. In that example, I recommend a value which is just enough to get your .gif'southward size to below viii MB.

Tip: If the lossy slider can't bring down your .gif's size to

less than

8 MB, try irresolute the optimization method to "Optimize Transparency" and use the Fuzz slider. Practise information technology with circumspection and try to keep the value betwixt ane-10. Use the same value for the other half / right side .gif to avoid any issues. Synchronization bug may go noticeable the higher the Fuzz value gets.

Troubleshooting section

Here are some problems one could see. Hopefully you won't take 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 lot almost likely did not properly enter and execute the code mentioned in the upload department. If the alignment is wrong, you probably did something wrong when resizing the artwork. Make sure that you type in the

verbal same

height and width values from the non-animated image that you lot got from Steam.design[steam.design] into EZGIF[ezgif.com] when resizing the artwork. Also, don't alter the attribute ratio during this process, get out that as information technology is. Concluding merely definitely not to the lowest degree, apply the "Original Size" option when y'all're editing your Steam profile, practise

not

use the "Total Screen" option. Feel gratis to contact me if you're however having trouble. Delight try to leave a annotate on the guide first though.

Need help with new Animated Profile Groundworks, guide for that is disruptive.

If y'all are having trouble acquiring the basic epitome, it'll be all-time if we talk in conversation about that. I tin can try to walk you through the process with more detailed information or just ship you the .gif file(s) that you lot need. If y'all'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 starting time but for the experience. Temporarily forget about your Animated Profile Background. Once yous've successfully learned how to breathing a

normal

Contour Background, then move on to your Animated Profile Groundwork - this time it should get easy. Customization, resizing and upload process for Blithe Profile Groundworksouth are the same, simply the acquisition method of those bones .gifs is different.

The twenty MB problem and other quality issues with Blithe Profile Backgroundsouthward.

Information technology has come to my attending that a lot of people are having problem gathering the basic .gifs of their Animated Profile Background considering after the conversion of the .webm file, the .gif file becomes larger than 20 MB in size. In cases similar this, I urge yous to cheque tout the software alternative section where you should be able to fix the trouble with a footling time and effort. If all else fail, go out a comment on the guide and I'll go to work on your Blithe Profile Background as presently as I can. Y'all may also accept to add me on Steam for the procedure. Y'all can always unfriend me later.

Synchronization bug with Animated Profile Groundworksouthward.

Please empathise that all Animated Contour Groundworksouth are of .webm format and your artworks are of .gif format. I take tested and can confirm that .webm Blithe Profile Groundwork 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 adjacent fourth dimension that tab / window comes in focus. It should also be noted that as with well-nigh artworks, the very commencement time y'all visit your profile after setting upward the Artwork Showcase and Blithe Contour Background, they will have a few moments to load and therefore, may not be in sync. Just reload your profile page to set up this browser enshroud issue. You probably won't fifty-fifty notice it if y'all have a fast cyberspace connection.

I'chiliad having trouble using the Artwork Showcase or tin't find the artwork.

Your Steam account level must exist at least level x for it to exist eligible to have a Contour Showcase of any kind. You must keep your artwork's visibility "Public" in order for it to actually show upwardly when you're selecting something to be used on your Artwork Showcase. Lastly, for some reasons, artworks don't seem to show upwardly equally full sized images if they are animated. You'll come across some thin horizontal lines, click on ane of those when you're setting up the Artwork Showcase, y'all'll see which artwork you've selected subsequently clicking on those lines. From top left to right, it goes from new to old uploads.

Unsatisfying artwork quality, don't know what to practise.

We can only go so far using free methods. Did you follow that tip on step 3? If yeah, then unfortunately there's zip more I can do to help. Yous 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, in that location are people that can create HD artworks for you simply I can't vouch for anyone (non that information technology matters). I volition never be responsible if y'all get scammed or worse! I'g actually sorry to run into that this guide didn't assist y'all.

There'due south an error when trying to upload an artwork on Steam.

Sometimes information technology could just exist a problem with Steam servers, wait a few minutes, reload the upload folio and try once again. If the file size is not less than 8 MB, you can set up this past using EZGIF'southward[ezgif.com] optimization tools to lower the quality of your .gif file. There are plenty of options to optimize your artwork at that place, then don't hesitate to effort them out. Also, effort to reduce the number of stuff yous accept added on your artwork from Giphy.[giphy.com] If the file size is less than eight MB but you're still getting some kind of error(s), ship me a friend request, I might be able to help.

I'm looking for alternatives to the websites listed in this guide.

Pretty certain there are other similar websites bachelor to practice these stuff but the ones I constitute don't stick their watermarks on your artwork, that'due south one of the reasons why I chose them. If you know of any websites that tin can do these stuff better than the ones on this guide and will not put any watermarks on the artworks while as well being completely free to use, please share it in the comment department. Gratis software alternatives are welcome besides as long as the process is

less complicated

than this current method. I'm open up to suggestions but can't guarantee to modify this guide completely.

You can add me as a friend to go help just if y'all don't leave a comment on the guide showtime, your friend request might exist ignored. Please speak practiced English language. I can try to help but tin't make any promises to set the problem(s). You tin e'er unfriend me after - no hard feelings.

Credits / Thanks

Myself , for the guide. Guide logo was created using the help of CoolText[cooltext.com] and so was modified by me. So my thank you goes to the possessor(s) of that website.
Owner(due south) of: Steam.design, Giphy, PhotoMosh, EZGIF, Cool Fonts, Chrome, Avidemux, CloudConvert, GIFSGIFS, CoolText and Steam.
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 Cyberspace.
If I forgot to credit you, please leave a comment here and subsequently that, make it touch with me.

This is my first guide on Steam. I apologize for wasting your time, if this guide didn't help y'all.

If this was

helpful

to yous, please 'Rate Up' and / or 'Favorite' this guide. Give thanks you and then much! 'Awards' will be appreciated but spend your Steam Points if you think this guide

deserves

them.

If you need assist or want to report a cleaved / outdated link(due south) or characteristic(s), leave a comment.

Source: https://steamcommunity.com/sharedfiles/filedetails/?id=1403445368

Posted by: martinezdishoursenot.blogspot.com