Hoe maak ik van een afbeelding een vector shape?

[GertSolo]

Hoe kan ik met adobe photoshop van deze afbeelding een vector afbeelding maken?

[Ernemmer]

Zelf overtrekken of voor 5 euro iemand het laten doen op bijvoorbeeld Fiverr.

[Oon]

Ik zou het sowieso al niet met Photoshop doen, die is niet gemaakt voor vectors. Illustrator werkt daar veel makkelijker in, of maak even een gratis Figma account, die heeft ook een fijne pen tool en een SVG export optie.

Er is geen manie om een afbeelding zomaar naar SVG om te zetten, zelfs de moderne tools en AI-gedreven opties bakken er weinig van. Uiteindelijk is het sneller om zoiets zelf na te maken dan om te proberen een goed schalende SVG uit een automatisch proces te krijgen.

[esdeboer]

Inkscape kan toch wel aardig dingen overtrekken (Path -> trace bitmap)

Onderstaande svg is met een brightness cuttoff van 0,880, kan vast nog wel een stuk beter, maar dit was een snel probeersel

code:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="27.711369mm"
   height="34.408127mm"
   viewBox="0 0 27.711369 34.408127"
   version="1.1"
   id="svg8"
   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
   sodipodi:docname="drawing.svg">
  <defs
     id="defs2" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="1.4958821"
     inkscape:cx="-96.483189"
     inkscape:cy="59.786319"
     inkscape:document-units="mm"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="1920"
     inkscape:window-height="1156"
     inkscape:window-x="0"
     inkscape:window-y="0"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata5">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(509.55163,172.31081)">
    <path
       style="fill:#000000;fill-opacity:1;stroke-width:0.26458332"
       d="m -493.14784,-141.9229 c 0.0923,-0.62036 0.0761,-0.60925 2.66423,-1.83411 0.98227,-0.46488 1.78594,-0.94796 1.78594,-1.0735 0.71946,-0.47329 1.50536,-1.06655 2.04924,-1.63692 3.01596,-3.18894 4.27053,-8.19554 2.98786,-11.92367 -1.29879,-3.77501 -3.31032,-6.17143 -6.53141,-7.78116 -1.14266,-0.57104 -2.51987,-1.11888 -3.06047,-1.21742 -1.18767,-0.2165 -1.4753,-0.59199 -0.8967,-1.17059 0.39957,-0.39957 0.56564,-0.39694 2.21412,0.035 2.33759,0.61256 4.96755,2.1996 6.5938,3.97897 1.37504,1.50452 2.82282,4.20817 3.2542,6.07703 0.33121,1.43495 0.32849,5.28926 -0.005,6.73375 -1.03015,4.46521 -4.97019,8.65646 -9.48962,10.09466 -1.3365,0.4253 -1.66292,0.36652 -1.56642,-0.28209 z"
       id="path31"
       inkscape:connector-curvature="0" />
    <path
       style="fill:#c85b84;fill-opacity:1;stroke-width:0.26458332"
       d="m -501.04958,-142.0063 c -1.37518,-0.59811 -4.03052,-2.45683 -4.77678,-3.3437 -0.38196,-0.45394 -0.82169,-0.96609 -0.97717,-1.1381 -2.3058,-2.5511 -3.32627,-7.53631 -2.41887,-11.81671 0.69029,-3.25626 1.53936,-4.64878 4.46646,-7.32527 1.42744,-1.30522 1.77077,-1.3884 1.77077,-0.42905 0,0.49229 -0.50056,1.22606 -1.71359,2.51193 -0.94248,0.99908 -1.93579,2.26371 -2.20737,2.8103 -1.3847,2.78691 -1.6289,6.65951 -0.60936,9.66336 1.18708,3.49748 4.40427,6.7338 7.81203,7.85846 0.74412,0.24558 0.95162,0.45382 0.95162,0.955 0,0.52533 -0.13124,0.63907 -0.7276,0.63058 -0.40018,-0.006 -1.10675,-0.17525 -1.57014,-0.3768 z"
       id="path29"
       inkscape:connector-curvature="0" />
    <path
       id="path25"
       style="fill:#c85b84;fill-opacity:1;stroke-width:0.26458332"
       d="m -491.29377,-150.56823 c -0.34723,-1.86918 -1.62886,-4.77613 -3.17018,-7.19049 -1.88931,-2.95947 -2.96497,-5.54469 -2.96497,-7.12596 0,-1.88779 0.99933,-3.9207 2.63718,-5.36473 1.03619,-0.91357 2.87376,-2.0614 3.30012,-2.0614 0.0756,0 -0.73659,0.86321 -1.80497,1.91823 -2.43065,2.40027 -2.91903,3.29603 -2.92118,5.35781 -0.002,1.49752 0.15328,1.88761 2.73169,6.88207 2.55034,4.94007 2.74235,5.4204 2.86781,7.1739 0.17385,2.42976 -0.25228,2.68876 -0.6755,0.41057 z m -4.54765,10.17626 c 0,-0.0526 0.34891,-0.86521 0.77537,-1.80573 1.81457,-4.00195 1.33412,-6.56736 -2.27171,-12.12996 -3.31934,-5.12064 -4.27978,-6.96391 -4.63604,-8.89739 -0.54046,-2.93315 0.44795,-5.01027 3.3067,-6.94899 1.35771,-0.92075 1.85159,-0.89772 1.24456,0.058 -1.35546,2.13415 -1.66948,2.94443 -1.66948,4.30794 0,1.26402 0.28003,1.986 2.52937,6.52128 3.04735,6.14431 4.0336,8.30298 4.40573,9.64311 0.4097,1.47544 0.33269,3.46961 -0.19239,4.98178 -0.52021,1.49815 -2.57413,4.36563 -3.12702,4.36563 -0.2008,0 -0.36509,-0.0431 -0.36509,-0.0957 z m -5.9399,2.26452 c 0.13825,-0.11684 0.92846,-0.72084 1.75604,-1.34223 1.63587,-1.22831 2.49356,-2.2296 3.31439,-3.8693 0.75765,-1.51349 0.91322,-2.35447 0.89498,-4.83812 -0.0173,-2.36058 0.25764,-2.63631 0.7357,-0.73776 0.53023,2.10573 0.37956,4.56088 -0.37447,6.10206 -0.88993,1.81896 -2.5347,3.49039 -4.19584,4.26387 -1.28951,0.60044 -2.66433,0.87238 -2.1308,0.42148 z"
       inkscape:connector-curvature="0" />
    <path
       style="fill:#000000;fill-opacity:1;stroke:#000080;stroke-width:0.14902364"
       d="m -1888.465,-535.38772 c -2.4134,-0.34262 -4.419,-0.96218 -6.5226,-2.01499 -4.2647,-2.13441 -10.518,-6.37778 -14.6218,-9.9222 -1.7546,-1.51537 -6.7691,-7.35021 -8.3594,-9.72686 -4.0251,-6.0154 -6.4933,-13.51139 -7.5566,-22.94964 -0.2952,-2.62082 -0.2479,-10.12114 0.081,-12.81603 0.683,-5.59824 2.2233,-11.75847 3.9682,-15.87102 1.6888,-3.98022 3.9541,-7.28129 7.9347,-11.56244 2.8739,-3.09081 8.0076,-7.7817 9.8687,-9.01743 1.6906,-1.12247 2.3415,-0.90157 2.53,0.85857 0.2405,2.24554 -1.1779,4.53715 -6.1649,9.96025 -4.1954,4.56229 -7.4334,8.67446 -8.5659,10.87873 -2.0236,3.93843 -3.5469,9.13477 -4.2884,14.62859 -0.2707,2.00555 -0.3299,3.16999 -0.3358,6.60728 -0.01,5.3247 0.3429,8.32637 1.4916,12.71855 3.6387,13.9125 15.9763,27.2684 29.7118,32.16403 2.5802,0.91962 3.4102,1.41102 3.8472,2.27772 0.6176,1.22466 0.3533,3.26378 -0.4632,3.57422 -0.4543,0.17275 -1.9554,0.29772 -2.5545,0.21267 z"
       id="path38"
       inkscape:connector-curvature="0"
       transform="scale(0.26458333)" />
  </g>
</svg>

[Savantas]

Het logo is voor iemand die bedreven is in Bezier-curves (of dat nu in CorelDraw, Illustrator, Inkscape of Canva is) in 5 minuutjes inderdaad omgezet. In Photoshop kan je ook met vectoren werken, maar het is er zeg maar 'ingeplakt'.
Maar er zijn dacht ik ook online wel trace tools (zoals in bijvoorbeeld Illustrator en Inkscape) die de boel zo om kunnen zetten. De vormen worden dan waarschijnlijk wel grover, geen mooi verlopende curves (wat zeker bij vergroting snel zichtbaar zal worden).
In het getracede svg van esdeboer is de witte achtergrond meegenomen in de trace, je kan vaak aangeven welke kleur niet meegenomen kan worden.
Hier een voorbeeld van zelf getekend (met jaaren oefening), de trace en het logo zelf. Inderdaad 5 minuten in Illustrator (al zou ik wat meer kunnen mierenneuken om de vorm van de S nog wat beter te krijgen, al is dat waarschijnlijk zelfs verbetering van het origineel):
Om aan te geven hoe je zo'n logo zou kunnen natekenen (wat veel makkelijker is dan zelf zoiets out of the blue verzinnen), niet om je te voorzien van een kant en klaar logo (DIY, en ik weet ook niet waar je dit logo vandaan hebt, of je het voor nepparfum wil gaan gebruiken oid )

[ Voor 47% gewijzigd door Savantas op 26-02-2024 09:23 ]

[Oon]

esdeboer schreef op zaterdag 24 februari 2024 @ 19:37:
Inkscape kan toch wel aardig dingen overtrekken (Path -> trace bitmap)

Onderstaande svg is met een brightness cuttoff van 0,880, kan vast nog wel een stuk beter, maar dit was een snel probeersel

code:

..

Dit highlight wel weer meteen de reden dat het niet automatisch kan, want hoewel het er op het eerste oog allemaal prima uit ziet heb je een hele hoop extra vaste punten erin zitten:



Het ligt er allemaal aan wat het doel is, als dit voor een website ofzo is dan is het helemaal prima, maar voor drukwerk wil je dat echt niet. Buiten dat de ronding gewoon totaal niet klopt (zowel bij de zwarte als rode lijnen) gaat dit echt niet lekker schalen naar grotere outputs, want dan vermenigvuldig je iedere kleine afwijking (en die zitten er nogal wat in). Leuk voor beetje spelen, maar nutteloos voor zakelijk/professioneel gebruik.