A quick thanks to Josh Bunts who suggested this post on Go Media’s Facebook page. Technically, he asked for advice on “…document set up and color pallets.” I thought I should expand the post to speak generally about all things Illustrator pre-work.
1. When setting up your document specs, keep the end in mind
When creating a new Illustrator document, the very first thing you’ll be confronted by is the New Document (profile) window that asks you a bunch of questions. The important thing here is that you know what you’re designing for. Are you designing a web page or a poster? Is your design going to be viewed mostly online or in printed form? Once you know the primary way that your design will be used, here are my recommendations:
New Document Profile
Adobe has been kind enough to create document spec cheat sheets. Instead of making all the following decisions on your own, you can simply select a common-use profile. But none of these seem ideal to me, so I suggest you set this to “custom.”
Number of Art Boards
If you will need multiple art boards of the same size, go ahead and select how many you’ll need. A common example of this would be a multi-page brochure, or multi-page website design. If you’re planning on laying out anything over 12 pages you might seriously consider switching over to InDesign which is better suited for large documents. If you are setting up a document that will require multiple art boards of different sizes, I wouldn’t worry too much about this here either. You’ll need to set up those art boards once you’re in the document.
If you have multiple art boards Adobe wants to know how much space to put between them. Personally, I use lots of space around my art boards to put design elements I’m working with. So, I like at least 300pts (if not more.)
This is NOT column guides on your art boards, this is simply how Adobe arranges the art boards on your work area. This adjusts automatically based on the number of art boards. I typically leave this alone.
Obviously, this is the size of the art board. Here’s what you need to know. If you’re designing for print and require a bleed, you can either add the bleed dimensions directly to the art board or you can add a bleed dimension, and Illustrator will include the art in the bleed area when it exports. However, if you “Save For Web,” then it will not include that bleed artwork. As with the New Document Profile, Adobe has kindly provided you with a list of common art board sizes.
Width and Height
Obviously, if you’re creating a custom art board size, this is where you put it in.
Before I type in my custom art board size, I like to establish what units I’ll be working in. It’s just much easier for me to think of print dimensions in terms of inches and web dimensions in terms of pixels.
The orientation is established by the width and height you enter in. But if you decide to flip it, this is an easy way to swap those dimensions.
This is where you’ll enter in how much bleed you’ll need. For most printers this will be .125” (inches) on all four sides. Obviously, if you’re designing for the web you won’t need a bleed.
There is a little double-arrow to open the “Advanced” area, which I recommend.
This is probably one of the most important settings you’ll need to establish for your document. For print you’ll want CMYK. For web you’ll want RGB. If you’re doing something like branding where the design (a logo) will be used on both print and web, I would start with RGB. Of course, if you’re building someone a brand you’re going to need to establish RGB, CMYK and Pantone spot-colors for their company, but that’s another lesson.
This is the resolution at which Illustrator will render its effects – things like drop shadows. Although technically you shouldn’t really need anything over 72dpi for the web, I always set this to 300dpi. I am just never sure when I might want to use part of a design for print or decide to blow-up a part of the design.
Most of the time you’ll want to be in the default Illustrator view, but if you’re designing for the web and want to have a more realistic view of how your design will look once rasterized, the Pixel Preview Mode can be useful. There is also an overprint preview mode which, quite frankly, I never use and have a very difficult time imagining a scenario where you might need it, so I’ll skip trying to explain that in this article.
Align New Objects to Pixel Grid
If you’re designing for the web checking this off will force your vectors to align to the pixel grid. This helps keep your vectors pixel-perfect when they rasterize. Though you’ll also notice your objects snapping into locations that are not necessarily where you’re putting them.
2. Set up and save your preferred Workspace
When you’re working in Illustrator there are tons of tool panels (known as Windows) all over your screen. You probably know that you can open, close and move your tool Windows around, but did you know you can also save the way you arrange them? This is critical to my work flow. I know which windows I use most frequently, so I’ve systematically arranged them in just the right order. When you have your work space set up just how you like it click Window/Workspace/Save Workspace.
Then name it something like “Beachy_Print_Workspace.” You may find, as I did, that you’ll want to set up slightly different workspaces depending on the type of project you’re working on. Here is my default workspace set-up.
One item to take note of in my set-up here is that I’ve set up my own color swatch palette and called it Beachy. This is very easy to do. To set up your own custom color swatch palette just edit the normal swatches window until you have all the colors you like then open the drop-down menu and click Save Swatch Library as ASE…
The next time you create a new Illustrator document you will need to open your custom swatch palette by clicking Window/Swatch Libraries/User Defined.
You may also notice my Layers Window, which brings me to my next essential point:
3. Set up and use Layers!
Layers are one of the most important tools for managing your illustrator documents. It took me many years to grow an appreciation for Layers. But just like a computer, the wheel and fire – once you learn how to use them, you won’t imagine living without them. Here is a typical layer stack that I will create while working on a project. Sometimes I’ll get even more specific by setting up layers with names like “Header Art,” “Navigation” or “Footer.” Basically, any design element that I might want to design as a distinct unit can be put on its own layer. Then, as I work, I’m constantly locking and unlocking the layers. This allows me to easily manipulate the elements on the layer I’m working on without disturbing the elements on the other layers. You should really get into the habit of building well organized layers that have clear titles. I promise over your lifetime you will save yourself a lot of aggravation by making this a habit now.
4. Create a template.
You’ll notice that the top layer of my document is labeled “Template.” I always start by designing a template and locking the layer. I actually created tons of templates in advance and now I just open the appropriate template before I start each project. My templates for print projects look something like this: Solid black line for the exterior full-bleed area, then .125” inside of that I make a solid red line for the trimmed art area and finally, .25” inside of that I make a dashed black line for the “live area.”
When I’m working on web designs I typically start with a 960 grid template. You can download one here: 960.gs I normally expand the art board from 1020px wide to 1920px. I do this because I design all my web pages for a monitor that supports 1920px width. Sure, most people will never see the entire width of my designs. But if someone happens to have a monster monitor, I want their viewing experience to be as beautiful as possible. Of course, I keep all the live content within the 960 grid.
5. Link your photos
This little piece of advice doesn’t take place during the set-up, but will occur each time you place an image into your Illustrator file. Any time you place an image into Illustrator, you have two options. You can either embed the image or you can link it. Here is the Place window that will pop up when you go to add an image:
If you don’t check off this “Link” box, then Illustrator assumes you want to embed your image. When you embed an image it means that the photo’s data becomes part of the Illustrator file. When you link your images Illustrator does not embed the photo data. Instead, it just refers back to the photo file that is saved on your hard drive. Here are the reasons I believe linking is the right way to go versus embedding. First, it will keep your illustrator file sizes down. Second, when a photo is linked you can edit the photo outside of Illustrator and it will automatically update the image in Illustrator. Lastly, but most importantly, embedded images are known to corrupt Illustrator files. I’ve lost many Illustrator files because it had difficulty managing my embedded images. The only down side to linked images is that if you move your images on your hard drive, you’ll need to re-link them when you open your Illustrator file. But re-linking files, in my opinion, is a small burden when you consider the advantages.
6. When saving, uncheck “Create PDF Compatible File”
One of the great advantages of Illustrator over raster based software like Photoshop is the ability to keep your file sizes very small. But for some reason Illustrator, by default, creates a PDF compatible file when you save it. This essentially bloats your file size to something similar to a raster file. While you may want to use this option when saving the final file that you give your client or send to a printer, you don’t need it for day-to-day saving. So long as you’re not done and don’t plan on trying to open the file in some alternative software, uncheck the Create PDF Compatible File option when saving.
So, that’s it – short and sweet. I hope these tips will help you when working in Adobe Illustrator. It’s certainly my favorite program and the more you use it, the more you’ll love it. I promise!
Here’s a nifty little Adobe Air application that allows you to look up keyboard shortcuts for any Adobe software. Well, at least Illustrator, Photoshop, InDesign, Flash, Dreamweaver, Soundbooth, Fireworks, Contribute, After Effects, Premiere Pro, Encore and Acrobat Pro. The shortcuts are only for the CS4 versions of these applications.
Adobe Shortcuts App runs on Adobe Air, so it’s cross-platform (Mac, Windows, Linux).
Launch the app, then select your preferred software from the top row of familiar icon buttons. Below you’ll see three tabs for Essentials, My Favorites, and All Categories. Be sure to click the speaker icon in the bottom-left to turn off the “interesting” sound effects…
Best of all, it free from the Adobe Marketplace. Download the Adobe Shortcuts App here.
(via John Nack, Adobe Photoshop’s Principal Product Manager)
If you’re a PC user, reading George Coghill’s fantastic “10 Great Time Saving Mac Utilities for the Graphic Artist” may have caused a twinge of jealousy.
Many of these programs have been part of my workflow for a year or more. Several others are great suggestions from fellow Go Medians.
Okay then, let’s start off with one of my all-time favorites!
1. Thumbview • Free!
Last summer I shared some tips for getting the most out of for Adobe Bridge and it’s handy ability to show live previews of all types of Adobe file. However, it’s no secret that Bridge uses a ton of RAM, and it may not even be part of your workflow.
Enter Thumbview – a small app that brings thumbnail previews back to PSDs in Windows Explorer (sorry Illustrator fans, I’m still looking for an .Ai equivalent).
Thumbview is especially handy in the Photoshop’s Open/Save dialog.
2. FolderMenu • Free!
When Microsoft released Windows Vista one of my favorite improvements was Explorer’s customizable “Favorite Places” panel; Suddenly clicking 5 or 10 times from the open/save dialog became a thing of the past. Well, the AutoHotKey powered script (more on AHK later) FolderMenu is a supercharged “Favorite Places”.
FolderMenu creates customized a list of frequent folders that appears at the tip of the mouse with a quick middle click. And yes, the menu works in pesky open/save dialogs, which will save precious minutes of the workday.
FolderMenu can display shortcuts to your most frequent files, programs, and registry keys.
Power user tip: Ctrl+clicking a folder in FolderMenu will display a list of child folders, bypassing explorer all together! Using this tip, you can navigate right to the final file without ever opening a window.
3. PrtScr • Free!
PrtScr is a remarkably free screen capture & annotation tool that stands up to it’s commercial competitors quite well. PrtScr has easy but powerful caption & save options, annotation, multiple-monitor support, and image scaling.
4. Ditto • Free!
Ditto is lightweight free software that gives you quick access to recently copied text and images.
With Ditto you’ll be able to copy multiple fields from the source window by repeatedly hitting ctrl+c to load up Ditto’s history. Then in the target window, you can quickly activate copied items & paste them into separate fields.
Honestly, Ditto is easier to use than explain. If your fingers spend a lot of time hovering over Ctrl+C, then give Ditto a try.
5. Autohotkey • Free!
Autohotkey is is the six-cylinder engine powering a few of the productivity tools I’m discussing today. It’s a scripting language for Windows that gives less technical folks like me the power to write time-saving scripts.
Spend a few minutes reading the AutoHotKey quickstart guide, and you’ll be well on your way to writing a script. For example, a script can handle text expansion, or open multiple programs and close all other programs with a key combination.
6. Notepad2 • Free!
Notepad2 is a no-frills, fast, and free text editor with syntax highlighting. It’s also the editor of choice for Dave Romsey, Go Media’s code-zone crusader.
7. Onenote • $99
Onenote may be the most forward-thinking software Microsoft has released in years. It’s an organic re-creation of a spiral notebook, but with all the power & usability expected from modern computing.
In less words, Onenote is a second brain: a repository of snippets, tips, links, images, outlines, to-do lists, research, screen-grabs, code – you name it. Give the trial version a test run.
8. Multimon Taskbar • Free!
Setting up dual (or heck, triple!) monitors is a great way to boost computing productivity, especially as a designer. Nonetheless, the more pixels there are to manage, the more crowded the taskbar becomes.
MultiMon helps pixel overload by spreading the taskbar across multiple monitors. The nicest feature is that the second monitor’s taskbar shows only the active windows that appear on that monitor!.
9. Taskbar Shuffle • Free!
In a similar vein, Taskbar shuffle addresses many common complaints waged against the Windows Taskbar. Taskbar shuffle let’s you drag ‘n drop taskbar buttons (of course), but it can also close a program or window with a middle click, like a Firefox tab.
Image courtesy of PC World.
10. CCleaner • Free!
Gina Tripani of Lifehacker wrote that CCleaner “Decrapifies your PC”, allowing it to run faster & smoother. Over time, a PC collects a fair amount of junk files & registry keys that can lead to sluggish performance. CCleaner is no-nonsense, spyware free, and does its job very well.
Bonus: Zune Theme for XP • Free!
Occasionally I become bored using a PC, even if it is tweaked out & running smoothly. If you’re tired of the playground blue or dull olive XP themes, try out the official Zune Theme from Microsoft.
One little app that I couldn’t live without is FileBox Extender for Windows. Fellow Go Media designer @Adam_Wagner originally introduced it to me last year. It’s a free, lightweight app for Windows that I use to quickly access frequently used directories.
The description on their site says:
FileBox enhances Windows by adding several advanced functions to the standard Open File and Save File dialog boxes. (Note that if a program uses its own “private” dialog boxes for these functions, you won’t see our FileBox buttons, sorry.)
So for instance, if I’m always going into our Vector Packs folder while working on a project, it can get tedious having to navigate through all of Go Media’s folder structures on our server. And when I’ve had some coffee, my mouse clicking is a little erratic and often find myself glazing over as I scan the hundreds of folders in our client directory.
Another quick tip is to simply start typing the first few letters of the folder you’re looking for and it should snap you right to it. I’ve watched people hunt and hunt for folders for at least 10-20 seconds of “dead air” time and it’s painful to watch.
One annoying thing with FileBox is that it doesn’t really work well when saving attachments from Outlook. I will go to save some attachment from my email, and use FileBox to select a favorite folder and *poof* my window disappears as it immediately saved it right to the first folder I selected with FileBox. That is mostly just an annoyance with Outlook though, as it’s the only program that seems to have problems with it.
FileBox is cool, but maybe there is something out there that does the same thing but better?