Use Midjourney + SVGator to create animated graphical illustration.
First thing first, let’s take a look at the demo of my final result:
Now I am going to walk through the simple process I have developed:
Step 1:
Align with your product team what story you want to get through this illustration. After discussion, we want to highlight some problematic pre-existing business processes such as:
lack of API, legacy business solution, manual work, no automation in place, no software to manage infrastructure, long time delivery to market, business move slow, fail to meeting service level agreement, slow restore rate
Step 2:
Ask ChatGPT to come up with some concrete scenes to depict your strategic vision.
Imagine a busy office where employees are overwhelmed with manual work. They’re trying to manage their infrastructure without proper software, struggling to meet service level agreements, and facing slow delivery to market due to lack of automation and outdated business solutions. In the center, there’s a big, old, dusty machine symbolizing the legacy system, with papers flying around representing the chaos and inefficiency.
Looks so good to me! But in the meantime, I also made some tweaks on the prompt to add my personal preference.
Step 3:
Go online to find a random illustration I like online to serve as my baseline reference.
Step 4: Define Style
Narrow down the styles in my prompt definition, here are my full notes study through ocean amount of vector illustration tutorials:
Styles： Illustration Vector , figurative minimalism, flat illustration， — style expressive, ui, ux，UI illustration, GUI, Trending on Artstation, modern flat illustration, trendy vector illustration, solid color illustration, Tourism illustration ，cartoon illustration, simplified flat art
Decoration：organic shape and lines, soft lines,
Background：white background, light theme, clean and solid background
Color Palette： color matching is mainly yellow and black, contrast color, bright color scheme , Pastel colors , harmonious color matching,
Layout： front view, golden ratio composition, Exaggerated proportions of characters
The final styles I end up using was:
a flat simplified business vector illustration, minimalistic, background color white, light theme, color of graphic is blue and soft muted
Step 5:
Go to Midjourney and run the full prompt:
a modern flat simplified vector illustration, background white, soft muted colors, blue, elegantly formal, Business Person look at an old dusty storage array with frustrated face. with clock, teared up calendar, broken gauge and meter, showing a business facing challenge. a series of squiggly, wavy, or spiral lines to show the character is in chaos and confusion. Refer to https://cdni.iconscout.com/illustration/premium/thumb/man-overcoming-business-challenges-6113685-5023145.png
Note: Be cautious of using .png that has transparent background, as the background may not come out clean in the final created art.
After many iterations, I land on the following:
Step 6: Adding Decorative Elements
Isolate the image, use any design software to add some decorative geometric morph shape. This paves the way for animation as well as help giving the same style to your entire set of illustrations.
Step 6: Animate the Decoration
Now I get the SVG decoration I just added, move to SVGator, adding a few animations on opacity, so they show up in order.
In the meantime, give a rotation effect to my background blob. (A morph animation should be more ideal, but this is part of paid feature)
Step 7: Export the Image
Make sure to Export in SVG format, choose Animated, Iterations is Infinite. Feel free to play around with other controls as you like. There are only 3 export available under free account, don’t waste your valuable export opportunities on exploring different formats (like I did).
NOTE: SVGATOR is problematic on Chrome. Try to give it another chance on other browsers before giving up trying.
If you really can’t give up on chrome, some other tools you can use could be: https://tweenui.com/animator/ to achieve the same result.
Step 8: Assembly the Art
This should be engineers job to place two images in a top-bottom fashion. I created a simple HTML to help communicate the requirement, which is the video and link at the top.
http://hanjing.byethost10.com/MJ/animatedIllustration.html
And the set of illustrations I end up get for the entire 4 use cases:
Hope you enjoyed it, I’d love to hear what do you think, and any suggestions and experiences in creating animated illustrations.
