Tutorial: 4. Editable type layers in Photoshop
Level: Intermediate. Published on 20 January 2003 in How to change the menu options
If you're using a newer PageKit with editable image-based menus, and you have Photoshop, read this tutorial to learn how to edit them.
Many of the newer PageKits, created in Photoshop 6 or higher, feature vector type layers. Provided you have the right font, these layers can be edited "in place" to create new menu options. In other words, you don't have to create new layers and work out which size and type of font to use - just change the menu layer that is already there!
Here's how to edit the vector menu layer in the High Life Time Machine PageKit using Photoshop 6.
1. Install the "Droplift Full" Font
High Life Time Machine uses a special font created by ELATED, called Droplift Full. The files for this font are in the highlife_fonts folder inside the High Life Time Machine zip file (available here). Unzip the font .zip file (Windows) or .sea file (Mac). Install this font in your computer before opening Photoshop. If you're not sure how to install a font see your computer's Help (e.g. Start > Help in Windows 98) or other documentation.
2. Open the menu PSD
Download the highlife_psd.zip PSD Zip file from the High Life Time Machine download page. Unzip this file to a folder called highlife_psd on your hard drive somewhere. Inside this folder, open the file menu.psd in Photoshop 6. When you open it you may be asked if you wish to update some text layers. If you get this dialog then click the Update button:
You should then see the PageKit's menu PSD appear. Note the letter "T" next to the two menu layers in the Layers palette, indicating editable type layers. (The top layer is the white "rollover" menu, while the lower layer is the red "normal" menu.)
3. Create the menu option
To create a new menu option, simply select the Type Tool:
then click on the menu. You can then use the Delete key to remove the old menu text and then type new text in the same font and style. For example, here we've changed the "listen" menu item to "guests":
If your PageKit has rollover menus, you'll need to edit the "rollover" layer as well in the same way. First select the rollover menu layer, then make it visible and hide the "normal" layer by clicking on the eye icons:
Then use the Type tool again to change the rollover layer text:
That's it! You're then ready to slice up the menu as described in Changing image-based menu options in Photoshop.
The end
That's the end of this article. We hope you found it useful. If you're still stuck and would like further help, check out our online Help Forums, where you can get assistance from members of Elated and other webmasters.
Also, don't forget the free ELATED Extra Newsletter, where you can get more great Web-building articles and tips sent straight to your inbox!
If you would like to offer us feedback on this or any of our articles, please contact us. Have fun!