In February 2021, I started learning 3D illustration utilizing Blender. Like most newcomers within the subject of 3D design, I additionally created my first donut by following BlenderGuru’s (Andrew Worth) tutorials. I firmly consider that studying by doing is one of the best ways to be taught. Choosing an icon and following the steps on assemble it within the 3D area was an awesome problem for me, as every icon required a distinct strategy to modeling.
Whereas studying, I observed that the variety of icons in my challenge had grown to nearly 30, and at this second, I made a decision to launch them underneath an open-source license. I began making ready extra icons for probably the most generally used instances, and ultimately, I created precisely 120 icons.
Then the principle goal advanced into making a set of icons that may very well be used on product screens, shows, and social media posts. These icons ought to be rendered as product-ready property, however I additionally wished to share the editable supply recordsdata with the optimized and exported icons.
On this article, I’ll share my expertise of studying and managing to launch this huge set, the place the pictures alone take up 3.8 GB in dimension! I’ve divided it into 5 elements:
Observe: In case you simply wish to obtain the 3dicons library, you may leap straight to the “Conclusion and Download” part on the finish of the article.
Why Open Supply?
Firstly, I consider in open-source design. Usually, a challenge begins with the intent of studying and follow, once we redesign current web sites and apps like Fb and Netflix, or varied design screens, objects, or icons of curiosity, after which we put up the outcomes on Dribbble, Behance, and plenty of different social platforms. We do that to enhance our personal abilities, however when somebody works on an idea, why not additionally share the supply recordsdata with the group so that individuals can be taught and profit from how the design was crafted?
By sharing our supply recordsdata and greatest practices, we uplift the group and make the Design world higher. After realizing this (and likewise drawing inspiration from Pablo Stanley’s work), I made a decision to do one thing related.
In 2019, I shared my first supply file, which had 100+ illustrations. I had these illustrations sitting on my arduous drive for years, however they have been solely taking on space for storing. I wished to make this useful resource accessible to the group and share it underneath an open-source license. Then I believed the identical in regards to the 100+ 3dicons, which I subsequent created with the only function of studying 3D design.
Vital: Releasing my icons at no cost doesn’t imply that I wish to diminish the worth of different artists’ work.
Secondly, there are lots of 3D illustrations and icons accessible on-line at no cost or for a small payment. Sadly, many of the free sources on the market don’t let you modify them as you see match — these freebies are sometimes nothing greater than a hyperlink to buying the ultimate product. On the similar time, many designers in the neighborhood are simply beginning out and wish low-cost sources to be taught from and use of their tasks. These 3dicons ought to assist them to get began, and when they’re prepared, they will both create their very own 3D icons and artwork or purchase after which construct upon some current ones.
Replace: 3dicons has simply been nominated as one of many finalist tasks within the Figma Neighborhood Awards! (Editor’s Observe within the final minute)
Instruments Used
As a designer, I’m an enormous fan of Apple merchandise! However studying 3D on a 16″ MacBook was not ok for me, so I made a decision to construct my very own PC particularly for studying 3D design. The next are a number of the {hardware} and software program instruments that I used to craft the challenge’s recordsdata:
- Home windows machine (AMD Ryzen 7 3800X, nvidia GeForce RTX 2080);
- Blender: for all modeling, rendering, and compositing;
- PureRef: serving to me acquire references for icons, colours, and different issues;
- Figma: utilizing it for arranging the icons and for designing the net web page;
- iPad with the Procreate app: for sketching, doodling, and ideation;
- Notion: it’s a instrument for managing all the things, and after Figma, it’s my subsequent favourite instrument on the record! 🙂
Course of And Studying
I created all these icons in Blender. A few of them have been first doodled on an iPad utilizing Procreate after which modeled in 3D. After modeling, all icons have been rendered in several angles and types for multipurpose use. I used to be contemplating releasing to the general public each the tough grasp file and all of the production-ready property, and for this, I wanted some type of a plan.
Planning Stage
To handle all my tasks, I exploit Notion. First, I created a board and listed all of the preliminary necessities there.
Modeling
Some icons are straightforward to make and will be instantly created from a reference. A few of them have been conceived as doodles on my iPad utilizing Procreate after which imported through Google Photographs to my Home windows machine. I created a fundamental information window, after which all of the icons have been put collectively as a single file. This preliminary stage was fast, however then correctly rendering all these fashions one after the other was fairly a difficult bit of labor.
Challenges
Creating stuff for your self is straightforward — no one will see what’s inside your recordsdata. Nonetheless, while you put together to share a supply file with another person, you will have to spend so much of time managing and arranging all of the layers and components inside it.
Modeling
There isn’t a doubt that modeling in Blender could be very easy. Studying was a trial and error course of for me after I began. I figured it is perhaps essential to have a information to be sure that all icons have been the identical dimension and positioned properly. So, I made a fundamental information with two cubes, one for the icon’s most boundaries and one for simply the top fringe of the world. Subsequent, I modeled all of the icons and saved them multi function file. I used to be on the lookout for high quality icons as an alternative of low-poly ones, so I added surface modifiers to smooth them out.
In case you’re new to modeling, examine “Modeling for Absolute Beginners” — a Blender tutorial by Surfaced Studio.
Key level:
While you apply the subdivision floor modifier, it will increase the file dimension. I wish to share
.objor.fbxrecordsdata as properly, so I want to use all modifiers. In any other case, it would principally be low-poly icons, since modifiers can be eliminated.
Lighting
A superbly lighted mannequin appears good. In case you don’t gentle up your mannequin correctly, regardless of how a lot effort you place into modeling, the consequence gained’t look proper. Each object has a distinct form and desires completely different ranges of sunshine depth. Since I made a decision to render icons from three completely different angles, every angle required a distinct gentle place and light-weight depth. It’s time-consuming and complex to vary the identical lights for various fashions.
In case you’re new to lighting, examine “Lighting for Beginners (Intro)” — a Blender tutorial collection by Blender Guru.
Key level:
Consequently, I created three units of the identical lights with related three-point gentle settings: ISO, Dynamic, and Entrance. The lights’ positions have been adjusted accordingly.
I didn’t have an issue when selecting colours, however within the 3D world, shade depth is affected by the sunshine supply, so this is a vital factor to bear in mind. Moreover, I used so as to add gradients with gentle shades or complementary colours of the first shade somewhat than a direct “flat” shade.
Key level:
Managing the identical shade for all angles is a problem. I attempted and failed a number of instances earlier than lastly fixing the colours and gradients for all icons. Additionally, I discovered that top distinction is a greater choice in Blender while you work with vibrant colours.
Rendering
It’s fairly difficult to render so many icons in 4 types and at three completely different angles. Blender supports scripting, nevertheless it was tough for me to be taught too many issues on the similar time. Additionally, computerized rendering with the assistance of a script won’t work for all icons attributable to their form and angle — completely different icons would require completely different gentle quantities and depth earlier than being rendered. Due to this fact, the challenge was launched later than anticipated.
Key factors:
- In the long run, I created two cameras: one Regular digital camera and the second TrueISO digital camera. I used the Regular digital camera to render the entrance and dynamic angles, whereas the TrueISO digital camera was used to shoot the icon in its isometric kind.
- Fairly than creating a number of cameras for the completely different angles, I used timelines and managed the rotation and place of the objects.
- I used 800 samples to render all these icons. By growing the icon pattern dimension, the rendering instances can even improve. Rendering a single picture with a decision of 2400 × 2400 pixels took 2-4 minutes.
Observe: Samples are the noise that seems as your scene is rendering. Within the Render panel, you outline the variety of samples, after which Blender stops as soon as it reaches it. The extra samples, the clearer the render can be, however it would additionally take an extended time to finish.
Compression and Publish-processing
I attempted to calculate the render instances for the 120 icons in 12 variations (4 types × 3 angles). When doing the primary assessments, at first, I used to be happy with the rendering at 3000×3000 px with 16-bit shade depth. Nonetheless, I found that one picture file was about 15 MB in dimension. After I calculated the time and area wanted for 1,200+ pictures rendered from completely different angles, I used to be shocked — I would wish greater than 8 GB within the space for storing (together with the supply file), and likewise Figma couldn’t deal with all these pictures in a single file both.
Key factors:
- I may additional optimize the pictures utilizing Photoshop, however wouldn’t or not it’s too time-consuming so as to add one other step to the post-processing? As an alternative, I made a decision to vary the decision to 2400×2400 px, which remains to be fairly giant for an icon. Lastly, I modified the colour depth to 8-bit and used 100% compression straight from Blender. After which, the one file dimension was decreased to 4 MB or much less. The ultimate icon library now was round 4 GB in dimension, which was manageable.
- At first, I deliberate to render every icon individually with completely different channels and prepare all of them in Figma with the assistance of elements; this is able to permit me to simply change colours, lighting, and shadows proper in Figma. Sadly, Figma recordsdata turned very heavy, and I needed to abandon the thought.
Launch
In complete, greater than two months of arduous work (principally finished in the course of the night time) have been wanted to finish this challenge, from crafting the icons to rendering them and eventually to internet hosting and constructing the challenge’s web site.
Figma Neighborhood
I had hassle creating extra versatile variations of the Figma recordsdata as this icon set grew to greater than 4 GB in dimension. Figma stopped responding as quickly as I uploaded 300+ pictures, which is lots of information! How did I clear up this challenge? I used ImageOptim to compress the pictures after which added them to Figma once more. As well as, I dropped the thought of making variations because the file dimension turned excessively giant. After that, I organized all of the compressed 1000 × 1000 px pictures and shared them with the Figma group. (Finally, I’ll create a customizable variant for Figma particularly, or possibly a plugin that can permit the icons to be simply imported and edited inside Figma.)
ImageOptim: It’s a highly effective picture lossless compression instrument software program that gives “lossless” compression companies for PNG pictures, decreasing file dimension by 60%–90%.
Listed below are the settings that I used to compress icons:
Internet hosting
I host all of my tasks instantly on GitHub pages, though I sometimes use different internet hosting companies. The primary query was the place to host over 3 GB of information, so individuals can simply obtain the icons.
- Gumroad
As the primary instance, Gumroad doesn’t provide a free choice for downloading recordsdata over 200 MB in dimension — if I hosted the challenge on Gumroad, I would wish to cost for it not less than 1$. So, I attempted to discover a number of different options. - Google Drive
It ought to work, however there are bandwidth limitations after a while. - Dropbox
Similar, after a sure level, the bandwidth challenge will come up. - AWS
I’ve used Amazon AWS in my experiential tasks. Though often an excellent answer, it’s fairly sophisticated to arrange. - Webflow
I attempted it as soon as, as I’m not a giant fan of no-code options (for the time being). - Digital Ocean
After exploring a bit, I made a decision to retailer all my icons on the Digital Ocean internet hosting. It’s fairly reasonably priced at solely 5$/month beginning value. Nonetheless, after working 3dicons for months, I found Digital Ocean just isn’t an reasonably priced answer after a sure bandwidth restrict has been reached. I’m charged 60-80 USD per thirty days for the obtain bandwidth over 7 TB.
Hopefully, I will discover a higher answer than the Digital Ocean internet hosting in order that 3dicons might proceed to offer frictionless downloads with an reasonably priced upkeep/obtain payment. You probably have any options otherwise you suppose you may assist, message me on Twitter!
Web site Area
Actually, I purchased the 3dicons.co area with none purpose in 2020. Fortunately for me, it was good for my new challenge!
Frontend
- Webflow
Little doubt, an awesome no-code net answer. Nonetheless, it limits my freedom to customise issues, so I’m not a giant fan, regardless that I’ve used it for purchasers. - Wix
Good for newcomers. You possibly can simply create websites by dragging and dropping. - Writing the code myself
I like coding all my tasks. Most of my tasks use the next stack:- Gatsby Framework
A straightforward and light-weight solution to create static pages that may be instantly hosted on GitHub pages. Gatsby is an open-source framework that mixes performance from React, GraphQL, and Webpack right into a single instrument. - GitHub pages
GitHub permits you to host static pages instantly in addition to add customized domains with SSL safety with none extra price.
- Gatsby Framework
Belongings Creation
I exploit Figma Design for all my design wants, and the 3dicons challenge was no exception — I used Figma to assist me create all of the social media posts and Designs.
Conclusion and Obtain
Now, I do know fairly a number of issues about 3D design, nevertheless it wasn’t so after I was solely starting to be taught. At first of the journey, I wasn’t aware of deal with 3D recordsdata and render them in such a manner that there can be only a few hiccups. Quick-forward a number of months of studying and experiments, and I feel that a very powerful factor is that the ultimate final result appears good and that I’ve hope that the group will like and assist this challenge. For example, recently, Morflax integrated 3dicons into their mesh challenge.
Observe: The Morflax mesh allows you to customise the colours of the icons and add scenes on the net with out requiring the usage of any advanced 3D software program. You possibly can try the project for yourself.
Obtain
You may get the newest model of the icons from https://3dicons.co/, and as I’ve extra plans for 3dicons (together with including a number of extra icons to the present set), be certain to examine the challenge’s web site for updates.
You may as well obtain the icons set right here:
Final up to date in Might 2022. For the newest variations, please examine the 3dicons official webpage
License
There aren’t any restrictions on how you should utilize the 3dicons since they have been launched underneath a CC0 license (“No Rights Reserved”).
Need assistance?
There’s a little FAQ Notion board that ought to allow you to while you wish to change the icons and colours utilizing Blender. You may as well attain out to me on Twitter (@realvjy) for suggestions and options, and you’ll depart a remark right here — I’d be comfortable to answer.
