Mastering the tools that you work with on a day-to-day basis is no easy feat. In fact, it takes years to become so adept with tools that you barely even need to think about how to create a desired effect. But it's this knowledge that's going to give you more time to be more creative on projects; more time to brainstorm, sketch up ideas and bring them to life. Without a true knowledge of the industry's leading software tools, your creativity is likely to be stifled, and your productivity lessened. Adobe Creative Suite is the de facto standard in the design industry.
Whether you work in print, web or motion, the tools in Adobe CS are essential to your output. And so we're bringing you 112 invaluable tips for working in Photoshop, Illustrator, Flash, InDesign, Dreamweaver, Fireworks, After Effects, Premiere and Encore.
So, whether you work in CS2, CS3 or the recently updated CS4, you'll find snippets of advice that will help you to work faster, more efficiently and, ultimately, improve your design skills.
Matt Wicks on Fireworks
01: Become FXG fixated
You can allow Illustrator users to natively work with your Fireworks files by using the Commands>Export to FXG. FXG is a file format that will become increasingly important in the Creative Suite as time progresses. FXG files created in Fireworks can be opened in Illustrator CS4 just by using File>Open.
02: Export prototypes to PDF
Take your prototype and send it to your client for comments using the new 'Export to PDF' option (File>Export.) You can enable any PDF for commenting, so your client just needs Acrobat Reader 9 to say as much as they want about your work.
03: Make good use of your Desktop
Turn your prototype into a Desktop application. By using the Commands>Create AIR Package you can create a file that can be installed and run as a native application (like Fireworks is) on PCs, Macs and Linux. Your clients can get a proper feel for how the final application will work.
04: Functional AIR apps
You can create a fully functional AIR application as well. Use the Commands>AIR Mouse Events option to add drag, close, maximise and minimise functionality to your design - with no code!
05: Share prospects
Share your work with other people in your workflow. File>Share My Screen enables up to three people to simultaneously view what you are doing, and even manipulate your machine remotely. All you need is the Flash Player and an Adobe account.
06: CS4 Star tip Do a Demo
Show off your work to its best advantage at team meetings by using the Commands>Demo Current Document. This creates a slick Flash-based gallery of all (or some) of the pages of your file. You can use this as a presentation in its own right, or hand it to the web designer to include in Dreamweaver.
07: Get in on the ACT
Create a shared colour palette for your team. Use Commands>Web>Create Shared Palette to generate an ACT (Adobe Colour Table) from a collection of images. You can then share the ACT file with members of your team working in Photoshop and Flash.
08: Free your assets
Use File>File Info to add copious XMP-driven metadata, which will be exposed and searchable in Adobe Bridge, making assets available and trackable by other members of your team as well as making them simpler to archive.
09: Be skin deep
Create skins for Flex applications in a wholly visual way: use Commands>Flex Skinning>New Flex Skin. Select the components that you wish to skin, and make your changes. Then use Commands>Flex Skinning>Export Flex Skin to create the graphics for the Flex Developer use.
10: Create standards-compliant CSS
When exporting to Dreamweaver, you can now create standards-compliant CSS. Select File>Export on your sliced prototype/design and then change the Export drop-down options to 'CSS and images'.
11: Be HTML versatile
If you are exporting to a different HTML environment, you can change the way in which HTML is written. File>HTML Setup lets you swap from Dreamweaver HTML/XHTML to AIR or GoLive code.
12: Adjustment Layer import options
If you use an adjustment layer in Photoshop, you need to Right/ Ctrl-click on it and select 'merge down' before saving if you import it into Fireworks. Although Fireworks maintains layers, it will discard the effects of the adjustment layer otherwise.
13: Know how to Bridge to Fireworks
You can access key Fireworks tools in Bridge. Select your images and then Tools>Fireworks and choose your option: Convert to Sepia, Convert to Grayscale, Invert Selection Color or even run a Batch Process straight from here rather than opening multiple files in Fireworks.
14: Be symbol-savvy
Use symbols to speed up your work. Create your artwork then Right/ Ctrl-click>Convert to Symbol. You can save and reuse symbols in your Document Library or, if they are often used, save them in your Common Library for sharing across multiple projects.
15: Master the URLs palette
If you are creating your navigation elements in Fireworks, use the URLs palette - you can import any HTML file, and all HREFs on that page will be added to the URL library. You can then access these from the URL drop-down when setting navigation points on your nav bar/ jump menu.
16: Go with the text flow
Create text that flows around the page. Create your path, type your text, then select Text>Attach to (or in) Path. If you save your file (File>Save As) as an AI file, the text can still be manipulated in Illustrator.
Matt Wicks
Matt is a freelance web designer and developer. His clients have included the BBC, the NHS, the Fire Service and the MOD. He works extensively with Adobe, presenting for them on web- and RIA-related topics throughout Europe.
www.thewebforge.co.uk
