Icon "Highlight Stroke" - How to do?

A forum for research and development of the user interface of FreeCAD
Forum rules
Be nice to others! Respect the FreeCAD code of conduct!
Post Reply
User avatar
wandererfan
Veteran
Posts: 6268
Joined: Tue Nov 06, 2012 5:42 pm
Contact:

Icon "Highlight Stroke" - How to do?

Post by wandererfan »

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 1420 times
HighlightStroke.png
HighlightStroke.png (48.69 KiB) Viewed 1420 times
Thanks,
wf
AR795
Posts: 180
Joined: Fri May 25, 2018 11:55 pm

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

Post by AR795 »

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: 463
Joined: Wed Nov 23, 2016 8:30 am
Location: Bordeaux, France
Contact:

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

Post by agryson »

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.
User avatar
wandererfan
Veteran
Posts: 6268
Joined: Tue Nov 06, 2012 5:42 pm
Contact:

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

Post by wandererfan »

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.
User avatar
wandererfan
Veteran
Posts: 6268
Joined: Tue Nov 06, 2012 5:42 pm
Contact:

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

Post by wandererfan »

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
Post Reply