How do I make this shape as a png or svg?

Question

I'm trying to make this rectangle with the cut off corner. I'm only managing to create a rectangle at the moment.. how do I cut off the corner?

The white in the screenshot is the shape I'm trying to make.

Answer 1

The following is for Adobe XD - which is vector based. Photoshop and Photopea are raster image editors, so they're not the ideal tools for this kind of work, especially if you want to output an SVG which is a vector format.

1. With the Pen Tool, draw a shape on top of the rectangle to use to cut it.

2. Select both shape and rectangle and use the "Subtract" boolean operation.

3. To export, select the graphic and do File > Export > Selected, and choose the format you want.

Answer 2

You can achieve similar results using Photoshop. Here's how:

1. Create a new document (any size but larger than your button).
2. Create rectangle using Rectangle Tool.
3. Select Direct Selection Tool (long press on Path Selection Tool, black arrow;
   or Shift+A twice).
4. Select the upper left node and move it by dragging with Shift (or by pressing 🡆
   or Shift+🡆 for x10 increment).
5. When you're satisfied with the result select Copy SVG from the Layers panel menu.
6. Create a new text file in any text editor, Notepad, for example, paste svg code there and save your file with any name and svg extension.