TWO EXAMPLE'S OF FINAL RESULTS FROM THIS METHOD[imgur.com]

first thing you'll have to do is get three images

1-Blank 16:9< image[www.solidbackgrounds.com]

2-Your artwork middle [steam.design]

3- A transparent PNG file image of the character you would like to animate [Does not need to be a transparent PNG file but is suggested so the character will fit your profile background]

Once your done with that go to photopea[www.photopea.com], This is a online image editing software very similar to Photoshop but for free and your going to want to follow these steps to put all the images you've downloaded together.

1-In the top left you'll see "file" go to file then click "open" then load the solid black background

2-Repeat step one but add in your artwork middle then your character

3-Now in the upper section of Photopea you'll see tabs go to your artwork tab, Now go to the right and you'll see all the layers right click "background" then click "duplicate into". You will see a small window pop up to the left asking where you want to duplicate it into select the destination to the solid background then press "ok"

4-Repeat step 3 but for your character

5-Now center your artwork middle in the solid black background and fit your character inside of the artwork middle

EXAMPLE

NOW GO TO "FILE" THEN "EXPORT AS" SELECT "JPG"


Now trying to explain how to edit these wallpapers would be to difficult for me to do with just text only. So i am going to be linking you to a playlist of tutorial's going over multiples animation methods you may use that are, but not limited to

Breathing animation,Hair animation,Blinking animations

Guide list


Once you have edited/animated and are satisfied with your wallpaper set it as your desktop background

Now record your screen of the background for like 5-15 seconds

if you don't have a recording software you could get one from installing your graphics card drivers, if you don't have a GPU you could get away with using something like Bandicam lol

Now that you've recorded your screen go to ezgif[ezgif.com] and follow these steps

1-Go to "video to GIF" and convert your video to a proper GIF file
UPDATE Do not use this method (FOR THIS STEP ONLY) anymore because
ezgif as of recently has been down sizing MP4 to GIF projects. So use online converter[www.onlineconverter.com] instead to change your recently recorded MP4 file to a GIF file, But you will still use ezgif for the next steps.

2-Go to "crop" on ezgif[ezgif.com] then crop the recently made GIF, Use the dimensions 506 x 808 for best crop possible. Take your time and make it perfect

3-Once you've cropped it to the original size of your artwork middle if it's over steam's minimum file upload size (8MB) go to the "effects" drop down menu and select "cut duration" then upload the cropped GIF and cut it down 1 to 5 frames at a time until the file size is under 8MB

4-This step just for a smoother animation and is not needed but it is recommended go back to the "effects" drop down menu and select "reverse GIF" upload your recently edited GIF then use the "run to the end and reverse back to the start" this is so there wont be such a blatant cut when the final GIF ends then starts over. Most of you wont be able to do this because it adds a lot to the file size but i suggest trying just in case


uploading your artwork to steam is very simple you just have to go on your web browser, go to your steam profile (make sure you are logged in), click on "artwork" on the right side then simply click "upload artwork"

now upload your animation and give it a title

BUT DO NOT PRESS SAVE AND CONTINUE YET YOU NEED TO RIGHT CLICK ON YOUR SCREEN, THEN CLICK 'INSPECT ELEMENTS'

GO TO 'CONSOLE' THEN PASTE IN THIS COMMAND

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

THE SAME THING CAN BE DONE WITH YOUR SIDE IMAGE YOU GOT FROM STEAM DESIGN AS WELL

thank you for following this guide hopefully it helped you, if you have any questions regarding it please contact me and ill try to help you