Photoshop Classroom: Create a Stylized Navigation Bar and Slice it for Webeee

In the following tutorial you will learn how to create a stylized navigation bar. You will learn how to use the Appearance Panel to style a navigation bar, and how to use the Slice Tool to cut and export the images so they can be used as part of a website. Let’s begin!

Step 1

Press Command + N to create a new document. Enter 1025 in the width box and 53 in the height box then click on the Advanced button. Select RGB, Screen (72ppi) and make sure that the "Align New Objects to Pixel Grid" box is unchecked before your click OK. Enable the Grid (View > Show Grid) and the Snap to Grid (View > Snap to Grid).
Next, you’ll need a grid every 5px. Go to Edit > Preferences > Guides & Grid, enter 5 in the Gridline every box and 1 in the Subdivisions box. You can also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Do not forget to replace the unit of measurement to pixels from Edit > Preferences > Unit > General. All these options will significantly increase your work speed.

Step 2

Pick the Rectangle Tool (M), create a 1025 by 50px shape, fill it with the linear gradient shown below and go to Effect > Stylize > Rounded Corners. Enter a 3px radius, click OK and go to Object > Expand Appearance.

Step 3

For the following step you will need a grid every 1px. So, go to Edit > Preferences > Guides & Grid and enter 1 in the Gridline every box. Focus on the left side of the shape created in the previous step. Pick the Pen Tool (P), draw a 50px, vertical path and place it as shown in the following image. Add a 1pt, black stroke for this path to make it easier to notice.

Step 4

Reselect the vertical path created in the previous step and drag it 128px to the right. You can do it manually or by going to Object > Transform > Move options. Simply, enter 128 in the Horizontal box then Press enter.

Step 5

Reselect that vertical path and go to Effect > Distort & Transform > Transform. Enter the data shown in the following image, click OK and go to Object > Expand Appearance.

Step 6

Select the group of vertical paths created in the previous step along with the rounded rectangle created in the second step, open the Pathfinder panel and click on the Divide button. Move to the Layers panel, select the resulting group and ungroup it (Shift + Control + G). Keep focusing on the Layers panel and name your shapes from the "1" to "8" (start with the left shape).

Step 7

Disable the Snap to Grid (View > Snap to Grid) then go to Edit > Preferences > General and make sure that the Keyboard Increment is set at 1px. Select shape "1" and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1px to the left using the left arrow from your keyboard. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Bring the resulting shape to front (Shift + Control + Right Square Bracket), fill it with black and change its blending mode to Overlay.

Step 8

Select shape "1" and make two new copies in front (Control + C > Control + F > Control + F). Focus on the Layers panel, select the bottom copy and move it 1px to the right using the right arrow from your keyboard. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Bring the resulting shape to front (Shift + Control + Right Square Bracket), fill it with white and change its blending mode to Overlay.

Step 9

Reselect the two shapes created in the last two steps and group them (Control + G). Make a copy of this group (Control + C > Control + F), select it and click on the Unite button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the second image.

Step 10

Open the Transparency panel. Reselect the shape and the group created in the previous step, open the fly-out menu of the Transparency panel and click on Make Opacity Mask. In the end your masked group should look like in the second image.

Step 11

Reselect the masked group created in the previous step and go to Object > Transform > Move. Enter 128 in the Horizontal box and click on the Copy button. Obviously, this will add a copy of your group 128px to the right. Select this copy and repeat the Move command. Keep repeating this technique until you have seven masked groups.

Step 12

Enable the Snap to Grid (View > Snap to Grid). Pick the Rectangle Tool (M), create a four, 3px squares and place them as shown in the following image. Also, fill them with black and white as shown below. Select all four shapes and simply drag them inside the Swatches panel to turn them into a pattern. Once you got your pattern you can delete the four squares from the Layers panel.

Step 13

Disable the Grid (View > Show Grid) and the Snap to Grid (View > Snap to Grid). Return to shape "1". Select it, focus on the Appearance panel and add a second fill using the Add New Fill button. Select it, set the color at R=28 G=117 B=188 and change its blending mode to Color Burn.

Step 14

Reselect shape "1", focus on the Appearance panel and add a third fill. Select it, lower the opacity to 15%, change its blending mode to Soft Light and add the pattern made in the twelfth step.

Step 15

Reselect shape "1", focus on the Appearance panel, make sure that no fill or stroke is selected and go to Effect > Stylize > Drop Shadow. Enter the data shown in the top window, click OK and go again to Effect > Stylize > Drop Shadow. Enter the data shown in the middle window, click OK and go once again to Effect > Stylize > Drop Shadow. Enter the data shown in the bottom window and click OK.

Step 16

Now you need to copy the properties used for shape "1" and paste them onto the rest of the shapes. Here is how you can easily do it. Go to the Layers panel, focus on the right side and you’ll notice that every shape comes with a little grey circle. It’s called a target icon. Hold Alt, click on the target icon that stands for shape "1" and drag onto the circle that stands for shape "2". Use this technique to add the same properties for the other six shapes.

Step 17

Select shape "2", focus on the Appearance panel and add fourth fill. Select it, make it white, lower the opacity to 50% and change its blending mode to Soft Light. This will be the hover mode for your navigation bar.

Step 18

Grab the Type Tool (T) and your text as shown in the following image. Use the Calibri font with a size of 15pt, set the style at bold and the color at R=0 G=86 B=140. Make sure that all your text is selected and go to Effect > Stylize > Drop Shadow. Enter the data shown below and click OK.

Step 19

Now, let’s slice this menu. Focus on left masked group and select the Slice Tool (Shift + K). First, draw a 6 by 53px slice along shape "1" as shown in the following image. Continue with the Slice Tool (Shift + K) and draw a second 6 by 53px slice along shape "2" as shown below.

Step 20

Now that you have your first slices go to Files > Save for Web & Devices (Alt + Control + Shift + S). Select the Slice Select Tool (K) and double click on the left, 6 by 53px slice. Enter nav in the name box then Press OK.

Focus on the second 6 by 53px slice. Double click on it, enter “nav.hoover” in the Name section and Press OK. Select PNG-24 from the Preset drop down menu and click Save. Pick a location for the images that you’re about to save then click Save. Move to that location and you’ll find a new folder with a bunch of new images. Drag "nav.png" and "nav.hoover.png" outside the folder then delete the folder.

Step 21

Return to your Ai file, select the Slice Tool (Shift + K) and draw a 2 by 53px slice along that left masked group. Move to the Layers panel and turn off the visibility for all the shapes except the left, masked group.

Step 22

Go again to Files > Save for Web & Devices (Alt + Control + Shift + S). Grab the Slice Select Tool (K) and double click on the new slice created in the previous step. Name it "divider" and click OK. Make sure that PNG-24 is still selected from the Preset drop down menu and click Save. Again, pick a location for the images that you’re about to save then click OK. Move to that location, open the new folder, drag "divider.png" outside the folder then delete your folder. In the end you should have three simple images: "nav", "nav.hoover" and "divider.png".

Step 23

Finally, you can easily change the colors used for your navigation bar. Simply replace the color used for the text and the second fill with some of the colors shown in the following images.