• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How to create vector hollow rounded rectangle without the use of stroke

Community Beginner ,
May 21, 2018 May 21, 2018

Copy link to clipboard

Copied

This might be outside the scope of the program, but I have this super minimalist camera that I'm using to learn how to manipulate SVG for web. In order to use the image as a clipping path in HTML I need to define the rounded rectangle around the outside as a shape, not a path with a border. olSrDyn.png

I'm very new to vector editing.

Views

1.6K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , May 22, 2018 May 22, 2018

Draw your first outer rectangle and fill with the angle gradient

Now Alt-Click on the path to duplicate it and in the options bar set path operations to subtract front shape

With the duplicate path selected use Edit - Transform Path -Scale to reduce the size of the front path. After hitting enter to accept the change you will need to adjust the roundness of the corners on the inner shape (in may example the outer corners were set to 60px but the inner corners set to 20px

That is it - done

Dave

Votes

Translate

Translate
Adobe
LEGEND ,
May 21, 2018 May 21, 2018

Copy link to clipboard

Copied

You simply draw two paths and subtract the inside one. You might wanan read the relevant sections in the help. That said, people don't use PS for building vector-based content. That would be Illustrator, if at all, or tools like the free Inkscape.

Mylenium

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 21, 2018 May 21, 2018

Copy link to clipboard

Copied

Screen Shot 2018-05-22 at 08.55.28.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 22, 2018 May 22, 2018

Copy link to clipboard

Copied

LATEST

Draw your first outer rectangle and fill with the angle gradient

Now Alt-Click on the path to duplicate it and in the options bar set path operations to subtract front shape

With the duplicate path selected use Edit - Transform Path -Scale to reduce the size of the front path. After hitting enter to accept the change you will need to adjust the roundness of the corners on the inner shape (in may example the outer corners were set to 60px but the inner corners set to 20px

That is it - done

Dave

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines