You're looking at all articles on The Hickensian tagged 'illustrator'

Updated iOS Application Icon Ai Template

Sorry its taken a while to get around to this, but I’ve finally updated the iOS Application Icon Template for Illustrator to include the new Retina sizes for iPad 3:

Part of the delay was me trying to include all the document icon sizes as well, but these were more complicated, and I’ll do a seperate template for these when I can. The update includes the whopping 1024px size required for the App Store on iPad 3.

I’ve not updated the guides and masks layer to use the super-accurate corner radius. As before, treat this layer just for preview, and hide it before exporting to PNGs. Your exported file should have sharp, not rounded, corners. I recommend using Matthew Ericson’s export script to export the artboards to PNGs. The artboards are labelled following the Apple guidelines, so as long as you don’t add a prefix or suffix, the filename should be right!

⬇ Download the Template

There shouldn’t be any catastrophic errors, but if you notice anything odd, please let me know!

Artboard Limit

Whenever I’m asked what app I use to draw icons, I’ve always recommended Illustrator. However, I recently discovered an important drawback though when creating large icon sets – there is a limit of 100 artboards per document.

Artboards are a great way of defining areas to export – you can keep all the icons for a project in one file, work on them in company and context, and use export scripts to create individual files. When I moved from Fireworks to illustrator, it was artboards that replaced the pages/states feature in FW. I think the arbitrary limit was set to avoid performance issues, but when you’re dealing with simple monochrome icons, that would surely never be an issue.

This is one of the reasons that Mordy Golding prefers Slices (with other good reasons), but export scripts certainly get around at least three of the artboard issues he mentions, and there are some drawbacks with slices:

  • Slices can’t overlap, whereas artboards can. This is useful for the ability to export individual files as well as one large sprite.
  • Slices are more hassle to name. Artboards aren’t particularly easy either, but at least you can hit Shift + O to enter artboard mode, or double click the artboard name in the list.
  • You can’t align objects to slices, only selections and artboards.

But of course, you can have an unlimited amount of slices! In general though, I find slices in Illustrator a rather fiddly way of managing multiple exports.

In Sketch however, (and particularly Sketch 2) slices are great. They can be place anywhere, named easily and have the option to export final files without a specific layer – handy if you’re drawing icons on top of a background colour (such as dark toolbar) that you don’t want exported.

Adobe are currently gearing up for CS6, and maybe the artboard limit has been relaxed, but keep an eye out for Sketch 2. I’ve been very excited playing with the beta version, its got bags of potential!

Illustrator export artboards as png32

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.

iOS icon template for Illustrator CS5

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!

Download the iOS icon template for Illustrator CS5

Screenshot of the iOS4 template

Layers and Artboards screenshotThe 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.

Corner Radius

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.

Exporting

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:

Export

Disclaimer

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!

Illustrator CS5 is lovely, but Adobe still needs competitors

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.

Archives by tag:

2006, 2007, 2012, 2013, accessibility, acoustic, actionscript, adobe, advert, adverts, advice, air, alternative, ambient, analog, apple, applecare, appletv, apps, appstore, art, articles, atmedia, attap, audio, australia, authenticjobs, awards, ban, basecamp, bbc, beatles, belkin, bikes, bikeshops, bitmap, blackhole, blog, blogs, bluetooth, boardman, bonecho, books, boxee, boxeebox, boxmodel, braindump, breakfastbaps, britain, british, browser, browsers, browsers.mozilla, bug, bugs, cairo, cakes, calendar, camera, camino, casestudies, cbbc, cc, chap, chaps, charity, cheerup, cheese, childreninneed, christmas, cinelli, cms, cocoalicious, coda, code, collections, colnago, colour, colourblind, colourblindness, comedy, comments, competition, comps, conferences, copywriting, cotswolds, country, covers, craft, crafts, creativity, cs5, css, css.webstandards, cycling, danielsmonsters, delicious, dell, design, design.colourblindness, desktops, development, digital, discovery, discussion, diy, dock, doctorwho, dogs, drawing, dream, dreams, dropbox, drwho, education, electronica, email, emoticons, endofyear, england, events, evernote, expressionengine, eyetv, family, favicons, feedback, femalevocal, figures, film, films, firefox, fireworks, firstworldproblems, flash, flexible, flickr, flock, fonts, found, foundries, foundsounds, fowd, free, freelancing, frontrow, ftp, g5, games, gaming, gardening, garlic, geek, geekends, geekery, geekmediabox, genesis, genius, gentleman, gifs, gigs, google, googlereader, grammys, graphics, greader, grids, gtd, guvnor, hacks, handbag, handbags, hardware, harrypotter, helvetica, helvetireader, heros, hicksdesign, history, holiday, hosting, howto, hp, html5, humanrights, icab, ical, ichat, icon, icon design, icondesign, iconhandbook, icons, ideas, illustration, illustrator, illustrators, im, images, indesign, infographics, inspiration, installation, intel, interface, interfaces, internet, internetexplorer, interview, interviews, inventions, ios, ios7, ipad, iphone, iplayer, ipod, itsmyblogandillbangonifiwantto, itunes, javascript, jobs, journal, justabitoffun, knitting, koken, leaflets, lego, leigh, less, lifecraft, lifeio, links, list, listening, lists, littlebigplanet, logo, logo and branding design, logo design, logos, london, londonbombing, mac, macbook, macmediacentre, macmini, macs, macworld, magazine, magazines, magazines.illustration, making, maps, mechanics, mediacenter, mediacentre, mediacentres, mellow, memes, memories, menus, merchandise, messages, metal, metro, microformats, microsoft, mkgn, mobile, modernart, moleskine, monkeybutler, moon, movabletype, movies, mozilla, mum, music, myob, natural, nerdery, newmusic, news, nintendo, nostalgia, nostradamus, notes, obituaries, offers, office, offscreen, omniweb, opacity, opensource, opera, organisation, os, osx, oxford, oxfordgeeknight, packaging, panic, panther, paper, parallels, pashley, penguin, people, personal, phantogram, photo, photography, photos, piecharts, pimp, pipes, plex, plugins, png, podcast, polygamy, posters, powerbook, practice, presentation, presentations, presents, press, print, printmaking, productivity, products, projects, propoganda, ps3, published, punditry, puppetry, questions, quicksilver, quotes, radio, radiohead, raf, railway, rants, rapha, recentwork, repair, resources, responsive, retorts, retro, review, reviews, riffs, righteousindignation, rip, ripoffs, rissington, rss, safari, saft, sage, samantha, sass, sauce, science, scifi, scrapbook, scripts, security, server, shelf, shiira, sideprojects, signage, simplenote, sites, siteskin, siteskins, sixties, skinning, skype, slides, slowcore, software, solutions, songbird, sony, sound, spam, speakers, speaking, sponge, spotify, spotlight, starflyer59, startrek, starwars, stationery, steel, stevejobs, store, stories, summerboard, surveys, svg, sxsw, syncing, tagging, talks, tasks, tattoos, tea, teasing, templates, ten, texpattern, text, texteditor, texteditors, textile, textpattern, thebeatles, theme, themes, theming, thenational, theory, tiger, time, timeline, tips, toys, tumblr, tv, tweed, typefaces, typography, ui, updates, updtes, userstyles, vans, vector, veer, versions, video, videos, vinyl, vw, wallpaper, web, webapp, webapps, webbies, web design, webfonts, webkit, website and logo design, webstandards, whitenoise, why, widgets, wifi, wii, windows, windows8, winter, wireframing, wishlists, wordpress, work, working, workshops, xhtml, xul, yojimbo, youtube, zengarden, zip

The Hickensian is the journal of Jon Hicks, one half of the creative partnership Hicksdesign. Take a look at the work we do.

AD by FUSION

Upcoming Talks

I sometimes pop up at conferences and waffle about design, icon creation in particular. Here's where I'll be next:

An Event Apart Chicago- "Icon Design Process" - 25-26th August 2014

Web Expo Guildford- "Icon Design Process" - 26th September 2014

playlist

See more on last.fm

Contact

Hicksdesign

73a High Street

Witney

Oxfordshire, UK

OX28 6JA

+44 (0)7917 391 536

Download vCard

Engine Room:

Hicksdesign is powered by Textpattern and hosted by the lovely boffins at Engine Hosting

Engine Hosting