FORUMS: list search recent posts

Feathered animated video button

COW Forums : Adobe Encore DVD

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
Spencer Tycksen
Feathered animated video button
on Jul 23, 2012 at 6:40:54 pm

I'm trying in Photoshop to create a button that will be a video preview button on an Encore menu. I want the video preview on the menu to be feathered. See pic below. I'm really struggling to get it right. Any help would be appreciated. I'm new at this, so details on how to do it would be appreciated.

Return to posts index

John Rich
Re: Feathered animated video button
on Jul 29, 2012 at 12:52:42 pm

What I would try is to put a feathered hole in your picture and then replace the area behind the hole with the video you want.

John Rich


Return to posts index

Jeff Bellune
Re: Feathered animated video button
on Jul 29, 2012 at 2:07:25 pm

Here's an old tutorial that I did for StudentFilmmaker magazine back in 2007:

1. Open the Menu Viewer with the proper menu displayed, or select the proper menu in the Project panel and choose Edit>Edit Menu in Photoshop from the Encore menu bar.
2. Photoshop opens, and loads the menu from Encore. NB that the name of the document in PS may not match the name of the menu in Encore’s Project panel. The displayed document name in PS reflects the internal name used by Encore to keep track of the project elements.
3. The guides that appear in the PS document represent the Title Safe and Action Safe areas.

The first way that we will modify the video thumbnail buttons is to feather the edges. Here’s how to do that in Photoshop:
1. Create a new Group. Name it with the proper button prefix: (+).
2. Create a new Layer in the Group. Name it with the proper video placeholder prefix: (%).
3. Use the shape tool set to “Shape Layers” (the first of the three icons) and draw a shape. This creates a shaped Vector Mask. We’ll use a rounded rectangle, but any shape will work.
4. Ctrl+Click the Vector Mask icon in the Layers palette to load the selection.
5. Right-click the selection with the Marquee tool and set the Feather to whatever you want. Try 7 or 8 pixels for this menu.
6. From the Layer menu, choose Layer Mask>Reveal Selection.
At this point, the menu and the Layers palette should look like this:

We don’t need the Vector Mask anymore; the Layer Mask is all that Encore needs.
1. Right-click the Vector Mask in the Layers palette and delete it. This leaves a feathered Layer Mask.
2. Save and close the document and return to Encore. The gray video placeholder button should be feathered very nicely. Notice how the Layers panel in Encore looks almost exactly like the Layers palette did in Photoshop.

Now we’ll add a gradient to the video placeholder to help it blend in to the background even more.
1. Select the menu in Encore and choose Edit Menu in Photoshop again.
2. Make sure the foreground color is black.
3. Select the Gradient tool.
4. Set the gradient in the gradient options bar to go from foreground to transparent.
5. Set the gradient type in the gradient options bar as desired. We’ll use a Reflected Gradient.
6. In the Layers palette, click on the Layer Mask icon to ensure that the gradient will be applied to the mask only.
7. Drag the gradient tool across the Layer Mask in the document window. The result should be a transparent gradient on the Layer Mask.
8. Save and close the menu in Photoshop and return to Encore.
Back in Encore, here’s how the video placeholder button should look:

Repeat the Edit in Photoshop operation for as many buttons as are required. Back in Encore, link the buttons to the appropriate timelines. Here’s what the final version of the Main Menu looks like:


The Focal Easy Guide to Adobe Encore DVD 2.0

Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2018 All Rights Reserved