How To Make An Animated Steam Artwork Showcase

Using

normal

Profile Backgrounddue south

Master requirements:

1. Chrome[www.google.com] or whatsoever 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.pattern[steam.design], EZGIF[ezgif.com]. Giphy[giphy.com] and / or PhotoMosh[photomosh.com].

   Note: Giphy[giphy.com] now requires you to have an account on their website, in social club to let you create and customize .gif files. You do get the option to delete your account.

Optional:

1. Search for " Folder Options " in the Showtime Menu, click on the event that comes nether Command Panel / Settings. Once it opens, click on the "View" tab and uncheck the checkbox " Hide extensions for known file types ". Click "Utilise" and and then "OK" to close information technology. It's not required, just can prove actually helpful. Particularly to chop-chop differentiate blithe and non-animated files.
2. Open Steam customer, get 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 merely could come up 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 bodily 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 lot're not using those optional stuff every bit it won't make much departure at all. I tried to explicate everything in item. Please apply the navigation console on right accordingly and

whenever required

. Good luck!

Fourth dimension to create your artwork!

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

Step 1 of 3: Obtaining the basic images

• Get 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, become to your Inventory and select the Profile Background that you'd similar to breathing / apply in your artwork. Click on the " View Full Size " button. This should open up upward a link on your default web browser to show you the full sized prototype. Simply nosotros're hither but for the URL of that page. Then copy the URL from the address bar of that page & paste it on Steam.design'southward[steam.blueprint] " Paste a groundwork URL hither " section.
• Once you're washed doing either of these steps, click the " Download ZIP " button and save the file in your figurer. You lot can extract it using Windows or any third-political party programme of your choice.

Tip: By using Steam.design's[one-time.steam.design] one-time site, you tin can choose the length of your middle and side artworks hither. You tin also choose to have your Profile Background as Screenshot Showcase or Workshop Showcase by clicking the " Customize Cropping " push. Do information technology if you lot're going to display either of them first and non your Artwork Showcase.

Notation: Codes for Artwork Showcase, Featured Artwork Showcase, Workshop Showcase and Screenshot Showcase are bachelor in this guide just obviously, I'm focusing on the Artwork Showcase ,

non

on the Featured Artwork Showcase. If you want, y'all tin skip to the upload sections where you'll notice the appropriate codes and pedagogy on how to use them.

Pace 2 of 3: Animating and customizing

• Go to Giphy's GIF Maker[giphy.com] and click "Choose File" under "GIF" (you lot need to be logged in for this). Navigate to the binder where you had extracted that .zip file in the previous stride and select the file " Artwork_Middle.png ". Once it's been uploaded, you lot'll find tons of possibilities to customize and animate that prototype. Accept your fourth dimension to familiarize yourself with everything the website has to offering. I would not recommend using the Filters tab because some of the filters tin mess up the whole color of the image while others are generally not used for most Steam artworks simply feel free to experiment. One time 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'due south done, yous'll find several links on the correct side of your newly created .gif file. Click on the " Share " link and copy the " Original " URL to the clipboard.
• Now open a new tab on your browser and right-click inside the accost bar and select "Paste and become" and then look for the page to stop loading! After that, right-click on that animated epitome and select "Salvage paradigm every bit..." then save information technology in your computer.

Tip: If you're feeling artistic when customizing the artwork, search for specific .gifsouthward to include in your artwork. Y'all can resize everything you're calculation and put them in dissimilar locations of your artwork. You tin can also employ special characters from Cool Fonts[coolfont.org] and can re-upload your animated file again if you notwithstanding want to add something but don't want to redo all your work. Last but definitely not to the lowest degree, you lot tin have your .gifs to PhotoMosh[photomosh.com] to add various filters but this can mess upwardly your artwork'southward elapsing which may pb to synchronization bug.

Notation: If you use PhotoMosh[photomosh.com] to customize your artwork(s), then you'll about likely too have to reduce their file size to below 8 MB using EZGIF'south[ezgif.com] Optimization tools along with resizing tool which is mentioned on the next pace.

Step 3 of 3: Resizing the artwork

• Now it's time to resize your .gif file to match Steam.blueprint's[steam.blueprint] downloaded file resolution! Go back to the folder where you lot had extracted that .zip file from footstep ane. Correct-click on the non-animated version of the image and go to "Properties", click on the "Details" tab, you lot should be able to run into the height & the width values of that paradigm.
  Width values are usually 506 for the middle image and 100 for the side image. Unmodified height values are normally 808 or 928 for nearly Steam Profile Groundworkdue south. Yours is probably different, and then check the exact values earlier moving on!
• Now go to EZGIF[ezgif.com] and click on the " Choose File " button and select the newly animated .gif file from step two, and then click on the blue " Upload! " button. Or yous tin can simply copy-paste that " Original " URL I talked nearly in the previous step. My didactics for saving that prototype in your calculator was only to exist safe from whatsoever 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 top sections that y'all see on the appropriate image in that .zip file's extracted folder (read the first fleck of footstep iii once again, if yous get confused). For the resize method, select " ImageMagick + coalscale (undo optimizations) ". You lot can change it later if the resized image size goes across Steam's upload limit which is 8 MB. Don't practice anything in the " If the attribute ratio does non lucifer " section, just make sure it's gear up to default: " Middle and crop to fit ". Now it'southward finally time to click that blue " Resize image! " push button. Once the resizing is washed, correct-click on the new image and click on "Open up image in new tab" then wait for that tab to finish loading, so save that paradigm in your computer by using right-click on the animated (and now resized) image and clicking on "Salvage epitome equally...".

Tip: If you're not satisfied with the quality of your artwork, y'all can get to EZGIF's[ezgif.com] Furnishings tab, and so tick the checkbox " sharpen " and click the "Employ selected!" button. Unfortunately, y'all can't become 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 lot'll accept to use a spider web browser to do this. This cannot be done from the Steam client. Open Chrome[world wide web.google.com] and just click here to get to the uploading page.
• At present 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 " Cull File " push button and select the blithe and resized .gif file. Before doing anything else, copy this lawmaking:

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

If that lawmaking is non working for you, use this code (merely never use both codes at the same time):

document.getElementsByName("image_width")[0].value = yard;certificate.getElementsByName("image_height")[0].value = i;

• Now right-click anywhere on that page and click on "Inspect" then go to "Console" tab. Paste that copied code there & printing Enter. Now yous're prepare to click that tempting " Salvage and Go on " push button! You lot're now done creating and uploading the first one-half of your Steam artwork!

Merely repeat these steps for the second one-half / right side artwork. Remember to provide correct values when resizing your .gif file! Cheque the troubleshooting department if you encounter any problems.

Tip: If you desire to get out your artwork name bare, copy this grapheme "⠀" and use that equally title.

Upload to

Workshop

or as

Screenshot

s

• Code(s) for uploading to Workshop Showcase:
  If you desire to run into the small Steam Workshop icon in the corner, use this code on this page:

  $J('[name="appid"]').val("766");$J('[name="consumer_app_id"]').val("766");$J('[name="visibility"]').val("0")

  If you desire to see a transparent / invisible icon in the corner, use this code on this page:

  $J('#ConsumerAppID').val(480),$J('[proper noun=file_type]').val(0),$J('[proper noun=visibility]').val(0);

Note: Y'all don't have to fill up in the clarification box or check any categories and you lot tin can safely ignore the page that asks for additional work afterwards. Try to proceed the height and width of your Workshop image same. For example: 512x512, 600x600, 777x777 etc. Workshop

image upload

size limit is currently i MB but you can use the second upload method to

bypass

that. To access all your Workshop images uploaded by using these methods, go to your profile and bank check the "Workshop items" or "Merchandise" section of your "Content" folio.

• Code(s) for uploading to Screenshot Showcase:
  Click here to become to the uploading page.
  If the top of the image is less than 506 pixels, use this code:

  $J('[name="file_type"]').val("v");

  If the elevation of the paradigm is more than 506 pixels, use this lawmaking:

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

Using Animated Profile Groundworksouthward

Disclaimer: You may non get extremely high definition artwork(due south) by using this guide / method.

Assuming you didn't download that file. To employ this method, you'll need a web-browser every bit this can't be washed from the Steam customer. Use this section just if yous understand what you're doing.

• Some Blithe Profile Background's size become beyond 20 MB when converting to .gif. If you are using any of those Blithe Profile Groundworks and are here for creating artworks from them. Please refer to the software alternative department. All other Animated Profile Backgrounds should piece of work perfectly if done right, by using this method below. If you need aid, just leave a comment. Good luck!

1. First of all, choose to edit your profile and option your Animated Profile Groundwork and apply it on your profile. Later on that visit your profile. Correct-click anywhere on the blitheness (on either side) and select "Salvage video every bit..." and save information technology 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 dark-green " Download " push button click on it to save the .gif file in your estimator. If the file size goes beyond 20 MB, refer to the software alternative section or the troubleshooting section. If you withal need help, leave a comment. You may take to temporarily add me every bit a friend and I'll effort to transport you the basic .gifdue south.
3. Now get to GIFSGIFS[gifgifs.com] and click on " UPLOAD GIF ", selection the .gif file that y'all just saved in your figurer. Enter these values later the file is uploaded. "X" = 493, "Y" = 256, "WIDTH" = 506 and "Superlative" = 928. Click on " Gear up " and so click on " Ingather " at the bottom. Right-click on the newly created image and select "Open epitome in new tab". Wait for that tab to end loading and so only right-click on that animated .gif and save it in your computer by selecting "Save image as...".
4. Nosotros are not done all the same! To go the second half / correct side portion, change those values to these: "Ten" = 1007, "Y" = 256, "WIDTH" = 100 and "Acme" = 928. Now but repeat the above mentioned process to create and relieve that .gif file in your calculator.

• You're now done acquiring the basic images for your Blithe Profile Groundwork. If you want to upload and use them as they are, get 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 fifty-fifty more before uploading the artwork with the mentioned code.

Notation: If yous cull to follow from step ii, you'll discover that some references are different such as prototype names and file paths / formats etc. Right now, I'yard leaving the rest to people'southward common sense and intelligence. If you've managed to follow this section correctly, yous'll most probable have no problem following the guide. However, please exercise ask for help if you need to.

The Featured Artwork Showcase

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

To create artworks for your Featured Artwork Showcase, just do the following:

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

Featured Artwork Showcase and Animated Profile Backgrounds:

1. Read and understand the basics of obtaining the .gifs from Animated Contour Backgrounds from the section above.
2. On GIFSGIFS[gifgifs.com], upload your .gif and put these values in their appropriate boxes: "X" = 493, "Y" = 256, "WIDTH" = 630 and "Elevation" = 928. Click on "Set up" and and then click on "Ingather" at the bottom, you should at present take your basic .gif, set to exist used for Featured Artwork Showcase.
3. Get to the artwork upload section of this guide and upload your artwork to Steam. Code for uploading to Artwork Showcase and Featured Artwork Showcase are the same.

Free

software culling - do information technology yourself

This is simply for Animated Profile Backgrounds,

not

for traditional .jpg Profile Backgrounds. I'm assuming you lot have a petty more than basic computer skills. Don't worry as well much well-nigh it, if you become stuck, just ask for aid in the comment section. The software we'll be using is open-source.

Disclaimer: You may non get extremely loftier definition artwork(s) past using this guide / method.

1. Download Avidemux from their official website[avidemux.sourceforge.net] & install information technology on your PC.
2. Whichever Animated Profile Background y'all are going for, set it every bit your electric current Steam background. After that, visit your profile, Right-click on either side of your contour (on the Animated Profile Background), and click on "Save video as..." then save the .webm file on your PC.
3. Open Avidemux, click on "Open up Video" and select that .webm file which you but saved on your PC. Check the "Video Output", click on "Copy" to open up a drop-down menu and click on "HEVC (x265)".
4. At present click on "Filters", and so double-click on "Crop". You should now see a new window where should be four boxes with "0" value, "Left", "Right", "Top" and "Bottom".
5. Enter the values for your desired showcase which tin can exist plant below and press "OK", and then "Shut". At present click on "Save Video" and relieve it on your PC.

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

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

or

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

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

or

Screenshot Showcases are: "Left" = 1007, "Right" = 813, "Tiptop" = 256 and "Bottom" = 0.

The software part is now over. It's fourth dimension to get your

final

base of operations .gif.

• Go to EZGIF's[ezgif.com] Video to GIF converter tab, click "Cull File" and select that cropped output file from Avidemux before clicking on "Upload video!"
• Practice not mess with the times. For "Size", select "Original (up to 800px)". For "Frame rate (FPS)", select "twenty (max 15 seconds)". Make sure that the "Method" is set to "FFMPEG". You can at present click on "Convert to GIF!" button.
• Scroll downward a fleck and click on "optimize" which should open up a new page. Use the "Lossy GIF" optimization method and increase the "Compression level" all the way 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 prototype in new tab". Go to that tab, Right-click on that animation and relieve your final base .gif by clicking on "Salvage image as...".

Note: If you're planning on uploading your .gif without further customization from Giphy[giphy.com] and / or PhotoMosh[photomosh.com], y'all can play around with the lossy slider to increment the quality of your .gif. In that case, I recommend a value which is just plenty to get your .gif's size to beneath 8 MB.

Tip: If the lossy slider can't bring downwardly your .gif'south size to

less than

8 MB, endeavour changing the optimization method to "Optimize Transparency" and use the Fuzz slider. Do information technology with caution and try to go on the value betwixt 1-x. Use the same value for the other half / correct side .gif to avoid any issues. Synchronization issues may become noticeable the higher the Fuzz value gets.

Troubleshooting section

Here are some problems 1 could run into. Hopefully you won't have to employ this section.

• Artwork looks small or does non align with the Contour Background and it looks weird.

If the artwork doesn't fill the unabridged Artwork Showcase, you most likely did non properly enter and execute the code mentioned in the upload section. If the alignment is wrong, you probably did something wrong when resizing the artwork. Brand certain that you type in the

exact same

height and width values from the non-blithe image that you got from Steam.design[steam.blueprint] into EZGIF[ezgif.com] when resizing the artwork. Also, don't change the aspect ratio during this process, leave that as it is. Concluding but definitely not to the lowest degree, use the "Original Size" choice when you're editing your Steam profile, exercise

not

utilise the "Full Screen" option. Feel free to contact me if yous're still having trouble. Please endeavor to exit a annotate on the guide first though.

• Demand assist with new Blithe Contour Backgrounds, guide for that is disruptive.

If you are having trouble acquiring the bones epitome, information technology'll be best if we talk in chat well-nigh that. I tin can endeavor to walk you through the procedure with more than detailed information or just send yous the .gif file(s) that you demand. If yous're confused about the mention of pace two and are having trouble customizing those images further, I suggest trying to animate a

normal

Profile Background first just for the experience. Temporarily forget near your Animated Profile Background. One time you've successfully learned how to breathing a

normal

Contour Background, then move on to your Animated Profile Groundwork - this time it should become like shooting fish in a barrel. Customization, resizing and upload process for Animated Profile Groundworks are the same, simply the acquisition method of those basic .gifs is different.

• The 20 MB problem and other quality bug with Animated Profile Groundworks.

It has come to my attending that a lot of people are having trouble gathering the bones .gifsouth of their Blithe Profile Background because after the conversion of the .webm file, the .gif file becomes larger than 20 MB in size. In cases like this, I urge yous to check tout the software alternative section where you should be able to fix the trouble with a little time and attempt. If all else neglect, go out a comment on the guide and I'll go to piece of work on your Animated Profile Background as before long as I can. You may also accept to add together me on Steam for the process. You tin can ever unfriend me afterwards.

• 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 Contour Background itself

pauses automatically

when that tab / window goes out of focus while .gif artworks stays on loop. This tin cause everything to get out of sync the side by side fourth dimension that tab / window comes in focus. Information technology should besides be noted that as with most artworks, the very offset time you visit your profile later on setting upward the Artwork Showcase and Animated Profile Background, they volition take a few moments to load and therefore, may not be in sync. Just reload your profile page to fix this browser cache issue. Y'all probably won't even find it if yous have a fast internet connexion.

• I'm having trouble using the Artwork Showcase or can't find the artwork.

Your Steam account level must be at to the lowest degree level x for it to be eligible to have a Profile Showcase of any kind. You must go on your artwork's visibility "Public" in order for it to actually evidence up when you're selecting something to be used on your Artwork Showcase. Lastly, for some reasons, artworks don't seem to bear witness upwardly as full sized images if they are animated. You'll come across some sparse horizontal lines, click on one of those when you're setting up the Artwork Showcase, you'll meet which artwork you've selected afterward clicking on those lines. From top left to right, it goes from new to sometime uploads.

• Unsatisfying artwork quality, don't know what to do.

We tin can only go so far using gratuitous methods. Did you follow that tip on step 3? If yes, and so unfortunately there's cipher more I can practice to assistance. You might want to consider using paid methods if y'all're looking for HD artworks (which is not what this guide is for). Be very conscientious though, at that place are people that tin create Hard disk artworks for you only I can't vouch for anyone (not that it matters). I will never be responsible if you lot become scammed or worse! I'm really pitiful to see that this guide didn't help you.

• There's an fault when trying to upload an artwork on Steam.

Sometimes it could just be a problem with Steam servers, await a few minutes, reload the upload folio and try over again. If the file size is not less than eight MB, you tin can set this by using EZGIF'southward[ezgif.com] optimization tools to lower the quality of your .gif file. At that place are enough 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 mistake(southward), send me a friend asking, 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 bachelor to do these stuff but the ones I plant don't stick their watermarks on your artwork, that'southward one of the reasons why I chose them. If you know of any websites that can practice these stuff better than the ones on this guide and will not put whatever watermarks on the artworks while also being completely free to utilise, please share it in the comment section. Gratuitous software alternatives are welcome also as long every bit the process is

less complicated

than this current method. I'grand open to suggestions just can't guarantee to change this guide completely.

You tin add me as a friend to go help but if you lot don't go out a comment on the guide first, your friend request might exist ignored. Delight speak good English. I can endeavor to help but can't make any promises to set up the trouble(s). You tin can always unfriend me afterwards - no difficult feelings.

Credits / Thank you

Myself , for the guide. Guide logo was created using the aid of CoolText[cooltext.com] and and so was modified by me. So my thank you goes to the owner(southward) of that website.
Owner(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(southward) of the merely .gif used in the guide that you can see beneath, I only found it on the Internet.
If I forgot to credit you, please exit a comment here and subsequently that, get in bear on 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. Cheers then much! 'Awards' volition be appreciated but spend your Steam Points if y'all remember this guide

deserves

them.

If you demand help or want to report a cleaved / outdated link(s) or feature(s), leave a annotate.

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

Posted by: hendersonburses.blogspot.com

Share this post