Computer Arts (January 2004)

Citation preview

0870 333 0919

QTFGTQPNKPG GOCKNWU [email protected] www.webfusion.co.uk

CD EXCLUS IVES

Official Photos CS video train hop ing PLUS Flash to worth £150! ols

THE WORLD’S BEST–SELLING CREATIVE MAGAZINE

ILLUSTRATION

SECRETS UNVEILED How to fulfil any brief – experts reveal the ideas and techniques behind real-life design

SELFRIDGES EDITORIAL

EUROSTAR ADVERTISING

ORB DRINKS PACKAGING

ATTIK POSTERS

27 PAGES OF TUTORIALS

THE PERFECT BLEND

Our ultimate guide to Photoshop Blending modes

ATTENTION SEEKERS Design and output a club flyer – we show you how

WEBSITE ESSENTIALS Control your typography in Dreamweaver

PLUS: DV CAMS UNDER £700 Printed in the UK

No CD? Please see your newsagent

Outside the UK and Éire £6 C$ 19.95

JANUARY 2004

£6

0 1 9 771360 537024

Host Unlimited Domains with the UK's best reseller solution

The Reseller account is a great way to manage multiple websites. Our unbeatable range of features - such as brandable web-mail, website creator and spam filtering - sets you apart from the competition and our award winning online control panel allows you to set up and manage services in real-time.

Technical Support for your customers Exclusively available from Fasthosts, and unique to the hosting market - Fasthosts' Resellers can now choose to enhance their technical support with Brandable TechDesk:

• Every element of the the service branded in your name. • Full technical support available covering: email, hosting,

Unlimited Domains

FrontPage Extensions

You can easily add an unlimited number of domains to your account at no extra cost. All your domains are load balanced across multiple servers using our unique envisage Hosting Technology. Each domain is a full Virtual Server hosted on your choice of Windows 2003 IIS6 or Linux Apache servers.

You can install Microsoft FrontPage Extensions 2002 on any of your domains.

envisage supports ASP, ASP.NET, Perl, PHP, ODBC and CGI. You can also instantly enable the .NET framework on any of your domains.

Our award winning online control panel is the industry leading tool for managing and provisioning your services. You can control everything from the web - from setting up domains, email, databases, installing FrontPage Extensions and more! All of the features of the reseller package are managed via your control panel.

Web Builder

Customized Control Panels

Our feature-rich online website building tool enables your customers to create their site with an easy to use wizard. There are advanced editing options for more knowledgeable users and as a reseller, you can custom brand the web builder with your own identity and logos.

You can setup control panels for your customers to use to manage their individual domain names and services. You can completely customize the look and feel of your client control panels.

Scripting

domain registration, Internet access and more 9am to 9pm, Monday to Friday. You • specify the technical support your customers receive. • All support calls answered in your name. • Instant online set up and activation from your Reseller Control Panel. • Unique script debugging and advice service covering technologies such as CGI, PHP, ASP and Perl. • Online support ticket reports keep you informed 100% of the time. • Your own unique technical support premium rate number - your customers only pay for the expert advice they receive over the phone, at just £1 per minute including VAT. Your • Brandable TechDesk set up, managed and administered by us.

Matrix Web Stats With Matrix Stats you can monitor and analyse your websites traffic. Matrix Stats runs in real time and can be installed on any of your domain names.

Email All your domains have unlimited POP3 accounts and forwarders. We also offer web-mail (which you can brand for your customers), virus scanning, spam filtering and SMS email alerts.

......................................................

connected

Databases

"I've tried all the reseller offerings out there and it's no wonder that everyone follows Fasthosts"

Control Panel

You can setup MYSQL and MSSQL databases instantly and use them with any of your websites.

Plus.... • • • • • •

Your own custom name servers Create unlimited FTP accounts SSL Support Media Streaming Password Protected Folders on your sites Create dialup accounts for your customers: become a virtual ISP! FREE INSTANT SET UP

£50

.00

PER MONTH OR £500.00 PA

*Some of the features mentioned above incur additional charges. Please see www.fasthosts.co.uk for full price tariff.

.......................................................................................................

GEOFF COLLINS MXT LOGISTICS

The power behind web hosting

All your hosting needs

• • • • •

• • • • •

Multiple Internet Connections Xtreme Support 24 x 7, 365 phone and email Online FAQs, Knowledge Base and White Papers State of the Art UK based Data Centre UK's best value domain names at www.ukreg.com

Starter package from £1.99 Business packages from £14.99 Developer packages from £19.99 Dedicated server solutions from £89 30 Day Money Back Guarantee

0870 888 3770 For more details and to launch your service within minutes, visit www.fasthosts.co.uk

CA100

To speak to our Sales team call

INTRO E EMAIL OUR DESIGNERS AND ILLUSTRATORS – THEY WILL GET BACK TO YOU WITH REALLY INSIGHTFUL ANSWERS

ILLUSTRATORS We take our illustrations seriously here at Computer Arts, and this month wanted to look internationally for designers. We’re always on the lookout for new international talent – so if you’re interested in contributing, contact [email protected]

CIRCUS BY ACRYLICK, SPAIN Amanda Nolan of Madrid-based design agency Acrylick designed the illustration for our Affordable DV Cam Group Test on page 94. WWW.ACRYLICK.COM {THS}, GERMANY Founded by Thomas Schostok, {ths} is a small design studio providing print, Web and illustration solutions worldwide. It created our Dreamweaver illo on page 68. WWW.THS.NU BENNY LUK, HONG KONG 24-year-old Hong Kong designer Benny Luk is crazy about vector art, graphics and Chinese culture. He designed the spread for our Photoshop Blending feature on page 58. WWW.SIXSTATION.COM 123KLAN, FRANCE A consortium of vector enthusiasts who delight in bringing a stylised graffiti aesthetic to the Web, 123Klan illustrated our Flash feature, starting on page 36. WWW.123KLAN.COM

veryone’s curious – Computer Arts readers especially. If we’re not getting emails asking the designers and illustrators we profile how much they charge for projects, we’re being badgered to put a Webcam in the office (not a chance). But recently, emails have been arriving along a different theme. It seems that you want to know not just about the techniques involved in a project, but the real nittygritty – the decisions about colours, composition and style. And it’s these elements that could well determine a project’s success or failure. It’s not all innate, of course; it‘s not always a case of you’ve either got it or you haven’t. You can gain a lot of inspiration from looking at other people’s work and thinking about how and why they did what they did. Don’t hold back on emailing our illustrators or designers about the creative process – a lot of the time they will get back to you with some really insightful answers. This is an interactive magazine, so make use of us! But this issue, you needn’t bother, because we’ve done the legwork for you. Starting on page 26, the talents behind four commercial illustration projects reveal exactly what it takes to fulfil a typical creative brief… How much input did they really have? Why did they

COVER ILLUSTRATOR MAGICTORCH, UK

This month’s ‘Creative secrets’ cover image was produced by Sam Williams, one third of illustration company and Computer Arts regular, Magictorch. Alongside Mike Chipperfield and Sam Chivers, Magictorch has contributed reams of stunning artwork to Computer Arts, Computer Arts Projects and other publications, including Dazed and Confused and Total Guitar. WWW.MAGICTORCH.COM

select those colours or opt for that particular style? And what software helped them achieve their goal? The result is a must-read – not just for the technical insight, but the imagery, too. Once you’re buzzing with your own creative ideas, try some of our in-depth tutorials on flyer design in FreeHand MX, interface design in ImageReady CS and Flash MX 2004, or typography in Dreamweaver MX 2004. Read our comprehensive guide to Photoshop’s Blending modes or head over to the CD-ROM for over two hours of exclusive video tutorial by Adobe’s own Photoshop guru, Russell Preston Brown. Our profiles this issue feature Hydro74 and Subliminal Associates – two very different but successful design outfits who offer plenty of advice of their own. The illustrations this issue also have an international flavour to them, with contributions from all over the world – indisputable evidence that computer art has truly gone global. Finally, the Computer Arts team wishes you all a very happy New Year. Keep emailing and sending in your artwork throughout 2004. VICKI ATKINSON EDITOR, THE WORLD’S BEST-SELLING CREATIVE MAGAZINE

EDITORIAL THE CA TEAM VICKI ATKINSON EDITOR [email protected] RODDY LLEWELLYN ART EDITOR [email protected] ROB CARNEY DEPUTY EDITOR [email protected] RACHEL ELLIOTT OPERATIONS EDITOR [email protected] JON ALONGI CD EDITOR [email protected]

CONTACT Computer Arts magazine, Future Publishing, 30 Monmouth Street, Bath, BA1 2BW PHONE 01225 442 244 EMAIL [email protected] SUBS 0870 444 8455

Computer Arts_January 2004

3

CONTENTS JANUARY ISSUE 92 NEWS

FEATURES

REVIEWS

TUTORIALS

SHORTCUTS

REGULARS

12 Atmosphere 1, LiveMotion 0 14 New 20-inch iMacs 16 Doing the Tango 20 Guest font showcase

36 Photoshop CS & Flash MX 50 Flyer design 58 Blending modes 68 Dreamweaver MX

SUBSCRIBE

TODAY AND SAVE 40 PE R CENT!

FULL LIST OF CONTENTS

MAKE A NEW YE AR’S RESOLUTION NO W…

NEVER MISS AN OTHER 26 Illustration secrets unveiled 77 Full listing ISSUE –TURN TO PAGE 64 78 Creative Suite 42 Subliminal Associates 82 Modelshop 66 Hydro 74 in profile 88 PowerBook 17-inch 94 Affordable DV camcorders

24 InDesign CS 35 Illustrator CS 48 After Effects 6 56 3ds max 75 Photoshop CS

10 Your letters 22 Win a shiny new Wacom tablet! 64 Save 40 per cent on the price you pay in the shops when you subscribe 100 Back issues 108 Exposure 114 Retrospective

ON THE COVER 26 ILLUSTRATION SECRETS UNVEILED Four of the world’s top designers and design studios reveal the secrets of commercial illustration – from packaging to advertising

58 PHOTOSHOP BLENDING MODES

Master some of Photoshop’s best Blending modes and make your illustrations and designs stand out from the crowd!

50 FLYER DESIGN

Discover the ins and outs of professional print design, as leading firm Output guides you through the process of creating a club flyer

26

36 PHOTOSHOP CS AND FLASH MX

Learn the secrets of combining Photoshop CS, ImageReady CS and Flash MX 2004 to create dynamic interface elements and designs

58

50

Illustration by Spencer Hickson. Turn to Exposure on page 108 Have your work featured here – email [email protected]

OTHER HIGHLIGHTS

42

78 42 SUBLIMINAL ASSOCIATES We meet the subconscious design firm that’s not afraid of throwing their briefs in the bin

68

68 DREAMWEAVER MX 2004

Take control of your site’s text and layout with Dreamweaver MX 2004’s fantastic CSS tools

94 AFFORDABLE DV CAMS

Five of the best budget digital video camcorders put to the CA test. Which will come out on top?

78 CREATIVE SUITE REVIEW

94

We deliver our verdict on 2003’s hottest creative software release – don’t miss this!

FULL LIST OF CD CONTENTS

^

FULL PROGRAM PC + MAC

AUTO-ILLUSTRATOR 1.0 Check out this awesome illustration tool from Signwave!

T

his month, Computer Arts teams up with Adobe to bring you exclusive video training from Photoshop guru Russell Preston Brown. Learn Photoshop CS from the man who was there when John and Thomas Knoll pitched the app to Adobe! There’s also Dr Brown’s handy conversion tool Image Processor (see page 7 for more), plus cool full products Auto-Illustrator 1.0 and FlashAmp 1.1.2. Enjoy!

CD92 CONTENTS OFFICIAL ADOBE TRAINING (PC + MAC) VIDEO TRAINING: Russell Preston Brown,one of the men responsible for Photoshop, reveals some time-saving techniques and creative ideas in these fantastic video tutorials

ignwave’s Auto-Illustrator is a different kind of vector graphics utility. The company proudly claims that it’s “an experimental, semiautonomous, generative software” – in other words, a fully functional, vector graphic design application that can automatically generate graphics for you with the minimum of fuss. Use the award-winning Auto-Illustrator to help you create incredible vector graphics and shapes, then export them to your main graphics tools for further manipulation. Remember: this is a full version with no restrictions – and it won’t time out. Use it to explore a wide range of generative and procedural techniques, then, with a little effort and creativity, it could become one of your favourite and most-used apps.

S

FULL PRODUCT: Use this fantastic utility with Flash to control animations and other events via sound. See opposite for more

MDM STUDIO HOME (PC) FULL PRODUCT: MDM Studio Home offers four great Web utilities, including FlashCast Home – a tool that enables you to create SWF-based training videos and product demos. See page 8

THE TAB (PC) 15-DAY TRIAL: Take The Tab for a 15-day test-drive, exploring all the features of this comprehensive 2D animation package. See page 83 for the CA review

ARTIST SHOWREELS Check out these fantastic showreels from Yann Caloghiris and The Ronin

TUTORIAL FILES

FULL PROGRAM PC & MAC

FLASHAMP 1.1.2 Fantastic Flash app for controlling animations using sound

W

e’re really excited to be bringing you this full product. FlashAmp 1.1.2 is a utility for use with Macromedia Flash that enables you to control animations and other events in Flash using amplitude or spectrum (frequency) values derived from sound files. Amplitude values represent the relative loudness of a sound wave, whereas spectrum values represent the relative power of individual frequency bands within a sound. With FlashAmp, you can create lip sync in Flash MX in seconds, rather than hours. Make sure you take advantage of the special upgrade offer to FlashAmp Pro 2 below. To use FlashAmp 1.1.2, you’ll need to enter the following information when prompted:

You’ll find all the files you need to complete this month’s tutorials here – Blending modes, Flyer design, Interface design and more

Username: Computer Arts Special Serial number: IN70674 Licence type: Single-User Number of licences: 1 INFO www.marmalademedia.com.au. See your CD inlay for the application’s system requirements

SPECIAL OFFER! Take advantage of our upgrade offers! FlashAmp Lite Upgrade offer: $15 (£9) – normally $35 (£20) Secure order form: https://secure.element5.com/ shareit/checkout.html?productid=196844&language =English

FlashAmp Standard Upgrade offer: $35 (£20) - normally $65 (£38) Secure order form: https://secure.element5.com/ shareit/checkout.html?productid=196846&language =English

BOOK CHAPTERS Free sample chapters from the latest Apress and Peachpit design books!

FlashAmp Pro Upgrade offer: $70 (£41) – normally $120! (£70) Secure order form: https://secure.element5.com/ shareit/checkout.html?productid=196845&language =English Lip-synching need never be a problem with FlashAmp.

6 Computer Arts_January 2004

INFO www.signwave.co.uk. See your CD inlay for the application’s system requirements

^

FLASHAMP 1.1.2 (PC + MAC)

3XP3N-51VE-50FT-W4R3

With just a few clicks, you’ll soon be creating superb vector art.

AUTO-ILLUSTRATOR 1.0 (PC + MAC) FULL PRODUCT: A superb, fully functional vector graphic design app to sit alongside your existing professional graphic utilities – for free!

To use Auto-Illustrator 1.0, simply enter the following serial number when prompted:

On the CD

^

VIDEO TRAINING PC + MAC

RUSSELL BROWN’S POWER HOUR COMPUTER ARTS EXCLUSIVE! Official video training and brand new Photoshop CS techniques from the godfather of Photoshop, Russell Preston Brown

Learn Photoshop CS from one of the pioneers of the application – Russell Preston Brown. (Left) Preston Brown talks you through the intricacies of the new Layer Comps feature.

These exclusive video tutorials from Russell Preston Brown and Adobe discuss the new features of Photoshop CS – including the new Lens Blur feature, pictured above.

T

his month, we’ve teamed up with Adobe to offer you exclusive Photoshop CS video training from Russell Brown – one of the forefathers of the application. There are a whopping eleven video tutorials in total, each presented in Russell Brown’s unique and entertaining manner and dealing with a massively diverse range of Photoshop CS topics. These expert tutorials will teach you the ins and outs of the new Shadow/Highlight command, give you a valuable insight into Photoshop colour management, give you the full lowdown on the new Layer Comps feature and much more. There’s also a fascinating tutorial on how to light your photographs by using layer masks – a

Take advantage of the new features of the File Browser, as Preston Brown shows you how to get your Photoshop and digital photography workflow just right.

Learn how to create stunning lighting effects just using layers with this insightful tutorial.

we challenge any user of this program not to discover something new. We also bring you Dr Brown’s Image Processor. This is a fantastic script, accessible from the Photoshop File>Scripts menu (just browse for it

OFFICIAL

ADOBE V

IDEO TRAINING

THERE ARE A WHOPPING ELEVEN VIDEO TUTORIALS IN TOTAL, EACH PRESENTED IN RUSSELL BROWN’S UNIQUE AND ENTERTAINING MANNER technique you will certainly use in many projects. There’s over an hour of valuable advice, tips, tricks and techniques here that you cannot afford to miss – Russell Preston Brown is one of the world’s leading authorities on Photoshop and

from this menu), enabling you to quickly convert images from any format, to any format. Powerful batching capabilities make this a fantastic time-saver. INFO Head to www.russellbrown.com and www.adobe.co.uk for more info

The new Shadow/Highlight feature in action – learn all about how to bring dark areas of your photographs back into view with the expert tips.

Computer Arts_January 2004

7

^

FULL PRODUCT PC

MDM STUDIO HOME Your chance to experiment with MDM’s feature-rich application development suite DM Studio HOME is a suite of four exciting Web tools that will add to your productivity and give you the ability to produce fantastic applications, training videos and Flash-based interactive desktop wallpaper. Usually sold for £150, the HOME edition is for use on personal projects only. If you want to distribute your files on a royalty-free basis, upgrade to the PRO edition – see below. In the meantime, check out exactly what you’re getting with MDM Studio Home…

M

FULL

APP W ORTH

£150 FLASHCAST HOME This gem of a utility is a nifty application that you can use to create training videos and learning tools in the SWF format. The application captures your desktop activity, including mouse-clicks and key presses, and then enables you to output the resulting file as an SWF. An intuitive spreadsheet-like interface gives you control over individual captures – making it easy to create SWF-based video training for showing your colleagues a new technique or as a general training resource.

FLASH STUDIO HOME Flash Studio HOME is a superb tool for compiling a fully customisable projector file (.exe) or Windows screensaver (.scr) from your Flash 4, 5 or MX SWF files. In addition, the tool enables you to create organic-shaped .exe files, so you can give your applications new and interesting shapes – perfect for making presentations stand out. It also enables you to extend Flash ActionScript with fscommands and pack five additional files into the .exe application.

FIRESTORM REMOTE EDIT HOME Firestorm Remote Edit HOME enables you to connect to any Website on the Internet via FTP, and edit or update any aspect of it in a true WYSIWYG environment. You can actually make changes as if you’re working locally. With the HOME edition, you can upload images, as well as make changes to text and so on. Spot a mistake online while you’re out of the office and, thanks to this highly practical tool, it’s easy to remedy the situation.

Save £100 on MDM Studio PRO! FLASHCANDY HOME FlashCandy is one of those tools that’s both useful and fun to use. In a nutshell, it enables you to create Flash-based wallpaper for Windows machines – so you can add interactive and animated content to your desktop with ease. You can create an installer for the wallpaper, and the tool even gives you a WYSIWYG preview of the wallpaper before you create it, so you can add installer messages and change the install directory.

8 Computer Arts_January 2004

We’ve teamed up with Multidmedia Limited to bring you the chance of getting your hands on MDM Studio PRO, the fully-specced tool with many more features, and one that grants you the right to distribute your files commercially – all for only £119.99. That’s a saving of £100! To take advantage of this offer, simply go through the ordering process as normal at www.multidmedia.com and enter the following coupon code:

mdmHomeUPG INFO For more details about MDM Studio HOME and MDM Studio PRO, see www.multidmedia.com. Please note: you must have an Internet connection to install this product. Offer ends 31 May 2004

LETTERS DISCOVERY

HAVE YOU GOT A POINT TO MAKE ABOUT THE MAGAZINE, A CREATIVE PRODUCT, A SHOW OR THE INDUSTRY AT LARGE? EMAIL YOUR THOUGHTS TO THE TEAM AT [email protected], OR JOIN US ONLINE AT FORUM.COMPUTERARTS.CO.UK

was the answer. I never heard of Photoshop until I went to an Adobe seminar out of curiosity, and was totally blown away. I bought the programs, but felt intimidated because there was so much to learn. I tried using the enclosed books, then I started buying additional books which left me confused, because I didn’t know where all the tools were located. Just by chance, I walked into the bookstore and noticed CA magazine had Photoshop on the cover; on closer inspection, I realised it had tips and tricks, step-bystep projects, samples, etc. Everything that could feed a nation of graphic artists, in fact. I bought one, took it home, loaded the disc, followed the tutorials and, to my surprise, finished a project. I overcame my fear. Now I’m an addict! Because of CA, my confidence has struck a high. I’m no longer afraid of not being able to physically draw, and have had enough knowledge to assist our graphics department the to files JPEG or ng it to us as high-resolution TIFF UK. Get your artwork in print by sendi with some very Monmouth St, Bath, BA1 2BW, 30 Arts, uter Comp ure, Expos following address: tight deadlines. I I’ve never written to a magazine before, but I can’t put this off any longer. I wish I could personally buy your mag for every graphic artist I know, because only then would they see just how great and professional Computer Arts really is. Not to get too verbose, but I’ve been diagnosed with Multiple Sclerosis, which is slowly taking away the physical use of my drawing arm. Being a creative person, I had to find something and my computer

have even had the greatest opportunities to create logos and designs for my friends’ businesses, and even teach some for those who wish to learn. In short, thank you for your continued dedication to the graphics world, your research and dedication to utmost perfection. Within the few 100+ pages, there’s essential information for those who do not have time to procrastinate. You have tapped into the best, and that puts you head and shoulders above the others. Ken Kirtland Wow, we’re absolutely honoured that we’ve been able to help you out, and really pleased you’re pushing your computer skills further, despite your setbacks. Once you’ve done work you’re really proud of, please send it in to our Exposure section, where we display all our readers’ works.

TUTORIAL CD FILES I’ve noticed on the forums discussion about how some tutorials don’t actually come with files, where you’ve explained that readers should follow the techniques with their own photographs. I’m in two minds about this; I’m one who believes that practical magazines should provide everything the user needs to follow the techniques, but on the other

★ LETTER OF THE MONTH THE LICENCE QUESTION I read with interest last month’s letter concerning Adobe’s licensing for the Creative Suite. I often read about people disputing licences, and I’m urged to recount how expensive software used to be a few years ago. You were also required to have a decent range of software that could cover any client demand. To set up our studio around four years ago was approximate to the cost of a small castle, for example. We had an awesome suite – full licensed versions of Photoshop, commotion, Director, Katabounga (remember that one?), GoLive, Maya and much more, but we didn’t make a significant profit, just had a lot of fun. For Adobe, Macromedia, Corel and others to offer their suites of tools in packages is an absolute boon. The savings involved amount to the cost of a decent 3D

10 Computer Arts_January 2004

package. A valuable saving for any small studio or freelancer. There will always be people who ignore the licence, but beware. The Web agency next to us, shall we say, omitted paying for some of their seats and landed themselves in big trouble. I hate to be a doomsayer but there are people out there watching and checking anything from portfolio sites to awards nominations, and after what I saw them go through, I can categorically say it’s not worth it! Invest time and money in your talent and it’ll definitely pay off. Name and address withheld Something else that’s different these days is the lack of manuals – it’s all PDF these days. As for licensing, that’s a serious issue. It’s too easy for young start-ups to follow the tide of piracy, which is utterly inadvisable.

If you want to make it as a professional digital artist, it’s important to invest in your own software as much as your talent.

NEXT MONTH COMPUTER ARTS 93 ILLUSTRATOR CS & PHOTOSHOP CS IN ACTION Design outfit Identikal shows you how to make the most of these latest new upgrades In CA 89, Rob Lindström didn’t provide CD files with his exclusive Flash and Photoshop tutorial, because he wanted readers to follow the tutorial with their own work. He’s since made an exclusive wallpaper from his image at www.designchapel.com.

hand, I’ve been dipping in and out of Computer Arts for four years, following tutorials that catch my eye, and the chance to do what they do with my own photographs or textures is great. So yes, although it’s great to have a CD packed with resources, I’m also fine with being challenged a little. After two years of reading CA, I was ready for my first proper brief – after four years I reckon I might even launch my own studio… Dan Jaye We always ask the experts who write our tutorials to send files to us, but that’s not always possible for copyright reasons, mainly. You’re right, though – following a tutorial with your own materials can, in fact, be more fulfilling than just using someone else’s resources. However, we continue to make an effort to provide tutorial files whenever possible, because we feel they make the magazine a complete package. You can now download the nun photograph – click on Issue 89 at www.computerarts.co.uk/cdrom.

PHOTOSHOP CS TRAINING I badgered my employers to get me a copy of the Creative Suite after reading your superb supplement. I can do my job fine using InDesign and Photoshop, but I’d like to see where Illustrator and a more advanced knowledge of the former apps might take my work. Where do I get a list of training courses? How much do they cost? I’d like to pick a good one before I approach my boss with the great news. I’m already getting a renewed subscription to Computer Arts, so I might be asking a bit much here! Jemima Harris If there’s anything better than getting a new upgrade, it’s getting your boss to pay for it. We run a list of current courses in our News section – see The Learning Curve on page 17. Two-day courses cost around £500; most are software-based, and as the Creative Suite is new there’ll be a lot of choice. Also check out our Classified section at the back of the mag.

FREE INSIDE ESSENTIAL MAGAZINE!

Macromedia Masterclass MX 2004 – Issue 2. We continue our special four-part series on creating rich Internet applications in Studio MX 2004. Issue 2 brings databases down to size – as easy as pie! *Supplement available to UK newsstand and subscribers only. To subscribe, call +44 (0)870 4448 455

CUBAN COUNCIL IN PROFILE

PAINTER 8 IN-DEPTH We can’t get enough of Corel’s natural media app. Pro illustrator Derek Lea takes you through the creation of a contemporary image, with a traditional feel

This eclectic design studio (above) has done some amazing work. Read all about its impressive output and witness some great design work

STILL MOVING Experiment with great effects using stills from your video footage

3D CHARACTERS GROUP TEST We put five of the best 3D character modelling and animation tools to the test

ON THE CD Nik Photoshop plug-ins, Illustrator CS demo and much more! REVIEWED SOON LightWave 7

Adobe Atmosphere

Boris FX 7

DAZ|Studio

EditStudio 4

New video-editing tools from Canopus

Silo

Character animation tools Group Test

New cameras from HP and Sony

Ulead DVD Workshop 2

Radeon 9800 Mac Edition

New printers from HP and Epson

Iomega CD-RW USB 2.0

ON SALE 22 JANUARY All contents correct at time of going to press

Computer Arts_January 2004

11

NEWS

SEND ALL NEWS, COMMENTS AND LINKS TO MARK PENFOLD AT [email protected]

NEWS HIGHLIGHTS

IMAC Apple’s latest all-in-one gets a 20-inch screen p14

TANGO MPC reveals secrets of latest cult TV ad p16

Adobe’s Atmosphere, which can generate interactive 3D stage sets like this, is set to replace LiveMotion 2.

ATMOSPHERE 1, LIVEMOTION 0 SOFTWARE One in and one out for Adobe. Not that you’d notice OPINION Ignore the prophets

of doom – go freelance! p17

COMPETITION Enter the Flash

competition of a lifetime p18

WEEKLY UPDATES

www.computerarts.co.uk

12 Computer Arts_January 2004

W

ith equally little fuss either way, Adobe has retired one application and discreetly launched another. Atmosphere, its “3D interactive stage set for the Web,” has finally escaped from a beta period many thought would never end – while LiveMotion, seen by some as Adobe’s answer to Flash, has been put out to pasture. LiveMotion 2.0 was officially discontinued on 15 November, although unless you caught the tiny notice on Adobe’s home page explaining this, you’d presumably

be none the wiser. One-to-one tech support for the title continues until 31 March 2004.

POOR FLASH RELATIVE Originally launched in 2000, LiveMotion was initially conceived as an adjunct to Macromedia’s Flash, with the emphasis on improved authoring tools. It offered many of the same capabilities as Flash, but was able to output to a greater number of formats and used JavaScript throughout. But the application met with a lukewarm response from Web designers already familiar to the

more advanced Flash, and version 2, launched last year, fared little better. With scant publicity from Adobe itself, and a general perception that the program would always be playing catch-up with the more ubiquitous Flash, LiveMotion never fully lived up to its potential. The move also comes amid speculation that Microsoft is developing a ‘Flash-killer’, codenamed Sparkle, reportedly to be included with the next version of Windows (codenamed Longhorn) in 2005 or 2006. This set of tools would allegedly be integrated with Microsoft’s .NET

News

PLATFORM ART ONLINE PUBLIC ART London Underground supports digital artists online

The latest releases, updates and software news INKSAVER 2.0 If you get through ink cartridges with any regularity, you’ll love InkSaver 2.0. Using clever software, the app optimises printer data so that your printer uses less ink – up to 75 per cent less according to Digital Workshop. Compatible with all major printers, but currently only available for the PC, InkSaver 2.0 costs £30. www.digitalworkshop.com GIMP 2 FOR OS X OpenOSX has just announced the impending full release of Gimp 2.0 for Mac OS X. The latest version of this open source rival to Photoshop features vector paths, editable text and G5 optimisation. Although the current iteration is still ‘test’ code, a full release, costing $15, isn’t far away. http://openosx.com/gimp2/

L

ondon Underground’s online showcase for its Platform Art project has now gone live. The site, designed by Airside, gives visitors a chance to see digital artworks which form part of the Tube’s ongoing public art program. “The site is a natural extension of our involvement in the visual arts and recognises that some great work is being produced which is purely digital,” explains project curator Tamsin Dillon. Plans are already afoot for a major event in February next year, followed by a rolling program of commissions. Creatively, Airside was given free rein – “London Underground let us go really leftfield,” says designer Nat Hunter, who worked on the project. The result is an idealised trip through the capital’s underground, complete with strange characters and interactive art. Airside drew on experiences its designers had had on the Tube when it came to creating many of its quirky

runtime environment, providing all-in-one Flash and Director-style functionality that would improve workflow considerably.

INTERACTIVE 3D On the other hand, the launch of Atmosphere is likely to raise a few eyebrows – not least because the program has been in public beta since March 2001. Atmosphere is a VRML-like tool for creating interactive 3D sets designed for the Web and enabling users to collaborate within them. As well as 3D objects, it has facilities for embedding directional sound, streaming audio and video, Flash animations and physical behaviours, all via a relatively sophisticated JavaScript environment. Atmosphere actually consists of three core products: the free downloadable player (which enables users to view the sets), the Atmosphere authoring program itself, and the Atmosphere Collaboration Server

digital figures. “We used snatches of overheard conversations which made no sense because you only caught the middle or end of them,” says Hunter. INFO www.tube.tfl.gov.uk/pfaonline

(also free). All tools are available for Windows only. Many expressed surprise at Adobe’s decision to develop a Web 3D ‘virtual world’ application when so many before them had failed. During its long incubation period, Atmosphere has become popular among small online communities and enthusiast developers, but few large commercial sites have yet embraced it. With almost zero fanfare at its launch, it seems likely that Adobe will be targeting Atmosphere more at educational and artistic users than major e-commerce sites. Adobe had no comment on the matter. INFO Atmosphere costs $399 and is now available to download from www.adobe.com

The axe finally fell on the troubled LiveMotion 2.0 on 15 November.

METAL FX WINS ‘BUSINESS OSCAR’ MetalFX® has been awarded the Innovation of the Year Award at the prestigious National Business Awards 2003. The pioneering system can print 104 million metallic colours using a five-colour press, so printers don’t need to update their machinery; the fifth colour (the special MFX® silver ink) provides the metallic effect. www.metal-fx.com BRANDABLE TECHDESK Web-hosting firm Fasthosts has launched a brandable technical support helpdesk for its reseller’s customers. Web studios will now be able to offer clients a technical ‘after sales’ support hotline for email, hosting, domain registration and Internet access in their own name. www.fasthosts.co.uk HDRI TEXTURE CDS Realtexture has brought out two 360-degree full-sphere HDRI texture CDs. With no visible cameras and enhanced resolution, Volume 2 provides 24 exterior lighting textures, and Volume 3 interior lighting. Each map comes in four flavours: Fisheye/Lightprobe, P-Sphere, Vertical Cube and Horizontal Cube. www.realtexture.com SMARTSOUND FOR PREMIERE PRO SmartSound’s Quicktracks plug-in for Premiere Pro is a simple audio editing tool, complete with royaltyfree music library. Of particular interest is SmartSound Elements, a click-and-play collection of 23 tracks. Access to the ever-expanding online SmartSound library is also provided. The basic package costs around £58. www.smartsound.com

Computer Arts_January 2004

13

20-INCH IMAC

Stay abreast of the latest art-enhancing technology G4 CPU UPGRADES Channel Dynamics has just announced a new power boost card for G4 Mac owners: PowerLogix’s PowerForce G4 Dual CPUs. Running at speeds of 1.2GHz or 1.4GHz, the new CPUs sport twice the L2 cache (512K) of previous cards and draw 40 per cent less peak. They should cost around £355. www.powerlogix.com

HARDWARE Apple’s wide-screened boy

T

he run-up to MacExpo in November saw Apple unveiling its latest consumer-pleaser: the 20-inch iMac, which features “the largest flatpanel display ever offered in an all-in-one desktop.” Costing just £1749, the machine benefits from a 1.25GHz processor and impressive 64MB NVIDIA FX5200 graphics chip, and should be on sale right now. While specifications-wise the iMac is identical to its 17-inch predecessor, the machine isn’t just a case of window-dressing by Apple. With the processing power and graphics capability needed for high-end apps now in place – and unlikely to develop much further in the case of the G4 – Apple clearly believes some consumers are more interested in refined features than upgraded hardware; in this respect, the iMac delivers. The addition of the professional-sized display is a case in point – if you’re working with video or in publishing, the extra screen real-estate is definitely worth considering.

FUJIFILM FINEPIX 610 Fujifilm has launched the first compact digital camera with a six-million effective pixel CCD. The new model also has two LCD screens: one for viewing images; the other for defining camera settings. Fujifilm claims its highresolution technology will enable the device to generate a recorded output of 12 million pixels. Price yet to be confirmed. www.fujifilm.com DUAL 1.8 G5 Apple is busy again this month, releasing a 1.8GHz dual processor G5. This brings the starting price for its new range of dual processor workstations to £1899. Fitted with 512MB of RAM as standard, the new G5 drives can also store up to 8GB. All new machines come with OS X Panther installed. www.apple.com FREE ULEAD SCANNER Buy a copy of Ulead’s awardwinning PhotoImpact XL from any PC World retail store before 24 December 2004 and you’ll receive a free Xerox 2400 scanner, worth £70. Handy if the wallet’s feeling a little threadbare in the run-up to Christmas. Check the Ulead Website for details. www.ulead.co.uk SONY 8X DVD BURNERS They may only be PC compatible, but Sony’s new dual DVD-RW drives, the DRU-530A and DRX530UL, are capable of burning at 8x speed – the fastest currently available. Both models support DVD+R and DVD+RW, as well as DVD-ROM, CD-R, CD-RW and CDROM for maximum compatibility. The DRU-530A is the internal version of the drive; it costs £179 and is available now. The DRX530UL, price yet to be confirmed, will be released in January. www.sony-europe.com

14 Computer Arts_January 2004

INFO www.apple.com

EPSON SCANNER BREAKTHROUGH HARDWARE Latest technology gives Epson flatbed device edge over film scanners

E

pson has just released details of its Perfection 4870 Photo, a flatbed scanner capable of producing resolutions to rival that of dedicated film scanners. With a top optical resolution of 4800x9600dpi and a moving transparency lamp, the Perfection 4870 can easily enlarge a 35mm film scan to A1 size, while the built-in Grain Reduction – just one of the hardware’s Professional suite of tools – enables you to remove any visible film grain from blown-up transparent media with ease. It also incorporates DIGITAL ICE, a revolutionary new hardware image-correction system that removes dust and scratches from images without the blurring usually associated with software solutions. The technology works by using a pair of light sources to pick out the shadows that surface blemishes, creases and tears create on your media. The Forget those erroneous software corrections made to your scanned images; now Epson puts the hardware in charge.

position of these defects are then mapped and automatically repaired, delivering, as Epson says, “a scanned image which improves on the original print.” Available in February, the Perfection 4870 should cost around £399. The software bundle features professional scanning app SilverFast SE6. INFO www.epson.co.uk

It combines full, new CS versions of Photoshop,® Illustrator,® InDesign,® and GoLive® with Version Cue,™ an innovative tool to help you manage and keep track of your files. Plus, it’s got Acrobat ® Professional. So now you can think, play and tinker around all you want, without holding yourself back. www.adobe.co.uk/therapy

THERAPY

©2003 Adobe Systems Incorporated. All rights reserved. Adobe, the Adobe logo, Acrobat, GoLive, Illustrator, InDesign, Photoshop, “Tools for the New Work” and Version Cue are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. All other trademarks are the property of their respective o wners.

Tools for the New Work™

Introducing the Adobe ® Creative Suite.

®

It’s a creative support group.

Adobe Creative Suite

It ’s more than creative software.

The hottest sites and services on the Web… FIRST BORN www.firstbornmultimedia.com The sophisticated home site for New York interactive design agency First Born is exactly what you’d expect it to be: smooth, enjoyable and easy to use. An impressive array of clients are on display, mostly from the worlds of fashion, sport and cosmetics, including Calvin Klein and Gucci. SEGURA INC www.segura-inc.com Concentrating mostly on print design, Chicago-based Segura has produced great work for a range of clients – from ‘Da Vinci’-themed merchandise for Ernst and Young to art for Vertigo Comic’s The Filth. It’s the sheer quality and variety of work on display that makes this site worth visiting. ASGER CARLSEN www.asgercarlsen.com This selection of shots taken by the Swedish street photographer Asger Carlsen on a recent trip to America reveals just what a bizarre place the Land of the Free can be. The images are well observed and convey a sense of place brilliantly. It’s like looking through the out-takes from someone’s private album. VECTORIZE www.vectorize.de Aside from teeming with great vector artwork, this smartly designed site also makes extensive use of photography and typography. The best-executed piece on the site is the interface for ‘Reflections’, a collection of images from a recent trip to California. The tutorial section is also worth checking out.

DOING THE TANGO MEDIA Moving Picture shakes up Britvic favourite

T

he Moving Picture Company used a combination of Photoshop, Shake and After Effects to paint, composite and animate the wobbly, gelatinous titles for its latest ‘Taste Buddies’ Tango ads, directed by Ulf Johansson. With only a week to fulfil the brief, co-ordinating workflow effectively between the three apps helped ensure delivery on schedule. “The great thing about working this way, instead of with inferno or Henry, is that you get to play a role in the creative process,” explains MPC Effects Artist Martin Cook.

Improved integration between Photoshop and Shake also proved a tremendous asset. “It’s changed the way we work around here,” explains Cook, enthusiastically. “We can now import Photoshop layers and effects wholesale into Shake. It’s great!” Flexibility is another key issue. “I started work developing an alphabet around the text given to us,” says Cook, “but inevitably that changed.” The improved integration means MPC can now implement changes more quickly and effectively than before. INFO www.moving-picture.com

DESIGN COUNCIL www.designcouncil.org.uk Design agency Simulacra was behind this superb revamp of the Design Council Website – which aims to give users all the information and assistance they require. According to Simulacra, the site “offers a means of translating enthusiasm for design into practice.” TIGER www.tigermagazine.org Issue 29 of this online Flash magazine is a real scorcher, showing off some classy fashion photography, interspersed with first-rate illustration. The work from Enrique Radigales and Matt Pagett alone make this issue worth looking at. Don’t forget to check out the interesting articles, reviews, and links to the sites of contributing artists.

WANT YOUR NEW SITE FEATURED? Send the link to [email protected] with the subject header ‘Websites’.

16 Computer Arts_January 2004

MPC was responsible for the entire post-production work on the Tango ads, using inferno and combustion to create Strange Soda-quaffing Ken’s miniature ‘wobbling’ alter egos.

News

SKETCH AND TOON 3D New rendering module for Maxon’s Cinema 4D

M

axon has released a nonphotorealistic rendering module for Cinema 4D R8.5. Called Sketch and Toon, the add-on gives Cinema 4D users numerous new rendering options, tailor-made for specialist users such as engineers, architects and fine artists. While the new module is versatile, offering a good selection of non-photorealistic rendering modes, it’s also extremely easy to use, with three different modes catering for beginner, intermediate and expert designers. Maxon has sensibly integrated Sketch and Toon, so that combining its effects with other Cinema features, such as Radiosity,

THE BIG BOOM generates layers of possible new output options for 3D artists. Sketch and Toon is available now for £249, or as part of an upgrade package to R8.5 for owners of Cinema 4D R8 at £299. INFO www.maxon.net

Paint and fine-sketch effects are easy to recreate with Maxon’s finely configured plug-in.

LEARNING CURVE

WHETHER YOU’RE INTERESTED IN ILLUSTRATION, 3D, WEB DESIGN OR VIDEO, YOU’LL FIND A COURSE HERE TO SUIT AQUENT London Aquent runs scheduled and privately organised training across a full range of creative apps. Courses are limited to four students. Certifications include Adobe, Maxon and Quark. Photoshop Advanced 28 January, £200+ www.aquent.co.uk

MERIDIAN Henley, Oxfordshire Meridian runs a wide range of graphics, Web and programming courses from its own studio – and on-site for corporate clients. Intro to Director 15-16 January, £495+ Intro to Photoshop 15-16 January, £495+ www.meridiantraining.com

IDEAL TRAINING Banbury, Oxfordshire A certified Adobe training provider, Ideal runs a limited selection of graphics-related courses, centring on Adobe’s Creative Suite. Corporate training is also provided. Quark to InDesign 29-30 January, £450+ PhotoshopBasic 25-26 February, £450+ www.its-ideal.co.uk

TRANSMEDIA London, Bristol Transmedia runs scheduled and bespoke courses covering Web development, graphic design and DTP apps from its Greenwich studios or on-site by arrangement. Photoshop Fundamentals 7-8 January, £445 Flash MX 2004 Rich Media design 8-9 January, £445 www.transmedia.co.uk

SUBJECT Successful graduates Mike Doney and Katie Tang burst onto the UK illustration scene last summer as TADO, and, in their opinion, there’s never been a better time to go freelance

Looking back over the past 12 months is a rather strange experience for us. Almost exactly a year ago, we’d just attended our graduation ceremony in Leeds Town Hall. We’d finished our degrees in Graphic Art and Design and were taking our first tentative steps into the Big Wide World – both living at home, skint, on the dole, and trying to work out what the hell we were supposed to do next. We knew we wanted to keep working together and to do our own thing, but we had no idea how to go about it. The problem is, many university courses don’t offer the kind of advice and support graduates need at this time in order to enter the world of freelancing. Yes, a few lucky design students may get work placements with large companies through their universities, but illustrators in particular seem to be left to fend for themselves in the scary freelance world of approaching clients, presenting portfolios, chasing invoices and dealing with those lovely folks at the Inland Revenue. Courses should start addressing the practical realities we all face, as well as the creative ones. Illustrators are usually employed on a freelance basis, so the best kind of work experience you’re going to get is when you go out there and do it yourself! Be prepared for a period of sorting out your portfolio, self-promotion, knock-backs and skintness. All of these negative things pale into insignificance when you have the buzz of getting your first proper job, or receiving some positive feedback from somebody you respect. The thing to keep in mind is that now is a really good time to be setting up freelance. It’s tough to get started, sure, but there’s currently a boom in design awareness and illustration – and there’s a high demand for fresh, innovative and exciting work. We’ve found that the industry is very receptive and encouraging to new talent. At the moment, it’s just a case of making yourself known to the correct people, via lots of careful research. You’ll probably find that most people are like-minded and easily approachable. And once you start to build a reputation, things have a habit of snowballing. The one piece of advice that we’d give to anybody thinking of starting out is to get yourself ready, then jump in headfirst. You need to be 110 per cent committed, as the only way to learn the ropes is through personal experience. We’ve had our fair share of knockbacks and low points, but if you keep focused and positive then you’re halfway there. Register yourself as being self-employed, keep on the right side of the taxman and enjoy being your own boss – especially setting your personal working hours! INFO You’ll find TADO on 0114 230 6271 and [email protected]. Visit www.tado.co.uk or Site Gallery, 1 Brown Street, Sheffield, S1 2BS

Computer Arts_January 2004

17

Hannes Hayha’s Doorsteps, winner of the Flash category.

A CALENDAR OF ESSENTIAL RELEASES, EVENTS (AND WISHFUL THINKING) FOR ALL DIGITAL CREATIVES

JANUARY

Computer Arts Projects 54 The Masterclass issue. Out 8 January Apple Releases £150 iPod and heads for world domination Computer Arts 93 On sale 22 January ATI and NVIDIA Both ship new pro workstation graphics cards Nikon and Olympus Still waiting for affordable SLR digital cameras from these manufacturers Photoshop Elements 3 Adobe reveals the new Elements, with tools borrowed from Photoshop CS

FEBRUARY

The Haunted Mansion Disney’s Eddie Murphy flick should hit UK cinemas on 13 February Computer Arts Projects 55 Designing the perfect portfolio. On sale 5 February combustion 3 Discreet finally ships its premier app for the Mac FreeHand MX 2004 Will Macromedia update its much-loved illustrating tool? Computer Arts 94 On sale 19 February CorelDRAW Corel ships a new version of the graphics suite incorporating Kai’s Vector Tools

MARCH

Computer Arts 95 On sale 18 March Softimage|XSI Major update? Cinema 4D R9 Maxon announces version 9 of its acclaimed 3D tool Maya 6 Should be here by now. Or at least version 5.5… Computer Arts Projects 56 On sale from 4 March DVD Studio Pro 2.5 Apple’s .5 upgrade finally arrives 19-inch widescreen laptops Due to hit the shelves now

APRIL

Cinema 4D R9 Expected to be in beta testing right now Computer Arts Projects 57 On sale 1 April Director MX 2004 The multimedia giant is revitalised for a new era Computer Arts 96 On sale 15 April Shrek 2 In last production stages

Grigoris Leontiades won the Best Non-professional Film BAF award for 1+1.

BRADFORD ANIMATION FESTIVAL

AWARDS Top industry figures reward fresh animation talent

N

ovember saw the National Museum of Photography, Film and Television hosting the tenth annual Bradford Animation Festival Awards, where a panel of industry judges selected seven winners from over 600 international entries. Guest speakers included subversive animator Bill Plympton, and Philip Hunt, Creative Director of Studio AKA. Star of the show, and clear winner of the Flash category, was Hannes Hayha’s Doorsteps. The Finnish director created the piece – a hilarious cycle of booze, cigarettes and

breakdowns – as a video for his band, Lodgers. “The main character came straight from the toilet signs I’ve always admired. Alcohol is also great source of inspiration,” explains Hayha. Other winners included Grigoris Leontiades, who shined in the Best Non-professional Film category with his thoughtful 1+1, and Dad’s Dead, Chris Shepherd’s multiaward winning piece, which took away the Best Professional Film award. Check out the full shortlist at the BAF Website. ■ INFO www.nmpft.org.uk/BAF

THE GREATEST STORY NEVER TOLD COMPETITION Win top software and world fame

ere’s your chance to show off those Flash skills, courtesy of The Greatest Story Never Told, an online competition inviting you to submit original animations between two and 20 minutes long. The four winners will each receive international coverage for their work on US TV series Flash TV, in magazines such as Computer Arts and .net, and online at the competition Website. If that isn’t incentive enough, then check out the prizes: a lifetime of free Web hosting from Media Temple, plus copies of Studio MX 2004 and 3ds max 6. Devised by FlashTV.com, the competition aims to demonstrate what a great storytelling medium Flash MX can be. There are 16 genre categories in all, so take your pick and get creative. The closing date is 15 January 2004. ■

H

INFO www.thegreateststorynevertold.com

18 Computer Arts_January 2004

3d software leader

Discreet is a division of Autodesk, Inc. Discreet and 3ds max are trademarks or registered trademarks of Autodesk Inc. Autodesk Canada Inc. in the USA and/or other countries. All other brand names, product names, or trademarks belong to their respective holders. © Copyright 2003 Autodesk, Inc. All rights reserved.

Our users don’t always have the right version…

Even as you read this, someone is reporting a company using cracked copies of 3ds max™.That company could end up paying a hefty fine as well as suffering the embarrassment of being caught. Could that be your company? On the other hand, if you’re one of over 150 000 legal 3ds max users and you’re tired of being in competition with companies who don’t buy their software, call the BSA on 0800 510510 or visit www.bsa.org to access your local site. There is a reward up to £ 10 000 for information leading to a successful settlement. www.discreet.com

GUEST FONT SHOWCASE Lee Fasciani, the designer of this month’s guest font, Napier, details the thinking behind his simple yet elegant typeface “I wanted to design a robust, compact font that contains some interesting and notable characteristics,” explains T.26 typographer Lee Fasciani. So what drives him to create? “A

20 Computer Arts_January 2004

requirement to obtain uniqueness,” he says. “It’s a personal challenge…” While creating and adjusting the letter-forms, he began to incorporate subtle indentations (ink

traps) to compensate for the heavy font’s acute intersections. The results prompted him to develop Napier further. “I expanded on this feature,” elaborates Fasciani, “adding it to many of the characters I’d already made, creating some suitably quirky glyphs. And the name itself? “It doesn’t reflect the font’s design or inherent characteristics,” he says. “It’s named after a good friend of mine, Lee Napier.” INFO www.t26.com

aß+?‰™Í Ï Ô ‰Ä ͆j W”¬jÍj ÍjÞÍÖÁj ͝ wÁ Ï ?Á͉ÄÍÄ^ ?Ä ÖÄja Mß .™ß +‰WÍÖÁjÄ ”?~jݝÁÄ± +?‰™Í Áj?‰Ä͉W ”?ÍjÁ‰?Ä ‰j j?͆jÁß Ä‰™^ WÁÁaja ”jÍ? ?™a Mj?ÄÍß w‰™~jÁ™?‰Ä a‰ÁjWÍß ™ ͝ ߝÖÁ Ï ”ajÄ^ ‰™ Á?ßÍÁ?Wj ¶Ö?‰Íß± +Á‰Wja ŽÖÄÍ Ì|šš ‰™W 7
0^ aß+?‰™Í Ï ‰™Ä a‰ÁjWÍß Í

?ß?^ ÏaÄ ”?Þ^ ‰~†Í8?Üj ?™a !

Á ajÍ?‰Ä W?


| ±

å¤yÔy Ȥo¤o¤ Á j”?‰ ‰™wK”?ޝ™W”¬ÖÍjÁ±W±Ö

”?~j _ÔååÏ Mß
± ?a?ÄÄjÁ™‰

FIRST PRIZE: A3 MIDNITE INTUOS2

WIN WACOM TABLETS!

PRIZES WORTH £1460

Three Wacom tablets to be won in our fantastic competition

22 Computer Arts_January 2004

PRIZE WORTH £703

A

graphics tablet is essential to any digital artist, whether you’re into illustration, graphic design or photo-retouching – giving you a natural way of painting, drawing strokes and editing images. This month, we’ve teamed up with Wacom to bring you the chance of winning one of three ultradesirable graphics tablets – a simply gargantuan A3 model, plus one A4 and one A5 Intuos2 tablet. The Intuos2 range from Wacom offers some of the best graphics tablets on the market. They provide 1024 pressure-sensitivity levels and absolute pinpoint positioning, meaning you can rely on them to always be accurate when working to tight deadlines. Offering new digital over-sampling technology to track input devices, the tablets prove accurate and reliable; even in the most demanding of creative environments. All the tablets we’re giving away come complete with an Intuos2 grip pen and mouse; the former features a new ergonomic shape and a rubberised grip area, being optimally balanced for freehand work. The 4D mouse, with

Competition

SECOND PRIZE: A4 REGULAR PLATINUM INTUOS2

PRIZE WORTH £458 THIRD PRIZE: A5 PLATINUM INTUOS2

the A3 and A4 prizes, now comes with a fingerwheel, improved ergonomics and a rubberised sculpted grip area. The third prize A5 tablet comes with a Wacom 2D mouse, for easily navigating around your desktop when you’re not using the stylus. Wacom has donated three tablets for the lucky winners. First prize is an A3 Midnite Intuos2. This huge tablet (12x18-inches active area) is ideal for anyone interested in digital art and design, offering maximum drawing area. Second prize is an A4 Regular Intuos 2 Platinum – often the size of choice for professional artists and designers. The third prize on offer here is an A5 model, a compact yet accurate tablet for anyone involved in digital creativity. These are stunning tools that you cannot afford to be without, so why not try and get your hands on one for free! Three great prizes for three lucky winners – and all you need to do to be in with a chance of winning is answer the simple question and drop us a line in the usual way. Either enter online at our Website by going to www.computerarts.co.uk/competitions or simply send us a postcard.

QUESTION WHAT IS THE ACTIVE AREA OF THE INTUOS2 A3 WE’RE GIVING AWAY? TO ENTER Try the easy way, via our Website. 1) Put the Computer Arts CD into your CD drive. 2) On the Contents screen, click Compo. 3) Enter Wacom as the competition name, fill in the rest of the form, then click Submit Entry. If you don’t have Web access, you can still enter by sending us your answer on a postcard to: Wacom competition, Computer Arts, 30 Monmouth Street, Bath, BA1 2BW. Please include your address and a telephone number so we can contact you if you win.

THE RULES The closing date is 22 January 2004. Employees of Wacom and Future Publishing, their agents and families are not permitted to enter. Multiple entries are not accepted. The editor’s decision is final and there are no cash alternatives. No other correspondence will be entered into. If you are entering by post and do not wish any of the companies involved in this competition to contact you with further offers, please indicate this on your entry. We will not pass your details on to third parties. ■

PRIZE WORTH £299

ABOUT Founded in 1983, Wacom has established itself as a world market leader for graphics tablets, and a pioneer in the development of the pen as a computer input device. The company’s mission is to create a natural innovative interface between computers and users. It has successfully evolved, making the digital working environment more natural, ergonomic and flexible, so that computer technology can be used for a wider variety of tasks by everyone.

INFO For more information on Wacom and its line of graphics tablets, point your browser at www.wacom-europe.com

Computer Arts_January 2004

23

SHORTCUTS INDESIGN CS Working with spot colours used to be fraught with difficulties. Now, however, thanks to InDesign CS’s new ability to import spot channels in Photoshop files and preview colour plates within the app itself, crossed fingers at repro time are no longer required

U

nlike designing for the Web, where corrections can be made after the fact, designing for print always produces one heartstopping moment after another as the deadline approaches. One of the main causes for tension is wondering if colours will print correctly – in particular, difficultto-gauge effects, such as overprints, traps, rich blacks, varnishes and spot colours. There’s no worse feeling than opening box after box of annual reports, only to discover that the metallic ink on the cover has knocked out the colour underneath rather than overprinting it. Often, it’s too late or too expensive (and usually both) to do anything about it. The professional edition of Adobe Acrobat 6 has some excellent proofing tools which enable you to check plates and preview overprints, but wouldn’t it be great to be able to do that from within InDesign, so you could make changes there and then? The new version of InDesign, recently launched as part of Adobe’s new Creative Suite, enables you to do exactly that. What’s more, its handling of spot colours has improved so that it’s now possible to combine inks such as a spot colour and a varnish, or a spot and a process colour, to broaden the range of colours available in a two-colour print design. InDesign also imports and prints duotone, tritone and quadtone PSD files, as well as PSD and TIFF files containing spot channels.

While QuarkXPress increasingly feels like an archaic and expensive option, InDesign is on course to take the lead as the layout

24 Computer Arts_January 2004

WOULDN’T IT BE GREAT TO BE ABLE TO CHECK PLATES AND PREVIEW OVERPRINTS FROM WITHIN INDESIGN, SO YOU COULD MAKE CHANGES THERE AND THEN?

application of choice, with intelligent features demonstrating that Adobe has been listening to what designers actually want. Take, for example, the job of producing a magazine cover, with a spot UV varnish highlighting the text in a Photoshop image. Previously, this involved exporting the image in the cumbersome DCS (Desktop Colour Separation) format invented by Quark, which enabled spot channels to be preserved and output at the repro stage. But it was notoriously difficult to preview, especially on-screen. Now, it’s a much more straightforward process. Open a CMYK image in Photoshop, create a new channel and name this something the printer’s going to understand at press time, such as UV VARNISH. You can now design using the new alpha channel, filling it with text or images that get previewed on-screen in the colour of your choice (varnishes are normally transparent). The next stage is to convert the alpha channel to a spot colour channel by selecting the Channel Options and choosing Spot Colour. You can adjust the solidity of the spot colour so that a semi-opaque varnish appears transparent; it doesn’t affect the transparency of the spot channel itself, only how it is previewed in Photoshop.

Having saved the file as a PSD, it can be imported into an InDesign frame on the page. The spot colour appears as it did in Photoshop, but it’s now possible to check all the plates are present and correct and overprinting as expected. Open up the new Separations Preview palette (Window>Output Preview>Separations) and you should see that in addition to the normal Cyan, Magenta, Yellow and Black plates, there is an additional plate called UV VARNISH. By clicking on the small View icons next to the plate names, it’s possible to preview

different ink combinations, such as Cyan and Magenta, or Black and UV VARNISH. This way it’s possible to tell quickly and visually that spot colour is going to overprint correctly.

If all this clicking on and off plates seems like overkill, then you can quickly preview overprints only by enabling the Overprint Preview (View>Overprint Preview). Best of all, you can continue to work in this mode if you want, which gives a more accurate impression of what the finished, printed page will look like. You can easily toggle overprinting off and on for objects that have been created in InDesign from the Attributes palette (Window>Attributes).

With InDesign’s ability to change what the underlying paper colour is – by double-clicking the [Paper] swatch in the Swatches palette and using the CMYK sliders to approximate a cream paper, for example – you have unbeatable visual feedback on what the page will look like when it rolls off the press. It’s not perfect, there’s no easy way to preview trapping yet, and designers wanting to check the halftone screen will still have to use Acrobat, but compared to the dark days before InDesign arrived, it takes most of the guess-work out of working with spot colours. INFO Expertise supplied by Jason Arber, [email protected]

ILLUSTRATION BY MAGICTORCH www.magictorch.com

26 Computer Arts_January 2004

Illustration secrets

ILLUSTRATION SECRETS UNVEILED The choice of style, colour, composition and technique is integral to a project’s success or failure. We talk to professional illustrators, agencies and designers to find out how they make those all-important decisions As well as mastering the tools needed to create striking and effective illustrations, there are other considerations when it comes to good design: developing a sense of great composition, an effective colour scheme suitable for your target audience, and a professional finish – to name a few. There’s also inspiration and concept, of course; spending half an hour staring at your screen without touching the mouse could be seen as wasting time by the onlooker (or more specifically, the employer), but these thought marathons can save hours of alterations, keep an image on track and generate some all-important ideas. We’ve found four very different projects, all involving illustration in various forms – large corporate editorial

EDITORIAL SELFRIDGES p28

ADVERTISING EUROSTAR p30

spreads, bottle labels or billboards. As well as persuading the people involved to spill the beans on the software and techniques, we’ve dug even deeper into the hows and whys of the project. We asked about the brief, the thought processes, challenges and results. We hope this feature whets your creative appetite, as there’s plenty more in this issue to sharpen your knowledge of composition and technique – not just for print, but Web, video and 3D, too. Read on over the next five pages before heading right back to pages 4 and 5 to choose where to aim your newly inspired creativity at next. INFO Thanks to Patrick Morgan, Jonas Bergstrand, Phil Marshall, Jon Hallowell and Rob Brearley. Words by Vicki Atkinson and Jez Turner, [email protected]

PACKAGING ORB DRINKS p31

POSTERS ATTIK p32

Computer Arts_January 2004

27

CORPORATE EDITORIAL

For Patrick Morgan, who recently created this Selfridges’ brochure, successful corporate design is about spontaneity – and understanding your art director

Name: Patrick Morgan Website: www.debutart.com Client: Selfridges Client Website: www.selfridges.com Project: Corporate brochure Software: Photoshop and Illustrator Bio: Patrick Morgan began his career as a freelance designer after leaving Kingston University, London. He now lives in both London and New York, and has worked for clients such as Gordon’s Gin, Levi’s, British Airways and The Body Shop. He is also currently working with Hewlett-Packard as a consultant on large-format printing.

P

atrick Morgan’s route to working on the Selfridges project wasn’t as straightforward as you might think. “I was contacted by Selfridges through a design agency, and told that I was shortlisted to illustrate the Selfridges annual report,” he explains. “After competing against over 80 other illustrators, Selfridges chose to go with my style and way of working.” Clients often have a reputation for not thinking on the same wavelength as designers and illustrators, but this wasn’t the case with Selfridges. “After winning the job I had a brief with the designer, Cat Bailey. I have great respect for her, as she Above: This striking illo advertises ‘Body Craze’, Selfridges body image promotion. below left: Patrick Morgan’s graffiti fashion illustration is both cool and stylish. Below: This illustration also featured in the annual report, and illustrated a spread on Birmingham’s new store – clad in 16,000 aluminium discs.

28 Computer Arts_January 2004

understands that spontaneity in illustration is very important,” says Morgan. “She’s aware that the illustrator should be allowed to incorporate some of their own ideas and style, even if the idea has been fully approved.” This was a project that allowed for some flexibility, so Morgan could really exercise his talents without worrying too much about reaching a narrow target audience. “Selfridges is a brand that wants to look cool, so they allowed me to broaden the project’s horizon and push the boundaries as far as possible.” Despite being given a month to work on the project, he got straight to work. “The

Illustration secrets

PHOTOSHOP IN PROGRESS Patrick Morgan reveals how to produce a screen-print effect

1

Take a photo of the texture that you want to use in your artwork with a digital camera. In Photoshop, expand it to the size of the area you wish to cover. Ensure your image is RGB, even if your final artwork has to be produced in CMYK.

2

Next, convert the image to greyscale by selecting it and using the Desaturate tool. After greyscaling the image, increase the contrast so you get an opaque finish to your selection; select Levels and increasing the amount of black while eliminating the midtones.

Above: Set against plenty of striking white space, these two illustrations began and ended the Selfridges 2003 report on its front and back covers. Left: This shopper is about to enter the newly transformed Oxford branch of Selfridges, and Patrick Morgan used her to illustrate this revamped store in the brochure.

first thing I did was sit in Selfridges and write down how I felt about being a part of the buzz and what Selfridges was all about. Then on my second visit I sat around sketching and taking snapshots with my camera.” This initial research work acts as the grounding for Morgan’s unique style – his illustrations created with Photoshop and Illustrator on his Dual Processor G4.

that this second point always has to be addressed – after all, he is doing a job for a client. “I’ve learnt from experience how you have to understand your art director, and realise they are the one running the job and paying the fee,” he explains. “The shapes, styles and ways of portraying your subject are important. You need to get the balance right so the illustration doesn’t give the wrong message, even though

“THE SHAPES, STYLES AND WAYS OF PORTRAYING YOUR SUBJECT ARE IMPORTANT. YOU NEED TO GET THE BALANCE RIGHT SO THE ILLUSTRATION DOESN’T GIVE THE WRONG MESSAGE, EVEN THOUGH YOU’VE PROVIDED THE RIGHT INGREDIENTS…” “My technique is a combination of traditional drawing combined with screenprinting and digital colouring/rendering. First I draw my subject matter on location and photograph it for back-up, then scan the work in and clean it up. When deciphering my colour scheme it’s usually down to two things: the mood I’m in and the type of mood I’m trying to convey.” While Morgan was offered a lot of creative freedom in the project, he agrees

you’ve provided the right ingredients – hard-edge shapes may create ridgelines or solidarity, while circular or smooth edges may give the feeling of calm and tranquility.” At the end of the day though, none of this matters unless the client is happy with the final product – which Selfridges was. “The client loved the job and the response has been great, with numerous shortlistings for awards.” ■

3

Once you’ve made the blacks black and the whites white, you are imitating a film being produced by a screen printer. You will need to smooth off your selection so your print doesn’t become blurry after being resized. Ensure the foreground colour is black and the background is white, then reduce blurring by selecting the Clone Stamp tool. Increase your brightness/ contrast and don’t overdo the smoothness.

4

Now simply open the CMYK document you wish to work with and select the black areas from your texture with the Magic Wand. Once the areas are masked, drag the mask across to the CMYK image with a new layer created, then fill with a colour (here, white was used). This gives you a screen-print look with an opaque filling, unlike using the Multiply filter, which gives a semi-translucent effect.

Computer Arts_January 2004

29

ILLUSTRATOR IN MOTION Jonas Bergstrand uses Illustrator, with his own touch of je ne sais quoi

1

Bergstrand plans his imagery by looking at photographs or sketching ideas on paper, then draws the objects directly into Illustrator – not a scanner in sight. Here, in Illustrator he begins to draw the moped by setting anchor points with the Pen tool and adjusting it until he‘s satisfied. “Even though I’ve worked with Illustrator for several years, I only tend to use the Pen tool and my mouse.”

2

“Once I’ve drawn the shape, I choose some colours and add a Gradient Fill.” The campaign’s colours feature an orange moped on a yellow background, and the tones of the bike vary to avoid too much flat colour. “By double-clicking on the colour square on the right, you can play around with colours until you’re happy. Using this method, you can sometimes get quite a rough, stripy effect, especially if the image has huge dimensions like a billboard.” To combat this, Bergstrand takes the image into Photoshop.

3

“I don‘t like to work in too many layers, as sometimes you might waste time working on areas of an image that won‘t be seen,” says Bergstrand. While Notre Dame Cathedral is on a separate layer, he kept the woman and the moped on the same layer to get the positioning right, ensuring that he didn’t waste time on areas that would be hidden behind the bike.

30 Computer Arts_January 2004

ADVERTISING

Jonas Bergstrand takes us behind the scenes on the making of Eurostar’s recent billboard and bus campaign

Name: Jonas Bergstrand Website: www.jonasbergstrand.com www.centralillustration.com Client: Eurostar, TBWA Client Website: www.eurostar.com Project: Billboard advertisement Software: Illustrator Bio: Freelance illustrator Jonas Bergstrand lives and works in Stockholm. After graduating he became Assistant Designer to one of his teachers, gaining a solid understanding of the industry. Since then he’s joined the Central Illustration Agency, and attracted clients such as Time Warner, Wallpaper* magazine and Polaroid.

E

urostar is known for its use of contemporary illustration in advertising campaigns, and it recently called upon the talents of ad agency TBWA and Swedish illustrator Jonas Bergstrand. “They described what they had liked best about their past campaigns so we could all start at the same spot,” recounts Bergstrand, who had worked with Eurostar once before, and been contacted again due to his distinctive style. “It’s a huge source of inspiration when your input is appreciated. Usually everything has been decided in advance when you’re brought in on an ad campaign.” The billboard and bus campaign would have a French flavour, and entice Brits to Paris with a series of special offers and Gallic imagery. “Eurostar had some demands about what objects should be included –

The colour of the type was chosen because blue tied the text and Eurostar logo together. “All this enabled us to have lots going on in the adverts without being too crowded,” adds Bergstrand. The hierarchy of image, text and logo is clear on the adverts – if a poster is going past on a doubledecker bus, you don’t want your customer to miss the message. The ads were produced in Illustrator 9 on a Mac G4. “I’ve used the program since version 5,” admits Bergstrand. “The good thing about Illustrator EPS files, is that since the images are vector graphics they can be up or downscaled without any resolution troubles. This makes the files very flexible, and that’s important when the agency has to produce a big number of adverts in lots of different sizes, all in no time at all.” For such a seemingly simple composition there was a lot of work

“I SUGGESTED YELLOW BECAUSE I KNEW THE ADVERTS WOULD RUN ON LONDON BUSES, AND IT’S VERY EYE-CATCHING ON RED. IT MAY NOT BE VERY ‘FRENCH’, BUT IT’S CERTAINLY THE ULTIMATE SUMMER COLOUR…” scooters, Eiffel tower, cafés and boules.” The colour palette evolved through collaboration with TBWA. “I suggested yellow because I knew the adverts would run on London buses, and it’s very eye-catching on red. It may not be very ‘French’, but it’s certainly the ultimate summer colour.”

involved. As with most briefs, it’s up to the illustrator to bring all the ideas and suggestions together and convey them in a handful of images, something that Bergstrand has achieved with this campaign. For more on how he approaches a job, cast your eye left to the Illustrator in motion walkthrough. ■

Illustration secrets

PACKAGING

OLLIE IN ACTION

oakwood dc excels in illustrative packaging – in this case for a range of sports drinks for skater boys and girls

The skater brand of drinks had a clear target audience and identity

1

The main considerations for this job were to make the characters funky and cool to appeal to youngsters, but also to get a pose that would fit the unusual bottle shape. A sketch style suited this. “I also had to try to imagine what it would look like when wrapped around the bottle,” says oakwood dc illustrator Pete Smith.

2

“I decided the background wouldn’t have keylines, in case it competed with the foreground character,” Smith explains. “It’s just flat colours to make it simple, and is created as a separate file in a strip so that it could be positioned as required by the designers.”

Company: oakwood dc Website: www.oakwood-dc.com Client: Orb packaging Client Website: www.orbpkg.com Project: Bottle label design Software: Photoshop and Illustrator Bio: Starting up as a design agency in 1996, oakwood dc has now expanded into three divisions, offering 3D and multimedia design, as well as cutting-edge graphic design. It has offices in Bristol, London and The Midlands. Clients include Penguin, Warner Bros, Williams F1, Wella, Dorling Kindersley and Mattel.

O

akwood dc has been with Orb since the packaging company’s inception two years ago. Starting with a logo, Website and sales brochure, more recently the team has spearheaded label designs of some very original and highly challenging bottle shapes. Orb conceived and patented the shape and launched a range of soft drinks for distribution in Europe and the US. Once the brands had been discussed, Co-founder and Creative Director Phil Marshall, Project Manager Sophie Blackman, the team of designers and freelance illustrator Pete Smith set to work. They’ve since tailored some fantastically illustrative designs to suit a range of target markets. “They wanted youthorientated labels with a European feel,

distribution at sporting events. Ollie is aimed at skateboarders, “Simply because no one has aimed a drink at these kids before,” explains Marshall, who chose vector-style flat colours for the highly youthful audience. “We had the freedom to do something really illustrative and colourful to represent the skating scene.” With the Big Ed range of kids’ drinks, oakwood dc used the round area for the kid’s head, with outer space or rally racing backgrounds. “This one was particularly hard, as the scenery had to go all the way round the bottle.” But the design wasn’t the end of the process. The unusual shape of the labels meant extra challenges. “After we had designed flat artwork in Photoshop and Illustrator came the task of distorting it to fit the printing

3

“Once happy with the sketch, I scanned it and worked in Illustrator to create the line work for the characters. I chose a dynamic thick and thin style, which takes careful work to get right and is worth spending time over.” Smith also uses two different methods. “Either trace around the shape of your line or draw each line as a single stroke, then convert it to an outline path, adjusting it to thick and thin afterwards.”

“THEY WANTED YOUTH-ORIENTATED LABELS WITH A EUROPEAN FEEL, SO THIS IS WHAT WE WORKED TOWARDS… WE HAD THE FREEDOM TO DO SOMETHING REALLY ILLUSTRATIVE AND COLOURFUL TO REPRESENT THE SKATING SCENE” so this is what we worked towards,” says Marshall. The ball shape at the top of the bottle (see the 3D renders above) was a perfect springboard for ideas. Power Up, the sports drink range, features a baseball, football or basketball in the rounded neck, and was designed for

techniques. We had to stretch and shape the design as far as we could before the repro house made its final changes.” Clever ideas and real knowledge of the target market has led to the design of these funky new bottles. Look out for one in a fridge near you soon. ■

4

Now the crucial lining was complete, colouring up was a matter of using a layer behind the line layer to build up a stacking order, using a combination of blends and darker colours for the shadows. The result is a clean, simple design that is clearly orientated towards the youth market.

Computer Arts_January 2004

31

FLOWER POWER Rob Brearley explains how to create one corner of his poster

POSTER

When French fashion magazine Étape commissioned Attik to create three posters, the theme was simply the word ‘tomorrow’

1

Take a high-resolution photograph of a flower, focusing on the petals. Draw a clean path around the flower and leave out any obstructing elements. Make an anti-aliased selection around the path with no feather, then copy and paste the contents onto a new layer and delete the background.

2

Duplicate the layer and add a mask. Start to cut into the flower using the Lasso, creating abstract shapes. Apply the selection as a mask. Repeat this a few times to varied parts of the flower, creating different shapes. Apply the masks to each of the layers once they are completed, retaining the layers.

(Left) Rob Brearley’s poster, with a hand-made feel. See the walkthrough for how to create the flowers.

3

Create a new A3 300dpi canvas. Drag all the flower petals into the new canvas. Start to duplicate and transform the petals, creating a tree shape. When the tree begins to take shape, merge the layers and add more individual petals to the branches, gradually scaling them down in size.

(Above) Grant Dickson’s illustrative take on the theme, with the line: ”I no longer possess a cassette player. This can be seen as progress.”

Name: Attik Website: www.attik.com Client: Étape magazine Project: Self-promotional poster design Software: Photoshop and FreeHand Bio: Huddersfield-based Attik has been at the forefront of experimental design for nearly 20 years. Commercially its portfolio is extensive – featuring print, Web and broadcast work for clients such as Nike, Virgin Mobile, Toyota and Fox.

4

Merge the layers and duplicate. Apply Free Transform to the new layer, then scale to fit the original tree in shape and size as an extra branch. Repeat this until the tree is of a reasonable size, then merge the layers. This can be repeated, depending on the desired complexity.

This is Gary Horton’s ‘Tomorrow’-themed poster for Étape – inspired by his grandparents’ wallpaper.

32 Computer Arts_January 2004

“

T

he French fashion magazine Étape approached us to do a series of designs for its 100th anniversary edition,” explains Attik’s Creative Director Jon Hallowell. With two days to complete the posters, which would be printed as spreads in the centenary issue, designers Rob Brearley, Grant Dickson and Gary Horton set to work on the brief, taking a poster each. Well known for its experimental projects, such as Noise, Attik relishes the opportunity to constantly push its boundaries. This project allowed the team to do this, and to merge the experimental and the commercial to great effect. The brief itself was focused on the theme Tomorrow, and there were no more restrictions. “It’s the kind of brief every creative likes to get,” says Brearley. However, a completely free commission brings its own difficulties: “You don’t tend to know when to stop. You’re beholden to your own whims,” says Hallowell. They began with a meeting discussing how to approach the theme, and their decision was unconventional. While many would go for shiny,

futuristic 3D models, the team created three unpolished, fashion-orientated designs. “What happens tomorrow is a consequence of what happened in the past, so we decided to focus on this,” explains Hallowell. “We wanted to avoid the obvious. Graphics seem to be associated with 3D at the moment – we think there’s a textile revolution,” adds Brearley. Brearley’s poster (shown above; top left) certainly reflects this. With a composition of manipulated images of petals, old drawings of cherubs, tea stains and type made from insulation tape, it has a hand-made feel. The main element of the composition features in one corner, and is the result of early sketches. “An image doesn’t have to shout from all over the canvas – this time it worked when we focused on one area,” Brearley explains. Unusually, all three posters contained pink elements, despite being very different compositions. “We didn’t even realise we’d done this – it must have been a subliminal effect of the old themes,” Brearley admits. “Gary Horton’s poster was inspired by his grandparents’ wallpaper.” ■

THE IN-DEPTH GUIDE FOR DIGITAL CREATIVES

PLUSIVE S EXCLUEO VID IAL TUTOTRHE ON CD

CREATIVE SUITE IN DEPTH Master the new features in all the Adobe CS applications with our world-first 47-page step-by-step project

Learn how to: • Use the new tools in Photoshop CS and Illustrator CS • Output for print and interactive PDF using InDesign CS • Integrate your workflow, from design to layout to Web • Incorporate alternative ideas right into your files as layers

Plus: • Top designers reveal how CS will transform their work • Why they’re switching from QuarkXPress to InDesign

ISSUE 53 ON SALE NOW!

Q&A

SHORTCUTS ILLUSTRATOR CS Adobe has revamped Illustrator with the biggest change in years. It’s now possible to create true three-dimensional objects in vector format. Discover how to make the most of this exciting new feature with our hands-on tutorial

T

hose who remember Adobe Dimensions, and found it an accessible way to create simple 3D shapes that could be imported into Illustrator or FreeHand, will now be leaping for joy – Adobe has included all the functionality of Dimensions in the latest version of Illustrator CS. Dimensions was not an application for creating complex scenes or objects like Maya, Strata 3Dpro or LightWave. It focused on extruding, revolving and rotating vector shapes, mapping artwork, applying simple lighting and outputting the result as crisp, resolution-independent PostScript files. This is all now an Illustrator Effect and can be easily accessed from the menu (Effects>3D). Adobe has wisely refrained from tinkering too much with the old functionality and interface, but has tidied up some of the rough edges and made a few subtle improvements to the mix. There are three ways to apply a 3D effect to your artwork: Extrude, Revolve and Rotate. Extrude extends a 2D shape you have created along an imaginary Z axis, so that a square becomes a cube, for example. The depth of the extrusion is controlled by the Extrude Depth slider (or a value entered into the box, which can be in any unit supported by Illustrator, such as points or millimetres). The extrusion is ‘capped’ by default, but can be ‘uncapped’, which removes the front and back surfaces to create a hollow appearance. You can also apply a bevel to the front surface of the extruded shape. Illustrator ships with almost a dozen preset bevels that cover most eventualities, but it’s also possible to create your own. The depth of the bevel can be adjusted with a slider or a value, and you can specify whether the bevel extends out of or into the shape. It’s also possible to apply basic illumination to the shape from one or more light sources, each with its own

basic lighting properties. It’s certainly not a raytracing engine, but it creates a reasonable illusion of three dimensions. To rotate the object in space, simply click and drag a proxy cube in the dialog box or change the numerical values for the X, Y and Z axes. You can also change the perspective from 0 degrees (no perspective) to 160 degrees (maximum perspective, just like a wide-angle lens). Revolving creates a 3D shape by sweeping a 2D object created in Illustrator in a circle around a central axis. A 360degree sweep joins the two ends to create a lathed 3D shape, such as a bottle. A revolve with a smaller angle can create a shape like a cake with a slice taken

out. You can offset the sweep to create rings or hoops, subject to the same lighting controls as the extruded objects. Again, rotating your objects is a breeze. The simplest 3D effect of all is Rotate, which pivots the flat 2D artwork in space as if were printed on an acetate sheet. Adjusting the lighting and perspective are about as exciting as this option gets. Together with the ability to map artwork (see the walkthrough below), this simple approach to 3D is a boon to product designers who need to create quick mockups, and to illustrators who literally want to add a new dimension to their work. INFO Expertise supplied by Jason Arber, [email protected]

MAPPING ARTWORK

THIS SIMPLE APPROACH TO 3D IS A BOON TO DESIGNERS WHO NEED TO CREATE QUICK MOCK-UPS, AND TO ILLUSTRATORS WHO LITERALLY WANT TO ADD A NEW DIMENSION TO THEIR WORK

1

Create the shape for a tin ready to revolve around the left edge. Mapped artwork has to be a symbol, so design something – in this case, a logo, which includes a Scribbled effect and some live text – and drag it straight into the Symbols palette.

2

Click the Map Art button and step through the surfaces until you find the outside edge, which is indicated with a red wireframe. The preview shows a flattened version of the surface and the darkened area indicates what’s obscured. Select your symbol from the dropdown menu and position it.

4

3

Select the tin shape and then choose Revolve from the menu (Effects>3D>Revolve…) This sweeps the shape around the left edge to create a 3D representation of a tin. You can see how some simple shapes create the impression of a lip.

After clicking OK for the mapped art, fine-tune and adjust the lighting and perspective. as shown. Click OK for the 3D Revolve Options, then complete the illusion of 3D with a graduated background, and a shadow created by blending two ovals set to a transparency value of Multiply.

Computer Arts_January 2004

35

www.123klan.com

ILLUSTRATION BY 123KLAN www.123klan.com

36 Computer Arts_January 2004

Tutorial

INTERFACE DESIGN

COMBINING PHOTOSHOP AND FLASH Discover how to create an animated, interactive interface using Photoshop CS and Flash MX 2004 – two mighty design applications that are even better when used together Photoshop and Flash are rarely thought of as natural partners. One is the undisputed champion of bitmap editing, the other is best known for its vector animation capabilities. With new versions of both products in the shops now, it’s a very good time to rethink that relationship, and this tutorial will show you why. Flash does do vector animation, but it also handles sound, video and bitmaps. As for Photoshop, the new release supports the export of ImageReady animations and graphics in Shockwave Flash format. Because Macromedia Flash only supports Photoshop files produced in versions 2.5 and 3, this apparently minor revision could actually change your whole way of working. You can composite animations in Photoshop, with all the bitmap editing benefits of that package, then add interactivity and timeline control in Flash. Use Flash to animate bitmaps? It’s not against the law. In fact, with careful optimisation and the use of vector animation to complement the bitmap elements, it’s possible to create Flash movies that don’t break the cardinal rules of Web design. In this tutorial we show you how to create a series of standard interface elements using Flash and Photoshop, with a hybrid look and feel that you can only get by combining the two packages. INFO Words and expertise provided by Flash expert Karl Hodge. Contact him on [email protected]

ON THE CD All the files you need can be found on the cover CD in the Tutorial\ Interface design folder. The finished file incorporates a royalty-free stock photograph by Michael Connors from www.morguefile.com. These are all for personal training purposes only, and are not to be reproduced elsewhere.

Computer Arts_January 2004

37

^

PART 1 OPTIMISING AND PLACING YOUR IMAGES First, we’ll get the basics right

INSIGHT

VECTOR ANIMATION

You can draw with vectors in both Photoshop and ImageReady. If you include vector components in your animations, those will be rendered as vectors in the resulting SWF file. Given ImageReady’s narrow range of animation capabilities when compared to Flash, creating vector-only animation in Photoshop and ImageReady isn’t really a great idea – but including vector elements where possible may help to keep the resulting file size down and increasing editability.

6

With the Move tool selected, drag the layer containing the image in bluelight.psd to your new image, positioning it to the left. Rename the layer ‘Light Off’. Select the Text tool, then use a sans serif font set to 36 px to add the words ‘Blue Light’.

1

Although Flash is great with vector images, Photoshop can’t be beaten on bitmaps – and it’s wise to do optimisation of any bitmap images destined for Flash in Photoshop beforehand, where you can see the effect of file compression in advance. Open the file background800.psd from the cover CD in Photoshop CS.

4

Go to Window>Library, then drag the newly imported JPEG file to the stage. Hit Ctrl+K (or Command+K on the Mac) to launch the Align panel. Align the image centrally on the stage. Save the file to the same folder as the original background image.

PART 2 FLASH ANIMATION IN IMAGEREADY Photoshop’s Web companion

7

Use the Move tool to position the text as shown above, then go to Window>Workspace and choose ‘Interactivity Palette Locations’ – making the Animation and Layers palettes visible. Next, click the Duplicate Current Frame icon at the bottom of the Animation Palette.

2

Go to File>Save For Web to save the document as a JPEG. Select JPEG from the File Format menu and choose ‘Very High’ from the compression options. Paying close attention to areas of flat colour, make adjustments to the Quality slider.

8

Select the newly created frame 2 in the Animation palette, then go to the Layers palette. Select the Light Off layer and choose Duplicate Layer from the palette menu. Name the layer ‘Light On’.

5

Next, launch ImageReady CS. If you’ve still got Photoshop open you can do this by clicking the Edit in ImageReady icon at the bottom of the Tools palette. Open the file bluelight.psd in ImageReady, then go to File>New to create a new document of 280x60 pixels with a transparent background.

3

Now save the file to a new folder on your hard drive, then launch Flash MX 2004. Choose File>New. Click the Size button in the Properties panel and set the document size to 800x600. Go to File>Import To Library and browse for the JPEG file you optimised in Photoshop.

38 Computer Arts_January 2004

9

Click the Add Layer Style icon on the Layers palette while the duplicated layer is selected, and choose Colour Overlay. Choose a lighter shade of blue than the original light and set opacity to 40 per cent. You can also add a blue Outer Glow to this layer.

Tutorial

^

INSIGHT

EMBEDDED URLS

Photoshop’s support for Shockwave Flash falls short of including ActionScripting features within the program. It won’t directly support your rollovers either. In the tutorial we show you how to get around that, but you can embed URLs into areas of an image that will survive the SWF conversion process. Simply enter them into the Slice palette.

PART 3 FLASH ANIMATION IN PHOTOSHOP Back into Photoshop, then ImageReady, then Flash

10

Go back to the Animation palette and select frame 1. With the first frame selected, go to the Frames palette and switch off the Layer Visibility icon next to the Light On layer.

16 13

You can take advantage of Photoshop’s more sophisticated features, and create a document which can then be imported into ImageReady to render as an animation. To learn how, begin by opening the file ovendial.psd in Photoshop.

14

17

15

18

Switch to Flash MX 2004 and open the file you created at the beginning of the tutorial. Go to File>Import and choose Import To Library. Browse for the SWF file you exported from Photoshop. When you’ve finished, open the Library panel in Flash.

11

Back in the Animation palette, select the Frame Delay Time arrow at the bottom of the first frame and select ‘1 second’. Set the frame delay time for frame 2 to 0.5 of second. Press Play and you’ll see an animation of a flashing light.

Hopefully, the Shockwave file should have been imported in full, along with a series of supporting files. To tidy things up, create a new folder in the library by clicking on the New Folder icon at the bottom of the palette and naming it ‘Logo’. Drag all the new items to this folder.

In the Layers palette, select the layer ‘dial’ then choose Duplicate Layer from the Palette menu. With the new layer selected, go to Edit>Transform>Rotate. Rotate the dial image counter-clockwise so the dial is pointing to the next dot down. Hit Enter to apply the transformation.

12

Go to File>Export and choose Macromedia Flash SWF. In the dialog that appears, choose Preserve Appearance – a setting that will faithfully render your animation using bitmaps. You can also choose to embed the font you used in your animation to retain editability in Flash.

To place the animation in your movie, find the SWF file you imported in the library, then drag and drop an instance of it a new layer on the stage, positioning it as illustrated. To edit the file, doubleclick on it. In Symbol Editing mode you can resize the elements, change the font and add ActionScript to frames. Save the file before continuing.

With the transformed layer still selected, choose Duplicate Layer from the Palette menu. Hit Ctrl+Shift+T (or Command+Shift+T on the Mac) to move the dial around to the next dot. Continue in this way until you’ve created six layers, each with the dial pointing at a different dot. with a gold effect gradient. Why? Because club promoters love gold!

Computer Arts_January 2004

39

^

INSIGHT

ROLLOVERS

It’s a pity that ImageReady’s Flash export option doesn’t support standard rollovers, but it’s fairly easy to overcome if you have a copy of Macromedia Flash to hand. Here’s the quick lowdown. Create a two or three-stage rollover in ImageReady, exactly as you would normally, then export the resulting file to SWF format. In Flash, import the SWF, then access the clips Properties in the library. Convert the movie clip to a button. You can now edit the button and add any rollover actions you’d like.

19

Rename the layers dial 1-6. Go to Image> Image Size and resize the document to 100x83 pixels. Click the Edit In ImageReady icon to open the file in ImageReady. Open the Animation palette and add five more frames using the Duplicates Current Frame icon on the toolbar.

23

With the square shape selected, go to Modify>Convert To Symbol and convert the shape to a button – naming it ‘hotspot_btn’. With the instance of the button selected on stage, type in the instance name ‘hotspot1’ in the Properties panel. Set the alpha value of the button to 0 per cent in the Properties panel.

22

Double-click on the file to begin editing it. Go to Window>Actions to open the Actions Editor and type in a ‘stop();’ command on each frame. Return to the main stage and, using the Rectangle tool with the stroke switched off in the Properties panel, draw a small square over the first dot of the dial.

20

Select frame 2, and in the Layers palette, hide all the ‘dial’ layers apart from ‘dial 2’. Now select frame 2 and hide all the dial layers apart from ‘dial 3’. Continue until each frame contains a different consecutive position on the dial, then export the animation in Macromedia Flash SWF format.

24

Drag five further instances of the button to the stage from the library. Position each hotspot over a dot around the dial, naming the Instances hotspot 2-6 respectively. Select hotspot1 and add the following code in the Actions Editor: on (rollOver) { this.anim_dial.gotoAndStop(1); }

FINAL STEP

A

dd the same code to the second button, changing the frame number from 1 to 2. Continue with the remaining hotspots, changing the code to point to frames 3, 4, 5 and finally 6. When you test your movie, rolling over the hotspot should move the dial to its corresponding position.

21

In Flash, open the file already containing the background you optimised and the first animation you placed. Import the new SWF file into the library, again creating a new folder to keep all the elements tidy. Drag and drop an instance of the animation to the stage, positioning as above. Give it the instance name ‘anim_dial’ in the Properties panel.

^

INSIGHT TWEENING

Yes, you can tween movement in ImageReady. Just create two animation frames, one with your layer elements in a start position and one with your layer elements in an end position. Select the first and click the Tween icon on the Animation palette; enter a number of frames of animation and Photoshop does the rest for you.

40 Computer Arts_January 2004

42 Computer Arts_January 2004

Profile

SUBLIMINAL ASSOCIATES “I want to do the next BMW brochure,” says Jonathan Taylor-Horne. “I don’t want to do a record sleeve where you spend six months on it, have 20 meetings, and get paid three grand.” We talk to one mouthy design agency…

Subliminal Associate’s 32-page booklet for Sony – produced in Photoshop – showed the PlayStation 2’s journey from Japan to the UK, and highlighted forthcoming games.

J

onathan Taylor-Horne – more commonly known as Jonny – isn’t a man to mince his words, particularly when it comes to discussing clients who perhaps fail to grasp the company’s unique approach. His succinct summation of certain people in the music industry is refreshingly direct – and entirely unprintable. Taylor-Horne is at least speaking from experience. Before it gained its Associates, Subliminal cut its teeth in the music business, designing sleeves, logos and other promo art for a huge range of acts, most notably James. But times have changed and the company has diversified massively. Along with the videogame work, Subliminal Associates has designed for the likes of Channel 4, Blue Marlin, the English National Opera, Future Publishing and Tesco. No longer content with mere print design, the company has also snowploughed its way into Web and new media, and shows few signs of stopping.

PRIMAL BEGINNINGS Subliminal was born back in July 1998, mere months before it made its first feature debut in Computer Arts. “I was working for another company in Bath,” explains Taylor-Horne. “I got sacked from them, then a month later they said, ‘Why don’t you come

Another interactive PS2 project for the official magazine: “The idea was to create an environment akin to the original PS2 ‘Third Place’ ads,” says Subliminal Associate’s Jonathon Taylor-Horne. “The aim was to navigate the user around a monolithic, ever-changing 3D environment that felt enormous, aided by clever sound design and animation.” It was created using form•Z, After Effects, Photoshop, Illustrator. “We shot the intro footage in London and Bristol, then mixed it down to a 5.1 soundtrack in a professional edit suite.”

Computer Arts_January 2004

43

Subliminal Associates was asked to design a range of T-shirts for the company Bench. Four were chosen to go into production: “We’re still waiting for the royalties!”

back and start your own company and we’ll bankroll it?’ So I did. Having spent two years with them, I decided to buy myself out of their control, and now we’ve been here, totally independent, for four years.” The record sleeve design work occupied SA almost exclusively for a few months, until “it was suggested to me by someone at Future [Publishing] that we get into videogames, because a lot of the work wasn’t that great back then. So we went and saw Sony and just said, ‘Look, we’ve never done video game work in our life but we’d like to give it a go.’ We got given the Cool Boarders job off of that – and, of course, built a relationship with Sony.” And the partnership has paid off well; one of SA’s major jobs last year was the marketing campaign for high-profile PlayStation 2 title

gamble for SA. From achingly trendy muso design to, well, pictures of food? For TaylorHorne, it’s logical: “When we worked for the music industry, it was fun and had a certain kudos: you could meet the band and hang out and it was exciting. But when you’ve done that once, the whole glamour thing soon wears off and you just think,’This is really dull and they’re all wankers.’ Whereas companies like Sony and Tesco; they’re just professional people.” Did you ever think you’d be saying this five years ago? “No, no, I didn’t. I always said – and I hope it remains true now – that I never wanted to sell out, and I hope by doing something like this [the Tesco catalogue] that we’re not. We got approached by Tesco and just said yes.” Following a mini restructuring, there are now five people at SA, with two or three freelancers as needed. Two of those deal mainly with new business rather than design. “It’s quite key,” says Creative Director Matt Seaman. “Even when we’re busy, when we get to the end of a project it’s always a case of where’s the next one. Projects can take from three days to five months, as in the case of Primal, so you can imagine you get so wrapped up in it you can lose track of new stuff.” “Sometimes it can take six months to get an actual meeting, and six months to be given a

“BACK THEN, IT WAS FUN AND HAD A CERTAIN KUDOS… BUT WHEN YOU’VE DONE THAT ONCE, THE GLAMOUR THING WEARS OFF AND YOU JUST THINK: THIS IS DULL AND THEY’RE ALL WANKERS.” JONATHON TAYLOR-HORNE, CO-FOUNDER, SUBLIMINAL ASSOCIATES

Primal, which involved point-of-sale materials, ad design, temporary tattoos and a heatreactive cover for MCV, the game industry’s retail trade journal. That was swiftly followed by the design for the Tesco Christmas food catalogue, which, like the original Sony job, was something of a

brief, two months to win the pitch, and so on,” adds Taylor-Horne. “So you’re already a year or 18 months from the initial phone call.” “That’s definitely true with videogames,” reckons Seaman. “New media is a hell of a lot quicker in actual turnaround, because there are no out-costs. Also, a lot of the stuff we’ve done we’ve not actually been in competition with many other people; we give six or seven ideas and within two to three weeks we’re actually starting on the project.” So does that mean they never have to ring new clients for prospective work? “Oh no, we have to do that all the time,” Taylor-Horne says. “We’re getting more and more repeat business, though, from people like Sony. You’ve got to keep on banging away.” To that end, SA is taking on more of a partnering approach – hence the name change. “With Primal, as you can imagine, we got paid a nice fee,” says Taylor-Horne. “But at least half or maybe three-quarters of that goes straight to the printer. Because the good thing with Sony is

The point-of-sale artwork for Wipeout Fusion included giant boxes, shelf wobblers, A2 posters, banners and 3D trade press adverts that could be assembled in-store.

44 Computer Arts_January 2004

Profile

SA designed this mini-mag and fold-out ‘snakes & ladders’-like boardgame, complete with figures and dice, to help promote Sony’s classic PS2 title Ico. This blend of the traditional and the modern gives a fun and unique ‘off-screen’ introduction to the game.

SA has been working with comedian Reginald D Hunter for over a year, and produced this campaign for the Edinburgh Festival, where he was nominated for the Perrier Award. The top image, originally shot in Bath, almost caused as much controversy at the Fringe as Hunter himself did (www.reginalddhunter.co.uk).

that they let us handle the print side as well, so it’s a complete solution. That’s something we’re now offering; we can do as much or as little as the client wants.” Seaman adds, “Out of core base of four or five companies which get things done, we’ve

never really planned. “I have to be honest: I have no interest in the Web at all. I’m purely ink and paper,” says Taylor-Horne. “Whereas Seaman is all Websites and new media.” “Yeah, I’m more interested in the theory of making things move on-screen,” he chips in enthusiastically. “But I’ve always been a firm believer from day one, since I first grabbed a pencil, that if the idea is good enough it should be able to transcend every media. So it should be able to go from print to TV to new media to touch-screen displays and whatever. It’s all about the ideas.” Along with standard Websites, those ideas include a complete interface and DVD creation for PSM2 magazine, an interface for major packaging design company Blue Marlin, and the titles for Channel 4’s Viva La Divas documentary. Subliminal Associates, though, isn’t always happy about the sort of briefs it gets for such projects. “The annoying thing about that is what people do, and what people want to do, is mimic print, which really does annoy the shit out of me,” Seaman says. “They want to put the same amount of text in, and it’s just not that

“WHAT PEOPLE DO, AND WHAT PEOPLE WANT TO DO, IS MIMIC PRINT, WHICH REALLY DOES ANNOY THE SHIT OUT OF ME… PEOPLE DON’T HAVE THE SAME SORT OF ATTENTION SPAN ON SCREEN.” MATT SEAMAN, CREATIVE DIRECTOR, SUBLIMINAL ASSOCIATES

worked with them for four or five years. There’s one printer we’ve used for four years now, so it’s quite rewarding for the clients to know we’ve actually forged these relationships.”

ANNOYING BRIEFS Now SA is widening its network of associates, partnering with the Scot-Baker Agency in London, which in turn is linked with Essential Events. “We can put on events, exhibitions, shows, roadshows… so we can pretty much handle anything now: logo, stationery, Website, brochure, ad campaign, marketing pack, the lot.” As with the move away from record design, the company’s involvement with the Web was

sort of medium. People don’t have the same sort of attention span on screen.” “I think there are still clients who think Websites are kind of woooooo,” says TaylorHorne, making the internationally recognised sound for ‘spooky and mystical’. “They can’t give you a brief because they don’t know, so they say, ‘Just do this magical thing that you do because I don’t understand how it works.’ The Web is still this big magical pot where you cast a spell…” But then SA isn’t particularly bothered with briefs anyway, as Taylor-Horne explains. “Sometimes people will write a proper brief, which goes into the brand equity, the target audience, the USP, the tone of voice… which

This Flash micro site aimed to mirror the mini-magazine’s content and style, with a touch of animation and interactivity. “It’s always interesting working with magazine designers that want like-for-like content on-screen in a site that appears in the mag… Luckily, this was not one of those times and the project went smoothly thanks to the print team’s understanding of different media.”

Computer Arts_January 2003

45

The cover design for James’ album Millionaires – Subliminal Associates presented (and re-presented) 300 ideas and concepts before this idea – a pig wearing a pearl necklace – was selected.

to be quite honest we bin without reading. For instance, the game’s called Big Mutha Truckers – there you go. You’ve got a whole world of fun ahead of you. You don’t need to know what tone of voice that is.” Do you have a mission statement, then? He ponders. “What did we used to have – that corny line? Relocate… innovate? Something else...” “No is the answer,” concludes Seaman, helpfully. “We’re not into all those buzzwords and doing glossy brochures with all manner of bullshit which really means nothing. We’re trying to be as ballsy as possible, basically. 99 per cent of the work that goes out this door is nothing like 99 per cent of the ideas we’ve done

Single sleeve design by SA for the re-release of James’ Sit Down.

particularly now with technology and games and the Internet. “There are corporations still treating their consumer like it was back in the 40s or 50s. There’s the typical family of two kids and two adults and they’re beaming away because their fish fingers are jolly and lovely… Bollocks, bollocks! It’s just plain wrong. I’d like to see a fish finger ad that doesn’t involve Captain Birdseye running around with a bunch of kids in the jungle.” Maybe one day Subliminal Associates will get to do that ad. In the meantime, there’s talk of setting up a satellite office in London early next year, for those clients still unwilling to visit its home in Bath. “The only people who frown

“WHAT DOES WIND ME UP IS THAT THERE’S STILL A MYTH THAT THE END CONSUMER IS THICK, THAT THEY WON’T GET IT. AND I DON’T BELIEVE THE CONSUMER IS THIS STUPID.” JONATHON TAYLOR-HORNE, CO-FOUNDER, SUBLIMINAL ASSOCIATES SA worked closely with Van Morrison’s team to create a cover idea based around a classic second-hand record shop for his album Down The Road. “We enjoyed the book and film High Fidelity – and we wanted to portray the feeling of another generation discovering classic records from the past. The first single from the album, Hey Mr. DJ, has a contemporary photograph of a discarded box of ’45s on the sleeve.”

previously, because we try to push the client – and often we try to push them in a very, very outrageous way. It’s not scare, it’s not shock, it’s subliminal recognition, in a sense.” Empire Interactive, publishers of the aforementioned Big Mutha Truckers, certainly appreciate that approach, reckons TaylorHorne. “The viral campaign for that was just totally disgusting – but we got away with it. It was just really… no, I can’t even talk about it, it’s that bad.” Ah… so you like being seen as the bad boys of design. “Yeah, a little bit, because that gets you noticed, that gets things sold, that gets remembered,” admits Seaman.

FISH FINGERS

To mark James’ last ever performance, SA’s work for the band’s live DVD and album sleeves relied on mere outlines and silhouettes. Both sleeves were printed in a silver metallic ink.

46 Computer Arts_January 2004

Taylor-Horne is equally unequivocal about the state of current design. “I think there’s still a lot of mediocre, average design, whether it’s print or Web,” he says. “I think people aren’t pushing the end user, the punters or the customer. What does wind me up is that there’s still a myth that the end consumer is thick, that they won’t get it. And I don’t believe the consumer is this stupid,

on it are film companies,” says Taylor-Horne. “It makes no odds to anyone else. Again, why should you have to be in London? I think that’s definitely changing, the idea that if you’re not in Wardour Street or Soho then you must be shit. If I had my ideal dream, I’d like us to work on a boat. A massive 60ft ocean-going yacht. Sail from port to port, getting work in…” If another of SA’s plans comes through, that could well become a reality, too. Seaman explains that the company is currently pitching for a Saudi Arabian company: “It’s a huge construction company which is building palm resorts on the waterfront. And maybe if that happens we will have a satellite office over there, too.” “I can see that happening in quite a short time, maybe in the next year,” adds TaylorHorne, with his usual wry semi-grin. “So London, Dubai, and then on to the big boat.” ■ INFO When on dry land, Subliminal Associates can be contacted at 01225 401333, by e-mail on [email protected], and on the Web at www.subliminal.co.uk. Words by Ed Ricketts, [email protected]

Profile

PRIMAL DIVAS

From Channel Four to Sony Two of Subliminal Associate’s biggest challenges to date have been the Viva La Divas title sequence for Channel 4, and the Primal campaign. With the former, it was the usual case of having no time, little budget, and a constantly changing cast of directors and producers at the client end. While the Primal job was extremely rewarding thanks to Sony’s willingness to go with pretty much any idea SA suggested, Jonny Taylor-Horne reckons the special heat-reactive cover and poster proved a massive test. The idea is that the ink, and therefore the image, only becomes visible at a certain temperature, transforming an otherwise black cover into a semipsychedelic show. “There were times when we were thinking, ‘Shit, I don’t think this is going to work…’ and we’d been commissioned to produce 100,000 or whatever it might be,” he laughs in retrospect. “We winged it a little bit, just a little bit… We changed printers midway through the job. The printers we were using said, ‘Yeah, yeah, we can do this’, but it looked nothing even remotely like we wanted, and we only had two or three weeks to get it done.” Fortunately, the company’s regular printer came to the rescue, as Seaman explains. “The hardest thing was the temperature relationship; if it’s going through the post, it needs to react at a much lower temperature than if it’s in a shop, under lamps. The printer sorted that job out perfectly, and because he has an involvement with us, he pushed the boat out. And to be honest he got his rocks off as well, because it was a new thing for him, too.”

Heroine Jen can transform into four demons, so these aspects of her alter ego had to feature in the promo design.

The thermochromic inks used on the booklet and MCV cover were applied in such a way that the operational temperature suited each unique environment (a heat reveal page is no fun if it’s revealed at room temperature!).

"SUBLIMINAL CONSISTENTLY COMES UP WITH NEW CREATIVE IDEAS AND ALWAYS PRODUCES WORK OF A HIGH STANDARD.” PETER CLARE, PRODUCT MANAGER, SONY COMPUTER ENTERTAINMENT UK

SCEE (Sony Computer Entertainment Europe) approached Subliminal Associates in October 2002 to create and print all the promotional, point-of-sale and point-of-purchase materials for the launch of the much awaited Sony PlayStation2 fantasy action adventure game Primal. The campaign includes a unique 12-page booklet with heatreactive cover, posters, counter standees, fake tattoos; glow-in-the-dark window stickers and limited edition postcards. When the game’s heroine, Jen, is in danger, the Primal symbol tattooed on her back glows green; it’s this Primal symbol, accompanied by fluorescent and heat-reactive inks, that forms the cornerstone of the campaign.

Computer Arts_January 2004

47

Quick Tutorial

SHORTCUTS AFTER EFFECTS We show you the best and quickest way to wrap projected images onto faces in After Effects, without any need for a third party plug-in

W

hen you stand somebody in front of a movie projector and run some film, the projected image wraps around the contours of their face. This popular effect is used when characters are studying computer monitors in films, it’s used a lot in advertising, and it’s great for adding extra realism to car shots. Some people will choose to hire a projector and do the work on-set, but sometimes that isn’t viable. By creating the effect in post-production you have more control, because you can change the projected footage at any time to see what looks best. You also have control over levels of brightness, which may not be possible if a real-world projector is used. Here, we show you how to create the appearance of wrapping light using After Effects’ Warp Mesh filter to shape the layer to any 3D object, whether it be a face, car or building. It takes some manual jiggling to begin with, but creates stunning results. Import the files Face.mov and Screen.mov from the After Effects Shortcut folder on the cover CD, and place them in the timeline. Set the Screen.mov Blending mode to Add, and reduce opacity to 50 per cent. Make the Screen layer 3D, and rotate around the Y axis so that the layer appears to be at roughly the same angle as the face. In this example, we’ve used a short lens on the camera to exaggerate distortion in the face. The more obvious the curves are in the image, the easier it is to adjust your 3D mesh.

Select the Screen.mov layer, and use the Pen tool to click a basic mask outline

48 Computer Arts_January 2004

around the face. Close the mask, and the screen image is only projected onto the skin. Although you can project onto hair, the effect is less striking. Adjust the Mask Feathering to about 20 pixels, so that the edges will fade out gradually. If there is any movement at all from the camera or the subject, you should use Motion Tracking (as covered in the manual), to lock the Screen.mov to the Face.mov. It’s a simple matter of picking a tracking point on the face, tracking forward, clicking Apply, and then adjusting the Screen.mov Anchor Points until the layer is back in the correct place.

Again, select Screen.mov and go to Effects>Distortion>Mesh Warp. The default gives you a grid of seven by seven lines. Seven lines is enough to create a quick shot of a face, but working with ten or more lines gives a better level of accuracy, so adjust the setting to provide ten rows and ten columns. Wherever two lines cross, you can click and drag that cross-point to create a distortion. If you want the light to sink into the eye socket, click a cross-point just below the eye and drag it towards the pupil. Whenever you select a cross-point, handles appear. Drag these shorter, and you will shrink the image around the area. By dragging the cross-point into the eye and shortening its handles, you sink the light into the eye socket realistically.

CREATE THE APPEARANCE OF WRAPPING LIGHT USING AFTER EFFECTS’ WARP MESH FILTER TO SHAPE THE LAYER TO ANY 3D OBJECT, WHETHER IT BE A FACE, CAR OR BUILDING

By contrast, if you drag a point across the cheek and lengthen the handles, you will

create a bulging 3D effect as though the image really is being projected over a curved surface. This is the most timeconsuming part of the process, but you don’t need to be overly accurate. You should be able to do the whole face in a couple of minutes. Unless the face moves a great deal – if the character is moving her head, for instance – you won’t need to keyframe mesh changes during the shot. If there are huge changes of expression or head position, you can click the keyframe clock for the Distortion Mesh, and make changes to the mesh points over time. For most shots, however, the basic approach is good enough.

You should note that tracking the projection onto the face is not completely realistic, but saves masses of time. A real projection would slide over the face as it moves. You can achieve that result by tracking motion from a background object, and adjusting the mesh over the moving contours of the face, but it is very time-consuming. The shortcut approach, where you attach the projection to the face via Tracking, looks realistic enough for most shots, and saves you hours. To see the finished results, watch FaceFinal.mov on the CD. INFO Expertise supplied by Chris Kenworthy, [email protected]. Look in the After Effects Shortcut folder on your coverdisc for the files to accompany this page

Leader in External Hard Drives and CD / DVD - RW Drives

www.lacie.com/uk

External Firewire / USB 2.0 Drives offer: Easy ‘plug & play’ connection - Portable storage and data exchange Convenient and fast backup (bundled with Silver Keeper back up utility) - Easy hard disk expansion

LaCie PocketDrives & MobileDrives

LaCie External Hard Drives Drives Hard d2 MODEL

HDD

DVD+/-RW & CD-RW

-

Sleek, robust case, portable and stackable 7200rpm ideal for DV Video without dropping frames Fast Firewire up to 55MB/s, USB2 34MB/s sustained Firewire, USB2, or new FireWire 800 versions (cables incl.)

- Ultra portable and bus-powered via Firewire or USB (HDD) - no need for separate power cable - Firewire and USB2 (U&I) or FireWire or USB2 only versions - cables included, plus recording software with CD/DVD

Available from:

Available from:

40GB srp £69 (£81.08 inc VAT), 80GB srp £89 (£104.58 inc VAT), 120GB srp £109 (£128.08 inc VAT),160GB srp £114 (£133.95 inc VAT), 200GB srp £159 (£186.83 inc VAT), 250GB srp £179 (£210.33 inc VAT), 320GB srp £234 (£274.95 inc VAT), 400GB srp £359 (£421.83 inc VAT), 500GB srp £459 (£539.33 inc VAT)

20GB srp £84 (£98.70 inc VAT), 40GB srp £114 (£133.95 inc VAT), 60GB srp £199 (£233.83 inc VAT), 80GB srp £214 (£251.45 inc VAT)), 24x24x24x CD-RW/8x DVD Combo srp £97.86 (£114.99 inc VAT), Mobile DVD+/-RW + CDRW multidrive srp £219 (£257.33 inc VAT)

LaCie External CD & DVD+/-RW’s

LaCie Ethernet Disk (Network Storage)

‘D2’ model ‘P5’ model

-

Sleek, robust case, portable and stackable CD-RW super fast write and rewrite speeds Dual format DVD+/- RW high 4.7GB capacity Bundle includes CD/DVD recording software Firewire or USB2 versions (cables included)

LACIE PCI FIREWIRE OR USB2 CARDS (srp £19)

- Share data among as many as 25 users - Backup function with integrated scheduling feature - Easily administered via any web browser and accessible through any computer on the network or remotely via http/ftp - Increase the capacity through the USB & FireWire interfaces - Quick and simple installation - up and running in 10 minutes

Available from:

Available from:

CD-RW 52x32x52x srp £55.31 (£64.99 inc VAT), DVD+/-RW4x2x12x +CDRW multidrive srp £139 (£163.33 inc VAT)

80GB srp £329 (£386.58 inc VAT),160GB srp £474 (£556.95 inc VAT) 250GB srp £649 (£762.58 inc VAT), 500GB srp £999 (£1173.83 inc VAT)

LaCie products available from leading resellers:

www.dabs.com/lacie

www.macwarehouse.co.uk

www.simply.co.uk

www.pcwb.com

www.jigsaw24.com

www.microwarehouse.co.uk

E&O E, Jan 2003

www.technomatic.co.uk

www.cwonline.co.uk

www.inmac.co.uk

www.microanvika.co.uk

www.cancomuk.com

www.savastore.com

www.microdirect.co.uk

www.ghc.co.uk

www.insight.com/uk

ILLUSTRATION BY STUDIO OUTPUT

www.studio-output.com

50 Computer Arts_January 2004

Tutorial

FREEHAND & PHOTOSHOP

FLYER DESIGN Many top designers start their careers creating stylish flyers for events and club nights. Design agency Studio Output provides an in-depth guide to producing print-ready artwork while creating a mini masterpiece So you think you know print design? You’ve created a flyer, found a printer, sent the files off, and are just settling down to reward yourself with a cup of tea and chocolate biscuit when the phone rings. It’s the repro man and he isn’t happy. His RIP is grinding to a halt because your files contain embedded RGB JPEGs. You’re overprinting white text (which, by the way, is reverting to Courier), and you haven’t given him anything like the 5mm bleed he needs. Panic hits you like a tin of hot magenta ink – you don’t understand a word this man is saying. You might be able to manipulate photos, illustrate with vectors, and knock together good-looking Websites with your eyes closed, but that doesn’t mean graphic design is easy. If someone asks you to design and send to print 1000 stylish and successful flyers, do you really know what you’re doing? Nottingham-based Output lives and breathes print design. Its packed portfolio includes flyers for Radio 1, CD covers for BMG and innovative press packs for film PR agency, Shine Communications. To help you avoid the common mistakes and the ugly scenario presented above, the team has demonstrated preparations for successful printing, as well as particular design techniques crucial to creating a great flyer. Learn how to set up your documents properly, select colour palettes and lay out graphical text. Know how to save files for print and avoid the disaster of missing graphics, and let Output open your eyes to the secret visual language of flyer design. INFO Words and pictures by Output, www.studio-output.com

ON THE CD Look in the Tutorial\Flyer design design folder for the layered FreeHand files, illustrations and more that you need to follow this tutorial. These files are for your own personal use, and are not to be reproduced elsewhere. All imagery ©Studio Output.

Computer Arts_January 2004

51

^

PART 1 SETTING UP Set up your document in FreeHand

INSIGHT

SELECTING COLOUR

There are two basic methods of lithographic printing. Spot-colour printing uses specific mixed inks identified by the PANTONE Matching System (PMS). This is especially useful when a specific colour must be used (on stationery when a corporate colour is required, for example). To reproduce full colour images, the only affordable way is to use fourcolour process printing. This technique uses cyan, magenta, yellow and black ink to approximate accurate colour via different frequencies of dots. The process is exactly the opposite of how red, green and blue combine on screen to create white light. All colours must therefore be selected from the CMYK picker, and all colour images imported must be CMYK TIFF files and not RGB JPEGs. Why? Well, an RGB image contains no CMYK information and will only print in greyscale.

6

Clone the front layer of the buildings and flip it to create the reflection in the water. Fill the sky and lake with gradient fills to suggest depth, and paste everything inside a box the size of your finished flyer.

1

Select the size of your flyer in the Document palette. Most printing is done on A1 or A2 sheets, so choose a size that uses this space best. The template on your CD is a ‘DL’, or a third of an A4.

7

For the sunset effect, we’re going to use a lazy FreeHand trace of some clouds. Don’t worry about the ugly autotrace shapes, the outline isn’t going to be clear. With all the clouds selected, Union the shape to ensure it’s one object.

2

Add bleed in the Document palette. Most printers need about 3mm bleed around the outside of the flyer. This gives the guillotine operator a margin for error. Otherwise, he’d have to trim every sheet exactly right, which is impossible when he’s bulk cutting around 1000 sheets at a time.

4

Add any other guides you need, then duplicate this page to use for the back of the flyer. This saves you having to re-draw the guides, and also ensures your flyer is consistent on both sides.

8

To create the fill, you want to make a radial sunburst effect. First, draw a vertical line and use FreeHand’s Mirror function. The settings you need are Multiple and Rotate, and the maximum steps you can make is 50, so you might want to clone the whole shape and rotate it.

5 3

Find out if the printer requires you to add crop marks, which show where to cut the page. If so, they should be 0.3pt wide and drawn in registration, not black. Although it looks black, registration is a mixture of all the printed inks.

Start drawing in the background image using the Bezigon tool. For a skyline like this, holding Shift while drawing makes the lines perpendicular. It may help you to import a photo to work from. Build the skyline in layers and fill with solid colours.

9

When you have the radial effect you want, paste it inside the clouds outline and select a background colour of ‘none’ for the shape. You’re now ready to start work on the foreground.

52 Computer Arts_January 2004

^

PART 2 COLOUR Next, drawing and adding colour

Tutorial

INSIGHT THE SEMIOTICS OF FLYERS

Semiotics is the study into the meaning of symbols. In the world of club promotions, a secret graphic language has developed that’s invaluable for the lazy designer. For example, everyone knows that a picture of a girl on a flyer simply means ‘girls like this place’. A picture of a building means ‘this is urban and hip’. But these symbols can be developed to give greater meaning (eg, girl in bikini = sexy house music; girl’s booty = R’n’B; modern, glass building = techno; grainy, high-rise = drum ‘n’ bass).

PART 3 ADDING TEXT Time to bring in type, logos and prepare to output to print

10

Everyone uses pictures of girls on flyers these days – it’s part of the language of flyer design (see Insight, The semiotics of flyers). Why should you be the one to rock the boat? Get scanning and import a picture of your favourite girl. It’s time to dig out those vector trace tools again!

16

If you’re inexperienced with type, always keep your text simple. Univers, the house typeface for Computer Arts, is suitable for this kind of work because it’s a versatile sans serif. You can help to keep the typography tight by adjusting the tracking. A rule of thumb is that the bigger the type gets, the tighter the tracking can be.

13

Now to add colour. Unless you’re printing a spot-colour job, select your palettes using the CMYK colour picker (see Insight, Selecting colour). The book you should be using for reference is the PANTONE Process Colour System.

11

We’ve already seen that the Autotrace tool can make some pretty arbitrary decisions with ugly results. If you want to achieve decent results then trace around the picture using the Pen tool.

17 14

Ensure you can see overprinting objects. Under FreeHand’s Preferences>Redraw, the box for Display Overprinting Objects should be checked. FreeHand now shows any overprinting fills with a repeated pattern of ‘O’s.

A lot of typographic skill is about balance and common sense. If you’re using type on an angle, keep to one global angle. On this flyer, all the type is at a 45-degree angle or perpendicular to it. This secondary piece of text has been ‘ranged right’, so you can tuck it neatly into the remaining space without it looking out of place.

12

Once you’ve traced the basic outlines, vary some of the line weights to give depth to your illustration, and emphasise certain areas. To make life easier, try using FreeHand’s Paste Inside function.

18 15

This shows the unwanted effects of an overprinting colour – the skin tone of the girl is set to overprint but isn’t displayed in the Preferences. The green block is overprinted by the skin tone and the result is a muddy slab of colour.

Once you’ve selected text and clicked Convert To Paths, you can edit it as an object. Remove the dot from the ‘i’ and move the exclamation mark so it doesn’t overlap. Now Union the entire block of text and colour-fill it as one object, using a ‘gold’ effect gradient. Why? Club promoters love gold!

Computer Arts_January 2004

53

^

INSIGHT

WHY CAN’T I IMPORT JPEGS?

When a print job is processed, the information has to be gathered as PostScript data before the films can be played out. It’s a much larger scale version of the PostScript RIP on your desktop printer. JPEGs have so much compression, this information takes much longer to unravel itself in the image setter. Result? The print queue grinds to a halt. The less compression is saved in a file, the less time it will take to uncompress, so always use TIFFs or EPS files where possible.

24

19

Ensure you don’t forget to collect the imported images by embedding them under FreeHand’s Links menu. Embedding images increases the file size of your final document but ensures that the repro house can extract the files if they need checking.

Copy the basic skyline from the front of the flyer and use it for the rear. You can now import the text and make certain adjustments to it. All the body text is set in Univers 55 with -3 tracking, so set this and make any other changes you require.

22 20

Most flyers use logos supplied by a third party. For this flyer, use ‘The Full English’ logo as an RGB JPEG. You won’t be able to print from this, so convert it to greyscale in Photoshop, then output it as a bitmap image at the highest resolution you can.

Try to keep the text to as few different sizes and weights as possible. The greater the contrast between different types of information, the quicker the recognition will be for the reader. What you’re looking for is an effective ‘hierarchy of information’. Avoid force-justified text.

25

All that’s required now is a final proofread and check-up. Ensure all your fonts are converted to paths, your colours are CMYK and nothing is overprinting that shouldn’t be. Then save the front and back as an EPS (you can’t save multiple page EPS files). This means that all the printer has to do is import the saved image into a picture box in QuarkXPress or InDesign.

23 21

Similarly, try to limit the palette of colours you use for text. The more important the information, the more contrast it should have with the background colour. White is invariably the greatest highlight colour for text, but never use it on a yellow background because the two are too tonally close.

^

INSIGHT HOW MANY DPI?

Your on-screen resolution is 72dpi (dots per inch). Most lithographic printing is between 133 and 175lpi (lines per inch, where a line is a row of dots). This discrepancy in measuring systems often leads to confusion. To avoid pixellating images, all images must be 300dpi at their actual physical size. This means that for an A6 flyer, a full-bleed image needs to be 300dpi at 154x111mm (A6 + 3mm bleed).

54 Computer Arts_January 2004

Import this bitmap image into FreeHand. It contains only bitmap information, so you can now give it a transparent background and colour it white, so it looks as crisp as all the other vector logos you have already.

FINAL STEP

S

o this is it – the final flyer. You’ve learned how to save perfect, print-ready artwork and avoid the many pitfalls along the way. But don’t stop there. Now you’ve mastered the art, why not explore the exciting world of postcards, invites and posters?

SHORTCUTS

3DS MAX Life through a microscope looks entirely different to the universe we already see around us – discover how to illustrate it vividly using 3ds max

T

he brief for these two scientific illustrations (above) was that they should be believable yet slightly stylised. The challenge? To create the look of an image taken through a microscope, but with the clarity, focus and aesthetics of a 3D render. Two images were required: one of sperm swimming freely, the other of an egg being fertilised. For the first image, we created a large tube and placed the camera inside. We then applied a bend modifier to the tube, so that it twisted away into the distance, creating a closed environment with depth and perspective. Afterwards, we added a pinky-red fog, to suggest depth and give the impression of a liquid environment. The original sperm was a subdivision creation made by extruding a tail from the back of a simple box, and softening the edges. We then bent its tail at the Edit Mesh level to give it the appearance of motion. Instead of just bending it in the X direction, though, we also introduced movement in the Y direction. By doing this, we make the sperm look as if its tail is positioned differently, depending on the angle you view it from. We then used this sperm as a particle in a particle cloud, adding a random spin to help us generate a swarm of wriggling spermatozoa. This trick wouldn’t work in an animation; in this case, we’d have to animate the wriggling over several frames, and then use the particle cloud’s Animation Offset keying tool to differentiate the motion for each sperm. In the other image, there’s only one sperm, but the motion is accentuated by

56 Computer Arts_January 2004

using the Edit Mesh modifier on the egg. A vertex next to the sperm’s head is selected, and with Soft Selection turned on, the egg is deformed inwards. This ‘dent’ gives the impression that the sperm is struggling against the egg’s surface. A spherical particle cloud places a few bubbles inside the ovum to give it more body. The first image strived for depth, but here we’re aiming for the opposite. Only the vaguest of backgrounds is provided with a simple block colour and a transparent material covered in blotches. Finally, Video Post is used to give the egg a blue glow, and the nucleus in the centre a feeling of energy with a fire effect. This is artistic licence, of course. Ova don’t glow, and they aren’t filled with fiery smoke, but with the creation of life as our theme, we can afford to play a little. Video Post is an area of 3ds max that’s often overlooked, but it’s very useful for

creating lighting effects like this. To focus the glow solely on the egg, we gave the egg a unique Object Channel number (by right-clicking and choosing Properties), and then set the glow to only affect that object channel. We then fine-tuned the glow in the Video Post Lens Effects Glow set-up window. This enabled us to preview the effect interactively, without having to re-render the scene each time we altered something. Creating our cells, sperm and surroundings required a rather unusual approach to materials and lighting. We didn’t want shine or shadows, and all our objects were semi-transparent. What we did want was plenty of light, and irregular bumps over all our objects – follow the quick walkthrough below to see how this part of the job was done. INFO Expertise supplied by Christian Darkin, [email protected]

CELLING THE SHOT

WE THEN USED THIS SPERM AS A PARTICLE IN A PARTICLE CLOUD, ADDING A RANDOM SPIN TO HELP US GENERATE A SWARM OF WRIGGLING SPERMATOZOA

1

Create a self-illuminating material by setting Self Illumination to bright white. Reduce the specular level of your material to zero, for a matte effect. Highlights only make objects appear to be made of transparent plastic.

2

To give the objects texture, use a bump map rather than a diffuse map. The exact nature of the bump differs for different materials in our shot. The cell uses a simple noise map to create subtle ridges.

4

3

Next, set Transparency. We used a falloff opacity map with the falloff type set to fresnel and the direction set to viewing direction. This makes the edges of the object less transparent than the centre – and ‘glow’.

The microscope slide uses a similar noise map, but applies it as a submap of a ‘splat’ map. To colour your objects, apply colour to the Diffuse channel (for subtle results) or SelfIllumination (for more striking results).

ILLUSTRATION BY BENNY LUK

www.sixstation.com

58 Computer Arts_January 2004

Tutorial

PHOTOSHOP

BLENDING MODES Do you know your Soft Light from your Luminosity in Photoshop? Your Hard Mix from your Linear Burn? Here, we uncover the best Blending modes in the pack and show you how to use them Digital artists are always getting excited about Photoshop, for a multitude of reasons. Take, for example, when layers turned up in version 3 (1994) – suddenly there was a way of stacking images one on top the other, with the safety of removing, altering or adding layers as the work progressed. In addition, you could change the way one layer affected those beneath it, simply by changing the Blending mode. Things have come a long way since then. Not only have we seen an increase in the number of Blending modes (in Photoshop CS, there are now 23) available, but these modes have become an integral part of the Photoshop design process. And, don’t forget, these modes don’t just apply to layers – they can also be applied to some tools, such as the Brush tool. Somewhere along the way, though, we seem to have lost touch with exactly how each mode functions and the best ways to use them. So if you’re tired of aimlessly scrolling through the Blending modes list until you find something that works, read on – we’ll outline nine of the best over the following three pages, then show you one in action in our tutorial on page 63. A quick word on terminology. When we talk about the base colour, we’re referring to the colour already present in your image; you’ll use a Blending mode to paint onto, over, or add a layer on top of this. The Blend (or Blending) colour is what you’re going to add, or what’s already on the layer for which you’re selecting a Blending mode. INFO Words by multimedia designer and writer Jerome Turner, [email protected]

ON THE CD Locate the Tutorial\Blending folder on your CD before you follow the nine-step guide to using Blending modes on page 63.

Computer Arts_January 2004

59

By duplicating the Background Layer several times as Screen Layers (right-hand side), you can see how to reveal more details in dark, night photography.

By duplicating this design and setting it to Overlay, we see how the contrast is increased by making the dark tones darker and the light tones lighter.

On the right-hand side of this image, we’ve duplicated the base layer, then blended it in using Multiply. The contrast has increased as a result.

Here we’ve used a Screen layer filled with a Gradient to subtly lighten the bottom of the image where the reeds were originally hidden in shadow.

This stonework photo was very grey. In a new Overlay layer, we drew two squares, one black, one white – note that black gives us the better result.

BLENDING MODE 1 MULTIPLY

BLENDING MODE 2 SCREEN

BLENDING MODE 3 OVERLAY

Darken your base colour with ease

Retrieve details in dark photographs

Generate high-contrast imagery

If you apply this Blending mode to a Layer or Brush mode, dark pixels in the blending layer (on top) will darken light pixels in the base layer (on the bottom). If the Blending layer contains lighter pixels, they darken the base colour less. In other words, dark colours darken significantly, lighter ones less so. When we talk about dark and light values, this only refers to the luminosity of the pixels; the hue (red, green, blue, etc) and saturation (intensity of colour) are also relevant, because they affect how the Multiply layer tints the base. An example: if you’re adding shadow to a face, as shown, use the Eyedropper to sample a light skin tone, make it lighter (using the HSB sliders in the Color palette if necessary) and then paint into a new Multiply layer – it will darken the light skin slightly, yet using the proper ‘skin colour’ hue.

This mode has the opposite effect to Multiply. While Multiply darkens the base colour, Screen lightens it – or, more specifically, light pixels in the blending layer lighten dark pixels in the base layer, and dark pixels in the blending layer will lighten the base less. In using Multiply, colours are generally drawn towards black, so it stands that using Screen bleaches them out, towards white. Typically, digital camera images can turn out a little darker than we’d expect, so that details are lost to shady areas. This is where Screen can become very useful – simply Duplicate the Background Layer (Layer>Duplicate Layer) and change the mode to Screen. The effect may be a little too strong, blasting the image with light, so feel free to adjust the Opacity of the Screen layer. These two Blending modes (Multiply and Screen) are typically very useful in making adjustments to photographs, so you’ll find yourself turning to them time and time again.

Overlay combines both Multiply and Screen to produce a Blending mode that is very effective in creating high-contrast effects from otherwise quite grey images. The mode darkens your image’s dark pixels (multiplies) if the Blending layer is dark, and lightens up light base pixels (screens) when it is light. Note that black and white will not be affected, so details and contrast are always retained. This mode take a bit of experimentation, so the best idea is to take an image with little contrast and try painting a dark area, then a light area into a new Overlay layer, as shown. In fact, this is a great method for discovering and experimenting with layers in general, and could be applied to any of the Blending modes. As far as using this mode in your work, we all know how frustrating it can be to spend ages on a piece and then decide it’s too overworked and has become muddied as a result. Duplicating the base layer and then changing the top layer to Overlay will increase the contrast, and can then be adjusted using the Opacity control.

^

In a Multiply layer, we can paint in with a skincoloured brush to add shadow where objects might otherwise appear too flat.

INSIGHT TOOL OPTIONS

While painting on new layers, remember that you can change the layer Blending mode as you go by using the dropdown menu in the Tool Options bar. This often proves far quicker than changing it in the normal way from the Layers palette when you’re using brushes.

60 Computer Arts_January 2004

Tutorial

Here we’ve darkened the bottom-half of this illustration, using a blue Darken layer. Note how the colour tints as a result of the blend.

Duplicating the base layer of this image and then changing the mode to Soft Light makes for a very subtle contrast improvement.

Applying a flat colour layer to this photograph only affects the Hue value of the base layer. Now change the Blending mode to Colour…

Obviously, a Lighten Blending mode works in the opposite way to Darken, by lightening pixels that are darker than the Blend pixels.

You can use the mode for targeted lighting adjustments – paint less than 50 per cent grey to lighten and more than 50 per cent grey to darken.

With both Saturation and Hue imposed on the image, the pigeons look more tinted. You can use this effect to really bring out detail in your photographs.

BLENDING MODE 4 DARKEN

BLENDING MODE 5 SOFT LIGHT

BLENDING MODE 6 HUE

Darken the base pixels of your image

Subtly adjust contrast and lighting

Hue offers subtle tinting effects

By using Darken, base pixels that are lighter than the Blending layer pixels are modified. If the base colour is darker, then it’s left untouched. This is useful because the base colours react specifically to the colour in the Blending layer, so you can use a dark brush to affect lighter shades in an image. Also keep in mind that the Hue and Saturation levels of the Blending colour are impressed on the base layer, too. Try taking any standard image and creating a new layer that is filled with a 50 per cent Brightness (set one using the HSB sliders of the Color palette) shade of a colour (make it rich and saturated). Then set the mode to Darken and see how this affects the base image. First, only pixels that are darker than 50 per cent are affected, and all shades of the image are tinted with the colouring that was chosen. It collects all lighter shades and makes them into a flatter colour or area based on the Blending colour, often producing interesting posterised images. You’ve probably guessed by now that Lighten is the opposite of Darken – it lightens base pixels that are darker than the Blending colour.

This Blending mode lightens the base pixels if the blending pixels are light (more than 50 per cent luminosity), and darkens pixels if they are dark (less than 50 per cent luminosity). It therefore stands that a 50 per cent grey Blending colour will not affect the base image at all. The base pixels respond to the shade of the blending pixel but aren’t forced all the way to white or black. The process is far subtler than that, so you’ll find this mode great for adjusting lighting in parts of photography or other imagery. Unless you want to make these adjustments with a slightly coloured tint in mind, make sure that the Blending pixel colour used is desaturated (if painting, use a colour with 0 per cent Saturation on the HSB Slider). You can also use this as a more subtle version of Overlay – if you duplicate an image and change the top layer to Soft Light it will make light colours lighter and dark colours darker, but not so much as to look forced.

This is one of four modes we can use to impose particular values from the Blending colour straight on the base. Setting a layer to Hue means that the hue value of the pixel is transferred on the base, so it’s great for subtle tinting. If you want to apply a particular hue of colour onto your base layer, pick the colour first using the HSB Slider in the Color palette. Now paint where you want to alter the base layer beneath. Note that the Saturation and Luminosity values are not altered, but make sure that Saturation in your Blending colour isn’t set to less than 4 per cent - for some reason, it will then apply the Saturation value and desaturate your base. On the other hand, if you do want to apply Saturation and Hue values from the Blending layer to the base, use the Colour Blending mode. This imposes a much more powerful tinting effect, and with a very saturated blend colour images can be made more vibrant.

Computer Arts_January 2004

61

We’ve darkened this illustration in the background by painting a medium orange into a Linear Burn layer. You can use this to create some striking colour effects.

A duplicated photo layer with the Hard Mix mode applied shows just how easy it is to produce instant posterised imagery at the flick of a switch!

This image of a rusted container has been converted into one Luminosity value (right). You can create ideal flat backdrops for text-filled Websites in this way.

The lower half of this image shows the effects of a Linear Burn. The dark green has darkened nearly to black, while the yellow has tinted into orange.

You can also re-render illustrations as striking, flat images like this. Even if you don’t end up using it, the layer can act as a useful creative springboard.

BLENDING MODE 7 LUMINOSITY

BLENDING MODE 8 LINEAR BURN

BLENDING MODE 9 HARD MIX

Achieve the Hue/Saturation of the base colour and the luminance of the Blend colour

Darken the base colour to reflect the Blend colour by decreasing brightness

Photoshop CS’s latest addition to the ever-expanding Blending mode fold

Along with Linear Dodge, this is one of the Blending modes introduced in Photoshop 7. A dark colour in the Blending layer darkens the base layer by decreasing the luminosity values. If the blend layer is light, then it darkens the image less, and tints according to the Hue and Saturation values. Note that even if you apply a 100 per cent black in the Linear Dodge layer, some highlights may still show through. Note also the difference between this and the Luminosity mode – Luminosity imposes a particular luminosity value from the Blending colour (eg 23 per cent), but Linear Dodge increases the darkness.

Photoshop CS comes with one staggering new Blending mode, and it’s called Hard Mix. In many respects, Blending modes often seem to double up functions that could be achieved another way. Dissolve, for instance, is basically a Texture>Grain Filter, or Linear Dodge, achieved using the Dodge Tool. The Hard Mix is also guilty of this, because it creates a posterising effect, when we already have something similar in Image>Adjustments>Posterise. However, the key difference here is that Hard Mix specifically posterises using a mix of red, green, blue, cyan, magenta, yellow, black and white. To see how different colours affect the Blending mode’s behaviour, add a solid colour adjustment layer and set a colour. Change that layer’s mode to Hard Mix. Now double-click the layer thumbnail (the coloured bit) of your adjustment layer and you can change the colour in the pop-up, previewing the effect on the base layer as you do so. Try changing the Saturation, Hue and Brightness values of the solid colour to see how this changes which areas are posterised.

This is also grouped with Hue in the Blending modes list, because it applies a value from the Blending layer pixels onto the base layer – in this case, the Luminosity value (brightness). This is useful, because you can use it to set an area to a particular darkness – again by picking a colour’s Brightness value in the HSB Slider and then painting it into your Luminosity layer. You can also achieve some quite chilling effects by applying a flat layer of one colour as a Luminosity layer. As the Luminosity is made constant across the whole image, there are no light or dark areas, no highlights and shadows, so you rely on reading Hue and Saturation to make out the image. The Hue and Saturation values aren’t affected, but you could add (by stacking on top) Hue or Saturation layers if these are the kind of changes you want.

^

If you apply a flat Luminosity layer to a photo, it can be difficult to pick out any details, because there are no bright or dark contrasting areas.

INSIGHT

OTHER CHOICE BLENDS We may have only selected nine of the best Photoshop blending modes – but there are more, including Dissolve, in which the result colour is a random replacement of the pixels with the base colour or the blend colour, depending on the opacity at any pixel location; and Difference, which looks at the colour information in each channel and subtracts either the blend colour from the base colour or the base colour from the blend colour, depending on which is brighter.

62 Computer Arts_January 2004

Tutorial

TUTORIAL USING BLENDING MODES Locate the Tutorial\Blending folder on the CD, then follow this quick introduction

4

Pick another colour until you find one that Hard Mixes a pattern you like – a medium Brightness and Saturation will provide you with the biggest range, then pick your Hue (as shown).

7

Change this layer to Overlay, noting how it pushes dark shades darker and light (the blue) shades lighter, increasing contrast. Now add the word ‘taxi’ using the Type tool, select Layer>Rasterise>Type and apply Filter>Stylise>Find Edges.

1

Open the taxi.jpg file. Note that the background layer can’t change Blending mode from Normal, because it has nothing beneath it to blend. Drag the layer thumbnail over the Create a New Layer button and the layer will duplicate.

5

In many cases, you can merge layers of different Blending modes into one without affecting the way they work together. Select the Multiply layer and then Layer>Merge Down. Now Duplicate this layer as before and place it at the top of the stack.

2

Change the Blending mode to Multiply. Now do Edit>Transform>Flip Horizontal. Note that the image is perfectly symmetrical, because the light pixels in the base are darkened by the dark Blend pixels, by the same amount that the dark pixels in the base are unaffected by light Blend pixels.

8

Change the Blending mode to Difference – the white in the text now creates a negative of the base colours. As a final touch, add a huge yellow exclamation mark and change the mode to Hue, then Duplicate the layer.

FINAL STEP

A

pply a slight Gaussian Blur (around five pixels) to the duplicate, change the mode to Overlay and then make three duplicates of this so the shape picks out some of the street detail. Adjust the Opacity of the last duplicate if necessary.

6

Change this top layer to Hard Light – note how it puts some detail back in and retains contrast. Create a layer above this, then pick an 80 per cent grey (desaturated) and use it to Edit>Fill the layer.

3

In the Layers palette, add an adjustment layer – a solid colour layer. Hit OK when you see the pop-up and change the Blending mode to Hard Mix (Photoshop CS only). Then double-click the layer thumbnail icon in that layer so the pop-up returns.

Computer Arts_January 2004

63

SUBSCRIPTION FORM 3 EASY WAYS TO ORDER: 2. Post: UK readers – Christmas Orders, Future Publishing Ltd, Freepost BS4900, Somerton, Somerset, TA11 6BR Overseas readers – Christmas Orders, Future Publishing Ltd, Cary Court, Somerton, Somerset, TA11 6TB, UK 3. Fax this completed form to: +44 (0)1458 271 146

✁

1. Phone : 0870 444 8455

STUCK FOR IDEAS THIS CHRISTMAS? Buy a gift that lasts all year

■ I would like to subscribe/renew to

Computer Arts using this special Christmas offer (delete as appropriate):

■ UK (Cheque/credit card) £46.80 (save £31.20!) ■ Europe £73.53 ■ Rest of the world £86.53 For residents in N.America see page 68 for our special subscriptions offer ■

I would like to send a Gift subscription of Computer Arts

*Gift subscription copies will not arrive until the first issue after 25 December 2003

YOUR DETAILS Title ___________Initials __________Surname ________________________ Address ____________________________________________________________ Postcode ________________________Country _________________________ Daytime telephone number _________________________________________ Email address_______________________________________________________

GIFT RECIPIENT’S DETAILS Title ___________Initials __________Surname ________________________ Address ____________________________________________________________ Postcode ________________________Country _________________________ Daytime telephone number _________________________________________ Email address_______________________________________________________

PAYMENT METHODS I understand I will receive 13 Issues over 12 months Please choose your method of payment

1.

Cheque Payable to Computer Arts. Sterling cheques drawn on a UK account

2. 3. Card no

Visa

MasterCard

AMEX

Switch Issue no

■■■■ ■■■■ ■■■■ ■■■■ ■■■■

Expires_____________________________________________________________ Signature ________________________________________________________Date ______________ Your subscription will start with the next available issue Offer code: COAXP92

Offer ends 31 January 2004 Please tick here if you do not wish to receive mail from carefully selected companies Please tick here if you do not wish to receive mail from Future Publishing

COMPUTER ARTS SUBSCRIBERS GET: ● New and exclusive reviews, demos, interviews and news – keep your skills and creative knowledge up to date ● A special subscriber-only cover, free of coverlines ● Expert techniques and insight for image-manipulation, illustration, Web and graphic design, 3D and digital video ● Dual-format CD-ROM with new content every issue: full programs, stock images, video tutorials and demos ● Full products – previous issues have included Cinema 4D, FreeHand, Poser, FireWorks, trueSpace, AXEL and more

Subscribe

SPECIAL CHRISTMAS OFFER SAVE 40% ON THE PERFECT CHRISTMAS GIFT

CHRISTMAS GIFT!

That’s a saving of over £31 on the cover price

• • • •

A Subscription to Computer Arts makes the perfect Christmas gift fo a friend, relative,r or even yourself

FREE delivery direct to your door Cover CD, packed with software Never miss an issue Save 40%* on the price you’d pay in the shops

*40% Saving is based on 13 issues bought on the UK newsstand. This offer is only available to delivery addresses within the UK.

GIVING A GIFT SUBSCRIPTION IS EASY! SIMPLY CALL

0870 444 8455

OVERSEAS +44 870 444 8455

(PLEASE QUOTE CODE COAXP90) *40% Saving is based on 13 issues bought on the UK newsstand. This offer is only available to delivery addresses within the UK.

Computer Arts_January 2004

65

PROFILE

HYDRO 74 NAME Joshua Smith EMAIL [email protected] WEBSITE www.hydro74.com

How did a budding school teacher end up working for Endeavor Snowboards, K2, Billabong, Airwalk and Jump Start Records – all leading sport and music brands? Joshua Smith, Art Director of US agency Axis Media and the talent behind Hydro74.com, may have started college with the intention of becoming a primary school teacher, but ended up discovering a talent for new media design and illustration. I“switched from Elementary Education to Liberal Arts. I wasn’t planning on working in graphic design or illustration, but I built a Website with some friends which was well received by companies that we really liked. It enticed me to continue with design.” Smith started off working with small freelance projects for the music industry, using Illustrator, Streamline, FreeHand and Fontographer. His freelance Website, Hydro74, is a great reflection of the standard of work he’s now capable of. W “ hat I like most about being a designer is the variety: every project has a different demand, so you refine your skills to avoid doing the same thing over again. I’m still in shock at what I’ve done and who I’ve worked with, and excited about where things are going.” What are you obsessed by?

My biggest obsessions are probably the same curses that most other designers struggle with. It’s seeing my faults, or mistakes; knowing I could have done better with a project, or the fact that I know what limits me. What are you working on now?

1

I’m currently working with Mike Morton over at Split to develop a new line of shirts for this upcoming season. I’m also developing lines of shirts for Billabong and Burton Snowboards. What is your strangest client experience?

When I was doing work for a clothing company called Dirtbag, they sent me a cheque and some condoms. Thought that was pretty funny. What do you read in bed?

Design magazines – Computer Arts (seriously!), How, Print, Juxtapose, and some snowboarding magazines. What is your ultimate ambition?

I have two. I want to become an established designer so I can support my family, and with my wife Leta and daughter Caitlyn I strive to be the best father and husband I can possibly be. Favourite city?

Chicago.

2

How do you celebrate completing a project?

I either start a new illustration, or start the next project. I’m a geek… Best album to work to?

Here is what my iPod is giving me lately: Front 242, The Smiths, Bob Mould, Sven Vath and Judge Jules. I want to visit either Ministry of Sound, Gatecrasher or God’s Kitchen sometime in my lifetime. If you weren’t busy being a designer, what would you be doing now?

I would be a school teacher. What keeps you awake at night?

Desire, deadlines, Red Bull, strong Coffee and the Discovery Channel.

66 Computer Arts_January 2004

3

Profile

1. These doves were created for Vancouver-based Endeavor Snowboards to adorn one of its board ranges. 2. “I’m really into tattoo art,” says Smith. “It’s such a interesting form. Inspired by tattoo magazines, I decided to sketch up my own tattoos if I wanted to get any, and these two are part of a set. After showing a couple clients, I was encouraged to vector them up and see how they would come out.”

4

3. Robosnake, according to Smith, “Is one of those projects where you just wanted to illustrate a snake…” 4. Wasp was produced for Eastern Bikes. “This is part of an illustration line for bike stickers that went off pretty well. This illustration has always been my favourite.”

7

5. Mechamantis – part of a set of five snowboards. 6. This turtle is also part of a set of five snowboards. “The ape is just one of those illustrations that never got used for anything. But to me, it’s still a powerful piece.” 7. Like image 1, this illustration, entitled Lion-Owl, was produced for Endeavor Snowboards as part of a set of illustrations for the company’s board lines.

5

6

6 Computer Arts_January 2004

67

ILLUSTRATION BY THS

www.ths.nu

68 Computer Arts_January 2004

Tutorial

CSS TYPOGRAPHY & LAYOUT

DREAMWEAVER MX 2004 Using CSS in Dreamweaver MX 2004 is even easier than before. If you’re serious about designing and building professional Websites, this is a tool that will give you an advantage over your competitors, while also making your job more enjoyable Dreamweaver MX 2004 has many powerful features that make building Websites easier, while also giving you more control over the site layout. We’re going to focus on the new set of CSS tools and capabilities: the CSS Rule Inspector, improved CSS layout visualisation, improved CSS rendering, improved CSS Panel, CSS-based Text Property Inspector, CSS-based page properties and CSS code hint pop-ups. These tools give you an amazing amount of control over the text and layout of Websites. If you’re curious about whether or not to move from MX to MX 2004, the improved CSS rendering alone will make it worth the upgrade cash. In this tutorial we’re going to adapt a template that ships with Dreamweaver. By the time we’ve finished

you’ll be able to create a Web page, using CSS and JavaScript to control the entire page. If you’re accustomed to using tables and HTML font tags to lay out your site, we’ll teach you new skills that will help you win new and better clients. INFO Tutorial by BD4D’s Ryan Carson, [email protected], www.bd4d.com

ON THE CD In the Tutorial\Dreamweaver folder on your disc, you’ll find an assets folder. The file myCSS.css is the CSS document used in cssTest.html; cssTest.html is the main HTML document used in this tutorial, adapted from a template that is shipped with Dreamweaver MX 2004; and the JPEGs and GIFs are all the graphics needed for the HTML page.

Computer Arts_January 2004

69

PART 1 SETTING UP THE FILES Start by creating a new HTML file

4 1

In Dreamweaver MX 2004 (we’ll refer to it as just Dreamweaver from now on), select File>New> Basic page>HTML. Make sure that M ‘ ake document XHTML compliant’ is checked.

In this tutorial we’re adapting a template that ships with Dreamweaver, as it’s a great example of how to use CSS, HTML and JavaScript together to create a quality Web page. The page is going to have a Global Nav, Global Subnav, Section Links, and a Feature article. Start out by typing these into cssTest.html as simple text.

7

At first, the sheer number of options can be overwhelming, but don’t worry, we’ll take it easy at first and then tackle the more complex CSS capabilities a bit later. Select the Box Category and enter 16 for Padding>Top and 8 for Padding>Bottom. Tick S ‘ ame for all’ on Margin and enter zero.

8 2

Now we need to create the CSS file that accompanies this HTML file. In Dreamweaver, click File>New>Basic Page>CSS. As you can see, it gives you an empty CSS file with a comment stating that it’s a CSS Document. Now go ahead and save these two files as cssTest.html and myCSS.css.

5

The amazing thing about using CSS to lay out your Web page, is that the code is much more clear and simple compared to using tables. If you preview the text you’ve just typed in, it looks ridiculous. Don’t worry! We’ll be using CSS to put those elements in their proper place.

6 3

Now we’re going to attach the CSS document to the HTML document. It’s always best to attach, instead of embed CSS documents. This enables you to use the same CSS document on multiple HTML files. Hit Shift+F11 to bring up the CSS Styles Panel. Click the Attach Style Sheet button on the bottomright and browse for myCSS.css.

70 Computer Arts_January 2004

Now we’ll create CSS Styles using the CSS Styles Panel. In the CSS Styles Panel (Shift+F11), add a new style by clicking New CSS Style. For Selector, type # ‘ siteName’. This is the name of the CSS style. Tick A ‘ dvanced (IDs, contextual selectors, etc)’ and leave D ‘ efine in: This document only’ ticked.

Next up is creating CSS Styles using code pop-up hints. We’ve inserted a Content Block into myCSS.css using the CSS Styles Panel. Now let’s try doing it in Code View. We’re going to need a Content Block to hold the Site Name, Global Nav and Subnav – we’ll call it masthead. It will have the following values: position: absolute; top: 0px; left: 19px; right: 2 per cent; width: 96 per cent.

9

Now create a third CSS element called pageCell. This will be the area where most of the page content is placed. It will have the following values: position: absolute; top: 112px; left: 2 per cent; right: 2 per cent; width: 96 per cent; background-color: #ffffff.

Tutorial

PART 2 COMBINING CSS AND HTML Now on to the fun part

12

If you view the page in Design View you’ll see the affects of the CSS Content Blocks. We know it’s no work of art at this stage, but it gives you a notion of the usefulness of CSS – creating page layouts without building complex tables.

15

In addition to globalLink, we’re also going to add g ‘ lobalLink a’, g ‘ lobalLink a:visited’ and g ‘ lobalLink a:hover’. By adding link elements to the globalLink Content Block, we’re able to control its link styles uniquely from the rest of the page.

10

We’ve done lots of work setting up these files, so let’s start laying out the page. We’re going to place tags around our text, which will position it on the page. In the Code View Window, place a tag around the S ‘ ite Name’ text. Dreamweaver’s helpful code pop-up hints suggest styles from myCSS.css to choose from. Go ahead and choose s‘ iteName’.

13

Go ahead and experiment with the ease at which you can modify the size and location of these Content Blocks. In Design View, select the pageCell Content Block and drag or resize it. You’ll notice that Dreamweaver auto updates myCSS.css for you. Make sure to save before you do this, as Dreamweaver crashed on us when we tried to undo the changes – it pays to save regularly!

16

Now it’s time to add the globalNav and globalLink tags to our page. We’ll be nesting the tags inside the masthead tag, just below the siteName . There is some JavaScript in the global links which we’ll address later.

14

To get the masthead looking right, there are a few more CSS elements to take care of. Let’s add a globalNav and globalLink elements. The values for globalNav are: position: relative; width: 100 per cent; min-width: 640px; height: 32px; color: #cccccc; padding: 0px; margin: 0px; background-image: url(“ glbnav_background.gif” ). Note the usage of a background image.

11

^

Now place the two Global links and the five Sub-Global links into a masthead tag. After you’ve done this, nest the siteName inside the masthead tag. This is one of the most powerful features of CSS – the ability to nest Content Blocks. And finally, place the rest of the text in a pageCell tag.

INSIGHT CONTENT BLOCKS VS CLASS STYLES

When creating a CSS document, you can usually divide it into two areas: Content Blocks and Class Styles. Content Blocks are used for placing content on the page and are prefixed by the hash character. Class Styles are used for controlling typography and are prefixed by a period. Class Styles are the only CSS Style that can be applied to any text in a document, regardless of which tag it resides in.

17

If you open the Design View you’ll notice that the page is looking better, but it’s still a bit messy. Let’s add a body, link and h1 styles that will tidy things up for us.

Computer Arts_January 2004

71

PART 3 JAVASCRIPT Next, we’ll add JavaScript into the mix – combining it with CSS and HTML

21

You’ll have noticed by now that we’ve set onmouseover to call JavaScript functions. These two functions simply change the CSS property of something on the page to h “idden”or v “isible” .

18

Now we’re going to tackle the global subnav. We want this to only appear when you place the mouse over a global link, then disappear when you move away.

24

Next up is Page Name. Let’s create a pageName content block and a h2 class to go with it. By now, you’re hopefully more comfortable with the padding, margin, border and font CSS properties we’ll use for this Content Block.

22

Now that we’ve built a function to show the global subnavs, we need to hide them when you move your mouse away. Thankfully, there is a browser event called onmousemove which we can place in the tag. This executes every time you move the mouse. We’re going to use it to call a JavaScript function called closeSubnav.

19

Let’s start by adding a subglobalNav class. We’ll also need an a:link, a:visited and a:hover for this class, as we want the links in the global subnav to look unique from other links.

23

Let’s address the feature section of the page. You guessed it – we’ll need a feature Content Block. We’ll be using padding and margins to place the feature on the page, while also defining a feature h3 class for the feature title.

25

INSIGHT

26

Last but not least is the section links area. We’ll need four CSS elements: the sectionLink Content Block and the h3, a:link, a:visited, a:hover classes. Using the power of CSS, we can even change the background image when the mouse passes over a link, all without tables or JavaScript.

20

^

Now let’s combine the CSS with the HTML. Add two tags, with id=” subMenuItem1” and id=” subMenuItem2” , giving them both subglobalNav for their class attribute. Place these inside the masthead , below the globalnav . A tremendously useful CSS property we’re using is v “isibility: hidden”– this makes the global subnav invisible until we tell it to appear.

JAVASCRIPT AND CSS

How can you decide between making a CSS class or a CSS Content Block? The difference is very subtle. If you’re using JavaScript to control something on the page, for example an tag, you should use a class (.styleName). This is because you’ll need to give the id attribute of the tag a unique name so the JavaScript can manipulate it.

72 Computer Arts_January 2004

The sectionLinks content block really demonstrates the power of CSS. By placing a simple tag around a group of links, you can achieve very complex rollover effects, while keeping the HTML clean and simple.

Tutorial

^

^

INSIGHT

INSIGHT

CONTENT BLOCKS

LAYOUT VIEW

In addition to being able to visually lay out tables in Dreamweaver, you can also create Content Blocks in the same manner. To switch to Layout View, Click View>Table Mode> Layout Mode (or Ctrl+F6). Open up the Insert bar (Ctrl+F2) and select the Draw Layer button. You can resize, drag and nest these content blocks however you like, and Dreamweaver takes care of writing the CSS for you.

Dreamweaver MX has an amazing tool called Layout View. You can simply draw your tables, and Dreamweaver codes the table for you. Not only is it quick, it generates clean code. To switch to Layout View, Click View>Table Mode>Layout Mode (or Ctrl+F6). Now open up the improved Insert bar (Ctrl+F2) and select the Layout Table button.

BROWSER COMPATIBILITY

PART 4 THE TAG INSPECTOR PANEL A feature not to be missed

29

There are two views of CSS elements that are assigned to the current tag that is selected (the globalLink tag for our example): Category View and List View. We generally find List View more helpful, as it puts the elements that have been assigned a value right at the top.

Dreamweaver MX 2004 offers even more capabilities for checking your code for browser compatibility. It automatically underlines offending code pieces as you write them, with helpful tool tips to explain what the problem is. If you would like to specify exactly which browsers are checked against, select Settings from the Target Browser Check menu in the Document toolbar.

31

Lastly, make sure to use Dreamweaver MX 2004’s new capability to check your CSS for browser compatibility. If you see any red underlines in your CSS or HTML document, mouse over them and Dreamweaver will give you an explanation of the problem – convenient is an understatement!

30 27

Now that we’ve laid out all of the CSS and placed it into the HTML, we can explore the usefulness of the Tag Inspector Panel. Trust us when we say that this is something you’ll want to make use of. Open it up by hitting F9 or Window>Tag Inspector, and once it’s open choose the Relevant CSS tab.

Now the final touches. Before we close up shop, one last small note. If you’ve used CSS before and are accustomed to tags instead of tags, it’s best to use tags, as browsers which don’t support layers will handle them slightly better. Make sure you check out Dreamweaver’s Help files – they’re pretty good.

FINAL STEP

A

ll that’s left now is to hit F12 to preview your page in a Web browser. By now you should have gained insight into the powerful layout and typography features that CSS and Dreamweaver can offer to the serious Web designer.

28

The reason why the Relevant CSS tab on the Tag Inspector is so important, is because it helps us sort out complex CSS dependencies. Click your mouse on the globalLink tag and the Relevant CSS tab tells you that it is being influenced by body, #masthead and #globalNav tags.

Computer Arts_January 2004

73

The Expert’s Voice® – Is Louder! THE AUTHOR’S PRESS ® Building Database Driven Flash Applications Noel Jerke and Darin Beard

Learn Programming with Flash MX Kristian Besley and Ben Renow-Clark

• Includes hands-on examples that integrate Flash interfaces with database data • Provides techniques to build better, richer Web applications • Covers a wide range of Microsoft Web and database technologies including Microsoft SQL Server, Microsoft Access, ASP, and ASP.NET

• Acquire foundational programming skills in the interactive setting of a virtual classroom • Create your own dynamic application using Flash MX and ActionScript • Learn a fundamental programming skill set that you can apply to any programming language Geared towards absolute beginners, this book covers the fundamental programming principles and skills that every programmer needs to master in order to create well-structured and efficient code that lives up to professional standards. It employs a truly unique classroom-based approach to learning, with the goal of establishing core, practical programming skills. In each “class”, theory and practice are smoothly blended together with plenty of practical examples. The class project that runs through the book reinforces the learning in an integrated, real-world context, using Flash MX as the illustrative vehicle.

Building Database Driven Flash Applications demonstrates how the capabilities of Flash programming can be combined with Web back-end databases directly, without an intermediate layer of programming. Techniques for utilizing Flash presentation capabilities with the power of back-end databases are covered in step-by-step detailed techniques as well as complete “out-ofthe-box” solutions that are ready to be utilized immediately.

FREE SAMPLE CHAPTER ON COVER CD ‘SETTING UP THE WEB SERVER AND DATABASE ENVIRONMENT’ PLUS ‘CREATING YOUR FIRST FLASH APPLICATION’

Oct-03 504 pp

Softcover ISBN: 1-59059-110-0 RRP: £35.50

FREE SAMPLE CHAPTER ON COVER CD ‘PROGRAMMING CONCEPTS’

SPECIAL PRICE FOR COMPUTER ARTS READERS £28.40 plus p&p

Oct-03 448 pp Softcover ISBN: 1-59059-241-7 RRP: £21.50 SPECIAL PRICE FOR COMPUTER ARTS READERS £17.20 plus p&p

Dreamweaver Developer’s Instant Troubleshooter Rachel Andrew, Gareth Downes-Powell, Nancy Gill, Kevin Marshall, and Drew McLellan

Design Concepts with Code: A Developer Approach Kelly Carey & Stanko Blatnik • First book to bring design to code and code to design • Simple, clear, strong ideas and illustrations of basic design principles

“The best book for professional Dreamweaver users who need to know how to integrate other web technologies but don’t need yet another tour around the menus. Real solutions to real problems that will save you lots of time...not to mention hair!” George Petrov, founder, MMXzone.com

Design Concepts with Code: A Developer Approach is the first book to tackle basic graphic design issues like line, colour, symmetry, and balance for an audience of sophisticated programmers. The authors cover design concepts including interface design, design principles, design elements, layout, content and typography, and colour which are presented with code including XML, XHTML/CSS, SVG, XSLT, XSL-FO, and scripting languages. This text offers design concepts, examples, projects, and code (no apps) to quickly enhance client and user interpretation and appreciation of web-based products.

• Master Dreamweaver development from connection to completion • Learn from Dreamweaver professionals how to install and troubleshoot dynamic technologies • Identify best practices for how to develop with CSS, ASP, ASP.NET. MySQL, ColdFusion, and PHP • Discover the importance of web standards and understand how to use them with Dreamweaver

FREE SAMPLE CHAPTERS ON COVER CD ‘CSS’ PLUS ‘TOP PHP QUESTIONS’

Kristian Besley is a freelance author and he is also a regular contributor to Computer Arts magazine.

Rather than focus on the basics of the interface, this book deals with the problems frequently encountered with the more complex areas of web development with Dreamweaver and serves as a solid grounding and installation reference to a number of other key technologies, like PHP, ASP, MySQL, and CSS. Dreamweaver MX is a complex tool. With its new features for building web sites with server-side scripting, standardscompliant code, advanced template features, and Cascading Style Sheets, it can hold many traps for the unwary. Whatever your quandary, this book has all the answers!

Nov-03 361 pp Softcover ISBN: 1-59059-111-9 RRP: £28.50 SPECIAL PRICE FOR COMPUTER ARTS READERS

FREE SAMPLE CHAPTER ON COVER CD ‘INTRODUCING INTERFACE DESIGN’

£22.80 plus p&p

Oct-03 299 pp Softcover ISBN: 1-59059-233-6 RRP: £28.50 SPECIAL PRICE FOR COMPUTER ARTS READERS £22.80 plus p&p

All Computer Arts readers can claim

20% discount on Apress books

MAKE OUR BOOKS YOUR FIRST CHOICE The Expert’s Voice® Offer ends February 1st 2004

To order, please email [email protected] Alternatively, you can choose a book from the FREE catalogue available on the cover CD and email: [email protected] to order. More books available at springeronline.com

Distributed by

Q&A

SHORTCUTS PHOTOSHOP CS

midtones in the highlight or shadow areas. Positive values increases the contrast and negative values decreases the contrast. Finally, there are Black Clip and White Clip percentages, which specify the degree that the new shadow and highlight values clip the original highlight and shadow values. Setting high percentages can lead to contrasty images with a lack of detail, as shadows get pushed to black and highlights blown out to white.

Photoshop CS offers a selection of new tools for tidying up and correcting images. One of the most powerful is the Shadow/Highlight command, which brings out difficult-to-discern detail in dark shadows and blown-out highlights. We show you how to use it

P

icture the scene: you’re on holiday and you see the perfect setting, perhaps a sunset or mountain vista, to position your beloved in front of for the digital scrapbook. After snapping away with your new-fangled digital camera, you come home, only to discover that image doesn’t look as good as you remembered… Digital cameras, and modern scanners for that matter, are fantastic tools, but often the images they produce can be a little too contrasty, resulting in dark midtones and a lack of detail. Usually, there’s detail lurking in the images, and a professional Photoshop retoucher will be able to coax it out.

The problem is, not all Photoshop users know what to do to correct the image. Photoshop offers so many options, some of which are not really suitable at all, that it’s not surprising that many people throw their hands up in despair. But the whitecoated boffins at Adobe have been listening, and have come to the rescue with a miraculous feature in the recently released Photoshop CS upgrade, called the Shadow/Highlight command (Image>Adjustments>Shadow/Highlight). Although it’s possible to treat this command as one-click instant fix for the amateur photographer, in order to get the most out of Photoshop’s handiest new feature it’s best to take a closer look at the potentially baffling array of options.

THE SHADOW/ HIGHLIGHT COMMAND CAN WORK MIRACLES ON IMAGES WHICH WOULD HAVE PREVIOUSLY TAKEN A LOT OF HARD WORK AND EFFORT TO CORRECT

The Shadow/Highlight filter can help you correct two common mistakes: a subject silhouetted by a strong backlight, or a subject washed out because it’s been shot too close to the camera flash. With the Shadow/Highlight dialog box open, click the Show More Options check box to toggle the advanced features. The Shadows and Highlights both have their own set of sliders that control the Amount, Tonal Width and Radius. Amount is simply the amount of overall correction you want in the highlight and shadow areas. Tonal Width and Radius are more complex. Tonal Width controls the range of tones that are changed. A small percentage value restricts modification to only very dark areas for the Shadow slider, and very light areas for the Highlight slider. Be careful not to apply too much – it can create haloes around areas of contrast. The Radius slider determines whether a given pixel is in the shadows or the highlights by looking at other pixels in the vicinity. The bigger the radius, the more pixels are examined. The best radius value depends very much on the size and type of image, so experiment to find the optimum number of pixels. If the radius is too large, you may find the whole image lightening or darkening. There are also an additional pair of adjustment sliders: Colour Correction and Midtone Contrast. Colour Correction acts like a saturation filter, enabling you to boost or tone down colours in the adjusted areas. The Midtone Contrast enables you to adjust the contrast of the

Fortunately, you can save (and then re-use) all the adjustments you make at any time using the Save and Load buttons. This way you can create libraries of solutions for difficult images that you can easily recall in Photoshop with just a few mouse-clicks. The Shadow/Highlight command can work miracles on images which would have previously taken a lot of hard work and effort to correct. And thanks to Adobe’s decision to include the full set of adjustment variables, the tool should be welcomed with open arms by professional retouchers, as well as the casual hobbyist looking for a quick and easy solution. It’s an easily overlooked feature, but once you witness the results and appreciate the power it provides, you’ll be using it on a daily basis. INFO Expertise supplied by Jason Arber, [email protected] Photograph of Guitar Vader by ©Akiko Konno

Computer Arts_January 2004

75

SA LE ON N O W ! free B of ! G 4 r e r Ove softwa

FOR MORE DETAILS VISIT US ONLINE • www.3dworldmag.com

COMPLETE 3D COLLECTION 2 A special book-length collection of tips and tutorials to help you master the world’s leading 3D software FROM THE MAKERS OF

2 2PA2 GES OTF EXPVEIRCE AD

Expert tuition in every aspect of 3D >> Modelling >> Digital texturing >> Lighting >> Animation >> Character design >> Effects >> Compositing >> Choosing 3D software

REVIEWS

★★★★★

SOFTWARE

OUR FIVE-STAR RATING EXPLAINED

Adobe Creative Suite Premium p78 Modelshop p82 The Tab 2.0 p83 Toon Boom Studio Express p83 3ds max 6 p84 Carrara Studio 3 p86

For a piece of software or hardware to make it into Computer Arts’ reviews section, it has to reach a certain standard. Truly dire products will be ignored, which is why you’ll rarely see one-star ratings. Our reviewers are experts in their own fields. We assess tools from the viewpoint of the professional designer. Does the product do what it’s meant to do? Is the interface clean? Is it quick, reliable and useful? And is it good value? Computer Arts Recommended awards are only given to products that are particularly good value, or truly excel in what they do.

HARDWARE

Apple PowerBook 17-inch p88 Plextor PX-708UF p89 G-Celerator G4 p89 Creative Stuff p90 GROUP TEST

AFFORDABLE DV CAMS p94 Sony TRV19E Canon MV600i Canon MVX150i Panasonic NV-GS50B JVC GR-DV700EK

A few months ago, we previewed the Adobe Creative Suite Premium, and since then we’ve had a chance to really test it out. Turn the page to see exactly what we think of it now… Of course, we’ve also been testing out other great software and hardware. Check out our exclusive on Modelshop, for instance. This Photoshop plug-in enables you to import native 3D models and composite them using lighting and shadow planes. See what you think on page 82. Carrara Studio is a tool that once left us a little confused; we were never sure whether it would flourish into an unmissable bargain 3D tool, or prove too quirky for many users. We cleared it up in the end, though – check out page 86 for an in-depth review. We also review two new 2D animation tools: The Tab and Toon Boom Studio Express. See which one came out on top on page 83. Hardware this month comes in the form of the big and beautiful PowerBook 17-inch from Apple, a brand new multi-DVD drive from Plextor, a powerful G4 upgrade card and five affordable DV camcorders. Have a great Christmas – and see you in 2004! Robert Carney Deputy Editor [email protected]

Computer Arts_January 2004

77

CREATIVE SUITE PREMIUM

PC AND MAC

£1115

DESIGN Adobe’s bundle of brand new tools proves to be fantastic value for money CONTACT Adobe Buy online www.adobe.co.uk

SYSTEM PC Pentium III or 4 • 1.55GB HD • 192MB RAM • Win XP/2000 MAC G3, G4 or G5 • 1.775GB HD • 192MB RAM • OS X 10.2.4

FOR • Illustrator 3D Effects tools • Great-value bundle • The Photoshop CS upgrade is superb, and you can upgrade to the full Creative Suite from any version of Photoshop for £663

AGAINST • You can only upgrade from Photoshop

VERDICT

★★★★★ The Creative Suite Premium is a set of tools that no designer or photographer can afford to miss. If you have a version of Photoshop, take advantage of the incredible upgrade deal. If you don’t, fork out now – you won’t regret it.

A

s if you didn’t know by now, the Creative Suite Premium edition features new versions of Photoshop, Illustrator, InDesign and GoLive, as well as Acrobat 6 Professional and Version Cue – the latter being Adobe’s new file management and versioning tool. We brought you the full, world-exclusive previews of each individual application in issue 89 of Computer Arts, so if you want all the details on all the new features, check out our back issues on page 100. But back to the matter in hand: our in-depth test of this much-hyped release. Everyone in the industry is talking about it – so is it worth the hype?

PHOTOSHOP CS We’ll start with the suite’s star, Photoshop CS, a decent enough upgrade that’s largely aimed at the digital photographer. Graphic and Web designers get a few neat tools, but it’s photographers who’ll benefit the most. And this fact is borne out with such tools as Match Colour, Shadow/Highlight, Photo Filter, Lens Blur filter, the Colour Replacement brush, and a massive overhaul of the File Browser. The Match Colour feature is one of the strongest additions; using the tool is a quick process, the parameters giving you control over Luminance, Colour Intensity and Fade, and setting up the dialog to transfer the colour scheme of one image or layer to another is simply a matter of using a dropdown menu. Results are immediately pleasing, and the feature is efficient. As a quick fix (many of Photoshop’s new tools fall into this bracket), Match Colour is a great way of gaining consistency across multiple shots

or layers, although results will invariably have to be tweaked before final output. Shadow/Highlight is, for want of a better word, awesome… The Shadow/Highlight tool, found in the Image>Adjustments menu, is a seminal addition, giving novices as well as experts short of time an incredibly quick way of correcting under or overexposed images by means of simple sliders. The live preview gives you immediate feedback on your changes. Again, results may need to be tweaked before output, but as a start, this tool makes one of the most laborious tasks in Photoshop almost a one-click task. The only new tool to be found in the Photoshop CS toolbox is the Colour Replacement tool, which provides an alternative to making a selection and using Hue/Saturation and Colour Balance. It enables you to paint colours into areas – edges defined by options in the tool options bar. Again, it’s relatively useful for a quick fix or variation. The update to the File Browser is one that digital photographers working with many images will adore. New to the feature, introduced in v7, is the ability to run batch operations directly from the File Browser, preview thumbnails at bigger sizes, flag up images for review and search for images (by means of metadata, keywords, flags, names and so on). We’ve said it before, but the File Browser now feels like more of an asset management tool than a bolt-on image searcher. Rounding off the numerous photographic additions are Photomerge, a tool for creating panoramic images from a series of stills, and Crop and Straighten, a fairly

The Match Colour tool enables you to maintain consistency across differently lit images – a great boon for digital photographers.

78 Computer Arts_January 2004

Review

Photoshop’s excellent Layer Comps feature enables you to store different iterations of an image or design within a single document.

Illustrator CS’s 3D Effects engine is superb, too. As well as rotate, extrude and bevel 2D shapes, you can map artwork to surfaces.

FEATURES self-explanatory tool for cropping and straightening up many images scanned in a single pass.

• Photoshop CS • ImageReady CS • Illustrator CS • InDesign CS • GoLive CS • Acrobat 6 Professional • Version Cue • Image editing • Vector illustration • Layout and design • Web graphics/authoring

LAYER COMPS However, Photoshop CS isn’t just about photography. Layer Comps, text on a path and the new Filter Gallery add up to some good tools for graphic designers – Layer Comps being the addition to Photoshop most will upgrade for. This intuitive new feature takes the hassle out of showing and hiding layers in order to preview different iterations of an image. The Layer Comps palette effectively enables you to save out ‘states’ of an image; you may hide a text layer (or layers), for example, or want to see a different version of a graphic. Using the Layer Comps palette is simplicity itself – you hide or show the relative layers and save out the iterations of the document. Then, using the palette, you can jump back to iterations without worrying about searching through layers and switching their visibility. Nice. Text on a path is a long overdue addition, and one that we think has only surfaced because of the excellent deal on the Creative Suite. Still, the addition is a useful one and will help designers creating text in Photoshop and porting it over to Illustrator (Photoshop, Illustrator and, indeed, InDesign now share the same text engine). The new Filter Gallery provides a dialog (with Live preview) for stacking filters on top of each other – combine this with actions for a quick way to apply multiple filters. And that’s about it for Photoshop, bar a few nips and tucks and a Fibers filter for creating random, edgy texture effects. It’s not a huge upgrade, but one that pro

VERSION CUE Simple file management and versioning Version Cue is the only Adobe app you may not be familiar with. Not available on its own, this tool is, in effect, an easy-to-use graphics server. It enables you to save out versions of your images (mainly used within collaborations), adding comments as you go. It also ensures that no two people work on the same file at the same time – thus preventing mix-ups in the creative process.

Version Cue is accessed from the File menu of Photoshop, Illustrator and InDesign and, by using either Mac System Prefs or Windows Control Panel, you can quickly set up a project, add users and change access privileges. No networking knowledge is needed. We can’t understand why this hasn’t been implemented before in a suite of tools; it’s a superb idea.

The new Separations preview and palette in InDesign CS enables you to preview separate plates before you go to press.

photographers will jump to because of the quick fix features Adobe has employed. Graphic designers will love the new Layer Comps feature, but we suspect that the features here will not be enough to entice them to upgrade to Photoshop alone. Upgrading to the Creative Suite is another story, however.

ILLUSTRATOR CS Illustrator is the second major tool in the Creative Suite, and although Adobe’s vector app receives a conservative update in terms of features, it remains an important one. A definite focus for Adobe on this release has been speeding Illustrator up. Version 10 wasn’t the speediest, but the CS release goes a long way to right this. In addition, the new 3D Effects engine brings vector 3D tools superior to those found in FreeHand MX, and ones that echo traditional methods of creating 3D objects. Naturally you can rotate and extrude a 2D object, but Illustrator also enables you to revolve a curve, change bevels, lighting effects, shading and so on. With a fast machine, it’s easy to knock up realistic 3D graphics that remain live at all times. But it’s in the Symbol mapping tools that Illustrator’s 3D engine excels. Taking tools one step further than FreeHand, it enables you to map symbols to surfaces and easily cycle through them in the Map Artwork dialog. Illustrator CS introduces a new template file format – handy for frequently repeated document setups – and therefore it makes sense that Adobe has bundled hundreds of templates with the app. And, yes, these are well worth having – even if just for the dimensions of a CD case or CD body. OpenType support is here, as are new Character and Paragraph palettes (think InDesign or XPress) – the latter enabling you to easily format reams of text. Optical

Layer Comps are an innovative and highly intuitive addition to Photoshop CS, enabling you to switch between document iterations (hidden and visible layers) at the click of a button.

Bringing out dark areas of an image without affecting the overall image is now a cinch, thanks to Photoshop CS’s excellent Shadow/Highlight tool.

Nested Styles in InDesign make it possible to ‘nest’ character styles within paragraph styles – adding these to the beginning of every paragraph is now simplicity itself.

Computer Arts_January 2004

79

kerning rears its head, and Illustrator has pinched InDesign’s multi-line composer. Illustrator finally includes a WYSIWYG font menu. PDF Styles and a new Print dialog (merging the Page Setup and Separations dialogs into one) round off an appealing and somewhat entertaining upgrade. No multipage support, though, but, then again, we expect anyone wanting to design documents longer than a page will buy the Creative Suite and move their files into InDesign. The File Browser has received a makeover, too; it now gives you the ability to run batch operations and flag up files for review at a later date. Think of it more as an asset management tool.

File management and versioning presented in a simple manner; that’s the thinking behind Version Cue. This solution enables you to easily keep track of files and manage projects more efficiently.

INDESIGN CS You’ve heard it all before – the benefits of native transparency, live dropshadows, feathering and so forth. However, this isn’t enough for print professionals, and with InDesign CS, Adobe has introduced some handy workflow additions. Both the Separations palette and preview and the Flattener palette and preview (along with the overprint preview) are prime examples of a company thinking along the same lines as money-conscious designers. These tools effectively enable you to preview document plates and transparency on-screen (and make amendments as necessary) before sending them off to the printers. If you’ve ever had an important document come back from the printers with minor mistakes, due to flattening problems or a mix-up with separations, you’ll appreciate how costeffective these tools can be. Another workflow enhancement comes in the form of Document Presets, which give you the ability to repeat

frequently created documents. Not exciting by any means, but a real time-saver. Then you get Nested Styles. These combine character and paragraph styles, enabling you to link character styles to the beginning of each paragraph. You won’t use Nested Styles all the time, but when you need a certain paragraph to start with a certain character, they’ll prove a massive time-saver. A new Info palette gives you instant feedback on word counts, graphics info (DPI and so on), depending on what you have selected, and similarly a new context-sensitive Control palette gives instant access to options related to the tool selected (think XPress Measurements). The Pathfinder palette (think Illustrator) enables you to create complex text and picture boxes, while the new Stroke Styles editor gives you the ability to create custom strokes. Adobe has catered for those using InDesign as an editorial production tool, with the inclusion of the Story Editor (think PageMaker). Finally, InDesign now integrates with GoLive CS in a much more logical way. See the boxout on this page for more details.

MUST-BUY Along with Acrobat 6 Professional (see issue 84 of CA for the review) and Version Cue (see boxout on page 79 for more), Creative Suite Premium is a bundle of tools that simply cannot be ignored. If you’re serious about design and need a solution that caters for all mediums and all team members, this is certainly it. By themselves, the tools are good; brought together, they’re utterly fantastic.

IMAGEREADY CS AND GOLIVE CS Adobe’s Web authoring tools also get an upgrade

Illustrator CS’s 3D Effects tools are simply superb. Not only can you rotate, revolve and bevel 2D objects with ease, but you can also map symbols onto surfaces to create interesting textures.

Bringing out dark areas of an image without affecting the overall image is now a cinch, thanks to Photoshop CS’s excellent Shadow/Highlight tool.

Illustrator now features a WYSIWYG Font menu, giving you the ability to check out which font you need before you select it.

80 Computer Arts_January 2004

ImageReady and GoLive have not been left out of the CS mix – so don’t worry, Webheads. ImageReady, Photoshop’s Web companion since v5.5 has received what can only be said to be a minor upgrade; although the new features on offer are fantastic, there’s just not that many of them. As well as a new, centralised Web Content palette, ImageReady CS features a Flash export option. Yes, that’s right; you can now export your animations to SWF format – with ImageReady layers becoming Photoshop layers. Smart Guides (think Illustrator) are also here, making it easy to align interface elements. GoLive CS looks to be a much smarter tool than its predecessor; integration with InDesign is obviously a priority. The new Package for GoLive command in InDesign enables you to export a preview layout (or package) to GoLive, and from this you can drag and drop and

ImageReady CS receives minor enhancements to its interface, while dedicated Web authoring tool GoLive CS gets a massive overhaul, with a new interface, excellent CSS tools and superb InDesign integration.

repurpose elements from your print layout. It’s not an automated solution, but it does provides Web designers with easy access to graphics and text used in print layouts.

Add some enhanced CSS functionality, better Smart Object integration and a smarter interface and you have a competent Web authoring tool that is

extremely easy to use. The Web aspect of Adobe’s Creative Suite may not be as dominant as the print aspect, but it’s certainly present and certainly extremely useful.

Photoshop, Flash, Dreamweaver, Illustrator, FreeHand, Cinema 4D, After Effects

Creative Collection

3

On sale 6 November, £12.99

An exclusive collection of Computer Arts’ best tutorials. Get to grips with image manipulation, illustration, Web and graphic design, typography, digital video and 3D techniques

OVER 200

PAGERSIAOLFS TUTO

PLUS DVD

FROM THE MAKERS OF

MODELSHOP

PC AND MAC $249 (£147)

PHOTOSHOP PLUG-IN Composite 3D models accurately into your 2D images CONTACT Digital Element Buy online www.digi-element.com

SYSTEM PC/MAC Photoshop 6, 7 or CS and a system capable of running it

FOR • Easy to use • Neat interface • Shadows add to the realism of composites

AGAINST • Lacks rendering options • Only supports three formats

VERDICT

★★★★ Modelshop has plenty of potential as a tool for artists who want to composite 3D elements in 2D scenes directly in Photoshop. It could do with more rendering options, admittedly, but overall this is an exciting first release.

C

ompositing 3D elements into 2D scenes is not the easiest of disciplines. The art of blending models naturally, getting the light right, and generally making everything look convincing takes years of practice and some pretty specialist (and often expensive) tools. Now, however, Digital Element claims to have a solution for non-specialists – in the form of Modelshop (formerly known as Pro-spec, then daVinci), an app which enables you to integrate native 3ds max and LightWave models with Photoshop images. Modelshop isn’t for users familiar with 3D – it’s geared more towards those wanting a hassle-free way to add 3D elements to their images. Thousands of free models are available online, although Digital Element kindly bundles 50 samples with this particular plug-in, split into such categories as Vehicles, Architecture and Anatomy. Modelshop’s pretty simplistic interface will be familiar to anyone who’s used the company’s other Photoshop plugins: Verdant and Aurora. To the left-hand side of the dialog lies a relatively large preview; to the right, a model structure or tree, depicting all the models and their surfaces that you’ve imported. Running along the top are all the tools for manipulating and positioning your model within your 2D Photoshop image. Once you’ve imported a model, it immediately appears in the preview window. By default, rendering is set to Preview – giving you a rough idea what the model will look like right from the start. Naturally, you can change the rendering quality: Wireframe for dense models and quick comps; Production for a final rendered view (the preview takes a few seconds to update in this mode). 3D artists will be familiar with the tools so it won’t take you long to wand rotate, scale and position your model

Modelshop features a relatively simple interface that will be familiar to users of other Digital Element Photoshop plug-ins.

82 Computer Arts_January 2004

within the image. There are no tools for manipulating individual surfaces or polygons, although you can turn on and off faces in the model structure dialog. However, neat lighting tools do enable you to match the lighting of your model to that in your 2D image or photograph. You can also add extra lights and adjust their direction using a standard directional sphere interface. Adding Shadows and Shadow Planes is one of the plug-in’s most interesting features. By checking the Shadows box, Modelshop places an accurate shadow on your 2D image, depending on where your model sits, where the light source originates from, and where you’ve placed your shadow plane (which acts as a ground plane). You can even tweak the colour and intensity of your lights. Modelshop is a great plug-in, but not perfect. Different rendering options for, say, wireframe, cel – and possibly some radiosity options – would’ve been handy, as would support for a few more formats. Hopefully, these omissions will be cleared up in the second release. Still, for a version one tool, Modelshop offers heaps of potential. ■

I’M SO DIZZY Another plug-in that enables you to import 3D models into Photoshop Modelshop isn’t the only plug-in available for Photoshop that imports 3D models directly into a 2D scene. Released a few years ago, Vertigo 3D’s Dizzy does pretty much the same thing, although it isn’t quite as powerful: it only works with 3DMF models and it doesn’t work in Mac OS X (and therefore Photoshop CS). But while it’s nowhere near as

comprehensive as Modelshop, it’s a lot cheaper. Indeed, at just $49 (£29), it’s quite a bargain – even if you do need to hunt around for old 3DMF models or a conversion utility (at least you get 500 free models to play with, which isn’t bad). For more information on this and other Vertigo 3D plug-ins, visit www.vertigo3d.com.

Control lighting within the plug-in for more accurate compositions.

Review

TOON BOOM EXPRESS

PC AND MAC $144 (£85)

2D ANIMATION Toon Boom Studio has been cut down into a more affordable package CONTACT Toon Boom Technologies Buy online www.toonboomstudio.com

SYSTEM PC Pentium II 233MHz • Win 2000/98/ME/XP MAC G3 or G4 • OS X 10.1+

VERDICT

★★★★ A great introduction to the world of 2D animation. Some good drawing tools, coupled with excellent Scene Planning tools, make for a bargain program that’s capable of some fantastic results.

his cut-down version of Toon Boom Studio 2 (reviewed back in issue 72 of Computer Arts) aims to hit a gap in the market for professionalquality 2D animations at an affordable price – very affordable as it happens. So what does it have to offer? Open up Toon Boom Studio Express and at first sight there seems to be little difference between this and the higher-end TBS 2. There are two modes: Drawing and Scene Planning. In the former, a variety of tools (although not as extensive and useful as The Tab – reviewed below) enable you to create individual frames, while an Exposure sheet helps facilitate the animation. You can import all manner of formats, including AI, SWF and most bitmap formats, as well as add MP3, AIFF or WAV files. Unlike TBS 2, however, there are no automated lip-synching features. Another limitation: TBS Express can only handle up to 1000 frames of animation (TBS 2 will generate an unlimited number). In addition, you can’t export to QuickTime – only SWF. But the Exposure sheet, into which you import all your files, is a definite boon. Neat features here include cycling and advanced cycling, which significantly speed up the animation process. You can also edit sounds according to drawings and waveforms – to help match up phonetic shapes more effectively. TBS Express is great value for money; it’s obvious from the moment you start using it. Just check out the Scene

T

THE TAB 2.0

It lacks lip-synching functionality and can only handle 1000 frames, but TBS Express is still a superb introduction to 2D Flash animation.

Planning mode – it’s as good as it ever was, enabling you to arrange your 2D elements in 3D space. Unfortunately, Express only enables you to work with two pegs (unlike TBS), one camera and one scene – which rather limits your animations. For $144 (£85), Toon Boom Studio Express provides an excellent and cheap route into the world of 2D animation. All the tools you need to create great Flash animations are here, and at a great price. If you can’t afford The Tab (superior in terms of features) or Toon Boom Studio 2, then TBS Express is the ideal candidate. The free Flash importer makes it easy to add interaction in Flash, too.

PC $495 (£292)

2D ANIMATION Web animation made easy by a high-end animation company CONTACT Digital Video Buy online www.the-tab.com

SYSTEM PC Pentium 500 • 128MB RAM

• 100MB HD • Win ME/NT4/2000/XP

VERDICT

★★★★ A decent Web animation tool for anyone interested in traditional animation workflow. The drawing tools are excellent, the animation tools are standard yet easy to use, and workflow is simple. The Tab is undoubtedly capable of stunning results, but is a little pricey at nearly $500.

D

edicated 2D animation apps that don’t cost an arm and a leg are hard to come by. The second of our tools on test this month is The Tab. This recently released tool comes from Digital Video, the company behind the high-end animation application Toonz and is aimed squarely at those wanting to create Flash animations for distribution on the Web or CD-ROM. In keeping with animation software protocol, the app is divided into four key areas: a drawing room, animation room, compositing room and browser room. The drawing room is pretty self-explanatory, offering you standard and non-standard vector drawing and editing tools for creating base images to animate later on. Tools enable you to easily vary line thickness for a hand-drawn feel, rotate the entire workspace, distort strokes, fill – and create styles for use at a later date. You can also use these styles to change colours throughout an entire animation sequence (in each frame), which is handy. The editing tools are uniformly excellent, particularly Magnet and Bender – they’re impeccably easy to use and extremely effective when making subtle tweaks to a frame. And while you can’t import Illustrator files directly, you can import SWF files – which is a workaround of sorts. You can also import a variety of bitmap formats, audio files and movie files for rotoscoping. Animating is generally done on a frame-by-frame basis, but tweening tools are available, as well as Onion Skinning

You’re not just limited to the four ‘rooms’ provided – visit www.thetab.com to download extra ones with added interface functionality.

for previewing frames before and after the current one in your animation. Using the Exposure sheet is tricky at first, but workflow is soon picked up. There’s also a 3D Scene Planning mode, which enables you to position your 2D elements in relation to one another and the camera – creating the illusion of perspective and scale. The Tab really is an exciting tool, and one with drawing tools that surpass TBS and TBS Express. It just lacks import options and is a little pricey for what it is.

Computer Arts_January 2004

83

3DS MAX 6

PC £2814

3D Version 6 of 3ds max brings a host of improvements, and mental ray as standard CONTACT Discreet Buy online www.discreet.com

SYSTEM PC 300MHz Pentium • 256MB RAM • Win 2000/XP

FOR Excellent rendering with mental ray ● Strong new particle system ● Improved scene management ●

AGAINST Little improvement in the basic tools ● Plug-ins not always completely integrated with other tools ● Expensive ●

VERDICT

★★★★ With little time between this update and the last, the main functions of the package haven’t changed much. mental ray and Particle Flow are major additions, and there are also new features aimed at games designers and architects. The video industry has less in the way of new headline features to cheer about, but the general improvements in scene management, schematics and rendering will quietly improve the workflow of the increasingly complex scenes demanded by production.

wo issues ago we ran an exclusive preview of 3ds max 6. Since then our 3D experts have been testing the full version of the final release, and we can now give definitive answers to your questions – namely what’s new, what’s impressive, and what’s our verdict? Delving straight into the app, the first thing to tell you is that scene management is a simpler business in version 6. Scenes are getting bigger – there’s no doubt about it. With PCs getting faster, viewers demand more going on onscreen, and more detail in animations and models; scenes can easily get out of control, with dozens of models, and

T

The Schematic view has also been upgraded. It’s been a bit of a minority tool until now, with many users finding it unfamiliar, but it’s now a lot clearer and easier to navigate. The schematic view presents each object in your scene as a box, and uses connecting wires to indicate how objects relate to each other. You can arrange the schematic as a projection of one of the viewports; in other words, if you’ve got a character with arms, legs, hands and fingers, the schematic can be arranged to look like that character – it’s much easier to see what goes where, and how your hierarchy works. With architects and other users of Autodesk Viz being identified as an expanding market for 3ds THE LAYERS MANAGER OFFERS A LIST OF max, Discreet has also added extra compatibility EVERYTHING IN YOUR SCENE, AND LETS between the two products in the form of the new YOU SHOW, HIDE, OR RENDER EACH OBJECT Architectural Material. This is effectively a material type which lets you import scenes complete objects to deal with. Scene management is vital, and with surface textures directly from Viz into max. The Discreet’s response to this is the new Layers Manager. Architectural Material is also useful for max users – it’s a This window offers you a list of everything in your scene, quick and easy material type to use, and there’s a massive and lets you show, hide, or render each object, or group of library of exterior and interior materials supplied with it. objects as you wish. This is incredibly useful on a large BUILT-IN PLUG-INS scene. You don’t want to waste time rendering background 3ds max’s particle system has always been okay. It started objects when you’re refining a single model, or suffer the as a simple spray, and as the versions progressed more impact on viewport updating that your complex main options have been added, culminating in six particle models cause, when all you want to do is tweak the system types covering a wide range of useful, but basically position of a prop or the keyframes of an animation.

3ds max 6’s main layout is pretty much unchanged. It’s just a little more configurable than it was in version 5.

84 Computer Arts_January 2004

Review

dumb particles. Well version 6 adds another, far more flexible particle type to the stable: Particle Flow. Particle Flow was introduced as a plug-in to max 5, but it’s now free with max 6. It’s a completely new departure for max particles, which uses a flowchart view to construct complex relationships and behaviours. What you can do with particles has been greatly expanded by this addition, but it would have been nice to have been able to load and save setups from within the Particle Flow window, and a few presets would have been handy, too. In the last release, max introduced a couple of very useful new rendering options. Light tracing and radiosity completely revolutionised the kind of rendering that max users were able to produce. With max 6, Discreet has done it again – this time by bringing mental ray into the product. mental ray has always been one of the top rendering engines on the market, offering unsurpassed control over the way your image is produced. Dynamics are now a strong theme in max, and compare well with its competitors. With Reactor thoroughly established within the package, soft and rigid-body dynamics are both well represented. The improvements in version 6 offer a real-time window in which you can preview your dynamics world, picking up objects and throwing them around to see how they react to the rest of the scene. As a way of testing things out before you start the complex process of animation, it’s both useful and fun. Reactor also improves virtual stunt-work, supplying automatic suspension for vehicles, and a script which helps out dynamics on bones systems. This last feature means that if you create an animated human, then hit it with a solid block, it will fly through the air and collapse in a (relatively) realistic pile of jointed limbs.

VERTEX PAINTING So onto the last bunch of improvements in the box. Dynamics will probably be used by game designers for intro sequences or to test out ideas, but for real-time 3D gaming (and Internet 3D for that matter) the improvements to vertex painting will be useful. You can now paint more specifically and with more control using an improved set of refining tools like symmetrical painting, pressure sensitivity, soft selection, and painting modes like those in Photoshop. But you can also create an unlimited number of layers, so you could have one for shadow, one for transparency, one for flickering light, or even use vertex painting to define areas for other elements of the game. Getting a character model to move realistically when its bones are animated has always been a problem, and there isn’t a package on the market that has an effective solution

FEATURES

MENTAL RAY What are this plug-in’s strengths? So why is mental ray better than the bogstandard max renderer? Well, to be honest, for many renders it isn’t. Most of the time you’ll end up using the regular max scanline renderer for its speed, ease of use, and for the fact that it can now handle radiosity; and light tracing to produce some high-quality results. If you’re rendering video, you probably won’t want to wait four hours for a single frame, even if it does come with dazzling refracted light and perfect shadows. However, mental ray is generally a lot more configurable than max’s

standard renderer, and used properly it’s fast and powerful. While the standard renderer generally applies a series of cheats to achieve the desired result, mental ray works with analogues of real physical effects. Where mental ray most obviously excels is in its ability to handle caustics. It can accurately create underwater lighting, or the focused light effects created by a glass of wine standing on a table. The plug-in also has its own set of lights, with shadows and effects that are even more accurate than max’s Area lights (you can use max’s lights as well).

to it – which is why 3ds max users will be glad to hear that the app’s skinning tools have been enhanced. This time, there’s a new tool to simplify the attachment of similar (but not identical) models. For example, say you’ve got three characters, each with two arms and two legs, but with different features, proportions, clothes and details, and you want to animate them all. Now you can skin one of them, then as long as you have the same-shaped skeleton for the other two, you can copy the skinning data across to the others – even though the models themselves are different. Our verdict on this release of max? mental ray and Particle Flow really are major additions, and the improvements in rendering, schematics and scene management will aid workflow. This upgrade may not be bursting to the seams with new functionality, but it offers two things that most users hope for with each release: an improved toolset and more value for money.

• Full suite of 3D modelling and animation tools • Character animation tools • Real-time environment development features for Shockwave and games • Rendering with scanline renderer, or mental ray • Soft and rigid-body dynamics here • New event-driven particle system • Scripting for all aspects of package

The Ragdoll script enables you to simulate the behaviour of a lifeless body – useful for those virtual stunts.

Architectural materials help integrate Autodesk Viz files into max, but you’ll find a good library of them supplied.

The Layers Manager sets the visibility and rendering of different elements of your scene separately – excellent for when scene management is vital.

The shell modifier gives open-edged objects a thickness. Here it’s being used to give fragments of the model a more solid look.

mental ray is good at realistic lighting, radiosity, reflections, and refracted light – see the rippling lens effects on the walls and floors.

Particle Flow offers a high degree of particle control. Here, an asteroid impact triggers multiple types, some of which create particles of their own as trails.

Computer Arts_January 2004

85

CARRARA STUDIO 3

PC AND MAC $399 (£234)

3D Prepare to swear – or whoop with joy. Like Marmite, you’ll either love this or loathe it CONTACT Eovia +33 (0) 556 13 40 06 www.eovia.com

FOR Non-photorealistic rendering HDRI lighting ● Raytraced soft shadows ● Scene wizard ● Improved interface ● Subdivision modelling ● UV editor ● Shading domains ● Plant editor ● ●

SYSTEM PC 300MHz Pentium II • 128MB RAM • 300MB HD space • Win 98/2000/ME/NT 4/XP MAC 266MHz G3 • 128MB RAM • 300MB HD space • OS 9 or OS X 10.1

FOR Plenty of new features Excellent rendering support ● Interface has been improved ● ●

AGAINST Still fundamentally awkward to use ● Rather limited character animation tools ● No native NURBS support ●

VERDICT

★★★ Compared to version 2, Carrara Studio 3 is a veritable masterpiece of interface design – but it’s still nowhere near intuitive enough to use as a production tool. The batch of new, and generally very good features would be much better served by a new approach to workflow – which you just don’t get here.

L

ook up the definition of ‘polarisation’ in a dictionary and you may well see a picture of Carrara Studio. The fledgling 3D package continues to be loved and hated in equal measure by its users; some are entranced by its MetaCreations-style interface and oodles of features; others swear in frustration at its decidedly non-standard approach to just about everything. Version 3 probably won’t change that situation much, although it’s good to see that some specific annoyances from version 2 have been rectified. The Properties box, for instance, is much more sensibly laid out, and at least now it’s possible to rename a new shader directly from inside it. Other amendments? X, Y and Z replace Pitch, Roll and Yaw, the icons are smaller, and navigating is a little easier. Unfortunately, it’s still not easy enough. Carrara 3 sticks with the infuriating and frequently baffling ‘working box’ method for both scene assembly and spline modelling, as well as retaining the concept of separate ‘rooms’ for modelling, assembling, texturing and so on. Whether this is from positive feedback by users new to 3D, or simply a result of entrenched product development, is unclear. Either way, even vaguely experienced 3D users will likely find this arbitrary compartmentalisation cumbersome, inefficient and confusing. Which is a shame, because version 3 adds some pretty powerful new features, and improves on existing ones. HDRI lighting is now available and works with the minimum of fuss. The developers have also given Global Illumination a thorough going-over. Also looking good are the previously weak depth of field and motion blur effects, which now stand up to the closest scrutiny. The new Non-photorealistic rendering mode, which produces toon renders, pencil sketches and the like, is equally welcome. Carrara has also added a form of subdivision modelling, with dynamic extrusion, which enables you to quickly create prototype models by progressively extruding facets. There’s a dedicated UV editor, too, but only for vertex modelling, and like many of Carrara’s sub-editors, it’s fiddly to use. NURBS, meanwhile, continue to be handled by the bundled Amapi 3D – another complex app to learn. Sadly, not all the new additions are necessarily good ones. The Plant Editor seems like a good idea, for instance, and certainly gives exacting control over the resultant

You want control? You’ve got control – in the Plant Editor, at least. Sadly, the results rarely match the effort you have to put in.

86 Computer Arts_January 2004

There are some much-needed efficiency improvements to the main interface, but modelling and assembly are as frustrating as before.

vegetation, but the results just don’t live up to the effort you’re asked to put in. The same applies to the hundreds of textures and objects supplied; they’re far too basic to be any good in a production situation. Meanwhile, the so-called Scene Wizard, which is supposed to speed up the building of a new scene, is basically just a collection of common light, camera and object positions – hardly a ‘wizard’ at all. In short, Carrara continues to be frustratingly close to a great 3D package. The slew of new and improved features are extremely welcome, and some are unprecedented at this price. Yet we would gladly see the next version put a hold on new features to make the basic package itself simpler and more logical to use – especially in the areas of modelling and assembly. As a whole, Carrara is still far too obstreperous and wilfully unfamiliar to attract experienced 3D users – and all the shiny new gadgets in the world can’t alter that. ■

RENDERING POWER For $399 (around £234), Carrara Studio 3 offers a good range of rendering features One area in which Carrara excels is rendering. The previous wodge of various renderers have here been consolidated into just three main settings: Photorealistic, Non-photorealistic and Draft. For software at this price, Photorealistic rendering offer a huge number of features. Global Illumination and Skylights were introduced with version 2, and Carrara has considerably cleaned up its output in this latest iteration. You can also use Skylights without GI, to save on rendering times. HDRI lighting is surprisingly simple to use, too; just load a file as the background image and all lighting is taken from the map. There’s no visual preview, though – and you can’t map the image’s dynamic range (as you can in 3ds max 6). However, Non-photorealistic rendering gives you access to a slew of controls for producing toon and natural media-style effects, so with a bit of effort you can simulate just about any media.

POWERBOOK G4 17-INCH

MAC

£2399

LAPTOP Can Apple’s largest PowerBook pass itself off as a portable computer? CONTACT Apple Buy online www.apple.com/ukstore

FEATURES • 1.33GHz G4 processor • 17-inch TFT screen • 1440x900-res display • Radeon 9600 graphics card • Backlit keyboard • FireWire 400 and 800 ports • Built-in 802.11g wireless • Bluetooth enabled • Gigabit Ethernet • DVI and S-Video

FOR • It really can replace a desktop machine • Great video options • Superb aspect ratio

AGAINST • Limited battery life • It’s very big • Sluggish SuperDrive

VERDICT

★★★★

T

o call Apple’s flagship PowerBook a laptop is a bit like calling a lion a pussycat. As laptops go, this is a bit of a beast. And yet, despite the massive 17-inch cinema aspect screen, at 3.1kg it’s something of a lightweight machine, superbly slim at an inch thick. Even so, there’s really no way that anyone could pretend this is a laptop in the truest sense of the word. Place it on your knees and it looks a bit awkward, and the screen droops with every movement. No, this isn’t a laptop… it’s a desktop replacement. For graphic artists and other power users, the 17-inch PowerBook offers the tantalising prospect of being able to cart work around from location to location with a minimum of fuss. You won’t want to use it on the bus, but it will do fine for making a pitch at the office of a potential client, or working between home and office. Beneath the sleek, brushed-aluminium casing beats a 1.33GHz PowerPC G4 processor, backed up with 512MB of RAM that can be expanded to a full 1GB if you are running memory-hungry apps like Photoshop. As befits the Rolls-Royce of the range, everything comes as standard, including Apple’s high-speed wireless networking and Bluetooth for wireless printing or syncing with a PDA. To the front is a slot-loading SuperDrive, which burns DVD-Rs at a leisurely 1x speed and will toast CDs at a pedestrian 16x speed. Fortunately, the hard drive at 80GB provides a decent amount of storage, although some may find its 4200RPM performance hardly up to scratch for this

calibre of machine. Still, it’s quiet and doesn’t produce too much heat. Communicating with the outside world is vital with a portable, and in some of the places that you use it you’ll be lucky enough to have access to a high-speed wireless network or even a corporate gigabit Ethernet connection. On the other hand, from time to time you’ll find that a phone line is your only link. Fortunately, the PowerBook can cope with all these options, and even throws in a few more – such as a high-speed FireWire 800 port standard as well as a couple of USB 2.0 ports. It’s good to have a full range of options and you’re sure to use them all at some time or another. Perhaps the PowerBook’s biggest draw is it’s ability to power external monitors via the on-board ATI Radeon Mobility 9600 graphics chipset. With 64MB of RAM, the ATI chip can drive a second monitor or mirror the LCD screen at resolutions of up to 2048x1536. The native resolution of the bright LCD screen is 1440x900, and it provides plenty of space for laying out the palettes of sprawling graphics applications. As far a raw performance goes, this PowerBook holds up fairly well, but the limitations of its hard drive and the slightly antiquated SuperDrive let it down somewhat. It’s an area that needs attention and a bit of a refresh. That said, there’s no doubt that the processing power is there in spades in this machine, and it will ably handle applications such as Final Cut Pro or Photoshop.

The PowerBook G4 17-inch is admittedly a very expensive piece of kit. However, it does offer desktop performance in a package that’s not too unwieldy or heavy. If you need portability then this is about as powerful and compact as it gets. It beats the pants off competing 17-inch PC laptops.

Desktop performance and stylish design with a £2399 price tag to match. Laptop or desktop replacement? The debate goes on…

88 Computer Arts_January 2004

Review

PLEXTOR PX-708UF

PC AND MAC £257

DVD-BURNER This DVD-writer offers faster speeds and dual modes CONTACT Plextor +32 2 725 5522 www.plextor.com

SYSTEM PC Windows 98 SE/Me/ 2000/XP MAC OS X

VERDICT

★★★★ The Plextor PX-708UF can rightly claim to be the fastest dual-format DVD writer on the market. Disappointingly, it’s noisy and incompatible with iDVD.

R

ecordable DVDs have really taken off now that the price of the media and the drives has reached sensible levels. More of us are using the format to make movie and photo discs that we can share with both our clients and friends. Despite its increased popularity, there have been a couple of issues that have hindered the more widespread acceptance of DVD, namely speed and compatibility. DVDs can hold up to 4.7GB of data, which naturally takes some time to write to disc, effectively locking up your Mac or PC during recording. Second, there are three DVD formats doing the rounds at the moment – DVD-R, DVD+R and DVD RAM. The two most popular are DVD-R and DVD+RW, but they aren’t compatible and so the flexibility to burn in either format would help. The Plextor PX-708UF offers a solution to the twin problems of speed and compatibility. First, it’s an 8x DVD+R drive, which means that it can slice through a full DVD in less than ten minutes. Second, it can also write to DVDR/RW, albeit at only 4x speeds. It also doubles as a 40x CD writer, which probably makes it the fastest multi-format drive of its kind on the market. The PX-708UF is particularly versatile around the office, because it’s a highly luggable external unit. This means you can cart it between computers as and when you need to write a project to disc. This makes it ideal for sharing with work colleagues on the fly, and generally backing up hard

G-CELERATOR G4 CPU

drives. Better still, because both FireWire and USB 2.0 interfaces are included, it will work with both PCs and Macs, although the supplied software is for PCs only. Highlights of the bundled applications include Pinnacle Studio and Nero. Sadly, the device won’t work with Apple’s iDVD, but it will function quite happily with DVD Studio Pro and Toast. One major drawback, however, is the noise of the case fan in the drive. It’s obtrusive and you certainly wouldn’t want to have it switched on all the time. Plextor needs to fix this problem before the PX-708UF can score maximum marks. The Plextor PX-708UF is extremely fast, and comes with an amazing two-year warranty with free on-site collection and return.

MAC £379

G4 UPGRADE Add power to your ageing G4 for as little cost as possible CONTACT AM Micro 01392 426 473 www.gigadesigns.com

SYSTEM MAC G4 desktops from Sawtooth to Quicksilver

VERDICT

★★★★ For anyone who owns a Mac that’s over two years old, the Giga Designs upgrade is a viable and economic way of extending its life and enhancing its performance.

T

hat speed demon of a Mac you bought a few years back is beginning to feel a bit tired. It puffs when presented with Photoshop filters and you’re increasingly spending time staring at progress bars. So what’s the answer? You could buy a brand new Mac, but you don’t fancy the hassle of reinstalling everything to get it just the way you like it. Thankfully, there is an alternative: a processor upgrade. Giga Designs is a new name in the processor upgrade market, and the G-Celerator range is a series of upgrades The Giga Designs G-Celerator card has its own copper heatsink and integral fan for optimum cooling.

that plug directly into the daughter-card socket on a G4 desktop – from the Sawtooth all the way up to the MDD model. Installation is simple and takes just five minutes. There are decent enough instructions, and you don’t need to worry about cooling because the card comes with its own heatsink and fan. We tested the 1.25GHz G-Celerator on a 400MHz G4 desktop. Fitting it was a breeze and soon we were booted up in OS X, enjoying speed increases that users of older Macs will really notice. Photoshop filters zipped through jobs in anything from half to a third of the time taken when the machine was wheezing along with its old processor. Although Giga Designs is careful to say that it doesn’t recommend overclocking, it also makes it quite clear that the processor has been tested up to 1.4GHz. The overclocking speeds of the processor care are set via five jumper pins on the daughter card. There’s a fully illustrated guide, showing all the settings, included in the box with the processor. We did have one or two problems getting our G4 to boot under OS 9, so if you do want to run OS 9 natively we recommend that you check with the dealer if they are willing to refund you in the event that the card doesn’t work satisfactorily on your computer. For Mac lovers who don’t want to splash out on a new machine, the Giga Designs G-Celerator is a cost-effective way of squeezing a few more years out of your desktop.

Computer Arts_January 2004

89

CHRISTMAS

CREATIVE STUFF ESSENTIAL KIT FOR THE MODERN DESIGNER

1

2 4

3 6

90 Computer Arts_January 2004

5

Review

SIEMENS MC60

BOSE HEADPHONES

SKY +

PRICE £120 COMPANY Company Bose WEBSITE www.bose.com

PRICE £199 COMPANY Sky WEBSITE www.sky.com

PRICE Subject to Orange contract COMPANY LG WEBSITE www.orange.co.uk

Television could either be the biggest distraction or the biggest inspiration there is – either way, you may as well have as many channels and as much control as possible. Sky + screams Tivo, and works on the same principle, enabling you to pause, resume and record live television via its nifty hard drive. We’re not going to bore you with the channel listings, but Christmas is the ideal time to forget about that client and that big deadline on 3 January, and kick back and watch as much festive TV as possible. And this’ll certainly help… You do need a Sky dish fitted, though.

2

3

CRUMPLER BAGS

CREATIVE MUVO NX

LAKS MEMORY WATCH

PRICE From £35 COMPANY Company Crumpler WEBSITE www.cancomuk.com

PRICE £120 COMPANY Company Creative WEBSITE www.creative.com

PRICE £35 COMPANY LAKS WEBSITE www.amazon.co.uk

1

Music seems to be a concurrent theme in Creative Stuff, probably because it’s something we all love to listen to when working on any kind of brief or project. And what better way to listen than with these TriPort Bose headphones: sound quality to blow your socks off, neat design, and not particularly expensive. These have to be top of any audiophile’s Christmas list. Available in both blue and black, the TriPort headphones are lightweight and ergonomic – ideal for sitting at your desk, in front of the telly or when you’re on the move.

4

With the announcement of the new PowerBooks and G4 iBooks from Apple, designers all over the world are desperate to get their hands on a decent bag that doesn’t look too corporate. The latest range of bags includes the ‘Very Busy Man’, the ‘Sheep Scarer’, the ‘Crippy Duck’ and more. All are made of high-quality materials, and are guaranteed to keep your laptop safe from harm. For the full range, check out www.crumplerusa.com. There’s bound to be a bag that suits your style, pocket and laptop.

5

What better way (excluding the iPod of course) to listen to those Christmas classics? The Creative MuVo NX is the latest generation of the company’s super-slim MP3 players. With just 128MB storage capacity, you’re not going to fit your entire CD collection on the MuVo, but you’ll be able to fit around 30 songs in MP3 format. A blue backlit LCD display, built-in scroller wheel for navigating between tracks, built-in USB storage and a microphone means it’s pretty easy to use and extremely versatile. It’s not that expensive either, at £120. Perfect for Cliff Richard, Wizard, and of course, Slade. Altogether now: “Ittttttt’ssssssss… Chhrrrrrrrrrisssssssmasssssssssssss…”

Mobile phones are definitely evolving, and this latest offering from LG is a case in point. Featuring the now almost mandatory colour screen and built-in camera, the 7100 also features a built-in flash for those shots in the dark over the festive period, as well as a 270-degree swivel head for capturing shots at almost any angle and a glowing outer OLED display. The phone also features JAVA and MMS, as well as 1.6MB of storage for all of those cheesy Christmas polyphonic ringtones. Weighing in at 93.5g and having a standby time of up to 200 hours, the 7100 is a performer as well as a looker.

6

Well, we suppose it was only a matter of time before someone came up with this. The LAKS Memory Watch is exactly what it says on the box – a watch with a USB memory stick built in. Coming in 32MB, 64MB and 128MB incarnations, this gadget is compatible with Windows 98/ME/2000/XP and Mac OS 8.6 and above, and it’s shock-proof and water resistant. Unfortunately, it could do with a style make-over. The idea is great and that’s why it’s featured here, but it needs to be prettier. So come on, TAG or Rolex – hell, even Seiko or Nike – bring out a nicerlooking model. Then we’d be tempted.

Computer Arts_January 2004

91

BOOKS

PHOTOSHOP CHALLENGE AUTHOR: Colin Smith and Al Ward PUBLISHER: Friends of ED ISBN: 159059262X PRICE: £36.50 hotoshop Most Wanted 2 brings together a wealth of Photoshop tips and tricks and presents them in layman’s terms. Its authors, Colin Smith and Al Ward, are masters of the Photoshop snippet, and can clearly crack virtually any effects challenge you throw at them. And challenging effects is what this book is all about. The first chapter, Metalworking, is a perfect illustration of this. It provides a step-by-step solution to the age-old problem of creating realistic metal objects from scratch in Photoshop. The second chapter deals, in similar fashion, with glass, plastic and transparent objects. The book then goes on to cover a diverse range of effects, from electronic circuitry to magic and monsters. There are also chapters that are devoted to text effects, actions, layer styles and manipulating photos.

P

SETTING UP A DIGITAL STUDIO

STOCKING FILLER

AUTHOR: Tim Daly PUBLISHER: Rotovision ISBN: 2880467535 PRICE: $25 (£14)

EDITOR: Robert Klanten PUBLISHER: Die Gestalten Verlag ISBN: 3899550315 PRICE: £23

im Daly’s Special Effects, Retouching and Restoration is a complete guide to setting up a digital studio – from shooting and scanning, to retouching and adding special effects to digital images. It’s an ambitious goal for a 112-page title. It looks and feels lovely, with great design and a beautiful spot metallic running all the way through. Its neat landscape size is also handy – perfect

D

T

92

The step-by-step nature of this book will be familiar to readers of Computer Arts. Each tutorial is written in a friendly, down-to-earth manner that’s easy to follow. Friends of ED excels at making this type of book, and beginners are likely to adore it because it offers so many Photoshop techniques that are reasonably easy to master. Intermediate ‘shoppers’ and advanced users will also find some of the chapters of interest. Interesting isn’t always useful, however, and it must be said that some of the tutorials are a bit pointless. The final results tutorial (in the Magic and Monsters chapter) that shows you how to create a fairy is hardly inspiring, although the tutorial does illustrate some decent Liquify techniques. Overall, Photoshop Most Wanted is a decent read that serves up some neat ideas and inspiration for a reasonable price. It also seems to be a sign that Friends of ED is back on track with its titles. The books, with a definite slant towards the beginner and intermediate, may not be aimed at every designer, but they are a great source of inspiration and detailed technique.

Computer Arts_January 2004

for bunging in a bag with your digital camera. The content includes a mixture of general buying advice and step-bystep walkthroughs, and it’s great for beginners. Pros will barely bother looking at this book – despite there being a few valuable snippets of advice – but anyone looking for easyaccess tutorials and advice on printing, scanning and general studio and equipment set-up should find it an appealing read. It offers some interesting techniques, quick ideas and advice. However, this book doesn’t really excite us, and that’s because of the lack of depth in the majority of the tutorials. But then, at only 14 quid and only 112 pages in a small format, perhaps that’s to be expected. At least it’s within reach of every Photoshop artist’s budget, and is small enough to be tucked away for reference.

ie Gestalten Verlag seems to be publishing fashionable books like they’re going out of fashion… This latest title, Romantik, evangelises the fact that romance is back in the hot-seat in the creative industry. And so the design world is awash with handdrawn elements and softer themes – flowers, butterflies, hearts, candles and so on. We’re touched. The title is the usual Die Gestalten Verlag offering – gathering together literally hundreds of images without any real insight. It’s what coffee tables were made for. Don’t be put off by the lack of practicality, though. This title oozes beautiful and fantastic images from a diverse and contemporary artist base that includes Dirk Rudolph, Jane Bark, Big Active, Sleepatwork and Atomic Design. Some of the work in this title is truly amazing – take Adam Pointer’s sublime vector illustration and IO Design’s etchings, for example.

This showcase of contemporary illustration, graphic design and photography – some of the most fashionable in the industry – wouldn’t be out of place in any digital creative’s Christmas stocking.

Adobe

Photoshop FocusGuide From the makers of Computer Arts

132 INFORMATION-PACKED PAGES PLUS FREE CD-ROM

ON SALE 18 DECEMBER

ON SALE 15 JANUARY

The world’s best image editing program isn’t just for the pros! We’ll help you master Photoshop’s essential tools and features

GET YOUR COPY NOW Available from

and other retailers CONTENTS SUBJECT TO CHANGE

ILLUSTRATION: CIRCUS BY ACRYLICK

www.acrylick.com

94 Computer Arts_January 2004

Group Test

AFFORDABLE DV CAMS With the prices of DV cams coming down all the time, it’s now possible to set up your own video workshop for under £1000. We rate five camcorders in the £450-£700 price bracket to see what you get for your money Over the last year or so, the features on low-cost DV camcorders have improved tremendously. DV input (which makes it possible to store a full quality master of your finished edit on a mini-DV tape) and analog input (which enables you to link the camera between analog equipment – such as a VCR – and your computer) now come pretty much as standard. As does the ability to store still images on memory cards; indeed, some camcorders offer pretty respectable resolutions – 1600x1200 being the best in our Group Test. Such data storage also enables automatic tape logging and the recording of high-compression videos for the Internet. The latter is useful for the quick emailing of clips, although most serious videographers will want to work with a highquality master, only compressing edited material for online delivery at the last minute. If all you’re after is low-bandwidth, high-compression video, it might be worth considering whether you need a camcorder at all. Many digital stills cameras offer limited video facilities, enabling you to record short sequences (up to a couple of minutes) and transfer them via USB. Mobile phones are already developing such functionality. Even memory-card camcorders are being made available – Mustek’s DV3000, for instance, can record up to eight minutes of MPEG video with sound, yet it fits on a keyring and costs just £100. If you’re really cunning, you can spend £30 on a Webcam, rig it up to your laptop, and record live video and sound at whatever quality you like directly to your hard drive. It’s not a solution for professional filmmaking or flyon-the-wall documentary work, of course, but ideal if you just want to record the odd interview for your Website. Still convinced a DV camcorder is the right option? Then read on – we’ve got five top-flight devices vying for that CA Recommended badge…

Computer Arts_January 2004

95

SONY TRV19E PC AND MAC

£550

Sony’s touch-screen technology delivers great creative control – but at a price

T

o say that Sony’s TRV19E is compact is an understatement. It’s a seductive block only slightly larger than the average point-andshoot stills camera, and packs its basic functions into just four buttons. A refreshing change when you consider most camcorders are bursting at the seams with controls – that said, the TRV19E’s are slightly fiddly and feel cheap. Even the proportional zoom control (the harder you push, the faster the zoom) is small and loose, so achieving steady results is virtually impossible. So how exactly does the TRV19E keep its controls to a minimum? By relying on an excellent touch-screen viewfinder, which provides you with easy control over all the camcorder’s functions. Everything from VCR playback to exposure and focus settings is accessible from here, and it works brilliantly, enabling Sony to squeeze in the kind of extra features you just wouldn’t normally find on a camcorder at this price. Traditionally, adding extra controls would’ve meant the designing and building of extra buttons, mechanics and electronics. But with a touch-screen, all Sony has to worry about is the software. Take the manual focus, for example. Turn it on and you can focus on any object in the viewscreen simply by touching it. You can also do the same with exposure levels. This is a great system, giving you control over images that exceeds anything offered by any of the other cameras CONTACT in our Group Test. Sony Once the shock of the new has 0207 365 2934 worn off, however, the camcorder’s www.sony.co.uk limitations become readily apparent. Still image capture is weak, with a VERDICT maximum resolution of just 640x480, so you might as well take your snapshots This camera has limitations from video. The eyepiece viewfinder is – its black-and-white also disappointing – it’s monochrome, viewfinder and lowsmall and uncomfortable. You’ll only resolution still image ever use it to conserve battery power capture to name but two. on the viewfinder. That said, the viewscreen’s Infra-red night vision (with limited touchscreen technology range) is included, as is Image Mixer offers the possibility of software for USB control and the some creative shooting. downloading of still images. The TRV19E can also double up as a Webcam.

★★★★

CANON MV600I PC AND MAC £400

Abundant in features – but the absence of a USB port is a serious omission

A

nother block-shaped palmcorder – the largest in our Group Test, in fact – the MV600i is a grey and silver slab of metal hardly geared to impress the punters. But while the viewfinder display is a tad grainy and the fold-out screen average, the controls are well placed and the zoom button pleasingly smooth. Also, at 18x, the optical zoom boasts the greatest magnification of all the camcorders we looked at, and that doesn’t come at the expense of a wide-angle. To manually adjust focus, exposure and white balance, you simply use the spring-loaded menu wheel. It’s a quick and intuitive system that’s easy to get to grips with. The MV600i is the only camcorder lacking a memory card and USB port. This means you can’t take high-resolution still images or record MPEG-compressed video clips. However, you can take video resolution stills (most of the camcorders we’ve looked at can’t go above 640x480 resolution, anyway, even though they have memory cards). The MV600i records these straight to DV tape, so you’re not limited in the number you can take. You can also use the supplied DV Messenger software to make the camcorder into a Webcam when you connect it to your IEEE1394 (FireWire) port. Additionally, a photo-search function CONTACT enables you to fast-forward straight Canon to any image on a tape. This means that 08705 143 723 if you start each video recording by www.canon.co.uk taking a still, you can find the beginning of each shot very quickly – it’s a simple VERDICT form of tape logging. Several modes are offered to cater The lack of a USB port is for different shooting environments. a serious limitation, but Basically, these alter the shutter speed to the MV600i compensates provide sharp stills for sporting events with direct-to-tape still or low depth-of-field for portrait shots. recording and Webcam For low light, a variable shutter speed software. Low-light mode is also available. This dynamically shooting is limited, but alters shutter speed in changing the optical zoom boasts conditions, but it doesn’t offer any a high magnification. additional lighting. You’ll have to provide that yourself.

★★★

96 Computer Arts_January 2004

Group Test

CANON MVX150I PC AND MAC £680

USB and neat features ensure Canon’s souped up camera makes the grade

T

he MVX150i is the stretch-limo version of the MV600i. It has the same grey and silver styling, and the same basic controls, although with some changes in positioning and layout. But at least this time a built-in USB port is provided, so you can make full use of the bundled software and transfer data. The fact that the MVX150i is longer and squatter than its cheaper stablemate gives it two important advantages over the other camcorders in our roundup. First, it can accommodate a massive 3.5-inch viewscreen, which delivers a clear and bright image, so you can tell easily if your subject is focused and exposed correctly. Second, there’s room for a manual focus ring – a huge boon for the serious user. The MVX150i has the same shooting modes as the MV600i, automatically optimising the shutter speed and exposure response settings for portraits, action, bright sunlight and lowlight conditions. In addition, it sports a Super Night mode. This reduces the shutter speed, but turns on a white LED at the front of the camcorder to provide some illumination. This point of light doesn’t drain the battery as badly as most camera lights, but it’s not as bright, illuminating objects up to about two metres away. Not as innovative as the Panasonic NV-GS50B’s solution, CONTACT admittedly, but it does the job. Canon You can captures reasonably quality 08705 143 723 stills up to 1280x960 on the memory www.canon.co.uk card, as well as 30-second MPEG videos. Software included with the camera also VERDICT enables you to stitch together still shots to create a panoramic view. A big viewscreen and a Advanced editing features enable you manual focus ring mark to drop shots into a sequence, or add out this camcorder, along audio, effects or graphics. You can also with a decent resolution upload stills or animations to the camera for still image capture, from your computer. However, it’s hard but it shows in the price. to see why you’d want to do this when The editing and effects you can do post-production much more functions are less useful. effectively on your PC or Mac.

★★★★

PANASONIC NV-GS50B PC AND MAC £500

Innovative features put this diminutive camcorder among our top contenders

T

he smallest camcorder in our Group Test, the NV-GS50B bolsters its typical palmcorder design with a black ribbed exterior on the palm side (to improve grip) and touch-sensitive buttons on the viewscreen (to control playback). This device may be small, but it’s also one of the most powerful in our Group Test, innovatively kitted out with a host of great features. The 500x digital zoom is pointless, sure, but at least its optical counterpart is smoother and more robust than the Sony TRV19E’s. It also boasts a colour viewfinder (unlike the Sony), although given the shape of the camera, this is no easier to use. At least the front-mounted microphone has a built-in wind reduction function and is of reasonable quality. To manually adjust focus, exposure and white balance, you simply use the control wheel, which also doubles as a volume controller and a jog shuttle for locating exact frames on a tape. A standard approach. But there’s a novel solution to night filming. Most camcorders with this function rely on an infra-red LED and provide black-and-white imaging. Not so here… The NV-GS50B provides full colour night vision, reducing the frame-rate to capture images more clearly. Additionally, you can flip the fold-out screen around and make it glow pure white, so it acts as a light, CONTACT illuminating your scene up to a few feet Panasonic ahead. Another neat innovation is the 08705 357357 remote control unit, which also functions www.panasonic.co.uk as a hand-held microphone. You can use the memory card to VERDICT record stills at low resolution – either via the camera or from tape. You can also capture short MPEG movies at either Despite low stills quality and rather 320x240 or 176x144, or record up to 25 fiddly manual minutes of sound on an 8MB card. functions, this is a neat And let’s not forget that vital USB little machine, and connection. Aside from enabling the packed with superb transfer of data to and from the memory features – the viewscreen card, it enables the camcorder to act as a doubles as a nightlight and Webcam. Very handy. the remote-control unit Panasonic really has thought of as a microphone. everything with this one.

★★★★

Computer Arts_January 2004

97

WINNER

JVC GR-DV700EK PC AND MAC £550

The JVC generates a super-sharp picture of stunning clarity, thanks to its great controls and a bevy of useful features – catering for video and filmmakers working on and offline CONTACT JVC 0870 330 5000 www.jvc.co.uk

VERDICT

★★★★★ Shot-logging is a useful tool if you’re organised enough to take advantage of it, and widescreen modes will appeal to the filmmaker. The D.wide function is a nice trick, too, but a better designed barrel could’ve included a frontmounted microphone and a manual focus ring.

98 Computer Arts_January 2004

A

t last, a camcorder that looks like a camcorder. Strange, then, that JVC hasn’t supplied a manual focus ring, despite the fact there’s plenty of room for one on the lens. Instead, the barrel contains just an upward-facing microphone, with a built-in wind reduction feature. While this does improve sound quality to some extent, the mic would’ve been better positioned on the front of the chassis. Still, the controls are good. The zoom lever is robust enough to ensure smooth control, while intelligent design means the camcorder is as easy to operate with one hand as two, so you can steady it as you record. You can take still images up to 1600x1200 in size – as good as an average stills camera, and better than any of the other devices in our Group Test. The memory card even comes pre-loaded with a selection of images that you can easily incorporate into your movies – superimposing them “in-camera” over your shot material. This is fun if you’re capturing compressed email footage, but on the whole it’s usually best to save any post-production work for your desktop/laptop’s hard drive. One unique and rather neat feature is the camera’s ability to log tapes as you shoot. The Navigation button enables the camcorder to grab a still image to the memory card to represent every shot you take. You can then find your way to any shot ready for capture to your computer, and save yourself some serious edit time.

You can also create video emails in-camera. Just press the email button to record 160x120 video clips directly to the memory card. You can do this live or from previously shot footage on your DV tape, and clips can last up to three minutes. The camera is equipped with the ability to record in widescreen, too: either by placing black bands at the top and bottom of the screen or by stretching. There’s also a D.Wide mode, which is equivalent to adding a wide-angle lens to the device, enabling you to shoot in confined places. It doesn’t widen the shot massively, but is very useful if you’re shooting in, say, a small room or the inside of a car. With it on, you can get a mid shot from about four feet away. Without it, you’d just get a medium close-up. Other modes include the standard repertoire (sports, spotlight, low-light, etc.), but also some more unusual offerings (sepia and classic film). With a horizontal resolution of 540 lines, the excellent picture generated by the JVC is as sharp as that provided by some 3CCD cameras. The thumb wheel gives you manual control over focus, white balance and exposure, which isn’t ideal but does the job. Automatic settings are available. Editing and effects work is also possible in-camera, although these are of little use to anyone without a PC or Mac. Dubbing is more useful, enabling you to plug in an analog source (say, a VCR or older camcorder) and transfer analog footage to DV ready for editing.

Group Test

CONCLUSION

Ë

Why the JVC proves to be the most flexible and dynamic camcorder of them all Camcorders in this price range have improved radically over the last few years; what’s particularly interesting now is the level at which they’re integrating with computers… All but one of the camcorders we tested deliver USB and IEEE1394 (FireWire) connectivity; all come with software; and all double up as Webcams. Most also offer analog and digital inputs. Innovation is rife, and each camcorder we looked at has its own set of new and surprising features. The Sony TRV19E has its touch-sensitive screen, with the ability to focus or set the exposure for any object in shot just by touching it on-screen. The JVC GR-DV700EK, on the other hand, has its automatic tape logging, which captures stills of every video taken to the memory card so you can find them again later, as well as widescreen options for 16:9 shooting. Then there’s the MV600i’s highpowered zoom and its ability to record stills on tape, the more expensive MVX150i with its large screen and editing features, and the diminutive Panasonic NV-GS50B, with its novel doubling up of the viewscreen as a light and remote control as a mic.

Choosing a winner has been a close-run thing. The Sony TRV19E is certainly worth a look, providing genuine innovation and high-quality video in a palm-sized machine that doesn’t leave you searching for the right button. It’s keenly priced, too. Another top contender is Canon’s MVx150i. Although nestling at the top of our price range, this feature-packed device will appeal to frequent camcorder enthusiasts. So what gives the JVC GR-DV700EK its edge? Basically, it’s a high-performance device with features tailor-made for casual DV artists wanting good value for money. Whether you’re cutting together video for the Internet, creating office presentations, shooting background footage for your 3D animation work or bringing in the odd piece of specially shot video to a composite, the GR-DV700EK provides tools that can help. The ability to log shots automatically saves time, high-resolution stills capture helps scenes where video just isn’t detailed enough, and widescreen and D.Wide modes will appeal to both filmmakers and videographers shooting at close quarters. ■

MODEL

SONY TRV19E

CANON MV600I

CANON MVX150I

PANASONIC NV-GS50B

JVC GR-DV700EK

PRICE

£550

£400

£680

£500

£550

ANALOGUE IN

No

No

Yes

Yes

Yes

DIGITAL IN

Yes

No

Yes

Yes

Yes

WEIGHT

520g

520g

625g

230g

575g

SIZE

90x71x112mm

103x58x147mm

75x186x92mm

76x52x101mm

75.5x91x185mm

STILL

640x480

720x576

1280x960

640x480

1600x1200

USB

Yes

No

Yes

Yes

Yes

ZOOM

10x

18x

16x

10x

10x

NIGHT VISION

Infra-red

None

LED

Viewscreen

None

LCD SCREEN (INCHES)

2.5

2.5

3.5

2.5

2.5

VIEWFINDER

B/W

Colour

Colour

Colour

Colour

VERDICT

★★★★

★★★

★★★★

★★★★

★★★★★

Computer Arts_January 2004

99

Did you know you can get Computer Arts in electronic format? See www.zinio.com

*CD contents not included

BACK ISSUES IF YOU SPOT A BACK ISSUE YOU WANT, CALL THE HOTLINE AS SOON AS POSSIBLE BECAUSE ALL BACK ISSUES ARE SELLING OUT QUICKLY

Issue 91 – Code C0A91 Adobe Creative Suite and After Effects 6 tutorials, 600 Photoshop brushes, plus free plug-ins!

Issue 90 – Code C0A90 Giant Photoshop feature, DW and Flash MX 2004 tutorials, plus £2410-worth of images!

Issue 89 – Code C0A89 3D figures special! Full version of Maya PLE 5, two DAZ models, plus superb Photoshop tutorial.

Issue 88 – SOLD OUT Full version of Cinema 4D CD 6, plus tutorials on Flash cartoons, typography and InDesign 2.

Issue 87 – Code C0A87 Massive Photoshop special FX tutorial, graphic novel design, plus XPress 6 demo and tutorial.

Issue 86 – SOLD OUT Full version of Realsoft 3D Special Edition, plus combustion, cleaner XL and Canon’s 3D SOM demos.

HOW TO ORDER BACK ISSUES CALL THE HOTLINE ON 0870 444 8455 OR VIA EMAIL [email protected] Please quote relevant code

ADD OUR WEBSITE TO YOUR BOOKMARKS OR FAVOURITES: www.computerarts.co.uk SUBSCRIBE TO COMPUTER ARTS: www.computerarts.co.uk/magazine

FORMERLY KNOWN AS COMPUTER ARTS SPECIAL, EACH ISSUE TAKES YOU THROUGH A FULL PROJECT, WITH TIPS, TRICKS, TOOLS AND TECHNIQUES… CREATIVE SUITE Special – COSB0053 PAINTING Special – COSB0052 Produce a stunning A5 booklet Create convincing natural media using Adobe’s premier design apps. effects with help from the experts.

100 Computer Arts_January 2004

OTHER WORLDS Special – COSB0051 How to create fantasy worlds and amazing scenes using Photoshop.

Links

LINKS

MAKE THE CONNECTION

Check out the links section on the covermounted CD

Creative

a s Directory Community Products

In association with computer arts

online exposure special offers competitions freeware articles reviews tools & more!

www.ablestable.com

Xmas cards 350gsm Silk/Gloss Print /Crease/Fold

x50 x100 x200

A6 4pp Cards

full colour front, black inside

£90

£105 £135

A5 4pp Cards

full colour front, black inside

£95

£125 £175

SWITCH

The above prices are subject to sight of copy or file. Carriage charged extra. VAT will be charge where applicable. WP reserve the right to amend prices at anytime.

www.wpdigital.co.uk Be noticed this Christmas. Send your customers, clients and friends personalised Christmas greetings. Christmas cards printed to your own design, incorporating your own photographs, images, logos and message. We can design your cards for you or print directly from your mac or PC files. We also have a selection of Christmas images and illustrations you can use. Please see our website for further details.

0800 783 3241 • [email protected] Isdn: 020 8558 8315 • Fax: 020 8558 3722

OUR NEW MULTIMEDIA CITY & GUILDS QUALIFICATION IS AVAILABLE TO EVERYONE (FREE TO THE UNEMPLOYED).

ANIMATION IMAGE EDITING VIDEO PRODUCTION WEB SITE & CD/DVD AUTHORING AUDIO RECORDING INTERACTION ETC

UCNGUJQVNKPG

0870 333 9712 QTFGTQPNKPG

www.webfusion.co.uk GOCKNWU

[email protected]

THE INSTITUTE of MUSIC & TECHNOLOGY at HURRICANE STUDIOS

KPHQ"KOVJWTTKECPGQTIYYYKOVJWTTKECPGQTI

EASY TO BUY • EASY TO SET UP • EASY TO SEE

We’re about to launch the best web mail package yet. It’s going to be hotter than hot

Soon you’ll be able to fire off and catch your emails from anywhere, protected by ANTI-SPAM and ANTI-VIRUS software. Don’t miss out on this great new package and free trial offer, coming soon from the big shots in domain names and hosting.

Watch this space for full launch details Established in 1997 with over 1/2 million customers. Accredited ICANN registrar & nominet member. Prices exclude VAT.

MA Computer Arts At the London College of Music & Media (LCMM) we serve three different types of students: those who want to upgrade their skills, those who want to specialise in Digital Arts and those who want to pursue original research. We have created a flexible and efficient studio environment for the emergence of a new breed of professional, an information specialist who is equally at home with both creative and analytical styles of thinking. Philosophy and Rationale The MA in Computer Arts develops your understanding of relevant technological, cultural and aesthetic perspectives on digital arts and provides a studio environment where you can explore, examine and experience this unique meeting of art and technology. Course Content • Computing Principles for Artists and Designers • Creative Applications for Audio and Video • Interactive and Immersive Virtual Artworks • Experimental Digital Media • Contemporary Cultural Theory • Major Project e-mail: [email protected] web: http://mercury.tvu.ac.uk/ca

Tel: 020 8231 2779 London College of Music & Media Thames Valley University St Mary’s Road, Ealing, London W5 5RF

Thames Valley University supports mass participation in higher education

ING M CO OON S

฀

฀

฀

฀

ˆ}ˆÌ> ˆ“ U
Õ`ˆœ U Ài>̈Ûi i`ˆ>

Ài>̈Ûi i`ˆ> ˆ«œ“>
­œ˜Ã® Տ̈“i`ˆ>
ÀÌÃI ˜iÜ

ˆ}ˆÌ> ˆ“ >Žˆ˜} ˆ«œ“>


Õ`ˆœ ˜}ˆ˜iiÀˆ˜} ˆ«œ“> I`i}Àii «Àœ}À>““i Û>ˆ`>Ìi` LÞ ˆ``iÃiÝ 1˜ˆÛiÀÈÌÞ

7 7 7 ° -
° 1

œ˜`œ˜ QäÓäR‡ÇÈä™ ÓÈxÎ ˆÛiÀ«œœ Qä£x£R‡Óxx £Î£Î >Ã}œÜ Qä£{£R‡{ә £xx£

,"  "7 ",  /
 - 
*, Óää{

† 3WCTM:RTGUU  †#ETQDCV  † 2JQVQUJQR  † /CE 15 :  † /CETQOGFKC /: † OQTG

JCTNGSWKP

 $G VTCKPGF KP VJG XGT[ NCVGUV UQHVYCTG CV

*CTNGSWKP 5QNWVKQPU YYY UQNWVKQPU EQ WMVTCKPKPI From introductory to advanced levels. HTML, CSS, Javascript, XML, Dreamweaver, Fireworks, Flash, Actionscript, Director, Lingo, Photoshop, ImageReady, Illustrator, InDesign and others. New Flash MX courses: Courses delivered by industry professionals. •Games development Maximum group size is three people per course. •Data-driven applications Visit our website for the latest special offers.

#WVJQTKUGF /CETQOGFKC3WCTM CPF#FQDG VTCKPKPI EQWTUGU

3

3D YQTNF C O M P U T E R A RT S T R A I N I N G #GV KP VJG K.[NNK- +V+NK+P RTQXKP-G QH $WU-+P[  9QTN. QHHGTU RTQHGUUKQP+N VT+KPKPI ,[ +Y+T. YKPPKPI VG+-JGTUWT OGVJQ.U +TG H+UV +P. GHHG-VKXG9G VT+KP UVW.GPVU HQT + -+TGGT KP  +PKO+VKQP YG, .GUKIPIT+RJK- .GUKIP QT KPVGT+-VKXG OWNVKOG.K+WTU KU QPG QH VJG OQUV +.X+P-G. VG+-JKPI GPXKTQPOGPVU KP WTQRG YKVJ + YGNN GSWKRRG. +P. RQYGTHWN UVW.KQ$T+KPKPI KU QPGVQQPG /G+NU +P. +--QOOQ.+VKQP +TG KP-NW.G.

creative training and development

CREATIVE TRAINING

+44 (0)20 77377523 [email protected] www.ubiq.co.uk

XSI Maya 3DS Max Flash

Dreamweaver GoLive FormZ After Effects Premiere Director

Phone : +39.0575.690.060 E-mail : [email protected]

9G QHHGT QPG YGGM #V+P.+T. -N+UUGUHQWT YGGM /+UVGT-N+UUGU KP  +PKO+VKQPYG, .GUKIP +P. OWNVKOG.K+ +P. GKIJV YGGM .X+P-G. /+UVGT-N+UUGU KP  +PKO+VKQP $JKU #GRVGO,GT YG +TG QHHGTKPI URG-K+N VYQ YGGM KPVTQ.W-VQT[ -QWTUGU KP #QHV+O+IG :#+ JG-M VJG YG, UKVG HQT .GV+KNU

www.3D3world.com

◗CD DUPLICATION Complete Digital Solutions Fast short run CDR Duplication with superb full colour on CD Face, from 1-500 without glass master - free example on request. Call Simon Hughes for competitive prices for CD-ROM REPLICATION for quantities of 500 upwards. Tel. 01923 261 269 Fax: 01923 261 267 Email: [email protected] ISDN: 01923 291 040

tuning techniques to offer leading-edge performance for the 3D enthusiast, 3D gaming and professional applications such as CAD, DTP, animation or video editing. Tel: +44 (0) 1635 524949 Fax:+44 (0) 1635 524948 Email: [email protected] Website: www.gainward.net

◗ILLUSTRATION, 3D ANIMATION & VISUALISATION ARCANA DIGITAL

DB Masters •Short and long runs •Competitive prices •Fast turn-around •A-Grade CDR •Thermal or screen print Tel: 01795 597 755 Fax: 01795 597 766 Email: [email protected] Website: www.dbmasters.co.uk

◗FONTS FACES LTD Whether you are looking for a single font, a complete library or a custom designed font, Faces offers you knowledgeable and friendly service. Fonts from the major foundries as well as new designers. Free confidential consultation for font licensing. Call for info and catalogues. Tel: 01276 38888 Fax: 01276 38111 E-mail: [email protected] Website: www.faces.co.uk Contact: John, Carolyn, Melanie FONTWARE™ The Custom Font Specialists • customisation & conversions • digital branding solutions • individual fonts & collections • licensing • language • buy on-line Fontware Ltd Katana house Fort Fareham Newgate Lane Fareham Hants PO14 1AH Tel: 01329 221121 Fax: 01329 281145 Email: [email protected] Website: www.fontware.com

◗GRAPHICS CARDS GAINWARD Gainward’s "Golden Sample" products guarantee outstanding stability and performance at enhanced clock settings using hand selected graphics processors, carefully qualified Ultra-DDR memory chips, and advanced, proprietary hardware

Animation, imaging and post production for broadcast, interactive and print. Folio available on line or call for CD sampler. Studio 15 minutes from Victoria. Clients include:- Bray Leino, Citigate.A.F, DDB, Grey, JWT, Lowe, Masius, Ogilvy, OWN&P, Proximity, Publicis, RKCRY&R, Saatchi, TBWA, WTCS, WWAV. Tel: 020 8466 0655 Email: [email protected] Website: www.arcanadigital.com Contact: John Fox

◗RECRUITMENT CHANGE LTD Change is an agency with a difference. We have been providing a bespoke service to our customers for over three years and recruit exclusively for the Interactive Entertainment Industry. Change provides a friendly effective service to all sectors concentrating on the Gaming world. Our customers are loyal, which speaks for itself! Tel: 020 7241 4545 Mobile:07973 413060 Website: www.change-job.com

◗TRAINING SERVICES CORPS BUSINESS Recruitment and Training solutions since 1989. Training available in tailored & scheduled format. Authorised by Adobe, Extensis, Macromedia, Media 100, Maxon and Quark. Recruitment supplies staff on a temporary, permanent, contract and freelance basis. Tel: 020 7222 8484 Email: [email protected] Web: www.corps.co.uk ESCAPE STUDIOS – VISUAL EFFECTS TRAINING As Europe’s only dedicated school of Visual Effects Escape Studios courses provide the necessary skills to enter the Visual Effects and Games Development industries. Escape offer intensive day, evening and weekend courses in Maya, XSI, Shake, Combustion, Photoshop and RenderMan. Escape is a

certified training centre for Alias Wavefront, Discreet and Softimage. Tel: +44 (0)20 524 7570 Fax: +44 (0)20 524 7571 Email: [email protected] Website: www.escapestudios.co.uk METRO NEW MEDIA • London’s leading training Centre for web-design, 3D, Animation, Multi-media, Project Management and Programming • All trainers are professionals in their field • State of the art studios • All levels from beginner to advanced • Specialists in customised training • Discreet Accredited Tel : 020 7729 9992 Email: [email protected]

Web: www.metronewmedia.com

◗WEB DESIGN AZ*TECH GRAPHIC DESIGN Az*Tech Graphic Design is a Midlands based Web design agency. Specialising in Custom built software solutions for all of your online or multimedia requirements. Az*Tech has its own reasonably priced E-commerce and Auction solutions that can be attached to a site easily and add real power to your web presence. Tel: 07931 554073 Mobile: 07930 396444 Email: [email protected] Website: www.az-tech.co.uk

◗WEB HOSTING

◗FORTHCOMING CATEGORIES:-

◗ACCOUNTANCY ◗ADVERTISING DESIGN

◗BOARD AND PAPER

◗COPYWRITING ◗DESIGN STUDIOS

◗EXHIBITION DESIGNERS

◗FREELANCERS

DEDICATED SERVERS The UK's leading hosting company • FREE and UNLIMITED phone & email support (24/7/365) • Service level agreement • State-of-the-art data centres • Dedicated Control Panel • Partner Programme • Windows, Linux, Sun, Cobalt and Co-location available • Host up to 200 websites per server from £74.99 per month Tel: 0870 333 9738 Fax: 0115 919 5514 Email: [email protected]

◗IMAGE GALLERIES

◗LEGAL ADVICE ◗MULTIMEDIA

Website: www.dedicated-servers.co.uk

NETCETERA Formed in 1996, Netcetera is one of Europe's leading Web Hosting service providers. Our services are biased towards Microsoft based Internet Technologies - Microsoft Certified Partner since 1999. Netcetera provides complete solutions for Web Hosting, Domain Name Registration, eCommerce, E-mail, Dedicated Server Hosting, Server-based Applications Hosting (ASP) and .NETpplaince. www.inetc.net Tel: +44 (0)1624 612948 Fax: +44 (0)1624 623385 Email: [email protected] Website: www.inetc.net

◗POINT OF SALE PROMOTIONS

◗PRINTING SERVICES

◗REPRO ◗SOFTWARE

TO F E AT U R E I N T H E C R E AT I V E D I R E C TO RY T E L E P H O N E B RY O N Y WAT T S O N 0 1 2 2 5 4 4 2 2 4 4

Sybex Maya titles ®

Published in partnership with Alias® and written by the most respected professionals in the industry. From introductory level and complete reference to exclusive tools exploring complex tools, Sybex brings you an exceptional library of striking books.

Maya Press™ titles Introducing Maya® 5: 3D for Beginners

Alias Approved Titles Maya® 5 Savvy™

Dariush Derakhshani • £22.99 • 0-7821-4239-7

John Kundert-Gibbs and al £37.99 • 0-7821-4230-3 Dec-03

Learning Maya® 5: Character Rigging and Animation

Maya® 4.5 Savvy™

Alias • £45.99 • 1-894893-41-7

John Kundert-Gibbs and al £37.99 • 0-7821-4109-9

DVD

Learning Maya 5®: Dynamics Alias • £45.99 • 1-894893-42-5 DVD

Learning Maya® 5: Foundation Alias • £49.99 • 1-894893-34-4

DVD

Learning Maya® 5: MEL Fundamentals

“The book is well thought out and organised. The content is well structured, and it is easy to dive into at any page and glean some useful information rather than have to wade through waffle.” 3D World magazine

Stop Staring: Facial Modeling and Animation Done Right™ Jason Osipa £37.99 • 0-7821-4129-3

Alias • £45.99 • 1-894893-44-1

Other Maya/3D titles DVD

Learning Maya® 5: Rendering Alias • £45.99 • 1-894893-43-3

Maya™ Character Animation Jae-jin Choi £47.99 • 0-7821-4171-4

DVD

The Art of Maya™ Alias 2nd Edition • £45.99 • 1-894893-13-1

Maya®: Secrets of the Pros™ John Kundert-Gibbs, et al £37.99 • 0-7821-4055-6

Available in all good bookshops and online retailers For further information: Sybex International Corp. T: +44 (0)20 7604 3769 F: +44 (0)20 7604 4105 E [email protected] Sybex, sponsor of the 2003 Ridley Scott Awards - www.escapestudios.co.uk/awards

www.sybex.co.uk

EXPOSURE SUBMISSIONS: Exposure, Computer Arts, 30 Monmouth Street, Bath, BA1 2BW, United Kingdom

Turn to page 112 for full details

1 NAME Ben Brown JOB Creative Director CONTACT 07793 601 744, www.citizenstudios.co.uk SOFTWARE Photoshop, Illustrator IMAGE TITLES 1. Best Part, 2. Junctions In Our Sleep, 3. Let Them Have It, 4. Daybreak Vs Pride “This artwork was created for the band Medium 21 and the Northampton club, Shakedown. I spend a lot of time searching through old family photo albums, scrapbooks and postcards from junk shops and car-boot sales. This gives me the resources to build unique landscapes and environments. I use the original colours and tones of old photography to make connections with the past, and create powerful, nostalgic images that are instinctively familiar to my generation.”

3

1 2

4

108 Computer Arts_January 2004

Exposure

2 NAME Konrad Grabowski JOB Freelance Illustrator CONTACT 020 7357 9460, www.konrad.org.uk SOFTWARE Photoshop IMAGE TITLES 1. Puzzle, 2. Typewriter, 3. Pipe & Paper “I was born in Poland in 1967. In 1991, I came to the United Kingdom, where I obtained a Postgraduate Diploma at Central Saint Martins College of Art and Design, and soon became established as an illustrator. I’ve worked on commissions for The Observer, Legal Business, computing mags, and more.”

3

1

2

Computer Arts_January 2004 109

3 3 NAME Sandy Nys JOB Freelance Designer & Illustrator CONTACT [email protected], www.hybryds.com SOFTWARE Photoshop IMAGE TITLES 1. Centurion, 2. Che 2, 3. Ritualcal, 4. Binary Infinity “I work part-time at a multimedia company, illustrating, designing Flash animations and photo-retouching. I dedicate the other days of the week to my music and art. I photograph all the models myself, in the beginning with film and a flatbed scanner, more recently with a four-megapixel digital camera. I always work with a drawing tablet; I had a classical art education and it gives me the feeling of painting.”

1

2 110 Computer Arts_January 2004

4

Exposure

4 NAME Spencer Hickson JOB Graphic Designer & Photographer CONTACT 07977 919 480, www.spencerhickson.com SOFTWARE Photoshop, Illustrator, QuarkXPress IMAGE TITLES 1. Explode, 2. Speed, 3. Serpents, 4. 1919, 5. Round “I’ve been designing for the past eight years. Each design is energised not only by my own experiences, but also the genius of artists and musicians whose creative excellence inspires me. My collections are bought for the karma they bring to a space; the aura of energies encapsulated where introspection meets Zen.”

4

1

5

2

3 Computer Arts_January 2004 111

GET EXPOSED Send your work to us, along with an explanation of your techniques and software, the titles of each piece, your telephone number and email. Images should be sent as PC or Mac TIFF or JPEG files, on CD-ROM or Zip disks. A hard copy is a great help. We will endeavour to return all entries that provide an SAE. All contributions are submitted on the basis of a non-exclusive worldwide licence to publish, both in printed and electronic form. Post hi-res files for print to: Exposure, Computer Arts, 30 Monmouth Street, Bath BA1 2BW. 5 NAME Matt Jones JOB Freelance Designer CONTACT 07967 803 909, www.lunartik.com SOFTWARE Photoshop, Illustrator IMAGE TITLES 1. Blaine View, 2. Kanidigirl, 3. Logos, 4. People

1

“I'm a workaholic and I love art, especially computer art. I have been working as a soul trader for about two years. My love of stickers started about two years ago, when I meet my business partner Graham Powell – we started producing comical moments for the Northern Line. I’ll send out free stickers to anyone who sends me a stamped-addressed envelope. I’ve also started a new line of T-shirts at www.primateinvasion.com!”

3

1

2

4

112 Computer Arts_January 2004

Exposure

6 NAME Clarence Whirley JOB Art Director CONTACT [email protected], www.mindteadesign.com SOFTWARE Photoshop, Illustrator, Cinema 4D IMAGE TITLES 1. _i_nostromate, 2. bluefractions_xc, 3. 00_tone_lix, 4. destruct_00.2254 5. destruct_00.2253 “I build catalogues, advertisements and Websites during the day. While the ladder offers a bit more creative freedom, I find that the only way to stay fresh is to create for myself. These images are a glimpse of that.”

4

1

5

2

3

Computer Arts_January 2004 113

RETROSPECTIVE ISSUE 27 JANUARY 1999 We extolled the virtues of Freeway and the ‘kooky’ KPT 5

EDITORIAL 01225 442 244 VICKI ATKINSON EDITOR [email protected] RODDY LLEWELLYN ART EDITOR [email protected] ROB CARNEY DEPUTY EDITOR [email protected] RACHEL ELLIOTT OPERATIONS EDITOR [email protected] JON ALONGI CD EDITOR [email protected] MATT GALLIMORE SENIOR CD EDITOR [email protected]

CD PROBLEMS 01225 822 743 [email protected]

Contributions from Acrylick, Jason Arber, Ryan Carson, Christian Darkin, Dan Goodleff, Karl Hodge, I Love Dust, Karen Jones, Christopher Kenworthy, Benny Luk, Magictorch, Vicky Mitchard, Output, Ed Ricketts, Mark Sparrow, THS Design, Jerome Turner

T

he gold-toothed hard-arse issue 27’s cover, accompanying our enormous 3D tips feature, came courtesy of Me Company, and was then featuring in an ad campaign for Firetrap. Meanwhile, in the news, MetaCreations and Kai Krause were doing their usual ‘kooky’ thang with the imminent release of KPT 5 – possibly the last great software they ever produced. And our erstwhile Art Editor Phil Cheesbrough was named New Business Magazine Designer of the Year, no less. FrameStore, then without its CFC, showed off shamelessly in our main profile, while the likes of Red Design, Chameleon Creative and Subliminal did their own show-and-tell. And if Subliminal doesn’t sound eerily familiar, you clearly haven’t seen page 42 yet. We also puzzled over Amapi 3D 4.0 in the reviews section and heaped praise on Freeway 2.0 – a Web editing package which is still going strong. For that matter, so is HoTMetaL Pro – except now it’s called XMetal. Finally, CA Mail featured one letter with a plea of “How many Photoshop classes do we need?”, followed by another saying, “I always welcome the Photoshop stuff.” Some things never change… ■

PHOTOGRAPHY R James Wilson PRINT TPL Printers (UK) Ltd REPRO Radstock Reproductions Ltd

CONTACT Computer Arts magazine, Future Publishing, 30 Monmouth Street, Bath, BA1 2BW 01225 732 361 ISDN 01225 789 293 Overseas subscriptions +44 870 4448 455

ADVERTISING 01225 442244 LEE HAINES key account manager [email protected] GEORGE LUCAS sales executive [email protected] MELISSA WATKINS classified sales executive [email protected]

DIGITAL DIVISION JOHN WEIR publishing director SHEENA PITTAWAY publisher FIONA TULLY marketing manager CLARE TOVEY production manager PAUL MCINTYRE group art editor STEVE JARRATT group senior editor SARAH WILLIAMS software copyright coordinator

PRODUCTION DAVID MATHEWS ad design point of contact KATTY PIGOTT production coordinator MIKE THORNE commercial print buyer

CIRCULATION & LICENSING RICHARD JEFFERIES circulation manager RICHARD BEAN overseas licensing manager SIMON WEAR overseas licensing director Computer Arts has licences in China, France, Italy, Poland, and Spain

UK DISTRIBUTION Seymour Distribution 020 7396 8000 86 Newman Street, London, W1T 3EX

THE FUTURE NETWORK ROGER PARRY non-executive chairman GREG INGHAM chief executive COLIN MORRISON chief operating officer & managing director UK JOHN BOWMAN group finance director Tel +44 1225 442244 www.thefuturenetwork.plc.uk Computer Arts is a member of the Audit Bureau of Circulations Jan-Dec 2002: 30,024

FLASHBACK

ABOVE Interviewee Jon Collins of FrameStore is now managing director of Framestore CFC New York, y’know. RIGHT Back

then, Subliminal was designing striking album covers like this.

114 Computer Arts_January 2004

It’s no less than eight years since a small team of digital art enthusiasts at Future Publishing kicked off what we now know and love as Computer Arts, and it’s now the leading title in its field. That field has changed massively in those eight years – DVD is no longer a mystery, and Photoshop is now a household name. We continue our look back with 1999’s issue 27…

Computer Arts is the registered trademark of Future Publishing Ltd. All Rights Reserved. All trademarks and copyrights in this issue are recognised, and are acknowledged where possible. If we have failed to credit your copyright please contact us – we’re happy to correct any oversight. Material submitted is accepted on the basis of a worldwide right to publish in printed or electronic form. All contents © Future Publishing 2003. Future Publishing is part of The Future Network PLC. The Future Network produces carefully targeted specialist magazines for people who share a passion. We aim to satisfy that passion by creating titles offering value for money, reliable information, smart buying advice, and which are a pleasure to read. Today we publish more than 90 magazines in the UK, US, France and Italy. Over 80 international editions of our magazines are also published in 28 other countries across the world. The Future Network PLC is a public company quoted on the London Stock Exchange (symbol: FNET).

Your guide to Web development, design & rich Internet applications issue 01

MASTERCLASS MX 2004

GOODBYE HTML?

Websites are getting richer. So can you. Here’s what you need to know

AKQA’S RACE FOR NIKE How AKQA revolutionised the Web for Nike’s online campaign

BUILDING DYNAMIC SITES Plan ahead for Website success

Announcing Macromedia® MX 2004: New versions of Dreamweaver®, Flash™ , Fireworks® and Studio. This is for you.

The hardcore, the dedicated, the enthusiast. The one with a passion for figuring things out. The one who builds things … and takes them apart again.

You give us new ways to see things. You show us things we never saw in the first place. You make things better. You make us better.

We can’t wait to see what you’ll do with it.

For more information and to order your copy of Studio MX 2004 or Studio MX 2004 with Flash Professional, please visit www.macromedia.com/uk/buy or call Macromedia direct 0131 458 6766

Macromedia MX 2004. Run with it. Copyright © 2003 Macromedia, Inc. and its licensors. All rights reserved. Macromedia, the Macromedia logo, Dreamweaver, Flash, Fireworks, and Macromedia Flash are trademarks or registered trademarks of Macromedia, Inc. in the United States and/or other countries. Other marks are the properties of their respective owners.

MASTERCLASS MX2004

contents

welcome W

hile browsing the Web, you’ll probably have noticed how site interfaces are no longer restricted to static HTML forms and cosmetic Flash design. Using Macromedia Studio MX 2004, you can now deliver rich Internet applications to the desktop that are engaging, time-saving and a vast improvement on anything that’s gone before. And the good news is that you can do it without adding development time and cost to yourself or your client. With all this in mind, Computer Arts has teamed up with Macromedia and Peachpit Press to bring you the first of four Macromedia Masterclass MX 2004 supplements. This indepth series aims to dispel any myths that the Web is restrictive or complex. With a combination of articles, t u interviews and excerpts from Peachpit's new books o k c e h C 's for MX 2004, we’ll demonstrate that all building rich ia d e m ro c a M a t a Internet applications requires is simple planning, — r u MX 2004 to soon. bold ideas and Studio MX 2004. u o y city near Over the following pages, you'll find out how the media. www.macro nts individual elements of Studio MX 2004 integrate com/uk/eve (page 4), how design outfit AKQA got Nike’s 10K race site up and running using rich Internet applications (page 6), and why the industry is raving about them in our special Why Bother? section (page 18). Read on and enjoy. Look out for the next issue of Computer Arts featuring issue two, and don’t forget to let us know what you think — we value your opinion.

VICKI ATKINSON EDITOR [email protected] GRAEME AYMER ASSOCIATE EDITOR [email protected] PAUL MCINTYRE ART EDITOR [email protected] ROB CARNEY DEPUTY EDITOR [email protected] I LOVE DUST COVER ILLUSTRATOR www.ilovedust.com

CONTACT Computer Arts magazine, Future Publishing, 30 Monmouth Street, Bath, BA1 2BW PHONE 01225 442 244 EMAIL [email protected] SUBSCRIBE 0870 444 8455

See how the separate elements of Studio MX integrate to form a hugely powerful suite of tools.

6 Run London, Run We talk to AKQA about its latest online campaign for Nike

10 Planning a dynamic Website The first steps when dealing with a new project are the most important — find out why

16 Win a trip to San Francisco and more Two whole pages of special offers and a great competition

18 Why bother?

Computer Arts [email protected]

EDITORIAL

4 The Studio MX2004 Map

Leading Web designers on the advantages of working with rich Internet applications

a word from macromedia W AL RAMADAN

Executive Vice President of Marketing MACROMEDIA

elcome to the first edition of Macromedia Masterclass MX 2004. You’re reading the ultimate guide to our products. This supplement will show that when it comes to digital experiences, there is a vast amount of unchartered territory. Throughout this series, we will arm you with the knowledge to explore new opportunities. We launched Macromedia MX in June 2002. It was a bold initiative, aimed at providing the tools you needed to create rich Internet applications. MX 2004 is the next generation of MX, even more powerful than the first. These new products streamline Web and applications development, so you can create better experiences. These Masterclasses will help you drill down into MX 2004 and see what is happening now and where we are taking the digital experience. Ultimately, Macromedia is successful because of the work you do each day with our products. Together, we have a lot of work to do to deliver on the promise of this constantly expanding digital world.

Macromedia Masterclass 01 3

overview Integration is the key to building dynamic Websites and rich Internet applications – as Macromedia’s Studio MX 2004 proves…

Studio MX 2004 mapped out S

tudio MX 2004 is the second incarnation of the Studio MX set of tools, and includes brand new versions of Flash (either Professional or Standard), Dreamweaver, Fireworks, FreeHand and ColdFusion Developer Edition 6.1 (PC only). Once upon a time, building a Website used to be a matter of knocking together a couple of HTML pages, coding in Notepad or BBEdit until the early hours and incorporating a few images (if you were lucky). But now tools such as Dreamweaver and Flash have revolutionised the way designers design for the Web, and server technology such as ColdFusion enables you to create dynamic, data-driven Websites and rich Internet apps with relative ease. The beauty of Studio MX 2004 is the way each tool integrates so smoothly with its companion applications. Whether you're working in Flash, Dreamweaver or Fireworks, each tool is simply a click away. Full-on roundtrip editing enables you to use, for example, Dreamweaver to edit HTML pages and then, with a single click, edit an embedded SWF in Flash, save it back out and update everything in Dreamweaver automatically. Similarly, building data-driven sites with ColdFusion is a piece of cake, thanks to Flash ActionScript and Components and Dreamweaver’s easy-to-use Wizards. Read on for a more detailed look at each of the tools in Studio MX 2004 and how their close integration can save you precious time and money.

4 Macromedia Masterclass 01

Integration is the key Those Studio MX tools in full (clockwise from top-left): Flash, ColdFusion, Dreamweaver, FreeHand and Fireworks. Check out the facing page for a breakdown of how they function together.

Flash MX Professional 2004

ColdFusion MX 6.1

Flash was once a tool for creating great Web animations. Now it’s evolved into something much more. Of course, you can still create fantastic animations using the familiar Flash timeline, but this is just a small part of what Macromedia's seminal Web design tool can do. Rich Internet applications (RIAs) are the name of the game with Flash MX Professional. Whether you want to create high-quality streaming video, forms-based or dynamic, data-driven applications, FMX Professional is the app for you. Using this tool, you can build an interface, hook it up to ColdFusion, and quickly create a dynamic, data-driven application that looks like it’s been designed by a designer, not a coder. It’s actually pretty easy to link up Flash and ColdFusion – all it takes is a small investment of time and a little knowledge of ActionScript. Flash also works brilliantly with Dreamweaver – the Web authoring and HTML tool that provides roundtrip editing for Flash SWF files – as well as Fireworks MX 2004 and FreeHand MX. Designing a site has never been so easy.

ColdFusion MX 6.1 Developer Edition is included with the PC version of Studio MX 2004 and is the key to deploying dynamic content on your Websites or Flash projects, and building rich Internet applications. ColdFusion MX is a rapid server scripting environment that enables you to build and deploy dynamic Websites, content-publishing systems, self-service applications, commerce sites, and much, much more. ColdFusion MX, when hooked up to a Flash MX or Dreamweaver project, enables you to feed data into the applications quickly and securely. Flash MX 2004 Professional and Dreamweaver MX 2004 each feature components and Wizards for setting up this kind of Web application. It’s a terrifically straightforward process. In issue two of Macromedia Masterclass MX 2004 , we take a look at how you can use ColdFusion MX with your own projects to create database-driven content in no time at all.

FreeHand MX and Fireworks MX 2004

Dreamweaver MX 2004

FreeHand MX is the vector graphics and illustration software in Studio MX 2004 and the ultimate companion to Flash. With FreeHand, you can create stunning interface elements and typography for use in your Flash projects. And because it’s so completely integrated with Flash MX 2004, you can bring Flash files into FreeHand, easily save them out and ultimately save time when working on projects. Fireworks MX 2004 is the ‘Photoshop of Web graphics’, and will help you achieve fantastic raster and vector-based designs, plan site interfaces, and create HTML-based navigation from scratch. Fireworks MX 2004, Flash MX 2004 and Dreamweaver MX 2004 work in perfect sync, complete with roundtrip editing of graphics. Again, using these apps together can save you a lot of time. Flash MX 2004 now even imports EPS graphics, so you can easily repurpose your FreeHand print content for use in RIAs and site designs.

Dreamweaver is the industry standard for professional Web authoring. The MX 2004 release takes the tool one step further with a streamlined interface and a raft of great new features, including easy-to-use CSS tools, an improved Tag Inspector, plus improved support for ASP.NET form controls. But where Dreamweaver really excels is in its ability to act as a central Studio MX design tool, enabling you to, say, import a SWF, edit it in Flash, then re-import the file with one click of a button. Thanks to its Fireworks image-editing technology, you can even crop and resize graphics without having to leave the app. It’s also compatible with virtually every type of Web technology you can think of, be it ASP, ASP.NET, JSP or PHP – you name it and Dreamweaver can handle it. In addition, superb integration with the rest of the Studio ensures an ultrasmooth workflow– even if you’re creating dynamic, data-driven sites with built-in multimedia content. Very impressive indeed.

Macromedia Masterclass 01 5

case study

Above: The AKQA team take a break from building some seriously rich Internet applications Opposite: AKQA co-founder and chairman, Ajaz Ahmed

INFO AKQA, www.akqa.com

RUN, agency AKQA LONDON, Design uses rich Internet RUN! applications to create powerful sites that are more user-friendly than ever. The Nike 10K site illustrates how they do this with Macromedia’s latest technology

6 Macromedia Masterclass 01

Studio MX 2004 in action Working together Teamwork was as important to Runlondon.com as software integration Technology is great and

designers and our writers.

Runlondon.com, there was

good but without people

There are both disciplines,”

another, very important

to drive it and shape it,

adds Matthew Treagus.

member of the team – the

you’re left with a bunch of

Integrating the team

boxes and a lot of undone

means that the workflow

work. For Runlondon.com,

is smoother, creativity is

the project team,” explains

AKQA used a team of 15

enhanced and confusion

Ahmed. “We work very

core members, with

is kept to a minimum.

much in partnership with

“We have a clear

them. We have a number

auxiliary members lending

planning process, a clear

of different departments

helping hands.

planning methodology, and

involved in different parts

“We have an

a very clear allocation of

of the event. At one stage

integrated team that

responsibility and what's

we'll have the brand people

consists of technology

required from each team

involved, at another part of

specialists, creative

player,” continues Ahmed.

the event we'll have the

specialists, project

“Everyone knows what

events people involved, at

management and usability

their responsibilities are,

another stage, we'll have

experts,” says Ajaz Ahmed.

and they’re clear about

the sports marketing

“These are the critical

what they need to deliver.

people. They're involved in

elements of the team.”

That helps the quality of

every single component of

the product.”

that site. That's what makes

sphere, we have our visual

R

“Nike is also part of

additional expertise and

“Within that creative

ich Internet applications have evolved. A few years ago, you might have placed a retail order via a basic HTML form. The vendor would have received your order, printed it off and walked around the aisles, filling a basket with your goods. Then the order was boxed or bagged and dispatched to you. At the time it was all quite clever. But it took a lot of browsing, clicking and behind-the-scenes activity to make it happen. Now the shopping experience can be streamlined onto one page. This is what rich Internet applications are all about – making the Web work faster, better, and more efficiently, for developers and end users. For example, take a look at Runlondon.com, designed and developed

client Nike.

by London agency AKQA. The site is part of the third annual campaign surrounding the Nike 10K race. Three years ago, Nike challenged Londoners to get fit and take part in a ten-kilometre race in the capital. Since then the Internet has played an ever-increasing role in promoting the run and also in the administration of the event and in providing up to the minute race information for participants. In 2003, rich Internet applications were central to running this Website in tandem with the training and the event itself.

Flash and frameworks AKQA has been associated with Nike for the past four years, and has been responsible for the Nike 10K race site since its inception. AKQA’s expertise goes beyond simply creating a front end for a site. The company also knows how to get the best out of

In the case of

it so much more exciting.”

technologies such as Flash to provide clients like Nike, and their client’s customers, with a rich experience, much of which is well concealed. For Runlondon.com, for example, much of the site was built using Microsoft’s .NET framework integrated with Flash. This made it possible to deliver a site that looked great but was far more than a fancy piece of window dressing. Last year, for example, you could book a place on the race through the Web or a standard call centre. This year, all the bookings were done online. “Because of the popularity of the Web, some of those [call centre] elements aren't used anymore,” says AKQA co-founder and chairman Ajaz Ahmed. “We found so many consumers prefer the Web experience.” “I guess because we've made the Web pivotal, it's actually enabled certain mechanisms for the customer that we

>

Macromedia Masterclass 01 7

Studio MX 2004 in action Creating a great Web user experience To bring Runlondon.com to life, AKQA took a simple yet effective approach AKQA approached

rather rigid approach but

emphasises Ajaz Ahmed.

Runlondon.com as it would

AKQA is aware that people

“When we talk about

any other. First, the

use Websites in

intuitive, we also mean

company worked out the

unpredictable ways. Site

intelligent. When you

customer flow, planning the

visitors like to explore. The

make selections, the other

journey that the visitor

company was careful to

selections get deleted

would take as they made

ensure that options were

automatically so that only

their way through the site.

available for visitors to

the relevant ones appear.

Then a prototype site was

discover. It also had to be

For example, only available

built. That was tested for its

sure that the site was

training runs were actually

usability, to ensure the

intuitive and simple so that

displayed on the site. It also

expectations of the

visitors wouldn’t be

displayed how many you

customer matched those of

overwhelmed or confused.

were booked on, just

the developer. Once

It’s all part of a customer-

keeping the critical data.

revisions were made, it was

focused approach.

There's never been an

>

“Whenever we're

site, keeping an eye on how

developing any activity, the

it was really important for

the customer reacted to it.

customer experience is

us to think about the

always at the forefront,”

customer experience.”

wouldn't be able to do in any other medium,” adds Matthew Treagus, the company’s client services director. For evidence of this, you need look no further than the way places for the race were reserved. There were 20,000 places available of which 2,000 were set aside for people who attended five training sessions with one of the coaches. These sessions were held during lunchtimes and after work. When you booked a place, you were also invited to choose a coach and attend these sessions. When you showed up, the day’s training manager checked off your name on a register. This information was then sent to the overall database as a record noting your attendance. When you had been to five sessions, you were sent an email informing you of your eligibility for an automatic place. Had this been 1999, much of this process would have involved paper

8 Macromedia Masterclass 01

Capturing the visitor's imagination is an important element for any site. This simulated TV added an extra dimension to Runlondon.com

application like that. So

possible to release the final

That may sound like a

For AKQA, copywriting is part of the visual design process. Getting it right leads to clear interfaces that are easy to understand

print-outs, pencils, ticks and data entry clerks. In 2003, working in a rich Internet environment, the system was completely automated. If you were a participant, your details were automatically sent to your session manager via the Internet to an iPaq in his or her possession. Your attendance was noted on the PDA and returned to the central system straight from the mobile device. “You try to administer that through any other medium and it just becomes too complicated and expensive to do,” explains Treagus. What made it possible for Nike 10K was Microsoft’s .NET Web services framework. “For us it was a very clear decision to use .NET Web services framework and architecture,” explains Ahmed. “The main reason for that is the speed of roll out and the way that those different components

integrate. We needed a framework and architecture that could handle transactions and would be a robust solution for the consumer and for the client as well. It's a scalable architecture so we can add other elements or modules, as we want to. For us .NET and Web services were fundamental to what we were doing.”

User interface and beyond If .NET provided the site’s skeleton and underlying structure, it was Macromedia Flash Professional that ensured that customers would want to use the site. It gave the coaches personality through animation and enabled users to enter their details on the site. In short, it was the part of the site with which race hopefuls actually interacted. Therefore, it had to look good and be rewarding. Hence, it was all about giving the customer a great experience.

case study

The site's graphic design provided each of the promotional coaches with a great deal of personality making the whole Runlondon.com experience fun and exciting

Far left: Using Flash with .NET technology enabled an availability checker, site registration and training schedules to be presented to the user without being intimidating Left: Details, such as the ability to zoom into various pages on the site helped to enhance the site's customer experience element

However, Flash didn’t just provide pretty pictures and amusing animations. The application’s ability to work seamlessly with the .NET framework made it an integral component of how the site actually functioned. Not only did it look good but, on a practical level, it worked brilliantly. “That's one of the benefits of Macromedia’s technology,” says Treagus. “We can seamlessly develop a consumer front end that enables us to integrate it with our architecture and our framework. That's an exciting element: bringing those technologies together seamlessly. Rather than being a disparate animation tool that sits aside from everything else, it can be wired up to .NET and we can build sensible manageable applications using those technologies.” “The other critical factor in deciding to use Macromedia on the front end across the

entire site was its installed base,” adds Ahmed. “It's so much greater now than it’s ever been. And that's obviously a key decision-making criterion for us. That's why we wanted to use it for our front end.”

Beneficial details This technology wasn’t used just for the hell of it. Such an approach yields benefits for the consumer, the developer and the client. For the consumer, a rich Internet application leads to, well, a rich Internet experience, whether he or she is aware of just how clever it all is, or not. The Nike 10K competitor doesn’t care about .NET, Flash, iPaqs, or even the fact that everyone had a video clip recorded and available online of themselves finishing the race. All they know is that the Nike 10K race was a fun and enjoyable experience, and using the Website was part of that.

For AKQA and Nike, using a component model involving .NET integrated with Flash was a time and money saver in the long run (excuse the pun). It means that Nike and AKQA have components that can be used and reused as necessary, this year or the next, for races in London or in other parts of the world. Ahmed can certainly recommend taking a rich Internet application based approach, as long as you make sure you ask yourself a few questions first. “For us, the most important question has to be, is this the best way of performing this task?” he says. “That needs to be the goal that is kept in front of mind for all rich Internet applications. Whether it's making a purchase, finding information, or making a transaction – that has to be the most important goal. That's really the best advice we can give.” ■

Macromedia Masterclass 01 9

Peachpit books

10 Macromedia Masterclass 01

Building Dynamic Sites MASTERCLASS MX 2004 The following will inevitably happen to you. You are sitting at your desk and the phone rings. When you answer it, the individual will start a conversation that goes something like this…

PLANNING A DYNAMIC SITE

“D

o you build web sites?”Your answer is, “Of course,” and then you talk about the work you have done for other clients. “Here’s what we need,” says the voice on the phone. “We need to rethink our site and are looking at adding a couple of features that cement our relationship with the community. They would include an interactive tour of the facility based on interest. We would also like to streamline our current facility booking procedures and enable people to book sports facilities or meeting rooms online. Finally, we do a lot of community work and want to create something on the site that enables people to meet online... or something like that. Do you do that sort of thing?” This is typically the start of the process, and a positive answer will result in a client meeting. The project’s success or failure is dependent upon what you do next. In the good old days of the Wild, Wild Web, up to about 1998, the answer was a resounding, “Yes.” In those days, the developer met with the client, got a rough idea of what was needed, and gave the client a rough idea of what he or she was going to do. The client, not having a clue what the developer’s proposal entailed, inevitably bought in because it sure sounded “cool.” At that point, the developer bought the necessary software and spent the next month learning how to do what he or she had just promised the client. With the rise of dynamic sites and the introduction of the work group and some pretty sophisticated software, the technical and creative demands placed upon web developers have increased. This means the day of the “One-Guy-

Does-It-All” shop is a thing of the past. In today’s production environment, speed and accuracy are critical. This means projects can only be completed by a team of specialists working with a carefully crafted production and project plan. The old business adage, “Plan your work and work your plan,” is more appropriate than ever. More often than not, that means the production cycle doesn’t start with pixels lighting up on a screen. It starts with a sheet of paper.

WANT VS. NEED

On the Computer Arts CD The extract presented here is from New Riders’ Building Dynamic Websites with Macromedia Studio MX 2004 by Tom Green, Jordan Chilcott and Chris Flick. On the Computer Arts CD, we provide chapter one in full (see the Pearson folder on the root of the disc). Turn to page 16 to get 30% off this great book at Amazon.co.uk.

When talking to the client, a key skill to have is the ability to distinguish between a “want” and a “need.” All too often, clients and developers get caught up in the technology and the software when

The old business adage, “Plan your work and work your plan,” is more appropriate than ever. they start discussing the project. A huge number of Flash MX 2004 sites out there could have been done more easily in Dreamweaver MX 2004. Why Flash? The client, discovering how cool it is to have a Flash site, decides they want one. The problem here is technology is constantly changing and can’t be fixed in place. A great example is the MX Studio. In April of 2002, we were all using individual Macromedia products. Six months later, they were completely reinvented as the MX Studio of integrated products that also included a developer edition of ColdFusion MX. Director

>

Macromedia Masterclass 01 11

Building Dynamic Sites >

developers planning a number of projects around the Multi-user server discovered, with the release of Director MX in late 2002, that the Flash Communication server replaced the Multi-user server. A valid question at this point, therefore, is, “How long will the online meeting facility be available through the site, and will it be able to adapt to changing technologies?” In the case of our community center, they want an online meeting room. This room will be used by various members of the clubs or other associations based in the community center to get together online to discuss plans, events, and so on. It

The question is, do they need such a facility? Ask that question of both yourselves and the client. should have a shelf-life of at least two to three years, which means the enabling technologies— ColdFusion and Flash—will most likely change, but the upgrades and changes are easy to effect. Then again, there is an even more fundamental question that should be asked. The question is, do they really need such a facility? Ask that question of both yourselves and the client, and the production process takes on an entirely new dimension.

Defining exactly what is needed The last thing a web developer needs is the client changing his or her mind mid-project. This situation usually results from the clients’ discovery that the project is moving in a direction they never expected. Even worse is the client discovering they have a technologically-advanced site their market either can’t or doesn’t use. In the case of our Oakbridge Community Center asking for an online meeting room, it is interesting, but do they need it? In this situation, it is incumbent upon the developer to break out a pad of paper, meet with the client, and start doing some very careful factfinding. The questions that could be asked are: ● Have your clients expressed a need for this? ● What sort of market do you serve? ● Do you have any idea about what kind of connection they have to the Internet? Broadband or dial-up? ● Are they technologically sophisticated enough to use video cameras connected to their computers?

12 Macromedia Masterclass 01

● Does your ISP have the necessary software to accommodate dynamic data transfer? The key here is discovering whether a full-bore interactive area with streaming video, audio and chat is needed, or whether the client would be better served with an instant messaging feature. Never forget, your client is rarely as technologically adept as you are. Thus, your role is twofold: web developer and educator. You will be building the site but also translating the technology to the client and presenting it in terms he or she understands. If the client needs instant messaging, recommend it. Although instant messaging isn’t as “cool” as a Chat Room built in Flash, you will have saved your client a serious amount of money that would have been spent on unnecessary technology.

Developing the project scope When you understand what is needed, there is an understandable urge to start up the computer and get to work. This would be a huge mistake. The only software you will need at this point is word processing software. It is used to produce a document that lays out the parameters of the project, including items such as a budget, deadlines, a creative brief and a technical specification. This is called the project scope. It should be regarded as a deliverable for the client to sign and date. By producing this document and having the client sign and date it, you and the client reach an agreement regarding exactly what is to be produced, by when, and at what cost. In this manner, you avoid scope creep. Scope creep is composed of those changes that, at the time, appear insignificant, but when added up can actually result in charges that can increase the original budget by a factor of 20 per cent or more. For example, the decision is made to use JavaScript rollover buttons for the navigation. Midway through the process, the client decides they should be done in Flash. In the total scheme of things, the three hours to make the change seem insignificant. If you have a number of them, though, they can have a huge, negative impact upon the final bill, potentially culminating with the involvement of lawyers. To avoid this potential messiness, create the aforementioned written document and include the fact that changes, additions or deletions through such things as cancellation penalty clauses in contracts will incur extra charges. Some agencies go as far as setting a limit for these charges, at which time they will actually stop work and renegotiate a new agreement with the client.

THE CREATIVE BRIEF When one introduces complexity into the web design process, one also creates a management problem. The problem is retaining the consistency of design throughout the project. If the site is composed of images, text, artwork, video, sound and other media, it is absolutely critical they all have the same “look and feel.” This way, the site visitor is not left wondering whether he or she has left the web site. A good example would be Nike.com. The site is massive. Yet visit any page in the site and you still feel you are on the Nike site. The other issue you will have to contend with is search engines. You have absolutely no guarantee the visitor will start at the index or home page. Again, a consistent and intelligent design ensures the surprise visitor is not disorientated. The solution is a solid creative brief. As we pointed out earlier, the web design process begins on a sheet of paper. The software used is usually word processing software, and one of the key documents produced will be a creative brief.

What is a creative brief? The creative team essentially receives its direction from the creative brief. The document is a written summary of the goals and objectives of the project, with very close attention being paid to the visitor. It also serves to give the team an idea of the creative direction for the project. It does this by laying out the demographics of the audience, their expectations, and the communication strategy behind the site. This is also a valuable document for the client. It is not uncommon for clients to have unreasonable expectations regarding the design of a site. A carefully-crafted creative brief will serve to focus the client’s attention on the creative goals of the site. It can also be used as the vehicle that enables the creative group and the client to agree to a common set of objectives. The document can be as short as one page, or, if the project is complex, it can be many pages long. Regardless of size, each member of the team should receive a copy of the brief. It should also be given to the client to be signed and dated.

● Project Objectives: List two or three key objectives for the project. ● Communication Objectives: Two or three key objectives that can be measured should be listed. ● Audience: Who is using the site? Try to be as specific as possible. ● Tone and Manner: What is the site’s “look and feel” going to be? ● Brand Idea: What impression should visitors get from the site? A brand idea can be developed by laying out the idea, why you think it works, and the rationale. Having wrestled with those broad topics, you can produce a brief that is acceptable to both the client and the creative team. The creative brief we will be working with throughout the book is shown below.

CREATIVE BRIEF Job Title: Oakbridge Community Center Project objectives: ● To provide a vital communication opportunity between the Center and the Oakbridge community. ● To position the Oakbridge Community Center brand favourably amongst the community. ● To educate the community regarding the depth of the facilities offered by the Oakbridge Community Center.

The Oakbridge Community Center is being used as an example project. A creative brief will drive the design of their site.

Communication objectives: ● To drive a measurable response throughout the Oakbridge community to increase facility usage. ● To drive a measurable awareness of the OCC brand explicitly associated with facility usage. ● To educate the general public regarding the variety and breadth of facilities and programs offered by the OCC. Target audience: ● Male/Female (assume a 60/40 split). ● Age: 20 to 49. ● Internet-aware professionals and community members. ● Current and former users of the facility.

How the brief is developed The brief is usually the result of a number of meetings held between the developer and the client. The document can take any form, simply because no two web shops approach the process in the same way. Still, there are some broad topics that can be covered, such as:

Tone and manner: ● Contemporary ● Approachable ● Engaging

>

Macromedia Masterclass 01 13

Building Dynamic Sites >

BRAND IDEA What’s the idea? ● To position the OCC as being more than just a sports complex. How does it work? ● The visuals portray the breadth of the Center. ● The copy educates the visitor about the nature and scope of the OCC. ● All visuals positioned in proximity to programs or facilities. ● The design guides the visitor visually on each page of the site and directs the eye on the page. Why is it right? ● Visitors will be exposed to the variety and depth of the OCC. ● For visitors new to the site, the copy and visuals will position the OCC as a community resource and not just a sports complex. ● The descriptive copy reinforces the community resource philosophy. ● The design conveys key brand personality and enforces visual approachability and ease of use.

THE TECHNICAL BRIEF Dynamic web sites use a lot of technology. As such, it makes sense to produce a document that gives the technical team its “marching orders.” From the client’s perspective, this document can help to demystify the process.

Focus on “cool” and the project is doomed to failure. Never forget the web is a communications medium. Let’s take a look at the key features the Oakbridge Community Center site will employ. First is an interactive tour based upon user interest. This tells us we will need to create a facility that enables those interested in indoor sports, outdoor sports and community use features—meeting rooms and conference rooms—to quickly review those features online. We’ll also need to create an application that enables the visitors to book the various sports and meeting facilities. A new wrinkle introduced by the client is the creation of an online meeting facility. This is being

14 Macromedia Masterclass 01

included as a part of the Center’s efforts to broaden its reach into the Oakbridge community and to enable a variety of community groups to either communicate their message to the Oakbridge community or to hold online meetings. Having done that, the process can be reduced even further, and we can describe and rationalise the functionality of each feature.

Rationales for the features The tour will be the part of the site that will receive the most visitor interaction. Visitors will need to be able to view the various programs and facilities, based upon their specific interest. After the visitor selects a category, he or she should be presented with an overview of that particular facility. If more specific information is required, the visitor can reach it with a single click. The booking facility will perform a number of tasks. It will need to keep a running list of the facilities the visitor wishes to book. It must also include functionality to enable the visitor to change his or her mind and add or delete items. It should also include the capability to refuse a booking based on overcapacity or, if the facility is unavailable, provide a few alternative dates or times that can be booked. It should also be able to issue an email confirmation regarding the booking. The online meeting facility should be flexible enough to accommodate all manner of users, from novices to the technically adept. Thus, it has to be flexible enough to offer services ranging from a text input chat facility to streaming video and audio. It should be able to accommodate groups ranging in size from three to 300. It will also contain a “help agent” that will “create” the meeting facility based upon user input.

Cool vs. practical The rationale, if you are on the web team, just oozes “cool.” Focus on the “cool” factor and the project is doomed to failure. Never forget the web is a communications medium. This means information is being transmitted. Focusing on the technology— ”cool”—and not the process—”practical”—will overwhelm the message. For dynamic sites to work, the technology has to be transparent. The tour could be done in any number of applications, but we decided to feed the content into Dreamweaver templates using content located in or referenced by the database. This way, the information is not fixed in place and can be quickly

amended to accommodate change. For example, outdoor tennis courts and baseball diamonds can easily be removed during the winter months, and programs like “spinning” or aerobics can be added without major modifications to the site. The booking application will be created in both Flash MX 2004 and Director MX. The reason here is to demonstrate to you how both applications can obtain and display data using ColdFusion and Flash Remoting. The online meeting facility will be a Flash application that shows you how to add some “cool”—streaming video and audio—to the site. It will also be built to accommodate those visitors not as interested in “cool” and will offer a text chat option using the Flash Communications Server.

Timelines/deadlines More and more web development companies are starting to understand the importance of project management and the use of a project manager. This individual, in many respects, could be the difference between the success or failure of a project and, to be blunt, the web development company. In fact, one of the authors has gotten used to hearing the principals of many large and small web development firms tell him the smartest thing they ever did was to actually hire a “project manager.” This individual knows the key to the successful completion of the project is the schedule, and that means he or she must get the team and the client to “sign on” to the agreed deadlines. If the schedule is properly developed, both groups will see a continuum from the start of the project to upload to the client’s server. This continuum involves timelines and deadlines and helps everyone involved to differentiate between forests and trees. Timelines, the forest, are usually contained in a key event schedule that lays out the broad parameters of the project and the scheduled completion date for the elements of the project. Depending on the complexity of the project, this document presents the major milestones of the project’s progression through the production process as a series of weekly or monthly deadlines. This document should be included in the proposal presented to the client. A detailed schedule—the trees—serves to move the team toward the completion of the project. By breaking the project into a daily schedule, all the major team members have a daily “to–do” list. This should be a fairly detailed document, but don’t make

it rigid. Spawned from the key event schedule, this document should accommodate the fact that scope creep will occur and that tasks will inevitably be added or subtracted and deadlines will expand or contract as the project moves toward completion.

The tardy client There are any number of solutions available to the project manager who has to deal with a team member who consistently misses deadlines. What about the client that misses them on a regular basis? The solutions here range from blood oaths and weapons on the table to account resignation. To avoid this situation, make the client aware right at the start of the process that time is money... the client’s money. This tends to get their undivided attention. Clearly explain each of the project’s goals and the financial implications of the client missing his or her goals for content delivery and approvals. In certain instances, it also doesn’t hurt to request that the client appoint a back-up individual with the authority to approve, sign, and date documents, should the client be unavailable. ■

Read more of this book This is an extract from New Riders’ Building Dynamic Websites with Macromedia Studio MX 2004. On the Computer Arts CD, we also provide chapter one in full from this brand new book. Or turn to pages 16 and 17 to find out how you can get 30% off this book at Amazon.co.uk, or get it completely free when you upgrade to Macromedia Studio MX 2004!

Macromedia Masterclass 01 15

Macromedia masterclass MX 2004 special offers OFFER 1 30% DISCOUNT ON PEACHPIT BOOKS With each issue of Macromedia Masterclass MX 2004, Peachpit Press, publishers of leading design titles, will be offering special discounts on a selection of books to help you get to grips with the Macromedia Studio MX 2004. You can take advantage of this special discount when you buy one or more of the four books at Amazon.co.uk. The four books featured in this issue’s offer are: ● Macromedia Flash MX 2004: Training from the Source Author: Jen deHaan ISBN: 0-321-21342-4 RRP: £33.99 ● Macromedia Dreamweaver MX 2004: Training from the Source Author: Khristine Annwn Page ISBN: 0-321-21919-8 RRP: £33.99 ● Macromedia Fireworks MX 2004: Training from the Source Author: By Patti Schulze ISBN: 0-321-21340-8 RRP: £33.99 ● Building Dynamic Websites with Macromedia Studio MX 2004 Author: Tom Green, Jordan Chilcott and Chris Flick ISBN: 0-7357-1376-6 RRP: £34.99

30% OFF

OFFER 2 FREE BOOK WITH EVERY UPGRADE TO STUDIO MX 2004 As if you needed any more incentive to upgrade... Nevertheless, the first 300 people who upgrade to Macromedia Studio MX 2004 (with Flash MX 2004 Professional or Flash MX 2004 Standard) will receive the New Riders book, Building Dynamic Websites with Macromedia Studio MX 2004, that retails for £34.99. This brand new title by Tom Green, Jordan Chilcott and Chris Flick is an in-depth guide to using all the elements of the Studio to create attractive, dynamic and data-driven sites. To be eligible for this free book, simply purchase the upgrade via the Macromedia store or your preferred reseller. To claim your book, fax your name, address and proof of purchase to BOOK OFFER on 01344 458666. The first 300 upgraders will be sent the book within 28 days. Proof of purchase is required. Offers ends 21 January 2004

COMPETITION

WIN A TRIP TO SAN FRANCISCO OR A PEACHPIT LIBRARY

PEACHPIT BOOKS AT

Get an incredible 30% off the RRP of the following books when you log on to Amazon.co.uk: Macromedia Flash MX 2004: Training from the Source Macromedia Dreamweaver MX 2004: Training from the Source Macromedia Fireworks MX 2004: Training from the Source Building Dynamic Websites with Macromedia Studio MX 2004 To take up this fantastic offer, simply follow the link

www.amazon.co.uk/macromedia

no cash value and may Discount against RRP. Prices exclude P&P. The above voucher has and is subject to not be used with any other discount. Offer ends 31 January 2004 for more details. availability. Information correct at time of going to press. See Website

16 Macromedia Masterclass 01

Enter this Macromedia and Peachpit Competition for the chance to win a trip to San Francisco with Macromedia, or a complete Peachpit Training from the Source library.

To find out more, register at: www.computerarts.co.uk/macromedia/masterclass

special offers OFFER 3 10% OFF THE FULL VERSION OF STUDIO MX 2004

OFFER 4 FREE FLASH MX HANDBOOK

WHEN YOU SUBSCRIBE TO COMPUTER ARTS

Get the Macromedia MX 2004 editions of Dreamweaver, Fireworks and Flash Standard or Professional in the new Studio MX 2004 which also includes FreeHand MX, Contribute and ColdFusion Developer Edition (Win only). Each application works together seamlessly in the creation of Web applications, Websites, animations and more. Computer Arts issue 91 awarded Studio MX 2004 four out of five stars for its integration and unrivalled Web graphics capabilities. In addition to the massive savings attached to this powerful bundle, Macromedia Masterclass MX 2004 readers are eligible to receive ten per cent off the estimated street price of Studio MX 2004. Call 0870 730 6996 or visit www.computerarts.co.uk/macromedia/masterclass and click through to the Macromedia special offers. Offer ends 21 January 2004.

FIRST PRIZE Win an exclusive trip to San Francisco with Macromedia to attend the FlashForward2004 conference in March 2004. The prize includes flights, accommodation and entry to the conference for two people. The event includes a full day of in-depth workshops plus two days of educational seminars, technology showcases and Ask the Expert sessions. See the Website for more details www.flashforward2004.com. SECOND PRIZE Peachpit is offering a complete Training from the Source library, worth more than

The Flash MX Handbook contains more than 250 pages of the best tutorials, tips and features from Computer Arts and Computer Arts Projects magazines. Anyone who subscribes or renews their subscription to Computer Arts before 21 January 2004 is eligible to receive this superb collection. You’ll also get 13 issues delivered to your door, including all CD-ROMs and any supplements. UK readers can subscribe for just £46.80. Call 0870 444 8455 to order. US, Canada, Eire and European readers can subscribe for just £73.53. Call +44 870 444 8455 or email [email protected] today. Anywhere outside the EU and North America can subscribe for £86.53. Call +44 870 444 8455 or email [email protected]. Please quote code COAMX01. Offer ends 21 January 2004. Offer available by phone or email only, not available with online applications.

£300 to one Macromedia Masterclass MX 2004 reader. These ten brand new books contain everything you need to know about using the MX 2004 range of software. See full contents below. THIRD PRIZE Win a subscription to Computer Arts and Computer Arts Projects. By providing industry insight and expertise to everyone interested in digital art, design and animation, these magazines are essential monthly reads. Our third prize winner will get a year’s supply of both magazines – that’s 26 issues including CD-ROM and delivery for themselves or as a gift.

PEACHPIT’S TRAINING FROM THE SOURCE LIBRARY IN FULL All this valuable and in-depth knowledge could be yours with this huge library - all for one lucky reader. Flash MX 2004: Training from the Source, Dreamweaver MX 2004: Training from the Source, Fireworks MX 2004: Training

from the Source, Flash MX 2004 Actionscript: Training from the Source, Flash MX Professional 2004 Application Development: Training from the Source, Flash MX 2004 Actionscript 2.0 Dictionary, Dreamweaver MX 2004 with ASP, ColdFusion and

PHP: Training from the Source, Macromedia Freehand MX: Training from the Source, Macromedia ColdFusion MX: Training from the Source, and Macromedia ColdFusion MX Web Application Construction Kit

To be in with a chance of winning, answer the following simple question. What is the abbreviation for ColdFusion mark-up language? a) AFML b) BFML c) CFML Closing date 21 January 2004. To enter, register at www.computerarts.co.uk /macromedia/masterclass to access the competition link. Or to enter by post send your answer on a postcard to Macromedia MX 2004 Competition, Computer Arts, 30 Monmouth Street, Bath BA1 2BW. Competition terms and conditions: Competition open to UK readers only. Employees or freelancers of Future Publishing, Macromedia Inc or Pearson Education and their families are not eligible to enter. First prize winner is responsible for travel insurance, spending money and transfers to and from airports. If any books are unavailable, the winner may choose a book from Peachpit Press, Macromedia Press or New Riders to the same value. The winners will be selected from all the correct entries on 22 January 2004. There is no cash alternative. The editor’s decision is final, no correspondence will be entered into. E&OE.

Macromedia Masterclass 01 17

why bother? So why should you even consider using rich Internet applications? We asked a broad array of design professionals for their experience of time-savings and client satisfaction – here’s what they said… Name: Delmar Mavignier Company: DNA Location: London, UK Contact: www.dna.co.uk

“Flash MX, especially, enables us to take existing campaigns to the next level. The right choice of media format – expandables, floating ads, interstitials and so on – allows us to offer very specific functionality. Users can search for a product, find out prices, get more information on mouseover, can play small games and get engaged with the brand, its products or services before leaving the ad. From a creative and marketing perspective, this truly frees up many possibilities. Clients recognise this and are more willing to explore new ways to communicate with their target audience.”

Name: Ian McMillan Company: Cygnus Location: Lake Mary, FL, USA Contact: www.cygnus.com

“Everything we do is absolutely dynamic. Everything is built on the fly. We have no static pages. If we add a product to the database, the Web page automatically reflects those new products. That’s an advantage of rich Internet applications. Everything can be dynamic so you’re not having to manually publish pages, which of course saves a huge amount of time on the developer side.”

18 Macromedia Masterclass 01

Name: Keith Pape Company: Virtual Image Consulting Location: Newport Beach, CA, USA Contact: www.virtual-image.com

Name: Peter Cobb Company: eBags Location: Greenwood, CO, USA Contact: www.ebags.com

“Our feeling is that the Internet continues to be accepted by more and more people as a place to research and purchase products. As technology continues to be developed and high-speed lines become ubiquitous, rich Internet applications will play a key role in enhancing the customer shopping experience.”

“With rich Internet applications, we have both the extensibility of a complex set of languages such as ColdFusion – which is now fully J2EE compliant – along with Flash/ActionScript (ECMAscript compliant). This enables a project to be divided into components and modules, allowing for rapid, parallel development cycles instead of linear development, with all of its inadequacies. With enhanced features and a growing extensibility and functionality set, there is little that cannot be accomplished in both online, as well as offline environments, giving the final customer a substantial cost savings by developing an RIA over a traditional desktop application.”

Name: Nick Ridley Company: Root6 Location: London, UK Contact: www.root6.com

“A good Website presents up-to-date information in an attractive manner. However, a rich Internet application adds that final key element that flat HTML pages lack – interactivity.”

Peachpit Essential books for the creative community

Get MX 2004 Training Straight from the Source! Master Macromedia’s new MX 2004 line-up with this best-selling series from Macromedia Press. Macromedia Flash MX 2004: Training from the Source By Jen deHaan 0-321-21342-4 • £33.99 Macromedia Dreamweaver MX 2004: Training from the Source By Khristine Annwn Page 0-321-21919-8 • £33.99 Macromedia Fireworks MX 2004: Training from the Source By Patti Schulze 0-321-21340-8 • £33.99

Learn how to use all of the Studio MX 2004 tools together to create dynamic, data-driven Web sites! Building Dynamic Websites with Macromedia Studio MX 2004 By Tom Green, Jordan Chilcott and Chris Flick 0-735-71376-6 • £34.99

Take video where it has never been before Develop advanced Flash content, applications and video experience.... Introducing Macromedia Flash MX Professional 2004! The Professional version includes all the features and benefits of Flash MX 2004, plus advanced functionality for creating more sophisticated interactive content, rich Internet applications, professional quality video, and easy deployment to devices.

Use Flash Pro to create completely customised video experiences for e-learning, sophisticated presentations and interactive marketing. Reach the widest possible audience with its progressive streaming and instant delivery. The Flash video format is supported directly by leading professional video tools that you already know and use.

And, for a limited time only, receive free extensions worth £150 with the purchase of any Macromedia MX 2004 product.(Offer valid until 31/12/03)

To order your copy of Flash MX Professional 2004 visit www.macromedia.com/uk/buy or call Macromedia on 0131 458 6766

Macromedia MX 2004. Run with it. Copyright © 2003 Macromedia, Inc. and its licensors. All rights reserved. Macromedia, the Macromedia logo, Dreamweaver, Flash, Fireworks, and Macromedia Flash are trademarks or registered trademarks of Macromedia, Inc. in the United States and/or other countries. Other marks are the properties of their respective owners.