Changing the appearance of a picture in Microsoft Expression Web 3

Posted by: Minal Agarwal , on 5/9/2010, in Category Expression Web
Views: 62807
Abstract: The Pictures toolbar and the Appearance tab of Picture Properties, in Microsoft Expression Web 3 give you different options to edit the appearance of a picture. In this article we will be exploring only those options that enable you to edit a picture’s appearance on the webpage.
It is quite useful to be able to edit a picture and its appearance while working with your web pages. You can do this by using the ‘Pictures toolbar’ or through the Appearance tab on the Picture Properties dialog box. The toolbar has various buttons that help you set the dimensions, crop, rotate, flip a picture. It also has options to change the display of the picture by adjusting its brightness, contrast, transparency, grayscale and also add a beveled edge to it. And yes, you can always revert back all your changes since you last saved your webpage, by clicking on the ‘Restore’ button.
The Appearance tab on the other hand has options like wrapping style, layout options and size specifications. You can use both of them to customize the look of the pictures in your webpage.
NOTE: The Picture toolbar has plenty of options to modify a picture, modify its appearance and create hotspots, resample images and such other. The scope of this article limits to explaining the options that can be used to change the appearance of a picture.
I.                   Pictures Toolbar
 
Right click on any of the toolbars and choose Pictures from the list. The Pictures toolbar will now be docked below other toolbars. All the buttons except the first one would grayed out. The first button is to ‘Insert Picture From File’ which will enable you to insert a picture onto your page. To activate rest of the toolbar, select the picture.
Picture_Toolbar
Let us now explore each of these buttons in detail:
1.    Insert Picture From File: Enables you to insert picture on your page. If you already have a picture selected on your page, this button will let you replace the selected picture with a new one.
2.    Auto Thumbnail: Will generate a thumbnail of the picture and link it with the original full-size picture. To set options for this button, go to Tools > Page Editor Options > Thumbnail tab.
3.    Rotate left 90°: Rotates the picture by 90° counterclockwise.
4.    Rotate right 90°: Rotates the picture by 90° clockwise.
5.    Flip Horizontal: Flips the picture horizontally.
6.    Flip Vertical: Flips the picture vertically.
7.    More Contrast: Increases the contrast of the picture.
8.    Less Contrast: Decreases the contrast of the picture.
9.    More Brightness: Increases the brightness of the picture.
10.Less Brightness: Decreases the brightness of the picture.
11.Crop: Crops the picture. To crop the picture, select the picture, resize the handles and again click on the button.
12.Set transparent color: Sets a particular color in the picture transparent.
13.Color: The dropdown has two options:
Color_Button
Choose grayscale to convert the picture into grayscale or Wash Out to give it a washed out look.
14.Bevel: Applies a beveled edge to the picture.
You next step would be to save the changes you have made to the picture. So go to File > Save or Ctrl + S or click the Save button from the Common toolbar. Choose a location to save. You would be prompted with a ‘Save Embedded Files’ dialog box as shown below:
Save_Embed_Files
The Save Embedded Files dialog box lets you choose to either overwrite the original file or save the edited picture to a new file. Change any options and click OK.
To discard or undo the changes you have made to the picture, click on the Restore button (last button on the toolbar).
II.                   Appearance tab in Picture Properties
 
Pic_Prop_Appearance
1.    Wrapping style: Specifies how a picture wraps or floats on the page.
2.    Layout: lets you set the alignment of the picture on the page, the horizontal and vertical margins for the picture as well as the border thickness for the picture’s border.
3.    Size: Has these options:
a.    Specify size checkbox – to resize the image. The size could be specified in pixels or percent.
b.    Keep aspect ratio – to maintain the proportion of original picture, while resizing.
Conclusion

I hope after reading this article, you know where to look for options to customize the appearance of your pictures.I hope this article was helpful and that you enjoyed reading it.

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

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