Trying to 'punch out' a graphic to play video behind

[Mwarren]

Greetings,

I'm fairly new to PS and have a question about masking. Here's what I'm trying to achieve.

I have an oversize image of a sky. I created a smart object which is a nesting doll of different - and additive - blur effects that create rays and a haze around my title words.

I would like to make this smart object become the mask for the oversize image - with the intent of playing a video behind it which would 'peek' through the white text along with the opacity of those blur effects (selective opacity mask).

I'm having a hard time figuring this one out. I haven't stumbled on the right sequence of words. And it probably doesn't help that it's way past bedtime.

Thanks in advance for your help.

[c.pfaffenbichler]

• You can give the animated SO Blend if-settings (with split handles)

• put it in a Group and

• Clipping Mask the image Laye rot the Group.

[Trevor.Dennis]

It's an incredibly basic thing to do with Photoshop, and rather than reinvent the wheel, you should go google how to place video in text, and video matte painting. 

[Mwarren]

To clarify: I am not trying to do any animation with my image. I'm trying to punch out the foreground of my main image with the shape of the smart object.

C.Pfafffen: I do not understand that first bullet point.

Trevor: I am not trying to place video in text. This image is going to be used on a Muse page - in front of a full screen video.

Btw, I am quite happy to follow along a tutorial or read documentation, but still have not stumbled into the right permutation of search terms.

[c.pfaffenbichler]

C.Pfafffen: I do not understand that first bullet point.

See

Layer opacity and blending modes in Adobe Photoshop

[Nancy OShea]

<This image is going to be used on a Muse page - in front of a full screen video.>

If your web site and video are responsive (re-scalable), then you're in for some real challenges ahead.

1) Full screen means different things to different devices.  How big should the transparent PNG image be?  And how to make it re-scale with the video?   

2) The usability problems.  If you layer a single image on top of a video,  users will not be able to access player controls.

3) Video autoplay and loop are not an option either.  They are not supported by all browsers.   And mobile devices ignore autoplay to protect users from excessive bandwidth. 

Just thought you should know this before you invest any more time in it.

Nancy

[Nancy OShea]

A  much better option is to add an image mask to your native video file in After Effects.  Then render your video for the web as MP4.   Since the image is part of the video itself and not a separate HTML element, it will re-scale gracefully and your player will be fully accessible.

Nancy

[Brad Lawryk]

https://forums.adobe.com/people/Nancy+OShea  wrote

A  much better option is to add an image mask to your native video file in After Effects.  Then render your video for the web as MP4.   Since the image is part of the video itself and not a separate HTML element, it will re-scale gracefully and your player will be fully accessible.

Nancy

Exactly what I was going to suggest. The way you are attempting it will give you very unpredictable and inconsistent results depending on devices and resolutions.

[Mwarren]

Thanks very much - to both of you - for your responses.

And thank you for voicing your concern, Nancy. Fortunately, for this project, the video that's behind my punched out graphic, the video doesn't have to be positioned in any difficult way because the viewing area (through the alpha'd text) is small (see example below) and the video is of a natural scene of some kind - just peeking through.

And thanks for that link c.Plaf. I am trying to understand how these effects hook together to create what I want, but it's slow going. Methinks another Lynda course is in my future. I feel like I'm close. Am I correct in that I have to work out the relationship between alpha and clipping?

I have been trying to create a clipping mask between that smart object (Buzz Country) text and the foreground image. However, when I attempt to create a clipping mask, the option is greyed out.

[c.pfaffenbichler]

Please post a screenshot with the Layers Panel visible.

Am I correct in that I have to work out the relationship between alpha and clipping?

Not sure I understand correctly, could you explain?

[c.pfaffenbichler · Accepted solution]

To split a Blend if-handle alt-click/drag it.

[Mwarren]

I will trust that my marked-as-correct will work for people who are not me. I just haven't got the hang of this yet.

Fortunately, I have some time to learn it because a friend did it for me. However, it really is a better idea to do some work in After Effects. That would be version 2. In the meantime, my kludgy good-enough will have to be. Thanks to all of you for your patience with a noob.

[Nancy OShea]

Based on what you've shown us so far, the "Knockout" method I would use is an SVG mask.   Real text in the markup acts as sort of a "peep hole" to the underlying video.  Since it's real text; not an image, you get better traction from SEO and translators.

Note: This demo contains sound so adjust your speakers accordingly.

https://codepen.io/matchboxhero/pen/bEePrp