0

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

empty vector

filled vector

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.

1
  • Here is the vector PSD
    – iOSGeek
    Jul 29, 2015 at 19:16

2 Answers 2

2

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 . . .

enter image description here

Highlight the "heart" layer and draw the rectangle.

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

enter image description here

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

enter image description here


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.

enter image description here

Hit the Delete key twice.

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

enter image description here

10
  • if I double click on the small rectangle at bottom right of the layer and change the color only the border color change, I want to keep the border white while the shape is filled with black with opacity 70% please check the PSD in my comment with the question
    – iOSGeek
    Jul 29, 2015 at 19:40
  • Well that explains a bit more. You weren't very clear in the question.
    – Scott
    Jul 29, 2015 at 19:41
  • sorry for not being clear, but I said "I want to get rid of the back background outside the heart in my screenshot"
    – iOSGeek
    Jul 29, 2015 at 19:42
  • Well, the "vector which is empty" isn't really accurate. It's filled so there was some confusion. No worries though, :) I think my answer should cover most of the things you may want to do.
    – Scott
    Jul 29, 2015 at 19:45
  • wow, I like your solution of duplicating and hit "delete" twice. After that I have to re-size one of the layers to show the white border, is there any better alternative, since the re-sizing can't be pixel perfect with just my eyes !
    – iOSGeek
    Jul 29, 2015 at 19:58
0

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.

Your Answer

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

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