| |
|
Frame Design Ideas Based on Imitating Others There's a tv program that takes a look at very expensive designer rooms and then figures out how to re-create them using simpler materials at a fraction of the cost. That's sort of the idea that I'm talking about on this page. I don't pretend to be a designer. Instead, I like to look at what great designers do and figure out if I can do something similar. No money is involved but time and level of complexity are dropped dramatically. The people at NASA produce amazing materials. I get lots of ideas from them! Let's take a look at one such re-do. We'll begin by looking at the NASA site that gave me my inspiration: http://www.nasa.gov/externalflash/Anniversary_VisMar/index_noaccess.html The first thing I notice about the site is that it was done using Flash. Secondly, they've used a grid to impact the organization on the frame and they've used colored graphics that when you roll over them, reveal more information, and act as links to other pages. These graphics appear to be in a somewhat random pattern. They've put a faded photo in the background to add a bit more pizazz. A strong border across the top acts as the title bar. If I want anybody to be able to do this, then I'm going to choose something other than Flash. In my case, I'm going to use a simple multimedia program that is focused on web output. It's called eZediaQTI. The topic for my presentation will be the state park known as Atalya in Huntington Beach, South Carolina. There are lots of additional photos at this site and at http://photos. jmadden.org.  Let's begin the designer makeover. . . 1. Begin eZediaQTI. Have a new document frame open. 2. Open up the Attributes Panel by clicking on the icon for Attributes in the top, right-hand corner of the program. 3. I've chosen a photo from my collection for the background. I've brought it into the frame. (Drag it in or click on the picture icon in the toolbar to go and et it.) Make sure the picture covers the entire frame. 4. Looking over at the Attributes Panel, I use the slider bar to change the opacity of the background image. 5. I add my image to the background (Object > Add to Background). The fancy stained glass effect at the top is produced by using the Shape tool, drawing a rectangle, coloring it, converting it to a graphic, and then fading it a bit. 6. Click on Shapes. Choose rectangle. Move into your frame, click, hold, and drag your mouse across to produce the rectangle. It will be white. 7. Look at the Attributes Panel. Click on the Fill box and choose a different color that coordinates with your picture. Click OK. 8. Click on Object > Convert to Picture. Your shape is now a graphic and you can change its opacity level. 9. Look at the Attributes Panel. Find the slider bar again and lower the opacity so you can see your background image through the rectangle. 10. Position the rectangle across the top of your frame. Make sure nothing is visible on the top, left, or right sides of the rectangle. Add it to the background. (Object > Add to Background) Create your title. 11. Click on the Text tool (the "A" in the toolbar.) Type in the title for your project. 12. Highlight your text (just like in a word processor) and click on Format > Fonts > Show Fonts. The font you see in the illustration above is Freehand, Bold Italic, 85 pts. 13. Position your title on your frame. You may need to adjust your font size based on the height of your rectangle. Choose your small navigation graphics. 14. I decided the project would have 3 graphics, staggered on the frame, that were a good bit larger than the ones at NASA. The more graphics you want on a frame to act as navigation, the bigger your frame had better be or the smaller your graphics. (You can see how I used graphics for navigation in a completely different way by clicking here. This was my own idea!) 15. Using basic photo editing software, I resized 3 of the photos from my collection to around 150 pixels in width. I saved them with a new name and then brought them into the frame the same way I did in step 3 and then placed them into position. Making rollovers for the navigation  In the picture above, you'll notice that next to the picture of the flowers, there's a text box that signals the user what they will see when they click on that link. I made the transparent rollovers in QTI. The original photo is on the frame still. I just made a second graphic that has a picture and a text box combined into one that will only appear when someone mouses over it! Creating the rollovers 16. Create a new blank frame or a new document. We're going to use this like an artist's canvas to create something new that we'll bring back into our frame to be the rollover. 17. With a new blank frame in front of you, move back to the frame where you have one of your navigation graphics. Click on it to select it and then copy it - either by doing Edit - Copy or CTRL-C. Move back to your blank frame. Now, paste the picture into the frame. 18. It doesn't matter where this graphic is on the frame as long as you have room to create a text box that will sit beside it. Remember - this is just our scrap area. 19. Create a text box like I did. The one above used an 18 pt. Tahoma font for the "Enjoy the Wildflowers" and a 10 or 12 pt. font for the "Huntington Beach, SC" text. Resize your text box so that it fits in a nice neat rectangle next to the photo. One puzzle might be how far to put the text away from the pictures. The first ones I did were way too close. I found a handy guide built into QTI. Go to Objects > Show icons. When you make the icons visible, you can look at your little text box and see an icon in the upper left-hand corner. I just left the width of the icon between the text box and the edge of the graphic! You can also go to View > Grid > Show Grid if you want to get fancy about placement. 20. You now have both items on the frame in position. Add them to the background. 21. Look at the Attributes Panel. 22. You'll see the square for the document frame now has your little pieces showing in it. Click, hold, and drag FROM that little square BACK into the document frame. Notice that a new graphic has appeared in your frame. This little trick just created your rollover with transparent background! 23. Click on the graphic you've just made (NOT the one you added to the background). Copy the graphic. Move to the title frame for your project and paste it there. 24. Position the graphic with text over top of the plain graphic so that the two pictures are lined up. (This is easy to do if you have your icons turned on. Just use those to guide you.) If layering is a problem, go to Object > Layers and choose the option you need to get your graphics in the right order. 25. Look at the Attributes Panel. Under Appearance, you'll see options for Images - Normal, Over, Pressed. Your graphic is in the Normal box. 26. Click in the Normal box. Do a CTRL-C to copy your image. Now click in the OVER box and do a CTRL-V to paste the image. You should now have the same image in the two places. 27. Click in the Normal box again. This time hit the delete key to remove that second image. 28. Repeat this process for each of your navigation graphics. Giving your transparent rollovers GoTo appeal! We'll use the GoTo object to give navigation power to our rollover graphics. 29. Click on the GoTo object. Move it out of the way and put it near the appropriate rollover. Make sure they don't touch. 30. In the Attributes Panel, change the characteristics for the GoTo object. UNCHECK Visible. Look at the bottom and tell it what frame it is to go to when somebody clicks on the rollover. 31. Now, click on the link tool in the toolbar and then go FROM the rollover object TO the invisible GoTo Object. Let go. You should have a link connecting the two objects. You're done! My working version of this designer frame re-do can be seen by clicking on this link. Remember that only the first frame is operational. I haven't put the GoTo links in place. |