Art.103 Two-Dimensional Design

Examples

Art.103 Two-Dimensional Design

Shape Motif: Unity and Variety, interactive

In this assignment you will work with pattern to create unity, and variation of shape orientation--as well as user interactivity--to create variety.

Creating GIFs
To begin, open a Photoshop file 270 pixels by 270 pixels, resolution 72, RGB, white background. Under Photoshop, go to Preferences, Units and rulers, and choose pixels for your ruler unit of measure.

At 300% magnification, place rulers at 90 pixels and 180 pixels in both directions.

Open your FreeHand File and copy your shape. Paste in Photoshop. (Choose paste as pixels.) Holding the shift key down, size to fit the middle box. Then use the move tool (upper right) to move to the upper left. (Click place when prompted.) While the move tool is selected, make sure Auto Select Layer is turned on at the top left of the Photoshop menu.

Duplicate your layer using the menu under the arrow at the top right of the layer palette. Move the new shape to the upper right hand box. Duplicate the layer again and move to the lower right hand box. Duplicate the layer again and move to the lower left hand box. Duplicate the layer again and move to the top center box.

Under Edit/Transform, rotate this new shape 90 degrees CW or CCW depending on your design. Duplicate the layer and move the new shape into the center box. Under Edit/Transform, rotate this new shape 90 degrees CW or CCW depending on your design. Duplicate this layer and move the new shape into the middle left hand box. Rotate this new shape 90 degrees CW or CCW depending on your design.

Duplicate the top middle shape layer and move the new shape into the bottom middle box. Duplicate the left middle shape and move the new shape into the right middle box. You have now duplicated your original 3 x 3 grid.

Choose Save for Web (under File). Choose two or four up in the Save for Web dialog box. Select GIF, Adaptive, No Dither, 16 colors. Click the Save button and then choose A NEW FOLDER titled "images" . Save the file as rotate1.gif.

Return to your file. Flatten your image (under the arrow in the Layer palette). Under Image/Adjustment. Choose invert. Save for Web as before as rotate1i.gif.

Return to your file. Choose Step Backward to return to your black on white image. Under Image, choose Rotate Canvas 90 CW. Save for Web the same as before as rotate2.gif. Under Image/Adjustment. Choose invert. Save for Web as before as rotate2i.gif.

Repeat the same process to rotate, invert, and save for web two more times. When you are finished you should have four rotations of both your black on white and white on black images saved using a naming convention of rotate1, rotate1i, rotate2, rotate2i, rotate3, rotate3i, rotate4, and rotate4i.

Creating a Web Page

Before creating a Dreamweaver site, create a folder on your flash drive called website (all web folders are lowercase with no spaces, no punctuation). Inside this folder, create another folder called motif. Then begin by opening Dreamweaver and choosing Site/New Site. Choose your website folder and follow the instructions Starla will give you in class for setting up your website directory. Keep only the files for your website in this folder. Store all files that you use to create files for your website in another working folder. ALWAYS open your Dreamweaver folders from the site window: open Dreamweaver, go to Site, choose open site, select your site, double click on the icon of the file you wish to open.

Choose File/New and select basic page/HTML and click Create. At the top of the page, type your name where it says title.

Under Insert, choose Table. In the dialog box, choose 2 rows, 3 columns and 810 pixels. Cell padding, cell spacing and border should all be 0. Save your file as static1.html in your motif folder.

To create a static version of your final design, place your cursor in the first cell, click and choose Insert Image. Browse to find the right gif and select choose. Click in the second cell and choose Insert Image. Browse to find the second gif and select choose. Continue on until your design is complete. Save your file as static1.html. Create a second static image of your second favorite design and call it static2.html.

Finally, create number of interactive designs. Name these pieces motif.html, motif1.html, etc. In the first cell, click and choose Insert/Interactive Image/Rollover Image. Click on the folder icon next to original image to browse to the GIF that you want the viewer to see when they come to the page. Then click on the folder icon next to the rollover image and browse to the GIF that you want the viewer to see when they rollover the first image. Continue to do the same in the remaining cells. Preview your image under File/Preview in Browser.

Move your files to the web. Turn in a CD titled with your name containing your folder and all its files. Write the name of the interactive file you want me to grade on the outside of the CD.