I am back with the 4th tutorial on MS Expression Design and in this one we will cover the concepts of Grid, Guides and Points. Hope you have gone through my previous tutorials on MS Expresssion Design Tutorial : Microsoft Expression Design Basics, Tutorial : Microsoft Expression Design – Working with Panels and Tutorial : Microsoft Expression Design Zooming and Scrolling. Any questions you have are most welcome so with that positive thought lets start off with this session.
So if you are a designer then you would definetly know that for a good design you need to align objects to the document grid and to rular grid. Now Expression design provides a feature called Snap to Points and it allows you to align objects based on the position of each objects’s bounding box nodes.
Showing and Hiding the Grid in the Document
The document grid is a very useful tool for aligning objects precisely in your artwork. The objects that you create can be snapped to grid and for the same you need to make the grid visible.
Choosing the Show Grid Command
To display/hide the document grid you need to choose Show from the View menu and point to the Grid.
Note – Press Ctrl + ‘ to toggle visibility for the document grid. The Show Grid command only affects the currently active document. When multiple documents are open, the Show Grid command only toggles grid visibility for the document you are currently working in.
Changing the Grid Size
Grid size options are accessible via the Units and Grids pane of the Option dialog box. This setting determines the size of each square in the document grid, allowing you to customize the overall size of the grid to meet the alignment needs of your project.
Under the Edit menu, point to Options and choose Units and Grids.
Note – Press Ctrl + K to quickly access the Options dialog box. Select Units and Grids from the menu on the left.
Set the Grid Size field. The Grid Size option uses the same measurement unit as the Document Units option. In the Units and Grids pane of the Options dialog box, the measurement unit that you choose in the Document Units field determines what measurement unit is displayed in the neighboring Grid Size field.
Using the Grid as a Drawing Guide
As you draw shapes and paths in Expression Design, you can refer to the document grid to ensure that certain objects are aligned evenly, such as custom interface controls or website navigation buttons. After the objects are aligned, you can always toggle the grid’s visibility on or off, should the overlying pattern become too distracting to work with.
To display the document grid, choose Show from the View menu and point to Grid . Whenever you make the grid visible, Expression Design displays a check mark next to the word Grid in the submenu. As you create shapes and paths using the various drawing tools, you can use the document grid to align their positions on the artboard. To preview your artwork without displaying the overlying document grid, choose Grid from the Show submenu, or apply the keyboard shortcut of Ctrl+’.
Snapping to the Grid When Drawing
An even more precise way to align objects as you draw them is to snap to the document grid. This technique allows you to align the position of each line, point, or shape precisely on the artboard as you use the various drawing tools in Expression Design.
To display the document grid, choose Show from the View menu and point to Grid .Then Under the View menu, choose Snap to Grid. Expression Design displays a check mark next to the menu command whenever it is enabled.
If you click or drag close enough to any gridline with the various drawing tools (such as the Pen or Rectangle), the individual points (or lines) snap into position. Snapping to the grid allows you to align the position of each line, point, or shape precisely on the artboard.
Snapping to the Grid When Moving Objects
You might find it easier to align objects to the document grid after they’ve been drawn. One of the benefits to working this way is that you can snap objects to the grid while it is hidden, thereby eliminating the need to display the checkerboard overlay pattern. When guide snaps are enabled, you can move objects on the artboard and refer to the intersection markers that are displayed over any bounding box points that intersect with the grid.
To display the document grid, choose Show from the View menu and point to Grid . Then, Under the View menu, choose Snap to Grid. Expression Design displays a check mark next to the menu command whenever it is enabled.
Press V to access the Selection tool and click and drag an object in any direction to reposition it. When you drag close enough to a gridline, the object automatically snaps into position.
As you click and drag, Expression Design displays red intersection markers over any points that come in contact with the grid.
Adding Ruler Guides
When it comes to aligning objects, some designers prefer to use ruler guides as opposed to the document grid. This is because ruler guides can be positioned wherever you like on the artboard, whereas the document grid’s position is limited to the settings assigned in the Units and Grids pane of the Options dialog box.
To set ruler hover over the ruler area and click and hold down the mouse button, the cursor will change to display a double side arrow then drag out a guide from the rulker area onto the artboard and then release the mouse after postioning the guide.
Ruler guides always extend past the edges of the artboard. All ruler guides extend into the pasteboard area surrounding the artboard. Ruler guides automatically rotate with the artboard. Unlike the document grid, if you rotate the artboard using the Rotate View commands, the ruler guides also rotate. Ruler guides are not layer specific. Unlike objects, ruler guides are not positioned within a layer; therefore, they are not affected by assigned layer color or the Layers panel visibility controls. Ruler guides are not printable. The ruler guides can only be viewed onscreen as you work in Expression Design. They will not print or export with the artwork.
Showing and Hiding Guides
The more guides you add to your document, the more distracting they can become. That’s why the best way to work with ruler guides is to display them onscreen only when you need them. Thankfully, Expression Design makes it easy to control guide visibility through the use of menu commands, keyboard shortcuts, and contextual menus.
To display ruler guides, choose Show from the View menu and point to Guides . Whenever you make the guides visible, Expression Design displays a check mark next to the word Guides in the submenu.
Note – You can use Ctrl +; to toggle visibility of ruler guides.
You can also access the Show Guides command from the contextual menu. To access the Show Guides command from the contextual menu, make sure you have no objects selected, and then right-click anywhere in the document and choose Show Guides.
Snapping to Guides
Snapping objects to ruler guides allows you to align objects precisely on the artboard. The benefit to snapping to ruler guides as opposed to the grid is that you can place guides and reposition them wherever you like on the artboard—even at an angle—whereas the document grid always remains static.
To snap to guides under the View menu Choose Snap to Guides.
Note – You can also press Ctrl + Shift + ; to toggle Snap to Guides command on and off.
Press V to access the Selection tool and click and drag an object in any direction. When you drag close enough to a guide, the object automatically snaps to it.
The ruler guides change color when guide snaps are enabled. When the Snap to Guides option is enabled, the ruler guides appear blue; when the option is disabled, the guides appear gray. Intersection markers are displayed when snapping to guides. Expression Design displays intersection markers over any bounding box points that come in contact with the ruler guides. However, unlike the document grid, the guides must be visible for the intersection markers to appear.
Once you drag a ruler guide onto the artboard and release the mouse button, it remains in place and cannot be selected or moved with any of the selection tools. Expression Design purposely locks the guides to prevent you from accidentally selecting and moving them as you transform objects in your artwork. However, it is possible to reposition guides. To do so, you must hold down the Alt key while you click and drag the guide.
Ruler guides can be removed from a document just as easily as they can be added. All you need to do is Alt+click while you drag each guide back into the respective horizontal or vertical ruler area where you originally pulled them from.
You can only move or delete one guide at a time. Expression Design does not allow you to select and move multiple guides at once. There is also currently no command for clearing all ruler guides from the document.
Making and Releasing Guides
Expression Design also allows you to convert existing shapes or paths into guides. These types of guides can be used to indicate specific areas of a design where certain objects, such as text, should be positioned. You can also revert these guides back into editable shapes once the guides are no longer needed.
1. Use the various drawing tools, such as the Pen or Rectangle, to create a shape or path. After it is drawn, be sure not to deselect it.
2. To make a guide out of the selected shape or path, choose Guide from the Object menu and choose Make.
3. To revert the made guide back into an editable shape or path, choose Guide from the Object menu and point to Release.
Note – Press Ctrl+5 to apply the Make command quickly. The Release command reverts all made guides back into editable shapes. It is currently not possible to select and release individual guides created from shapes or paths.
Snapping to Points
In addition to aligning objects to the document grid and to ruler guides, you can also align objects to each other using the Snap to Points feature. When you enable this option, any objects that you move around on the artboard automatically snap to the bounding box nodes of a neighboring shape or path.
1. Use the various drawing tools, such as the Pen or Rectangle, to create some shapes and/or paths.
2. Under the View menu, choose Snap to Points. Expression Design displays a check mark next to the menu command whenever it is enabled.
Note – Press Ctrl+Alt+’ to toggle the Snap to Points command on and off.
3. Press V to access the Selection tool and click and drag one of the shapes or paths in any direction. When you drag close enough to one of the bounding box selection points for a neighboring object (not the points that make up the path), the object automatically snaps to it.
4. As you click and drag, Expression Design displays red intersection markers over any points that come in contact with the grid.
Any kind of feedback or comments are most welcome.