Now that you’ve explored how buttons are organized in Photoshop, let’s get back to looking at an entire menu. You can transfer a menu design from Encore to Photoshop using Edit → Edit in the Photoshop menu, as earlier, or you can save a menu in Encore as a Photoshop file (choose Menu → Save Menu as File). You can also create or edit a PSD file directly in Photoshop. As with the button file, you also can use a menu from the library (i.e., NTSC_Sky Up Submenu.psd).
Open the menu in Photoshop, along with the Layers palette. The menu includes the chapter buttons, the main menu button, the menu title, the background details elements, and a plain white Background layer.
Next, click the disclosure triangle to view the button layers. The main menu button has two elements, the text (Main Menu) and the main menu indicator highlight. The visibility of the button highlight layers are set to hidden in this menu file so that they do not get in the way of editing the menu design. Click the eye icon to reveal the orange highlight line under the button text (see Figure 6-11). Note that the chapter buttons have hidden orange highlights that overlay the white line around the buttons. These buttons are also set to hidden, making it easier to preview the menu in Photoshop.
Now, let’s take a look at the background. The background design of this menu is contained in two layer sets, the title and the background details. You can use the full range of Photoshop tools to edit and manipulate text and graphics, and apply layer styles and adjustment layers, and then carry these modifications directly to Encore.
The title layer contains the text for the main menu title. Use the Type tools and Character palette to edit the menu and button text as desired. (See Figure 6-12). Note that the same Photoshop character attributes are used directly within Encore.
You also apply other Photoshop actions to your text, such as applying transforms to rotate it (choose Edit → Transform).
Even better, you can take advantage of the full range of Photoshop layer effects to enhance your text. For example, to add a drop shadow, select the title layer and choose Layer → Layer Style → Drop Shadow (or choose it from the Layer Style drop-down menu at the bottom left of the Layers palette). You can also use the Layer Style dialog to add other effects such as glows, bevels, and overlays (see Figure 6-13).
To reuse layer styles in Photoshop between different elements in a menu design, select a styled layer, choose Layer → Layer Style → Copy Layer Style (or choose it from the right-click context menu), select the destination layer, and choose Layer → Layer Style → Paste Layer Style. You also can apply effects by dragging them within the Layers palette: drag a single effect, or the entire effect bar, from one element to another to apply that effect or group of effects.
As discussed next, you can also apply Photoshop layer effects within Encore by saving them as files accessed through the Styles palette.
You can use the blending options to set the transparency of the text (and other elements) and blend it against the background. You can set these options in the fields at the top of the Layers palette, or in the Blending Options tab of the Layer Style dialog (choose Layer → Layer Style → Blending Options, or choose it from the fly-out palette menu).
Use the Opacity setting to set the transparency of the entire layer, including any layer styles and blending modes applied to the layer. Use the Fill Opacity setting to affect the pixels painted in a layer or shapes drawn on a layer, without affecting the opacity of any layer effects that have been applied to the layer.
Use the Blend Mode setting to create special effects based on how the pixels in a layer blend with underlying pixels in the image. The default blending mode, Normal, does not perform any such special blending.
Next, expand the background details layer set to view its contents. Click the visibility icons to show each graphical element in this menu design. Besides the different elements, the designer even included a hidden safe area guides layer to help lay out the elements within the menu, as shown in Figure 6-14.
In this way, you can not only logically organize your menu by keeping different elements in separate layers, but also provide more design options when editing menus in Encore by allowing these elements to be easily hidden and revealed.
You can use the Photoshop layers tools in this way to organize the elements of your menus. Use the Layer menu (or the fly-out Layers palette menu) to arrange the layer order, to duplicate and delete layers, and to create new layers and new layer sets.
Besides using layers to add optional graphical elements to the menu design, you also can use Photoshop adjustment layers to provide dramatically different visual effects.
Select the blue Background layer in the background details layer set, and then choose Layer → New Adjustment Layer → Hue/Saturation (or choose it from the Create Fill or Adjustment Layer drop-down menu at the bottom center of the Layers palette). Encore adds a new adjustment layer immediately above the selected layer in the Layers palette, and displays the Hue/Saturation dialog. Adjust the hue and other controls to use this adjustment layer to totally change the look of the background layer (see Figure 6-15).
When this menu is used within Encore, you can show or hide this adjustment layer to choose between alternate looks for the menu. Try other adjustments, or fill effects such as Gradient. For photographic backgrounds, you can use other adjustments including Color Balance, Levels, and Photo Filter in similar ways.