 |
|||||||||||||||
|
Fireworks for the Web
Here is a quick overview of how we can use Macromedia Fireworks for the web. Overview Window Below you will see the overview for Fireworks. You will notice the toolbar on the left hand side. There are 2 palettes your might not be familiar with. The layers (1.) and the Properties palette (2). We will talk about both these items later on in the handout.
Text and the Properties Palette In the graphic below I have used the text tool (1.) to type in some text (2.). A nice feature with Fireworks is that The text will automatically have an outline color based on my color selections in the toolbar. The properties palette (3.) will change based on whatever tool I am using. You will notice because I typed in some text, the text properties dialog box is showing. This is the dialog box where I can change the font, style, Width, spacing, etc.
Another neat this I can do is change the effect. You will see on the right hand side of the text properties box two buttons to add and remove effects. When you click the + button, you will get the pop up menu shown below. This will allow me to further enhance my text with options such as bevelling, drop shadow and more
Layers Layer is a key component to any high end graphic program. You will see in the graphic below me that I have two items a path and a text box. These two items are on separate layers, meaning, I can move them separately of each other. If I don't like one item I can delete it and the other item will not be affected. Your layer options are located on the right hand side. You will notice in the graphic below I have a folder called Layer 1. Fireworks likes to group your layers in folders. Anytime you draw or type it will create new layers for you. If you want to create a new layer folder, simply click on the new layer button. If you squint you can see the new layer option at the bottom of the layer palette. As you work new layers will be added to whatever the selected layer folder is. You will also notice you have eyeballs on each layer and layer folder. This will either hide (no eye) or show the layer. This is a nice feature if you want to see how something would look with or without a particular item Layers also display on the page in the order the are in on the layers palette. Meaning, in this example, The text is in front of the path. If I wanted to change this, I would simply click on the path layer and drag it up above the text layer. The sample applies for the layer folders themselves. I can click and drag a layer folder and move it above or below another layer folder.
The Styles Palette The Styles Palette (1.) Lets me apply even more styles to my text. All I have to do is make sure I have the text I want to change selected and choose a style from the styles palette. I can keep clicking on other styles and it will replace the old one and show me the new style.
Putting Text on a Path A neat feature in Fireworks is to put text on a path. Here is the step by step way to do it - Make two layers with a layer folder. One layer will be the text (1.) the other layer will be the path using the pen tool (2.) - Select both of the layers but holding down the shift key and clicking on both layers - With both layers selected, go to the Text menu and select Attach to Path. The text and path will now become one and the text will move along the path. - You can alter the text even more by changing the text offset in the Text Properties palette
When you select the Export Wizard the following window will appear. This is where you can further compress you colors (1), take a look at a before and after compression example (3) and change the matte color (2). When you are happy with the look of your text, click export and your image will be saved as a .gif
Working with photographs We will now take a look at some common uses for Fireworks and digital photos. Image size can be one of the most confusing things for digital camera users. While the concept makes sense, there is a hidden gotcha. Most digital cameras take their pictures at 72dpi. The reason for this is the file size is small and a web browser can load 72dpi images quickly and prefers 72dpi images. However, if you wanted to print this image out on a printer. It would look like junk. The reason is your printer is looking for a 300dpi picture. 300 dpi is the optimal setting to print out pictures and have them look good. So when you save the size of an image, think about where it is going. If it is going to the web, then reduces the image size at 72dpi and you will be fine. If you are sending this to a printer, don't change the image size until you change the resolution. To change the re sol out ion of your photograph. Select Modify - Canvas - Image Size. In the dialog box you will see a listing for resolution Before you change this option, make sure you uncheck Resample Image (2). Once you uncheck this then you can put 300 in for the resolution You will notice it shrinks the size of your image. This is why you want to take digital pictures at the largest size possible if you know or even think you will want to print them out. You can change the size of the image once you have it at the resolution you want (1). When you change the image size, move the pixels down a small amount click on and let the image redraw. Select the Image Size dialog box again and remove another amount of pixels. You want to do a small amount each time until you get the image down to the size you want.
Changing Levels Many digital pictures appear too dark or light. A common fix most of us try is to change the images brightness. This really does not help because it will leave the image looking pink. The best way to fix these problems is with the Levels. Filters - Adjust Color - Levels will bring up the dialog box shown below. This is a graph of colors used in the image. You will notice in this graph the image is missing a lot of information on the right side. This is making the image dark. If the information was missing on the left side, the image would be too light. To clean up the image take a the corresponding triangle and drag it to remove the blank area of the graph as shown below. You will not believe the difference.
Saving a Digital Photo The Export Wizard mentioned earlier in the handout for saving gif images is the same one you will use to save your photos as jpeg. The dialog box looks the same except your options to compress are for a jpeg (1). Instead of colors to reduce you have a percentage of image quality to change. The usual percentage that is used on the web is 60%. You will notice there is a popup to save different types of jpeg quality. This will just change the quality level on the left hand side.
Animation is Fireworks is not as straightforward as I would like it to be, so, I will try my best to explain it. Basically you should make a new layer for each item you want to animate. For example, if I wanted a ball to go across the screen I would make a new layer folder and add to it layers that is a ball moving from one part of the screen to the other. What makes the Animation happen is a palette called frames. If the item is not on a frame, it is not animated. To place the layers on frames you need to select the layers, click on the frame pop-up menu (the menu is showing) and select distribute to frames. Once you do that each of the layers you made will be placed on their own individual frames. Because the layers all have the ball in different locations it will look like they are animated. To play your animation, click the play button. You will see it at the bottom on the graphic (3).
|
|||||||||||||||
|
|||||||||||||||
