AI Generated 3D Icons
Using Midjourney to craft 3D icons catering to all aspects of pet care and pet app platforms
Timeline
1 week
My role
UI Designer
Context
Crafting trendy 3D icons for UI/UX design is often a tedious process, requiring specialized software, proficiency in 3D modeling, or time investment for iterations.
I'm wondering...
🤔
What if we can use AI to speed up and assist the creating process? which is why I explored using Midjourney, an AI-powered tool that streamlines the creation.
The theme
🐶
I've chosen pet as the theme of my 3D icon set, addressing an in-demand niche within the UI/UX design community with the booming pet app market.
Result
The finished 3D icons were now shared to Figma Community as a free source for community usage.
Process (1)
To begin, I brainstormed and listed the elements required for a pet care app, considering various aspects such as pet grooming, feeding, healthcare, and more.
This process involved understanding user needs and envisioning how the icons would fit within the app's interface.
Process (2)
Let's start testing & analyzing prompt with Midjourney
Now, it's time to start generating a base prompt to control the style I like. How? See below cards for the 2 steps.
Browse inspiration of style
Start with bowse and save references that closely resemble the style you envision for your icons. We'll use it later.
Utilize Midjourney's /describe Function
Simply input the images or describe the style you're aiming for, and let Midjourney generate a prompt for you.
Once Midjourney generates the prompt, review it to ensure it aligns with your vision. Copy the prompt and save it for reference during the design process. This prompt will serve as a guiding framework as you create your 3D icons.
Analyze the prompt, splitting it into different categories. Use this as a starting point, adding, deleting, and changing the information in the prompt to align it with your desired outcome.
Set of icons for a mobile application, a chat bubble over the calendar and clock, a bell on the top right side, a flower in the center with a yellow ribbon around it, a dollar sign at the bottom left corner, a megaphone to represent a company mascot or character below that one, a gift box icon, 3d render in the style of vector illustration, a clay material design set, against a black background, bright colors in a bright soft lighting, ui design in the flat style, isometric view
Description of the style of icons
The Objects of icons
(to be replaced)
Perspective
Background color
Process (4)
Parameter Control to adjust the level of artistic detail
the icons to be (optional)
—Stylize
This parameter determines the level of artistic detail in the image. Since we're creating icons, we aim for a smooth and cartoony style, avoiding excessive detail or complicated curves. The ideal value range for this parameter I tested for 2D icons is --stylize 200.
--Stylize 10
set of icons for mobile application, A filled ceramic bowl, A filled glass bowl, A rolled-up leash with a clip, A small roll of poop bags, A pill bottle with a red cross, A digital thermometer , 3d render in the style of vector illustration, a clay material design set, with a rose pink, creamy yellow, and Tiffany blue color palette, on a white background, bright colors in a bright soft lighting, ui design in the flat style, isometric view --stylize 10
--Stylize 700
set of icons for mobile application, A filled ceramic bowl, A filled glass bowl, A rolled-up leash with a clip, A small roll of poop bags, A pill bottle with a red cross, A digital thermometer , 3d render in the style of vector illustration, a clay material design set, with a rose pink, creamy yellow, and Tiffany blue color palette, on a white background, bright colors in a bright soft lighting, ui design in the flat style, isometric view --stylize 700
The final prompt design for copy & paste
*Substitutable part is in blue colored font
set of icons for mobile application, A filled ceramic bowl, A filled glass bowl, A rolled-up leash with a clip, A small roll of poop bags, A pill bottle with a red cross, A digital thermometer, A digital scale, A miniature calendar with a paw print on a specific date, A notepad with a paw print on the cover , 3d render in the style of vector illustration, a clay material design set, with a rose pink, creamy yellow, and Tiffany blue color palette, on a white background, bright colors in a bright soft lighting, ui design in the flat style, isometric view --stylize 200
Result of the revised prompt
Image to change with the change of icon objects description
Process (3)
By having the a base style prompt to control the style of the 3D icons, i’m going to create a series of icons adding below new constraints
New Color Palette
Description of colors must be detailed. Instead of "blue,pink,yellow", use "Tiffiney blue, Rose pink, and cream yellow"
Tiffney blue
Rose pink
Cream yellow
Perspective
Icons should be designed in various perspectives, including isometric, front-facing, and others.
objects
Refer to Step 1, see what are the object i'll generate for creating the 3D icons
Original Prompt:
Revised Prompt (highlighted):
Set of icons for a mobile application, a chat bubble over the calendar and clock, a bell on the top right side, a flower in the center with a yellow ribbon around it, a dollar sign at the bottom left corner, a megaphone to represent a company mascot or character below that one, a gift box icon, 3d render in the style of vector illustration, a clay material design set, against a black background, bright colors in a bright soft lighting, ui design in the flat style, isometric view
set of icons for mobile application, A filled ceramic bowl, A filled glass bowl, A rolled-up leash with a clip, A small roll of poop bags, A pill bottle with a red cross, A digital thermometer, A digital scale, A miniature calendar with a paw print on a specific date, A notepad with a paw print on the cover , 3d render in the style of vector illustration, a clay material design set, with a rose pink, creamy yellow, and Tiffany blue color palette, on a white background, bright colors in a bright soft lighting, ui design in the flat style, isometric view
(Icon objects changed)
(perspective)
(changed to white background)
(new color theme)
Process (5)
I Utilize Picsart, an AI-powered platform for efficient post-image editing to enhance quality and then remove background in just a few clicks.
Quality Enhancement
Upon receiving the 1024x1024 image from Midjourney, the initial resolution may be insufficient after cropping. Therefore, the first step is to enhance the image quality by enlarging it and optimizing for the best possible resolution.
Remove background
After enhancing the image quality, seamlessly remove the background with just one click using Picsart's advanced background removal tool. This step streamlines the process and ensures a clean, professional result for the final icon.
Final 3D Icons
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
