[{"data":1,"prerenderedAt":491},["ShallowReactive",2],{"help-article-\u002Fhelp\u002Fdesign-elements-and-tools\u002Fpath-editing":3},{"id":4,"title":5,"body":6,"category":468,"description":469,"extension":470,"keywords":471,"meta":481,"navigation":482,"order":483,"path":484,"published":485,"rawbody":486,"seo":487,"stem":488,"updated":489,"__hash__":490},"help\u002Fhelp\u002Fdesign-elements-and-tools\u002Fpath-editing.md","Draw and edit a path: create your own shapes and lines",{"type":7,"value":8,"toc":461},"minimark",[9,23,26,48,53,151,166,170,352,370,374,379,431],[10,11,12,13,17,18,22],"p",{},"In the ",[14,15,16],"place",{},"template editor",", you draw your own shape point by point with the ",[19,20,21],"strong",{},"Add path"," tool. A path can be a straight line, a curve or a closed outline, such as a speech bubble or a wave.",[10,24,25],{},"This takes three steps:",[27,28,29,37,42],"ol",{},[30,31,32,33,36],"li",{},"Draw the path on the ",[14,34,35],{},"canvas",".",[30,38,39,40,36],{},"Edit its points on the ",[14,41,35],{},[30,43,44,45,36],{},"Style the path in the ",[14,46,47],{},"properties panel",[49,50,52],"h2",{"id":51},"draw-a-path","Draw a path",[27,54,55,78,86,123],{},[30,56,57,61,62,65,66,68,69,72],{},[58,59,60],"click",{},"Click"," the pen nib in the middle of the ",[14,63,64],{},"toolbar",". This is the ",[19,67,21],{}," tool.",[70,71],"br",{},[73,74],"img",{"alt":75,"src":76,"width":77},"Toolbar with the Add path tool highlighted.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-path-editing-03\u002Fpublic",632,[30,79,80,82,83,85],{},[58,81,60],{}," on the ",[14,84,35],{}," to set the first point.",[30,87,88,91,92,113,115,116,118],{},[58,89,90],{},"Set"," the next point:",[93,94,95,104],"ul",{},[30,96,97,100,101,103],{},[98,99],"right",{}," For a straight line: ",[58,102,58],{}," another spot.",[30,105,106,108,109,112],{},[98,107],{}," For a curve: ",[110,111,110],"drag",{}," with the mouse button held down after clicking. The line bends while you drag.",[70,114],{},"Set all further points the same way.",[70,117],{},[73,119],{"alt":120,"src":121,"width":122},"A path being drawn: points on the canvas and a curve with its handle.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-path-editing-01\u002Fpublic?v=1df72503",894,[30,124,125,126,148,150],{},"Finish the path depending on the shape:",[93,127,128,136],{},[30,129,130,132,133,135],{},[98,131],{}," For a closed shape: ",[58,134,58],{}," the first point again. The outline closes, and you can edit its points right away.",[30,137,138,140,141,144,145,36],{},[98,139],{}," For an open line: ",[142,143,142],"press",{}," ",[19,146,147],{},"Esc",[70,149],{},"The path is now done. It has a black outline and no fill.",[152,153,154],"tip",{},[10,155,156,157,160,161,144,163,165],{},"You can add more points to an open end later: ",[58,158,159],{},"select"," the path and ",[58,162,58],{},[19,164,21],{}," again.",[49,167,169],{"id":168},"edit-the-points","Edit the points",[27,171,172,194,226,293,331,345],{},[30,173,174,176,177,179,180,183,184,187,188,190],{},[58,175,60],{}," the cursor button to the left of the image icon in the middle of the ",[14,178,64],{},". If it doesn't show an arrow, ",[181,182,181],"hover",{}," over it and choose ",[19,185,186],{},"Select",". A click now selects points instead of setting new ones.",[70,189],{},[73,191],{"alt":192,"src":193,"width":77},"Toolbar with the Select tool highlighted.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-path-editing-04\u002Fpublic",[30,195,196,199,200,202,203,36,206],{},[58,197,198],{},"Double-click"," the path. The points appear on the path, and a bar with path tools appears at the top of the ",[14,201,35],{},". You can also select the path and press ",[19,204,205],{},"Enter",[207,208,210],"trouble",{"symptom":209},"No points appear?",[10,211,212,213,215,216,218,219,221,222,225],{},"If the path sits inside a group or mask, the first double-click only selects the path. ",[58,214,198],{}," it again. Locked paths don't open on the ",[14,217,35],{},": ",[58,220,58],{}," the lock in their row in the ",[14,223,224],{},"layers panel"," to unlock them.",[30,227,228,229],{},"Depending on what you want to change:",[93,230,231,239,257,265,282],{},[30,232,233,235,236,238],{},[98,234],{}," Move a point: ",[110,237,110],{}," it.",[30,240,241,243,244,144,247,250,251,253,254,256],{},[98,242],{}," Select several points: ",[142,245,246],{},"hold",[19,248,249],{},"Shift"," and ",[58,252,58],{}," them. Or ",[110,255,110],{}," a frame around them, starting on an empty spot. The frame only works while the layout grid is off.",[30,258,259,261,262,264],{},[98,260],{}," Add a point: ",[58,263,58],{}," the line between two points. You can drag the new point right away.",[30,266,267,269,270,272,273,144,275,278,279,36],{},[98,268],{}," Delete points: ",[58,271,159],{}," them and ",[142,274,142],{},[19,276,277],{},"Backspace"," or ",[19,280,281],{},"Delete",[30,283,284,286,287,289,290,292],{},[98,285],{}," Change a curve: ",[58,288,58],{}," a point and ",[110,291,110],{}," the small square handles next to it. On an arc, you drag the round handle in its middle.",[30,294,295,296,298,299,325,327],{},"Depending on what you want to change in the bar at the top of the ",[14,297,35],{},":",[93,300,301,309],{},[30,302,303,305,306,308],{},[98,304],{}," Change the line to the selected point: ",[58,307,58],{}," one of the six icons on the right. The line becomes a gap, a straight line, one of three kinds of curve or an arc.",[30,310,311,313,314,316,317,320,321,324],{},[98,312],{}," Close or open the path: ",[58,315,58],{}," the button on the far left. Its tooltip says ",[19,318,319],{},"Close path",". On a closed path it says ",[19,322,323],{},"Open path"," and separates the last point from the first again.",[70,326],{},[73,328],{"alt":329,"src":330,"width":122},"Point editing: the bar with path tools at the top of the canvas, below it a selected point with its curve handles.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-path-editing-02\u002Fpublic?v=605923c4",[30,332,333,144,336,278,338,341,342,344],{},[142,334,335],{},"Press",[19,337,147],{},[58,339,340],{},"double-click"," the ",[14,343,35],{}," to leave point editing.",[30,346,347,351],{},[348,349,350],"look",{},"Check"," the result with the path deselected.",[10,353,354,355,358,359,362,363,358,366,369],{},"While you edit, ",[19,356,357],{},"Cmd + Z"," (Windows: ",[19,360,361],{},"Ctrl + Z",") undoes your last change to the points. ",[19,364,365],{},"Cmd + Shift + Z",[19,367,368],{},"Ctrl + Shift + Z",") redoes it.",[49,371,373],{"id":372},"style-the-path","Style the path",[10,375,12,376,378],{},[14,377,47],{},", you set the properties of the selected element, here the path's.",[27,380,381,391,404,419],{},[30,382,383,385,386,388,389,36],{},[58,384,60],{}," the path on the ",[14,387,35],{},". Its properties appear in the ",[14,390,47],{},[30,392,393,144,396,399,400,403],{},[58,394,395],{},"Tick",[19,397,398],{},"Fill Color"," in the ",[19,401,402],{},"Appearance"," section if the path should have a fill. It starts out white, and you pick the color below.",[30,405,406,408,409,412,413,250,416,36],{},[58,407,90],{}," the outline with ",[19,410,411],{},"Stroke Color",", ",[19,414,415],{},"Stroke Width",[19,417,418],{},"Dash",[30,420,421,341,423,426,427,36],{},[58,422,60],{},[19,424,425],{},"Path"," section if you want to place points exactly. It lists every point with its X and Y values. You can type values there or delete a point with ",[428,429,430],"close",{},"×",[432,433,434],"related",{},[93,435,436,443,449,455],{},[30,437,438],{},[439,440,442],"a",{"href":441},"\u002Fhelp\u002Fdesign-elements-and-tools\u002Fcolors-and-gradients","Set colors and gradients",[30,444,445],{},[439,446,448],{"href":447},"\u002Fhelp\u002Fdesign-elements-and-tools\u002Fcurved-text","Put text on a curve",[30,450,451],{},[439,452,454],{"href":453},"\u002Fhelp\u002Fdesign-elements-and-tools\u002Fmask-elements","Mask elements: crop an image to a shape",[30,456,457],{},[439,458,460],{"href":459},"\u002Fhelp\u002Fdesign-elements-and-tools\u002Fdesign-elements","Design elements (images, text, shapes)",{"title":462,"searchDepth":463,"depth":463,"links":464},"",2,[465,466,467],{"id":51,"depth":463,"text":52},{"id":168,"depth":463,"text":169},{"id":372,"depth":463,"text":373},"design-elements-and-tools","Draw your own shapes and lines with the Add path tool, change their points afterwards and style fill and outline.","md",[472,21,473,474,475,323,319,476,477,478,479,480],"path","points","curve","bezier","vector shape","Pfad","Punkte","Kurve","Form zeichnen",{},true,22,"\u002Fhelp\u002Fdesign-elements-and-tools\u002Fpath-editing","2026-10-13","---\ntitle: \"Draw and edit a path: create your own shapes and lines\"\ndescription: \"Draw your own shapes and lines with the Add path tool, change their points afterwards and style fill and outline.\"\ncategory: design-elements-and-tools\norder: 22\nkeywords: [\"path\", \"Add path\", \"points\", \"curve\", \"bezier\", \"Open path\", \"Close path\", \"vector shape\", \"Pfad\", \"Punkte\", \"Kurve\", \"Form zeichnen\"]\n---\n\nIn the :place[template editor], you draw your own shape point by point with the **Add path** tool. A path can be a straight line, a curve or a closed outline, such as a speech bubble or a wave.\n\nThis takes three steps:\n\n1. Draw the path on the :place[canvas].\n2. Edit its points on the :place[canvas].\n3. Style the path in the :place[properties panel].\n\n\n## Draw a path\n\n1. :click[Click] the pen nib in the middle of the :place[toolbar]. This is the **Add path** tool.\n\n   ![Toolbar with the Add path tool highlighted.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-path-editing-03\u002Fpublic){width=\"632\"}\n\n2. :click[Click] on the :place[canvas] to set the first point.\n3. :click[Set] the next point:\n\n   - :right For a straight line: :click[click] another spot.\n   - :right For a curve: :drag[drag] with the mouse button held down after clicking. The line bends while you drag.\n\n   Set all further points the same way.\n\n   ![A path being drawn: points on the canvas and a curve with its handle.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-path-editing-01\u002Fpublic?v=1df72503){width=\"894\"}\n\n4. Finish the path depending on the shape:\n\n   - :right For a closed shape: :click[click] the first point again. The outline closes, and you can edit its points right away.\n   - :right For an open line: :press[press] **Esc**.\n\n   The path is now done. It has a black outline and no fill.\n\n::tip\nYou can add more points to an open end later: :click[select] the path and :click[click] **Add path** again.\n::\n\n## Edit the points\n\n1. :click[Click] the cursor button to the left of the image icon in the middle of the :place[toolbar]. If it doesn't show an arrow, :hover[hover] over it and choose **Select**. A click now selects points instead of setting new ones.\n\n   ![Toolbar with the Select tool highlighted.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-path-editing-04\u002Fpublic){width=\"632\"}\n\n2. :click[Double-click] the path. The points appear on the path, and a bar with path tools appears at the top of the :place[canvas]. You can also select the path and press **Enter**.\n\n   ::trouble{symptom=\"No points appear?\"}\n   If the path sits inside a group or mask, the first double-click only selects the path. :click[Double-click] it again. Locked paths don't open on the :place[canvas]: :click[click] the lock in their row in the :place[layers panel] to unlock them.\n   ::\n\n3. Depending on what you want to change:\n\n   - :right Move a point: :drag[drag] it.\n   - :right Select several points: :press[hold] **Shift** and :click[click] them. Or :drag[drag] a frame around them, starting on an empty spot. The frame only works while the layout grid is off.\n   - :right Add a point: :click[click] the line between two points. You can drag the new point right away.\n   - :right Delete points: :click[select] them and :press[press] **Backspace** or **Delete**.\n   - :right Change a curve: :click[click] a point and :drag[drag] the small square handles next to it. On an arc, you drag the round handle in its middle.\n\n4. Depending on what you want to change in the bar at the top of the :place[canvas]:\n\n   - :right Change the line to the selected point: :click[click] one of the six icons on the right. The line becomes a gap, a straight line, one of three kinds of curve or an arc.\n   - :right Close or open the path: :click[click] the button on the far left. Its tooltip says **Close path**. On a closed path it says **Open path** and separates the last point from the first again.\n\n   ![Point editing: the bar with path tools at the top of the canvas, below it a selected point with its curve handles.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-path-editing-02\u002Fpublic?v=605923c4){width=\"894\"}\n\n5. :press[Press] **Esc** or :click[double-click] the :place[canvas] to leave point editing.\n6. :look[Check] the result with the path deselected.\n\nWhile you edit, **Cmd + Z** (Windows: **Ctrl + Z**) undoes your last change to the points. **Cmd + Shift + Z** (Windows: **Ctrl + Shift + Z**) redoes it.\n\n## Style the path\n\nIn the :place[properties panel], you set the properties of the selected element, here the path's.\n\n1. :click[Click] the path on the :place[canvas]. Its properties appear in the :place[properties panel].\n2. :click[Tick] **Fill Color** in the **Appearance** section if the path should have a fill. It starts out white, and you pick the color below.\n3. :click[Set] the outline with **Stroke Color**, **Stroke Width** and **Dash**.\n4. :click[Click] the **Path** section if you want to place points exactly. It lists every point with its X and Y values. You can type values there or delete a point with :close[×].\n\n::related\n- [Set colors and gradients](\u002Fhelp\u002Fdesign-elements-and-tools\u002Fcolors-and-gradients)\n- [Put text on a curve](\u002Fhelp\u002Fdesign-elements-and-tools\u002Fcurved-text)\n- [Mask elements: crop an image to a shape](\u002Fhelp\u002Fdesign-elements-and-tools\u002Fmask-elements)\n- [Design elements (images, text, shapes)](\u002Fhelp\u002Fdesign-elements-and-tools\u002Fdesign-elements)\n::\n",{"title":5,"description":469},"help\u002Fdesign-elements-and-tools\u002Fpath-editing","2026-10-22","4mwWDQ_lA8bE_UxNmBHkP1p53awMKcqkfX_R0fcOB4M",1792680561141]