Icon "Highlight Stroke" - How to do?

A forum for research and development of the user interface of FreeCAD

Moderator: agryson

wandererfan
Posts: 2770
Joined: Tue Nov 06, 2012 5:42 pm

Icon "Highlight Stroke" - How to do?

Postby wandererfan » Fri Aug 24, 2018 12:31 pm

in @agryson's artwork guidelines [wikisection]Artwork_Guidelines#Highlight[/wikisection] the is a recommendation to use a "highlight stroke" when designing icons.

Does anybody have a general process to making this "highlight stroke" in Inkscape? I can do it when the shape is a rectangle or circle, but can't figure it out for general shapes.

The stoke in question is the red one in this version of the App::Part icon and the one labelled "C" in the clip from the guidelines.
innerOutline.png
innerOutline.png (6.72 KiB) Viewed 342 times
HighlightStroke.png
HighlightStroke.png (48.69 KiB) Viewed 342 times
Thanks,
wf
AR795
Posts: 172
Joined: Fri May 25, 2018 11:55 pm

Re: Icon "Highlight Stroke" - How to do?

Postby AR795 » Fri Aug 24, 2018 9:03 pm

AFAIK Inkscape does not support an inner stroke option directly, it would be quite convenient if it did. Fortunately there are workarounds such as this:

https://superuser.com/questions/128814/ ... n-inkscape

Normally the way I achieve this is by creating two duplicate copies of the shape. The first duplicate I keep the fill and remove the stroke. The second duplicate, I remove the fill and increase the stroke by twice the size that I want and then convert the stoke to path from Path -> Stroke to Path. Then I select the two duplicates and press ctrl + * or Path -> Intersection. This creates an inner border of the shape.
User avatar
agryson
Posts: 453
Joined: Wed Nov 23, 2016 8:30 am
Location: Paris, France
Contact:

Re: Icon "Highlight Stroke" - How to do?

Postby agryson » Sat Aug 25, 2018 7:06 am

Using a grid as described earlier in that guide helps a lot with this. For inspiration, feel free to open up a few of the icon source files. I would manually create a pen stroke aligned to grid then when necessary adjust for curves using beziers. A simple parallelogram like the one described though should be only four clicks if you use the stroke tool with a grid + snapping.
wandererfan
Posts: 2770
Joined: Tue Nov 06, 2012 5:42 pm

Re: Icon "Highlight Stroke" - How to do?

Postby wandererfan » Sat Aug 25, 2018 8:35 pm

I made some progress using the method in the link. Still feels like too many copies of the same object in play at once, but I got good results, so I'm happy. :D

I'll try your method next.
wandererfan
Posts: 2770
Joined: Tue Nov 06, 2012 5:42 pm

Re: Icon "Highlight Stroke" - How to do?

Postby wandererfan » Sat Aug 25, 2018 8:41 pm

agryson wrote:
Sat Aug 25, 2018 7:06 am
Using a grid as described earlier in that guide helps a lot with this. For inspiration, feel free to open up a few of the icon source files. I would manually create a pen stroke aligned to grid then when necessary adjust for curves using beziers. A simple parallelogram like the one described though should be only four clicks if you use the stroke tool with a grid + snapping.
Hey, good to hear from you!

Never fear, the icons have been opened, dissected, copied, recombined, etc. I've even produced some passable results using the shreds of existing icons.

This inner stroke thing on complex shapes had me beat though. Programming is much easier.

wf