Bitmap Vectors: The Path to Success

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

[Free Photos]
[Colour Management]
[Photo Sharing]
[Drupal Tutorial]
[Introducing CMS]
[Photo to Art Tutorial]
[3D Rendering Tutorial]
[Future of Web Design]
[Google Bourbon]
[Google Background]
[Adobe-Macromedia]
[Live Paint Live Trace]
[3D Materials]
[Extending Bitmaps]
[Image Modes]
[Elements 3]
[Flash Video]
[Flash Bitmaps]
[CD Authoring]
[Mac PC History]
[Best 3D App ]
[Photo Edit Roundup]
[Photoshop Patterns]
[Web Success]
[Texture Library]
[Web Stats ]
[Best Web App]
[Best Creative App]
[3D to 2D]
[Corel or Not?]
[Photo Bargains]
[2D to 3D]
[Creative Suite]
[CSS Positioning]
[Tablet PC]
[Pen Input]
[Acrobat Directions]
[HTML Tables]
[Illustrator_Plug-ins]
[RGB to CMYK]
[Filter Tips]
[Understand CSS]
[Photoshop Filters]
[Flash Usability]
[Web Fonts]
[2002 System]
[Font Formats]
[MX Explained]
[DTP Tagging]
[Image Resampling]
[Image Resolution]
[Data-Driven Design]
[Digital Video]
[Windows XP]
[Paper to PDF]
[Flash Animation]
[Page Imposition]
[Design Roundup]
[Graphic Roundup]
[eBook / ePaper]
[Image Management]
[Removable Storage]
[Understand Halftones]
[Web Buttons]
[XML Revolution]
[Bitmap Vectors]
[Image Enhancement]
[Windows 2000]
[PDF Workflows]
[Flash v LiveMotion]
[Advanced File Formats]
[Design Companies]
[Dynamic Filters]
[Site Structuring 2]
[BMP/TIFF/JPEG/GIF]
[Site Structuring 1]
[Image Hoses]
[Text Typography]
[Producing Panoramas]
[Spot Colour]
[SVG Format]
[Design Sites]
[Database Publishing]
[Vector Brushes]
[Layout Compositing]
[Brush Control]
[Web Repurposing]
[Digital Cameras]
[Automating Scripts]
[Stock Photography]
[Quark v Adobe]
[Bitmap Editability]
[1998 Applications]
[Photoshop 5 Colour]
[Asymmetric Grids]
[Bitmap Masking]
[Bug Hunting]
[Commercial Print]
[Vector Transparency]
[Scanning The Facts]
[Colour Print]
[Image Management]
[Preparing Print]
[Understanding EPS]
[DTP Grids]
[Layer Handling]
[NT or Not?]
[Hardware 1997]
[Microsoft Publishing]
[3rd Party Solutions?]
[Beyond CMYK]
[Acrobat v Immedia]
[Postscript 3]

[3D Rendering Tutorial]
[Acrobat Tutorial]
[Art Tutorial]
[Colour Management Tutorial]
[CorelDraw Tutorial]
[Drupal Tutorial]
[Flash 5 Tutorial]
[PageMaker Tutorial]
[Photo to Art Tutorial]
[Photoshop Elements 3 Tutorial]
[Photoshop Elements Tutorial]
[Photoshop Basics Tutorial]
[Photoshop Advanced Tutorial]
[Web Dreamweaver Tutorial]
[Web FrontPage Tutorial]
[Web Design / HTML Tutorial]
[Web Graphics Tutorial]


[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!

 

 

Vector Handling in Bitmap Applications

Tom Arah looks at how Photoshop provides vector handling within its bitmap environment.

When talking about graphics programs a fundamental distinction is usually drawn between bitmap editors, such as Photoshop and Photo-Paint, and vector editors, such as Illustrator and Corel Draw. Where the bitmap editor's pixel-based grid offers photo-realism and unmatched creativity, the vector editor's node-based shapes offer pin-sharp output and absolute control. Over the last few years, however, this never-the-twain-shall-meet division has been eroded and with the recent launch of market leader Photoshop 6 it has been seriously attacked.

Path Tool

In fact Photoshop has offered some sort of vector control right back from version 2. The Path tool (shortcut P) lets you draw straight vector lines on your image by simple point-and-click or smooth bezier curves by clicking to set the anchor point and then dragging to interactively set the size and shape of the curve segment you have just drawn. To close your path to create a shape you need to click back on your first anchor point, while to leave your path open hit the Esc key. To ensure you don't lose the working shape or line you've carefully built up you need to open the Path palette and use the palette menu's Save Path command to permanently store it, or use the New Path command before you begin.

The obvious question is what benefits does the Path tool's vector handling offer within Photoshop's bitmap environment? The first benefit is in terms of selection. A saved path can instantly be turned into a bitmap-based selection with the Load Path As Selection command at the bottom of the palette or simply by Ctrl-clicking on the desired path in the palette list. Alternatively, using the palette menu's Make Selection command, you can again convert the path into a selection but this time with adjustable control over anti-aliasing and feathering. The obvious use is for creating a selection with feathering and then copying it into its own file as a vignette - and if the first attempt wasn't quite what you wanted, thanks to the flexible and non-destructive nature of vectors, you can simply change the settings and try again.

Photoshop's longstanding Path tool is primarily used as a middleman for managing selections and formatting.

The process works just as well in reverse. Selections can be turned into paths either instantly, using the palette's Make Work Path command, or with adjustable control over the tracing tolerance, using the command from the palette menu. This capability is particularly useful for creating rectangular and oval paths via the Marquee tools, or for creating regular or freeform shapes via the Lasso and Magic Wand tools. Once converted to paths, the shapes can then be quickly and smoothly edited using the Pen, Add Anchor, Delete Anchor and Convert Point tools. If you wanted to create a lemon-shaped selection, for example, you could create an elliptical selection, convert it to a path, add and shift anchor points as appropriate, and then convert it back to a selection.

Once a path has been loaded as a selection you can colour correct it, apply a filter, or format it just as you would with a selection created with the pixel-based selection tools. In fact you gain considerably more formatting power if you don't first load the path as a selection but rather use the Path palette's dedicated Fill Path and Stroke Path commands. In terms of fill formatting this again opens up the ability to specify anti-aliasing and feathering to give your work a smoother edge. In terms of stroke formatting the Path palette command works in a completely different way to the Edit>Stroke command letting you choose any of 15 tools from the airbrush through to the retouching sponge to apply along the length of the path. This is very useful when you need to create a perfectly smooth brush stroke as it means you can set the path up carefully and then, when you are happy with it, instantly apply the brush effect with the Stroke Path command.

Used in these ways it's clear that the Path tool's vector-based control and flexibility does indeed offer benefits - but only as a means to an end. In other words the Path tool is really just a middleman used for eventually creating a pixel-based selection or pixel-based formatting. There is one case though where the vector nature of the path is itself important. Using the Path palette menu's Clipping Path command you can select any path that you have previously stored and mark it as your image's "clipping path".

This offers no benefit within Photoshop itself but if you save your image to EPS format (or nowadays to TIFF) and load it into a professional DTP program, such as XPress or InDesign, you'll immediately see the impact. The bitmap image is masked by the vector path so that everything outside the clipping path becomes transparent and disappears. In fact (as we saw in RW 57) this is crucial for producing high quality printed layouts containing non-rectangular photographic objects as Postscript's bottom-up imaging model doesn't support true top-down transparency. It might be crucial but that doesn't mean it's ideal. Having to use vectors to define the shape of bitmap objects means that their edges cannot be anti-aliased or feathered so that typically the edges appear too hard as if someone has crudely cut out the photographic object with a pair of scissors.

Vector based clipping paths are used for producing layered layouts involving non-rectangular bitmap objects.

Once again then, as with selection and formatting, the Path tool proves useful but only as a way of producing a final pixel-based effect. The real problem though is that in each case the workaround is so awkward. In particular no connection is maintained between the vector path and its resulting pixels so that editability and flexibility is lost. You can use a path to make a selection, for example, but if you then move the selection any link is lost. Likewise you can use a path to create filled and stroked shapes, but if you then want to change the formatting you have to start again from scratch.

Object Based Handling

In fact you can find a way around this to some extent at least by keeping separate layers associated with each path and replacing the layers whenever you want to edit the shape, but clearly this piling of workarounds on workarounds isn't ideal. The obvious solution is for the photo editing software to maintain the link between the defining vectors of the path and its pixel-based formatting. Once integrated in this way what you have is an integrated vector/pixel object that can be easily selected, repositioned, edited, reformatted and scaled. Because the object is separate from the underlying image it's shape and formatting can be edited non-destructively and thanks to its vector nature the object can be scaled too without loss of quality.

This move from simple paths towards increasingly advanced vector-based objects can be seen in the recent releases of Paint Shop Pro. Version 6 introduced the concept by letting you add any of fifteen shapes - rectangles, ovals, arrows and so on - as individual objects complete with non-destructive control over simple outlines and flat fills and the ability to transform and edit objects. With the recent launch of version 7 this has been enhanced with hundreds of new shapes, new formatting control including gradient and texture fills and dashed and dotted strokes and new organizational control including the ability to align, distribute and group objects. When you see some of the advanced vector-based images that it's possible to create with Paint Shop Pro it's easy to imagine that you are working within a dedicated drawing program.

Paint Shop Pro 7's vector handling approaches that in simple drawing packages.

However it's important to realize that you're not. While you can easily create a vector-based logo within Paint Shop Pro, for example, and then re-use it at different sizes the end results will be good - but not as good as if you had produced the image within a drawing package and printed it from there. The difference is between scalability and true resolution-independence. When printed, Paint Shop Pro's vector objects are automatically rasterised and output at the same resolution as your underlying image. Thanks to anti-aliasing the end results are smooth rather than jagged but due to halftoning they will never be pin sharp and, for text in particular, that just isn't good enough.

So is the benefit of vector handling within bitmap environments overplayed? No for two reasons. To begin with, as you work, the editability, scalability and organisational flexibility of working with vectors is huge. When it comes to output too, the lack of resolution-independence isn't necessarily a problem. In particular if the end destination of your work isn't the printed page but rather onscreen viewing, then pin sharp output is no longer an issue and indeed the ability to anti-alias vectors when rendering becomes an advantage. The most obvious case is for Web work which relies heavily on handling shapes and text and which ends up being output as bitmapped JPEGs and GIFs.

The first application to fully appreciate this and to capitalize on the use of vector-defined objects within a Web-oriented bitmap environment was Macromedia Fireworks - and it is still the program that has taken things farthest. While Paint Shop Pro lets you change the format of shapes, for example, Fireworks lets you retrospectively change the appearance and path of individual brush strokes! Even more powerful is the way it offers not just fill and stroke control but also effect-based formatting. Using this you can quickly and consistently apply 3D bevels, embossing, drop shadows and glows, seamlessly combining the benefits of pixel-based photo realism and creativity with the scalability and control of vector-based shapes and paths. 

Fireworks takes vector handling into new territory with effect-based formatting.

Photoshop 6

The benefits of such truly integrated vector and pixel processing are so huge that even Photoshop had to take note and, with the recent launch of version 6, it has completely overhauled its vector handling capabilities "to move beyond pixels". The first indication of this is the provision of dedicated rectangle, oval, rounded rectangle, line and polygon tools along with a catch-all Custom Shape tool that lets you choose from a range of pre-supplied solid and outline arrows, stars, crosses, thought bubbles and so on. This is undoubtedly a huge step up from the Path tool and converting selections, but it's hardly up there with some of the photo-realistic clipart that Paint Shop Pro offers.

Initially the formatting control looks weak too with the shapes you add simply filled with the foreground colour by default and no obvious way of specifying any sort of stroke at all. At least each shape's vector path is now linked to its bitmap formatting so that if you move or edit the path the object is automatically updated accordingly. This is undoubtedly a big advance on the traditional Path tool but you are in for a big surprise if you now try and change the fill of just one of the objects you've added as instead they will all be reformatted!

This is hardly object-level control and if you look at the Layer palette you'll see why - rather than listing all the individual shapes as individual objects as Paint Shop Pro does, what you'll see is a single shape layer with a layer mask masking out everything that isn't the shape or shapes you've drawn. Rather than each shape being a separate object with its own formatting, each shape is created as a layer with a vector clipping path on its layer mask. Effectively all shapes are masked windows onto their associated layer! In other words this is an automated version of the workaround of associating each path with its own layer, using the layer mask as the link.

Shapes are handled in Photoshop 6 as clipping paths on layer masks.

Oh dear. Compared to a fully integrated object-based solution this looks like a semi-detached workaround and, sure enough, it immediately leads to complications. How for example do you create a logo made up of multiple, differently formatted objects? It can be done but you have to make sure that each object is added on its own shape layer. That's awkward enough but, since you can't select objects across layers, you can't simply align, distribute or group your objects but first have to link the layers and then use the awkward Layer menu commands. And once laboriously created, you can't even save your logo for easy re-use as Photoshop limits you to saving single shapes without formatting. Managing simple logos is bad enough but more sophisticated drawings often involve hundreds of shapes each with slightly different formatting - trying to manage these as separate layers would be totally impractical.

So has Adobe made a terrible mistake with its implementation of vector technology? Not at all. To begin with I'm not overly worried about the downsides. The fact that Photoshop isn't the right program for creating advanced Illustrator-style drawings shouldn't really surprise because that's what the vector-dedicated Illustrator is for. And in any case the current difficulties of trying to organize multiple layers compared to the simplicity of organizing multiple objects is largely a matter of presentation. If a future Photoshop lets you select across layers to align, distribute and so on, the fact that behind the scenes each shape is actually a masked layer would become largely irrelevant.

More importantly Photoshop's masked-layer approach to shapes offers a whole range of benefits. To begin with the fact that all shapes on the same layer have to share the same formatting can be a strength rather than a weakness. For Web work in particular it means that setting up consistent buttons is child's play. You can even set up striking effects such as a single gradient shared between multiple buttons that would be near impossible to produce with an independent object-based approach.

The formatting power on offer benefits hugely in other ways. The default foreground colour fill for the object is actually created as a mask onto a content layer, so that to non-destructively change the object's colour you simply have to double-click on the content layer in the Layer palette and select a new colour. Otherwise formatting is best handled through applying layer effects in the new Layer Style dialog. These allow you to set up colour, gradient and pattern overlay effects for fills while using the new Stroke effect you have the same control over the shape's outline too.

This is only the beginning. You can also select from an impressive range of pixel-based formatting effects, such as shadows, glows and bevels, each of which offers unbelievable levels of control. Best of all you can easily combine effects and save them as styles ready for re-use straight from the new Styles palette. It's simple to create a re-usable Web button format based on a pattern fill with a 50% gradient overlay and a combination of 3D bevel and drop shadow - and which only changes the hue of the underlying image! First impressions are very deceptive then as Photoshop 6's shape formatting leaves Paint Shop Pro gasping and seriously challenges Fireworks.

And Photoshop still has a number of tricks left up its sleeve. As each shape is actually just a vector clipping mask onto the underlying layer, there's no reason why that layer should be restricted to style-based formatting. Using the Change Layer Content command you can convert the underlying layer to an adjustment layer, for example, so that you can turn your shape into a floating lens to apply colour corrections, posterizations and so on. Alternatively you can select any bitmap-based image layer apart from the background, add a shape as a new work path and then use the Add Layer Clipping Path command to turn it into a pin sharp vector mask.

And ultimately this is the real coup of the Photoshop approach - all these shape-based effects remain pin sharp even when printed! I have to say that when I first saw this I couldn't believe it as I've got so used to automatic rendering and anti-aliasing but, assuming that you're outputting to a Postscript device and that you've selected to include vector information in the new Print Options dialog, the edges of your vector based shapes and text are truly resolution-independent. Scale up your image and your shape and text's bitmapped content will still pixelate as it shares the same screening values as the background image (just as well as you need to be able to overlap vector and bitmap layers) - crucially though your object's edges will remain absolutely pin sharp. The result is a huge improvement in quality that open up whole new avenues of creative print.

Thanks to their clipping path nature, Photoshop 6 lets text and shapes be printed as true resolution-independent vector information.

The obvious question is how does Photoshop pull it off? The magic lies in the program's apparently awkward mask-based approach to vector handling. Normally when printing Photoshop sends a single flattened bitmap, now it can also send separate images for each shape and type layer clipped to their vector clipping path. In other words when printing Photoshop can act like those DTP applications handling placed images with clipping paths. The beauty is that here the vector clipping path is actually defining vectors so that the resulting sharp edges are an advantage rather than a disadvantage.

In a way Photoshop's clipping path based handling of shapes remains a workaround but it is a workaround that opens up whole new areas of creative potential and ensures that Photoshop's vector handling is as useful for print work as it is for the Web. With some clever lateral thinking, Adobe's developers have turned what looked like a fatal weakness into the secret of its success.

Tom Arah

December 2000

 


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.