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

Setting up a workspace optimized for web design

From: Illustrator CS5 for Web and Interactive Design

Video: Setting up a workspace optimized for web design

A really nice feature that Adobe recently added to versions of Creative Suite is the ability to save workspaces, or to position your panels, choose which panels are open, and then save that so that you can work with an environment that works best for the type of work that you do. This is especially useful if normally you actually work on different types of projects all the time. Since we are talking about web and interactive design, let's focus on creating a workspace that works best for that type of work. Now as you can see right now inside of Illustrator I am using the Essentials workspace.

Setting up a workspace optimized for web design

A really nice feature that Adobe recently added to versions of Creative Suite is the ability to save workspaces, or to position your panels, choose which panels are open, and then save that so that you can work with an environment that works best for the type of work that you do. This is especially useful if normally you actually work on different types of projects all the time. Since we are talking about web and interactive design, let's focus on creating a workspace that works best for that type of work. Now as you can see right now inside of Illustrator I am using the Essentials workspace.

Although you have to really understand that this is just a workspace that Adobe created for the general public. So even though it says Essentials, it may not mean they are the right essentials for you. Still if you go over here to the workspace switcher, click on this button where it says Essentials, you can see that Illustrator ships with several other workspaces. Things like Painting, Printing and Proofing, Like InDesign or Photoshop, and there is even one here for Web. However, if you choose the Web workspace here, which I am doing right now, I will that I am not really that happy with the way that it's set up.

It doesn't really have the tools that I need when I am working in web graphics. For example, as we have discussed, working with pixel dimensions and precise measurements is really important, something that we will be using the Transform panel to help us do, but the Transform panel isn't even here. In reality, this Web workspace is more of an advertisement by Adobe to let us know which features it has that work with web design. So what I'd like to do right now is actually focus on building a Web workspace that works best for us. So I am going to go here back to the Essentials workspace. I will click on the little white arrows here to expand his panel dock, and we are actually going to rip this apart and start from scratch.

I am going to take this gray area right here and click on it. Drag it over here so now it floats on its own. We are going to start to build our own workspace. Now I am going to start over here using the Appearance panel. Of course, you know the Appearance panel is probably one of the most important panels inside of Illustrator. But not only for the functionality that it adds, for example, the ability to have multiple fills and strokes and objects and to add effects, but it also contains several panels inside of it which will allow us to free up more space on our screen. For example, take a look at the Stroke panel. It's huge.

It has so much information inside of it. First of all, we have some basic stroke information, like the weight right here inside of the Control panel, but I am going to take the Stroke panel right now and kind of drag it out and then close it, because anytime we need to access that information, I can click on the word "Stroke" in the Appearance panel and that entire Stroke panel now temporally appears. I can make a change or make an adjustment. As soon as I click off of it, it disappears. The same thing applies if I click on the word "Opacity." The entire Transparency panel appears.

So I can take the Transparency panel right here and close that one. No reason to keep that open on my screen. I also don't need the Color panel at all. Because when working with Fills or Strokes if I want to change the color, I can simply click on these little squares of color and bring up either the Swatches panel, or if I Shift+Click on this it brings up the Color panel. Now I am actually going to leave the Swatches panel open on my screen because later on we are going to see it's just going to be easier for me to manage my colors that way, but there is really no need for the Color panel at all, so I am going to take that and remove it as well.

Now I am going to take my Graphic Styles. I am going to drag that up so that they live in the same grouping over here as Swatches, Brushes, and Symbols, as these are all really library elements. And I also find that when I am working with Graphic Styles or Symbols it's much easier to see the names of these than the little iconic previews. So I am going to go to the flyout menu here, I am going to choose to view these as a list, and I will do the same thing for Symbols here. By the way, if you are someone who actually is familiar with working with things like Flash Catalyst or Flash Professional you might find it more familiar to actually view things in this way because this list view is how they appear in those applications.

Now then on the bottom here I have Layers and Artboards. These are both really important for working with web Design, so I am going to drag the Artboards panel out here and also the Layers panel. So we are starting to get a better idea of what panels are going to appear on our workspace, but we need to go to the Window menu to find those that are missing. So let's go over here to the Window menu, which is actually where all the panels appear, and I will choose to open up the Transform panel. As I said before, this is going to be one of the most important panels I will use when creating web graphics in Illustrator. So I am going to take that Transform panel and drag that right about over here.

The Align panel is pretty important too, so we are going to use that but just maybe not as much, so I am just going to leave it here for a moment. Now I use to rely on the Pathfinder panel a lot, but really not anymore. Now inside of Illustrator CS5 we have the new Shape Builder tool. If you are not familiar with this tool, it's actually a way to replace the functionality of the Pathfinder panel, and if you are not familiar with it, I cover it extensively inside of my Illustrator CS5 Essential Training title here in the lynda.com Online Training Library. So I am going to keep the Pathfinder panel closed for now and I am going to go back again to the Window menu and choose to open up the Info panel.

I don't need the Navigator panel here, so I am just going to drag that out and close it, but one of the most important things about the Info panel is if I go ahead now to flyout menu and choose Show Options, you can see that the Info panel will always display the hex values or the color basically for any object, both fill and stroke, that I have selected. This is actually going to prove to be very helpful as I work inside of Illustrator, because as we will see it takes a little bit of digging to find that the hex values of colors inside of Illustrator. But with this Info panel open, I will always have them available.

Finally, I will go back to the Window menu, because we are going to be working with text a lot when creating our web graphics and to save time and to be more efficient we want to use paragraph and character styles. So I will scroll down over here to where it says Type, and then I will choose Paragraph Styles. This will actually open up both the group panel of Character and Paragraph Styles, and I move them just about over here as well. So we have our basic elements in place. Let's now position these in a way that we want to. I am going to start by taking this Transform panel, taking the top over here of the panel, the gray part here, and dragging it to the right so that I can create a new panel dock.

Next, I will take my Layers panel and drag that in right about over here. Notice that as I kind of drag it to the top here, a blue line appears, letting me know that I can now attach it to the bottom of the Transform panel inside of this panel dock. The Layers panel expands to fully fill that panel dock. I also want add my Artboards and Appearance panels to this dock as well, so I am going to start with Artboards, drag them in over here, and you will notice that when I position it right between the two, a blue line appears right in the middle. If I kind of come down here, it will group it together with Layers. I don't want that.

I want it to actually appear in between them. So notice now the Layers panel moves down to make room for the Artboards panel. I will do the same thing for the Appearance panel right here and now you can see that I will always have visible my Transform, Appearance, Artboards and Layers panels. I am also going to take my Info panel, grab it just by the tab right here, and group it together with Transform. So now I can either toggle between Transform or Info to get the information that I need. These are the panels that I am going to be using most often.

However, this information that I see here are things that I am only going to be using once in a while. So I don't need to keep them in a fully expanded dock. We are going to create a dock that's actually collapsed to its iconic state so we can easily access that information as we need it and we will start by taking the Color Guide right here, dragging it over here to create a new dock. But now I will click on the little white arrows that appear on top over here to collapse it to its iconic state. This way now if I need to have the Color Guide open I can click on it to activate it and then click on it again to hide it.

Next, I will take my Symbols panel and drag it over into this dock as well. Notice that a blue line appears directly underneath that little icon, which allows me now to create a new group over here of just this panel here in the Symbols panel. I will take Graphic Styles and now when I drag it in I am actually going to drag it directly on top of it. Notice now the whole thing turns blue, and that groups these two together. In fact, I will do that with Brushes and with Swatches as well. So I now have all of these panels kind of living inside of one single group.

Next, I will take my Gradient panel and drag that again underneath right here so the blue line appears in the bottom, which creates a new group. I will do the same thing over here for Align to create a new group underneath it, and then finally I will take Paragraph Styles, create a group for that, and I will put Character Styles into the same group as the Paragraph Styles. So you see we have a really nice and clean workspace right now that's optimized for working with web and interactive graphics here inside of Illustrator. Now I do want to add one other thing.

We know that in Illustrator we have the ability to have several different color libraries. We may want to work with web safe color. We will talk more about that in a later chapter, but there happens to be a really nice library, something called VisiBone, and I want to include that in my workspace as well. So first let's explain what that means. If I go to the Window menu here and I scroll down to the bottom where it says Swatch Libraries, there is something here called Web. This space leaves a whole list of web safe colors, but there is really no easy way for me to choose these web safe colors. If I look at them, it's just a whole big mishmash of color.

So I am actually going to close that. I am going to go back to the Window menu, scroll down again to where it says Swatch Libraries, and this time I am going to choose something called VisiBone2. This is actually a library that was created that takes the same web colors, but organizes them in a way where it makes a little bit more sense. Let me show you what I mean. I am actually going to take the tab over here of the VisBone2 library, drag it out on its own, and let's close over here at the web panel. We don't need that one right now. And this also looks kind of like a mess of colors if you think about it.

But here is the thing. You see that there are several white little swatches. Well if we resize the panel here so that the white squares line up to the four corners, notice now I have white squares in all four corners. I can see that the swatches are actually arranged as a color wheel so with the same web safe colors, but I can see them in a way that makes a little bit more sense to me. Now since this is an external library, I want to make sure that this library is always going to be available to me inside of Illustrator. So I am going to go to the flyout menu of this panel and I am going to make sure that the Persistent option is checked.

This way even after I quit Illustrator and then restart it again, this VisiBone2 library will already be loaded. I am now going to take this library, grab it by its tab, and put it in the same group over here as the Color Guide. I now have my Web workspace set up just the way that I want it. So to save it I am going to come back up over here to the Workspace Switcher and choose Save Workspace. I don't want to delete the original one that Illustrator ships with so I am going to choose Web 2 and click OK. Now, anytime that I am working if I know that I want to work with web and interactive graphics I can switch to my Web 2 workspace and everything that I need will be right at my fingertips.

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 · 23916 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.