2

So... say I start out with a simple Shape.

(I mean this like a literal, vector Shape, with the capital S. With the grip points. It's important that I wind up with one in the end, too)

A simple Shape

Now, I want to do a contraction offset, such that the outline/silhouette/stroke is contracted INWARDS, consistently and the same amount from all directions.

Example of goal

So, straight out the gate, the shape's irregularity precludes simply scaling it...

enter image description here

...even if I DON'T maintain the aspect ratio, it's still inconsistent.

enter image description here

Same goes for just shift-offsetting it.

enter image description here

Even the old "quadruple cardinal offset/intersection" trick still can't do it perfectly.

enter image description here

Now, I KNOW this can be done in Illustrator...

... which I don't have access to at the moment.

Is there really no way INSIDE PHOTOSHOP to turn this... enter image description here ...into this without having to rasterize the image?

In response to Scott's (reasonable and excellent answer):

Well (and again, this IS a rather contrived example, but work with me here): the simplest reason as to why not a stacked stroke is simply:

enter image description here

...if one is after two gradients going in opposite directions. Or possibly:

enter image description here

...I'm trying to save my stroke for something else.

In reality, though, the real reason is I'm working with SMIL - specifically SVG morphology for the web. So for this (again, contrived) example, say, I want my bow...

enter image description here

...to "morph" into a butterfly.

enter image description here

To do this, I need to have the same number of vertices in the starting and ending image. Yes, there are libraries like Greensock that can partially cheat it, but that's not the point. Really, I just want to know if there's a expand or contract for shape paths in PS. Because, and to answer your question, Billy, I don't have access to another tool in this case. I'm not on my rig.

Improve this question
8
  • (To be clear: I know about Select > Modify > Contract, but the only way to apply this to the shape is to rasterize it. Yes, I can mask it, but then I lose the ability to modify the vector shape)
    – NerdyDeeds
    Commented Jul 12, 2022 at 23:20
  • 1
    Hi. Welcome to GSDSE. I wouldn't use Photoshop for this. It's vector capabilities are extremely limited. Better to use proper vector software. Illustrator and Inskcape have both have an Offset path effect, which can be expanded/convert to real vectors if required. An example.
    – Billy Kerr
    Commented Jul 12, 2022 at 23:53
  • Yes, I know. Indeed, since I AM constrained to the tool I'm using (not my call; client's machine), I've been scaling the image up to 4kx4k, rasterizing it, running the standard raster contract, inverting, clearing, then setting the selection and making a work path, which I can then use as a subtract on the source silhouette, and then scale it back down (vector being agnostic of size anyway). I KNOW how to use the tools... I'm just stuck with the (wrong) one I'm using in this case, and was hoping someone might have a better trick than mine.
    – NerdyDeeds
    Commented Jul 13, 2022 at 18:44
  • I don't see how you are "stuck" with Photoshop. Inkscape is free, Open Source, and 100% safe. In Inkscape just make sure to convert the offset path effect to vector, using Path > Object to Path, then save the finished work as a Plain SVG, and click and drag it into a Photoshop document, it will be imported as a vector Smart Object. The Smart Object can then be rescaled just like a native Photoshop vector, without degradation in quality.
    – Billy Kerr
    Commented Jul 13, 2022 at 20:04
  • In this case, I'd been working on a client's machine who, in turn, didn't wish to jump through the hoops required to get their IT department to do a software review to authorize another application for the sole purpose of offsetting a line (a task which I'd already managed to brute force my way through accomplishing anyway). My question here was, quite literally, asking if anyone knew of a way to do this IN PHOTOSHOP, so, should a similar scenario arise again, I'd have one more tool in my holster. I'm not disagreeing with anything you've said... you ARE correct... but it wasn't an option, then
    – NerdyDeeds
    Commented Jul 14, 2022 at 17:48

1 Answer 1

Reset to default
1

Update for specificity:

I'm afraid, to the best of my knowledge, Photoshop offers no ability to programmatically expand/contract anything vector-based in order to achieve equidistant offsets.

The best one can achieve is always merely "by eye."

This is one area where Photoshop lacks usability in terms of its vector tools.

What I would do if I had no other tools....

  • Duplicate original shape
    enter image description here
  • Apply a stroke set to inner align on original to use as a visual guide.
  • Scale and adjust the path in the duplicate to match the inner stroke edge as closely as possible
    enter image description here
    enter image description here
  • Highlight both original and duplicate layers and Merge Shapes from the layer panel menu
    enter image description here
    enter image description here
  • Set the correct Path Interaction options for this merged shape layer
    enter image description here
    enter image description here

Far more effort than merely an offset.. but this will ultimately end in better results most of the time.

Original answer:

ermm... seems like you may be overthinking this. Unless there's some reason you must have an inner path as opposed to merely the appearance. But then, why would you need the inner path?

Unless I'm missing something, one can merely set a Fill and Stroke for the shape layer...

enter image description here

You can set the stroke alignment to the Inside if you want the shape edges to remain the same...

enter image description here

If you want to be able to adjust the fill separate from the stroke, example: apply layer styles to fill, but not the stroke ...

Stack a copy of the shape layer and apply different fill/strokes to the copies.

enter image description here

  • Top Layer - just a black stroke (8pts) aligned on center, no fill
  • Bottom layer - Dashed white stroke (6pts) aligned to inside, black fill with diagonal pattern overlay

The black stroke on the top layer created the appearance of an inner offset and allows you to add the dashed stroke to the bottom layer.

Improve this answer
11
  • Which are totally fair questions. I'll modify my original question to answer yours, and explain further, and I shal endeavor to do so with the (extremely contrived, albeit) example I began with
    – NerdyDeeds
    Commented Jul 13, 2022 at 18:28
  • I honestly don't think there's a direct solution to actually creating the inner path in Photoshop, @NerdyDeeds - The hurdles you show in the question are there for everyone and I, at least, don't know any method around them other than to use Illustrator rather than Photoshop - at least to create the paths, then copy back to Photoshop as a shape layer. Scaling odd shapes simply never creates an equidistant offset in Photoshop and there's no option to offset anything vector based in Photoshop (at least as far as I'm aware.)
    – Scott
    Commented Jul 13, 2022 at 18:33
  • Let me be clear: your answer is both useful and superb. I also don't known of a way other than the one I describe to Billy, above: Set Selection, New Layer Make work path, Cut, Select target layer, Paste, Set Merge Method: Subtract. I was just hoping there was a trick, or it was buried somewhere in the GUI and I was missing it, or an Automate or Script someone might know. I'm going to set you as best answer here regardless, since yours IS a very-well presented and thought out response that likely WILL be of help to someone with less esoteric demands than I. Thank you very much for your effort.
    – NerdyDeeds
    Commented Jul 13, 2022 at 18:49
  • Also worth noting that a deficiency with SVG for the web is we don't get stroke positioning. And I've experimented at length: codepen.io/NerdyDeeds/pen/dyPQEVK. I can fake it, but not if I want to animate it TOO.
    – NerdyDeeds
    Commented Jul 13, 2022 at 18:57
  • I updated the answer @NerdyDeeds with what I would do specifically in such a situation if I only had access to Photoshop.
    – Scott
    Commented Jul 13, 2022 at 18:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.