2

I'm as astonished as ashamed. I know my limitations, I know I'm way, way far of even leaving the basic level in terms of design, but I simply can't find a way of fill a random contour I've downloaded in order to make a cursor icon (not ico/cur though).

This is the image (credits):

Hand

It was the less ugly I could find but it's transparent outside the contour and inside. This doesn't work for me because, as a cursor, it would be hard to see it when hovering colourful elements.

So I tried to fill the inner part of the hand, making it solid white, like a glove, but of all my attempts, or the contour would become ugly crispy or the painting wasn't "solid enough" — mostly because when I use the Brush Tool I have to paint over and over again the same region to get it a fully solid painting (probably I'm doing wrong).

Anyway, it sounds a simple thing, but I've seen simple things before having a rather complicated way to solve — hope not — but how do I do that?

  • 1
    It is a Raster image, which definitely makes this harder. – WELZ Dec 20 '17 at 13:39
  • 1
    You shouldn't be ashamed to ask questions. That is why this website exists. – Billy Kerr Dec 20 '17 at 14:11
4

The problem with making selections or using the Paint Bucket tool is that the graphic has some semi-transparent pixels around the edges. These are what are causing the problem. These semi-transparent pixels are called antialiasing, and are needed to make the lines look smooth, and not jagged.

In Photohsop, one simple but effective method is to proceed as follows. This method also preserves the original transparency of the PNG.

  1. Zoom in on the image so that you can see the pixel grid

  2. create a new layer

  3. drag it under the hand layer

  4. use the Bucket Fill tool on that layer by selecting the "All Layers" option in the tool options along the top.

  5. use the Pencil tool to paint any pixels that are still transparent. Try not to go over the edge, but if you do, just hit CTRL+Z to undo.

Using layers like this effectively means you can underpaint the transparent pixels on the inside of the graphic.

enter image description here

The finished transparent PNG.

enter image description here

  • That was much easier, thank you. One last question though: When I was painting I noticed that even the Foreground colour was set to white the Pencil Tool was painting with the Background Colour (black). Looking more closely at your animation I notice that the Pencil Tool had the option Auto Erase disabled. When I disabled mine, it worked. Why? – user5613506 Dec 21 '17 at 10:36
  • @user5613506 The Pencil Tool auto erase functionality is described here: informit.com/articles/article.aspx?p=1588846&seqNum=13 and it's also mentioned here: helpx.adobe.com/photoshop/using/erasing-parts-image.html – Billy Kerr Dec 21 '17 at 11:35
  • Maybe it's me but I don't see how that option can be useful. Anyway, thank you for your help. :) – user5613506 Dec 21 '17 at 14:51
  • @user5613506 It might be useful if you are drawing pixel art. – Billy Kerr Dec 21 '17 at 20:01
4

As the file is a Raster file not Vector. Read more about Raster and Vector

You will need to use a Raster editor


I would do this using a mixture of MS Paint and Photoshop

Just open it in paint and save it (since by default paint doesn't save with transparency,)

Now open it in Photoshop and use the Magic Wand Selection Tool to select the outside of the hand and delete it, now you can save it as a .PNG (to preserve transparency)

This is my result (I used the 100px): Image in background to show transparency

enter image description here

Before ||||| After

enter image description here

  • Usually, the simpler solution is the right one, and I obviously thought about using the Paint Bucket straight away (if I didn't know that I'd jump off a building XD). However, I've got exactly what your animation showed, these pesky pixels remained transparent. Just so I know, is your second image the results of the MS Paint alternative or did you paint them manually? – user5613506 Dec 20 '17 at 13:26
  • I had done it manually, only because I had already closed Photoshop. And if I needed transparency, I would open in Photoshop and magic select – WELZ Dec 20 '17 at 13:28
  • Hmm... That didn't work as I expected. I tried both approaches and by using MS Paint and then deleting the outside part, the outer part of the resulting image got a thin white border. Painting the inside, with Paint Bucket, in Photoshop, and then filling in the remaining pixels, the inner part got crispy, unnoticeable if filling with black (I'm using white). I'm starting to think the problem is with the image... – user5613506 Dec 20 '17 at 13:38
  • Thank you for help, I'm marking Billy's answer as accepted because it was easier for me to reproduce. – user5613506 Dec 21 '17 at 14:52
  • I'll never ever again try to do pixel art XD – user5613506 Dec 22 '17 at 12:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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