2

I have this vector of a brush stroke, of which I can change the colorspace. However, I would like it to have an overlay effect, which it currently doesn't have. I want to use it in Web front-end, so this effect should be sustained within the image itself. Is there an easy way to do this in Illustrator / Photoshop or any other program?

As you can see in this picture, the red background is not noticable through the vector

As you can see in this picture, the red background is not noticable through the vector of the brush stroke.

EDIT1:

I am trying to achieve the following on my webpage: - Brush is overlayed on the corner of an image and I want that image to be viewable through the brush stroke, especially on the corners where the brush vector has a lighter color.

Zoomed-in version of how what it currently looks like on the webpage.

EDIT2 (FIXED):

I fixed it by doing the following:

  1. Select the vector, Transparency -> Make mask
  2. Copy the vector to Photoshop, Image -> Adjustments -> Black & White
  3. Copy the black/white mask image in Illustrator to the Transparency mask in Illustrator.
  4. Rasterize and save file.

Fixed version on the webpage!

Improve this question
2
  • The overlay effect, if you are going to embed this in a web page, should be programmed in HTML / CSS (plain color for example). Not in the file itself, unless you are working with Adobe Muse, which I strongly would not recommend. If it is sophisticated and changes with a new visual for each state / action, basically, each state / action needs to have its own file. And upon having the action performed, your script calls for the file. Dunno if this is clear ??
    – Angie
    Commented Oct 29, 2019 at 15:21
  • Introduce the transparency in whatever image editor you are using, then save as PNG32. Since you don't mention any image editor.. it's difficult to give any further direction.
    – Scott
    Commented Oct 29, 2019 at 17:31

2 Answers 2

Reset to default
1

1- You have your own answer but I want to give mine.

You can play with the opacity of the brush just dragging it to the artboard and replacing it. The example image, I changed the lighter gray color to 80% opacity.

enter image description here

2- You also may make an opacity mask, but not leaving the Illustrator.

Duplicate the brush; Go to Edit>Edit Colors>Convert to Grayscale; Go to Edit>Edit Colors>Invert Colors; Select both and make an opacity mask. The top gray brush is the opacity mask using its shades of gray.

enter image description here

Improve this answer
1
  • Yes, this is how I tried to do it at first. I wasn't happy with the greyscale values it gave me so I used Photoshop to change the curves making the main colors less transparent!
    – Bart
    Commented Oct 29, 2019 at 17:34
0

Ok, it may have to do with the file type you are outputting your illustration to. GIFs do not have half-transparency but PNGs should. In Photoshop, make semi-transparent the brush stroke image (eventually make trials in a dummy file before saving the final one, only keeping the element you need) and then save your file.

Let me know how this goes. Else, even better, you can via HTML and CSS apply transparency to an image. This should easily do the trick for you ("opacity" in HTML / CSS)

Improve this answer
1
  • Thanks for your help. I fixed my problem by using a transparency mask! Check my original post.
    – Bart
    Commented Oct 29, 2019 at 17:05

Your Answer

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

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