Import a Photoshop .psd file

Microsoft Expression Web enables you to generate a .png (PNG-24), .gif, or .jpg file from an Adobe Photoshop .psd file and select the Photoshop layers you want to include or exclude from the image. If you want to make changes to the original .psd file, in Expression Web, you can select the web-optimized image that Expression Web generated for you and conveniently open the original .psd file in your default .psd file editor, such as Adobe Photoshop.

Expression Web can import Photoshop .psd files that have all the following properties:

  • Color is 8 bits per channel (some 32-bit and some 16-bit images are also supported).

  • Individual layers should be uncompressed.

  • Color mode is RGB color, grayscale, or indexed color.

  • File extension is .psd.

Note

Generally, the resulting, uncompressed image size should be 200MB or less. Compressed layers can cause the file size to be reported incorrectly.

If you have trouble importing an image, try saving it from Photoshop with the format option Maximize compatibility turned on.

To generate a .png, .gif, or .jpeg file from a Photoshop .psd file

  1. Open your site in Expression Web.

  2. Do one of the following:

    • To put the image into a page, open the page, and then put your cursor where you want to insert the optimized file.

    • To import the image into a site, open the site.

  3. Do one of the following:

    • Drag the Photoshop .psd file from the Folder List panel into the Design view of your page.

    • On the Insert menu, point to Picture, and click From Photoshop PSD.

  4. In the Select Adobe Photoshop File dialog box, select a file that has the file name extension .psd, and click Open.

    Note

    The Photoshop .psd file you select must reside either on your local computer or on a network share.

  5. In the Import Adobe Photoshop File dialog box, do the following:

    • Select the layers that you want to import. Alternatively, you can select the Compatibility Layer to import a single, merged image.

    • View a preview of the art on the left side to make sure that it appears the way that you want it to.

  6. To zoom into or out of the image, under the image preview, select a zoom level.

  7. Use any of the following options for the image that Expression Web will generate:

    Use this To do this

    Encoding

    Set the file format.

    JPEG Quality

    Set the amount of file compression and the level of image quality when the Encoding option is set to JPEG. A lower value produces a file with a smaller file size than higher values. Higher values have better image quality than lower values.

    Estimated size

    View the approximate file size of the optimized image.

  8. Click OK to import the art and close the Import dialog box.

To edit an imported Photoshop .psd file

  1. Open a page that contains an image that you generated by using the Expression Web Import Adobe Photoshop PSD dialog box.

  2. In Design view, right-click the image, point to Adobe Photoshop (psd), and click Edit Source.

    Note

    If there is no default program assigned to open Photoshop .psd files on your system, the Edit Source command is not available.

    The default program for editing .psd files starts. It automatically opens the .psd file that is associated with your image.

  3. In your default application for editing .psd files, make your changes and save the .psd file.

  4. To update the image in your web page, in Expression Web, right-click the image, point to Adobe Photoshop PSD, and click Update from Source.

  5. In the Import Adobe Photoshop .PSD dialog box, set the options you want, and click Import.

    Note

    If you have previously changed the generated image (.png, .jpg, or .gif) by using something other than the Import Adobe Photoshop PSD dialog box, a dialog box appears that asks to confirm that you want to overwrite the changes.

To import the latest changes from a Photoshop .psd file

  1. Open a page that contains an image that you generated by using the Expression Web**** Import Adobe Photoshop PSD**** dialog box.

  2. Right-click the image, point to Adobe Photoshop PSD, and click Update from source.

  3. In the Import Adobe Photoshop .PSD dialog box, set the options you want, and click Import.

    Note

    If you have previously changed the generated image (.png, .jpg, or .gif) by using something other than the Import Adobe Photoshop PSD dialog box, a dialog box appears that asks to confirm that you want to overwrite the changes.

See also

Tasks

Set accessibility properties for an image
Add or remove metadata

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.