A recent plea on twitter for an Illustrator script has been answered! I needed to export all my artboards as 32bit PNGs (24bit + 8 bit Alpha Channel), with the artboard name as the filename, but Illustrator doesn’t come with a built in method to do this. The closest it offers is the standard export, where it can save all artboards, but it always appends the document name to the start of the filename.
Big hurrays then for Dan Smith for creating exactly the script I needed! It’s already made a big difference to my workflow. If you’d like a copy too, Download Artboards-PNG.jsx. I placed mine in Illustrators Presets/en_gb/Scripts folder to make sure it’s always loaded.
With the iPad and iPhone 4, there are as many, if not more, different size icons to create for iOS than there are for desktop apps. While there are plenty of templates and reference sheets for Photoshop users (see Cocoia) I prefer to use Illustrator CS5 to create mine. So I’ve made my own template, and it’s available here if you find it useful too!
The top layer of the file contains labels and a mask to add the rounded corners of the icon. Don’t forget to hide these before you export.
Something that Apple doesn’t include in it’s documentation are the various corner radius dimensions for all the icon sizes. This information has been compiled thanks to investigations of Sarah Parmenter and Tim Van Damme.
It’s best to create the artwork with 90° corners and let the OS round them off, but there is a mask layer to help you check how it would look. The mask also uses the appropriate colour for the context – white for the app store, black for the home screen and light grey for the spotlight results.
Also the icon that iOS uses for spotlight results on the iPad is trimmed by 1px around the edge. So while the artwork still needs to be supplied as 50px, the visible area is only 48px, and the guides reflect that, while the rounded corner mask stays at 50px.
The icons are all set out on their own artboard, so when you’re ready to export check the ‘Use Artboards’ option to get each icon as an individual file:
While I’ve worked hard to make sure this template is as accurate as possible, I can’t guarantee it’s completely error-free. Let me know if you find any bugs, and I’ll update it!
If you’re using CS4 or below, this template may well work for you, but hasn’t been tested and may explode leaving terrible stains. I target CS5 because of it’s the first version that has pixel snapping that actually works!
I remember when I first went freelance, paying for my first software bundle. I had the choice of buying Quark Xpress 5 for a few pounds shy of a thousand (that’s a complacent monopoly for you), or I could get Acrobat, Photoshop, InDesign and Illustrator for just £600. It was a no brainer to leave what was the leading print design app of the day, that I’d used for all my career so far, and go for the plucky youngster that was InDesign.
Back then, Adobe felt like the good guys. Nowadays they feel more like the Quark Xpress. Another weighty CS upgrade is upon us, and I was keen to see if there were improvements. Shortly after that big post looking at Fireworks alternatives, I was contacted by John Nack from Adobe:
I’ve just begun reading your thoughts on ways to replace Fireworks, and I think you’ll be happy with what the Illustrator team has been doing
I ended up trying a pre-release of Illustrator CS5 at the end of it’s beta cycle, and I have to say, I was taken aback. I’ve always used and loved Illustrator, but it’s never been a tool that I’ve trusted with anything that depended on crisp pixels. It’s supposedly had pixel snapping since v9 (pre CS), but it’s never worked properly. Workarounds, such as setting stroke widths to 0.9px to avoid unwanted subpixels, had to be devised. Using effects like drop shadows often left artefacts on screen, leading to wasted time trying to get of rogue artwork that wasn’t actually there.
That’s all changed in CS5. Pixel snapping works! You can draw artwork with confidence that you won’t have to do a lot of tidying up afterwards. Artboards have been improved and make a very good alternative to pages in Fireworks. In fact, it’s better, because you can see all your artwork at once.
I’m smitten. Really I am! While it isn’t a bitmap editor, these last few weeks I’ve used Illustrator CS5 instead of anything else for UI and icon work in particular.
In general, looking at the “What’s new in CS5” list I see a lot of new features being added like ‘Flash Catalyst Integration’ to the list of other fluff that gets installed like Bridge, Device Central, Version Cue, etc.
I’ve also had a chance to play a little with Fireworks CS5, but nowhere near enough to have a informed opinion. Once again, I failed as beta tester due to workload. (It’s embarrassing – I can’t really complain about Fireworks, and then not do anything about it). However, I’ve seen that the Fireworks team have been busting a gut getting it stable and smooth.
This is all very nice, but aren’t we just paying for bug fixes on Fireworks? The developers have obviously done an incredible amount of work, and the focus on stability is to be applauded, and a low-cost upgrade like Snow Leopard would’ve been fine. In the case of Illustrator, there is a lot more than stability and bug fixing going on. Perspective drawing is a very appealing new feature to me, amongst others. Still, pixel snapping is the draw for me, and that’s something I thought I’d paid for a long time ago. I’m in a quandary as to whether to upgrade, but the pull of Illustrator CS5 is strong.
Quark could charge whatever they liked for Xpress, because it was the industry standard and there were no real competitors for years. It also stagnated for a long time. Adobe finally changed all that by making a fantastic competitor and charging considerably less for it. It took quite a while to filter through the print design industry, but InDesign toppled Quarks top position, forcing them to revise their pricing and their attitude. I can’t help but feel that Adobe really needs the competitors now.
This is a post about Fireworks. Not about Photoshop, Illustrator and which is ‘best’. This is about a frustrated love hate relationship.
I love Fireworks.
It’s been my tool of choice for a rather long time. In the previous year of working for Opera, I’ve used it more than any other app. Whether I’ve been working on interactive wireframes, UI mockups, icons or final production artwork, Fireworks is the one that I go to.
When people ask why I don’t use Illustrator or Photoshop I sometimes find it hard to articulate precisely why. Illustrator is undoubtedly best for print/high-res illustrations and logos, while Photoshop is the first choice for manipulating photos, especially for print. Each have some tools from the other, but neither is intended for creating screen graphics with vector and bitmap tools in the way that Fireworks is.
It loves pixels. Photoshop and Illustrator only ‘do’ pixels when they’re coerced, and by golly do they take persuasion sometimes. For example, in Illustrator, why does a 1 pixel stroke on a pixel perfect box, placed on pixel perfect co-ordinates have sub-pixels on the top edge? Why do I have to make the stroke 0.9px instead of 1px just to get a crisp 1px edge?
This is surely the most basic of things to get right? Photoshop can do vectors and some of what Fireworks can – it just makes it harder to do it.
What’s so great about Fireworks…
Pixel-snapping vector tools aside, it’s most useful feature (that still isn’t present in anything else I’ve tried) is multiple Pages and States. Why have 45 separate files for a set of icons, when I can have one file that will export to 45 individual files? Let’s say all these icons have the same background, like a typical OS X toolbar button, and you notice a glitch. To update all those files would be tedious, but because it’s in Fireworks on a shared layer (or Master Page) one update is all that is needed. Master Pages in particular come in handy with site designs, as each page can be a different size and canvas colour.
Here’s a sample working file of Opera Unite icons:
It contains five different pages (one for each pixel resolution) and 10 icons per page, each on a different ‘state’. 50 icons, one file, one export. I’ve attempted replicating this functionality with layers, layer comps and multiple artboards, but they don’t come close.
Every time I’ve worked on wireframes and mockups, I’ve felt blessed that I’ve got symbols. Anyone that’s used Flash will know what a symbol library is, but for those that haven’t, think of them like this: Reusable content. Take the example of a form button in a site design. I can create a button symbol, specify how that graphic can be resized (with 9 slice guides), and place it anywhere in my document. Again, updating and editing is a do-once, update every instance affair.
It’s not all roses though.
I also hate Fireworks.
With a growing passion. With each update we get more tools and features that I care nothing for – Adobe Air, Bridge and Flex integration and CSS export. Worst of all it’s become remarkably unstable, particularly under Snow Leopard. It crashes, even when you don’t look at it funny.
I use it because it’s the best there is, but there are a lot of holes that need filling for me:
- Auto-activating fonts. Whether this is down to Adobe or the developers of Font Managers I’m not sure. To get a newly activated font to show up, you need to restart Fireworks
- Export to Illustrator. Yes, this option exists, but it ignores gradients, transparency effects, and just about everything but the paths themselves. When I know that the artwork will be needed beyond screen use, I work in Illustrator from the outset, but there isn’t always that fore-warning.
- Placing items outside the canvas. A pasteboard area to place surplus artwork would make life a lot easier, and stop the ‘resizing the canvas cuts overlapping artwork’ pain.
- It’s taken to CS4 to get palettes that scroll with a scrollwheel, and even now, they don’t ALL do it
- In CS4, when using the ‘application frame’ you need to click inside the active document before commands like zoom work, otherwise it does nothing.
I really could go on, but there are also more general problems with the Adobe Creative suite:
- Expensive – not two ways about it, it costs a few bob, and it often feels like better performance/bug fixes have to be paid for. I upgraded to CS3, solely to have a suite that worked properly on an Intel Mac. It now feels like those CS2 days are here again with Snow Leopard.
- Bloated in feel: both with sluggish performance and barrel loads of features you never use. This can of course be entirely psychological.
- Keyboard shortcuts deviate from the OS X standard, and from each other. Command-H should always Hide the application, Command-1 should always show the the document at 100%.
- Installation: To reinstall CS4 recently took an hour, during which it also wants to take a big smelly dump in your Applications folder: Adobe Media Player, Adobe Drive, Adobe Bridge, Version Cue… STOP! Also – why make me close all my browsers?
- Licensing/activation process. I know this is an anti-piracy measure, but it actually makes a cracked version more appealing.
- Updating: Do I need to say anything here? It’s a dark land far, far away from the ease of Sparkle, where even the updater needs to update itself.
- Then there are those glitches with artefacts which have been creeping into Fireworks of late too. Blobs of pixels that aren’t really there, but show up because the screen hasn’t been redrawn correctly. Cumulative wasted hours trying to get rid of artwork that is a phantom.
Compare these gripes with an app like Opacity. It downloads quickly, you open it and it asks you if you want to place it inside the Applications folder – done! That’s installation. As for updating, it self-updates and lets you know what’s been changed. The least amount of friction, and you’re left with the feeling of being in control of what you’ve installed.
Now, at this point, I need to confess that I’m the worlds worst beta tester. I’ve been on Fireworks beta programmes before, but haven’t had much time to give feedback or bug reports. So it’s a bit rich of me to be whining on my blog when this is all feedback that should’ve been submitted.
The problem is, after submitting the 20th crash report of the day, I’ve lost faith that anyone ever sees them or acts upon them. Overall, it feels like Fireworks is at the point of no return – no hope of it ever being fixed or improved, only that it will get more bloated, buggy, non-native and expensive. A stable version will no doubt come, but we will have to pay for it in the form of CS5. Maybe it’s not the Fireworks team that’s the problem here, maybe it’s higher up at Adobe? Maybe it’s just my setup? I can’t tell.
The bottom line is: Fireworks was my favourite, cherished tool, and it’s unreliability and issues mean my daily workflow is badly disrupted.
So, my thoughts turn to competitors. I’m not the only one, others are fed up with Fireworks and are looking for something to use instead. John Gruber, using the analogy of Filemaker’s Bento app, hits the nail on the head:
Adobe shouldn’t scrap its existing software any more than FileMaker Inc. should scrap FileMaker. But where’s Adobe’s “Bento” for bitmap and vector image editing for the Mac? The Bentos in this space are coming from indie developers with apps like Acorn, Pixelmator, Lineform, and Opacity.”
For such a long time, there haven’t been any alternatives. Various apps have been born that compete with other Adobe Suite apps, like Lineform and VectorDesigner with Illustrator, and Pixelmator and Acorn with Photoshop. Nothing for Fireworks, and yet the need for screen graphics is surely growing daily? Not only with websites, but desktop software and mobile apps.
In the meantime, Twitter clients have become ten a penny and Omnigraffle has matured to become a truly great tool for multi-page wireframes.
Recently however, three potential alternative apps have surfaced: Drawit, Acorn 2 and Opacity. I’m going to be putting these apps through their paces, to see if they can be potential alternatives. That’s for another time though, as this post has gone on long enough!
However, initial trials are showing Opacity as the most thoroughly feature-filled contender, but with Acorn sporting undoubtedly the most thoughtful interface. Acorn also has the advantage in that it’s developer, Gus Mueller, is actively seeking feedback on how it can be more of a Fireworks competitor. Drawit also has a pleasing UI, but with some issues on rendering.
I’ll report back on these when I can!
I’m posting this in the hope that I can prevent someone else from losing their mind. The shiny new Adobe Creative Suite ran fine on my G5, but when I tried to install and run it on my G4 Powerbook, the dock icon would bounce for a few seconds then quit. I tried a variety of fixes – re-installation, trashing preference files, repairing permissions, installing under a different log-in. I even rebuilt the Powerbook from scratch in case that might help. Still no cigar.
Finally, after having a Damascus Road experience on a MacUser forum, I found the fix, and you’ll never guess what it is. Go into Date & Time>Time Zone and change the setting from ‘GMT’ to ‘London’ (or anything other than GMT). Suddenly, everything opens and works fine.
Adobe recently updated their main product range as the ‘Creative Suite’ (CS), and with it, what would’ve been called InDesign 3 – InDesign CS. InDesign is their flagship desktop publishing/graphic design application, created as a rival to Quark Xpress, which had been without competition for years. I’ve been using v3 (sorry ‘CS’) for a few weeks now, and I offer here my initial thoughts.
For all its negative points, Quark has never been a hungry app. It has a low minimum spec. Conversely, ID2 ran sluggishly on my G4, the beachball was a regular sight. For users with OS X however, running Quark in the classic environment was never a happy experience. Problems with screen redraw were partly solved by a free plug-in, but general erratic behaviour made InDesign a more inviting choice. ID also offered many features tha Quark users could only dream of – Multiple Undos, Open Type support, PDF output, native PSD support, transparency… the list was huge.
Quark still inhabits a price range normally reserved for high-end 3D applications – for less than the price of Quark, you can buy Photoshop, Illustrator, InDesign and Acrobat! Add to that the delay of an OS X version and the offensively dismissive comments from Quark’s CEO towards Mac users, and you get a lot of unhappy Quark users converting to InDesign. Judging by the strong Quark presence at this years’ MacExpo, they realise they need to recover some ground.
My main problem with using ID has been that most other studios and printers are still on Quark v4 (released 1997). Printers able to take files as press-ready PDFs tend to only be very large outfits. If I create a design spec for another designer or typesetter, I can’t use ID and expect them to buy new software and learn it. Hopefully, this will become less of a problem in the future, as PDF workflows become more commonplace. For now, I use InDesign whenever I can, and resort to Quark when I have to. Anyway, onto the new version…
InDesign CS (or v3):
First of all, the packaging and branding, redesigned by MetaDesign, look amazing. The Creative Suite CDs come in a ‘fat DVD case’, an improvement on the all the seperate jewel-boxes they used to use. However, its seems that what was the last bastion of printed manuals has now given in. The Adobe CS comes with the dreaded ‘getting started’ leaflet with all the manuals provided as PDFs. To their credit, they do include a ‘Video Training CD’, but I couldn’t get this to work. Its sad, Adobe were always the reliable ones. Nothing beats a printed book to get information quickly.
These are the new features I’m excited about:
- Bleed setup – Its about time this basic feature was introduced, InDesign got there first.
- Preview separations and flattening – All the stuff that could go wrong at the last stage can be caught earlier, without having to wait for proofs.
- Mixed ink support - This is something that Quark had been able to do since v3.
- Speed - The sluggishness of ID2 is much improved. Page zooming was a particular problem area, but now much better.
- Options palette – There is now a Photoshop style options bar at the top, giving easy access to all the common tools. This is context-sensitive, and changes depending on the tool you’ve chosen.
- Side palettes – these can be hidden and shown like drawers on a single click, which helps de-clutter the palette frenzy. The only downside is that the palette headings are vertical, and those ‘in the background’ are very hard to read.
All of these features work exactly as you expect, and make working in ID that little bit easier.
According to the manual, you can save files back to InDesign 2, but they have to be exported as ‘InDesign Interchange Format’ . ID 2 users then have to install a Scripting plug-in and the XML Reader plug-in. These are apparently downloadable from the Adobe site, but I couldn’t find them anywhere. Then I found this little note after a lot of searching on the Adobe site:
Saving InDesign CS documents for use with InDesign 2.0
The InDesign CS user guide and help documentation includes information on using the InDesign Interchange format export option to save documents for use with InDesign 2.0. This information should be disregarded, as this export option does not support InDesign 2.0 compatibility. Opening InDesign CS documents is not supported in InDesign 2.0.
Eh? ‘This information should be disregarded’?! A polite way of saying “we cocked up’! So if you want to use InDesign CS, you’ll have to wait until your suppliers/repro houses have caught up!
However, an Illustrator eps can be saved for previous versions, using ‘export as illustrator legacy eps’ (read ‘save as some old crappy thing’). Incidentally, Illustrator CS is also noticeably snappier, apparently this is something that was addressed with this upgrade. Its still my preferred illustration package to Freehand.
InDesign has continued to be more refined and powerful with an emphasis on elegant typographical control and integration with other Adobe products. In short, this is one of the few upgrades I’ve bought recently that I felt was really worth it. Just one major flaw: no way to save files back to version 2. Surely they’ll have to do something about this if they want to encourage more users to convert to it.
Oh, and a printed manual would be nice…
Is anyone else in the UK going to the Adobe Creative Suite event in Edinburgh next week? I’ll be there, trying to glean information about the new versions of InDesign and Photoshop, and it’d be good to see some friendly faces!
Archives by tag:
icon and interface design,
logo and branding design,
website and logo design,