Adobe ImageStyler 1

[DTP Reviews]
[Vector Reviews]
[Bitmap Reviews]
[Web Reviews]
[3D Reviews]

[3ds max 6]
[3DSOM Pro ]
[Acrobat 7]
[Acrobat 6]
[Acrobat 5]
[Acrobat 4]
[Acrobat 3]
[Acrobat Capture 2]
[Advanced Render 2.5]
[Articulate Presenter 5]
[AutoEye 2]
[AutoEye 1]
[Avenue.Quark]
[Bryce 5.5]
[Camtasia Studio]
[Canvas X]
[Canvas 9]
[Canvas 8]
[Canvas 7]
[Canvas 6]
[Canvas 5]
[Captivate 1]
[Carrara 5 / Pro]
[Carrara 4 / Pro]
[Carrara Studio 3]
[Cinema 4D 9.5]
[Cinema 4D 9]
[Cinema 4D 8.5]
[ColorDrive 1.5]
[CompuPic Pro 6]
[CompuPic Pro 5]
[Contribute 2]
[Contribute]
[Corel Designer 12]
[Corel Designer 10]
[Designer 9]
[Designer 1/8]
[CorelDraw X3]
[CorelDraw 12]
[CorelDraw 11]
[CorelDraw 10]
[CorelDraw 9]
[CorelDraw 8]
[CorelDraw Office 9]
[CorelDraw Premium 9]
[Creative Suite 2]
[Creative Suite 1]
[Deep Exploration 3]
[Deep Paint 2]
[Deep Paint 3D 2]
[Digital Image Suite 9]
[Director MX]
[Director 8.5]
[Director 8]
[DreamSuite 1]
[Dreamweaver 8]
[Dreamweaver MX 2004]
[Dreamweaver MX]
[DrawPlus 8]
[Expression 3]
[Expression 2]
[Eye Candy 4000]
[Fireworks 8 ]
[Fireworks MX 2004]
[Fireworks MX]
[Fireworks 4]
[Fireworks 3]
[Fireworks 2]
[Fireworks 1]
[Flash Professional 8]
[Flash MX Pro 2004]
[Flash MX 2004]
[Flash MX]
[Flash 5]
[Flash 4]
[Flash 3]
[FlashCom MX]
[Flightcheck 3]
[Flix Pro]
[Fontographer 4.1]
[FrameMaker 6]
[FrameMaker 5.5]
[FreeHand MX]
[FreeHand 10]
[FreeHand 9]
[FreeHand  8]
[FrontPage 2003]
[FrontPage 2002]
[FotoFusion 3]
[Generator 1]
[Genetica 2]
[Genuine Fractals 3.5]
[Genuine Fractals]
[GoLive CS2]
[GoLive CS]
[GoLive 6]
[GoLive 5]
[GraphicXtras]
[Headline Studio 1]
[Hexagon]
[Illustrator CS2]
[Illustrator CS]
[Illustrator 10]
[Illustrator 9]
[Illustrator 8]
[Illustrator 7]
[Image Doctor]
[InDesign CS2]
[InDesign CS]
[InDesign 2]
[InDesign 1]
[ImageReady 1]
[ImageStyler 1]
[Intellihance Pro 4]
[Intellihance 3]
[KnockOut 2]
[KnockOut 1.5]
[KPT 7]
[KPT 6]
[KPT 5]
[KPT 3]
[LiveMotion 2]
[LiveMotion 1]
[Mystical Lighting ]
[Mystical Tint]
[Namo WebEditor 5.5]
[NetObjects Fusion 7.5]
[OnOne Photoshop Suite]
[PageMaker 7]
[PageMaker 6.5+]
[PageMaker 6.5]
[PagePlus 6]
[PagePlus 5]
[PagePlus 4]
[Paint Shop Pro X ]
[Paint Shop Pro 9]
[Paint Shop Pro 8]
[Paint Shop Pro 7]
[Paint Shop Pro 6]
[Paint Shop Pro 5]
[Paint Shop Pro 4]
[PSP Album 5]
[PSP Studio]
[Painter IX]
[Painter 8]
[Painter 7]
[Painter 6]
[Painter 5.5]
[Painter 5]
[Painter 4]
[Painter Essentials 3]
[Photo Album 6]
[PhotoArtMaster]
[Photo-Brush]
[PhotoDeluxe BE]
[PhotoDraw 2000 2]
[PhotoDraw 2000 1]
[PhotoFrame 1]
[PhotoGraphics 1]
[PhotoImpact 11]
[PhotoImpact 10]
[PhotoImpact XL]
[PhotoImpact 8]
[PhotoImpact 6]
[PhotoImpact 5]
[PhotoImpact 4]
[PhotoImpact 3]
[Photo-Objects 2]
[PhotoPaint 8]
[PhotoSEAM]
[Photoshop CS2]
[Photoshop CS]
[Photoshop 7]
[Photoshop 6]
[Photoshop 5.5]
[Photoshop 5]
[Photoshop 4]
[Photoshop Album 2]
[Photoshop Album]
[Ph/shop Elements 4]
[Ph/shop Elements 3]
[Ph/shop Elements 2]
[Photoshop Elements]
[PhotoSuite 7 ]
[PhotoSuite 5]
[PhotoSuite 4]
[PhotoSuite III]
[PhotoSuite II]
[PhotoTools 2]
[Picture Publisher 8]
[Piranesi 4 ]
[Piranesi 3]
[Portfolio 3]
[Poser 6]
[Poser 5]
[Poser Pro Pack]
[PrintOffice 2000]
[PrintOffice 1]
[PressReady 1]
[Publisher 2003]
[Publisher 2002]
[Publisher 2000]
[Publisher 98]
[Pxl SmartScale]
[QuarkXPress 6.5]
[QuarkXPress 6]
[QuarkXPress 5]
[QuarkXPress 4]
[Real-Draw Pro 3]
[Real Draw Pro 2]
[Sapphire Plug-ins]
[Satori 3]
[Satori 2.5]
[Sketch and Toon]
[SketchUp 5]
[SketchUp 4]
[SketchUp 3]
[SketchUp 2.1]
[SnagIt 6.2]
[Streamline 4]
[Studio 8]
[Studio MX 2004]
[Studio MX]
[Studio Pro 2 ]
[Swift 3D 4 ]
[Swift 3D 3]
[Swish 1]
[Swish 2]
[Test Strip 3]
[Texture Maker 2]
[Toon Boom Studio 3]
[Toon Boom Studio 1]
[Type Manager Deluxe]
[Vector Studio 2]
[Vector Studio 1]
[Ventura 10]
[Ventura 8]
[Ventura 7]
[Virtual Painter]
[Vue 5 Esprit]
[Vue 4 d'Esprit]
[Vue 5 Infinite]
[Vue 4 Professional]
[Web3D 2]
[Web3D 1]
[WebEasy Pro 5]
[WebPlus 8]
[WildFX]
[WildPresenter]
[Windows Draw 6]
[Windows Draw 5]
[Wright Design 1]
[Xara Xtreme]
[Xara X1]
[Xara X]
[Xara 2]
[Xara 1]
[Xara3D 6]
[Xara3D 5]
[Xenofex 2]
[Xfrog 3.5 / 4.x]
[XPress 6.5]
[XPress 6]
[XPress 5]
[XPress 4]
[xRes 2]


[Home / What's New]
[DTP / Publishing]
[Vector Drawing]
[Bitmap / Photo Editing]
[Web Design]
[3D Software]
[All Reviews]
[All Articles / Tutorials]
[Book Search / Shop]
[Site Map / Search]
[Contact]
 

you can help support the site with a direct donation or by shopping via the following links:

[Amazon.com]
[Amazon.co.uk]
[Amazon.ca]

Thank you!

 

 

Good HTML support, formatting power and an object-based approach enable occasional users to add impact and consistency to their Web site graphics.

Adobe ImageStyler

Adobe certainly took a long time to realise that its existing photo-editing tools weren't ideal for web graphic creation but it has definitely taken the lesson to heart. Hot on the heels of ImageReady the company has released another dedicated Web graphics program, ImageStyler. Although both programs share the same end goal - the creation of GIFs and JPEGs for inclusion on web pages - their approach is fundamentally different. Whereas ImageReady is a bitmap-based application focused on optimizing existing images, ImageStyler is an object-based application designed to create images from scratch.

As such, rather than painting and retouching brushes, the ImageStyler toolbox offers object-based tools. At first, the range on offer looks very weak with just four main shapes - rectangles, ovals, rounded rectangles, and polygons - together with simple text. In fact these are only the beginning with hundreds of different pre-designed symbols from arrows to splash symbols available from the floating Shapes palette. Once added to the image, each shape can be freely resized, rotated and skewed via its bounding box or precisely controlled via the Transformation palette. Because each shape is defined as vector information rather than as a pixel-based bitmap, it can be transformed without its quality degrading. A feature unique to ImageStyler is the ability to instantly replace any shape by any other simply by dragging and dropping.

Each object in ImageStyler is "live" which means that every aspect of it can be changed non-destructively at any time. The first port of call for such edits is the Properties palette which allows defining factors, such as the number of points in the polygon, to be set. It also allows the object to be swapped between a solid or outlined shape. By default all new objects pick up the current foreground colour but this can be changed using the Colour palette which offers the normal 16 million RGB hues for full colour work or the 216 Web safe options for highly-compressed, flat-colour work. More advanced colour effects are available from the Colour Gradient palette and from the Texture palette. The bitmap-based textures are particularly striking and have been designed to tile seamlessly.

The choice of fills is impressive, but only the beginning of the formatting power on offer. The Opacity palette allows an object to be made semi-transparent to reveal the image background or underlying objects, while the ability to apply opacity gradients allow very subtle graduated effects to be achieved. The Distort palette enables the fill to be magnified, twirled, spherized or quantized, while the Filter palette enables the fill to have its brightness, contrast and saturation modified or to be tinted or posterized. Perhaps most important of all in the Web context is the 3-D palette which allows the object to be given a cut-out, embossed, bevelled or rippled effect complete with control over edge and lighting settings.

As all options can be combined you can create a bevelled button with a textured fill that has been distorted and posterized and then given a radial opacity effect. The eye-catching power is undeniable, but so is the complexity caused by the use of so many palettes. If any program is crying out for a centralized tabbed property box, ImageStyler is it.

With so much formatting power it's surprising that each shape can only be set to be a fill or an outline but not to have both. This apparent mystery is explained by the use of layers. ImageStyler's layers, added with the Object Layers palette, are completely different to the document-wide layers seen in Photoshop and Illustrator. Instead each object can have its own set of up to five layers which are best thought of as a stack of copies. Of course by default any non-transparent layer will hide those below, which is where the separate Layer palette comes in. This allows each layer to be offset and softened to create shadow effects, or to be increased in width to create an outline. Each layer can be formatted completely differently, so you can create a flat-coloured button with a textured outlined rim and a drop shadow and wider glow. However there is one major - and completely unexplained - limitation as no layer can be more than ten pixels wider than the top layer.

The combination of object properties and layers means that you can create an infinite range of striking formatting effects. The resulting problem, especially with repeating elements such as navigational devices and buttons, is to try and apply the effects consistently. This is where ImageStyler's Styles palette comes in. Simply format all the layers of an object exactly as you want them, hit the New button on the palette and give your style a name and it is automatically added to the list ready to be applied to any other object. In fact with hundreds of pre-designed styles you might not even need to create your own.

Once you've created your graphic, you're ready to save it for use in your web page. As you'd probably expect by now this is controlled by another palette, the Export palette. This allows you to choose a file format, such as GIF, JPEG, PNG-Indexed and PNG-TrueColour, and options, such as the level of JPG compression and the number of GIF colours. By clicking on the Active Preview button you can see the effect of choices on your image quality together with the resulting file-size. Ultimately though the optimization power is disappointing. In particular ImageStyler gives no user control over the creation of GIF palettes, instead defaulting to an adaptive palette with an in-built Web-safe bias. While this will probably produce acceptable results in most cases, a dedicated Web graphics program should offer far greater customisability.

As well as producing the bitmap files, ImageStyler also helps in the process of integrating the graphics into your HTML code. Using the Web palette, you can give any object a URL, ALT text and target frame which are then output as client-side image maps. An alternative approach is to use the autolayout option where ImageStyler automatically slices the composite image into separate object bitmaps and creates the necessary HTML table to reconstitute the full picture on your web page. The process is simple and works well, but professional users will be disappointed. URLs can only be applied on an object basis so there is no possibility of creating multiple hotspots on an imported bitmap, for example. Even more limiting is the fact that objects cannot be given separate export options as such optimisation is one of the main benefits that image-slicing offers.

To make up for these limitations, ImageStyler offers two advanced examples of HTML integration. The first of these is the creation of Javascript rollovers. Rollovers are the secret behind the common web effect of graphics changing as you move your mouse over them. In the past even creating the graphics consistently was a nightmare, let alone writing the necessary script to animate them. In ImageStyler the job is simple. With the Javascript palette you can create separate onMouseOver, onMouseDown and onMouseOut states that can be formatted independently just like a layer. When you output the image, ImageStyler creates separate image files complete with the necessary code to swap between them. Paste the script into your HTML <head> tag and the rollover effect will be viewable in version 4 browsers.

The second advanced feature, and one I haven't seen in competing programs, is automated HTML replacement. One of the huge weaknesses of HTML is that its text formatting is so weak so that to highlight major titles, for example, you are generally limited to the increased point-size and emboldening of the <heading> tags. Using ImageStyler's Web palette you can now link headings to a styled text object which acts as a formatting template. Using the Batch Replace HTML command you can then choose which Web pages you want to be converted. ImageStyler will search out all relevant headings, create graphical versions based on the template formatting and then replace the heading tag with the new image tag.

This really is impressive power especially as it can be combined with the program's Javascript handling to automatically create rollover effects - although to achieve this you will have to add the script code manually. With its object-based nature, style-based approach and web-integration working together, such HTML replacement shows ImageStyler at its best. Using it you can stamp a professional corporate identity on an entire site with just a few clicks. Even better with a few clicks more, you can entirely revamp the site as soon as it needs a makeover. However it's important not to get carried away. While the HTML replacement of images for text achieves good results quickly it has serious downsides in terms of decreased flexibility and increased bandwidth demands. Most professional web masters will prefer to stick to the more limited text formatting that cascading style sheets can offer.

In many ways this is typical of ImageStyler: the program allows you to achieve an awful lot very quickly, but then you hit its limits. In the case of the superiority of stylesheet-based formatting that's not Adobe's fault, but in other areas it's clear that the company is deliberately keeping the program's power in check. The restriction of image sizes to 1024 x 1024 pixels, the lack of GIF animation and the poor optimization control are all clearly designed to leave ImageReady with some purpose and market share.

Even more limiting is the lack of editing power. In many ways ImageStyler seems to offer the best of both object-based and bitmap-based worlds but, rather than building on this strength, Adobe seems to be worried that it will impact on its existing applications. In particular the bizarre omission of any pen or brush tools mean that you can't even add a freehand line or shape to your image. This serious and unnecessary restriction seems designed to force you to turn to Illustrator or Photoshop to create such basic components - a need reinforced by ImageStyler's lack of reshaping or retouching capabilities.

Despite the irritation that Adobe now seems to be spending almost as much effort limiting the powers of its programs as liberating them, ImageStyler is still a welcome addition to the company's line-up - it certainly offers a great deal more than the misconceived ImageReady. While ImageStyler's artificial limitations will push the professional user towards the all-encompassing bitmap and object-based power of Macromedia Fireworks, the more occasional user will be able to benefit from the program's bolt-together approach to produce high-quality results quickly and consistently.

Tom Arah

Features

4

Ease Of Use

5

Value For Money

5

Overall

4

ratings out of 6

ImageStyler has now been replaced by Adobe LiveMotion

LiveMotion
Software / Upgrade
Save $$!   Save ££!
Books / Reference
Save $$!   Save ££!

System Requirements: Pentium or higher, 32/64Mb of RAM, 40Mb of disk space, Windows 95, 98 or NT 4.0 (Service Pack 3), CD-ROM, SVGA

Tom Arah

January 1999


Hopefully you've found the information you were looking for. For further information please click here.

For free trials and special offers please click the following recommended links:

For further information on the following design applications and subjects please click on the links below:

[3D], [3ds max], [Adobe], [Acrobat], [Cinema 4D], [Corel], [CorelDRAW], [Creative Suite], [Digital Image], [Dreamweaver], [Director], [Fireworks], [Flash], [FreeHand], [FrameMaker], [FrontPage], [GoLive], [Graphic Design], [HTML/CSS], [Illustrator], [InDesign], [Macromedia], [Macromedia Studio], [Microsoft], [NetObjects Fusion], [PageMaker], [Paint Shop Pro], [Painter], [Photo Editing], [PhotoImpact], [Photoshop], [Photoshop Elements], [Publisher], [QuarkXPress], [Web Design]

To continue your search on the designer-info.com site and beyond please use the Google and Amazon search boxes below:

Google
Web designer-info.com

       
designer-info.com: independent, informed, intelligent, incisive, in-depth...
 


All the work on the site (over 250 reviews, over 100 articles and tutorials) has been written by me, Tom Arah It's also me who maintains the site, answers your emails etc. The site is very popular and from your feedback I know it's a useful resource - but it takes a lot to keep it up.

You can help keep the site running, independent and free by Bookmarking the site (if you don't you might never find it again), telling others about it and by coming back (new content is added every month). Even better you can make a donation eg $5 the typical cost of just one issue of a print magazine or buy anything via Amazon.com or Amazon.co.uk (now or next time you feel like shopping) using these links or the designer-info.com shop - it's a great way of quickly finding the best buys, it costs you nothing and I gain a small but much-appreciated commission.

Thanks very much, Tom Arah


 
[DTP/Publishing] [Vector Drawing] [Bitmap/Photo] [Web] [3D]
[Articles/Tutorials]
[Reviews/Archive] [Shop]  [Home/What's New]

Copyright 1995-2005, Tom Arah, Designer-Info.com. Please get in contact to let me know what you think about a particular piece or the site in general.