How To Make An Animated Anime Steam Artwork Showcase

Using

normal

Profile Groundworks

Primary requirements:

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

   Annotation: Giphy[giphy.com] now requires you to accept an account on their website, in guild to let you create and customize .gif files. You do get the selection to delete your account.

Optional:

1. Search for " Folder Options " in the Starting time Menu, click on the result that comes under Control Panel / Settings. One time information technology opens, click on the "View" tab and uncheck the checkbox " Hibernate extensions for known file types ". Click "Apply" and and so "OK" to close it. It'due south not required, only can prove really helpful. Especially to quickly differentiate animated and non-animated files.
2. Open Steam customer, go to Settings, then click on the "Interface" tab. Tick the checkbox " Brandish Steam URL address bar when available ". Click "OK" to apply this setting. This is not required merely could come in handy.
3. Open this website[coolfont.org] in incognito fashion or temporarily disable your preferred emoji browser extension(south) to exist able to see the bodily characters and not emoticon images. This is really not needed unless you lot'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 as it won't make much difference at all. I tried to explicate everything in detail. Delight use the navigation panel on correct appropriately and

whenever required

. Good luck!

Fourth dimension to create your artwork!

Disclaimer: Yous may not get extremely high definition artwork(south) past using this guide / method.

Step 1 of 3: Obtaining the basic images

• Go to Steam.design[steam.pattern] and sign in with your Steam account. In one case the website finishes loading all of your Profile Backgrounds from your inventory, click on the one you'd like to breathing / utilize in your artwork.
  Or
  If you don't want to do that, open Steam customer, go to your Inventory and select the Contour Background that you lot'd like to animate / use in your artwork. Click on the " View Full Size " push button. This should open upwards a link on your default web browser to show you the full sized paradigm. Simply nosotros're hither only for the URL of that page. So re-create the URL from the address bar of that folio & paste it on Steam.blueprint'due south[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 computer. You lot tin can extract information technology using Windows or any third-party program of your option.

Tip: By using Steam.pattern's[one-time.steam.design] quondam site, yous tin choose the length of your center and side artworks here. You can also choose to take your Contour Background equally Screenshot Showcase or Workshop Showcase past clicking the " Customize Cropping " button. Do it if you lot're going to display either of them first and not your Artwork Showcase.

Note: Codes for Artwork Showcase, Featured Artwork Showcase, Workshop Showcase and Screenshot Showcase are available in this guide only obviously, I'k focusing on the Artwork Showcase ,

not

on the Featured Artwork Showcase. If you lot want, you can skip to the upload sections where you'll find the appropriate codes and instruction on how to utilise them.

Step ii of 3: Animating and customizing

• Go to Giphy'due south GIF Maker[giphy.com] and click "Cull File" under "GIF" (yous demand 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 information technology's been uploaded, y'all'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 colour of the image while others are generally not used for virtually Steam artworks just feel free to experiment. One time y'all're done customizing that image, click on the regal " Continue to Upload " button and so " Upload to GIPHY " push button. Be patient as this can accept some time. Once information technology's done, you lot'll find 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 correct-click within the address bar and select "Paste and go" then wait for the folio to end loading! Later on that, right-click on that animated image and select "Save epitome as..." so save information technology in your reckoner.

Tip: If you're feeling creative when customizing the artwork, search for specific .gifs to include in your artwork. Yous tin resize everything you're calculation and put them in different locations of your artwork. You tin also use special characters from Cool Fonts[coolfont.org] and can re-upload your animated file once more if you withal want to add something but don't want to redo all your piece of work. Terminal simply definitely non least, you can take your .gifsouthward to PhotoMosh[photomosh.com] to add various filters merely this can mess upwardly your artwork's duration which may pb to synchronization issues.

Note: If you use PhotoMosh[photomosh.com] to customize your artwork(s), then you'll nigh likely as well take to reduce their file size to below 8 MB using EZGIF'southward[ezgif.com] Optimization tools along with resizing tool which is mentioned on the next step.

Step three of iii: Resizing the artwork

• Now it's fourth dimension to resize your .gif file to match Steam.design's[steam.design] downloaded file resolution! Go back to the folder where you lot had extracted that .zip file from step 1. Right-click on the non-blithe version of the paradigm and become 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 prototype and 100 for the side prototype. Unmodified height values are usually 808 or 928 for nearly Steam Profile Groundworksouthward. Yours is probably dissimilar, so check the exact values before moving on!
• Now go to EZGIF[ezgif.com] and click on the " Choose File " push button and select the newly animated .gif file from footstep two, and so click on the bluish " Upload! " push. Or you lot tin can simply re-create-paste that " Original " URL I talked nigh in the previous step. My teaching for saving that image in your computer was just to be safe from whatever losses. For instance, should the tab or the browser crashes during this process or if your PC gets a BSOD.
• Enter the same values on width and pinnacle sections that you see on the appropriate image in that .nil file's extracted folder (read the first fleck of step 3 once again, if you go confused). For the resize method, select " ImageMagick + coalscale (disengage optimizations) ". Yous can modify it later if the resized image size goes across Steam's upload limit which is 8 MB. Don't do annihilation in the " If the attribute ratio does not match " section, just make sure information technology's set to default: " Middle and crop to fit ". Now it's finally time to click that blue " Resize prototype! " button. Once the resizing is done, right-click on the new epitome and click on "Open image in new tab" then wait for that tab to finish loading, then save that epitome in your computer past using right-click on the animated (and now resized) image and clicking on "Save epitome as...".

Tip: If you're non satisfied with the quality of your artwork, you lot can go to EZGIF's[ezgif.com] Effects tab, then tick the checkbox " sharpen " and click the "Apply selected!" push. Unfortunately, you can't go much further than this to improve the quality of your artwork using any gratis methods that I know of.

Uploading your artwork to Steam !

• First of all, you'll accept to use a web browser to exercise this. This cannot be done from the Steam client. Open Chrome[www.google.com] and just click here to get to the uploading folio.
• Now give your artwork a championship, make full in the description box if y'all desire, go on 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 (simply never utilise both codes at the aforementioned time):

document.getElementsByName("image_width")[0].value = 1000;document.getElementsByName("image_height")[0].value = one;

• At present 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 " Salve and Continue " button! You lot're at present done creating and uploading the first half of your Steam artwork!

Just repeat these steps for the second half / correct side artwork. Think to provide correct values when resizing your .gif file! Check the troubleshooting section if yous run into whatever problems.

Tip: If you lot desire to leave your artwork proper name blank, copy this character "⠀" and apply that as title.

Upload to

Workshop

or as

Screenshot

s

• Code(s) for uploading to Workshop Showcase:
  If you want to meet the modest Steam Workshop icon in the corner, use this lawmaking on this page:

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

  If y'all desire to meet a transparent / invisible icon in the corner, use this code on this page:

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

Notation: 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. Try to keep the pinnacle and width of your Workshop epitome same. For example: 512x512, 600x600, 777x777 etc. Workshop

image upload

size limit is currently 1 MB but yous can utilize the second upload method to

bypass

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

• Code(s) for uploading to Screenshot Showcase:
  Click hither to get to the uploading page.
  If the pinnacle of the prototype is less than 506 pixels, use this code:

  $J('[proper noun="file_type"]').val("five");

  If the height of the paradigm is more than 506 pixels, use this code:

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

Using Animated Contour Backgrounddue south

Disclaimer: Yous may not get extremely high definition artwork(south) by using this guide / method.

Assuming you lot didn't download that file. To utilize this method, you lot'll demand a web-browser as this can't exist done from the Steam customer. Use this section only if you understand what y'all're doing.

• Some Animated Profile Background'south size become beyond 20 MB when converting to .gif. If you are using whatsoever of those Animated Profile Backgrounds and are here for creating artworks from them. Please refer to the software alternative section. All other Blithe Profile Backgrounds should piece of work perfectly if done right, past using this method below. If you lot need assistance, just exit a comment. Skilful luck!

1. First of all, choose to edit your contour and pick your Animated Profile Background and employ it on your contour. After that visit your profile. Correct-click anywhere on the animation (on either side) and select "Save video equally..." and relieve it in your estimator. The file should exist of .webm format if you did everything correctly.
2. Get to CloudConvert[cloudconvert.com] and click on " Select File ", pick that .webm file, so click " Convert ". Once you see the green " Download " button click on information technology to save the .gif file in your reckoner. If the file size goes beyond xx MB, refer to the software alternative section or the troubleshooting department. If you withal demand help, leave a comment. Y'all may have to temporarily add me as a friend and I'll try to ship yous the basic .gifs.
3. Now get to GIFSGIFS[gifgifs.com] and click on " UPLOAD GIF ", pick the .gif file that you just saved in your figurer. Enter these values after the file is uploaded. "X" = 493, "Y" = 256, "WIDTH" = 506 and "Top" = 928. Click on " Ready " and then click on " CROP " at the bottom. Right-click on the newly created prototype and select "Open epitome in new tab". Wait for that tab to finish loading and then just correct-click on that animated .gif and salve it in your computer past selecting "Salve image as...".
4. We are not done yet! To go the second one-half / right side portion, change those values to these: "X" = 1007, "Y" = 256, "WIDTH" = 100 and "HEIGHT" = 928. Now but echo the above mentioned process to create and save that .gif file in your computer.

• You're now done acquiring the bones images for your Blithe Profile Background. If you desire to upload and use them as they are, become to the upload department and don't forget to use the lawmaking. If you want to further customize these .gifsouthward, merely follow this guide from step 2 to customize the animation even more before uploading the artwork with the mentioned code.

Note: If you cull to follow from step ii, you'll find that some references are dissimilar such as image names and file paths / formats etc. Correct now, I'1000 leaving the rest to people'southward common sense and intelligence. If you've managed to follow this section correctly, you'll most likely have no problem post-obit the guide. All the same, please do enquire for help if you need to.

The Featured Artwork Showcase

Disclaimer: You lot may not get extremely loftier definition artwork(s) by using this guide / method.

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

1. Follow step one and obtain the basic images for your Contour Background, there should be a file chosen "Artwork_Featured.png" in the extracted folder.
2. Follow step two and customize that image using Giphy'south GIF Maker[giphy.com] and / or PhotoMosh[photomosh.com] until you're fully satisfied with your piece of 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 aforementioned.

Featured Artwork Showcase and Animated Profile Backgrounds:

1. Read and understand the basics of obtaining the .gifs from Animated Profile Backgrounds from the department higher up.
2. On GIFSGIFS[gifgifs.com], upload your .gif and put these values in their appropriate boxes: "X" = 493, "Y" = 256, "WIDTH" = 630 and "Acme" = 928. Click on "SET" and then click on "Crop" at the bottom, you should at present have your basic .gif, ready to be used for Featured Artwork Showcase.
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 aforementioned.

Gratis

software culling - practise it yourself

This is only for Animated Contour Groundworks,

non

for traditional .jpg Profile Groundworks. I'1000 assuming you have a petty more than than basic computer skills. Don't worry as well much nearly it, if you go stuck, just ask for assist in the comment section. The software we'll be using is open-source.

Disclaimer: You lot may not get extremely loftier definition artwork(s) by using this guide / method.

1. Download Avidemux from their official website[avidemux.sourceforge.net] & install it on your PC.
2. Whichever Animated Profile Groundwork you are going for, set up it every bit your current Steam background. Later that, visit your contour, Correct-click on either side of your profile (on the Animated Contour Background), and click on "Salvage video as..." and then relieve the .webm file on your PC.
3. Open Avidemux, click on "Open Video" and select that .webm file which yous only saved on your PC. Cheque the "Video Output", click on "Copy" to open a drop-down menu and click on "HEVC (x265)".
4. Now click on "Filters", then double-click on "Crop". You should now encounter a new window where should be 4 boxes with "0" value, "Left", "Right", "Top" and "Bottom".
5. Enter the values for your desired showcase which tin 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, "Right" = 797, "Superlative" = 256 and "Bottom" = 0.

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

or

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

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

or

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

The software function is at present over. Information technology's time to get your

terminal

base .gif.

• Go to EZGIF'due south[ezgif.com] Video to GIF converter tab, click "Choose File" and select that cropped output file from Avidemux before clicking on "Upload video!"
• Do not mess with the times. For "Size", select "Original (up to 800px)". For "Frame rate (FPS)", select "20 (max 15 seconds)". Make sure that the "Method" is set to "FFMPEG". You can at present click on "Convert to GIF!" push.
• Scroll down a bit and click on "optimize" which should open a new folio. Use the "Lossy GIF" optimization method and increase the "Compression level" all the mode to 200. Now click on "Optimize GIF!"
• Expect a moment for your .gif to fully load. Correct-click on the newly appeared blithe .gif and click on "Open image in new tab". Go to that tab, Correct-click on that blitheness and salvage your final base .gif by clicking on "Save image as...".

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

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

less than

8 MB, try irresolute the optimization method to "Optimize Transparency" and use the Fuzz slider. Do it with caution and try to keep the value between 1-x. Use the aforementioned value for the other one-half / right side .gif to avoid whatever problems. Synchronization issues may go noticeable the college the Fuzz value gets.

Troubleshooting section

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

• Artwork looks pocket-size or does non marshal with the Profile Groundwork and it looks weird.

If the artwork doesn't fill up the entire Artwork Showcase, you most likely did not properly enter and execute the lawmaking mentioned in the upload section. If the alignment is wrong, you probably did something incorrect when resizing the artwork. Make certain that you blazon in the

exact aforementioned

height and width values from the non-blithe paradigm that you got from Steam.design[steam.blueprint] into EZGIF[ezgif.com] when resizing the artwork. Also, don't change the attribute ratio during this procedure, leave that as it is. Concluding but definitely not least, use the "Original Size" option when you're editing your Steam profile, do

not

apply the "Total Screen" option. Experience free to contact me if you're still having trouble. Please try to leave a comment on the guide first though.

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

If you are having trouble acquiring the basic paradigm, it'll be best if we talk in conversation near that. I can endeavour to walk you through the process with more than detailed data or only ship y'all the .gif file(s) that you lot need. If you're confused about the mention of step ii and are having trouble customizing those images further, I advise trying to animate a

normal

Profile Background first just for the experience. Temporarily forget virtually your Animated Profile Background. Once you've successfully learned how to animate a

normal

Profile Groundwork, then move on to your Blithe Profile Background - this time information technology should go easy. Customization, resizing and upload process for Animated Contour Backgrounds are the same, but the acquisition method of those basic .gifsouth is different.

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

It has come to my attention that a lot of people are having problem gathering the basic .gifs of their Animated Profile Groundwork considering later the conversion of the .webm file, the .gif file becomes larger than 20 MB in size. In cases similar this, I urge you lot to check tout the software alternative section where you should be able to set up the problem with a little time and effort. If all else neglect, leave a annotate on the guide and I'll become to piece of work on your Animated Contour Background as presently as I can. You lot may also have to add me on Steam for the procedure. Yous can e'er unfriend me afterwards.

• Synchronization issues with Animated Contour Backgrounds.

Please understand that all Blithe Profile Backgrounds are of .webm format and your artworks are of .gif format. I accept 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 can cause everything to exit of sync the adjacent time that tab / window comes in focus. It should also be noted that as with most artworks, the very showtime time y'all visit your profile after setting upwardly the Artwork Showcase and Animated Profile Background, they will have a few moments to load and therefore, may not be in sync. Just reload your profile page to gear up this browser cache result. You probably won't fifty-fifty notice it if you lot have a fast cyberspace connection.

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

Your Steam account level must be at to the lowest degree level 10 for information technology to be eligible to have a Profile Showcase of whatsoever 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 total sized images if they are animated. You'll see some sparse horizontal lines, click on one of those when you're setting up the Artwork Showcase, you'll see which artwork y'all've selected after clicking on those lines. From top left to correct, information technology goes from new to sometime uploads.

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

Nosotros tin can but go then far using free methods. Did you follow that tip on stride 3? If yeah, then unfortunately there's nothing more I can practise to help. Y'all might desire to consider using paid methods if you're looking for Hard disk artworks (which is not what this guide is for). Be very conscientious though, there are people that tin can create HD artworks for you but I tin 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 lot.

• At that place'south an error when trying to upload an artwork on Steam.

Sometimes it could merely 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'southward[ezgif.com] optimization tools to lower the quality of your .gif file. In that location are plenty of options to optimize your artwork there, then don't hesitate to try them out. Also, effort 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 fault(s), send me a friend request, I might be able to aid.

• I'one thousand looking for alternatives to the websites listed in this guide.

Pretty sure in that location are other similar websites available to do these stuff but the ones I found don't stick their watermarks on your artwork, that's ane of the reasons why I chose them. If you lot know of any websites that tin can do these stuff better than the ones on this guide and volition non put whatever watermarks on the artworks while also being completely free to employ, please share it in the comment section. Gratuitous software alternatives are welcome too equally long every bit the process is

less complicated

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

You tin can add me as a friend to get assist but if y'all don't exit a comment on the guide first, your friend request might be ignored. Delight speak good English. I tin try to assistance but tin can't make whatever promises to prepare the trouble(southward). You can ever unfriend me afterwards - no hard feelings.

Credits / Thanks

Myself , for the guide. Guide logo was created using the help of CoolText[cooltext.com] and and then was modified past me. And so my thanks goes to the owner(s) of that website.
Owner(s) 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(south) of the merely .gif used in the guide that you tin see below, I just plant it on the Internet.
If I forgot to credit you, please leave a comment here and later on 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 yous, please 'Rate Upwards' and / or 'Favorite' this guide. Thank yous so much! 'Awards' volition be appreciated but spend your Steam Points if y'all call back this guide

deserves

them.

If you need aid or want to report a broken / outdated link(s) or feature(due south), get out a annotate.

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

Posted by: knightknou1962.blogspot.com

Share this post