I have a large .png of a model's face. I need to draw an irregularly shaped - call it a polygon - around her lips, so that when the cursor hits that zone, I show lipstick, and similar zones around her eyes, so when the cursor hits those zones I show eye makeup.
Asked
Active
Viewed 119 times
-1
-
Hi ProfK, welcome to GDSE and thanks for your question. If you want to know more about the site, please see the [help center](http://graphicdesign.stackexchange.com/help) or ping one of us in [chat](http://chat.stackexchange.com/rooms/1240/the-ink-spot) once your reputation is sufficient (20). Keep contributing and enjoy the site! – Bakabaka Oct 10 '14 at 09:55
-
Why, thank you Vincent. – ProfK Oct 10 '14 at 10:56
-
Hi there! I'm migrating your question to StackOverflow, you'll get more detailed answers there. Good luck! – Yisela Oct 10 '14 at 11:50
2 Answers
0
(With Photoshop)
- Open the image in Photoshop.
- Create a new layer and draw shape on the lips.
- Right click on the layer and "Create Smart Object".
- Double click the smart object to open it in a new tab.
- Use the "Save for Web" command on the Smart Object, save as PNG. Check "Transparency" to keeps it's transparency so that it can be placed on the background image later.
That's how you create the image. Further than that is impossible to answer since you give no clues to how and where (technical platform) this is going to work.
Henrik Ekblom
- 101
- 2
-
On a web page. A 'hit' is when the mouse cursor is over the Smart Object. – ProfK Oct 10 '14 at 10:57
0
When I've had to do this, I had to revert to some mildly-complex javascript. These 'hit zones' are defined by an HTML Image Map, and you can use Javascript to assign the points in the image map to percentages based on the size of an image. For more information, here is a similar question with code snippets and more detail:
Community
- 1
- 1
Pixeltramp
- 187
- 1
- 10