Wiley Adobe Creative Suite 4 Design Premium All-in-One For Dummies
Contents
1. 7S Spomedly ur nponuj 798 Jumping Right into the Interface Table 1 1 continued Icon Tool Purpose Keyboard Shortcut Bitmap tools Blur Blurs image R w i Rubber Clones image data S wD Stamp Vector tools Line Creates vector lines N A Pen Creates Bezier paths P Rectangle Creates vector U Lal shapes T Type Creates text T r Freeform Creates freeform 0 paths J Knife Cuts paths Y Web tools gt Rectangle Creates image map J Bo Hotspot hotspots Slice Creates slices for K P4 tables or CSS Hide Slices Hides slices and 2 and Hotspots image map hotspots ai Show Slices Displays slices and 2 and Hotspots image map hotspots Jumping Right into the Interface 799 Icon Tool Purpose Keyboard Shortcut Color tools J Eyedropper Samples color D Paint Bucket Fills color G View tools iit Hand Pans the artboard imal 7 Zoom Zooms 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 settings You find out more about those settings in C2. 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 This double arrow indicates that you will clone copy the selection when you click and drag it Book VIII Chapter 1 7S Spomedly Hursnposu 802 Jumping Right into the Interface Making a selection in a vector image With 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 Figure 1 5 The Pointer tool lets you move a vector shape Use the Subselection tool to move the individual points on the path
3. Chapter 1 Introducing Fireworks CS4 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 With Fireworks you have the freedom to create test Web sites experiment with advanced scripting features 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 graphics in Fireworks right away Why Use Fireworks With 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 a low fidelity mock up page schematic rough draft In Web design wireframes are basic visual guides used to suggest the layout and placement of funda mental design elements With Fireworks you can work intuitively by taking advantage of the logi cal interface This interface provides panels and features that re
4. a panel choose its name from the Window menu ar Figure 1 4 Draga selection to move it Jumping Right into the Interface 801 Working with basic selection tools You can work in Fireworks using the same selection tools for both vector and bitmap images Making a selection with the Marquee and Lasso tools If you are familiar with Photoshop selection techniques you will have no problem using the same tools in Fireworks To make a selection with the Marquee tool simply select the tool from the Tools panel and then click and drag to surround the area that you want to select You can add to the selection by holding down the Shift key and dragging another marquee region or deselect some of the active selection by hold ing down the Alt Windows or Option Mac key while dragging with the Marquee tool To use the Lasso tool select the Lasso tool from the Tools panel and click and drag to create a path that will then become your selection As men tioned in the Marquee tool 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 or Lasso tool and then clicking and dragging with the Pointer tool you can move one part of an
5. e that s 1 200 pixels wide would force the viewer to scroll to see the entire image Touring the workspace Upon launching Fireworks CS4 you notice right away that its workspace is similar to the workspaces in the other CS4 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 very much like the tools you may already be familiar with from working in other CS4 applications Using the tools Jumping Right into the Interface 197 The Tools panel is broken into six categories Select Bitmap Vector Web Colors and View Table 1 1 lists the tools by category and the keys you can press to access them easily Table 1 1 Fireworks Tools Icon Tool Purpose Keyboard Shortcut Selection tools Pointer Selects paths and V 0 objects Subselection Adjusts paths much A 1 like the Direct Select tool in Illustrator and Photoshop Scale Scales objects or Q R S selections Crop Crops images C Bitmap tools T Marquee Makes rectangular M coe selections Lasso Makes freeform L ai selections xe Magic Wand Selects similar W colors Brush Paints on image B toggles f with Pencil Pencil Draws bitmap paths B toggles A with Brush Eraser Erases bitmap data E F continued Book VIII Chapter 1
6. hapter 5 of this minibook 2 Up offers the opportunity to see your image in two windows with dif ferent settings applied in each window Most users tend to compare the original and optimized images in this view see Figure 1 2 4 Up is for those who are never quite sure which is the best way to opti mize an image You don t necessarily need to compare different formats 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 as shown in Figure 1 3 Book VIII Chapter 1 7S Spomedly Hursnposu 800 Jumping Right into the Interface AGL Aquent finalwtexlai x P Original ED Preiew 2 Up Dtp AGI FE AGI Figure 1 2 Compare original Aghe ent Graphics Instit te Aquent Graphics Instihite left and optimized image right in 2 Up view Sn LASK helmet png X P Onginal E Previews D2Up Eup D Paget Ist Figure 1 3 In 4 Up view you can experiment with ways to optimize an mags a e EF caman f1 45 6K Web 216 17 78 Adaptive Investigating the panels Not unlike the other CS4 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 CS4 gore applications we won t bore you with the details here es If you can t locate
7. late to the Web and that offer you the easiest way to optimize make Web ready your graphics 796 Jumping Right into the Interface Jumping Right into the Interface Figure 1 1 Pixel dimensions play an important role in Fireworks So what s the big deal about Fireworks being built specifically for Web graphics Well first of all you are working strictly with pixels no messy dpi dots per inch or lpi 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 es sale 100 Width 303 Pixels X Height 142 Pixels X Resolution 72 PixelsfInch X drti alas V Paths v Text Smooth Zi File conversion g Page Remember layers X Include invisible layers Inchudk jour Render as images v Groups over 30 objects 4 Tiled fils over 30 objects OK j Cancel When you re working with Web images it s a good idea to know the approxi mate width in pixels of your final page Typical Web pages range all the way from 650 to 1 000 pixels wide but most designers stick with a page built to span approximately 800 pixels When you create images you must think about how they will fit within the context of your total page An image 600 pixels wide would take up most of your page whereas on
Download Pdf Manuals
Related Search