Changing opacity while retaining the original color

Talk about Pixelmator Pro, share tips & tricks, tutorials, and other resources.
User avatar

2019-04-11 14:02:16

I'm wanting to change the opacity of a brand element to see through it, but wondering how to adjust color to keep "on brand".
I know it really depends on the background (behind the element with transparency), but wondering if Pixelmator has some prebuilt effect for this?
If one could add the predicted background color behind the reduced layer, and add such an effect, that would be amazing.

(IMAGE) The opacity on the inverted "V" is lowered 75%; full brand color on the right:
Image
User avatar

2019-04-11 14:08:49

Hi Alan.
I’m not 100% sure what you’re after but would keeping opacity of the logo at 100% and changing the blend mode to ‘color’ be of any use?
Hope this helps.
-Stef.
User avatar

2019-04-11 14:40:23

That worked! Probably the oldest trick in any app— just never knew it was there.
Now I need to do the same with CSS. (joke) Image
User avatar

2019-04-11 14:51:22

Not really a joke though.
I would want to export the PNG image in full opacity, and in CSS, lower the opacity 75%, so when lowered, the color matches (the 100% version of the solid brand color)

So in essence, I would want to ADD 25% color in Pixelmator (125% color?)

Oh, I have a 100% CSS idea...
User avatar

2019-04-11 15:37:34

This works :smile:
.opacity-example {
opacity: .75;
filter: saturate(125%);
}


https://codepen.io/alanhouser/pen/zXwMMx
User avatar

2019-04-11 17:54:37

Glad that helped. I’m worse than useless when it comes to CSS, though. Nasty, icky CSS. 😬