3

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

- Find by Alext Volkow

Circus Tent

- Circus Tent by Michael Tzscheppan

Sandwich

- 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.

2

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

  • Thank you so much! The iStat Server icons are really great and they help a lot. Now I have a better understanding on how to make good illustrations :) I wholeheartedly appreciate everything you've done. – user7497 Nov 4 '12 at 9:57
1

None of the example images are examples of skeuomorphism. They are all abstracted illustrations of real things--as opposed to attempting to literally represent a real tangible user controls.

That said, I would perhaps label them as semi photo-realistic in that they do attempt to be modelled 3-D objects.

Just as in true 3-D modelling, the tips would pretty much be the same. Focus on:

  • consistent lighting and shadows (cast shadows on map, drop shadows on sandwich wrapper)
  • textures (what appears to be an actual scan of bread)
  • atmospheric effects (Note table cloth loses focus and saturation in the distance)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy