Creating a 3D App Store Icon in BlenderCreating a 3D App Store Icon in Blender
August 15, 2013
{% import 'macros.html' as m %}
Earlier today, Nick at "Greyscale Gorilla" posted a really great tutorial on how he made one of those cool 3D-looking icons for his camera app, BananaCam, using Cinema 4D. I've been thinking about trying something like that, maybe not for my existing apps, and also I've been wanting to get more blender practice lately, so I thought I'd take another shot at recreating his results in Blender, like I did with his Curved Metal Text tutorial.
Incidentally, the app he created this for, BananaCam, is a nice little alternative to something like Instagram, it's a lightweight app with some nicely tuned filters. So if you want a quick way to filter photos without all the social networking mumbo jumbo, check it out.
{{ m.blog_img('/images/blender_icon_screeny.png',size=800,alt='Blender Screenshot') }}
I was able to follow his steps pretty closely in Blender. I kind of ran out of time so my lighting and texturing is nowhere near as good as his results, but it turned out pretty good for a quick experiment. Nick's video tutorial is great, I'd highly reccommend watching it if you're trying something like this, even if you're not a C4D user.
I didn't have the same .ai file he used for the icon shape, so I made a really quick one in Inkscape. Blender seems to have somewhat of a problem with the scaled of the .svg files, the resulting file came in super-tiny. I can scale up the curve, but the bevel/extrude still happens before the scale so that would have been a problem to have to use really small values for those (hard to tweak). So I worked around it by making the icon size about 10m^2 in Inkscape, and it came in at a reasonable size.
For the curious, the biggest differences I ran into, other than the svg bug, were:
- No easy way to create a cylinder with a hole in the middle. Instead of stacking these, I just used a single cylinder and extruded the end cap around, and cut the edges I didn't want bevelled. Worked great tho.
- The array modifier is a bit tricky to make a radial array. It works though.
- Nick used a neat view-projection trick to line up the colors and the white stripe on the camera. I just used a gradient.
- I didn't get the lighting nearly as good. It would be interesting to retry this cycles one day.
Anyways, it was a fun project and maybe next time I'll make a 3D icon for one of my own apps. If you want the source files I used, you can download them here:
