Share via

Generate an image from a Photoshop .psd file

  • Article

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 (24 bits of color per pixel).

  • Color mode is RGB Color, Grayscale, or Indexed Color.

  • Resulting image size is 200mb or less.

  • Saved with the Photoshop format option Maximize compatibility turned on.

  • File extension is .psd.

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

  1. Open your website 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 website, open the website.

  3. Do one of the following:

    • Drag the Photoshop .psd file from the Folder List task pane 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 on either your local computer or a network share.

  5. In the Adobe Photoshop .PSD Import dialog box, select one of the following:

    Use this

    To do this

    Optimized

    View the image as it will appear with the current import settings applied to it

    Original

    View your image without any layer changes or optimization settings applied to the original file.

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

  7. Under Photoshop Layers, do one of the following:

    • To use the same state of visibility for each layer as in the original .psd file, select All Layers.

    • To choose the layers to show or hide, select Selected layers. In the list of layers, select the check box next to each layer you want to show, and clear the box next to each layer you want to hide.

      Important

      If you select the Selected layers option, adjustment layers, layer styles, and layer effects that are in your Photoshop .psd file are not available to show or hide in Expression Web, and do not appear in the image that Expression Web generates.

  8. Under Optimization settings, 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.

  9. Under Optimized File, do one of the following to set the location and file name of the file Expression Web will generate:

    • Click the Cc295422.4d33764f-2875-4f4b-8480-f1e071ba7582(en-us,Expression.10).png button to use the Save As dialog box to browse to the location you want and either enter a new file name or select an existing file that you want to replace.

    • Enter a path and file name.

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 ImportAdobe 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

Concepts

Set accessibility properties for an image

Add or remove metadata