16

Ask DN: How do you create 3D icons?

6 years ago from , UI/UX Developer

I was looking at this icon by Panic

https://dribbble.com/shots/841939-Pancake-Final

How do you do this, if you are a Sketch / Pixelmator guy? I looked at blender – it has a really cluttered UI, and looks over complicated for this purpose.

What is your workflow for creating 3D icons in general?

Any Tips / Tricks / Tutorials would be helpful.

15 comments

  • Marc EdwardsMarc Edwards, 6 years ago

    What is your workflow for creating 3D icons in general?

    I have two main methods, depending on what’s needed.

    Use Adobe Illustrator

    Illustrator has some fairly basic 3D abilities, but if you just need a bit of extrusion and rotation and there’s a benefit in getting a 2D vector as a result (so you can paste it into Photoshop for styling), then it can be a great way to go.

    Here’s an icon I made using this method: iStat Server icon

    Use a 3D modeller and renderer

    For anything more complex, I always jump into a 3D app. I use Cheetah 3D and a little bit of Rhino 3D.

    The models, materials and lighting may not need to be very accurate — the idea is to be able to play with shapes, angles and lighting to the point where you end up with something that is realistic and a great starting point to trace using vector shapes. I typically want vector shapes in Photoshop so I have better control over colours, and because that’s the highest quality way to scale the icon (so tweaks can be made at each size and so it’s easily editable).

    I often don’t even both attempting to get colours right at that point. I just want some solid reference I can work from — there’s nothing worse than spending a lot of time tweaking small details on an icon in Photoshop, only to find you’ve made a mistake relating to perspective or that you should have viewed the icon from a different angle. Using a 3D app solves these problems.

    Here’s an icon I made using this method: EasyRes icon

    Sometimes I cheat and use parts of the render from the 3D app. Bump map type effects can be difficult to paint by hand, so rendering them and then applying a gradient map in Photoshop for colour can be good. That’s what I did here: Skala View icon.

    Using 3D in Photoshop

    I’ll be polite and just say that I don’t think this is a good way to go.

    I hope that helps. Feel free to ask any questions. I don’t pretend to have all the answers, but I’l do what I can to assist. :)

    14 points
  • Denis P.Denis P., 6 years ago

    Here in http://dribbble.com/ramotion we use 3ds max for some 3d icon. We use them mostly as references to see how glass would refract, how metal would look like etc. And after that we draw them from scratch at photoshop using these 3d renders as references.

    Some of our icons here: http://ramotion.com/work/iconography/

    4 points
  • Jack BachJack Bach, 6 years ago

    Ollin ( https://dribbble.com/ollin ) has a good article about lighting icons:

    http://www.madebyollin.com/blog.html#lighting_in_icons

    1 point
  • Michael Senkow, 6 years ago

    Its more useful for pure vector/line icons, but I use Rhino (its currently still free on Macs) to create the generalized form and then alter more heavily in Illustrator. http://thenounproject.com/mhsenkow/ shows some of my examples.

    0 points
  • Bushra MahmodBushra Mahmod, 6 years ago

    I personally use Cinema 4D for all my 3d needs since nothing really comes close in terms of ease of use. But for a less expensive route, my recommendation is for Blender.

    Blender by far is one of the most documented 3D modeling and animating software out there, and it's free. http://www.blender.org/

    The newest Photoshop CC is actually surprisingly good for texturing and final post modeling work.

    I would export my model an .obj file and import it into photoshop. The beauty is that photoshop recognizes everything including the light objects and cameras.

    0 points
  • Noam ElbazNoam Elbaz, 6 years ago

    is there any 3d package that will export all the different parts of the rendered object to a layered .svg or .ai so i can tweak color / shapes / path?

    0 points
  • c kizerc kizer, 6 years ago

    Cheetah 3D has one of the least confusing 3D UIs for this kind of thing

    0 points
    • Cihad TurhanCihad Turhan, 6 years ago

      Which formats does it import/export (.mdl, .obj etc)

      0 points
      • Marc EdwardsMarc Edwards, 6 years ago

        Quite a few.

        3D import:

        • .3ds
        • .dxf (quite limited yet)
        • .fbx
        • .lwo
        • .obj
        • .sia
        • .stl (binary and ASCII)
        • .jas (binary and ASCII)

        3D export:

        • .3dmf
        • .3ds
        • .dae (Collada, iBooks Author compatible)
        • .dxf
        • .fbx
        • .h (C header files)
        • .obj
        • .mtl
        • .sia
        • .stl (binary and ASCII)
        • .jas (binary and ASCII)
        1 point
  • Sri KadimisettySri Kadimisetty, 6 years ago

    This Sketchcasts episode on making 3d icons is a good starting point.

    0 points
  • Ian De DobbelaereIan De Dobbelaere, 6 years ago

    Two words, Layerstyle's and Perspective's.

    I don't use pixelmator so i don't know if it's possible put you can do it in photoshop

    0 points