| Shape Transformation | |||
| This project is to be completed in two parts | |||
| Part One: | |||
| 1. Select a painting from those available HERE . Click on it to show the large version. Then click and drag the image into your working folder on the desktop. Choose two or three paintings so you have a small collection | |||
| 2. Open Adobe Illustrator. Create a new document from the file menu >new. Choose letter size and verticle format. Choose RGB color mode. Select OK | |||
| 3. Go to file menu and choose >place. Locate the painting in the working folder and select ok. | |||
| 4. Adjust the size of the image by selecting it with the black arrow. Then click and drag one of the corner anchor points to resize it. Be sure to hold down the shift key to constrain the proportions so that the image does not get distorted. | |||
| 5. Open the layers window. Go to Window menu >layers or check to make sure it is not already open. You will see layer one. Click in the littel square just to the left of the layer to lock it. | |||
| 6. Create a new layer by clicking on the new layer icon at the bottom of the layers window. Then select the new layer as the working layer by clicking on it in the list of layers. | |||
| 7. Pick two very different but distinctive shapes from the painting and draw around their contour (this means draw around the outside edge of the shape). Choose a drawing tool, preferably the pen tool, from the tool box which should be on the left side of the desktop. The pen tool draws by placing a line between points. Click down and an anchor point is placed. Click again and another anchor point is place and a line is drawn between points. Continue this way until the shape is drawn. Be sure to close off the shape by clicking back on the starting anchor point. (or hold down the option key when you get close the the end and the shape will be closed off for you. Do not draw any shapes inside your main shape. You should have one continuous line going all the way around the shape. Now draw a second shape from the same painting. | |||
| 8. At the bottom of the tool box is the color placer. Color is added in two ways: the shape can be filled in and the shape can have a colored outline or stroke. Your shapes should be filled but should not have a stroke color. Click on the fill area after selecting your shape with an arrow tool. Then choose a color from the color palette. (if it is not showing, go to window>color.) Then click on the stroke area and select the red strike-through icon just below the color select area in the tool box. | |||
| 9. Choose two disctinctive and recognizable shapes. Use an arrow to select each shape and move them to opposite sides of the document, as far from each other as possible. Make each shape a different color. | |||
| Create a transformation | |||
| 12. Select both shapes by dragging a marquee with the black arrow, across both shapes. They are selected when blue lines and anchor points are showing. | |||
| 13. Double click on the blend tool (10th tool down on right side of tool box). If the spacing says smooth color, change it to specified steps. This creates the number of shapes between the ones you have selected. Click ok. | |||
| 14. With the blend tool click on an anchor point on one shape. Then click on one on the other shape. When you select the second anchor point the blend tool converts the two shapes into a morph from one shape to the other. It creates shape transformations and color transformations. | |||
| 15. To separate the transformation into individual shapes, go to object menu>expand. Both fill and stroke should be selected. | |||
| 16. Then ungroup the parts: go to object menu >ungroup. Before the expand or ungroup will work you want to make sure that what you want to expand or ungroup is selected (blue anchor point and lines showing). | |||
| 17. Next you will create separate layers for each shape. Go to the layer list and click on the little black triangle in the upper right side. A drop down menu appears. Go to and select >release to layers (sequence). In the layer window, select all the new layers (they are inside the original layer). We need to move these new layers so they are outside of the original layer. Select the first new one and then the last new one while holding down the shift key, so all the new layers are selected, but not the originating layer. Then drag the selected layers just above the original layer so that all the new ones are listed above the original one. Then select the original on and delete it by clicking on the garbage can at the bottom of the layer window. | |||
| Save as Photoshop document | |||
| 18. Now export the Illustrator document as a photoshop document by going to file>export. Name the document and change the format to Photoshop (psd). Do not save this into your web page file called 2d. Save to another folder but pay attention to where. Click on the black triangle on the right side to see exactly which folder and where you are saving. | |||
| 19. The next window that opens is important. Make sure the color mode is RGB. Resolution should be Screen (72ppi). Also make sure the write layers button is selected. Click ok. | |||
| Prepare to Animate | |||
| 20. Open Photoshop. Next go to file>open and locate your new transformation document. Open it. | |||
| 21. Open the animation window if it isn't already there. Go to window>animation. | |||
| 22. On the animation window, click the small black triangle on the upper right side for the drop down menu. Select >make frames from layers. You will see new frames open in the animation window. | |||
| 23. Go back to that little triangle and >select all. Then again >copy. Then click on the last frame in the animation window. | |||
| 24. Go to the drop down menu again and choose> paste and paste after the selected from. Then again choose >reverse frames. | |||
| 25. You can watch your animation by clicking on the play button at the bottom of the animation window. Also see there that you can delete frames if you select them and click on the trash can. Or you can add frames if you want to add something or change the order. You can click on frames and move them around to change the order of the animation as well (but not for this project at this time). | |||
| 26. Next go to file> save for the web. See there that the format is GIF. You can also reduce the number of colors since your document probably only has 10 or so colors in it. Make it 64 colors if you want. | |||
| 27. Save the document to your 2d folder for the web. Make sure the name is lower case and one word with no spaces. It must end with the .gif extension. ImageReady automatically adds this. But if you delete it you will have to add it back. Now you are ready to load your animation in dreamweaver for the internet. | |||
| Page Two> Web page creation | |||
![]() |
|||