This tutorial will teach you how to create a "remote control" menu and how to create a "mouseover" effect for the menu. You will need a program called PictureDicer to complete this tutorial. You will also need the ButtonButton font. Click here to download the font. You also might want to download the great freeware program I used to create the java script for the mouseover. Click here to go to the site to download the program (Java Script Buttons II and III).

  1. Open a new graphic 400x150.
  2. Set background color to white and foreground color to black.
  3. Place the Button font letter "0" size 90 at the top of the graphic.
  4. Since this font is a little too narrow, select an area starting at the left margin half way down to the right margin and to the bottom of the font.

  5. Hold down the shift key and press the down arrow until you have moved the part you selected down close to the bottom of the graphic.

  6. Now, select an area in the middle of the graphic to cut and paste to fill in the gap.

  7. Copy the selection and paste "as a new selection". Move into position. Repeat until you have filled in the gap.

  8. Choose Image|Rotate and rotate 90 degrees left with "all layers" checked.
  9. Choose Image|Add Borders and add a border of 10 to give yourself working room.
  10. Choose Masks|New|From Image (This Window, Source Luminance and Invert Mask Data checked).
  11. Choose Masks|Save to Alpha Channel (give your mask a name if you want).
  12. Choose Masks|Delete and don't merge with layer. This process created a selection of the remote. You could just click on the black with the magic wand, but making the selection from a mask ends up with a much smoother edge.
  13. Choose Selections|Load from Alpha Channel to load the selection.
  14. Invert the black and white so that white is the foreground color and black is the background color.
  15. Choose Selections|Modify|Contract and contract by 10.
  16. Choose Selections|Modify|Feather and feather by 1.
  17. Flood fill selection with white. Create a mask from this image as outlined above.
  18. Now, you have a choice. You can make your remote from the solid selection or from the outline selecton. I used the outline selection.
  19. Add a new layer. Flood fill the background layer with your color or pattern. On the new layer load the outline selection and flood fill with white. Apply a Blade Pro beveling preset.
  20. Add another new layer. Make a circular selection with "antialias" checked. Flood fill with white and apply a Blade Pro preset for the bullet.
  21. Copy the bullet and paste as many times as you will have menu items.
  22. An easy way to line them up is to set the Grid on, select a bullet and use the Shift-Arrow Key method to move the selection one pixel to the left, right, up and down.
  23. Add another new layer and add your text menu items. Position them the same way you positioned the bullets.

  24. Save as a psp file for future use (you never know, you might want to add new menu items soon!) Save the settings and fonts you used for the graphic in the View|Image Information "Creator Information" area of the graphic. When you save as a "psp" file, this information is saved with the graphic.
  25. If you end up with too much space at the top or bottom (or both), go to the graphic outline layer, select the top part down about half way, then slide the selection down using the Shift-Arrow Key method. Repeat with the bottom sliding the selection up.
  26. Select your graphic and crop.
  27. Click on the layer with the bullets. Duplicate the layer. Click on the duplicate layer. Choose Colors|Adjust|Red/Green/Blue. Set them all to "0". Then play with the sliders until you come up with a color you like for the mouseover color. Repeat this process with the text layer.
  28. Duplicate the graphic twice. With the first duplicate, turn on the layers for the original remote. With the second duplicate, turn on the layers with the "mouseover" colors.
  29. Save each graphic as a jpg or gif.
  30. Load Dicer and open the first graphic. Split the first graphic into layers with each menu item being a separate layer. Process the image.
  31. Load the second graphic. Choose File|Load Grid (you will find the grid name with the first four letters of the first graphic). Process the image.
  32. You now have your original remote and the pieces of the remote for the "mouseover".
  33. I named my first graphic "Purple" and the mouseover graphic "Violet".
  34. If you didn't download the Java Script program I suggested, you can read the html for this page to see how the mouseover works. Feel free to copy the html and just change the names of the graphic files to match the names you give your graphic.


Click on the PDF button to load the tutorial into your browser.
If you would prefer to save the file directly to disk, Shift-Click on the PDF button.