Adobe Illustrator - Web vs. Print Workflow

This guide will show you the differences between setting up a document for print versus setting a document up for web.

Create a file for Print


  1. Go to the File menu and choose New.
  2. The new document window will appear, give the file a name.
  3. Directly underneath that there is a profile selector. The profile selector allows a choice between print, web devices, video and film, and basic RGB.
  4. To create a print document the print profile is the way to start. This will provide access to a lot of different options and set ups that correspond to a print production workflow.
  5. Underneath that determine the number of art boards. Just think of art boards as pages when it comes to a print composition.
  6. For the size, pick between some of the presets in the dropdown menu
    • Either letter, legal, tabloid, or the A and B sizes. Or specify a custom size in points or switch to inches or another unit of measurement.
  7. Choose a  page orientation
  8. Underneath that there is something called bleed.
    • Bleed is the extra area around the outside of a print document so that the artwork can be printed edge to edge without any fear that when it is trimmed there are any gaps.
  9. The color mode for print document needs to be CMYK. CMYK stands for cyan magenta yellow and black, which corresponds to each one of the different printing plates that is used in the production print process to recreate the full spectrum of color.
    • It's always best to start in CMYK first rather than switch later.
  10. In the preview mode settings, set this to pixel or over print preview or it can just be left on the default. By default, this is just going to be the General Preview mode of Illustrator. Overprint Preview, gives a good idea of how inks are going to interact with one another. Especially when it comes to spot colors and transparency.
  11. The final option here is the Align New Objects to Pixel Grid. This is especially important in web documents, but not so much when it comes to print.
  12. Click OK

Create a file for Web


The process for creating graphics for the web, is very similar to that of creating documents for print.
  1. Go to the file menu, choose New.
  2. Inside of the new document dialogue box change the profile to web.
  3. Change the size, and these are based on standard web graphics sizes that might be used. However, in a web based workflow, the size is never really set in stone. So depending on the type of project these numbers will undoubtedly change.
    1. Customize the size just by typing in the numbers in the width and height box right here.
    2. The units are going to be in pixels for these types of documents.
      • Pixels are the universal unit of measurement for the web and screen based graphics.
  4. At the bottom there are advanced options that correspond to web based workflow as well.
  5. The color mode has been automatically switched to RGB.
  6. Raster Effects by default is set to 72 pixels per inch which is perfect.
  7. Preview Mode is set to default, and also at the bottom, The checkbox that says Align New Objects to Pixel Grid is checked by default.
    • If this box is checked, that means that objects inside of the illustrator document will automatically snap to the invisible pixel grid that exists inside of Illustrator.
  8. Choose between all these different sizes here, including iPad Air, iPad Mini, iPhone 5s, Nexus 5, Nexus 7, Kindle Fires, Galaxy S5, and even the Microsoft Surface Pro 2. In order to create a document that corresponds to one of these screen sizes, just select it from the list. Illustrator will automatically determine the proper dimensions for that screen size.
  9. Or set a customized size by typing the dimensions into the window.
  10. Click OK, it's going to create a brand new document at that exact screen size. Making it easy to create mockups for devices or mobile responsive design websites.

In any case, the design process for web is much like that of print. There's just a few subtle differences to be aware of.

If you need further assistance please contact the Information Technology Help Desk at 920-424-3020 or