what's the best way to recreate or clean up this vector?

[patent10021]

So I traced a png because I need to to use this as a pixel perfect UI element.

What's the best way to do this? The only solution for pixel perfect UI elements to is recreate from scratch right?

I don't want the fill obviously. I just want the outlines so I have total control over colours later.

Do you just create new anchor points and start grabbing handles etc when using the pen tool + shapes tool?

Should I do this in Sketch or Affinity Designer instead?

 

[davedee65]

So I traced a png because I need to to use this as a pixel perfect UI element.

What's the best way to do this? The only solution for pixel perfect UI elements to is recreate from scratch right?

I don't want the fill obviously. I just want the outlines so I have total control over colours later.

Do you just create new anchor points and start grabbing handles etc when using the pen tool + shapes tool?

Should I do this in Sketch or Affinity Designer instead?

[doublepost=1456094244][/doublepost]HI yes the only way is to start from scratch and draw/create a new clean version. However you can break the design down into 3 simple vertical rectangles with rounded ends, one circle and then the two lower elements that would need to be drawn with the pen (bezier) tool, actually you only need to create one of these and copy/reflect to get the other one. All can be created in any vector based program, see attached visual that was put together in Illustrator in under two minutes.

 

[patent10021]

Holy F! I hate you! I've been mucking around in AI for 5 hours and still can't get it right. I've been using the pen too only. I was going to post here again because my outside trace was ok but I could get rid of some pointy areas.

So how do I knock everything out?

[doublepost=1456107739][/doublepost]I have this so far. This is on the right track?
[doublepost=1456109249][/doublepost]It's coming along! Man that bezier tool is tricky for noobs! I want to add more anchor points but the few the better!

 

[patent10021]

Ah...Unite, Merge.


Hmmm but unite is not working for me with these shapes.

 

[patent10021]

Ah problem was I wasn't using fill. I have the feeling your version above is red strokes with white fill. It's easy to do if you cheat and use unite shapes because the fills block each other out and form compounds. But what if I want to do this with no fill? Would I still use unite? Or would I use clipping mask?

I had some other odd things happen. When I used the eraser it ended up warping the entire path the erase was used on. Didn't notice it zoomed in so much. It seems the pencil eraser or eraser affects other areas along the path in an odd way. I had to go in and create some black rectangles to hide some areas that got messed up. It's like the eraser affects the entire path even though I'm only erasing a bit far away.

 

[davedee65]

sorry in the UK so timezones against us! You're spot on with your construction, it's just you're using the wrong tools to finish it off. Go back to your outline image select one of the 'fingers' and using the scissor tool make two clicks on the two places where the finger intersects the lower elements, this will cut the line and you can delete the part you don't need. Do the same for the other two fingers and your'e done, nice and clean.

 

[patent10021]

Thanks for the help. I feel like using scissors is a "hack" because it doesn't allow me to edit the fingers or whatever later on because I've destroyed the fingers.

Isn't there a way to simply block out the bottom part of the fingers with some other tool/method? What if I make the palm elements one group and then the fingers another group and then use some kind of clipping method?

Also, I've finished it but I think if I make the palm a closed shape like this instead of an open half it might be easier to use the unite tool. What do you think?

 

[davedee65]

Ah well if I'd known that you wanted to be able to edit the fingers I would have suggested plan B!

This visual shows a mask, in green on the left, created to isolate the visual area of the fingers that you want while allowing you to retain the rest so you can edit as required. Create the mask shape and make sure that it's above the fingers. Select the mask and the fingers and hit cmd 7 to create the mask, everything outside of the mask becomes 'invisible' but if you view in outline mode (cmd Y) you'll see that the rest of the fingers are still there. To select the items within a mask you'll need to use the 'direct selection tool' or the 'group selection tool'. To release the mask hit alt cmd 7.

You could combine the two palm sections and draw a vertical line in the middle, but using the mask as above you shouldn't need to use the unite function.

(Apologies if I'm telling you to suck eggs re the mask!!).

 

[patent10021]

lol Actually I'm fine with your first version as I don't need to edit the fingers BUT I wanted to know the second way since technically it's safer for future-proofing IMO. Nothing is destructive.

Thank you very much.

 

[MidgetArcher]

[doublepost=1456094244][/doublepost]HI yes the only way is to start from scratch and draw/create a new clean version. However you can break the design down into 3 simple vertical rectangles with rounded ends, one circle and then the two lower elements that would need to be drawn with the pen (bezier) tool, actually you only need to create one of these and copy/reflect to get the other one. All can be created in any vector based program, see attached visual that was put together in Illustrator in under two minutes.View attachment 617680

two minutes? impressive.

 

[davedee65]

years of experience, knowing your app and a very simple exercise!

 

[Razzerman]

two minutes? impressive.

He's being modest. It should only take a minute