Illustrator CS5 New Features
Illustration by John Hersey
Watching:

Creating pixel-perfect web graphics


From:

Illustrator CS5 New Features

with Mordy Golding

Video: Creating pixel-perfect web graphics

Many designers choose to use Illustrator for creating Web graphics and any graphics destined to be displayed on a screen. However, there are some challenges in creating pixel-perfect Web graphics. It seems that when you create graphics inside of Illustrator and then you export them for use on the Web, artwork, at times, appears to be fuzzy or soft. The reason for this is something called anti-aliasing. Because screens display artwork at a much lower resolution than you would see in print, artwork goes through this process called anti-aliasing that slightly blurs the edges of graphics to avoid a jagged edge appearance.
Expand all | Collapse all
  1. 9m 0s
    1. Welcome
      1m 21s
    2. Comparing Illustrator CS4 and Illustrator CS5
      7m 39s
  2. 25m 53s
    1. Defining perspective grids
      7m 48s
    2. Drawing artwork in perspective
      8m 46s
    3. Mapping flat artwork to perspective grids
      9m 19s
  3. 15m 36s
    1. Creating variable-width strokes
      4m 26s
    2. Using variable-width profiles
      4m 26s
    3. Creating perfect dashed lines
      3m 30s
    4. Easily adding arrowheads to strokes
      3m 14s
  4. 16m 8s
    1. Simulating real brush strokes with the Bristle brush
      11m 46s
    2. Using enhanced art and pattern brushes
      2m 55s
    3. Applying variable-width settings to brushstrokes
      1m 27s
  5. 12m 10s
    1. Drawing Behind and Draw Inside Drawing modes
      4m 17s
    2. Creating complex art easily with the Shape Builder tool
      6m 5s
    3. Easily joining multiple paths
      1m 48s
  6. 11m 25s
    1. Working with symbols more easily
      6m 56s
    2. Using 9-slice scaling options with symbols
      4m 29s
  7. 7m 55s
    1. Using the new Artboards panel
      4m 13s
    2. Setting individual artboard rulers
      2m 35s
    3. Printing artboards more easily
      1m 7s
  8. 11m 47s
    1. Creating pixel-perfect web graphics
      3m 43s
    2. Creating crisp readable text for the web
      1m 58s
    3. Quickly exporting individual slices
      1m 50s
    4. Integrating with Adobe Flash Catalyst
      4m 16s
  9. 10m 11s
    1. Select artwork through other objects
      2m 36s
    2. Using new paste commands
      1m 57s
    3. Applying resolution-independent raster effects
      2m 55s
    4. Specifying transparency within gradient mesh
      1m 8s
    5. Creating editable trim marks
      1m 35s
  10. 17s
    1. Goodbye
      17s

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now
please wait ...
Watch the Online Video Course Illustrator CS5 New Features
2h 1m Intermediate Apr 12, 2010

Viewers: in countries Watching now:

In Illustrator CS5 New Features, author Mordy Golding discusses noteworthy features and improvements in the latest upgrade of Adobe's vector graphics editor and drawing program. This course includes overviews of perspective drawing, expressive bristle brushes, and variable-width strokes, as well as anti-aliasing features for web design, a new Artboards panel, improvements to symbols and drawing modes, and integration with Adobe Flash Catalyst. Exercise files are included with the course.

Topics include:
  • Creating complex art from basic shapes with the Shape Builder tool
  • Transforming flat artwork using perspective grids and vanishing points
  • Creating variable-width strokes
  • Controlling dashed line length, corners, and gaps
  • Creating original brushes using the Brushes panel
  • Adding arrowheads to strokes
  • Creating web-ready graphics, text, and slices
  • Integrating with Flash Catalyst
Subject:
Design
Software:
Illustrator
Author:
Mordy Golding

Creating pixel-perfect web graphics

Many designers choose to use Illustrator for creating Web graphics and any graphics destined to be displayed on a screen. However, there are some challenges in creating pixel-perfect Web graphics. It seems that when you create graphics inside of Illustrator and then you export them for use on the Web, artwork, at times, appears to be fuzzy or soft. The reason for this is something called anti-aliasing. Because screens display artwork at a much lower resolution than you would see in print, artwork goes through this process called anti-aliasing that slightly blurs the edges of graphics to avoid a jagged edge appearance.

Now, traditionally, with vector graphics, we know that we can zoom into artwork. For example, I'll zoom in really close in this area, and I'll always see nice, clean, sharp graphics. However, Illustrator also features something called a Pixel Preview mode that allows you to see what your artwork looks like after it goes through this anti-aliasing process. It's a great way for you to see what your artwork looks like when it's going to be displayed on the Web. To turn that Preview mode on, you would to go to the View menu and choose something called Pixel Preview. In doing so, you'll see the actual pixels and, more importantly, the result of the anti-aliasing.

What was a clean sharp line before has now been softened, giving it a blurry appearance. Well, several new features have been added now to Illustrator to help you with this. First of all, notice that you can actually now view the pixel grid. When you're in Pixel Preview mode, as you zoom into artwork, you'll actually see exactly where each pixel is. As you zoom out, at different zoom levels, you'll see that that grid disappears. It only appears when you zoom in closer to your artwork, similar to the way that Photoshop works. However, while this clearly displays where the problems are, it doesn't really help you fix them.

And that's where this next feature comes into play. I'll go ahead now and select this rectangle right here. I'll go to the Window menu and open up my Transform panel. Normally, you'd use the Transform panel to adjust the coordinates or the width and height of your artwork. But you'll notice that there's a new option at the bottom of the Transform panel called Align to Pixel Grid. When you have artwork selected and you choose this option, Illustrator will automatically snap your artwork directly to the grid itself. In doing so, you can see that the anti-aliasing goes away, and I get a nice, clean, sharp line. If I zoom out just a bit here, you'll see that this artwork looks sharp and clean as opposed to the others, which look a little bit blurry and fuzzy.

You can certainly just select all of your artwork at once and turn that option on to apply it to all of your artwork. This ensures that your artwork will look crisp and clean when exported for the Web. This is a fantastic feature that you can apply on an as-needed basis for each piece of artwork. But you may find it tedious to apply this setting to all of your artwork. Let me go ahead and select all this artwork now and actually disable that option and show you that there are two other ways, inside of Illustrator now, to automatically make sure that your artwork is going to be aligned to that Pixel Grid. The first way is via the use of symbols.

If you select your artwork here - I'm just going to go ahead and deselect the background here so just this artwork you selected - I can turn that into a symbol, but notice there's an option here called Align to Pixel Grid. By choosing this option, I'll be assured that no matter where I place that symbol, it will always snap to that pixel grid, ensuring the best anti-aliasing results. I'll click OK, and I'll show you one other example of how Illustrator can ensure that your artwork is always going to be perfect. I'm going to go to the File menu here and choose to create a new document. In the New Document dialog box, if I click on the Advanced button, I'll see an option here called Align New Objects to Pixel Grid.

If I check this box, I'm ensured that every piece of art that I draw in that document will always snap perfectly to the pixel grid. You'll notice if you go to the New Document profile and choose the Web profile, that option is automatically checked. So, really, any time that you create a new Web document inside of Illustrator, you're assured to get nice, crisp and clean graphics that will display beautifully in a Web browser or any computer screen.

Find answers to the most frequently asked questions about Illustrator CS5 New Features .


Expand all | Collapse all
please wait ...
Q: In the “Mapping flat artwork to perspective grids” video, directions for moving a box in a perpendicular direction say to use the Tilde key. However, upon attempting to move the box using this method, the box continues to move in the same plane, not in a perpendicular fashion. Is the technique in the video incorrect?
A: Adobe changed this keyboard shortcut just before the final release. The shortcut is the "5" key. The video tutorial has been updated to reflect this.
 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Illustrator CS5 New Features.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.