Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Choosing the right color management settings

From: Illustrator CS5 for Web and Interactive Design

Video: Choosing the right color management settings

It's time for us to have the talk. You know the talk about color management. I know it's not a fun topic to talk about, but if we mention some things right now and we understand some concepts it'll save us a lot of grief later. Now, for several versions now Adobe has done a great job on having a basic color management engine that applies to all of the design applications, meaning that when I create artwork in Photoshop, or Illustrator, or InDesign, my colors all look the same throughout those applications.

Choosing the right color management settings

It's time for us to have the talk. You know the talk about color management. I know it's not a fun topic to talk about, but if we mention some things right now and we understand some concepts it'll save us a lot of grief later. Now, for several versions now Adobe has done a great job on having a basic color management engine that applies to all of the design applications, meaning that when I create artwork in Photoshop, or Illustrator, or InDesign, my colors all look the same throughout those applications.

However, I want to talk about some of these settings because it might make sense for you to change some of them to get a better experience when designing for the web. Now, it's important to realize what you see on your computer screen may not be the exact same thing that other people see when they view a web site on their computer, or for that matter when they view your web content on some other kind of mobile device. For example, in general, PCs or Windows- based computers have a different gamma level and that results in artwork appearing a little bit more darker on those devices.

In addition, while some web browsers do support the concept of color management, the reality is that most of them don't. So if you're seeing vibrant colors on your computer screen it's certainly possible that when someone else views their graphic on their computer those same colors may appear washed out. Now, we already know that web graphics are RGB. That's the web color space that we work inside of. However, there are different gamuts or ranges of colors that exist inside of RGB. For example, there is something called Adobe RGB, which happens to be a very large gamut of color, but then there is also something called sRGB.

In fact, this smaller gamut of sRGB is really the gamut that is used throughout the web. So if you work inside of sRGB you're ensured that what you see on your computer screen will match pretty close to what other people see on their devices. In fact, by default Illustrator even converts all of your artwork to the sRGB workspace. For example, if you go to the File menu and choose Save for Web & Devices, you can see over here on the far-right there is a little pop-up menu and if I click on it, you can see there is a setting here that says Convert to sRGB.

This is why some people seems to complain when they're working inside of Illustrator. They may have their color space set to the bigger gamut of Adobe RGB and then when they choose Save for Web or they export to the web they see a color shift occurring. That's because they are seeing their artwork go from the richer Adobe RGB workspace to the sRGB workspace. Now, we really want to keep our artwork set to sRGB. What we want to make sure that we're doing those that when we work inside of Illustrator we're also working inside of sRGB, and that will set our expectations correctly.

This way what I see as I am designing and working inside of Illustrator is representative of what I will expect to get when I export that artwork eventually to the web. So I'm going to click Cancel here and let's open up our color management settings. I'm going to go to the Edit menu and I'm going to choose Color Settings over here. One of the nicest things that Adobe started doing way back inside of the CS2 versions is they've created a way for all the Adobe applications to talk to each other, so they share the same color management settings. As you can see, over here I have an icon and indicates that all of my applications are currently synchronized using the same color settings for consistent color management.

This is a good thing. However, by default Adobe chooses something called North America General Purpose 2. Now, remember, Adobe doesn't know what type of artwork or what type of design work that you do. They just sell shrink-wrapped software so they kind of design their applications to appeal to the lowest common denominator. That so we get this general-purpose setting. You can see over here that where it says Working Spaces, whenever I create an RGB document, Illustrator is going to be using the sRGB workspace. And whenever I create a CMYK document, I'm going to use the SWOP v2 workspace.

So this is actually great because this means when I create a new RGB document, in this case here a web document, I'm already going to be working in sRGB, which is great. The thing to look at though is this one here on the bottom where it says Color Management Policies. Notice over here where it says RGB. When I'm working in RGB it's going to Preserve Embedded Profiles. This means that if I were to place an image inside of my design-- for example, like I have right over here. I have placed this photograph into Illustrator. This photograph originated inside a Photoshop.

It's entirely possible that inside of Photoshop that document was actually created inside of the bigger gamut or the Adobe RGB gamut. Well, since right now Illustrator is set to Preserve Embedded Profiles this means that that image would maintain its profile when I embed that image into Illustrator, so that image could still be using the Adobe RGB workspace. So I will see color shifts when I now go ahead and export this for the web. Again, it just means that what I'm seeing as I'm working inside of Illustrator won't ultimately match what I'm going to see on the web.

If we go back to the Settings over here we can see that there are other ones. For example, a setting called North America Prepress. This is a setting that you might use if you don't do any web work at all. You're simply a print-based designer who always creates artwork that will appear in print. But you'll notice that there is another setting here called North America Web/Internet. If I choose this option, these settings stay the same. I'm still working in the sRGB workspace when I'm using RGB. However, notice that where it says Color Management Policies now, for RGB it says Convert to Working Space.

This means that whenever I place a photograph into my document, in this case this piece right over here, even if this was created in the Adobe RGB workspace it will automatically get converted to the sRGB workspace when I bring it into this document. In this way what I see inside of Illustrator is always going to be sRGB and it'll always be representative of what I'm going to eventually see on the web. In other words, it just sets my expectations correctly. There are some check boxes here, for example, whenever there is a Profile Mismatch. In this case, if the image does have a profile for the Adobe RGB workspace I'll get a message that says that there is a profile mismatch and it'll ask me if I want to convert it to the sRGB workspace.

The truth is I always wanted to do that so I'm simply going to go ahead now and uncheck these options. So here is the thing. If you are a designer who purely works in web design, you don't do any print work at all or very limited amounts of print work, then using these settings is probably best for you. However, if we're the kind of designer who basically splits your time between both print and web design, then you may want to stick with a general-purpose setting. In fact, that's what I usually do, but when I'm working with my photographs inside of Photoshop I always make sure that if I know that those graphics are going to go to the web, before I place those images into Illustrator when I'm still inside of Photoshop I make sure that I convert my artwork to the sRGB workspace then.

That way I know that all of the art that I eventually place and all of the photographs that I eventually place into my layout inside of Illustrator will always be within the sRGB workspace. This way my expectations are set correctly, I don't see any color shifts when I export my artwork out of Illustrator for the web, and ultimately, I know that what I'm seeing on my screen as I start designing inside of Illustrator is what others you're going to see when they view that content on their devices.

Show transcript

This video is part of

Image for Illustrator CS5 for Web and Interactive Design
Illustrator CS5 for Web and Interactive Design

74 video lessons · 23821 viewers

Mordy Golding
Author

 
Expand all | Collapse all
  1. 6m 56s
    1. Welcome
      1m 33s
    2. Choosing Illustrator for web and interactive design
      2m 54s
    3. Illustrator and the web design workflow
      2m 7s
    4. Using the exercise files
      22s
  2. 40m 9s
    1. Pixel dimension vs. resolution
      4m 14s
    2. Pixel Preview mode and anti-aliasing
      5m 39s
    3. Taking charge of anti-aliasing
      5m 27s
    4. Choosing the right color management settings
      7m 25s
    5. Setting up important preferences
      6m 22s
    6. Setting up a workspace optimized for web design
      11m 2s
  3. 54m 5s
    1. Using the Web document profile
      3m 39s
    2. Creating custom document profiles
      9m 38s
    3. Using Illustrator's free web templates
      2m 33s
    4. Creating a sitemap or wireframe
      2m 50s
    5. Setting up an entire web site
      9m 33s
    6. Setting up a grid
      10m 37s
    7. Setting up an online ad campaign
      8m 13s
    8. Setting up icons for iOS
      2m 24s
    9. Setting up mobile content with Adobe Device Central
      4m 38s
  4. 32m 22s
    1. Understanding web-safe colors
      11m 50s
    2. Limiting the Color Guide to web-safe colors
      4m 53s
    3. Using Recolor Art to convert art to web-safe colors
      4m 54s
    4. Getting color inspiration from Adobe Kuler
      6m 48s
    5. Using Recolor Artwork to modify colors across a site
      3m 57s
  5. 56m 54s
    1. Using the Save for Web & Devices feature
      6m 44s
    2. Understanding the GIF file format and its settings
      10m 20s
    3. Understanding the JPEG file format and its settings
      7m 39s
    4. Understanding the PNG file format and its settings
      3m 21s
    5. Understanding the WBMP file format and its settings
      1m 18s
    6. Understanding the SWF file format and its settings
      4m 13s
    7. Understanding the SVG file format and its settings
      3m 41s
    8. Adjusting the dimensions of a graphic
      4m 46s
    9. Optimizing files to a specific file size
      4m 5s
    10. Modifying Save for Web & Devices output settings
      6m 51s
    11. Previewing content in Adobe Device Central
      3m 56s
  6. 56m 6s
    1. Setting point type in Illustrator
      4m 11s
    2. Setting area type in Illustrator
      5m 20s
    3. Formatting text quickly with paragraph styles
      14m 39s
    4. Overriding formatting with character styles
      3m 2s
    5. Controlling text anti-aliasing
      4m 50s
    6. Simulating the CSS box model
      11m 14s
    7. Adding cool reflections to text and graphics
      8m 26s
    8. Applying settings quickly with Graphic Styles
      4m 24s
  7. 35m 56s
    1. Understanding the concept of slicing
      3m 22s
    2. Creating slices manually
      4m 26s
    3. Creating slices from guides
      2m 45s
    4. Creating slices from objects
      7m 33s
    5. Understanding the different slice types
      4m 20s
    6. Applying settings to slices
      9m 20s
    7. Creating hotspots with image maps
      4m 10s
  8. 23m 35s
    1. Exporting static SWF files from Illustrator
      3m 35s
    2. Animated SWF: Converting Illustrator layers to SWF frames
      4m 3s
    3. Animated SWF: Using blends to define motion
      8m 35s
    4. Animated SWF: Adding static artwork to an animation
      3m 24s
    5. Animated SWF: Controlling time within an animation
      3m 58s
  9. 17m 13s
    1. Preserving slices and structure with PSD export
      6m 10s
    2. Working with Photoshop Smart Objects
      4m 35s
    3. Sharing color swatches between Illustrator and Photoshop
      2m 52s
    4. Generating an animated GIF file with Photoshop
      3m 36s
  10. 7m 28s
    1. Exporting HTML from Illustrator for use in Dreamweaver
      3m 31s
    2. Exporting CSS and DIVs from an Illustrator layout
      3m 57s
  11. 12m 37s
    1. Moving art between Illustrator and Fireworks
      6m 25s
    2. Using dynamic shapes from Fireworks
      3m 48s
    3. Sharing color swatches between Illustrator and Fireworks
      2m 24s
  12. 16m 7s
    1. Building files for use in Flash Catalyst
      4m 28s
    2. Creating a new Flash Catalyst project from an Illustrator file
      3m 40s
    3. Copying and pasting artwork between Illustrator and Flash Catalyst
      2m 4s
    4. Roundtrip editing between Illustrator and Flash Catalyst
      3m 36s
    5. Creating Flex skins for use in Flash Builder
      2m 19s
  13. 19m 48s
    1. Understanding symbols: The lifeblood of Flash
      4m 58s
    2. Symbols: Understanding 9-slice scaling
      4m 18s
    3. Setting text that will be used in Flash Professional
      3m 5s
    4. Moving artwork between Illustrator and Flash Professional
      7m 27s
  14. 1m 6s
    1. Goodbye
      1m 6s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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

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 for Web and Interactive Design.

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?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

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 preferencesfrom 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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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.