Sold on Photoshopping menus

nolonemo wrote on 1/25/2007, 1:05 PM
I created my menus in Photoshop for the first time, and turned myself into a believer. I used to go nuts trying to make menu buttons uniform and aligned nicely in DVDA, and the unpredictable (for me) text size changes drove me batty.

I had complete and easy control over placement and appearance working in Photoshop, and since my usual highlight method is underline, it was easy to insert and size buttons over the graphic in DVDA (by pasting copies of the first button).

I essentially created the menu structure completely manually, inserting my media and copies in the project overview, and then empty menus and buttons, and linking everything up by hand. It took a little longer, but I liked the greater degree of control I had.

I'm sure that if I understood DVDA better, I could be more efficient by relying on the program to set at least some stuff up, but still feel like I was in control :-)


Comments

johnmeyer wrote on 1/25/2007, 2:07 PM
I'd love to see your PSD and the DAR (DVDA project file) that uses it. I don't need any media files; just those two. I've been doing quite a bit of work trying to figure this out and, like you, find it easier to just insert blank buttons and then attach the items from the various layers rather than try to get all the naming conventions correct. However, I have this nagging feeling that I am being very stupid about how I go about this.

Here's a sample of what I've done, with the two files put into a Zip file:

PSD and DAR file for Basketball DVD

This link will be good for a week.

Thanks in advance if you can post a copy of your work.
nolonemo wrote on 1/25/2007, 2:51 PM
John, I'll be glad to post the DAR and image files, but you are WAY WAY beyond what I've done. In fact, you are doing what I would like to do (use icons to highlight instead of the DVDA underline highlight I'm using now.)

I got an idea of how you're doing what you're doing by looking at the PS file, but the DAR gave me a "not a valid project" error when I tried to open it. I'm using DVDA3, perhaps you created the menu in 4?)

All I have is a flat image file (I save the PS file to a JPEG though I save the original .psd so I can reposition text at will) that I use as the backround image and then create insert buttons in DVDA (image only, but with no images), and the underline style of highlighting.

I'll be glad to upload it, though, probably later today or this evening.

johnmeyer wrote on 1/25/2007, 5:34 PM
No need to upload. I can create flat file images myself.

I did a quick re-do of the DAR file using DVDA3. The overlays are not aligned quite right (DVDA3 doesn't let you zoom in like you can do in DVDA4), but it's close. Here's the link:

DVD3 version

Use this with the PSD I uploaded earlier.

I have dozens of free PSD files for DVD menus that I've found scattered around the web. You can replace or modify the background, and put new images into the buttons (or do that in DVDA). I thought of creating a tutorial, but you can purchase good ones over at VASST. Also, I get the feeling that most people -- including Vegas users -- are using either Encore, DVD Lab, or Scenarist. Too bad, because if Sony provided some PSD templates, some scripting examples and did anything at all to show some support for this product, people would flock to it. After a rocky start with DVDA1 & DVDA2, the last two releases have made this a very fine product.
nolonemo wrote on 1/25/2007, 6:09 PM
Thanks very much.

The process sounded so complicated I didn't want to invest the time in it, but with some examples to look at I may get inspired.

Thanks again for taking the time to put the project into DVDA3 format.
johnmeyer wrote on 1/25/2007, 6:30 PM
The process sounded so complicated I didn't want to invest the time in it, but with some examples to look at I may get inspired.

Generally, I am not as critical of Sony's documentation as others have been, but in this case they have really let us all down. All they need to do is provide 3-4 PSD files and the associated DAR files that use them. Otherwise, most mere mortals are going to find it very difficult to tell the difference between a thumbnail, a frame, a highlight, and a background, much less figure out why there needs to be a mask for each of these. In addition, there are settings for the menu itself that interact with each of these.

In addition, it would be useful if they would extend the brief FAQ (How Do I?) in the help system to include answers to questions like, "How do I create a menu where the image in a box changes depending on which button I highlight?" Or, "How can I create a menu where there is a different highlight color for each button?" Or, "How can I create a menu where an icon appears next to the button, in addition to having the button highlighted?" Or, "Why do I need a mask for the thumbnail, for the frame, and for the highlight, and when would I use one and not the other?" I can go on.
MPM wrote on 1/25/2007, 7:34 PM
Once you get into it, most DVD menus are created in programs like P/Shop. I think DVDA was created with this in mind -- it can go head to head with about any mid-range product (bear in mind the hi-end costs thousands)-- & basic titling etc. was included for the corporate folks.

For fancier button high lights take part of your graphic, place or duplicate it on a separate layer, color it black & feather. Save just that layer as a png file with transparency, & use it as a high light mask. One thing I like to do is use the characters from some of the symbol fonts, placing them close to the button text in the image -- the result is the same as what you often see on retail movie DVDs. Corel has a lot of symbol fonts that would work great for themed projects -- could use a boat shape for a DVD about a cruise etc...

The DVD spec itself only allows for 4 colors for high lights or subs or BOV and so on, making it difficult to get too involved. One of those colors is for background transparency -- otherwise the track would cover the whole frame with a solid fill. Another color is the shape of your high light, and the remaining 2 are to blend it against the background. There is a way to do animation (it's rare but I've seen it and read about it) but never found out with what software or how.

AFAIK DVDA is the only DVD authoring software to focus so much on button frames & button shape masks. They're not really part of the spec or DVDs or anything other than DVDA -- it's just a means of creating that 4 color high light, which like subs is sort of a video overlay track that plays in sync with the menu background video. As such, you can freely ignore those aspects of button creation if you want.

My personal guess is that there weren't a lot of DVD authoring apps at the time DVDA 1 came out, Button frames and such was something Sonic Foundry stuck in there, and it's just kind of hung around.

Since you're limited by the DVD spec, whatever you read/learn about buttons and various tricks for DVDs applies in DVDA .
MPM wrote on 1/25/2007, 8:30 PM
To better answer Johnmeyer's question...

Step one is to get an image or graphic open in P/shop (or whatever image editor) at the same size as your desired menu. Using 720 width for a widescreen menu, letting DVDA stretch it, can sometimes cause unpredictable results.

Create any and all titling, text for buttons etc. Keeping these graphics on separate layers, or as separate objects in some software, you can then create a png file with transparent background if you want to overlay this stuff, do a composite using a motion background in Vegas. In Vegas, render the new video to mpg2, using the DVDA template, normally with fields set to progressive in the mpg2 encoder settings.

Back to P/Shop... To create a high light mask for the menu page as you described, combine the layers with the button text keeping the layer background transparent. Next copy/paste your icons or special characters (in black) near the text for the various buttons -- it'll be easier if these all wind up on 1 layer too, and again keep the background transparent.

Turn off the display of everything but your button text layer... Select the text, and if you're done at this point, & it's not black, make it so. Optionally enlarge or shrink your selection by one or a few pixels. Optionally apply a slight feather to the selection. If you altered your selection, I usually save the mask, open it on a new layer, then apply a black fill. Do the same thing to the layer with your icons. Turn off all layers beside your finished button text and icons, then save them as a png file with background transparent. This is your mask file.

Wherever it's black on your mask image, a solid color you set will show through. If you shrank your selection boundaries, the glow will be inside the shape -- if you expanded your boundaries, the glow will cover the shape & then some.

Now it's time to open DVDA... Set your menu background media, including your new mask file. This is optional, but something I normally do every time: Set the menu text to something descriptive, set the transparency for the text fill to 100%, turn off the shadow, then size the text object to a really tiny square out of the way in the corner - now I can see what I'm working on. :-)

Now place the image-only buttons (with any image removed) over your button text and size as needed. You need to cover every bit of the button text plus the icon if you want to light them up. Select one or more buttons, then go to the highlight menu and select image mask overlay. Colors can be a pain...

Normally... with one or more buttons selected go to color set one, for your first fill color open the dropdown or the mixing window -- set your main fill color, then add it to the row of custom colors at the bottom of the pallet in the mixing window. Colors 2 & 3 are for blending, and will use the same color but more transparency. How you do it is up to you, but the pain in the a__ part is you can use the pallet custom color, & reset the transparency, or the drop down & fill in the RGB values.

There are 3 possible button color sets -- normal, selected, & activated -- you need to use at least one for selected. Go through the procedure above for each color set you're going to use, unless you're lucky enough that the default colors work fine. For different effects you can also try using different colors for the blends. Click on the menu background and you can set which color set goes with which button state.

Normally the normal button state is no high lights, you need a color for selected, and it's up to you if you want another color to tell someone that they pressed the button.

One type of effect is to have the background surrounding the button a solid color. Setting the normal state to that same background color will hide the button completely. The only drawback is if you want an activated state color, you're limited to the mask area & shape.

If you want the actual menu to change -- not just being covered or uncovered -- you need to have the button switch menu pages (set it to activate when selected).
johnmeyer wrote on 1/26/2007, 7:47 AM
I've read both post twice, and I'm going to read them again later this morning when I'm sitting at my computer. Very useful stuff, and it gets right at the heart of my uncertainties. Hopefully it will get me over the hump. Thank you very much for taking the time to write all of that.
bStro wrote on 1/26/2007, 8:08 AM
For fancier button high lights take part of your graphic, place or duplicate it on a separate layer, color it black & feather. Save just that layer as a png file with transparency, & use it as a high light mask.

I'm a big fan of custom highlight masks, too. Paint Shop Pro (or the overpriced Photoshop, if one prefers ;) and Vegas can run circles around DVDA as far as design is concerned, so I rarely fiddle around with frames, buttons, and masks in DVD Architect unless I just want something quick and simple.

There is a way to do animation (it's rare but I've seen it and read about it) but never found out with what software or how.

You mean an animated frame or an animated highlight? Far as I know an animated highlight is not possible. For a frame or even a graphic, you can use an AVI or possibily a GIF -- I've never tried the latter.

AFAIK DVDA is the only DVD authoring software to focus so much on button frames & button shape masks. They're not really part of the spec

Good point. Although it's definitely not the only one. Most consumer-level apps make a big fuss about button frames; In fact, most of them come with more frames (and backgrounds) than DVDA. But, yeah: It's all icing that detracts from the cake, if you ask me.

My personal guess is that there weren't a lot of DVD authoring apps at the time DVDA 1 came out

Actually, most of the DVD authoring apps that are out now were already out then -- and up to version 2 or higher already. And there were some around then that have long since gone away or gotten bought up and re-branded. DVDA's still kind of "the new kid on the block" by comparison.

Rob
TLF wrote on 1/26/2007, 10:28 AM
John,

your example provided me with everything necessary for me to understand what I need to do. I've read the DVDA manual over and over and couldn't make sense of it, but your menu - "a picture paints a thousand words"

Thank you.

And thanks also MPM - I've printed your words for future reference.

Worley
GeorgeW wrote on 1/26/2007, 12:21 PM
Animated Buttons -- well, one way to "fake it" is by using the Inverted Selection trick (also mentioned above). Basically using solid color for the "Inactive" buttons, and full transparency for the "Selected" button.

Here's a link to a quick example of the trick (I might not have my black levels set properly). The link should be good for 7 days:

http://tinyurl.com/2qllnj
MPM wrote on 1/26/2007, 2:12 PM
@ bStro
"You mean an animated frame or an animated highlight? Far as I know an animated highlight is not possible. For a frame or even a graphic, you can use an AVI or possibily a GIF -- I've never tried the latter."

Animated high light or sub track. Subs, high lights, BOV, are all in these 4 color tracks with full sized frames... If an avi is just a series of stills, and we know you can set duration with subs, it sounds pretty reasonable. ;?P

Anyway I have seen it once or twice, and BOV or sub tracks with animated graphics I hear are quite popular with Anime. I have no idea whether sub or BOV is used with Anime, and the menu stuff was before I knew how to do anything, take it apart etc. In fact, the animated highlights were the reason I first started playing with DVDs -- followed by a huge crash when I couldn't find out how to semi-easily do it. :-(

I suppose if I were ambitious enough I could create the animation, then copy/paste into a bunch of 1 or 2 frame events as a sub track, strip the sub track out of the rendered layout, then figure how to use it in place of the highlight track, possibly using something like sub edit, then square away any ifo issues, but to be perfectly honest the notion that there's gotta be an easier way has kept me comfortably lazy.
TLF wrote on 1/27/2007, 3:45 AM
@GeorgeW
How did you do that? I've tried to replicate it, but without luck - I probably misunderstand the 'inverted selection' trick.

Could you possible upload the .DAR file?

However you did it, it was pretty neat!

Worley
bStro wrote on 1/27/2007, 9:35 AM
I did one of these awhile back. There is a link to the DAR file and a description of the process in this thread.

Rob
Steve Mann wrote on 1/27/2007, 11:48 PM
John - I have been doing my menus by Photoshop for quite a while now. I downloaded yours and with a little tweaking, it works just fine. In fact it looks better than most of mine.

First, I renamed the buttons thus: button-01-highlightTrans

Next, all of the layers that go into the background need to be merged into one layer named: Background-01

Delete the unused layers.

The final PSD file will be four layers - in this example, the background and three buttons.

Now, here's the clue that stumped me for a long time - you have to "insert subment from file". You also have to manually change the Highlight Style to "Custom". (I haven't figured out how to automate that part).

Set your colors and you're done.

Steve Mann

Steve Mann wrote on 1/27/2007, 11:51 PM
"have dozens of free PSD files for DVD menus that I've found scattered around the web."

Could you share some URL's?

Steve Mann
johnmeyer wrote on 1/28/2007, 9:05 AM
Now, here's the clue that stumped me for a long time - you have to "insert submenu from file". You also have to manually change the Highlight Style to "Custom". (I haven't figured out how to automate that part).

Steve,

I've slowly figure most of this out as well. As for the manually changing Highlight to Custom, I spent about fifteen minutes with that the other day. Then, someone asked for a DVDA version 3 DAR file. I went back and re-created the project in this older version, and it turns out the Custom gets created correctly. Turns out it appears to be a bug introduced in version 4. If you append "next," "prev," etc. for the navigation buttons, you'll find that Custom DOES get assigned properly to these buttons. I tried appending "dummy" names to the other buttons, but that doesn't help. No big deal, since you can select all your buttons and assign "custom" with just one command.

I also tried assigning my layers to the "frame" instead of "thumbnail" attribute. Near as I can tell, these two are absolutely identical.

I have also tried merging buttons into the background layer, and then simply using the layers for highlights and frames. This works just fine.

Also, if you don't want to spend time getting all the names right, you can simply insert a blank button and then assign the names manually (only works in DVDA 4). You have to apply "Match Aspect" to each button, but that doesn't take too long.

Hope all is going well with you. Hard to believe its been over twenty years since the "old days."

The templates are all public domain, and I spent several hours over the course of the past few weeks finding them all. I can't remember all the backwaters where I found them all. I've zipped them all into a 60 MByte file. I'll send you an email with a link to an ftp server where I've uploaded this file. Some of them are PSD files; some are UFO (Ulead for Objects) which, if you want, I can convert to PSDs for you. Many are a collection of separate JPG or PNG files that you simply dump into your photo editor and then save as a PSD layered file.

TLF wrote on 1/29/2007, 8:49 AM
I think I'm beginning to get to grips with it now!

I've tried creating a complete menu using Paintshop Pro, and I've found just how important it is to follow the naming convention outlined in the manual. Vary from that and be damned!

The names are case sensitive, too, so watch out for that. Button-01-tmb is not the same as button-01-tmb.

One odd thing. I always get an error when I tell DVDA to use the background layer, regardless if it is named 'background' or 'Background'. I clear the error and it works, so I don't quite know what's going wrong.

But I'm getting there. Slowly. The more I use DVDA, the more I like it.

Worley
johnmeyer wrote on 1/29/2007, 11:16 AM
One odd thing. I always get an error when I tell DVDA to use the background layer, regardless if it is named 'background' or 'Background'. I clear the error and it works, so I don't quite know what's going wrong

Try:

background-01
MPM wrote on 1/29/2007, 12:11 PM
I think the main, perhaps only benefit of importing an image file with layers into DVDA is if you're using button fames, masks etc. Otherwise you're just dealing with 2 layers, background & high light, and to be honest, I can save both separately in less time that I can type out the specific layer names needed. :?P

Button frames, frame masks, button masks are useful when you're doing - I don't want to say "fill in the blank" project -- but a project where you don't want to be manually create the same button shapes individually for thumbnails taken from clips etc, so you import the layers and create a template.

But if/when you're doing motion menus, or not worried about frames/masks, I can't see that much utility to multi-layered import. Admittedly I could be missing something, & I certainly don't have anything against it -- just concerned maybe some folks are killing themselves trying to properly structure/name a psd file when maybe they don't need to.
Steve Mann wrote on 1/29/2007, 2:30 PM
"I can't see that much utility to multi-layered import."

For simple menus, there is none. I just finished a project that had four menus, seven different media files and as many as 18 buttons on two menu pages. I had an intro video and transition video between menus, and one "easter egg". I am not an artist but I used Photoshop to create the backgrounds and I think that Photoshop saved me some time in the DVD design.

Whew!

Steve Mann
TLF wrote on 1/29/2007, 10:46 PM
I wanted to master the menus because I HATE not knowing how to. I'm not artistic in any way, so my photoshopped menus tend to look terrible (and formulaic).

But now that i know how to do it, I feel pleased and better equipped to use DVDA to its full potential. And I'll be tempted to push it further and further until I break it.

Worley.

MPM wrote on 1/31/2007, 11:02 PM
Hey Steve...

Not commenting on creating in P/Shop, that's a given, but wanted to point out a comparison between importing PSD with layers, with all the naming requirements, larger files etc., versus just saving 2 PNG files that do the same thing. It's an advantage, as I can do one mask that fits many pages, & I can without a doubt save 2 files in less time than titling 4 layers. :?P

'Course if you need button masks or whatever, saving more than a couple files gets confusing. And I am confused when you say simple menus... Is there something else that layers accomplishes besides just letting you import one file instead of many?

Myself, I use a few apps for the graphics & background vid, and if cookie cutting button shapes it's just easier for me there -- I don't think I've ever used the button frames or masks in DVDA so I am serious in asking.

ECB wrote on 2/27/2007, 4:45 AM
Given Photoshop is the first choice is there an alternative second choice? :)

Ed B