Open-Source 3dicons Library: Case Study And Free Downloads — Smashing Magazine
by Jeff Kerby | May 30, 2022 | Design, Resources |
Open-Source 3dicons Library: Case Study And Free Downloads
About The Author
Vijay Verma is a design wizard who loves creating beautiful things. Currently he is exploring NFTs, the metaverse, and learning more about 3D. Past projects …
More about
Vijay ↬
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 Blender. Like most beginners in the field of 3D design, I also 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 was 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.
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 also wanted to share the editable source files with the optimized and exported icons.
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 also share the source files with the community so that people can learn and benefit from how the design was crafted?
By sharing our source files and best practices, we uplift the community and make the Design world better. After realizing this (and also 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 fit — 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 Community 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 was 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:
More after jump! Continue reading below ↓Image Optimization, Addy Osmani’s brand new practical guide to optimizing and delivering
high-quality images on the web. From formats and compression to delivery and maintenance: everything in one single
528-pages book.
Jump to table of contents ↬
Meet Image Optimization, Addy Osmani’s brand new practical guide to optimizing and delivering high-quality images on the web. From formats and compression to delivery and maintenance: everything in one single 528-pages book.
Process And Learning
I created all these icons in Blender. Some of them were first doodled on an iPad using Procreate and then modeled in 3D. After modeling, all icons were rendered in different angles and styles for multipurpose use. I was 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.
Planning Stage
To manage all my projects, I use Notion. First, I created a board and listed all the initial requirements there.
There is no doubt that modeling in Blender is very smooth. Learning was 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 was 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 Blender tutorial by Surfaced Studio.
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 Blender tutorial series by Blender Guru.
Coloring (Shading)
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.
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 mind. Additionally, I used to add gradients with light shades or complementary colors of the primary color rather than a direct “flat” color.
It is quite challenging to render so many icons in four styles and at three different angles. Blender supports scripting, but it was difficult for me to learn too many things at the same time. Also, 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 was released later than expected.
Note: Samples are the noise that appears as your scene is rendering. In the Render panel, you define the number of samples, and then Blender stops once it reaches it. The more samples, the clearer the render will be, but it will also take a longer time to complete.
Compression and Post-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 was satisfied with the rendering at 3000×3000 px with 16-bit color depth. However, I discovered that one image file was about 15 MB in size. When I calculated the time and space needed for 1,200+ images rendered from different angles, I was shocked — I would need more than 8 GB in the storage space (including the source file), and also Figma couldn’t handle all those images in a single file either.
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. After 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:
I host all of my projects directly on GitHub pages, although I occasionally use other hosting services. The main question was where to host over 3 GB of data, so people can easily download the icons.
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!
Website Domain
Honestly, I bought the 3dicons.co domain without any reason in 2020. Luckily for me, it was perfect for my new project!
Frontend
Assets Creation
I use Figma Design for all my design needs, and the 3dicons project was 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 was 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. Fast-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.
Need help?
There is a little FAQ Notion board that should help you when you want to change the icons and colors using Blender. You can also 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)
This content was originally published here.
