How to Create Pop Up Menus in Photoshop
Adobe Photoshop is the industry standard for working with digital images and graphic design. Much of the aesthetic content you see on the best-designed websites was conceived and created in Photoshop. However, Photoshop is good for more than just aesthetics; one of the many other aspects for your website that can be created with the software is a pop-up menu.
Other People Are Reading
Instructions
-
Creating the Menu
-
1
Open Adobe Photoshop and select "File -> New." Select the "Web" preset and the 1024 x 768 dimension option for an idea of how your pop-up menu should be scaled and sized for a normal browser window.
-
2
Select the "Line tool" from the tools panel and "Shift + click" while dragging sideways to draw a horizontal line across the canvas. You may set any foreground color you like to determine the color of the line; we are going to stick with this color for the pop-up menu as well.
-
-
3
Select the "Type tool." Move your cursor close to the line and click when you see a squiggly line next to the type cursor. This activates the "Type on path" function.
-
4
Set your text preferences for your menu flyout text. Type out a headline word for the menu.
-
5
Re-select the "Type tool" and click where you would like the pop-out menu to begin underneath the headline. Type out your subheads, pressing the "Return" key to start each new one. If you would like to change the spacing between subheads, highlight the text and open the "Character" panel to adjust the leading settings.
-
6
Select the "Rectangle tool" and draw a rectangle around the subhead text to create a background for the pop-up menu. Use the "Move tool" to align the rectangle to the horizontal line. Move the rectangle layer underneath the horizontal line layer in the "Layers" panel.
-
7
Return to the subhead text layer and select "Layer -> Rasterize -> Type."
-
8
Right-click the layer in the "Layers" panel and select "Select pixels." Select "Edit -> Fill" and choose a light color that will contrast with the blue background. For example, if you use plain white, you will have a cool inverse text effect for the menu.
-
9
Select the "Line tool" and "Shift + click" to create a dividing line between the first and second subheads. Duplicate this line between each subhead by selecting the "Move tool" and holding down the "Option" key as you drag the line to each location.
-
10
Select all of the dividing line layers in the "Layers" panel and select "Layer -> Group layer." Select that group and select the "Distribute vertical centers" option in the "Move tool" panel above the canvas to distribute the lines evenly between the subheads.
Readying Your Menu for the Web
-
11
Select the "Slice tool" from the tools panel and select "View -> Snap" from the control panel. Create slices for the headline and each of the subheads, allowing the cursor to snap to each line.
-
12
Select "File- > Save for Web" and set your quality and color settings for how you want the pop-up menu to appear on the Web.
-
13
Open and link your images in Adobe Dreamweaver or another HTML editor to animate your pop-up menu.
-
1
Tips & Warnings
Photoshop is an excellent way to concept and create pop-up menus, but it is not the program where you will actually create the pop-up effect for the menu. In Photoshop, you will create the menu as you want to see it when it is completely expanded on your website. You can use Dreamweaver or HTML coding to animate the pop-up effect. Also, you can look into creating CSS profiles along the lines of the design you create in Photoshop, so you can easily apply the same design to multiple menus in your HTML editor.
Make sure you're keeping track of how large your files are. Large, high-quality image files for each of your pop-up menus will result in slower page-load times for your site's visitors.
