Embossed icon theme - looking for help/suggestions

Post unfinished work here for feedback and advise.
mejones
Posts: 4
Joined: Tue Sep 03, 2013 7:08 am

Embossed icon theme - looking for help/suggestions

Postby mejones » Tue Sep 03, 2013 7:22 am

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!

Image
Last edited by mejones on Thu Sep 05, 2013 8:57 am, edited 1 time in total.

Lazur
Posts: 4580
Joined: Tue Jun 14, 2016 10:38 am

Re: Embossed icon theme - looking for help/suggestions

Postby Lazur » Thu Sep 05, 2013 8:15 am

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.
Last edited by Lazur URH on Mon Sep 09, 2013 5:37 am, edited 1 time in total.

hulf2012
Posts: 716
Joined: Sat Nov 24, 2012 12:37 pm

Re: Embossed icon theme - looking for help/suggestions

Postby hulf2012 » Sat Sep 07, 2013 10:42 am

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.
If you have problems:
1.- Post a sample (or samples) of your file please.
2.- Please check here:
http://tavmjong.free.fr/INKSCAPE/MANUAL/html/index.html
3.- If you manage to solve your problem, please post here your solution.

tylerdurden
Posts: 2106
Joined: Sun Apr 14, 2013 12:04 pm
Location: Michigan, USA

Re: Embossed icon theme - looking for help/suggestions

Postby tylerdurden » Sat Sep 07, 2013 1:53 pm

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.

Image
Have a nice day.

I'm using Inkscape 0.92.2 (5c3e80d, 2017-08-06), 64 bit win8.1

The Inkscape manual has lots of helpful info! http://tavmjong.free.fr/INKSCAPE/MANUAL/html/

v1nce
Posts: 679
Joined: Wed Jan 13, 2010 4:36 am

Re: Embossed icon theme - looking for help/suggestions

Postby v1nce » Sat Sep 07, 2013 7:57 pm

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.

tylerdurden
Posts: 2106
Joined: Sun Apr 14, 2013 12:04 pm
Location: Michigan, USA

Re: Embossed icon theme - looking for help/suggestions

Postby tylerdurden » Sun Sep 08, 2013 12:15 am

Here's a raytrace of a solid model to help visualize light-source effects: highlights, shadows, etc.
Image
(modeled in CAD, rendered in Blender)
Have a nice day.

I'm using Inkscape 0.92.2 (5c3e80d, 2017-08-06), 64 bit win8.1

The Inkscape manual has lots of helpful info! http://tavmjong.free.fr/INKSCAPE/MANUAL/html/

mejones
Posts: 4
Joined: Tue Sep 03, 2013 7:08 am

Re: Embossed icon theme - looking for help/suggestions

Postby mejones » Sun Sep 08, 2013 10:29 pm

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:

Image

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

Lazur
Posts: 4580
Joined: Tue Jun 14, 2016 10:38 am

Re: Embossed icon theme - looking for help/suggestions

Postby Lazur » Tue Sep 10, 2013 9:24 am

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

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.

v1nce
Posts: 679
Joined: Wed Jan 13, 2010 4:36 am

Re: Embossed icon theme - looking for help/suggestions

Postby v1nce » Tue Sep 10, 2013 5:57 pm

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.

v1nce
Posts: 679
Joined: Wed Jan 13, 2010 4:36 am

Re: Embossed icon theme - looking for help/suggestions

Postby v1nce » Tue Sep 10, 2013 6:00 pm

tylerdurden wrote:Here's a raytrace of a solid model to help visualize light-source effects: highlights, shadows, etc.
Image
(modeled in CAD, rendered in Blender)


how many light sources ? And where ?

tylerdurden
Posts: 2106
Joined: Sun Apr 14, 2013 12:04 pm
Location: Michigan, USA

Re: Embossed icon theme - looking for help/suggestions

Postby tylerdurden » Tue Sep 10, 2013 11:24 pm

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:
Image

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

I'm using Inkscape 0.92.2 (5c3e80d, 2017-08-06), 64 bit win8.1

The Inkscape manual has lots of helpful info! http://tavmjong.free.fr/INKSCAPE/MANUAL/html/


Return to “Work in progress”

Who is online

Users browsing this forum: No registered users and 1 guest