Hey Guys,

I am back with the 3rd tutorial on Microsoft Expression Design and this time we are going to talk about Zooming and Scrolling features in Expression Design.

Hope that you know the basics of MS Expression Design and the panels of MS Expression Design. If you are not then you go through my previous posts Basics of MS Expression Design and Panels in MS Expression Blend

So if you are upto speed now we can get started and master the document navigation which majorly refers to zooming and scrolling in MS Expression Design. In order to work more efficiently with MS Expression Design you need to cultivate good navigation skills. Now there a lot different ways you can zoom or scroll your Expression Design docs and here i will discuss various commans you can use for zooming and fitting as well as the tools (zoom tool and pan tool). If you would pay a little attention then you can learn everything about document navigation in Expression Design within this post itself.

Navigating With The Zoom Tool

Using the zoom tool you can increase and decrease the current view magnification for any selected area within a Expression Design doc . There ar two ways you can do this :

Click With Zoom Tool

Note – you can press z to access zoom tool quickly.

Note – Press and hold ctrl + spacebar to access the zoom tool temporarily and release the keys to return to previously selected tool.

For zooming out you can use Alt + Click

Marqueee with the zoom tool

To access the zoom tool you can click the magnifying glass icon in the Tools palette and then click and drag over the document area that you’d like to zoom into.

Navigating with the Document Page Zoom Control

If you look at the bottom left corner of the Expression Design Interface then you  will see the magnification of the document and if you click on the combo box drop down you can see multiple options for setting the zoom on the current document.

Navigating with Keyboard Shortcuts

Now the fastest way to navigate is keyboard so lets discuss some keyboard shortcuts.

You can press Ctrl+= to zoom into the center of document. you can continue pressing Ctrl+= to zoom in even further.

And you can press Ctrl+- to zoom out.

Note – The zoom keyboard command always use the center of the document as a reference point.

Fitting to Screen

While working on Expression Design at some point of time you might want to see everything you have created (including any items you might have placed in the pasteboard area). The quickest way to fit all your artwork in the document window is to apply the fit to screen command. You can find the fit to screen command under View Menu.

Note – You can also press Ctrl+0 or double click the zoom tool icon to apply the fit to screen command.

Fitting to Canvas

The best way to preview your artwork onscreen is to display the entire artboard in the document window. The Fit to Screen command works well for this purpose, but only if no items are placed in the surrounding pasteboard area. This is because Fit to Screen will display everything in the document, including items on the pasteboard. To display the artboard without any surrounding pasteboard objects, you must apply the Fit to Canvas command.

You can click the down facing arrow in the bottom left corner of the document windows and a pop up list of zoom presets appears. To fit the entire artboard in the document window choose fit to canvas from the pop-up list.

Fitting to Selected

No matter what objects you have selected, Expression Design always uses the center of the document as the reference point when zooming with the Zoom In or Zoom Out commands, or when choosing one of the preset zoom percentages from the document window preset list. To zoom in on a selected object, you can use the Zoom tool or, to zoom even more precisely, apply the Fit to Selected or Zoom on Selection commands.

Apply Zoom on Selection CammandSelect the items you want to magnify and under the view menu click Zoom on Selection and the selected objects are magnified to fit the window.Zoom on SelectionViewing Actual SizeViewing artwork at its actual size means displaying it onscreen at 100% view magnification. When you view artwork at its actual size, what you are seeing is the piece displayed at the exact width and height dimensions that will print or export. You can do this by choosing the Actual Size from View menu or press Ctrl+1. Alternativly you can double-click the pool tool in the Tools Panel to view actual size.Note – The actual size does not center your view.Centering ViewThe Center View command allows you to center the artboard in the document window at 100% view magnification. Applying this command is the quickest and easiest way to return to centered view after navigating around the document with the Zoom and Pan tools. To do this you can choose Center View form the View menu.Note – Applying center view also changes the document view magnification to 100%.Working with multiple viewsThe New View command allows you to create multiple document windows for the same open document. By doing so, you can view your artwork at different zoom percentages. With New View, you can create one window for zoomed-in detail work and a separate one for previewing the entire artboard. In fact, you can create as many views as you like. 1. To create a second window for the currently active document, choose New View from the View menu. NewView

2. In the new window that appears, use any of the methods described in this chapter to apply a different view percentage.

 

Note – Whatever changes you make in one view will immdeatly appear in all the other views.

Scrolling with Scroll Bars

Another way that you can navigate around the document is by using the document window scroll bars. When you zoom in on your artwork, say to 300% view magnification, the document window can no longer fit the entire artboard in its display area. Rather than zoom out to access another part of the document, you can instead use the scroll bars to reposition the artboard in the window.

 

Note – The pasteboard area surrounding the artboard is infinite.

Scrolling with the Pan Tool

The Pan tool offers a much more free-form method for scrolling around the document. If you need to access a specific area of the document quickly, don’t waste time by applying multiple zoom commands or dragging the scroll bars. Instead, access the Pan tool and click and drag in any direction. Clicking with the Pan tool causes the cursor’s icon to grab the artboard; dragging repositions the artboard in the window.

 

To access the Pan tool, click the hand icon in the Tools panel.

Note – Press H to access the Pan tool quickly. Press and hold the Spacebar to access the Pan tool temporarily. Release the Spacebar to return to the previously selected tool.

 

 

Zooming with the Mouse Wheel

Expression Design also includes an option for zooming with the mouse wheel. With this option enabled, you can zoom in and out of the document without having to access the Zoom tool or apply any of the Zoom commands. There’s also an option that allows the position of the mouse to determine the reference point for zooming.

 

1. Under the Edit menu, point to Options and choose General

 

 

Note – Press Ctrl+K to quickly access the General pane of the Options dialog box.

2. In the Options dialog box that appears, choose Zoom from the Mouse Wheel Usage drop-down list.

3.Check theMouse Wheel Zoom About Mouse Position option to allow the position of the mouse to determine the reference point for zooming.

 

4. Click OK to apply the mouse wheel zoom options.

5. Scroll the mouse wheel up to zoom in; scroll down to zoom out. Zoom percentages are applied incrementally in the document with each position of the mouse wheel.

Rotating the Artboard

One of the nicer features in Expression Design is the ability to rotate the artboard. This can be especially useful when drawing freehand or applying shading or cross hatch with the simulated natural media brushes. It’s nice to be able to rotate your artboard onscreen just as if it were a piece of drawing paper.

 

1. Under the View menu, choose Rotate View Clockwise or Rotate View Counter Clockwise.

 

Note – Press Shift+[ to apply the Rotate View Clockwise command; press Shift+] to apply Rotate View Counter Clockwise.

2. The artboard appears rotated in the window. To rotate the artboard even further, continue applying the rotate commands.

3. To return the artboard back to its original position, choose Reset View Rotation from the View menu.

 

 

Note – Press the End key to apply the Reset View Rotation command quickly.

 

Ruler units disappear when applying the Rotate View commands. Rotating the artboard causes the rulers to appear blank.

 

Ruler guides rotate with the artboard, but the document grid does not. Existing ruler guides rotate along with the artboard, but the document grid always remains static.

Comments and feedback are most welcome. 🙂

Hey guys,

I am back with another tutorialand this time it is basics of MicrosoftExpression Design. I know that a lot of you guys would like to use Expression design and may not be able to use it as you might not know the basics. So just give 30 minutes of your your time and go along with the tutorialand you will be up with the basics of MicrosoftExpression Design.
What is Microsoft Expression Design and What it does?

Microsoft Expression Design is a powerful illustration tool that allows you to create both vector and bitmap graphics for use in projects created with the other applications in the Studio suite, including Expression Web and Expression Blend. It is only available for purchase as part of Expression Studio and not as a standalone application.

As a tightly integrated member of the Studio suite, Expression Design allows you to design custom web graphics and export them as GIFs or JPEGs for use in sites created with Expression Web. You can also use Expression Design to create custom user interface controls and export them in the native XAML format for use in interfaces created with Expression Blend.
System Requirements for installing Microsoft Expression Design

Operating System:

Microsoft Windows XP with Service Pack 2 (SP2)

Windows Vista

Minimum System:

Intel Pentium or AMD processor, 1 GHz with MMX or equivalent

512MB of RAM

150 MB available hard disk space

1024 x 768 monitor resolution with 24-bit color

Graphics processor that is DirectX 9–capable

Recommended System:

Intel Pentium or AMD processor, 2 GHz with MMX or equivalent

1 GB of RAM

600 MB available hard disk space

Microsoft DirectX 9.0–capable video card with 256 MB or more of memory—for example, ATI Radeon X300

or NVIDIA GeForce 5600 class equivalent or better.
Installing Expression design

Expression Design can only be purchased as part of the Expression Studio suite, which includes Expression Blend, Expression Web, and Expression Media. When you insert the Expression Studio installer CD, a setup guide automatically displays in your default web browser. You can use this guide to access the individual Expression Studio product installers. Use the following steps to install Expression Design onto your computer.

1. Insert the Microsoft Expression Studio CD into your drive.

2. If you are using Windows XP, install .NET Framework 3.0.

3. Click the Expression Design button to access the installer and choose Save File. Navigate to the default download location on your system and double-click the installer icon.

4. The Microsoft Expression Design Setup Wizard appears. Click the Next button and follow the steps provided.

5. When the installation is complete, click Finish to exit the wizard.

Launching Expression Design

1. Click the start button on the taskbar.

2. Point to All Programs

3. Click Microsoft Expression

4. Click Microsoft Expression Design

5. In the window that appears, enter your product key and click Continue.

Identifying Expression Design Interface Items

 

Opening a Document

Anytime you want to create artwork in Expression Design, you must do so within the confines of a document page. However, before you begin creating new documents, it helps to understand how to open pre-existing ones. Expression Design actually ships with some documents that are accessible through the Samples folder, which is installed along with the application. To access the Samples folder, navigate to the drive where you installed Expression Design; open the Program Files/Microsoft Expression/Design folder.

Choose the Open Command

1. Under the File menu, choose Open.

2. In the Open File dialog box that appears, navigate to the file you’d like to open.

3. Select the filename and click Open. The document automatically appears in the work area of the interface.

Note – you can also preview the document in Expression Design by checking the check box located in the lower left corner of the dialog box.

Opening Multiple Documents at Once

With Expression Design, you can also open multiple documents at once. This can be useful when working with multiple web graphics or interface items that are intended for use in much larger Expression Web or Expression Blend projects.

Select Multiple Files

1. Under the File menu, choose Open.

2. In the Open File dialog box that appears, navigate to the folder containing the files you’d like to open.

3. Shift+click to select adjacent filenames, or Ctrl+click to select nonadjacent files.

4. Click Open. The documents automatically appear stacked in the work area of the interface.

5. Each document’s name is displayed in a separate tab in the Flip bar. Click a tab to bring the corresponding document to the front.

Viewing Active Files

When you have multiple documents open, there are several different ways to control which one is currently being displayed. Expression Design contains a Flip bar at the top of the document window that displays the names of as many open documents as it can fit. By clicking the document name, you can bring it to the front of the stack. All open documents (including those not shown in the Flip bar) can be accessed via the active files list located under the Window menu, or via the Active Files menu to the far right of the Flip bar.

Choose the Document Name from the Window Menu

1. You can view a numbered list of open documents under the Window menu. The current document has a check mark displayed next to its name.

2. Select the name of the document you’d like to view.

Click the Document Name in the Flip Bar

1. Each document’s name is displayed in a separate tab in the Flip bar. Click a tab to bring the corresponding document to the front of the stack.

Note – Press Ctrl+Tab to view the next open document displayed in the Flip bar. Press Ctrl+Shift+Tab to view the previous document.

Choose from the Flip Bar Active Files Menu

1. The Flip bar can only display a limited number of document tabs. If you know a document is open but do not see its name listed in the Flip bar, you can access it from the Active Files menu. To access the menu, click the down arrow in the upper right of the document window, on the far right of the Flip bar. The current document has a check mark displayed next to its name.

2. Select the name of the document you’d like to view.

Hovering over a document name in the Flip bar reveals the current file location. When you hover over any document tab in the Flip bar, a tooltip appears to display where the file is currently stored on your system.

Creating a New Document

To create graphics in Expression Design, you must first create a document. Every document contains a frame, also referred to as the “artboard,” which determines the visible output area for your artwork. You can control the size of the document frame by entering specific width and height dimensions in the New Document dialog box. After the document is created, a black outline is displayed to indicate the position of the artboard. All the artwork that you intend to export or print should be placed within this area.

Choose the New Document Command

1. Under the File menu, choose New.

2. In the New Document dialog box that appears, choose a preset document size from the Presets list, or enter specific width and height values in the fields provided. Choose the preferred measurement units from the list provided. This also determines what units will appear in the document rulers.

3. If necesssary, change the resolution value from the default setting (96 ppi, which is the standard for onscreen display). Web graphics are generally saved at 72 ppi, and print graphics at a minimum of 220 ppi.

4. It is not necessary to name the file when setting it up in the New Document dialog box, but the option is there if you’d like to. You can always name the file later when saving it.

5. Click OK to create the new document.

Saving a Document

As you work in Expression Design, you should periodically save your documents. Doing so allows you to preserve the work you’ve done and return to it later, even after you’ve closed the file. There’s nothing worse than losing hours of hard work due to a power surge or unexpected system shutdown. Therefore, in addition to saving, you might also want to consider investing in a battery backup for your workstation.

Choose the Save Command

1. Under the File menu, choose Save.

The Save command is only available when updating pre-existing documents—not when saving for the first time, which requires the use of Save As.
You should also use Save As to avoid overwriting an original document that you’ve applied changes to. Doing so creates a copy of the document and allows you to change its name and system location.

Choose the Save As Command

1. Under the File menu, choose Save As.

2. Enter a name for the document in the File Name field of the Save As dialog box.

3. Choose a system location and click Save.

Setting Ruler Units

In addition to the artboard, every document also contains a set of rulers: one horizontal (top) and one vertical (left). Expression Design lets you decide which set of measurement units you’d like to display in the rulers. The Units and Grids Options include points, inches, millimeters, centimeters, picas, and pixels. Note that both rulers are always visible (there is no option to hide them), and that they both display the same measurement units.

Changing Document Ruler Unit Options

1. Under the Edit menu, point to Options and choose Units and Grids from the fly-out menu.

2. In the Options dialog box that appears, choose the preferred measurement units from the Document Units list.

3. Click OK to update the document rulers.

Setting Ruler Origin

The ruler point of origin, also referred to as the “zero point,” is the location along the edge of the artboard where zero is positioned in the rulers. In Expression Design, you can choose to place the zero point for both rulers in the upper left corner of the artboard or place it in the upper left for the horizontal ruler and in the bottom left for the vertical ruler.

Changing the Ruler Origin Option

1. Under the Edit menu, point to Options and choose Units and Grids.

2. In the Options dialog box that appears, uncheck Ruler Origin Is Always Top Left of Artboard. This changes the ruler origin for the vertical ruler from the upper left to the bottom left.

Changing Document Size

Anytime you need to change the overall size and/or resolution value of your artwork (for example, to resize a print graphic for use on the web), you can do so by using the controls available in the Document Size dialog box. Remember that any adjustments made using this method affect everything in the document, including the artboard and all your artwork.

Use the Document Size Dialog Box

1. Under the File menu, choose Document Size.

2. Enter new width and height values in the fields provided. Check Constrain Proportions to resize the document proportionally. If necessary, you can select a different measurement unit from the list provided. Doing so also changes the units that are displayed in the rulers after the dialog box is closed.

3. If necesssary, change the resolution value from its current setting. Web graphics are generally saved at 72 ppi, and print graphics at a minimum of 220 ppi.

4. Click OK to change the document size.

Changing the Artboard Size

If you’d like to resize the artboard without resizing your artwork, you can do so using the controls available in the Artboard Size dialog box. This allows you to extend your canvas and increase the output area or reduce it to crop away portions of your art.

Use the Artboard Size Dialog Box

1. Under the File menu, choose Artboard Size.

2. Enter new width and height values in the fields provided. If necessary, you can select a different measurement unit from the list provided. Doing so also changes the units displayed in the document rulers after the dialog box is closed.

3. Click any of the arrows in the Anchor grid to control which sides of the artboard will be added to or subtracted from. To add or subtract evenly from the center, leave the anchor point at its default setting.

4. Click OK to change the artboard size.

Viewing Artwork in Wireframe Mode

By default, Expression Design displays all documents in Preview mode, which reveals all applied attributes, such as fill colors, stroke colors, and effects. However, if you’d like to view the paths that make up the artwork without any attributes applied, you can do so by switching the Display Quality setting to Wireframe mode. This is a great way to take a look at what’s going on “under the hood” of your artwork. Switching to Wireframe mode can also make it easier to locate specific paths that you’d like to select and edit, especially when working with detailed pieces of art.

Change the Display Quality Setting

1. Under the View menu, choose Wireframe from the Display Quality submenu. Expression Design displays the paths that make up the artwork without showing any applied fill and stroke colors or effects.