I'm still very new to Inkscape. Life has settled down just enough so I anticipate being able to learn SVG and Inkscape.

I need some advice on how best to create a 3D effect, a "puffy" look to shapes or text. This surely involves contour gradients or extrusion or a filter or two. Or it may need an inner and outer path and a blend. But I'm having trouble achieving the effect I want (in my old, old copy of another vector graphics program. -- I could have (and did) formerly use Macromedia Freehand's contour gradients or its blend tool to create the effect I'm after. But I have (so far) not succeeded at this with the desired results (the look I want/need) in Illustrator, and I'm inexperienced with Inkscape, so I don't know what's best here.

What do you mean, "puffy?"

Suppose you have a shape with curvy, rounded edges throughout. You want it to have a 3D look that is "puffy" like a cloud, a baked puffed pastry, or a rounded bevel on woodwork. If your shape is always thick enough in any given direction, the "puffy" contours will not form isolated peaks. However, if it is narrower in places, then in the 3D result you want, there will be discontinous rounded hills and valleys in the look of the result.

Suppose, for example you have two shapes:

Shape A

Shape A is an asterisk or star with blobby points, such as from Cooper Black or Goudy Heavyface. Freehand's result, which I'm trying to duplicate, had the blob ending each point of the star forming its own domed "hilltop," with another for the center. Then as you go "downward" in the contour map, these join until you get the single path of the original asterisk. So you have a five-branched mountain base and five peaks at each arm/leg of the star, and a central sixth peak. When Illustrator tries to "offset path" to do this, the "hilltops" are there, but they are all joined by a continuous path that reduces down to a line (think of it as a sunken land bridge). This has the unwanted effect of producing a sharp, linear ridge if you create a blend.

The only solution I can think of is to manually knife those apart and rejoin each to form a squashed oval, or else draw those from scratch, union them, and then try (probably unsuccessfully) to create a blend between the continuous path below and the discontinuous union of six paths above.

Shape B

Shape B is more complex. It's made up of two or more separate closed paths. This could be a lowercase i, j, or any vowel with an umlaut/dieresis (two dots above the vowel), a question mark, a pawprint.... The key is, it's actually multiple paths.

For the results you want, depending on which result is needed, you may need the paths to be ungrouped (separate paths) or unioned (a single object made of multiple closed but discontinuous paths). For example, an O needs to have the inner path subtracted from the outer path. The two dots of the umlaut (dieresis) look best as separate, non-unioned paths. As another example, you might want an entire word to be unioned from its individual letters, or in other cases, you might want the effect to apply to individual letters or component parts of the letter.

In this case, what we want is for each separate closed path to be treated individually within the overall object, Shape B.

Except in places where the shape becomes "hill-and-valley" just like that asterisk in Shape A, the individual sub-parts (dots, commas, letters, other shapes) are fine, just treat them as if they were separate altogether. Then deal with the hill-and-valley problem shapes. As an example, the two dots are simple, but the O or U are likely to develop cresent-shaped, parenthesis-like hills: Imagine an O below and ( ) parentheses above.

-----

Is there (I hope) some simple and automatic way to process these, or am I in for a lot of knife apart and join, or else draw new shapes from scratch? Is there a simple or best method to produce the "puffy" effect -- without bloating the SVG file with a huge number of concentric shapes (as in an Illustrator blend) or overlapping stroke-widths (as in how Illustrator imports and exports a Freehand contour gradient)? Either way seems like it's bloated, verbose, unnecessary. Surely there's a way to achieve the effect without 15 to 256 in-between shapes overlaid and grouped, and in a clipping path?

(See, I've looked carefully at the SVG output. I was horrified. Hundreds, thousands, of shapes all overlapping, to wade through. That may be fine for the computer or printer, but is creates a truly *huge* and over-complicated nest of code. It took ages to figure out what was going on and what were the start/end paths versus the in-between extraneous stuff. (It took so long because I didn't know what it was doing, what I was seeing, and whether the paths were changed or the strokes or both.) Answer: Sometimes one, sometimes the other, depending on the method (blend in FH or AI, versus contour gradient only in old FH).

------

If there could also be shading / highlighting from a lighting angle, that might be nice, but it's not critical to what I'm after.

I wish I had a large PNG or JPG to show what I mean, but I only have this at 18 * 18 px, not even the 72 px of a variant. ...Darn program migration and bad conversion, lack of full import/export...on their own products.

Hi BCS,
I've read all your descriptions, but unfortunately, still can't get a good idea what you're describing for Shape A and Shape B. Any chance we could get the proverbial "thousand words", i.e. a screenshot, or some kind of example what you mean?

I sort of understand what you mean by "puffy" though. If you use Path menu > Outset, by several steps, the text will become puffy, in a way. And if you start off with a font that's already rounded, it might look better in the end. Or maybe the Dynamic Offset would work better? But you'd have to add lighting/shading, to give the 3D effect.

I don't know of any filter or extension that will do this. But someone else might know. If it's only text you're interested in, I'm sure you could find a puffy font somewhere. Or if the 3D effect is important, you might want to consider looking into a 3D program, such as Blender.

I wish I had a better solution for you.

Hi Brynn,

Two sample images in SVG and a page with minimal discussion, which refers back to this forum thread topic, are located on my site at:

http://www.shinyfiction.com/non-fiction ... tours.html

I'll keep the page there. If I ever need to move or change things, I'l have a reminder to update the link for the benefit of forum members.

The graphics are for a story or two, as yet unfinished. The draft image versions will remain with the article.