Hi all,

I'm working on a pseudo-realistic icon theme, with each icon 'carved' into a stone tablet. The effect I've used to achieve this is a combination of white/black shadows, and an inner shadow. I'm trying to make every icon the same, except for the stone filter seed, and the icon outline (this is primarily for ease of maintenance, but also as a bit of a challenge to myself).

I'm quite happy with my work so far, but I think there's room for improvement in the shadow effect and I'm not all that happy with some of the icon glyphs.

I'm extremely interested to hear all criticism and commentary, so please let me know what you think!

Welcome aboard!

I see the first one has the sign graphically positive on the light background,
while the others are made with some part "cut-ins" to the original signs.
Which is illogical to the positive graphical look, making a feel those are not part of the signs.
Making the signs look "hollow".
The first icon's sign was made up by "one shape", the others from two, thus they cannot look right with one colour in my opinion.
Have you tried adding another shade to the icons, where now the "cut-ins" are?

Edit: the facebook logo doesn't work with one shade only too.

Hello:
I like the concept. It's a good idea.
You aren't using a conical perspective (which it's more realistic). It seems like orthogonal perspective, but it's ok. Unless it was unintentional?

It's a good idea to use referenced images like this:
http://ancientpoint.com/imgs/a/f/k/i/z/ ... _4_lgw.jpg

Although, that picture it's in a conical perspective

I have to agree with that "hollow" effect. There is a Extrude Extension that may help to give to your icons a 3D look.

On the other hand, If you reduce the size of your icons, maybe all those detail may became unnecesary.

They look to be raised buttons, with recessed features...

If the front edge of the button is closest to the light source and the back edge has no highlight, shouldn't the highlights of the edge around the recessed area's behave the same? I rekon the edge toward the light source should have the glint.

where did you "peek" inner shadow ? Coz the settings don't look right to me : too strong shadows on the left and right sides. There should one strong shadow on the top and no (or little) on left/right.

Here's a raytrace of a solid model to help visualize light-source effects: highlights, shadows, etc.

(modeled in CAD, rendered in Blender)

Thanks all for the suggestions - a lot of them make a lot of sense. A general point I should make is that because this is intended as an icon theme, I've made certain simplifications to make everything stand out, and to ensure the design works at a variety of resolutions against a number of background.

One such instance is the lack of highlight at the top of the 'tablet' shape: against a lighter background, the transition from grey to a lighter colour with a highlight in between simply makes the icon look blurred. This is especially the case if it has been scaled down to an awkward resolution, and is a bit blurred anyway.

To clarify on exactly what I'm *intending*: the light source is from north of the icon, and the projection is approximately orthogonal because it gives a much cleaner look at lower resolutions/on smaller screens.

First up, I've added a slight gradient to the inset, and touched up a few details - here is a typical icon at present:



It is a significant improvement IMO.

Lazur URH - the icons are meant to appear cut into the tablets. What exactly do you mean by 'illogical to the positive graphical look'? I'm wanting the icons to look as if they're cut in - do you mean that that's a bad idea or that the effect doesn't work? I've worked on a shade as you suggested in my update above, is there anything else you think needs changing? I'm not prepared to

hulf2012 - As I noted above, the pseudo-orthogonal projection is mostly for simplicity, having a clear silhouette and scaling well between resolutions. I'm not a huge fan of overly photo-realistic icons - hence the more stylized appearance of this set. The icons are meant to be cut in (embossed in the title was actually a typo... it was supposed to be 'Etched'), and I can't find any useful examples of this with the sort of light source I want.

Tylerdurden - thanks very much for the rendering and details comment. The lighting I'm going for is a very low, northerly light - I appreciate it's not a very accurate depiction of this at present. The light on the bottom edge is meant to be reflected off the surface the icon is sitting on. I believe the lighting on your rendering is coming from the south? With that in mind, do you mean that the top edge of the engraved area should have a white highlight? Or that there should be no highlight on the bottom edge?

V1nce - I was working just with a blurred outline duplicate for shadows, so AFAIK there's no easy way to do as you suggest except for very simple shapes. My current version above tries to achieve broadly what you suggest by having an additional gradient, to increase the north-south shadow effect (making the left/right weaker in comparison).

I was thinking that one shade cannot reproduce a logo like facebook's.
Like on the site where you hosted the image, there is a dark icon theme but they are not forced to be one shade only.
Whenever in doubt -how can something be improved-, create at least 50 variants and choose the one you most like of them
-something they taught me at school.


I would chose the top left or the top right one's positive look.
The line below has a negative graphical look, like yours.
From that row, the one with the coloured inner part looks best in my opinion.
Like it was a led inside of the etched part.

mejones wrote:
V1nce - I was working just with a blurred outline duplicate for shadows, so AFAIK there's no easy way to do as you suggest except for very simple shapes. My current version above tries to achieve broadly what you suggest by having an additional gradient, to increase the north-south shadow effect (making the left/right weaker in comparison).

You can do it with filters for any (*) shape using feMorphology.

( fill (with black)
- shape * dilate(1))
blur
offset (0,-1)

or you could use a femorphology with different radius for x and y. This is quite efficient for adding bevel. In
viewtopic.php?f=9&t=12678#p49063 I didn't have to duplicate the text, turn them into a path then adjust by hand by joining the edges (yes I know there's an extension for that but it didn't work in realtime, it just automate what you do by hand)


(*) not really true because it tends to round up for very large radius.

tylerdurden wrote:Here's a raytrace of a solid model to help visualize light-source effects: highlights, shadows, etc.

(modeled in CAD, rendered in Blender)

how many light sources ? And where ?

mejones wrote:I believe the lighting on your rendering is coming from the south? With that in mind, do you mean that the top edge of the engraved area should have a white highlight? Or that there should be no highlight on the bottom edge?

Yes, single light from the south.... in that case, there might be little or no highlight on the bottom edge of the recess and a highlight on the top edge.


Here's a render with two lights, one South, one North:


Here's the Blender file to play with: https://docs.google.com/file/d/0B-v9qgb ... sp=sharing