Generate an image from a Photoshop file (.psd) in Microsoft Expression Web 2

Posted by: Minal Agarwal , on 5/23/2009, in Category Expression Web
Views: 15780
Abstract: You must have added png, gif or jpg files in your web pages, lot of times. These files were originally saved in the format they were, when you inserted them in your page. Expression Web 2 enables you to generate a web-optimized image from a ‘.psd’ or Photoshop file and insert it into your page. You can choose to generate a png, gif or jpg of that file while you insert it in your page. This saves your time and effort to convert a psd file to a correct format and then import it to your page. This article explains how you can generate an image from a Photoshop file (.psd) using Microsoft Expression Web 2.
Generate an image from a Photoshop file (.psd) in Microsoft Expression Web 2
 
You must have added a png, gif or a jpg file in your web pages, lot of times. These files were originally saved in the format they were when you inserted them in your page. Expression Web 2 enables you to generate a web-optimized image from a ‘.psd’ or Photoshop file and insert into your page. You can choose to generate a png, gif or jpg of that file while you insert it in your page. This saves your time and effort to convert a psd file to a correct format and then import it to your page. And guess what! This doesn’t end here. You can modify the original image and always update this generated image through Expression Web 2. Let us explore how.
Microsoft Expression Web makes possible to generate a .png, .gif or .jpg file from a .psd (Photoshop file format) easily. It also allows you to choose which layers you want to include or exclude from the image. And if you want to edit the original image you derived this image from, you can do that by opening the editor (like Photoshop) from Expression Web itself. Let us take a look at these interesting features further in this article.
Expression Web can import Photoshop files with following properties:
a.    File extension is ‘.psd’.
b.    Saved with Photoshop format option; Maximum Compatibility.
c.    Color mode is RGB Color, Grayscale or Indexed Color.
d.    Color is 8 bits per channel (24 bits of color per pixel).
e.    Generated image size is 200MB or less.
To generate a .png, .gif or .jpg file from a .psd file in Expression Web
1.    Open your website and the webpage where you want to insert the image, in Expression Web 2.
 
2.    To insert the image into your page, choose to do either of the following:
a.    Place the cursor where you want to insert the image, go to Insert menu > Choose Picture and click on ‘From Photoshop PSD…’.
Insert_Picture
b.    Go to File menu > choose Import > ‘From Photoshop PSD…’
File_Import_AdobePhotoshop 
 
3.    Both the options above will launch the ‘Select Photoshop (.psd) file’ window. Browse to the location of the image (.psd), choose and click Open.
 
Select_PhotoshopFile 
4.    This would launch the ‘Import Adobe Photoshop (.psd) file’ dialog box.
Import_PhotoshopFile 
 
5.    The Preview pane on the right of the window has two tabs:
 
a.    Optimized – Lets you view the image as it will appear with the import settings you set in this window.
 
b.    Original – Will let you view the image without any layer changes or optimization settings applied to the original file.
You can set a zoom level can under this image preview pane.
6.    Other options in the window are:
 
a.    Photoshop Layers
Select ‘All Layers’ to use the image exactly as it is.
‘Selected Layers’ lets you choose to show or hide any layers. The list of layers will be active once you choose Selected Layers option. Then check or uncheck to show or hide (respectively), the boxes next to layers.
NOTE: The adjustment layers, layer styles and any layer effects that are applied to your ‘.psd’ file,  are not included under the ‘Selected Layers’ option.
 
b.    Optimization Settings
‘Encoding’ lets you choose the file format.
’JPEG Quality’ can be adjusted only when you choose the file to be converted to a jpeg under the Encoding drop down. The slider lets you set the level of image quality and amount compression. Lesser the quality, lower the size.
Estimated size is also displayed in this section.
 
c.    Optimized File
The File name is changed to name-psd.ext (as jpg, png or gif as per selection).
Click on  to use ‘Save As’ to save the file with new name.
To import any changes made to the original .psd file to the generated image
If you have made any changes to the original Photoshop file using the editor and you want your image on the webpage to reflect those changes; do the following:
1.    Open the webpage that contains the image that you generated from the .psd file.
 
2.    Right click on the image and choose ‘Adobe Photoshop PSD’ and then click on ‘Update from Source…’.
 
Update_Photoshop_Image 
 
3.    You would be prompted with the ‘Import Adobe Photoshop (.psd) file’ dialog box we saw above. Set any options you want and click Import.
To edit the generated/imported image
1.    Open the webpage that contains the image that you generated from the .psd file.
 
2.    Right click on the image (in Design View) choose Adobe Photoshop (.psd) and click ‘Edit Source’ (see above image)
 
3.    The default program associated with editing the ‘.psd’ file will be launched. If no default program is associated as an editor for your ‘.psd’ files, then this option will not be enabled.
 
4.    Make necessary changes to the original ‘.psd’ file in the editor (e.g. Photoshop), save and close the application.
 
5.    Now you need to update the image in your web page using Microsoft Expression Web. For that follow the same procedure seen above under heading: To import any changes made to the original .psd file.
I hope this article was a value addition for you and I thank you for reading it. If you liked the article,  Subscribe to the RSS Feed or Subscribe Via Email
Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by vijayakumar on Thursday, August 12, 2010 12:32 AM
test

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel