AI-Generated 3D Icons: Enhancing Pet Care Experiences
Crafting Custom 3D Icons with Midjourney for Pet Apps
Team Structure
Solo Designer
Tool
Midjourney, Picsart
Time Frame
Mar. 2024
Responsibilty
Icon Design, Prompt Design
✦ 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.
With the emerging AI tools, is there any way we could optimize the 3D modeling process?
✦ Result
The finished 3D icons were now shared to Figma Community as a free source for community usage.
✦ Step 1: Brainstorming
To begin, I brainstormed a list of essential icons 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.
✦ Step 2: Generating & analyzing prompt
Generating the Prompt with Midjourney by browse inspiration for the style of icon i like.
I begin by exploring various styles of 3D icons on Pinterest to gather inspiration. Save images that closely resemble the style you envision for your icons.
Pinterest references
Then, Utilize Midjourney’s /describe Function. Open Midjourney and utilize its “/describe” function. This feature helps generate descriptive prompts based on the images you’ve collected. Simply input the images or describe the style you’re aiming for, and let Midjourney generate a prompt for you.
Use /describe in Midjourney to generate prompt of reference img
Now, copy and Save the Prompt as your style reference. 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.
✦ Step 3: Define & revise
By having the prompt as a base style to design my own 3D icons, i’m going to create a series of icons adding below new constraints:
New Color Palette, Perspective and Objects
Constraint 1: New Color Palette
Description of colors must be detailed. Instead of “blue,pink,yellow”, use “Tiffiney blue, Rose pink, and cream yellow”
Use /describe in Midjourney to generate prompt of reference img
Constraint 2: Perspective
Icons may be generated in various perspectives, including isometric, front-facing, and others.
Use /describe in Midjourney to generate prompt of reference img
Constraint 3: Objects
Refer to Step 1, see what are the object i’ll generate for creating the 3D icons.
By adding these considerations, the prompt now is revised as below:
✦ Step 4: Parameter Control (optional)
— stylize 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.
compare — stylize 10 vs. — stylize 700
✦ Step 5: Final prompt for you to copy & paste
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
✦ Step 6: post-processing with Picsart
I utilize Picsart, an AI-powered platform for efficient post-image editing to enhance quality and then remove backgroun in just a few clicks.
Feature 1: AI 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.
The AI Enhance feature in Picsart
Feature 2: 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.
The Remove Background feature in Picsart
✦ Result
Finally! The Final 3D Icons
Even though the process listing may seem long, but once you try it, you’ll find it to be efficient and easy. Also, once you’ve learned the key way to control the style in Midjourney, you’ll be able to transfer the method to generate the style you like.
Overall, the process of exploration is very fun, but I haven’t seen too many people do it this way yet. If you have any better methods or tips for using AI as a creative tool, let’s share; I’d be very interested. 😄
