Multi-Modal Art Project

This project is a multi-modal one, started with a sketch and then used that sketch to drive the creative direction of the webpage through generative Ai models.

Design Process Timeline:

Sketch

Step 1:

Started off by sketching my character's head and shoulders as shown in the section above.

Ai Assets

Step 2:

Used Ai to extend my initial idea, and generate most of the other assets, and also incorporated my initial sketch.

Design Tools

Step 3:

Used image design tools to adjust assets and add branding, as well as design the overall web page appearance.

Implement Design

Step 4:

Used a modern web frame work and style tooling to bring the design into the web realm/browser.

Deloy

Step 5:

Share the Multi-Modal art project.

Tools used in the project:

Procreate

This is my image manipulation tool of choice, used it in this project to sketch the main elements of my character. It is packed with so many tools and utilities to help you quickly get into a creative groove.

ChatGpt 5.2

This is the tool i use to create all the assets associated with the project, definitely one of the best ways to make your project have a consistent appearance.

Meshy Ai

This is one of the easiest ways to go from images to textured 3d models, and it even allows you to add animations to the generated models.

After Effects

This is the tool i use for most of my video manipulation, use this one specifically because it allows for the incorporation of 3d models as well. Really instrumental motion design tool in my tool kit.

Next Js

Next Js is my framework of choice when building on the web at the moment, a JavaScript native framework allows for fluid workflow that is easy to scale.

Tailwind CSS

My preferred styling method for Next Js is Tailwind CSS, it may start off looking like some strange inline code, but once you get past that, it ends up speeding up your styling and simplifying responsive design.

Grok Imagine

This is one of my favorite multi-media generation Ai platforms as the generations have sound natively, and the Ai model allows you to explore your creativity and generate almost anything that you can imagine.

Figma

This is the design tool that i used to create the design of the web portion of this project, it is absolutely free and has all the tools necessary to allow you to prototype and architect your web pages and other general design work.

Sketch Process Video Bellow:

Ai Generated Video Bellow:

press play to watch video bellow

Why Multi-Modal art Projects are important:

These types of art projects are important, not only because they allow you to practice all your core skills simultaneously, ranging from design, art, and web development, but as they allow you to mimic Ai systems which are becoming Multi-Modal as current technological trends favor such systems. The idea is to become comfortable with harnessing your creative abilities and dispersing them across a range of modalities to create immersive digital experiences, which essentially leaves your own unique create footprint embedded in the project.

Interactive 3D Model Below

Left click to drag to rotate the model

Left click and Shift to drag model around