Using AI to Create Vector Illustrations for your UI

Key Takeaways

take a look at this artwork it's animated it's vector and it's also generated by AI today I'm going to show you the steps involved in producing AI generated Vector illustrations with just a few steps the first step is to generate the art now I'm going to use mid-journey and here's my first prompt imagine a simple cartoon cube with an angry face Vector 2D illustration now here's the first four results it came up with I issued slight variations of that same prompt a few other times now here's one where I added pen and ink to the prompt and here's another where I added low polygon to The Prompt I actually like the top right the most because it's very simple the more simple your image the better because that will equate to a lower file size this is especially important if you want to use it on the web while it sort of looks Vector it's still rastered we need to vectorize it ourselves now there are plenty of tools to do this but I found Adobe Illustrator to produce the best results once you open the image in illustrator you can use one of their image tracing presets I found the 16 colors produces a pretty good result now after you image Trace then click expand voila your image is now Vector however it needs cleaned up so here I'm creating my own shape to flatten out the edges of the cube and using the Pathfinder divide option now if we were to export this as an SVG right now it would be a whopping 80 plus kilobytes we can use illustrator's simplify tool to reduce the number of anchor points what you're trying to do is to both maintain the integer security of the shape while reducing the number of anchor points here I'm going from 2400 points to 1400 which is a huge reduction now if I export it it's now 50 kilobytes instead of 80 but we can further reduce it by exporting it as an SVG and importing it into a tool called SVG OMG after saving it's now a much more respectable 20 kilobytes at this point you're not free to use it on the web add a little animation and now we have a very angry floating cube if you enjoyed this video check out designcores.com where you can learn UI ux CSS and more with my custom interactive platform that makes learning fun and easy