For Dummies Adobe Creative Suite 5 Design Premium All-in-One
Contents
1. panel choose its name from the Window menu Working with Basic Selection Tools You can work in Fireworks using the same selection tools for both vector and bitmap images Making a selection in a bitmap image If you re familiar with Photoshop selection techniques you ll have no prob lem using the same tools in Fireworks Here s the lowdown on making selec tions with the Marquee and Lasso tools ar Figure 1 4 Draga selection to move it Working with Basic Selection Tools 869 Marquee To make a selection with the Marquee tool simply select it from the Tools panel and then click and drag to surround the area you want to select You can add to the selection by holding down the Shift key and dragging another marquee region or deselect a portion of the active selection by holding down the Alt Windows or Option Mac key while dragging with the Marquee tool Lasso To use the Lasso tool select it from the Tools panel and click and drag to create a path that then becomes your selection As mentioned in the Marquee bullet you can add to the selection by holding down the Shift key and creating another selection region or subtract from the selection by holding down the Alt Windows or Option Mac key while dragging a selection region with the Lasso tool You can use both the Marquee and Lasso tools interchangeably when making a selection By making a selection with the Marquee tool or Lasso tool and then2. Brush Eraser Erase bitmap data E F continued Book VIII Chapter 1 GS Spomeadly Hursnpo uy 866 Jumping Right into the Interface Table 1 1 continued Icon Tool Name What Vou Can Do Keyboard with It Shorteut A Blur Blur image R a amp Rubber Stamp Clone image data S Vector Line Create vector lines N Pen Create B zier paths P Rectangle Create vector U Lal shapes T Type Create text T Freeform Create freeform 0 paths J Knife Cut paths Y Web x Rectangle Create image map J ES Hotspot hotspots Slice Create slices for K Pa tables or CSS m Hide Slices and Hide slices and 2 Hotspots image map hotspots Show Slices Display slices and 2 B and Hotspots image map hotspots Color J Eyedropper Sample color Paint Bucket Fill color G a Jumping Right into the Interface 867 Icon Tool Name What Vou Can Do Keyboard with It Shortcut View gm Hand Pan the artboard r Zoom Zoom in and out of X A artboard As you select each tool notice that the Properties panel displays additional options If your Properties panel isn t visible choose Window Properties Understanding the views The tabs at the top of an image give you the opportunity to view it in four ways Original displays your image as it appears before being optimized for the Web Preview displays the image as it will appear when it s saved for the Web based on your current setti
3. Chapter 1 Introducing Fireworks CS5 In This Chapter Understanding when you should use Fireworks Discovering the workspace Finding out about the tools Looking into the views Using the basic selection tools A dobe Fireworks is an incredible application with specific solutions to meet online designers needs When you use Fireworks you have the freedom to create test Web sites experiment with advanced scripting fea tures and come up with compelling graphics that look good and work well on Web pages In this chapter you encounter the software and its workspace You also dis cover how to use selection tools so that you can start to manipulate graph ics in Fireworks right away Why Use Fireworks Considering all the applications included in the Creative Suite why do you need one more The reason is mostly because after CS2 and the removal of ImageReady the Creative Suite provided no easy way to create interest ing Web graphics Sure you can save images for online use in Photoshop and Illustrator using the Save for Web amp Devices feature but what about rollovers easy image maps and interactive wireframes A wireframe is essentially a mock up or rough draft created to demonstrate or test a Web site before it is in its final form In Web design wireframes are basic visual guides used to suggest the layout and placement of fundamental design elements In Fireworks you can work intuitively by taking advantage of its
4. clicking and dragging with the Pointer tool you can move one part of an image to another as shown in Figure 1 4 If you make no selection before you drag everything on the existing layer is moved Switch to the Subselection tool and notice that if you have an existing selec tion the pointer changes to a double arrow indicating that you will clone copy the selection when you click and drag it Book VIII Chapter 1 GS Spomedly Hulonpouu 870 Working with Basic Selection Tools Figure 1 5 The Pointer tool lets you move a vector shape Making a selection in a vector image By using the same tools you use to select bitmap images you can adjust vector paths Use the Pointer tool to move an entire vector shape as shown in Figure 1 5 Use the Subselection tool to move the individual points on the path Tatyana
5. in the context of the total page An image 600 pixels wide would fill most of a page whereas an image that s 1 200 pixels wide would force the viewer to scroll to see the entire image After launching Fireworks CS5 you notice right away that its workspace is similar to the workspaces in the other CS5 applications Adobe has done a good job of organizing each application so that the learning curve is quick and integration is easy You shouldn t be surprised to find a toolbox to the left of the workspace and panels to the right The tools even look much like the tools you may already be familiar with from working in other CS5 applications Using the tools Jumping Right into the Interface 865 The Tools panel is sorted into six categories Select Bitmap Vector Web Colors and View Table 1 1 lists the tools by category and the keys you can easily press to access them Table 1 1 Fireworks Tools Icon Tool Name What Vou Can Do Keyboard with It Shortcut Selection Pointer Select paths and Vor0 objects Subselection Adjust paths much Aor1 as you do with the Direct Select tool in Illustrator and Photoshop al Scale Scale objects or Q selections t Crop Crop images C Bitmap z Marquee Make rectangular M Rad selections Lasso Make freeform L lt a selections X Magic Wand Select similar colors W I Brush Paint on image B toggle with Ea Pencil Pencil Draw bitmap paths B toggle with A
6. logical interface which provides panels and features that relate to the Web and that offer you the easiest way to optimize make Web ready graphics 8 64 Jumping Right into the Interface Jumping Right into the Interface Figure 1 1 Pixel dimensions play an important role in Fireworks L STy sh Up X So what s the big deal about Fireworks being built specifically for Web graphics Well first of all you re working strictly with pixels no messy dpi dots per inch or pi lines per inch which are typical printing terms Figure 1 1 shows the dialog box that appears when you choose File Open to open a vector graphic from Illustrator The dialog box offers conversion choices but emphasizes pixel dimensions Vector File Options eax Scale 100 f Width 612 Pixels z Height 792 Pixels Resokition 72 PixelsfInch a Arti alias 7 Paths TV Text Smooth File conversion pen a page Artboard 1 Remember layers X _ Include invisible layers Include background layers Render as images Groups over 1 objects Blends over 1 objects Tiled fils over When you re working with Web images you should know the approximate width in pixels of your final page Typical Web pages range from 650 to 1 000 pixels wide but most designers stick with a page built to span approxi mately 800 pixels When you create images you must think about how they will fit with
7. ngs You can find out more about those set tings in Chapter 5 of this minibook 2 Up offers the opportunity to see an image in two windows with differ ent settings applied in each one Most users tend to compare the origi nal and optimized images in this view see Figure 1 2 Views T 1 J Onga Preview T2u EJ4 Up Page 1 Book VIII Chapter 1 Figure 1 2 Compare a the original S left and S optimized oF right i 8 images in Orignal Untied HVlear toccumert FL 2 Up view sec wsehtps 5 0K O sec GtEkaps GF Document 868 Working with Basic Selection Tools 4Up is for people who are never quite sure which is the best way to optimize an image You don t necessarily need to compare different for mats when you use this view you can experiment with different options for one format such as pushing the limit with the amount of colors you want to keep in a GIF file as shown in Figure 1 3 J inl E Preview Tp EB Figure 1 3 In 4 Up Oriona Untied Go Geounent FL view ea you can experiment with ways to optimize an image Investigating the panels Not unlike the other CS5 applications Fireworks lets you detach panels from the docking area on the right side of the workspace Because this procedure is so similar to the methods you use to dock and undock panels in other CS5 gore applications we don t bore you with the details here es If you can t locate a
Download Pdf Manuals
Related Search