Fireworks for Graphics and Images

Transcription

1 Fireworks for Graphics and Images Joan Weeks SLIS Computer Labs Mgr. October 2009

2 Fireworks for Banners and Images Fireworks is a web developer s tool to make banners and graphics, as well as format images for web pages. Images for the web must have a particular file format and size to be viewed in most browsers such as Internet Explorer and Netscape. A. File formats The two file formats that work well on the web are Gif (Graphics Interchange Format) and JPEG (Joint Photographic Experts Group). Here is a table giving details of the characteristics and uses of each format. GIF Use for logos and graphics Support animation Support 256 web colors Save as: filename.gif JPEG Use for full color photos Does not support animation Supports 16.7 million colors in photos Save as: filename.jpg B. Saving files in Fireworks In Fireworks, if you select File>>Save your image may be saved as a PNG (Portable Networks Graphic) which will not display on the web. To avoid this problem and save the file as a.gif or.jpg, select File>>Save as, then in the Save as type window use the drop down menu to choose your format. 2

3 C. Accessing Fireworks 1. Go to Start>>All Programs>>Adobe Web Premium CS4>>Adobe Fireworks CS4 2. The work area in Fireworks is called a canvas. We will open a new canvas by clicking on File and New on the top menu bar. This will open a window where we can set the dimensions and color of our canvas. You can make your banner the same color as your web page or a contrasting color. You may even want to have the banner background be transparent. A standard web page size is 800 pixels wide X 600 pixels in length so we will make this banner 800W X 100 H to fit across the top of the web page. 3

4 D. Working with Panels The Fireworks interface window opens with a main pane on which to work and several smaller panels around the screen which will provide you with tools to create and work with images.. Left click and hold on the gray bar to move the panel around 4

5 You can dock and undock the panels this way. When you want to return the panel to the side slide the gray bar over the bar of another panel until it turns dark gray then let go of the mouse button. If you close a panel, you can reopen it by going to Window on the menu bar and clicking on the appropriate link. Exercise: opening and closing panels Open the Layers panel. Click on Window>>Layers The Layers panel should appear. Click on Window>>Layers and the window should close. The most useful panels are: 1. Tools panel add fill colors, text, lines, erase, clone your image. 2. Colors panel select and change colors in your image. 3. Properties panel - select special effects for your image, such as feathering, or drop shadows. E. Making Banners Banners are used to introduce a website s pages with a very professional touch. The SLIS website uses the School of Library and Information Science banner. 5

6 This banner is a graphic that can be inserted at the top of all pages for a particular website. You may want to change the background to match your site or for contrast as the SLIS banner example. In the Properties panel, click on Canvas and select a color from the palette. You can also create special effects by clicking on the ellipse or other shapes and paint bucket tool. Depending on the tool selected the Properties panel will change and provide options. Try out several options until you find an effect you like. 6

7 7

8 Entering Text This will render a canvas upon which you can add your institution s logo and script. You may click on the text tool on the side toolbar then left click on the canvas and your cursor will change to an I bar. Drag to the opposite lower corner to make a text box. You now may select the font type, color, and size from the Properties panel that will appear at the bottom of your screen. Experiment with different scripts. 8

9 Entering special effect 1. For special effects you can add drop shadows or emboss the text. First select the white arrow. 2. Click on the Filters + area on the Properties bar. This will open a menu where you can select special effects. Let s bevel our text then add a drop shadow. 3. If you select outer bevel you will open another menu where you can adjust the amount and color of the bevel. Usually 1 or 2 will be enough to give the letters a 3-D effect. 9

10 Please experiment with all the menus until it looks like you want it. For a drop shadow you may select shadow and will open a menu with options Banner with letters beveled and a drop shadow. 4. Saving your banner. Remember, If you click File, Save Fireworks will save your banner as a.png file. This file format will not work well on your web page. Instead click File, Save as. This way you can save your image as a.gif or.jpg. F. Making graphics With Fireworks you can design graphics for logos, icons or animations. You should decide how large your graphic will be and then select an appropriate size for your canvas. You may want to select a canvas 50 pixels wide by 50 pixels high for a logo, but it is hard to see the details. Select 100 pixels wide by 100 pixels high then we will compress the image when we are done. 10

11 Now you can use various drawing tools on the side toolbar for your design. You may want to sketch some designs out on a piece of paper first. G. Cropping Images You should have an image on your flash or hard drive you want to crop. Go to File>>Open and select the image. Perhaps you want to cut out the lower area of the other building in this picture of Marist Hall. 1. Click the selection tool on the toolbar and left click and drag a selection box around the part you want to save. 2. Click on Edit >>Crop document H. Resizing Images Sometimes images are too large to put on web pages. If they are very large, users will spend a long time waiting for the page to load on their computer. An image should be 11

12 not much larger than 400 pixels in height and/or width. 100 pixels equal approx. one inch. You can scale your image in Fireworks. With the image displayed in Fireworks: 1. Select Modify>>Canvas>>Image size 2. A window will open where you can select the width and height of the image. You will want to Constrain Proportions if you don t want to distort the image. Always save a copy of the original image because compressing an image discards data and information about the image. Once an image is compressed, it cannot be enlarged again. I. Using the clone tool. Many images have something in them that you do not want or you may want to add. The clone tool allows you to work with these additions or deletions. 12

13 13 1. Open the Marist image 2. Select the Rubber Stamp tool. 3. Your cursor will change to a circle. 3. Press Alt and click on the area of the image you want to copy and it will change to a + 4. Put the 0 on part to be changed and move the mouse. It will fill in with the part where the + is.