revJournal - Revolution Tutorials

Using Imported Images in Your Stack

by Sandy Beadle
13 August, 2005

Images are a rich and powerful way to communicate and to enhance your work. They can add information, interest and excitement to your stacks, and help users navigate and find common themes. You might want to add your logo to a stack, make an album of pictures, add special type, or use an image as a background. With the availability of clipart, digital cameras, and Photoshop and other image-generating software, you have a variety of images from which to choose.

We will discuss three of the many ways to use imported images in Runtime Revolution stacks.

Start by preparing your images.

1. First, find or create the images you want.
   
   
2. To keep your stack small, resize the image in your graphics editor to about screen size and resolution, for example, no larger than 1200x800 pixels at 72 or 96 dpi.
   
   
3. If possible, save the images in JPG or PNG format, as these seem to be the most stable and reliable. Revolution designer Scott Rossi recommends PNG format for its versatility.
   

A sample stack and a folder with the images used in this tutorial can be downloaded here:

importing-images.zip 432k

1. To Display Your Images in a Stack

1. Open your stack or make a new one.
   (You can use the stack mrybegin.rev in the sample files linked above)
   
   
2. To import the image, go under “File”
   
3. Choose “Import as Control”
   
   
4. Choose “Image File”
   
   
5. Select the JPG or PNG you want to import.
   (You can use the image bird.jpg)
   This will bring your image into Rev.
   Here's an example of how the imported image looks:
   
   
   
   
6. Move the imported image where you want it on the page, resize it if you want, or move it to another layer.
   
   
7. Then in the Inspector, scroll down from “Basic Properties” to “Size and Position”
   
   
8. Click “Lock size and position.” This locks the resizing you have done.

Once you have locked the size and position of an image, it will remain resized the way you have set it, but you can still move it with the arrow keys even while locked. You can unlock it if you need to resize it, but make sure to lock it again right away, because even going to another card will let it revert to its original size.

2. Place an image of text

Regular text tends to change to some degree in width or height as fonts are substituted on different platforms. In most cases, allowing a little extra margin room in text fields can deal with this issue, but you may want to fix a particular piece of text that needs to be unchanging, such as a title, as an image file.

Or perhaps you have created special text in an image editor, used an exotic font with kerning, or styled text that you want to keep absolutely fixed across platforms.

Import the your text image as noted in section 1:

1. Save your text image as a JPG or PNG, and open your stack.
   
   
2. To import the image, go under “File”
   
   
3. Choose “Import as Control”
   
   
4. Choose “Image File”
   (You can use the image type.jpg)
5. Select the JPG or PNG you want to import.
   Here's an example of how the imported image looks:
   
   
   
   
6. Move, resize, or re-layer the image.
   
   
7. Lock the size and position
   Here's how the imported images look together:
   
   

3. Use images as a background picture or textures

Background pictures can be used to indicate similarities of topic, add interest to a page, or help set the tone of a stack.

You can use an image as a background picture for a whole card, or within one field. You can screen back your original image, or import a picture of a texture and use that.

1. Import your image and resize it as before
   (You can use the image sand.jpg)
   Here's how the imported image looks:
   
   
   
   
2. Select the “Send to Back” arrow
   
   
3. Lock the size and position.

Let’s say you like your background image, but it’s too obtrusive or vivid. Or you want to use an image in the foreground, and then have an echo of it in the background. Fortunately, Rev has an easy way to mute an image:

1. Select the image you want to subdue, go to the inspector under “Basic Properties”
   
   
2. Click “Blend”
   
   
3. And move the slider for the desired effect.
   Here's how the screened-back image looks:
   
   

Images can take on a very different character using this effect, with some very nice results.

Once you have tried these simple ways of using images, you can easily move on and experiment with your own ideas.

If you’d like to see impressive examples of using images in Runtime Revolution, see the work of Scott Rossi at http://www.tactilemedia.com and Chipp Walters at http://www.altuit.com