Using a Photoshop Smart Object to create a site banner

Let's start jazzing up Birdland by adding the banner graphic. You will use a Photoshop (PSD) file that Dreamweaver will turn into a Smart Object when you insert it and optimize it on the page. A Smart Object retains its connection to the source and allows you to quickly update multiple instances of the source document when you modify the original.

Add the Photoshop Banner

In the following steps, you will insert a Photoshop document, optimize it for the Birdland page, make an edit to the original, and then update the instance on the page.

1. Open index.html.
2. Click in the black rectangle beneath the header title in Design view (see Figure 5).

3. Click the Split View button in the Document window and make sure your cursor is between the opening and closing strap div tags.

   

   Figure 5. Use Split view to verify the insertion point.

4. Choose File > Insert.

5. Navigate to birdland.psd in the source_files folder.

   Note: You might want to take a moment to look at the original Photoshop file. It has five layers, four of which are photographs of birds that could be refreshed every so often with new bird images. The bottom layer is a background layer that can change colors, a task you will perform later in this tutorial.

6. In the Alternative Text dialog box, type Birdland.

7. Dreamweaver opens Image Preview (see Figure 6).

   

   Figure 6. The Image Preview dialog box in Dreamweaver.

8. In the Options panel, set the image format to JPG and the quality to 80%. The File tab provides settings for adjusting the image size and export area, but you can use the defaults for this image (see Figure 7).

   

   Figure 7. You can crop and size images using the File panel settings.

9. Click OK. The image displays on the page and has a Smart Objects icon to show that it is linked to an original PSD file (see Figure 8).

   

   Figure 8. The linked image has a Smart Object icon that indicates the image is either in sync or out of sync with the original

10. Pass your mouse over the Smart Objects icon and you will see a tooltip that assures you that the image is synced to the original.

    Looking over the page, I wonder whether the borders between the bird images might look nicer if they were black rather than white. Let's test that out now.

11. Right-click on the birdland image and choose Edit Original With > Photoshop CS4 (see Figure 9). (Your menu may be different depending on what image editing applications you have on your computer.)

    

    Figure 9. One way to edit the instance from the original is to right-click and choose Edit Original With.

12. When the original PSD file opens, select the background layer in the Layers panel (see Figure 10).

    

    Figure 10. The modified color of the background layer.

13. Choose Edit > Fill.
14. In the Fill dialog box, select Black from the Use pop-up menu under Contents.
15. Click OK.

16. Save the Photoshop file and return to the Birdland page in Dreamweaver. You'll notice a new icon in the left top corner of the image. The red and gray arrows alert you to the fact that the image is no longer synced with the original (see Figure 11).

    

    Figure 11. The Smart Object icon now shows that the instance is no longer synced to the original.

17. Right-click on the Birdland image and choose Update From Original (see Figure 12).

    

    Figure 12. Right-click and select Update From Original.

    Alternatively, you can use the Photoshop icons in the Property inspector to perform the update and other integration tasks (see Figure 13).

    

    Figure 13. The Property inspector has icons that you can use to perform image editing tasks.

    Dreamweaver updates the image so that it is in sync with the original. The synced Smart Objects icon returns.

Figure 14 shows the the completed banner.

Figure 14. The completed banner.

Copy and paste from Photoshop

You can also copy and paste an individual layer or group of layers from a Photoshop document. Perhaps you want to turn each of the individual bird layers into separate bird icons to place next to a paragraph about each bird, or maybe you want to create a graphic that includes two of the birds.

In this latter case, draw a selection marquee around two of the birds in Photoshop, choose Edit > Copy Merged (so that Photoshop copies multiple layers), and paste the layers at the insertion point in Dreamweaver (see Figure 15). Dreamweaver opens its Image Preview dialog box where you can set an image format and size for the new graphic. The pasted graphic does not wear the Smart Object icon, but it does remain connected to the original. You can click the Photoshop editing icon in the Property inspector to launch Photoshop to edit the original.

Figure 15. If you select one layer in Photoshop, choose Edit > Copy; if you select two or more, select Edit > Copy Merged.

Page 3 of 4

Previous Page

Next Page