How to Make a Vertical Menu in Photoshop
Drop-down menus have become ubiquitous with software. Users know almost innately that when they see text at the top of a workspace, it will usually yield a bounty of other options below it. To get the vertical appearance of a drop-down menu, take advantage of the tools in Adobe Photoshop, the graphics component of the Adobe Creative Suite and a vertical menu-using interface as well. Make a vertical menu in Photoshop to suit your next Web project or just to design a playful take on the typical list of commands, actions and items found on menus.
Other People Are Reading
Instructions
-
-
1
Open Photoshop. Click the "File" menu followed by the "New" option. Enter "VerticalMenu" into the "Name" box. Enter the menu's dimensions into the "Width" and "Height" boxes, such as "2" and "5" respectively. Select "inches" for each of the drop-down menus. Select "White" from the "Background Contents" drop-down menu, and then click the "OK" button.
-
2
Click the "Type" tool -- Photoshop's version of text -- by clicking the "T" icon on the "Tools" palette. Select a font for the menu, such as a readable and clear "Arial" from the toolbar at the top of the workspace. Select a font size as well as a color from the toolbar.
-
-
3
Click the "VerticalMenu" box. Type the first menu item, such as "Open." Press the "Enter" key to drop to a new line, or press "Enter" twice to leave a line of space between the first menu item and the second.
-
4
Type additional menu items, using the "Enter" key to drop to a new line. Click into the gray space of the Photoshop canvas when you are finished to set the text.
-
5
Click the "Line Tool" on the "Tools" pane. If you don't see a line icon, right-click an icon of a star, gray circle or gray square, and then click "Line Tool" from the fly-out menu.
-
6
Click into the "Weight" box on the new toolbar at the top of the work area. Type "1 px" if it does not already say this by default in the box. Click into the "Color" box, select black and then click "OK."
-
7
Position the cursor in the gray area on the left side of the menu. Press and hold down the "Shift" key. Draw a line to the right side of the gray area of the Photoshop canvas. The line portion in the gray area won't be included in the document, but it helps you position the line on the menu.
-
8
Repeat to draw additional lines, separating each menu item or grouping several menu items into a single block.
-
9
Click the "Background" layer in the "Layers" palette on the right side of the screen to give it focus. Double-click the "Color Picker" at the bottom of the "Tools" pane. Select a background color for the menu, such as something light that won't overshadow the text. Click "OK."
-
10
Click the "Paint Bucket" tool on the "Tools" pane, and then click anywhere in the white of the background to fill it with color. Skip this step for a white menu background.
-
11
Right-click the "Background" layer, and then select "Flatten Image." When all the layers combine into one, click the "File" menu. Select "Save As," choose a place to save the menu and then click the "Save" button.
-
1
Tips & Warnings
Photoshop doesn't support any coding or scripting; making a vertical menu is simply an exercise in designing a menu. Once you have the menu graphic, other options are possible, such as importing the graphic into Web design programs such as Fireworks and Dreamweaver (two of the other Adobe Creative Suite software programs.) From there, use slicing and target tools to make the menu come alive.
