Intersection between layers for empty and filled heart vector in Photoshop

Question

I have downloaded a heart icon vector from flaticon, I will use it as "add as favorite" icon, so I need two states:

1. The heart filled with black background with opacity 75% for example (unchecked)
2. The heart filled with red color 100% opacity (checked)

Question: I can't figure out how to fill a vector while keeping the border color, In other words get rid of the black background outside the heart in my example (see second screen-shot)

What I have tried: I have tried to use the intersection between layers as you can see from the screenshot

Note: I am not a designer, I an iOS developer who try to create my own design for the first time, so be easy ;), I have spend more than 1 hour searching in Youtube and Google and here and I guess for a designer it will take 1 minute to do what I want.

Answer 1

There is some confusion due to the shape itself. It is not "empty". It's a thin shape with an inner path and an outer path. The shape is filled with white in your screenshots. The center of the heart is a "counter" created by the two paths being set to create a compound image. It is designed to be a thin, stroke-like, shape. Not a solid heart shape.

---

If you want to change the color of this thin compound shape as it is....

Just double-click the "heart" layer and change the color. If you want it filled with black, change the color to black and then reduce the layer opacity to 75%

---

If you are trying to subtract the heart from a rectangle....

Grab the Rectangle Shape Tool and set the path operations menu to Combine Shapes . . .

Highlight the "heart" layer and draw the rectangle.

Then go back to the path operations menu and set it to Exclude Overlapping Shapes.

You'll end up with a rectangle and a heart shaped hole in it....

---

If you just want to fill the inner portion of the heart, or if your desire is for a solid heart shape...

Duplicate the "heart" layer.

Use the Direct Selection Tool (white arrow) to click an anchor point on the outer path (or inner path) of the duplicate layer.

Hit the Delete key twice.

This leaves a shape for the inner part of the heart which you can then alter the color of.

Answer 2

There are a number of ways to do this. The easiest one I can think of off the top of my head is to right click on the layer and go to Blending Options. From there you can click the Color Overlay effect to add a fill color. That should fill your shape with whatever color you pick.

Another option would be to Ctrl + Click on the heart layer's thumbnail to "load the selection". Then create a new layer for your fill and use the Paint Bucket tool to fill in the selection that was created.