Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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.

share|improve this question
add comment

2 Answers 2

up vote 2 down vote accepted

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

share|improve this answer
    
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
add comment

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)
share|improve this answer
    
Thanks for pointing that out! –  user7497 Nov 4 '12 at 6:25
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.