CIS 205—Web Design & Development Fireworks Chapter 1

Chapter 1: Getting Started with Fireworks Introduction – Fireworks is a graphics program intended for creating Web images and media – It integrates seamlessly with Flash, Fireworks, Photoshop, and Illustrator

Lesson 1: Understand the Fireworks Work Environment Viewing the Fireworks Window – The main area of the Documents window contains the canvas – The Documents window contains four display buttons Original Preview 2-Up 4-Up – Tools are housed in the Tools panel, organized into groups – Modify selected objects using the Property inspector – Panels can be arranged using the collapse arrow and the gripper

Lesson 1: Understand the Fireworks Work Environment (2) Start Fireworks and open a Fireworks document 1.Click Start on the taskbar, point to All Programs, point to Adobe Web Standard CS3, click Adobe Fireworks CS3 2.Mac users… 3.Click File on the menu bar, click Open 4.Navigate to your data files, click fw1_1.png, click Open

Lesson 1: Understand the Fireworks Work Environment (3) Open and adjust panels in the Fireworks window 1.Click the arrow next to the name of each open panel to close them 2.Click the Optimize and Align panel name to open it. Move the pointer, drag the gripper (located on the left of the panel arrow) to the left until you see the placement rectangle and release 3.Click the Pages and Layers and Frames panel title 4.Click the Collapse arrow in the middle left of the panel 5.Click the Expander arrow to expand a panel area 6.Drag the Optimize and Align panel to the top 7.Click File on the menu bar, click Close

Lesson 2: Work with New and Existing Documents Working with Files – A Fireworks file is called a document, which has properties. – A document consists of many layers, each of which can contain multiple objects. – A layer can contain sub layers. Working with Pages – A document contains one page and pages can be added – A page stores all layers in a document – You can create a Master Page containing common elements

Lesson 2: Work with New and Existing Documents (2) Working with Pages (continued) – The file type of a document is PNG. – Other formats are JPEG (for photos) and GIF (for line art) – You can copy, paste, drag, and drop images or text from other applications into a Fireworks document Accessing Help – Click Help on the menu bar, click Fireworks Help Using Filters on Bitmap Images – Filters enhance images by transforming pixels

Lesson 2: Work with New and Existing Documents (3) Create and save a new document 1.Click File on the menu bar, click New 2.Type 325 in the Width text box, double-click the value in the Height text box, type 275, enter 72 pixels/in in the Resolution text box 3.Click the Custom canvas option, click the Canvas color box 4.Type #0099FF in the Swap colors text box, press Enter, click OK 5.Click File on the menu bar, click Save As, type my_blue_heaven in the File name text box, navigate to the desired location, click Save

Lesson 2: Work with New and Existing Documents (4) Get Help and add a layer 1.Click Help on the menu bar, click Fireworks Help 2.Type adding layers in the Search text box 3.Type adding layers in the Search box, press [Enter] 4.Click Adding and removing layers, click the Help window Close button 5.Open the Layers panel, click the New/Duplicate Layer button at the bottom of the panel

Lesson 2: Work with New and Existing Documents (5) Drag and drop an object 1.Open pool.png (located in your Data Files), resize the two documents so that both are visible at the same time 2.Make sure the Pointer tool is selected 3.Click anywhere on the pool image, drag it to the my_blue_heaven document 4.Close pool.png w/o saving changes 5.Expand the Optimize and Align panel, click the Align tab, click the To Canvas button 6.Make sure the bitmap object is selected, click the Align horizontal center icon, click the Align vertical center icon 7.Collapse the Optimize and Align panel, click File on the menu bar, click Save

Lesson 2: Work with New and Existing Documents (6) Apply filters to an image 1.Verify that the bitmap is selected, click the Pointer tool 2.Click the Add Live Filters button on the PI, point to Shadow and Glow, click Inner Shadow 3.Press [Enter] to close the pop-up window 4.Click the Add Live Filters button on the PI, click Photoshop Live Effects, click the Bevel and Emboss check box, click Bevel and Emboss 5.Click the Style list arrow, click Outer Bevel, click OK 6.Click away from the image 7.Save your work, close my_blue_heaven.png

Lesson 3: Work with Layers and Images Understanding the Layers Panel – In Fireworks, you use layers to position objects – The position of objects/layers in the Layers panel affects the appearance of the document – A layer can contain many objects and you can collapse or expand, lock, duplicate, hide, or show layers Understanding Bitmap Images and Vector Objects – A bitmap graphic is an image with a matrix of pixels – Vector graphics are mathematically calculated objects – Scaling a bitmap image loses resolution (ppi) – Vector graphics are resolution independent

Lesson 3: Work with Layers and Images (2) Open a document and display the Layers panel 1.Open fw1_1.png in your data files, save it as breads 2.Make sure the Layers panel is displayed and expanded 3.Click the Eye icon next to the Great_Crusts object 4.Click the Show/Hide icon next to the Great_Crusts object in Layer 1 5.Click the Great_Crusts object in Layer 1 on the Layers panel, drag it beneath the Loaves&Brie object in the Background layer until a flashing double line appears 6.Verify that the Great_Crusts object is still selected, click the Delete Selection button