Quote (Wretch @ Apr 27 2021 11:28am)
Animation can be a lot. For professional design, it's common to use a few Adobe programs, like export individual layers as rasters or vectors in PS/AI, animate them as 3D objects in After Effects, save as a video file, import the frames to layers back in photoshop to save the final gif and touch up details...
But good news! You won't need to know about any of that for jsp, since we're working with a heavy constraint of 70kb images. Just wanted to point out the breadth of information that may be available in your searches may seem overwhelming, but don't necessarily apply to the minimal animation knowledge you otherwise need to make something suited for jsp.
Animated designs that'll fall under this size limit will be simple animations using very few frames. That said, just edit one frame at a time.
Rain/Snow is an easy one. Take a transparent image of rain drops/snowflakes that's at least 3-4x the pixel height of your design. Start frame 1 with the bottom of the transparent image at the bottom of your design's canvas. Then, simply drag said image down by a certain number of pixels as you progress through each frame. It'll take some finesse to have the animation loop perfectly, and to avoid a sudden, jarring skip (an example being the design posted above me).
Exporting it to be under 70kb without it losing too much quality is an art in itself. The most important thing is limiting your color palette on the whole design. A design with a blue/gray palette for example will turn out a lot smaller than a design with every color of the rainbow when you go to optimize it. GL!
With photoshop its still easy but doing under 70kb with quality has you said is the harder part....
I found some snow rain gif on giohy that you can separate in frame in photoshop and put on your screen/image.
This post was edited by archangel_of_heaven on Apr 27 2021 10:09am