Working with Images in Expression Web (II)

Posted by: Minal Agarwal , on 8/31/2007, in Category Expression Web
Views: 22746
Abstract: In the first part of this article you saw tasks like inserting images, moving them, inserting borders and so forth. In this part of the topic, you shall explore tasks like editing, cropping, resizing pictures and other actions that could be performed with images.
Working with Images in Expression Web (II)
In the first part of this article you saw tasks like inserting images, moving them, inserting borders and so forth. In this part of the topic, you shall explore tasks like editing, cropping, resizing pictures and other actions that could be performed with images.
Editing Images
Expression Web has provided with a Picture toolbar for you to be able to edit images while working in Expression Web. Though the picture toolbar can handle the simple editing tasks, it is suggested that you make use of a graphics program to edit your pictures. So without further delay, let us start with making simple changes in your image.
Simple changes
As I have already mentioned, Pictures toolbar can be used to make simple changes to your image. The Picture toolbar looks like:
ExpressionWeb Pictures Toolbar
Select the picture you want to edit by clicking on it, click on the appropriate button on the Pictures toolbar and then save your changes. To know the function of each of these buttons just hover your mouse over them.
Buttons on the Pictures Toolbar
ExpressionWeb Buttons on Pictures toolbar
The buttons on the Pictures toolbar have been explained below in the order in which they appear on the toolbar.
Insert Picture from File: Inserts picture from your computer, a digital camera or a scanner.
Auto Thumbnail: Creates a smaller image linked to the original picture.
Bring Forward/Send Backward: Increase or decrease picture’s z-axis which determines the picture’s position on Z axis.
Rotate Left 90/Rotate Right 90: Rotates picture to left or right.
Flip Horizontal/Flip Vertical: Flips picture horizontally or vertically.
More Contrast/Less Contrast: Increases or decreases picture’s contrast.
More Brightness/Less Brightness: Increase or decrease picture’s brightness.
Crop: Crops picture.
Set Transparent Color: Transforms one color in the picture transparent.
Color: Converts picture into grayscale or wash out the color.
Bevel: Add a bevel around the picture.
Resample: Resample a picture.
Select: Select tool, default selected.
Rectangular Hotspot, Circular Hotspot, Polygonal Hotspot and Highlight Hotspots: Create hyperlinked hotspots in picture.
Restore: Restore the picture’s appearance before any changes.
Saving image changes
After making changes to the picture, press CTRL+S and the Save Embedded Files dialog box appears. It lists all the image files you have edited, select the image and click OK to save.
ExpressionWeb Save Embedded Files
If you want to save the edited image as a different file, click on Rename and type a new name for the image. You can retain the extension as ‘.jpg’. The Action field changes from Overwrite to Save. Click OK to save this new file.
ExpressionWeb Save Embedded Files
Cropping an image
1.    Click on the image you want to crop in the Design or Split view.
2.    Click on the Crop button in the Pictures toolbar.
3.    A dashed line emerges in the picture setting the crop boundaries.
ExpressionWeb Crop Image
4.    To crop the picture drag any of the square handles displayed along with the dashed line.
5.    Once you have repositioned the crop boundaries, click on the Crop button again, or double click on any of the square handles or hit the Enter key.
6.    Your picture is cropped according to the new boundary set. Save the changes to the image.
Resizing and Resampling Images
When you insert a picture in your page, Expression Web automatically sets it’s width and height properties and includes it in the HTML code. To adjust the measurements of this image, it is always better to use a dedicated image editing program and then import this picture in your page. Though Expression Web lets you make minor adjustments. Let us take a look at those.
Manual resize
Select the image you want to resize and drag any of the square handles along its boundary to a new location. Once you release the mouse button the image resumes its new size.
Resize by values
Open Picture Properties either by double-clicking the image or from Format menu by choosing Properties. In the Picture Properties dialog box on the Appearance tab do the following:
Select the Specify Size checkbox.
Select Keep Aspect Ratio to maintain the original proportions of the image.
Specify Width and Height for your image.
Resample an image
To resample the resized image, click on the resample button in the Pictures toolbar. You can also click the Picture Actions button (appears on the picture) and choose Resample Picture to Match Size.
ExpressionWeb Resample Picture Option
Creating a Thumbnail Image
Select the image for which you want to create a thumbnail. Then in the Pictures Toolbar, click on the Auto Thumbnail button or key in the shortcut CTRL+T. alternately right click on the image and choose the same option from the drop down menu. This replaces the original image by the thumbnail image. Once done you can preview your page in the browser to get a feel of the thumbnails. Now when you click on the thumbnail image the original, larger image will be displayed in a new browser window.
ExpressionWeb Thumbnail
Changing the size of thumbnail
1.    Go to Tools menu and choose Page Editor Options to select the Auto Thumbnail tab.
ExpressionWeb Page Editor Options
2.    From the Set drop down menu choose the facet of the thumbnail size you want to change and type in the number of Pixels.
3.    You can choose the border thickness and also add a beveled edge.
4.    Click OK to apply settings.
Image Formats
In the first part of this article I introduced you to the commonly used image types GIF, JPEG and PNG. GIF’s are best used for buttons, illustrations and thumbnails, JPEG work best for photographs. PNG is slowly gaining popularity. But Expression Web by default saves pictures in JPEG format with a high quality of 90. You can change the format to PNG to reduce the quality and in turn the size of the image.
Changing Image format
1.    Go to Tools > Page Editor Options > Picture tab and click on File Type Settings to open the Picture File Type dialog box.
ExpressionWeb Page Editor Options
2.    Use the Default File Type Conversion and Paste Settings section to choose the image format.
ExpressionWeb Picture File Type
3.    Choose the options for GIF and JPEG formats and click OK to close the dialog box.
Change a format for a particular image
1.    Open the Picture Properties dialog box. (Double click on the image or right click on the image and choose Picture Properties from the drop down menu)
2.    On the General tab click on Picture File Type button.
ExpressionWeb Picture Properties
3.    Here you can change the format and also set the quality level for JPEG by un-checking the option Use image as is and also set the progressive passes value.
TIP: The Save Embedded Files dialog box also has a button for Picture File Type that also takes you to the above Picture File Type dialog box.
This article stressed on the editing part of the images. In both the parts of the article I have covered most of the aspects of images, which you would require often. I hope this article will be of help to you. Thank you for reading.
Give me a +1 if you think it was a good article. Thanks!
Recommended Articles

Page copy protected against web site content infringement by Copyscape

User Feedback
Comment posted by mohanish on Thursday, January 3, 2008 12:22 AM
can u tell me  
may i implement this image cropping feature in web application using and C# like u r doing in this
Comment posted by Rob Fischer on Wednesday, February 1, 2012 7:59 PM
I can't find the picture toolbar, how do I get it to show.

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