- Web image basics
- Previewing the completed files
- Inserting an image
- Inserting images in Design view
- Resizing images
- Inserting Photoshop Images
This chapter is from the book
This chapter is from the book
This chapter is from the book
Inserting Photoshop Images
Dreamweaver has had a special affinity with Photoshop images for years. Unfortunately, in Dreamweaver (2021 release) you can no longer insert Photoshop images directly into the layout or use Photoshop Smart Objects. But that doesn’t mean you have to avoid them altogether. In this exercise, you will learn how to work with Photoshop images and insert them in your layout.
If necessary, open contact-us.html in Design view.
Double-click the image placeholder for Margaret. Navigate to the resources folder in lesson09. Observe the file margaret.psd.
The Photoshop document is grayed out, indicating that Dreamweaver cannot insert the file directly. Luckily, all is not lost.
Close the file window. Choose Window > Extract.
The Extract panel opens. The Favorite City Tour mockup, which you uploaded in Lesson 5, appears in the panel along with the option for uploading a PSD. Although you can no longer use a Photoshop image directly in Dreamweaver, you can use Extract to convert the file and its contents to web-compatible file formats.
Click the Upload PSD button.
Navigate to the resources folder in lesson09. Select margaret.psd and click OK/Open.
Margaret’s image is uploaded and appears in the panel.
Click Margaret’s preview image to select it.
The Photoshop file is loaded into the Extract panel. You could simply click the image to download it as an asset in your site, but there’s another trick up our sleeve.
Click the Layers button.
The Layers pane opens in the Extract panel, showing two available layers in the image. The layer New Background shows that it is hidden.
Click the eye icon
for the New Background layer to display its contents.The background of the image changes to show a harbor scene. Now the image is ready to download to your site. However, if you download the image as is, you will download only the selected layer. You need to select both layers to download the composite image.
Hold the Shift key and select both layers. Click the Extract Asset icon
that appears over Margaret’s image.The Save As dialog appears, enabling you to specify the file type and properties you want to create. You can choose from three options: JPG, PNG 8, and PNG 32.
Choose JPG.
Note the Optimize slider.
If necessary, move the slider to 80.
This setting produces a high-quality image with a moderate amount of compression. If you lower the Optimize setting, you automatically increase the compression level and reduce the file size; increase the Optimize setting for the opposite effect. The secret to effective design is to select a good balance between quality and compression. The default setting of 80 is sufficient for your purposes.
When you selected the New Background layer, the name appearing in the dialog may have changed to match the selected layer. The downloaded image should display Margaret’s name.
If necessary, enter margaret in the filename field. Enter 1x in the Scale At field.
Click the Save button to download the JPEG image to the site’s default images folder.
The image should be downloaded to the images folder. Let’s insert it into the layout.
Close the Extract panel.
Double-click the image placeholder for Margaret.
Navigate to the images folder in lesson09.
Select margaret.jpg and click OK/Open.
The new image appears in the layout, but it’s much too large.
Right-click Margaret’s image. Choose Edit With > Adobe Photoshop 2021
Photoshop launches and loads the image from the local site.
Choose Image > Image Size.
Change the image size to 100 x 125 pixels and click OK.
Close and save the image.
For JPEG files, you will see an optimization dialog when saving.
Choose 8 in the Quality field and click OK.
The image is now permanently resized. Margaret’s image is almost complete.
Enter Margaret Julian, Office Manager in the Alt and Title fields in the Property inspector.
Margaret’s image is now complete. There’s only one image missing.
Double-click the image placeholder for Matthew. Select matthew.jpg and click OK/Open.
Matthew’s image appears above his description.
Enter Matthew, Information Systems Manager in the Alt and Title fields in the Property inspector.
Save the file.
)
)
)
)
)
)
)
)