Career Portals in Communications and Media Arts
I have decided to feature some of my assignments for some of my classes in my blog. So today I am going to post one from my "Media Arts" class.
Make an Animated GIF Turkey in Fireworks cs6
1.
I will create a new document by choosing File > New. I'll make the width and height 400 x 400 pixels, and the resolution 72 pixels per inch. I'll choose white for the canvas color, and click OK.Next, I'll choose File > Save, name the file turkey with a png extension, choose where I want to save it, and click Save.
2.
I'll choose the Ellipse tool in the Tools panel, which can be found by clicking on the small arrow next to the Rectangle tool or other visible shape tool.
In the properties panel I will click on the Stroke color box and choose black, then on the Fill color box and choose a brown swatch or type in the Hex number value field, #8C4600.
In the Properties panel I will also make the stroke width 2 pixels.
While holding down the shift key, I'll click and drag to create a large circle. Using the shift assures that the circle will be perfectly round.
3.
Again, I will hold down the shift key as I draw another circle, only I want this circle to be smaller than the last.
With the Pointer tool, I will click and drag the the small circle into place. I want it to overlap the top of the large circle, as shown.
4.
With the Rounded Rectangle tool, I will draw a rectangle. With the Pointer tool, I'll move it into place. I want it to be centered and slightly overlap the bottom of the small circle.
5.
I will hold down the shift key as I click on the small circle then the rounded rectangle. This will select both shapes. I'll then choose Modify, Combine Paths > Union.
6.
In the Tools panel, I will click on the Fill box and choose a cream swatch, or type #FFCC99 in the Hex value field, then press return.
7.
I could draw two small circles to make the eyes, but instead I will use the Type tool for this. I'll click on the Type tool in the Tools panel, then on the canvas. In the Property inspector, I'll choose Alegrean Regular for the font, make the size 72, and change the color to black. I’ll push the period key on my keyboard and press the space bar before making another period. If the size doesn’t look right I’ll highlight the text and change the size until I get it how I want it.
8.
In the Tools panel, I'll click on the Polygon shape tool. In the Properties panel, I'll choose an orange swatch for the fill or type #FF9933 in the Hex value field. Also in the Properties panel, I'll make the stroke black with a width of 1.
Next, I will choose Window > Auto Shape Properties. I'll click on the polygon shape, indicate that I want both the points and sides to be 3 and the rotation 180 degrees. To make the triangle smaller, I will type 20 in the Outer Radius value field. The number for this depends on how large the triangle was to begin with. I'll then press enter.
With the Pointer tool, I will click on the triangle and drag it to where I think it should sit for the beak.
9.
The red thing that hangs from a turkey's beak is called a Snood. To make one, I will use the Pen tool.
After selecting the Pen tool in the Tools panel, I will click on the Fill box and choose a red swatch, or type #FF0000 in the Hex value field, then press return.
With the Pen tool, I will click to create points that form a path, and sometimes click and drag to create a rounded path. When the last point connects with the first, I will have formed a shape that looks like a turkey's snood.
10.
I can set the Fill color to the same Orange as the beak by clicking on the Fill box then on the beak. With the Pen tool selected, I'll make the stroke color black and set the stroke width to 2 in the Properties panel.
Next, I will use the Pen tool to create points that form a shape that resembles a turkey's leg. With the shape selected, I'll choose Edit > Duplicate. I'll then choose Modify > Transform > Flip Horizontal. With the Pointer tool, I'll position the legs where they look best.
11.
I will choose Select > Select All. I'll then click on the Scale tool in the Tools panel. A bounding box will appear with handles that can be moved inward or outward. I'll click on a corner handle and move it inward, making the whole smaller, then press return.
With all of my shapes still selected, I'll use the Pointer tool to move the turkey into place. I want it centered low on the canvas.
12.
With the Ellipse tool, I will click and drag to form a long oval. I'll then choose Edit > Duplicate. I'll duplicate the oval again and again, until I have a total of five ovals.
13.
With one of the ovals selected, I will click on the Fill box and choose a different color. I'll do this with three more ovals, choosing a different color for each.
14.
With the Pointer tool, I will click and drag over the five ovals to select them all. I'll then choose Modify > Arrange > Send to Back. This will cause the tail feathers to fall behind the turkey when I move them into place.
I will click away from the ovals to deselect them, then click on one oval at a time and drag them separately to where they will sit next to each other and partially behind the turkey.
Using Smart Guides can help to evenly position the ovals that are opposite each other. If you don't see the smart guides at work, choose View > Smart Guides > Show Smart Guides.
15.
I want to rotate the ovals and reposition them. To do so, I will select one and choose, Modify > Transform > Free Transform. I'll then click and drag my cursor just outside the bounding box in order to slightly rotate the oval. With the Pointer tool, I'll position the oval to where I think it looks best.
I will rotate the remaining ovals in the same way, and position them into place; distributing them evenly.
16.
looking at my image, I see that the turkey is too low on the canvas, so I will choose Select > Select All, then use the Pointer tool to place the turkey in the center of the canvas. When I'm happy with how it looks, I'll choose File > Save.
Next, I will click on a tail feather to select it then on the Fill box and choose a different color. I'll do this for each tail feather, then choose File > Save As. I'll rename the file, turkey2 with a png extension, and click Save.
17.
I'll choose File > Open, navigate to my turkey.png file and click Open. I'll click on on the turkey.png tab at top, and choose Select > Select All. I'll then choose Modify > Symbol> Convert to Symbol. I'll name it symbol 1, choose Graphic for the Type, then click OK.
I will click on the turkey2.png tab and do the same, only I'll name this one symbol 2.
18.
I will click back on the turkey.png tab. If my States panel isn't visible, I can choose Window > States. At the bottom of the States panel, I'll click on the New Duplicate States button.
When I click on the first state to select it, I see that it holds a symbol. When I click on the second state, I see that it's empty. To add a symbol to this empty state, I'll choose File > Import > navigate to my turkey2.png file, click Open, then Open again. I'll then click on the upper right corner of the canvas to place the file in the correct position. Now, when I click between the first and second states, I see that both hold images. I can also press the Play/Stop button at the bottom of the window to preview the animation.
If I don't like the speed of the animation, I can double-click on the numbers to the right of each state to make adjustments. The higher the number the longer the duration time.
19.
I'll choose File > Save As, rename the file, choose Animated GIF (*.gif), then click Save.
To open and play the Animation GIF in my browser, I will launch my browser and choose File > Open or Open File. I'll navigate to my saved Animated GIF file, choose it, click Open, and enjoy the animation.
I hope you enjoyed the lesson as much as my students did. I will try to post a couple different lessons a week from my different classes.
Make an Animated GIF Turkey in Fireworks cs6
1.
I will create a new document by choosing File > New. I'll make the width and height 400 x 400 pixels, and the resolution 72 pixels per inch. I'll choose white for the canvas color, and click OK.Next, I'll choose File > Save, name the file turkey with a png extension, choose where I want to save it, and click Save.
2.
I'll choose the Ellipse tool in the Tools panel, which can be found by clicking on the small arrow next to the Rectangle tool or other visible shape tool.
In the properties panel I will click on the Stroke color box and choose black, then on the Fill color box and choose a brown swatch or type in the Hex number value field, #8C4600.
In the Properties panel I will also make the stroke width 2 pixels.
While holding down the shift key, I'll click and drag to create a large circle. Using the shift assures that the circle will be perfectly round.
3.
Again, I will hold down the shift key as I draw another circle, only I want this circle to be smaller than the last.
With the Pointer tool, I will click and drag the the small circle into place. I want it to overlap the top of the large circle, as shown.
4.
With the Rounded Rectangle tool, I will draw a rectangle. With the Pointer tool, I'll move it into place. I want it to be centered and slightly overlap the bottom of the small circle.
5.
I will hold down the shift key as I click on the small circle then the rounded rectangle. This will select both shapes. I'll then choose Modify, Combine Paths > Union.
6.
In the Tools panel, I will click on the Fill box and choose a cream swatch, or type #FFCC99 in the Hex value field, then press return.
7.
I could draw two small circles to make the eyes, but instead I will use the Type tool for this. I'll click on the Type tool in the Tools panel, then on the canvas. In the Property inspector, I'll choose Alegrean Regular for the font, make the size 72, and change the color to black. I’ll push the period key on my keyboard and press the space bar before making another period. If the size doesn’t look right I’ll highlight the text and change the size until I get it how I want it.
8.
In the Tools panel, I'll click on the Polygon shape tool. In the Properties panel, I'll choose an orange swatch for the fill or type #FF9933 in the Hex value field. Also in the Properties panel, I'll make the stroke black with a width of 1.
Next, I will choose Window > Auto Shape Properties. I'll click on the polygon shape, indicate that I want both the points and sides to be 3 and the rotation 180 degrees. To make the triangle smaller, I will type 20 in the Outer Radius value field. The number for this depends on how large the triangle was to begin with. I'll then press enter.
With the Pointer tool, I will click on the triangle and drag it to where I think it should sit for the beak.
9.
The red thing that hangs from a turkey's beak is called a Snood. To make one, I will use the Pen tool.
After selecting the Pen tool in the Tools panel, I will click on the Fill box and choose a red swatch, or type #FF0000 in the Hex value field, then press return.
With the Pen tool, I will click to create points that form a path, and sometimes click and drag to create a rounded path. When the last point connects with the first, I will have formed a shape that looks like a turkey's snood.
10.
I can set the Fill color to the same Orange as the beak by clicking on the Fill box then on the beak. With the Pen tool selected, I'll make the stroke color black and set the stroke width to 2 in the Properties panel.
Next, I will use the Pen tool to create points that form a shape that resembles a turkey's leg. With the shape selected, I'll choose Edit > Duplicate. I'll then choose Modify > Transform > Flip Horizontal. With the Pointer tool, I'll position the legs where they look best.
11.
I will choose Select > Select All. I'll then click on the Scale tool in the Tools panel. A bounding box will appear with handles that can be moved inward or outward. I'll click on a corner handle and move it inward, making the whole smaller, then press return.
With all of my shapes still selected, I'll use the Pointer tool to move the turkey into place. I want it centered low on the canvas.
12.
With the Ellipse tool, I will click and drag to form a long oval. I'll then choose Edit > Duplicate. I'll duplicate the oval again and again, until I have a total of five ovals.
13.
With one of the ovals selected, I will click on the Fill box and choose a different color. I'll do this with three more ovals, choosing a different color for each.
14.
With the Pointer tool, I will click and drag over the five ovals to select them all. I'll then choose Modify > Arrange > Send to Back. This will cause the tail feathers to fall behind the turkey when I move them into place.
I will click away from the ovals to deselect them, then click on one oval at a time and drag them separately to where they will sit next to each other and partially behind the turkey.
Using Smart Guides can help to evenly position the ovals that are opposite each other. If you don't see the smart guides at work, choose View > Smart Guides > Show Smart Guides.
15.
I want to rotate the ovals and reposition them. To do so, I will select one and choose, Modify > Transform > Free Transform. I'll then click and drag my cursor just outside the bounding box in order to slightly rotate the oval. With the Pointer tool, I'll position the oval to where I think it looks best.
I will rotate the remaining ovals in the same way, and position them into place; distributing them evenly.
16.
looking at my image, I see that the turkey is too low on the canvas, so I will choose Select > Select All, then use the Pointer tool to place the turkey in the center of the canvas. When I'm happy with how it looks, I'll choose File > Save.
Next, I will click on a tail feather to select it then on the Fill box and choose a different color. I'll do this for each tail feather, then choose File > Save As. I'll rename the file, turkey2 with a png extension, and click Save.
17.
I'll choose File > Open, navigate to my turkey.png file and click Open. I'll click on on the turkey.png tab at top, and choose Select > Select All. I'll then choose Modify > Symbol> Convert to Symbol. I'll name it symbol 1, choose Graphic for the Type, then click OK.
I will click on the turkey2.png tab and do the same, only I'll name this one symbol 2.
18.
I will click back on the turkey.png tab. If my States panel isn't visible, I can choose Window > States. At the bottom of the States panel, I'll click on the New Duplicate States button.
When I click on the first state to select it, I see that it holds a symbol. When I click on the second state, I see that it's empty. To add a symbol to this empty state, I'll choose File > Import > navigate to my turkey2.png file, click Open, then Open again. I'll then click on the upper right corner of the canvas to place the file in the correct position. Now, when I click between the first and second states, I see that both hold images. I can also press the Play/Stop button at the bottom of the window to preview the animation.
If I don't like the speed of the animation, I can double-click on the numbers to the right of each state to make adjustments. The higher the number the longer the duration time.
19.
I'll choose File > Save As, rename the file, choose Animated GIF (*.gif), then click Save.
To open and play the Animation GIF in my browser, I will launch my browser and choose File > Open or Open File. I'll navigate to my saved Animated GIF file, choose it, click Open, and enjoy the animation.
I hope you enjoyed the lesson as much as my students did. I will try to post a couple different lessons a week from my different classes.
Comments
Post a Comment