I have an Online Shop, I'll in my Website Dress to sell, I to want habe as this image to show,

enter image description here

My question is which program need for have same what inside of rectangle is, the Black Circle and the Line which connect to it.

I'm Linux user...

  • 1
    Any drawing or photo application can create type, a filled circle, and a line.
    – Scott
    Commented Mar 3, 2022 at 11:34
  • thanks for you answer, how does it with Gimp ?, how filled circle and give the and I give the line different thickness as the image to show ?
    – dsaj34v
    Commented Mar 3, 2022 at 11:46
  • What have you tried? Have you searched for basic tutorials on how to use Gimp? This is all very rudimentary.
    – Scott
    Commented Mar 3, 2022 at 11:59
  • Now I'm search on youtube example, how to doing it with Gimp...
    – dsaj34v
    Commented Mar 3, 2022 at 12:03
  • If this is going on a website, it's usually good to make the text more accessible by either doing the text in HTML or providing a good fallback for users who can't use full images. Also keep in mind responsiveness, like small screens Commented Mar 3, 2022 at 14:37

2 Answers 2


For those who are not tech savvy, it might be easier to use something like Figma. It's quite simple to use and should work well for something like your example.

There is no need to install any software on your computer. There's an online version of Figma and you can use it directly in your browser. It's also free!

Here's a screenshot showing a very quick and simple layout I made in Figma

enter image description here

You can easily drop in an image, type some text, draw circles, add a fill, draw lines, change the stroke colour etc. Once you have completed the layout Group all the elements and Export the Group as a PNG imgage for use on your website.

Here's an example of the above layout exported as a PNG. You can also export as SVG if the text, lines, and shapes need to be vector.

enter image description here

  • Very thanks! it is very easy to work...I wish you a nice Weekend !
    – dsaj34v
    Commented Mar 4, 2022 at 15:59

Prepare the photo and remove the background from it - if needed - in GIMP. Paste it to Inkscape and add texts, numbers. + auxiliary lines, curves colored areas there. Vector editing in GIMP is possible, but it's very clumsy due poor tools, Inkscape is much more flexible and allows you to export the result as SVG or in raster formats (for ex. JPG, with transparency use PNG)

If you have made in GIMP the background transparent, the transparency stays when the image is pasted to Inkscape. As well you can import a PNG to Inkscape for keeping the transparency.

None of these programs knows anything useful of CMYK printing. I guess it's no problem in your case.

Website programmers may build their photo-text-graphics compositions in higher level in the web page builder. I guess you are not going to do it.

  • Very Thanks for your answer, because is my First Time, who i to work with Inkscape, now i'll lern it, i now to reading that Inkscape is beter for Vector graphic as Gimp...
    – dsaj34v
    Commented Mar 3, 2022 at 12:26
  • You obviously use some webshop platform. Ask them which is the best format to keep texts and auxiliary graphics sharp (=non-pixelated). As already commented by others: The webpage should be constructed as responsive i.e. as easy to use with a phone as with a wide screen desktop PC. If the platform you use makes this possible you should also prepare your material to support this feature.
    – user82991
    Commented Mar 3, 2022 at 15:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.