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
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…’.
b. Go to File menu > choose Import > ‘From Photoshop PSD…’
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.
4. This would launch the ‘Import Adobe Photoshop (.psd) file’ dialog box.
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…’.
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.
This article has been editorially reviewed by Suprotim Agarwal.
C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.
We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).
Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.
Click here to Explore the Table of Contents or Download Sample Chapters!
Was this article worth reading? Share it with fellow developers too. Thanks!
Minal Agarwal, Expression Web MVP, MCDST, works as a freelance web designer (
SaffronStroke) working on Expression Web, Photoshop and other Graphical tools. As a hobby, she also runs a famous Food site called
Foodatarian.com. Follow her on twitter @
saffronstroke