Boost B‑Side Icon Design with Stable Diffusion & ControlNet: A Step‑by‑Step Guide
This tutorial shows how designers can streamline the creation of 3D frosted‑glass B‑end icons by leveraging Stable Diffusion and ControlNet, covering model setup, line‑art preparation, prompt engineering, generation parameters, and post‑processing to achieve high‑quality results efficiently.
Designers often spend excessive time on concept, production, and rendering of B‑end icons, which feature a 3D frosted‑glass style used in operation detail pages, UI headers, and banners. By integrating Stable Diffusion (SD) with AI tools, the workflow can be significantly optimized.
The required models include the base SD model, an external VAE model, a Refiner model, and a ControlNet model, all sourced from the original model authors.
Default parameters are sufficient for most cases; the sampling method DPM++ 3M SDE Karras yields smoother images with cleaner backgrounds. It is recommended to set the iteration steps to 30 or higher to balance detail and performance.
For line‑art processing, use ControlNet to guide the generation. Prepare clear line drawings in Photoshop, ensuring consistent stroke thickness, clean fuzzy areas, and well‑defined corners. Simple outlines are enough to quickly create B‑end icons, while complex graphics should avoid overly intricate models.
Suggested positive prompt example:
(a shield icon:1.1), dark blue frosted glass texture, dark blue gradient, (softedges:1.2), 3D, best quality, many details, 4k, blender, octane render, C4D, transparent glass texture, industrial design, white background, studio lightingSuggested negative prompt example:
lowres, bad anatomy, ((bad hands)), worst quality:2, low quality:2, paintings, sketches, error, missing fingersAfter selecting the model and parameters, input the keywords, upload the processed line art to ControlNet, click the generate button, and let the system produce the icon.
Post‑generation, the icon can be refined further in Photoshop or re‑rendered using image‑to‑image techniques to enhance details.
The overall workflow can be broken down into six steps: find reference images, process line art, extract keywords, control generation with ControlNet, re‑optimize the icon, and apply it in the project.
AI tools dramatically reduce post‑production time, allowing designers to focus on imagination and explore a wider range of visual expressions.
58UXD
58.com User Experience Design Center
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.