Let's Animate LIVE WALLPAPER and SPLASH SCREEN
You may have seen those sick atmospheric Live Wallpapers and pretty animated splash screens on games mainly on Steam such as League Of Legends, DOTA 2 and etc.
Behind those animated splash arts there is a person whose dedicated job is to animate the given designs/characters/composition or sometimes just make it work with a single picture of the game.
This person usually works with the software files such as Photoshop "PSD" with organized artwork layers. Provided by game's company or the character designer, but sometimes they just have so much going on to take time and organize a file for animator, that's alright (also not their job in most cases).
*Luckily animators are really good at organizing mass mess 😜
Anyway, the question is how do they animate a single image into an eye candy looped video?
Answer is very simple, they cut out the image in parts and repaint the 'cut areas'.
Sounds intimidating...well it is.. but that's what makes job fun and bills aren't gonna pay themselves :')
Simple quick Plan to begin with the process:
My 2 Setups Process to do this work
Image setup: The image process is divided into these parts after having an image to work with.
Animation setup: Comes in when Image setup is done. you'll see further in examples.
I hope it was helpful, appreciate if you've managed to read it through.
Ask me if there's something regarding this topic.
P.S if you want to hire me to animate similar stuff for you, feel free to drop an email for query.
These are some recent projects I've made for clients.
Behind those animated splash arts there is a person whose dedicated job is to animate the given designs/characters/composition or sometimes just make it work with a single picture of the game.
Play this video for preview then we get started!
Watch full video here
This person usually works with the software files such as Photoshop "PSD" with organized artwork layers. Provided by game's company or the character designer, but sometimes they just have so much going on to take time and organize a file for animator, that's alright (also not their job in most cases).
*Luckily animators are really good at organizing mass mess 😜
Anyway, the question is how do they animate a single image into an eye candy looped video?
Answer is very simple, they cut out the image in parts and repaint the 'cut areas'.
Sounds intimidating...well it is.. but that's what makes job fun and bills aren't gonna pay themselves :')
Simple quick Plan to begin with the process:
My 2 Setups Process to do this work
Image setup: The image process is divided into these parts after having an image to work with.
Animation setup: Comes in when Image setup is done. you'll see further in examples.
Image setup:
1. Cut out big chunks from the image such as >>Foreground >>Midground >>Background.
Example (like I cut the front mountain with boy, middle floating islands/clouds and background mountains)
2. From these 3 big chunk you have to separate the medium sized items
Example (like I cut plants from this front mountain, in middle there was nothing so I'll add extra things in animation later and so on)
3. Now look for organic item that could be closest to the viewer and cut it out. Then cut it into parts further to make it a focus point of your video.
Example (In my case it the boy, cut him out, then further separate the parts such as the robe, hair, hands etc)
4. You'll notice when you cut the parts out, the cut area remains empty. To fix this there is only one way that I know of which is that you have to repaint those parts.
By doing this we are done with the "Foreground" animation.
Midground: Here in my case I have floating islands and clouds. Let's forget clouds for now. Focus on the islands, I will make them move sideways but before that lets to go for an extra step that could really make it appealing.
Using the "special fx" I will try to make a water simulation, duplicate it and place it on each island as if the water is falling from these islands. Very tiny detail but it really adds a sense of depth.
Example (like I cut the front mountain with boy, middle floating islands/clouds and background mountains)
2. From these 3 big chunk you have to separate the medium sized items
Example (like I cut plants from this front mountain, in middle there was nothing so I'll add extra things in animation later and so on)
3. Now look for organic item that could be closest to the viewer and cut it out. Then cut it into parts further to make it a focus point of your video.
Example (In my case it the boy, cut him out, then further separate the parts such as the robe, hair, hands etc)
4. You'll notice when you cut the parts out, the cut area remains empty. To fix this there is only one way that I know of which is that you have to repaint those parts.
*This is where the major pain lies because its a tedious process. Re-painting will be easy for you if you are experienced in digital art or just drawing in general. But if you are not, then just try to mess around on a backup file. Re-painting is a process where you continue a cut area of an image and try to paint remaining area, it doesn't have to be full blown painting, just try to cover the empty areas the cleaner you do the smoother the video will be.
Alright for me that is it for the image setup, that's how I like to setup the image.
Animation setup:
Animation setup isn't really like the image setup with steps, it is more like "do what works best" or what flows together or could look great as a "Live Wallpaper".
Still divide them in 3 essential parts:
Foreground: I usually like to start animation with the focus subject (in my case its the boy), he's standing on a mountain top so there will be wind. So I'll animate the boy's robe and hair.
Alright for me that is it for the image setup, that's how I like to setup the image.
Animation setup:
Animation setup isn't really like the image setup with steps, it is more like "do what works best" or what flows together or could look great as a "Live Wallpaper".
Still divide them in 3 essential parts:
Foreground: I usually like to start animation with the focus subject (in my case its the boy), he's standing on a mountain top so there will be wind. So I'll animate the boy's robe and hair.
Now that I have something to begin with I'll proceed to animating the plants, the same way affected by the wind as hair and the robe.
By doing this we are done with the "Foreground" animation.
Midground: Here in my case I have floating islands and clouds. Let's forget clouds for now. Focus on the islands, I will make them move sideways but before that lets to go for an extra step that could really make it appealing.
Using the "special fx" I will try to make a water simulation, duplicate it and place it on each island as if the water is falling from these islands. Very tiny detail but it really adds a sense of depth.
 |
| Islands > water simulation> composite with islands |
*Here "special fx" refers to additional effects made by the animator that were not animate-able from the original art. i.e. water, sunshine, light flare, glow etc.
Now I can simply make the islands move sideways and to add depth I will also animate the clouds the same sideways like the islands. Just keep their speeds different 'cause things don't move at same speed. The wind will affect the objects differently depending on their mass and vulnerability to its effect.
Background: My least favorite part lol, but in this case we have interesting things going on in background. A beam is passing from the mountain through the clouds.
I can animate that through "special fx" (you'll see me creating this in the video time-lapse below)
basically edit it add some light flares with glow.
I can animate that through "special fx" (you'll see me creating this in the video time-lapse below)
basically edit it add some light flares with glow.
* Light flare is the light that appears on image captured in light, and could be seen with naked eye either in sunlight or at night.
Go outside, squint your eyes while seeing any lights source such as vehicles' headlights at a fair distance at night.
Go outside, squint your eyes while seeing any lights source such as vehicles' headlights at a fair distance at night.
(See on internet for better definition, nothing complex.)
Now we are pretty much done, to spice things up lets add some atmospheric elements.
atmospheric elements really push the beauty of art, whether its music, painting or a video.
You can use free to use particle overlays for that purpose. But I will make a custom overlay for this video so it stays in one theme.
Will create floating leaves and tiny glowing particles that could be fireflies.
atmospheric elements really push the beauty of art, whether its music, painting or a video.
You can use free to use particle overlays for that purpose. But I will make a custom overlay for this video so it stays in one theme.
Will create floating leaves and tiny glowing particles that could be fireflies.
Add some smoke between the mountains, tiny things here 'n there such as birds.
Tiny birds really define the humongous landscape scale, as they look majestic flying through the sky. Add if that's something that fits.
DONE! Final image could be used as a live wallpaper on windows 7 10 11 etc
or as a phone live wallpaper too!
Tiny birds really define the humongous landscape scale, as they look majestic flying through the sky. Add if that's something that fits.
DONE! Final image could be used as a live wallpaper on windows 7 10 11 etc
or as a phone live wallpaper too!
Alright, my fingers are rendered with nothing but a great pain typing all this, if you'd like to see the process you can watch on my YouTube channel,
Very time consuming to do a tutorial on this topic instead I wrote these steps with gifs for you & explained as much as possible if you are looking for some guidance or a written tutorial to start your animations :)
I hope it was helpful, appreciate if you've managed to read it through.
Ask me if there's something regarding this topic.
These are some recent projects I've made for clients.
My name is Ali, a motion designer and a musician doing paintings with side jobs with an aim to become a great painter and get hired in a game dev studio make cool characters(●'◡'●)
No comments:
Post a Comment