: SVG Downward Inner Bevel I am trying to reproduce this image as SVG: It was made in Photoshop simply by creating a rounded rectangle and setting an inner bevel layer style, downward. (It's

Posted in: #AdobeIllustrator #Inkscape #Svg

I am trying to reproduce this image as SVG:

It was made in Photoshop simply by creating a rounded rectangle and setting an inner bevel layer style, downward. (It's a bit hard to see on this site, as it is meant to typically be shown on a darker background, but the beveled border is there.)

Is it possible to reproduce this effect with SVG? I have experimented with setting a stroke with gradient, but it doesn't seem to look correct. I am using Inkscape, but I can also get access to Illustrator or edit the SVG file directly. Any help with getting the border style correct (or close to it) would be most appreciated. Thanks!

10.01% popularity Vote Up Vote Down

: Resetting skew/perspective/warp etc. on Smart Object Is there a way to reset the skew or perspective effect applied to a smart object? Setting the warp setting in free transform from custom to

@Gail6891361

Posted in: #AdobePhotoshop #Filter #Smartobject

9 Comments

: Fireworks: Can I set a transparent fill color but solid stroke? When I set transparency to a shape, it applies both to the fill color and the stroke color. What if I need a semi-transparent

@Gail6891361

Posted in: #AdobeFireworks

4 Comments

: How can I export sublayers to png in Adobe illustrator? A designer did a design for me. It is in Adobe illustrator. In order to write my program, I need to export sublayers one by one

@Gail6891361

Posted in: #AdobeIllustrator #Export #Layers #Png

2 Comments

: Formating Text added via Data Sets in Photoshop I've been using Data Sets to fill alot of my graphics with Text. However I want the text to have different formatting styles (New Lines, Tabs,

@Gail6891361

Posted in: #AdobePhotoshop #Text

1 Comments

Login to post a comment!

1 Comments

Sorted by latest first Latest Oldest Best

@RJPawlick971

How I would do it:

create your shape (rounded rectangle)
duplicate the shape (so it's directly on top)
give the one on top a transparent fill and a border color (doesn't matter what border color)
adjust the width of the border stroke to be the width of your bevel
choose PATH --> OBJECT TO PATH and then PATH --> PATH TO OBJECT
your border is now a fillable shape. Give this shape a transparent border
fill this shape with a gradient. Adjust the gradient so that it has a narrow transition from light to dark
have this gradient's transition bisect at the lower left and upper right

Quick sample done in Inkscape:

10% popularity Vote Up Vote Down

Feed

: SVG Downward Inner Bevel I am trying to reproduce this image as SVG: It was made in Photoshop simply by creating a rounded rectangle and setting an inner bevel layer style, downward. (It's

More posts by @Gail6891361

: Resetting skew/perspective/warp etc. on Smart Object Is there a way to reset the skew or perspective effect applied to a smart object? Setting the warp setting in free transform from custom to

: Fireworks: Can I set a transparent fill color but solid stroke? When I set transparency to a shape, it applies both to the fill color and the stroke color. What if I need a semi-transparent

: How can I export sublayers to png in Adobe illustrator? A designer did a design for me. It is in Adobe illustrator. In order to write my program, I need to export sublayers one by one

: Formating Text added via Data Sets in Photoshop I've been using Data Sets to fill alot of my graphics with Text. However I want the text to have different formatting styles (New Lines, Tabs,

Login to post a comment!

1 Comments

Back to top | Use Dark Theme