Compositions

In ImageStyler, you create and lay out one or more objects in a document, or composition. The window in which it is displayed is the composition window. Once created, you can export individual objects in the composition in an image file format for placement in a Web page, or export the entire composition in HTML format as a Web page itself.

Objects

Objects are the basic elements you create and work with in ImageStyler compositions. They are the pieces with which you can design and build the graphic elements for a Web page.

There are three kinds of objects in ImageStyler:

• Geometric objects are objects you create with the drawing tools. Circles and rectangles are examples of geometric objects.
• Text objects are text you create using the type tool or import from other documents.
• Image objects are bitmap images and Encapsulated PostScript(R) (EPS) vector images that you import into ImageStyler or create using the Shapes palette or Combine commands.

Shapes

All objects have a shape:

• Geometric objects have a regular shape, and are either rectangles, polygons, or ellipses.
• Text objects are the shape of the individual characters in the text.
• Bitmap images generally have a rectangular shape (unless they have an alpha channel or active matte).
• EPS vector images are the shape in which they were created by the application. For example, an EPS vector image of a flower would be in the shape of that flower.

Layers

An object is made up of one to five layers, with each layer the shape of that object. (Unlike some other graphics programs, such as Adobe Photoshop and Adobe Illustrator, layers in ImageStyler apply to individual objects, not the entire composition.)

When you first create an object, it has just a single layer. You can then add, delete, reorder, and offset layers at any time. For example, the bottom layer can be offset to simulate a shadow for the object.

Layer attributes

Each layer in an object can be filled with a different set of attributes, including color, opacity, gradients, and 3-D and distortion effects. You can even apply an image as a texture to a layer.

By applying different attributes to each layer, you can create a variety of effects and create complex-looking objects. For example, to create a button out of a simple geometric object, you might give it three layers. You could emboss and fill the top layer with a texture. You could make the next layer wider and fill it with a color to give the effect of an outline around the button. And you could offset a third layer and fill it with semitransparent gray to simulate a shadow for the button.

Styles:

You can save the number of layers along with the attributes of each layer as a set, called a style. You can then apply the style to any object to easily change the look of the object without changing its shape. For example, you can apply a style to a text object to give the object several layers, each with a different set of layer attributes. The text object would then have all the attributes of that style.

Editing:

You can apply nearly any modifications to any objects in any order. You can even apply them to multiple objects at the same time. This means you can transform objects by skewing, rotating, and resizing them, regardless of the kind of object it is or the layer attributes currently applied to it. You can also change individual layer attributes or entire styles at any time, regardless of what other transformations you have made to the object.

The ImageStyer file format

Saving a composition in ImageStyler format maintains all objects in the composition, along with their modifications and their attributes, so that you can reedit the objects at any time.

Exporting

ImageStyler objects are intended for display on the Web. To help you with this, ImageStyler provides the most common image export formats and a variety of tools that let you export individual objects from a composition for placement in Web pages.

Depending on your Web page editing program, you can then import these graphics into the Web pages you are creating or maintaining. (With the AutoLayout option, ImageStyler also enables you to export an entire composition as a single Web page with its component graphics.)

In addition, ImageStyler provides features that enable you to create JavaScript rollovers—objects that change as your mouse moves over and clicks them in a Web page. ImageStyler also lets you easily update graphics in existing Web pages. You can even use any font type and layer attributes you can create in ImageStyler to update text headings in a Web page.

Creating and opening ImageStyer files

The New command lets you create a blank, untitled ImageStyler composition. By default, the working area for a new composition is 550 pixels wide by 500 pixels tall, and has a white background. The maximum size is 1024 by 1024 pixels.

• The Open command opens existing ImageStyler files.
• Once opened, you can create, place, import, and modify objects in the composition.
• To create a new ImageStyler composition:
• Choose File > New.

To open an existing ImageStyler file:

• Choose File > Open.
• Select the name of the ImageStyler file you want to open, and click Open. (By default, Windows ImageStyler files end in the extension .ist.)

Changing the size of the composition area

In Adobe ImageStyler, the composition area, also known as the canvas, is the area in which you create and place ImageStyler objects—your work space. It also represents the maximum size of an object you can create, import, or export.

The Canvas Size command lets you increase or decrease the size of the composition area.

To change the size of the composition area:

• Choose Edit > Canvas Size.
• Enter the width and height for the composition area in pixels.
• Click OK.

Saving files

When you save a file, you save it in ImageStyler format. This saves your original artwork so that you can reedit and export it later. To use the graphics or a composition on a Web page, you must export it. See Exporting compositions.

ImageStyler files use the extension .ist on Windows. Naming your Mac OS files with this extension will allow for easier cross-platform work. The Windows and Mac OS ImageStyler file formats are completely compatible.

To save a file in ImageStyler format:

Choose File > Save.

To save a file for the first time:

1. Choose one of the following save commands:

   • File > Save.

   • File > Save As.

2. Enter a filename, and choose a location for the file.
3. Click Save.

To save a file with a different filename:

1. Choose File > Save As.
2. Enter a filename, and choose a location for the file.
3. Click Save.

Printing

Although ImageStyler compositions are intended for use on the Web, you can print compositions as well. Compositions are printed at screen resolution, which for ImageStyler is 72 dots per inch (dpi). Printing a composition at a higher resolution (such as on a 300-dpi printer) will not increase the resolution of the printed output.

The Page Setup dialog box lets you select general printing options. The exact appearance of this dialog box varies with different printers, printer drivers, and operating systems. The main area of the dialog box contains the standard printing options for paper type, printer effects, reduction and enlargement, and orientation.

Most Print dialog boxes provide options for printing the document. As with the Page Setup dialog box, the exact appearance of this dialog box varies depending on the printer, driver, and operating system you are using.

To set up the page size and orientation for printing:

1. Choose File > Page Setup.
2. Choose page options and click OK.

See your printer documentation for more information on these options.

To print the document:

1. Choose File > Print.
2. Choose printing options and click Print.

Using the toolbox

The tools in the toolbox let you select, create, fill, edit, and view objects, as well as choose an object or the background to fill with color or textures. For information on the object and background color controls, see Choosing the foreground (layer) and background color.

When you select most tools, the mouse pointer appears as a cross hair. However, the text tool pointer is an Ibeam, and the pointer for the paint bucket, eyedropper, hand, and zoom tools matches the tool’s icon. Each pointer has a different hotspot, where an effect or action begins.

ImageStyler includes these tools:

To display the toolbox:

• Choose Window > Tools.
• To move the toolbox:
• Drag the toolbox by its title bar.
• To select a tool:
• Click its icon in the toolbox.

To select a tool temporarily, press its shortcut key on the keyboard.

Using palettes

Palettes help you monitor and modify objects. You can display or hide palettes as you work.

By default, palettes appear in stacked groups.The positions of all open palettes are saved by default when you exit the program.

• To show or hide a palette:
• Choose the name of the palette from the Window menu.
• A check mark next to the command’s name indicates that the selected palette is at the front of its group.

Changing the palette display:

You can reorganize your work space using several techniques. To change the palette display:

Do any of the following:

• To display or hide all palettes and the toolbox, press Option+Tab (Mac OS only).
• To display or hide all open palettes (and the toolbox in Mac OS), press Tab.
• To display or hide all open palettes except the toolbox, press Shift+Tab.

Note: (Mac OS only) To use the previous three shortcuts while you are in a palette, press and hold Command in addition to the shortcuts. Otherwise, pressing Tab moves the cursor to the next text box in the palette.

• To make a palette appear at the front of its group, click the palette’s tab.

Click Opacity tab to move it to front.

• To move an entire palette group, drag its title bar.
• To rearrange or separate a palette group, drag a palette’s tab. Dragging a palette outside of an existing group creates a new group.

Click palette tab, and drag palette to a different location in group.

• To move a palette to another group, drag the palette’s tab to that group.

Click palette tab, and drag palette to new group.

Palettes are grouped.

• To display a palette menu, position the pointer on the triangle in the upper right corner of the palette, and hold down the mouse button.
• To collapse or expand the palette group (Mac OS only), click the window shade box in the right of the title bar.

Click to collapse or expand palette.

Entering values:

Some palettes contain options that let you enter values using any combination of sliders, angle controls, arrow buttons, and text boxes.

A. Slider B. Arrow buttons C. Text box D. Angle control

To enter values:

Do one of the following:

• Type a value in the text box. Then click a different option or text box in the palette; press Tab to go to a different text box in the palette; click the background in the composition; press Enter (Windows) or Return (Mac OS).
• Drag the slider to the desired value. Shift-drag to move the slider in increments of 10.
• Click or hold down the up arrow or down arrow button in the palette to increase or decrease the value.
• (Windows only) Click in the text field and then click the Up Arrow or Down Arrow key on the keyboard to increase or decrease the value.
• (Windows only) Use the mouse wheel to increase or decrease the value.
• Drag the angle control to the desired value. Shift-drag to change the angle in 15-degree increments.
• Drag from the arrow at the top right of the palette to display a list of commands for the palette.

To cancel values before you apply them:

Press the Escape key.

Returning palettes to their original organization:

The way you have organized your palettes is kept from one work session to the next. The Reset to Defaults command lets you return the palettes to their original, default groupings and locations.

To restore all palettes to their original organization:

• Choose Window > Reset to Defaults.

Viewing the composition

he hand tool, the zoom tools, and the Zoom commands let you view different areas of the composition and at different magnifications.

You can display compositions from 100% to 800% magnification, in 100% increments. The composition window’s title bar displays the zoom percentage at all times.

You can open several compositions at once. A list of open compositions appears in the Window menu.

To arrange multiple compositions (Windows):

Do one of the following:

• Choose Window > Cascade to display composition windows overlapping from the top left to the bottom right of the screen.
• Choose Window > Tile to display composition windows edge to edge vertically and horizontally. For example, if you have six open compositions, ImageStyler displays them tiled two across and three down.
• Choose Window > Arrange Icons to line up the icons for minimized ImageStyler composition windows.

Changing viewing options

To view another part of a composition: If the composition window does not display the entire composition, do one of the following:

• Use the composition window scroll bars.
• Select the hand tool (), and drag in the composition to move its view.

Drag hand tool to move view.

Note: To use the hand tool while another tool is selected, press H or the spacebar as you drag in the composition.

To arrange multiple compositions (Windows): Do one of the following:

• Choose Window > Cascade to display composition windows overlapping from the top left to the bottom right of the screen.
• Choose Window > Tile to display composition windows edge to edge vertically and horizontally. For example, if you have six open compositions, ImageStyler displays them tiled two across and three down.
• Choose Window > Arrange Icons to line up the icons for minimized ImageStyler composition windows.

To arrange multiple composition windows (Mac OS): Do one of the following:

• Choose Window > Stack to display composition windows stacked and cascading from the top left to the bottom right of the screen.
• Choose Window > Tile to display composition windows edge to edge vertically and horizontally. For example, if you have six open compositions, ImageStyler displays them tiled two across and three down.
• Choose Window > Tile Vertical to display composition windows edge to edge horizontally.

To close compositions: Choose File > Close to close the active composition window.

To exit ImageStyler: Choose File > Exit (Windows) or Quit (Mac OS).

To zoom in: Do one of the following:

• Select the zoom tool (), and click the area you want to magnify. Each click magnifies the artwork to the next preset percentage, centering the display around the point you click. At maximum magnification, the center of the zoom tool is blank.
• Choose View > Zoom In to magnify to the next preset percentage.
• Press Control+(+) (Windows) or Command+(+) (Mac OS).

To zoom out: Do one of the following:

• Select the zoom tool. Hold down Alt (Windows) or Option (Mac OS) to activate the zoom-out tool (a minus sign appears in the tool), and click the area of the artwork you want to reduce from a magnified view. Each click reduces the view to the previous preset percentage.

• Choose View > Zoom Out to reduce to the previous preset percentage.
• Press Control+(-) (Windows) or Command+(-) (Mac OS).

To magnify by dragging: 1 Select the zoom tool ().

2 Drag over the part of the composition you want to magnify.

Drag zoom tool to magnify area.

The area inside the zoom marquee appears at the highest possible magnification. The area is displayed within the composition window’s current dimensions.

Using Adobe’s online services

If you have an Internet connection and a Web browser installed on your system, you can access the Adobe Systems Home Page on the World Wide Web (at http://www.adobe.com) for information on services, products, and tips pertaining to ImageStyler.

To use Adobe Online:

1 Do one of the following:

• Choose File > Adobe Online.
• Click the icon at the top of the toolbox.

• Click a topic to open the Adobe home page.

About objects

Objects are the basic pieces with which you can design and build elements for a Web page. There are three types of objects in ImageStyler:

• Geometric objects, which are created with the ImageStyler drawing tools. For more information, see Drawing rectangles, polygons, and ellipses.
• Text objects, which are created with the type tool or are imported from other documents and applications that support text. For more information, see Creating text objects.
• Image objects, which are imported image files, image-object-based shapes created with the Shapes palette, or objects combined with the Combine commands.

Drawing rectangles, polygons, and ellipses

You can create geometric objects in Adobe ImageStyler by drawing basic geometric shapes. The tools in ImageStyler let you easily create the following shapes:

• The rectangle tool draws rectangles and squares.

• The rounded-rectangle tool draws round-cornered rectangles and squares.

• The polygon tool draws objects with from three to ten straight sides, each side being the same distance from the center of the object.

• The ellipse tool draws ellipses and circles.

Once you’ve created a basic shape using these tools, you can further modify their shape by using the Properties palette. For more information, see Using the Properties palette to modify geometric objects.

To draw a rectangle, rounded rectangle, polygon, or ellipse:

1 Select the rectangle tool (), the rounded-rectangle tool (), the polygon tool (), or the ellipse tool ().

2 Position the pointer at one corner or edge of the shape you want to create, and drag diagonally until the shape is the desired size.

Shift-drag to draw shapes of equal height and width—for instance, draw squares with the rectangle tool and circles with the ellipse tool.

Note: After you draw an object, the selection tool is automatically chosen. To draw another object, reselect the drawing tool.

If you drew a polygon and want to change the number of sides in it, see Using the Properties palette to modify geometric objects.

About shapes

The Shapes palette lets you work with a variety of premade shapes. You can add these shapes to the composition as new objects, or apply them to an existing object to change the object’s shape while retaining the rest of the object’s layer attributes.

You can also save the shape of any object in the Shapes palette.

Object selected, and replaced with arrow shape

The following guidelines apply to shapes:

• Any type of object can be saved as a shape.
• Saving an object as a shape saves all of its attributes.

Use the Shapes palette to store objects. For example, save an image object in the Shapes palette for use in other ImageStyler compositions.

• If you place a shape, it becomes an object on its own.
• If you replace an object with a shape, the resulting object is combined with the type of object from which the shape is made. The Properties palette for the resulting object displays the properties of the object from which the shape is made.

For example, if you save a geometric object as a shape and then apply that shape to a text object, the text object becomes a geometric object combined with the text object. In this example, the Properties palette would display the properties for a geometric object. For more information on combining objects, seeCombining objects.

• You can uncombine an object that has had a shape applied to it. The resulting object is the object from which the shape was made.
• EPS vector-based image objects scale better than bitmap image objects. For example, if you apply a shape based on an EPS vector image created in Adobe Illustrator and then enlarge the resulting object, the object’s edges remain crisp. If you apply a shape based on a bitmap image and then enlarge the object, the object’s edges will become pixelated, or blocky.
• If you replace an object with a shape, the shape is fitted within the bounding box of the object. The top and bottom or sides of the shape may be cropped to fit into the bounding box.
• If you replace an image object with a shape, the resulting object will be the current foreground (layer) color. For example, if you replace the image of a red apple with a black arrow from the Shapes palette, and the current foreground (layer) color is yellow, the result is a yellow image object in the shape of the arrow.

Use the crop tool and resize tool to display the entire shape at the size you want.

• If you use the Matte option to apply a shape to an image object, ImageStyler crops the image to the shape and retains the color information of the image. For example, if you use the Matte option to crop the image of a red apple with a black arrow from the Shapes palette, the result is an image of the apple cropped to the shape of the arrow.

Back to Top