Adding Page Navigation & Editing Smart Objects

Topics covered in this Photoshop for Web Design tutorial:

Creating a navbar, Adding a stroke, Changing opacity, Spacing Layers Evenly, Importing vector graphics from Adobe Illustrator, Editing a vector-based smart object in Illustrator, Editing a pixel-based smart object in Photoshop, Content-aware fill, Swapping out graphics

Exercise Preview

Exercise Overview

In this exercise, you will add some website navigation (a navbar) across the top of the page. You’ll also learn how to edit graphics placed as Smart Objects.

1. In Photoshop, close any files you have open.
2. Go to File > Open or hit Cmd–O (Mac) or Ctrl–O (Windows).

3. Navigate to Class Files > yourname-Photoshop for Web Class > NYC and double–click About Page - Ready for Navigation.psd.

   This is a more developed version of the desktop design you’ve been working on in previous exercises.

Creating a Navbar Background

1. Go to View > Fit on Screen so you can see the whole document.
2. We want the navbar to be the width of the page. Let’s double-check the width of this artboard. In the Layers panel, select the Desktop artboard.
3. In the Properties panel (Window > Properties), notice that the width (W) is 1280 px wide.
4. We want the navbar we’re about to create to be put into the nav folder. In the Layers panel, select the nav folder.
5. Expand the nav folder, so our new element will be created inside it
6. In the Tools panel, select the Rectangle tool .
7. At the top left of the Options bar, make sure the menu is set to Shape. (It may currently say Path or Pixels.)
8. Draw a rectangle over the top part of the cab photo, not worrying about the exact size or placement. We’ll set that specifically in the next step.

9. In the Properties panel set:

   W:	1280 px
   H:	70 px (There’s nothing special about this value, we just think it looks good.)
   X:	0 (Distance from left of artboard.)
   Y:	0 (Distance from top of artboard.)

10. In the Layers panel, in the nav folder double–click the Rectangle 1 layer name and rename it: nav bg
11. The shape is covering the text in the navbar, so let’s move it to the back. In the Layers panel, make sure the nav bg layer is selected.
12. Choose Layer > Arrange > Send to Back.
13. In the Layers panel, notice that the nav bg layer was sent to the bottom of the current folder (so it’s at the bottom of the nav folder below the other 3 text layers).
14. We want the navbar to be the same color as the footer. Double–click the Layer thumbnail for nav bg.

15. With the Color Picker dialog open, click on the footer’s purple background.

    This should set the color to #483a40

16. Click OK.

Adding a Stroke

1. We want to add a white line below the navbar. In the Properties panel, click the Stroke icon .
2. In the color panel that opens, go into the Grayscale folder and click on White (the first swatch).
3. Hit Return (Mac) or Enter (Windows) to close the color panel.
4. Set the Stroke width (next to the Stroke icon) to 1 px.
5. Select the Move tool .
6. The navbar now has a white stroke on all sides, but it’s kind of hard to see because Photoshop is also outlining the artboard. Luckily we can turn that outline off.
7. Go to Photoshop > Preferences (Mac) or Edit > Preferences (Windows) and choose Interface.
8. To the right of Artboards there are two menus. Change the second menu from Line to None.
9. Click OK.
10. Now you can clearly see the white stroke on all sides of the nav bg, but we only want it to appear on the bottom edge. No problem, we’ll just hide the other sides. Make sure nav bg is selected in the Layers panel.
11. Hit the Up Arrow key once to hide the top edge.
12. Hit the Left Arrow once to hide the left edge.
13. To hide the right edge, we’ll make the navbar wider. Hit Cmd–T (Mac) or Ctrl–T (Windows) to transform.
14. Drag the right resize handle to the right (beyond the edge of the canvas) so that the right side is hidden outside the canvas.
15. Hit Return (Mac) or Enter (Windows) to apply the change.

16. Let’s zoom to accurate size:

    • If you’re on a low-res display go to View > 100%.
    • If you’re on a hi-res (Retina) display go to View > 200%.

17. Hold the Spacebar and drag on the image to scroll up to the top right of the page.

Layer Opacity vs. Fill Opacity

Anywhere you use a color in CSS, you can specify opacity (using RGBA). Photoshop offers a similar control.

1. Let’s reduce the opacity of the navbar so we can see some of the photo behind it. With nav bg still selected, at the top of the Layers panel reduce Opacity to 50%.

   TIP: You can change the opacity by either typing in the number, or dragging left/right over the word Opacity to change the amount. Dragging on the Opacity label is nice when you want to experiment with the amount.

2. Notice how this affected both the fill and the white stroke. We want the stroke to stand out to better delineate the content, so we only want to change the fill’s opacity. Put Opacity back to 100%.
3. At the top of the Layers panel, set Fill (opacity) to 50%.

4. Notice the fill is now semitransparent, but the white stroke is still fully opaque.

Importing Illustrator Files

1. If the guides are not visible, hit Cmd–; (Mac) or Ctrl–; (Windows) to show them.
2. In the Layers panel, show the columns layer by clicking the box on the left where the eye would be.
3. In the Layers panel, in the nav layer group select the Resources layer so the new layer we about to create will go on top of it.
4. We need to add the NYC logo. Go to File > Place Embedded.
5. Navigate into Class Files > yourname-Photoshop for Web Class > NYC and double–click NYC Logo.ai.
6. A dialog will appear. To accept the default options just click OK.
7. The logo will appear in the middle of the screen. Double–click on it to accept its size.
8. Drag the logo to the upper-left corner, aligning its left side with the second guide from the left (which borders the gray column highlight).
9. Hit Cmd–; (Mac) or Ctrl–; (Windows) to hide the guides.
10. In the Layers panel, hide the columns layer by clicking the eye .
11. In the Layers panel, make sure the NYC Logo layer is still selected.
12. Hit Cmd–T (Mac) or Ctrl–T (Windows) to transform the logo.
13. In the Options bar at the top of the screen, make sure the Link icon has an outlined dark background (which indicates it’s checked).

14. Use the resize handles on the right of the logo to make it a bit smaller. It should end up looking similar to the example below:

    

15. Use the Arrow keys to position as needed.

16. If you haven’t already, accept the transform by hitting Return (Mac) or Enter (Windows).

Spacing Layers Evenly

1. At the top right of the page we’ve added text links for other pages in the site, but the spacing between them is not even.
2. In the Layers panel, in the nav layer group select the Resources layer.
3. Hold Shift and click on the Events layer so all 3 text layers are selected.

4. In the Options bar at the top of the screen, click the Distribute Horizontally icon .

   The spacing between the 3 pieces of text should now be equal.

Aligning Layers

Let’s vertically align the logo and nav links so they are vertically centered in the navbar background.

1. We need to create a marquee selection for the area we want to vertically center within. In the Layers panel, in the nav folder hold Cmd (Mac) or Ctrl (Windows) and click on the layer thumbnail for nav bg to select the visible parts of this layer.
2. In the document, you should now see a marquee selection around the navbar.
3. In the Layers panel, in the nav folder select the NYC Logo layer.
4. Hold Shift and click on the Events layer (so all 3 text layers and the logo are selected).

5. In the Options bar, click the Align vertical centers button .

   The logo and nav links should now be vertically centered in the navbar background!

6. Choose Select > Deselect to get rid of the marquee selection.

Editing Smart Objects

Notice that there is a street sign in the photo directly behind the NYC logo. It’s distracting and we should edit it out.

1. When we placed the image, Photoshop converted it into a Smart Object which contains the original photo embedded inside. In order to edit it, in the Layers panel find the cab layer and double–click on its Smart Object thumbnail (on the left side).

2. If a warning pops up telling you to save after editing, click OK.

3. The original photo will open. Zoom in on the street sign at the top left of the photo.

4. Choose the Lasso tool .

5. Draw an outline around the sign similar to the following:

   

6. Go to Edit > Fill.

7. From the Contents menu choose Content-Aware and click OK.

8. Choose Select > Deselect to see the result better. Like magic, Photoshop made the sign disappear! If it did not do a perfect job, select the bad area and repeat the content-aware fill.

9. Do a File > Save. (It gets saved back into the original design we’re working on.)

10. Close the file.

11. You should be back in the main layout file. Check it out, the sign is now gone!

Swapping Out the Logo with a Different Version

1. We’re thinking the logo might look better if it were white rather than colorful. In the Layers panel, select the NYC Logo layer.

2. Go to Layer > Smart Objects > Replace Contents.

3. Navigate into Class Files > yourname-Photoshop for Web Class > NYC and double–click NYC Logo White.ai.

4. In the dialog that appears, click OK to accept the default options.

   You should see the color logo has been replaced by the white logo. Cool!

Editing the Logo in Illustrator

This section requires Adobe Illustrator. If you don’t have Illustrator, skip this and continue with the next section.

Let’s see another way to change the logo. What if you didn’t have a white version and wanted to change the colored logo to white yourself? You’ll learn that here.

1. Go to Edit > Undo Replace Contents. You should once again see the color NYC logo.

2. In the Layers panel, double–click the NYC Logo layer’s Smart Object thumbnail.

3. If you get an alert about what to do after editing, click OK.

4. Adobe Illustrator should launch. If you get a PDF Modification warning, check Discard changes… and click OK.

5. If the Color panel isn’t showing on the right, go to Window > Color.

6. Choose the Selection tool .

7. Click once on the logo. It’s grouped, so the whole thing will become selected.

8. At the top left of the Color panel, select the Fill icon if it isn’t already activated:

   

9. At the bottom left of the Color panel, click on the White swatch, as shown below. (If you don’t see the swatch, you can set all RGB values to 255.)

   

10. Go to File > Save.
11. Close the file.
12. Return to Photoshop. You should see the updated white logo in your file!
13. Go to View > Fit on Screen so you can admire the whole layout. The layout is really shaping up!

14. Save the file by hitting Cmd–S (Mac) or Ctrl–S (Windows).