Changing the appearance of a picture in Microsoft Expression Web 3

Posted by: Minal Agarwal , on 5/9/2010, in Category Expression Web
Views: 72539
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.
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:
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:
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
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.

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.

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

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 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 eBook 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 .NET Standard and the upcoming C# 8.0 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!

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

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 Follow her on twitter @ saffronstroke

Page copy protected against web site content infringement 	by Copyscape

Feedback - Leave us some adulation, criticism and everything in between!





C# Book for Building Concepts and Interviews



jQuery CookBook