Click on a thumbnail to enlarge it. Use your browser's "BACK" button to return to this review when done.
Type of Product
Adobe ImageStyler 1.0 is a software program that helps non-professionals as well as professionals easily create unique Web graphics such as banners, headlines, navigation bars, backgrounds, and buttons. It's an application that handles such tasks involved in Web creation as: designing visual effects; optimizing graphics for quicker loading in a browser; producing JavaScript rollover effects; and even batch-updating Web pages. The program combines the illustration tools of Adobe Illustrator with the photographic rendering and manipulation facilities of Adobe Photoshop, and has additional new layering and editing features of its own. You can create objects in ImageStyler or use bitmap or vector files produced by both Illustrator and Photoshop, and you don't lose the scalability of vector graphics. This feature gives you design flexibility.

ImaOriginal TemplategeStyler contains 100 pre-designed styles, dozens of shapes (ranging from umbrellas and trees to typographical dingbats), and Web page templates that can be used to qCustomized Templateuickly create sophisticated and professional Web pages, with JavaScript rollovers, by even the most design-impaired individual with no HTML or JavaScript code background. The image to the left is a template from ImageStyler. The image to the right was created using the ImageStyler template and customizing it.

For graphic designers who are truly gifted and want to tweak every little detail, what you can do with objects is infinitely variable. You can combine up to 100 layer attributes, such as color, transparency, gradient fill, brightness, embossing, beveling, on up to 5 layers to create your own unique variations.

Although ImageStyler compositions are intended for use on the Web, you can print compositions as well. Compositions, though, are printed at screen resolution, 72 dots per inch.

The program is available for both Windows and Macintosh. Price: $129. The Adobe Web site is well worth visiting for information, tips, tutorials, and free demos
User Level
This program is intuitive enough for someone just starting out in Web design; yet it has the power and features that would appeal to intermediate and advanced users. Creating Web graphics can be time-consuming and tedious. ImageStyler cuts your production time and you don't need extensive design experience or HTML expertise. Novices will be amazed at how easy and quick it is to create professional designs. Just within the tutorial in the first chapter of the User Guide, you learn to create a sophisticated Web page with a JavaScript rollover effect.
  • Creating Objects--Create and customize graphics objects from shapes and text using familiar drawing and type tools.
  • Pre-designed Styles--Apply pre-designed styles included in ImageStyler to objectsShapes & Styles, or combine up to 100 graphical attributes, such as colors, transparencies, and embossing, on up to 5 layers to create customized styles. The image to the right shows some shapes from the ImageStyler Shape palette with pre-designed styles that I applied to them.
  • Editing Abilities--Edit any style attribute or object without changing the others you've already applied--objects and styles are always "live" in ImageStyler.
  • Rollover Effects--Add JavaScript rollover effects to a graphic, making it change appearance when the mouse moves over it or clicks it.
  • Image Maps--Create navigational image maps (graphics that link to URL's when clicked) by associating URLs with graphical objects in a few quick steps.
  • Linking Graphics--Link related graphics with handy aliases and any change you make to one graphic updates all the others.Export Palette
  • Auto Layout--Use the Auto Layout feature to slice your composition on export, automatically producing table-based HTML pages that reference and reassemble images with pixel-level accuracy.
  • Batch HTML Replacement--Design graphics templates and automatically apply them across your site using the Batch HTML Replacement command. Batch-replace dozens (even hundreds) of H1-H6 or class-tagged text with either styled text or graphics with text.
  • Export Capabilities--In the Export palette, choose GIF, JPEG, or PNG formats before posting your graphics. As you create, see exactly what your Web layouts will look like online using the Preview in Browser command.
  • Active Preview--With the Active Preview feature, interactively adjust your graphics' image quality to optimum file size for fast downloading.
  • User Interface--Lower your learning curve with the intuitive Adobe-standard interface that ImageStyler shares with Adobe Photoshop, Adobe Illustrator, Adobe ImageReady, and Adobe PageMaker software.


The installation is quick and easy. Always peruse the CD before you install, as many programs, especially Adobe, include free goodies. On the ImageStyler you will find Adobe Acrobat Reader 3.0, Adobe Type Manager Light 4.0, with fonts, stock art, tutorials, sample template Web pages, and tryout versions of other Adobe products. You don't have to install everything at once, but can use items from the CD when needed.


The interface is similar to other Adobe products, includes Adobe-standard tools, menus, floating palettes, and keyboard shortcuts. It uses Photoshop file format and acquisition pInterfacelug-ins to import EPS, GIF, JPEG, PSD, DIB, BMP, and PICT files or to bring in images from compatible scanners and digital cameras. Across the top of the work area is a Menu Bar with the following dropdown menus: File, Edit, View, Object, Layer, Window, and Help. In the Tool Box, you have a variety of tools: Selection, Subgroup-selection, Drag Selection, Layer-offset; Rectangle, Rounded Rectangle, Ellipse, Polygon, Text, Crop, Rotate, Skew, Paint Bucket; Eye Dropper, Hand, and Zoom. I especially liked the Layer-offset Tool which allows you to select a layer or effect, such as a drop shadow, and quickly drag or offset it.

User Guide

This guide gets you up and running quickly. It's about 136 pages with nine chapters. Chapter 1 introduces you to key feReplacing Headingsatures of ImLe Shoe!ageStyler and takes about an hour to complete. Your finished product will be a Web page. You place objects; add a 3D effect; style and arrange objects; add text; work with layers; create an image map; add shapes; add a rollover action; add a background; and then save and export the file. Sound difficult? Well, it isn't! And your final image should look like the image to the left.You can see the rollover effect (a color change from mercury to red) on the right arrow spiral on the bottom of the graphic.

You also will make an HTML file more interesting by replacing its text headings with images. After I did the tutorial, I made the gold subheadings for this reviewWeb Palette. I started with just the plain Heading 4 type in my review; created the gold text style in ImageStyler; used the Web palette in ImageStyler to choose the heading I wanted to replace with my style; and used the Batch Replace HTML command under the File menu in ImageStyler, to replace the plain Heading 4s in the review with the new gold heading.

Basic Concepts

For users new to the field of Web design and design software, I will briefly explain how ImageStyler works, which will in turn illustrate why the program is powerful and allows you to create complex objects.

Objects--Objects are the basic elements you create and work with in ImageStyler compositions. They are the pieces with which yObjectsou can design and build the graphic elements for a Web page. There are three kinds of objects: (1) Geometric objects are objects you create with the drawing tools. Circles and rectangles are examples of geometric objects; (2) Text objects are text you create using the type tool or import from other documents; and (3) Image objects are bitmap images and Encapsulated PostScript (EPS) vector images that you import into the program.

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. EPS vector images are the shape in which they were created by the application.

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 ImageStyleLayersr apply to individual objects, not the entire composition. You can add, delete, reorder, and offset layers at anytime. Object layers was probably the most difficult feature of the program for me. I am so familiar with Photoshop and working with its layers that I had to stop and re-think what I was doing in ImageStyler. Once you adjust, though, you realize how easy it is to work with object layers.

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. By applying different attributes to each laLayer Attributesyer, 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: emboss and fill the top layer with a texture; make the next layer wider and fill it with a color to give the effect of an outline around the button; and then 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 giveStyles the object several layers, each with a different set of layer attributes. The text object would then have all the attributes of that style. An excellent way for a beginner to understand what attributes make up a style and the options used in the various palettes is to apply a style to an object, open the various palettes, and turn on and off the various object layers to see the effects on the object.

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. You can transform objects by skewing, rotating, and resizing them. You can also change individual layer attributes or entire styles at any time. Modifications are nondestructive. You can clear all modifications applied to an object. When working with images in a composition, ImageStyler keeps a copy of the original image in the file, along with any changes applied to it. As a result, styles and even transformations to bitmap images are nondestructive. You can shrink an imported image, skew it, apply a style to it, and still return the image to the way it looked when you first imported it--even if you've saved and closed the composition multiple times. This feature takes the fear out of learning for novices. They can experiment all they want and still retain the original object.

Palettes, Layers, and Attributes

By working with objects and layers in ImageStyler, you can create sophisticated effects Layers & Attributesthat are applied to objects and then can be saved as styles and reused.You have about seventeen different palettes to work with in the program, each with various options, and they are all fairly easy to use and intuitive. I used the Layers and Attributes tutorial in the Product Guide folder on the CD to create the image to the left. I will briefly go through the steps and discuss the tools and/or palettes used because I think it is a good example of how ImageStyler works.

Step 1--An object is created using the creation tools or by importing an image file. I used the Rounded Rectangle tool to create the object and then used the Color tool palette to change the color to blue. It has a Web safe color cube checkbox that can be checked if you want to filter out all but the Web safe colors.

Step 2-- I then used the 3D tool palette to specify an emboss effect by changing the depth to 7. Steps

Step 3--I needed a second layer and created this by clicking on the duplicate button on the bottom of the Object Layers palette. I then changed the width attribute to 3 pixels wider for the object in the second layer.

Step 4--For the punched out look, I returned to the 3D palette and reversed the light source using the angle control at the bottom of the palette to 315.

Step 5--To create an even more punched out look, I filled the background with a texture by dragging a texture from the Textures palette to the background of the composition window. I used the Layers palette to select a fill mode of Background. This will take whatever is below the object and use it to fill the current layer.

Step 6--To soften the edge of the second layer, I adjusted the softness in the Layers palette.

Step 7-- A color gradient was set on Layer 1. There are several different gradient types to choose from. I selected a Linear gradient and adjusted the angle control to 321.

Step 8--I added a distortion filter for further emphasis. Again, there are a variety of different types to choose from. I selected the Twirl filter.

Step 9--For the final step, I saved the design to the Style palette and then applied it to another shape.

Colors, Layers, and Borders

You can create cool border effects on any shape in ImageStyler. The program allows you to assign up to five object layers within a particular style. But to create the image to the right with the colorful rainbow effect, it requires eight different object layers. By layering identical objects with slightly different settings applied to them, you can create effects that use multiple object layers. I used a tutorial from the Adobe Web site for this image.

Step 1--I started by drawing a rectangular shape. It's not the Note Imagefinal shape as once the effect is created, you can apply it to any object.

Step 2--To begin the rainbow effect I started with red and moved through the spectrum. You work with the HSB View in the Color palette (hue, saturation, brightness) so you can shift the hue without changing brightness or saturation.

Step 3--I duplicated layers until I had five, and with each one, I increased the width and hue values. Since ImageStyler only allows five object layers, I saved the style in the Style palette, MASRainborder1.

Step 4--I started again with the topmost layer and changed the width and hue settings on the first three layers. The last two layers were then deleted. Then I created a new style with a different name, MASRainborder2.

Step 5--After I created the two styles, I needed to put them into action. I used the note shape from the Shapes palette and stacked the two copies of the object on top of each other.

Step 6--Then I applied the MASRainborder1 style to the copy and applied the MASRainborder2 style to the original object.

Step 7--When ImageStyler duplicates an object, it offsets the copy by 20 pixels to the right and 20 pixels down. Since I wanted the copy to be in the same position as the original, I needed to use the Transform palette to set the position of the object on the page. To set the duplicated object to the correct location, I subtracted 20 from both the X and Y coordinates and I had my rainbow image.

What's fun about creating a style is that you can reuse it at anytime and applRainbow Styley it to other objects, texts, or images. I took the same two styles and applied them to text and the umbrella shape from the Shapes palette to create the image to the right. You can even edit it and create a new style from it.

Working with Images

With ImageStyler you have a variety of tools for working with images. The image on the right illustrates some of the tools you can you. For this illustration I used the sample "Working with Images" tutorial on the CD in the Product Guide Folder.

Step 1--Images are not "opened" but are instead "placed" (imported) into an ImageStyler composition. This is done through the Place menu item or by dragging and dropping an image file on a composition. I placed the snow skier image.

Step 2--A fundamental imaging operation is cropping, which I did with the image. A unique feature of cropping in ImageStyler is that it has the nondestructive feature. You can save the document and open it two weeks later and uncrop the image to get back the portion that is Skiernow trimmed.

Step 3--After cropping, another technique I used on the image was scaling. The regular selection tool acts as the scale tool when you select an edit node. Again, this is a non-destructive edit. You can get the original size back any time.

Step 4--There a a series of color filters for adjusting images in the program. These can be used on any object but are most useful for images or objects with textures. I wanted a Cobalt effect so I set the Tint value to the maximum (255). This replaces all of the color information with the currently selected color in the Color palette. I selected a dark blue.

Step 5--Edge effects always enhance an image. This can be done by applying some adjustment that replaces the alpha information (matte) of the image with some shape. For the skier image I wanted to replace the alpha information with a shape from the Shapes palette. I selected the shape called "Puddle 1" and hit the Matte button. This created what is called an "Active Matte" for the image. The alpha information has been replaced as can be seen with the image itself. You can still scale, rotate, etc. the image at this point and the matte will be adjusted to match.

Step 6--At this point, I applied the "Glass glow" style from the Styles palette to the image. I now had an image object with a fairly elaborate look. The order that I used to create this object was entirely arbitrary. I could go back and change any attribute and all of the other attributes would be maintained.

Step 7--The advantage of the ImageStyler editing model is the concept of replacing an image. If I had a series of images that I wanted to do the same thing to, instead of running through all the steps of cropping, scaling, tinting, etc., I could use the current object as a template. I did this by using the Duplicate menu item to make a copy. I then selected a new image, the water skier, picked the Replace menu item and selected the snow skier image file. The image was replaced but all the scaling, cropping, etc. had been retained and reapplied.

JavaScript Rollovers

Rollovers are fun to create and help you create a professional image on a Web page. You can create a button that changes shape when a mouse cursor moves over it; set a bitmap image to change to another image when clicked and more. Because ImageStyler associates JavaScript code with an object, you can move the object without having to reappRolloversly the code. To attach a JavaScript action to a button, you select an object and then attach a state to the object. You then alter the object to represent different states. The JavaScript palette displays a row of buttons to create a new state, duplicate a state, or delete a state. You can define actions or appearance for: MouseOver--displays when the pointer is directly over the object; MouseDown--displays when the pointer clicks the object; and MouseOut--displays when the pointer is moved away from the objectJavaScript. Unique appearances for a state can be created by doing any of the following: use the X Offset and Y Offset text boxes or arrows at the top of the JavaScript palette to move the object horizontally or vertically from the NoAction state; apply any ImageStyler style, texture, or shape to the selected object, or apply a color or gradient; drag the object by its upper right corner or anchor point to rotate it; and use other palettes, tools, and commands to change the object's appearance, position, and size. The image to the right shows a rollover with a Blue Metal style change. The image to the left shows the JavaScript palette with Gold Metal Embed style change for the MouseOver state and a Colorwave texture change for the MouseDown state.

Text Matting

ImageStyler allows you to create graphical mattes by applying shapes to selected objects to mask them. Anything outside the shape disappears, leaving only what's enclosed by the shape to show through. The Amazon page was created with the following steps.

Step 1--I typed the text "Discover the Amazon" to serve as the shape for the active matte.

Step 2--I opened the Shapes palette, chose the Selection tool and dragged the text to the Shapes palette, and renamed the selection. I then deleted the text as it is saved in the Shapes palette as a shape.

Step 3--I imported an image for a background; opened both the Properties palette and the Shapes palette; clicked the text Mattesswatch that was created and dragged it to the Active Matte section in the Properties palette; and viola, the text shape became an active matte over the image. An active matte is similar to taking a sheet of cardboard and cutting an image out of it, then putting what was left of the cardboard over another image. The cardboard serves as the matte, and the cutout stencil allows the image beneath to show through.

Step 4--I then fine-tuned the effect by adding a 3D effect to the matte and added a JavaScript rollover button on the bottom.

Step 5--I exported the file using the Make Page option. ImageStyler exported the image files and created an HTML page with the JavaScript code. If you click on the thumbnail and view the actual Web page, you can see the rollover button in action.

Personal Comments
I thoroughly enjoy using Adobe ImageStyler and have utilized it for a variety of PC Cafe reviews. Plus, I used a shape and style from the program for the creation of our Cafe Mocha Award cup. The image to the right was created from our ImageStyler headings and the coffee cup to give you an idea of what headings I have used. The program is easy to use and intuitive and very practical. I can create a style and use it over and over on a variety of objects and text. This is a real timesaver. The templates can be quickly edited and thus handy for creating Web pages in a few minutes. PC Cafe HeadingsAll of the tutorials used in this review were very basic, easy and quick, accessible from the CD or the Adobe Web site, and were designed for novices to use to create professional images and impress their friends! If you just attempt the few tutorials that were done in this review, you will acquaint yourself and have used most of the tools and palettes in ImageStyler. I must admit that I was impressed with the program. When I first received it, I immediately used it for headings. After I played with the tutorials and started using the program for layouts for this review, I was amazed at how much I could do in the program without having to bring the images into Photoshop for completion, as I do in many of the reviews. A few screen shots were brought into Photoshop for minor tweaking, but about 99.9% of the review was created in ImageStyler and put right into our Web page editor. ImageStyler was great for the following tasks for the layouts: alignment of text and objects was set with the Object Align and Distribute commands; the Rotate tool and the Transform palette were used to transform objects and text; the Rectangle tool and the Properties palette with the Outline option was used to make lines or boxes for separation of objects for the screen shots under the Basic Concepts subheading; the gold subheadings were exported with the Batch Replace HTML command; the red subheadings were exported as JPEG images with the Export Selection command; and the text matte image was exported, as a Web page with all its links and JavaScript rollover, using the AutoLayout option in the Web palette. And, this is only the first version. Good job, Adobe!!
System Requirements
Processor: Pentium
Operating System: Windows 95/98 or NT 4.0
Memory: 32 MB (64 MB recommended)
Hard Disk Space: 40 MB
256 color display (24-bit color display recommended)
CD-ROM drive

Graphics: Adobe ImageStyler
Web Page Editor: Symantec Visual Page