Expression Design Lab Exercises

Expression Design Lab Exercises Creating Images with Expression Design 2 Beaches Around the World (Part 1: Beaches Around the World Series)

Information in this document, including URL and other Internet website references, is subject to change without notice. Unless otherwise noted, the example companies, organizations, products, domain names, e-mail addresses, logos, people, places, and events depicted herein are fictitious, and no association with any real company, organization, product, domain name, e-mail address, logo, person, place, or event is intended or should be inferred. Complying with all applicable copyright laws is the responsibility of the user. Without limiting the rights under copyright, no part of this document may be reproduced, stored in or introduced into a retrieval system, or transmitted in any form or by any means (electronic, mechanical, photocopying, recording, or otherwise), or for any purpose, without the express written permission of Microsoft Corporation. The names of manufacturers, products, or URLs are provided for informational purposes only and Microsoft makes no representations and warranties, either expressed, implied, or statutory, regarding these manufacturers or the use of the products with any Microsoft technologies. The inclusion of a manufacturer or product does not imply endorsement of Microsoft of the manufacturer or product. Links are provided to third party sites. Such sites are not under the control of Microsoft and Microsoft is not responsible for the contents of any linked site or any link contained in a linked site, or any changes or updates to such sites. Microsoft is not responsible for webcasting or any other form of transmission received from any linked site. Microsoft is providing these links to you only as a convenience, and the inclusion of any link does not imply endorsement of Microsoft of the site or the products contained therein. Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual property rights covering subject matter in this document. Except as expressly provided in any written license agreement from Microsoft, the furnishing of this document does not give you any license to these patents, trademarks, copyrights, or other intellectual property. 2008 Microsoft Corporation. All rights reserved. The names of actual companies and products mentioned herein may be the trademarks of their respective owners. 2

Setup All of the files and images needed to complete the activities in this Microsoft Expression Design Tutorial Creating Images with Expression Design: Beaches Around the World are located in the accompanying Allfiles-Design.zip file. Extract this file to a convenient location where student files are typically stored. Files will be extracted to a folder named Allfiles_Design. The screenshots in this tutorial are shown in the Expression Light color scheme of Expression Design and may not be the same colors as the version of Expression Design installed on student computers. If desired, the color scheme in Expression Design can be set to Expression Light by following these directions: Within Expression Design, click Edit, point to Options, and click Workspace. Select Expression Light from the Theme dropdown menu. Scenario The exercises in this tutorial will introduce you to Microsoft Expression Design. This is the first in the series of Beaches Around the World tutorials. This tutorial is included in Module 4 of the semester-long curriculum, Introduction to Web Design Using Microsoft Expression Studio. This tutorial can stand as in independent learning tool or as the first in the 3-tutorial series. Expression Web Quick Start Tutorial: Beaches Around the World and Expression Web Tutorial (Advanced): Beaches Around the World are the other two tutorials. By the end of these exercises, you will have created the My Beach Trip Web site header design below. In order to create this image, you will learn to use the tools in Expression Design to build and edit designs with Expression Design s vector-based drawing tools. You will also learn to produce graphical effects and change settings for optimization. Finally, you will learn to export images and files for use on the Web. There is a full-size image of the completed design (beachheader_final.png) in the Allfiles_Design folder. 3

The Microsoft Expression Design Workspace 1. Common Toolbar 2. File Tabs 3. Toolbox 4. Artboard 5. Properties Panel 6. Layers Panel 7. Action Bar Study the elements of the Expression Design Workspace. The numbered elements will be referred to often in this tutorial. Exercises EXERCISE 1 - Creating the Layers and Simple Background Elements for the Header Design EXERCISE 2 - Adding the Text and Effects EXERCISE 3 - Drawing the Sun Design EXERCISE 4 - Drawing the Header Reflection EXERCISE 5 - Exporting the Graphic 4

Exercise 1: Creating the Layers and Simple Background Elements for the Header Design Scenario: You will create a new document for your Design project. In this exercise, you will draw the simple vector elements for the My Beach Trip header background and add some basic effects to the design. Task 1: Create a new design document Create and save a new blank document with the correct proportions and resolution. 1. Click Start, point to All Programs, point to Microsoft Expression, and then click Microsoft Expression Design. 2. On the File menu, click New. 3. In the New Document dialog box, specify the values from the following table, and then click OK. This orange table is NOT part of the work environment. Similar tables are used throughout this tutorial as an easy-to-read source of details you will need to enter into various dialog boxes in Expression Design. Enter the values you see in the table into the correct space in the Expression Web forms. Name Presets Width Height Resolution BeachTripHeader Custom 800 px 80 px 96 px/inch 4. On the File menu, click Save As. 5. In the Save As dialog box, specify a suitable path in the Save in list, and then click Save. The path is determined by the location of folder into which you will save your files for this project. 5

Task 2: Create a colored background element Vector objects are sometimes called draw objects. They are geometric in shape and defined by points, lines, curves, and shapes. The first vector object we will create is a rectangle. Add a simple vector rectangle object by using the Rectangle tool and then change the size and color to form the background for the design. 1. On the toolbox, click the Rectangle tool. 2. On the artboard, drag to create a rectangle (don t worry about the size or look of the rectangle for now). Select the new shape on the artboard. It should have handles at each corner and a bounding box around the outside, as shown in the image below. 6

3. On the Properties panel, in the Appearance category, click Fill (the red rectangle in the drawing below). 4. On the Properties panel, in the Appearance category on the far right side of the dialog box, specify the following values for Fill. R 29 G 29 B 29 On the Properties panel, in the Appearance category, click the Stroke selector (larger red square in the picture below) and then click the None button. The None button is a white square that has a diagonal line (the smaller red square below). 7

5. In the contextual Action Bar at the bottom of the application window, click Unlink width and height sliders (the chain icon between the W and H boxes with a red rectangle around it in the picture below) to enable you to resize the object differently on each axis. If you don t see the contextual Action Bar, you need to click on the rectangle you just created. 6. In the white spaces next to each property (X, Y, W, & H) in the contextual Action Bar, enter the values in the following table. X 400 Y 78 W 800 H 4 The dark grey shape should now take up a small sliver at the bottom of the artboard. 7. On the File menu, click Save. Task 3: Add another background element and a gradient fill In this section we will add another background element and edit the gradient fill by using the Fill and Gradient color tools. A gradient is a blended and shaded area of color. In the picture below the blue square shows a gradient from very light blue to very dark blue. 1. On the toolbox, click the Rectangle tool. 2. On the artboard, drag to create a rectangle (once again, don t worry about the size or look of the rectangle for now). 3. On the Properties panel, in the Appearance category, click Stroke and then click the preset black color, #000000. 8

4. On the Properties panel, in the Appearance category, type 1 into the Width box and then press Enter. If you do not see the Width box use the small scroll bar on the right side of the properties panel to display all of the features. 5. In the contextual Action Bar at the bottom of the application, click Unlink width and height sliders (the chain icon between the W and H boxes) to enable you to resize the object differently on each axis. If you don t see the contextual Action Bar, you need to click on the rectangle you just created. 6. In the contextual Action Bar, enter the values in the following table. X 400 Y 38 W 800 H 75 The shape should now fill the rest of the artboard. 9

7. With the shape still highlighted, click Fill and then click Gradient Color from the preset swatches (red square below). 8. Click the left gradient stop on the gradient bar (small red square), and then specify the color values (far right side of the dialog box) from the table below. R 79 G 194 B 56 10

9. Click in the middle of the gradient bar to create a new gradient stop (red square). If this gradient bar is not visible click Fill and then click Gradient Color from the preset swatches (same as step 7 above). 10. Click the middle gradient stop, and then specify the color values from the following table. R 64 G 156 B 45 11. Click the right gradient stop, and then specify the color values from the following table. R 48 G 117 B 34 You will see a very slight gradation of green from left to right in the rectangle. 11

Now let s play with this gradient. 12. On the Properties panel, in the Appearance category, click the Move, scale, rotate, or skew the fill of the object icon (small red square) and then type -90 into the Rotation Angle box (red rectangle). 13. On the toolbox about half way down the left side of the workspace, click and hold down the Gradient Transform tool until the tool options submenu appears and then click the Fill Transform tool. Drag the top and bottom bounding box handles of the shape toward the top or the bottom of the shape to alter the positioning of the gradient fill. You will see the gradient shading change as you drag the handles. Having problems seeing a change? Drag the top center handle ½ of the distance down toward the bottom center handle. Repeat this process 2 more times. Now, drag the bottom center handle ½ of the distance up toward the top center handle. Repeat a few times until you get a pleasing gradient. 12

14. If you want to start over, just click Reset under on the Move, scale, rotate, or skew the fill of the object icon (small red square) and then type -90 into the Rotation Angle box (red rectangle). You are ready to play with the top and bottom handles again. Create something like this sample: Task 4: Add a new layer for the sun graphic Create, rename, and lock layers to enable editing of separate objects within your design document. 1. On the Layers panel, click the Toggle Lock button (the padlock) next to the Layer1 layer. By doing this, you have locked the layer containing your colored background shapes. 13

2. Double-click the Layer1 label and type Background to rename the layer. 3. Press Enter. 4. On the lower right of the Layers panel, click the New Layer button. By doing this, you have created a new layer called Layer 2. 5. Double-click the Layer 2 label and type Sun. 6. Press Enter. 7. Click the Toggle Lock button on the Sun layer to lock the layer and prevent further editing. 8. On the File menu, click Save. 14

Task 5: Add a new layer for the text background Change the layer order to enable objects to sit in front of or behind other objects. 1. On the Layers panel, click the New Layer button. 2. Double-click the Layer 3 label and type TextBackground. 3. Press Enter. 4. Drag the TextBackground layer below the Sun layer. This changes the order of the layers. The order of the layers from top to bottom is now Sun, TextBackground, Background. 5. On the File menu, click Save. Task 6: Create the text background graphic Draw the text background shape by using the Pen and Direct Selection tools. 1. On the toolbox, click the Pen tool. 15

2. On the artboard, click four vertices (corners) to make an approximate rectangle with straight sides. (Be sure to click for the destination of the vertices, don t click and drag.) When joining the last vertex to the first vertex of the rectangle, the Pen tool cursor will change from a plus sign to a square. This joins the paths to form a complete shape. 3. On the toolbox, click the Direct Selection tool. Note the shape of the image below. It will clarify the next 2 steps in these directions. 4. Click the top left vertex of the rectangle and drag it in to the right. 5. Click the top right vertex of the rectangle and drag it out to the right and up a bit. This creates a quadrangular shape for the My Beach Trip text background as shown below. Note: the color of the shape in the screenshot below may vary from your version depending on the color settings of your application. You will change the color during a later step in this exercise. 6. On the toolbox, click the Selection tool. 16

7. On the Action Bar, click Unlink width and height sliders (the chain icon between the W and H boxes) and then specify the values in the following table. W 345 H 64 8. Drag the text background shape to the left side of the artboard. Make sure the shape is centered over the green background on the vertical axis as shown below. You can use the arrow keys on your keyboard to make small movements to the shape. 9. On the File menu, click Save. Task 7: Add a fill to the text background graphic Edit the fill and stroke of the text background by using the Fill and Stroke color tools. 1. On the Properties panel, in the Appearance category, specify the following values for Stroke. R 29 G 29 B 29 2. On the Properties panel, in the Appearance category, type 2 in the Width box and then press Enter. 17

3. On the Properties panel, in the Appearance category, specify the following values for Fill. R 0 G 112 B 188 Exercise 2: Adding the Text and Effects Scenario: The next step is to add text to the header. You will learn to create paths from the original text, and then edit those paths using the Pen and Direct Selection tools. Finally, you will apply some out-glow and drop shadow effects. Task 1: Add the basic text to a new layer Create a new layer, then add and format the basic text for the My Beach Trip header. 1. On the Layers panel, click the New Layer button. 2. Double-click the layer4 label and type Text. The Text layer should be below the Sun layer and above the TextBackground layer. 18

3. On the toolbox, click the Text tool. 4. Click the artboard and type, MY BEACH TRIP. 5. With the Text tool, drag to highlight all of the text. You will need to start dragging very close to the M or the P in order to capture it. 6. On the Properties panel, in the Appearance category, click Stroke and then type #212121 in the Hex value box. 7. On the Properties panel, in the Appearance category, type 1 into the Width box and then press Enter. 19

8. Select the text, click Fill and then click the preset white color, #FFFFFF. 9. On the File menu, click Save. Task 2: Edit the text Use advanced editing techniques to change the look of the text. 1. Use the Text tool to select the MY BEACH TRIP text. 2. On the Properties panel, in the Text category, specify the values in the following table. You may need to scroll the small scroll bar on the right side of the properties panel to see the Text category. Font Family Font Decoration Type Size Franklin Gothic Heavy Regular 30 pt If you do not have Franklin Gothic Heavy, choose Franklin Gothic or other similar font. If 30 is not a size option, click the size value and type in 30. 3. On the Text panel, toggle the Show advanced properties button (red rectangle below), to reveal further formatting options. 20

4. On the Text panel, in the Advanced Properties section, specify the values in the following table. Leading Auto Tracking 2% Horizontal Scale 100% Base line offset Script 0 pt Normal 5. With the text selected, on the Object menu, click Convert Object to Path. This turns the text into a shape and enables you to edit the paths by using the node points. 6. Click the Selection tool and select the text. 7. Move the text over the blue background shape that was just created as shown below. 8. On the toolbox, click the Direct Selection tool.. 21

9. On the M, drag out the bottom left node (corner dot) further to the left and drag the bottom right node to the right and up a bit. 10. You will need to change the paths for the remaining letters so they look less like the original Franklin Gothic font and more stylized like you see below. 11. On the File menu, click Save. Task 3: Add the outer glow and drop shadow effects Add some effects to the text to give it an outer glow, by using the Effects tools. 1. Highlight the full MY BEACH TRIP text using the Selection tool. 2. On the Properties panel, in the Effects category, click the fx button, point to Effects, and then click Outer Glow. 22

3. On the Properties panel, in the Effects category, specify the values in the following table. Size 2 Opacity 0.5 R 0 G 67 B 112 Noise 0.1 4. On the Properties panel, in the Effects category, click the fx button, point to Effects, and then click Drop Shadow. 5. Specify the following settings in the table for the Drop Shadow effect. Softness 1 Offset 2 23

Opacity 0.6 Hex value #000000 Light Angle 315 Noise 0 6. On the toolbox, click the Selection tool. 7. Drag the MY BEACH TRIP text into the correct position over the blue text background shape and use the resize handles to adjust the size if necessary. Press SHIFT while dragging the resize handles to constrain the proportions. 8. On the File menu, click Save. 24

Exercise 3: Drawing the Sun design Scenario: It s time to create the Sun element using the Pen and Ellipse tools. Task 1: Add the center of the sun Use Ellipse tool to create a basic circle at the center of the sun. Then add a radial gradient to the shape. 1. On the Layers panel, click Toggle Lock on the Sun layer to unlock it. Make sure all of the other layers are locked. 2. On the toolbox, click and hold down the Rectangle tool until the tool options submenu appears, and then click the Ellipse tool. 3. Hold the Shift button and draw a circle on the artboard. Holding the shift button will allow you to create a perfect circle when using the Ellipse tool. 4. With the shape still highlighted, click Stroke and then type #212121 into the Hex value box. 5. On the Properties panel, in the Appearance category, type 1 into the Width box and then press Enter. 6. Click Fill and then click Gradient Color from the preset swatches. 7. Click the left gradient stop on the gradient bar, and then specify the color values from the following table. R 255 25

G 255 B 0 8. Click the right gradient stop, and then specify the color values from the following table. If a center gradient stop appears on the gradient bar, it can be deleted by clicking and dragging it out of the gradient bar. R 179 G 179 B 0 9. On the Properties panel, in the Appearance category, click the Radial Gradient button. 10. On the Action Bar, leave the width and height sliders linked and then specify the values in the following table. X 700 Y 33 W 56 26

11. On the File menu, click Save. Task 2: Draw the Sun s rays Draw the sun s rays by using the Paintbrush tool. 1. In the toolbox, click the Paintbrush tool. 2. On the Properties panel, in the Appearance section, click Fill and then click Gradient Color from the preset swatches. This should be the yellow radial gradient that you used for the center of the sun, if it is not, set the gradient to match the center of the sun. 3. Click Stroke and then enter #212121 into the Hex value box. 4. Type 1 into the Width box. 5. On the artboard, drag the paintbrush to make rays surrounding the sun. Each ray will only have 2 or 3 vertices and will stay unclosed. See the screenshot below as a guide to the final shape. Press Alt to rotate the vertex handles when you need the line to change direction. You will need about 12 rays. 27

Task 3: Group all of the sun shapes Use the Group tool to turn all of the sun shapes that you created into one tied-together image. 1. In the toolbox, click the Selection tool. 2. Drag over all of the objects on the sun layer to select them. 3. On the Arrange menu, click Group. 4. On the Layers panel, for the sun layer, click Toggle Lock to lock the layer. 5. On the File menu, click Save. Exercise 4: Drawing the Header Reflection Scenario: A reflection effect can be added to the header to enhance its appearance. Task 1: Prepare the workspace Create and set the order for a new reflection layer. 1. On the lower right of the Layers panel, click the New Layer button. 2. Double-click the new layer and type Reflection. 3. Press Enter. 4. Drag the Reflection layer to the top of the layers list. 5. Make sure the Reflection layer is unlocked and all the other layers are locked. 28

6. On the File menu, click Save. Task 2: Draw and fill the Reflection shape Draw the basic reflection shape using the Rectangle tool and then fill it with a gradient. 1. On the toolbox, click the Rectangle tool. If the Ellipse tool is still selected, click on it and hold down until the choice for Rectangle appears. 2. On the artboard, drag to create a rectangle (don t worry about the size or location of the rectangle for now). 3. On the Properties panel, in the Appearance category, click the Stroke selector and then click the None button. The None button is a white square that has a diagonal line. 4. In the contextual Action Bar at the bottom of the application, click Unlink width and height sliders (the chain icon between the W and H boxes) to enable you to resize the object differently on each axis. 5. In the contextual Action Bar, enter the values in the following table. X 400 Y 20 29

W 800 H 40 6. With the shape still highlighted, click Fill and then click Gradient Color from the preset swatches. 7. Click the left gradient stop on the gradient bar, and then specify the color and transparency values from the following table. R 255 G 255 B 255 Stop Alpha 0% 8. Click the right gradient stop, and then specify the color and transparency values from the following table. R 255 G 255 B 255 Stop Alpha 100% 9. If Radial Gradient is still selected, then select Linear Gradient on the Appearance panel. 30

10. On the toolbox, click the Gradient Transform tool. The Fill Transform tool may still appear. If so, click on it and hold down until the choice for Gradient Transform appears and then choose it. 11. On the artboard, hold SHIFT and draw a line from just above the shape to just below the shape. Experiment to achieve the best results. This will change the gradient to make it look like a reflection. Refer to the screenshots below to see the desired result. 12. On the File menu, click Save. 31

Exercise 5: Exporting the Graphics Scenario: Because we want to use this image on the Web, it must be exported as a PNG image file. Task 1: Export the Graphic as a PNG file 1. On the File menu, click Export. 2. In the Export dialog, in the Items to Export category, ensure that the Whole Document option is checked. 32

3. In the Export Properties category, specify the values from the following table. Format Color Mode Transparency Interlaced Antialias Width Height PNG RGB Active Inactive Active 800px 80px 4. You can name your file in the File name box but for now we will leave it as BeachTripHeader.png. 5. Use the Browse button next to the Location box to specify a location for the file. 6. Click Export All to create the file. Congratulations! You ve just completed the header design for the My Beach Trip Web site using Expression Design. You learned use many tools and special effects that will be useful as you design more images for the Web. You can use the file you just created in the next tutorial in the 3-tutorial series: Expression Web Quick Start Tutorial: Beaches Around the World. The complete series of tutorials are included in the semester-long curriculum, Introduction to Web Design Using Microsoft Expression Studio (modules 4, 5, & 7). Experiment with Expression Design and explore the Help Menu to learn about more exciting image design features and technologies. There are also many learning resources online at http://expression.microsoft.com/en-us/cc197142.aspx. 33