Mobile app version of vmapp.org
Login or Join
Hamaas979

: Is it possible to make stroke only shapes in Photoshop without Stroke Path? I often find myself stroked shapes for buttons etc (kind of like the "Ask Question" button on this site actually).

@Hamaas979

Posted in: #AdobePhotoshop #PhotoshopEffects #WebsiteDesign

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

Add stroke

Multiply shape layer

Desired final effect

Multiply problems

10.02% popularity Vote Up Vote Down


Login to follow query

More posts by @Hamaas979

2 Comments

Sorted by latest first Latest Oldest Best

 

@Jamie315

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







Shape Stroke was introduced in Photoshop CS6.

10% popularity Vote Up Vote Down


 

@Sims5801359

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

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme