Assignment #2: Interactive Map: Interface Design I and narrative architecture Create an "Interactive Map" that is also a Story. For October 1, create the map interface using complex rollovers that imply two different time layers. Design this interface keeping in mind that each time layer will become a narrative in the second part of the exercise. Your rollovers are icons that are beginning to suggest the directions of these two stories, and the relationship between them. |
||
|
||
IN PHOTOSHOP: Step 1: Before going into Photoshop, find your map images, on the web, from books, from another source. Carefully choose your map images so that you have two different views of a map. These two views might be differentiated by the historical time the maps represent, by different demographic information, or by other types of information that sets the two maps apart. Alternatively, you might have a map and find rollover images from non-map sources that provide another layer of information to the original map image. Step 2: In Photoshop, open the image and go into IMAGE>IMAGE SIZE. You should start with a high resolution (150 or higher) OR large pixel dimension sized (700 width or highter) image. In the Image Size dialog, reduce the resolution to 72 while maintaining a pixel dimension of 700 width). Click OK. Save your map image ("Save for Web"). Step 3: Use the selection tool/tools to select particular areas of the original map that will be your rollovers. Go to EDIT>COPY. Then go to FILE>NEW. In the dialog that comes up, type in the name of the selected image fragment. Then Go to EDIT>PASTE, to paste the selection into the blank new file. Save For Web, saving the file into your website files, in the IMAGES folder, in a new folder called ROLLOVERS. Step 4: Repeat this process, but instead select an area from the alternate map or map-related image sources—an area that is equivalent in meaning and size to the rollover image you just created. Step 5: Repeat Steps 3 & 4 for multiple areas of your map (at least 5). Keep in mind that your selections are based on two narratives that will be included in the next part of the assignment. |
||
IN DREAMWEAVER: Step 1: Create the MAP INTERFACE page. Use the pulldown menu in the upper left hand corner of Dreamweaver (just below the Dreamweaver Menu item in the menus) to select Layout Mode, and click the STANDARD button to the right of this Mode menu. Step 2: Select the Table Tool (located in between the Mode Menu and the Standard button). Use a table or tables to lay out your main map image, along with any other formatting you choose. Step 3: Near the Table Tool, select the Layer Tool, using it to draw a layer on the map image to contain your rollover images. Step 4. Click inside the layer you have just created. Go to Insert>Image Objects>Rollover Image, and name the rollover and insert the Original Image (by browsing to the file you created in Photoshop) and the Rollover Image (by also browsing to the rollover file you created in Photoshop). Click OK. Step 5: Repeat Steps 4 & 5 for each rollover included on your map (at least 5).
|
||