1

I often find myself stroked shapes for buttons etc (kind of like the "Ask Question" button on this site actually). I follow the approach of creating a white shape with a stroke effect, and then selecting the multiply blend mode. Leaving only the stroke visible. This is a useful technique as i can resize the shape.

So this is fine for the design stage but when it comes to exporting these elements as png's and using them in a website or in after effects, the multiply effect obviously won't be carried over and i'm having to reconstruct these elements in Illustrator. I do this often enough that it's getting a bit annoying.

Is there a different method that will allow me to create these type of elements fully within Photoshop that i can export as fully functional pngs? Without using Stroke Shape, as i can't resize these layers.

Here are some screenshots of the process:

  • Make white shape Make white shape

  • Add stroke Add stroke

  • Multiply shape layer Multiply shape layer

  • Desired final effect Final product

  • Multiply problems No alpha

2 Answers 2

4

Don't change the layer's blending mode. After you apply the stroke go to your Layer Panel and where it says Fill: 100% lower that to 0. It's directly below Opacity

2
  • 1
    I've always wondered what that option did! So obvious now. Can't believe i never looked into this. Thanks Ryan. Commented Oct 2, 2014 at 12:16
  • THIS is the right answer! Works for any type of shape (inkl. vector and mask based). Great, thanks!
    – Jpsy
    Commented Jul 7, 2015 at 16:08
2

enter image description here

I'd recommend going to the Rounced rectangle options and setting:

  • Fill to none
  • Stroke and Stroke width to what ever color / width you want.

You'll need to have one of the shape tools selected to see these options.


Alternatively... These can also be found in the Window > Properties

enter image description here



Shape Stroke was introduced in Photoshop CS6.

1
  • Wow, i've been overlooking that option for quite some time i guess! Thanks @Joonas Commented Oct 2, 2014 at 12:13

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.