Search code examples
htmlphotoshopadobe-illustrator

Convert Photoshop Selection to Polygon Points. ("x,y,x,y,x,y")

For example, I can open this image to Photoshop and select, let's say, Europe, with any selection tool. Then I need to export/save/see that selection as coordinates. As in the, <polygon points="343,754,274,725,314,709,374,702" />. Please, any tips?

worldMap

Solution

  • Found a way to do this quite quickly actually.

    1. Downloaded GIMP. From there I made my selection and convert my selection to path. There is a little button for that down to the right.
    2. Then exported the path (right click it) and open it with a text editor like Notepad++.
    3. Copy the <path ... />. Delete any Id and other unnecessary styles it has in it. Usually, its a lot of lines of code. You can use this instead of .

    And that's it. If you want to make it even more flashy you can use something like

        `path {
         fill: transparent;
         transition: all .3s ease-in-out;
         box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px;
     }
     path:hover {
         stroke-width: 2;
         stroke: black;
         box-shadow: rgba(0, 0, 0, 0.22) 0px 20px 65px;
         transform: translate3d(0px, -3px, 0px);
     }`

    to your CSS files.