Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Even though traditionally Illustrator has been used as a logo designing/typesetting tool for print designers, the vector graphics that you create inside of Illustrator are perfect for the web as well. This is especially true because the web is so varied now in terms of screen sizes and devices used to access the content. So we need to be able to create highly flexible graphics and mockups, and Illustrator works nicely for that purpose. In this movie, I'll show you how to get started using Illustrator for web purposes, let's take a look. I'll go up to the File menu and choose New, I'll call my document sample_web and directly underneath there, I can choose a Profile.
For this profile, I'm going to select from the Web profiles. Once I select Web profile, you'll notice the size automatically changes right here. The default web size in Illustrator CS6 is 960 pixels by 560 pixels. You can drop this down though and you can change it to anything from 640x480, all the way up to 1280x800, but you're not just limited to these sizes either, you can actually change them right here in the Width and Height box. So if I know I want this to be 960 wide, but I need it to be 1000 pixels tall, I can simply change it like that and it automatically applies.
Now when you're working with graphics that are going to be put on the web, chances are you're going to leave the units in pixels, because the web is based upon pixels because you view everything on a screen, so therefore, inches are kind of irrelevant. You also don't need to worry about bleed either, because there is no bleed on the web. There is nothing to trim, it's all right there on the screen. So again, this is an option you don't need to worry about. In the Advanced section down here at the bottom, which should be collapsed by default, you'll notice that you see information like Color Mode, which is RGB, which stands for red, green and blue.
These are the colors that are used to makeup all the colors you see on your computer monitor or even your television set. When you're designing graphics for the web, RGB is the way to go. You'll also notice that the PPI setting for the raster-based effects inside of Illustrator are set to 72, that's because the graphics that you see on a screen, on a web site are always at 72 pixels per inch, because that's the native resolution of most monitors. You can also choose to align it to the pixel grid, which by default on a web document is set to Yes, because aligning thing to the pixel grid helps to eliminate anti-aliasing.
Let's go ahead and expand this Advance dialog box again, and show you that you can actually change the Color Mode, the Raster Effects settings and the Preview Mode, as well as the alignment to the Pixel Grid if you choose to. However these are the default options for web and they are also my recommended options for creating web graphics as well. So I'm simply going to leave those alone and then I'll hit OK. Once I hit OK, it creates my new document at 960 pixels wide by 1000 pixels tall. You'll also notice if I bring up my rulers with Command+R on the Mac, Ctrl+R on the PC, that these rulers are set to Pixels, which is default unit that I created my document with.
Any time you create a new document inside of Illustrator the units of measurement in the ruler should correspond to the units of measurement that you setup in the new document dialog box. At any time if you wish to change that unit of measurement, you can do so by right-clicking the ruler and picking the unit of measurement that you want. Let's click away from that. As you can see, it doesn't matter if you're building a full scale web site or even a mobile application. Illustrator allows you to customize the document you're creating for whatever screen-based project you might be working on, whether that's going to the web, a tablet, a phone or any other type of device.
Illustrator is certainly a great option for creating screen graphics, because it allows you to create these flexible objects that can go between any screen anywhere.
Get unlimited access to all courses for just $25/month.Become a member
117 Video lessons · 43261 Viewers
119 Video lessons · 54479 Viewers
65 Video lessons · 14685 Viewers
113 Video lessons · 82964 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.