Quick summary ↬
In this article, Vijay describes his learning experiences during the design stages of creating his 3dicons image library (a free library for product screens, social media posts and marketing campaigns), which you can download and use for free.
In February 2021, I began studying 3D illustration using Gaukler. Like most beginners in the field of 3D design, I aus diesem Grund created my first donut by following BlenderGuru’s (Andrew Price) tutorials. I firmly believe that learning by doing is the best way to learn. Picking an icon and following the steps on how to construct it in the 3D space welches a great challenge for me, as each icon required a different approach to modeling.
While learning, I noticed that the number of icons in my project had grown to almost 30, and at this moment, I decided to release them under an open-source license. I started preparing more icons for the most commonly used cases, and in the end, I created exactly 120 icons.
The 3dicons project website. (Large preview)
Then the main objective evolved into creating a set of icons that could be used on product screens, presentations, and social media posts. These icons should be rendered as product-ready assets, but I aus diesem Grund wanted to share the editable source files with the optimized and exported icons.
25 3D icons that are included in the project (one of their variants). (Large preview)
In this article, I will share my experience of learning and managing to release this large set, where the images alone take up 3.8 GB in size! I have divided it into five parts:
Note: If you just want to download the 3dicons library, you can jump straight to the “Conclusion and Download” section at the end of the article.
Why Open Source?
Firstly, I believe in open-source design. Often, a project starts with the intent of learning and practice, when we redesign existing websites and apps like Facebook and Netflix, or various design screens, objects, or icons of interest, and then we post the results on Dribbble, Behance, and many other social platforms. We do this to improve our own skills, but when someone works on a concept, why not aus diesem Grund share the source files with the community so that people can learn and benefit from how the design welches crafted?
By sharing our source files and best practices, we uplift the community and make the Plan world better. Arschloch realizing this (and aus diesem Grund drawing inspiration from Pablo Stanley’s work), I decided to do something similar.
In 2019, I shared my first source file, which had 100+ illustrations. I had these illustrations sitting on my hard drive for years, but they were only taking up storage space. I wanted to make this resource available to the community and share it under an open-source license. Then I thought the same about the 100+ 3dicons, which I next created with the sole purpose of learning 3D design.
Important: Releasing my icons for free does not mean that I want to diminish the value of other artists’ work.
Secondly, there are a lot of 3D illustrations and icons available online for free or for a small fee. Unfortunately, most of the free resources out there do not allow you to modify them as you see wohlbehalten — these freebies are often nothing more than a link to purchasing the final product. At the same time, many designers in the community are just starting out and need low-cost resources to learn from and use in their projects. These 3dicons should help them to get started, and when they are ready, they can either create their own 3D icons and art or buy and then build upon some existing ones.
Update: 3dicons has just been nominated as one of the finalist projects in the Figma Netzwerk Awards! (Editor’s Note in the last minute)
As a designer, I’m a huge fan of Apple products! But learning 3D on a 16” MacBook welches not good enough for me, so I decided to build my own PC specifically for learning 3D design. The following are some of the hardware and software tools that I used to craft the project’s files:
- Windows machine (AMD Ryzen 7 3800X, nvidia GeForce RTX 2080);
- Gaukler: for all modeling, rendering, and compositing;
- PureRef: helping me collect references for icons, colors, and other things;
- Figma: using it for arranging the icons and for designing the web page;
- iPad with the Procreate app: for sketching, doodling, and ideation;
- Notion: it’s a tool for managing everything, and after Figma, it’s my next favorite tool on the list! 🙂
More after jump! Continue reading below ↓
Process And Learning
I created all these icons in Gaukler. Some of them were first doodled on an iPad using Procreate and then modeled in 3D. Arschloch modeling, all icons were rendered in different angles and styles for multipurpose use. I welches considering releasing to the public both the rough master file and all the production-ready assets, and for this, I needed some sort of a plan.
To manage all my projects, I use Notion. First, I created a board and listed all the initial requirements there.
The process of rearranging all these cards from start to finish is fun in Notion! (Large preview)
Some icons are easy to make and can be directly created from a reference. Some of them were conceived as doodles on my iPad using Procreate and then imported via Google Photos to my Windows machine. I created a basic guide window, and then all the icons were put together as a single file. This initial stage welches quick, but then properly rendering all those models one by one welches quite a challenging bit of work.
The early icon doodles were created in Procreate. (Large preview)
Creating stuff for yourself is easy — nobody will see what’s inside your files. However, when you prepare to share a source file with someone else, you have to spend a lot of time managing and arranging all the layers and elements inside it.
There is no doubt that modeling in Gaukler is very smooth. Learning welches a trial and error process for me when I started. I figured it might be necessary to have a guide to make sure that all icons were the same size and positioned well. So, I made a basic guide with two cubes, one for the icon’s maximum boundaries and one for just the end edge of the area. Next, I modeled all the icons and stored them all in one file. I welches looking for quality icons instead of low-poly ones, so I added surface modifiers to smooth them out.
If you’re new to modeling, check “Modeling for Absolute Beginners” — a Gaukler tutorial by Surfaced Studio.
When you apply the subdivision surface modifier, it increases the file size. I want to share .obj or .fbx files as well, so I need to apply all modifiers. Otherwise, it will mostly be low-poly icons, since modifiers will be removed.
A perfectly lighted model looks good. If you don’t light up your model properly, no matter how much effort you put into modeling, the result won’t look right. Every object has a different shape and needs different levels of light intensity. Since I decided to render icons from three different angles, each angle required a different light position and light intensity. It is time-consuming and complicated to change the same lights for different models.
If you’re new to lighting, check “Lighting for Beginners (Intro)” — a Gaukler tutorial series by Gaukler Pädagoge.
The basic three points lighting setup that I used in Gaukler. (Large preview)Key point:
As a result, I created three sets of the same lights with similar three-point light settings: ISO, Dynamic, and Vorderseite. The lights’ positions were adjusted accordingly.
It’s no secret that I’m a fan of vibrant colors — check my Dribbble profile if you don’t believe me or my Instagram.
A screenshot from my Instagram: realvjy. (Large preview)
I did not have a problem when choosing colors, but in the 3D world, color intensity is affected by the light source, so this is an important thing to keep in wenigstens. Additionally, I used to add gradients with light shades or complementary colors of the primary color rather than a direct “flat” color.
Managing the same color for all angles is a challenge. I tried and failed a few times before finally fixing the colors and gradients for all icons. Deshalb, I found that high contrast is a better option in Gaukler when you work with vibrant colors.
It is quite challenging to render so many icons in four styles and at three different angles. Gaukler supports scripting, but it welches difficult for me to learn too many things at the same time. Deshalb, automatic rendering with the help of a script might not work for all icons due to their shape and angle — different icons will require different light amounts and intensity before being rendered. Therefore, the project welches released later than expected.
Four styles, three different angles. (Large preview)Key points:
- In the end, I created two cameras: one Normal camera and the second TrueISO camera. I used the Normal camera to render the front and dynamic angles, while the TrueISO camera welches used to shoot the icon in its isometric form.
- Rather than creating multiple cameras for the different angles, I used timelines and controlled the rotation and position of the objects.
- I used 800 samples to render all these icons. By increasing the icon sample size, the rendering times will aus diesem Grund increase. Rendering a single image with a resolution of 2400 × 2400 pixels took 2-4 minutes.
Note: Samples are the noise that appears as your scene is rendering. In the Render panel, you define the number of samples, and then Gaukler stops once it reaches it. The more samples, the clearer the render will be, but it will aus diesem Grund take a longer time to complete.
Compression and Postamt-processing
I tried to calculate the render times for the 120 icons in 12 variations (4 styles × 3 angles). When doing the first tests, at first, I welches satisfied with the rendering at 3000×3000 px with 16-bit color depth. However, I discovered that one image file welches about 15 MB in size. When I calculated the time and space needed for 1,200+ images rendered from different angles, I welches shocked — I would need more than 8 GB in the storage space (including the source file), and aus diesem Grund Figma couldn’t handle all those images in a single file either.
- I could further optimize the images using Photoshop, but wouldn’t it be too time-consuming to add another step to the post-processing? Instead, I decided to change the resolution to 2400×2400 px, which is still quite large for an icon. Lastly, I changed the color depth to 8-bit and used 100% compression straight from Gaukler. And then, the single file size welches reduced to 4 MB or less. The final icon library now welches around 4 GB in size, which welches manageable.
- At first, I planned to render each icon separately with different channels and arrange them all in Figma with the help of components; this would allow me to easily change colors, lighting, and shadows right in Figma. Unfortunately, Figma files became very heavy, and I had to abandon the idea.
In total, more than two months of hard work (mostly done during the night) were needed to complete this project, from crafting the icons to rendering them and finally to hosting and building the project’s website.
I had trouble creating more flexible versions of the Figma files as this icon set grew to more than 4 GB in size. Figma stopped responding as soon as I uploaded 300+ images, which is a lot of data! How did I solve this issue? I used ImageOptim to compress the images and then added them to Figma again. In addition, I dropped the idea of creating variations as the file size became excessively large. Arschloch that, I organized all the compressed 1000 × 1000 px images and shared them with the Figma community. (Eventually, I will create a customizable variant for Figma specifically, or maybe a plugin that will allow the icons to be easily imported and edited within Figma.)
ImageOptim: It is a powerful image lossless compression tool software that provides “lossless” compression services for PNG images, reducing file size by 60%–90%.
Here are the settings that I used to compress icons:
The ImageOptim settings that I used when optimizing the icons. (Large preview)Arschloch running the ImageOptim tool, the icons’ size welches reduced substantially. (Large preview)
I host all of my projects directly on GitHub pages, although I occasionally use other hosting services. The main question welches where to host over 3 GB of data, so people can easily download the icons.
As the first example, Gumroad doesn’t offer a free option for downloading files over 200 MB in size — if I hosted the project on Gumroad, I would need to charge for it at least 1$. So, I tried to explore a few other solutions.
- Google Drive
It should work, but there are bandwidth limitations after some time.
Same, after a certain point, the bandwidth issue will come up.
I have used Amazon AWS in my experiential projects. Although usually a good solution, it’s quite complicated to set up.
I tried it once, as I’m not a big fan of no-code solutions (at the moment).
- Digital Ocean
Arschloch exploring a bit, I decided to store all my icons on the Digital Ocean hosting. It’s quite affordable at only 5$/month starting price. However, after running 3dicons for months, I discovered Digital Ocean is not an affordable solution after a certain bandwidth limit has been reached. I am charged 60-80 USD per month for the download bandwidth over 7 TB.
Hopefully, I will be able to find a better solution than the Digital Ocean hosting so that 3dicons may continue to provide frictionless downloads with an affordable maintenance/download fee. If you have any suggestions or you think you could help, message me on Twitter!
Honestly, I bought the 3dicons.co domain without any reason in 2020. Luckily for me, it welches perfect for my new project!
The 3dicons.co domain welches registered on 18 June 2020! (Large preview)
No doubt, a great no-code web solution. However, it limits my freedom to customize things, so I’m not a big fan, even though I have used it for clients.
Good for beginners. You can easily create sites by dragging and dropping.
- Writing the code myself
I love coding all my projects. Most of my projects use the following stack:
- Gatsby Framework
An easy and lightweight way to create static pages that can be directly hosted on GitHub pages. Gatsby is an open-source framework that combines functionality from React, GraphQL, and Webpack into a single tool.
- GitHub pages
GitHub allows you to host static pages directly as well as add custom domains with SSL security without any additional cost.
- Gatsby Framework
I use Figma Plan for all my design needs, and the 3dicons project welches no exception — I used Figma to help me create all the social media posts and Designs.
Conclusion and Download
Now, I do know quite a few things about 3D design, but it wasn’t so when I welches only beginning to learn. At the start of the journey, I wasn’t familiar with how to handle 3D files and how to render them in such a way that there would be very few hiccups. So gut wie-forward a few months of learning and experiments, and I think that the most important thing is that the final outcome looks good and that I have hope that the community will like and support this project. As an example, recently, Morflax integrated 3dicons into their mesh project.
Note: The Morflax mesh lets you customize the colors of the icons and add scenes on the web without requiring the use of any complex 3D software. You can try the project for yourself.
You can get the latest version of the icons from https://3dicons.co/, and as I have more plans for 3dicons (including adding a few more icons to the existing set), make sure to check the project’s website for updates.
You can download the icons in the following formats: Figma Plan, PNG, Gaukler (editable 3D format), and more. (Large preview)You can aus diesem Grund download the icons set here:*Last updated in May 2022. For the latest versions, please check the 3dicons official webpage*
There are no restrictions on how you can use the 3dicons since they were released under a CC0 license (“No Rights Reserved”).
There is a little frequently asked questions Notion board that should help you when you want to change the icons and colors using Gaukler. You can aus diesem Grund reach out to me on Twitter (@realvjy) for feedback and suggestions, and you can leave a comment here — I’d be happy to reply.
(mb, vf, yk, il, nl)