tips on designing high-quality semi photo-realistic icons that attempt to be modelled 3-D objects

I’m an amateur graphic designer. When I’m free I do some simple graphic designing with Photoshop and Illustrator (mess around with the pen tool, add style to a layer, adjust hue of an image, etc).

I’ve been a great fan of Dribbble and I’m always fascinated by the amazing pieces of art there.


– Find by Alext Volkow

Circus Tent

– Circus Tent by Michael Tzscheppan


– Sandwich iOS icon by Ryan Ford

These semi photo-realistic icons are so well-designed. I would appreciate if someone can offer me some tips on designing icons like these.


As DA01’s said, these are really just digital illustrations. In terms of workflow, these workflows are common:

  • Draw the entire thing in Photoshop. Works for simple concepts.
  • Use Illustrator’s 3D tools (extrude, rotate etc), then paste the shapes into Photoshop for lighting, reflections, colours and textures.
  • Use a 3D app like Modo, Maya or Cinema 4D to create a rough approximation of the objects and lighting, then trace the results as shapes in Photoshop.

SoftFacade are masters of that last technique. Here’s a case study where they actually take the 3D modelling further than most would. I believe they still finished everything off in Photoshop.

SoftFacade’s IconFinder case study

I’ll let you be the judge if this icon I created is up to the standard you’re after:

iStat Server icon on Dribbble (includes PSD)

I’ve included the Photoshop document, an animation recorded during creating the icon as well as some tips on the techniques used. I hope it helps.

It’s really important not just to create a good looking icon, but build it using shape layers and techniques that allow the icon to be resized without loss, because it’s common to need to create a lot of sizes, from 16×16 up to 1024×1024 (you’ll probably need to redraw 16×16 and 32×32 sizes by hand).

iStat Server icon

Source : Link , Question Author : Community , Answer Author : Marc Edwards

Leave a Comment