By Amy Hood
07/15/2014
Tutorials

Design Workflow How To: Efficiently Save your Final Logos

how to save logos blog header1 720x480 1

Oh logo work; it can offer you more drama and ups and downs than a Bachelorette storyline. But it’s worth it! After all the sketching, inspiration hunting, rounds of revisions, client battles/victories and last little tweaks, you’re ready to save that bad boy and brag about it in your portfolio already. Here’s how we save our logos once we’ve gotten client approval. It’s a way that we have found works pretty quickly and efficiently for us.

 

Step 1.

Open up your Illustrator document and save the final logo document as CompanyName-Logo.ai within a new folder that will house all the final file types to be delivered to the client.

Step 2.

Organize all your revision round docs, sketches, scans, fonts, inspiration and sweat and tears. Delete what you no longer need, and store whatever unchosen options or prep work you want to keep into a folder labeled CompanyName_Archive. Put every single file that is not the final logo in there so that your final main folder containing all final files for the client (and your records) is nice and tidy.

Step 3.

Return to your final logo Illustrator file and open ‘er up. Clean out any unnecessary artboards or logo options that are in the margins and keep only your final variations in the doc.

 

 

Step 4.

Step41

Make sure that your final logo is simplified into one or a few compound paths (depending on if it’s one color or multiple colors) and that all fonts are outlined. Select all and hit Cmd + Shift + O to outline all your fonts. To outline any strokes, go to Object > Path > Outline Strokes. Then, select all of the pieces of the logo that are the same color, go to your Pathfinder panel, and click Unite. You want to essentially end up with a solid, single element for all the peices that are the same color. This helps clean up objects, and preserve the integrity of your logo design when it’s out in the world and out of your hands. You might also find some elements that were meant to be one color, but have slightly varied colors applied (100%K versus rich black, etc). This step can help reveal those inconsistencies so you can fix them for the final version. Repeat for as many logo variations as you may have. Sometimes when you unite elements using the pathfinder, the color fill/stroke is lost in the process. If that happens, just reselect the compound path and reapply your desired final color.

 

Step 5.

Step51

Place each logo variation into its own artboard in the Illustrator document. I like to make all the artboards the same size, preferably an average integer (none of this .1667 nonsense) with some breathing room around the logo. This one happens to be 3.25 inches by 1.25 inches. Our logo variations almost always consist of a black version of the logo, the color version, and a white reverse version of the logo (so you can see the logo, we’ve included a black background on our white reverse option, although we normally would only include the white logo itself). For this example, there is no color version, so we just have two artboards.

 

 

Step 6.

Step61

Center your final logo (which should be a nicely United piece by now) in your artboard by using your Align panel. You’ll want to click on Horizontal Align Center and Vertical Align Center.

 

Step 7.

Step71

Now that every logo variation is separated and centered, you can save your various logo formats. Special Note: before you start saving, name all of your artboards as you’d like them to appear in the filename. When you export, the filename inherits the artboard name. This will save you some steps at the end. Back to saving. At Hoodzpah, we save every logo as the following file types:

  • .eps
  • .jpg
  • .png
  • and .tif

We like saving these varied options so our clients (and ourselves) have any format we might need ready to go. I like to create a folder for each file format to keep things neat.

Step 8.

Step81

Saving as .eps. You should still be in your master Illustrator doc. Make sure you get rid of any black backgrounds you might have behind a reversed logo for this step. Since every variation has it’s own artboard, you can just Save As, select .eps and checkmark “Use Artboards” and make sure your radio button for artboards is set to “All”.  This will export each artboard individually and you can rename the files a bit more descriptively after Illustrator does the heavy (& repetitive) lifting for you. Create an “EPS” sub-folder in your final logo folder and save your new .eps files here. Click “save” and Illustrator will export each variation as an .eps. Sidenote: Generally speaking, Illustrator is pretty smart and you don’t need to mess with the default settings for most of the following export processes.

 

 

Step 9.

Step91

Saving as .png. Go back to your original master Illustrator doc with all your logo variations. While that black background is away, let’s finish saving our transparency-enabled formats. To save a .png, go to File > Export… Select PNG (png) as your format, checkmark “Use Artboards”, and set your radio button to All. Create a “PNG” sub-folder in your final logo folder and save your new .png files here. Click Export. Set your Resolution to Screen (72 ppi) and your background to Transparent and click ok. Boom! Rename your files to be descriptive.

 

 

Step 10.

Step101

Saving as .jpg. Go to your original master Illustrator doc. For .jpgs you’ll either skip the reverse white versions of your logos (because Jpegs are flat, not transparent friendly, so nothing will show up) or add a colored background behind these options so they will show up. To create the .jpgs of all your logo options, go to File > Export… Select JPEG (jpg) as your format, checkmark “Use Artboards” and set your radio button to “All” (or to only the artboards with the black or colored options, if you want to skip the reverse white options). Create a “JPG” sub-folder in your final logo folder and save your new .jpg files here. Click Export. Set Quality to Maximum. Set your Resolution to High (300 dpi) and click ok. Whammy! Rename your files to be descriptive.

 

Step 11.

Step112

Saving as .tif. Let’s do the dance again! Return to your original master Illustrator doc. Go to File > Export… Select TIFF (tif) as your format, checkmark “Use Artboards” and set your radio button to “All”. Create a “TIFF” sub-folder in your final logo folder. Click Export. Set your Resolution to High (300 dpi) and click ok. Wham Bam Thank You Ma’am!

 

 Your final folder should look something like this:

FinalFolder1

A place for every thing and every thing in its place. Zip those lovelies up and send to your happy client! We usually send the client a file type 101 pdf as well. This explains to them when and why to use each file format version of their logo (Example, which types are optimal for print vs web, which file is editable, etc). See how much time you saved by batch exporting rather than having a separate doc for each logo variation? Got a better way to do things? Let us in on the secret!