From the course: Illustrator for Web Design

Custom web workspaces - Illustrator Tutorial

From the course: Illustrator for Web Design

Start my 1-month free trial

Custom web workspaces

- [Instructor] In the previous movie I showed you how you can change your workspace to one of the preset default workspaces. We're currently in the Web workspace. Now I'm gonna show you how you can modify this workspace and set up Illustrator, so it's optimal for web design. Technically a workspace is defined as any arrangement of panels, toolbars, and windows. And you'll probably need to work with Illustrator and experiment and find the workspace that works best for you. The first thing I'm going to do is I'm going to go ahead and edit my Preferences. I'll go to Illustrator, Preferences, General, and I'm gonna make sure that my Keyboard Increment is set to one pixel. Then I'm going to go to the Unit category and we're gonna change the General settings to Pixels, as well as Stroke to Pixels. I find that it's best to be working in Pixels when I'm creating artwork for the web. Finally, I'm gonna go to the Guides & Grids section and what I like to do here is I like to make a Gridline every one pixel and I also like to have a Subdivision set to one. This is going to make a gridline every single pixel, which is helping for my elements to snap to the grid. I've been using one for both values for some time now and I find that it works best for my process no matter what project I'm working on. I'll click OK to accept these changes. And now I'm gonna modify the default Web workspace. If we expand these windows you can see that it's going to show the various panels that are part of the default Web workspace. Some of these are panels that I don't find to be very useful, so I'm just going to eliminate them. I don't normally work with Variables, so I'm gonna pull that out and close that pane. Nor do I find myself using the Action panel very much with web-based work, so I'll pull that out as well. I also don't use the Attribute panel, so I'm gonna pull this one out too. And I'm just closing those elements. Next I'm gonna open some of the panels that aren't part of the Web workspace that I find to be useful. There's quite a few. So I'm gonna go into the Window pane and I'm gonna start by opening up my Align panel. The Align panel is bundled with the Pathfinder panel and that's one that I use quite often, so I'll leave those two together. I'm also gonna go to Window and I'm gonna open up the Transform panel. I like to have my Transform panel readily available, because this is something that I use quite often. I'm going to open my Swatch panel. And by default the Swatch panel is bundled with the Color panel. These two panels I use often, but I don't tend to use the Color Guide panel very often, so I'll pull that out and close it. Next I'm gonna open up my Gradient panel. The Gradient panel is bundled with the Stroke and Transparency panels, and again, those are panels that I use quite often, so I'll leave those open. I'm going to open my Symbol panel. The Symbol panel is bundled with the Brush panel. This is something that I don't use often in web-based design, so I'll close that up, but I will keep my Graphic Style panel open. I also wanna open up my Info panel. And the Info panel is something that actually is bundled in the web-based panel. So I'll just leave that here. And finally, I'm gonna go into Window, Type, and I'm gonna open my Character Styles. The Character Styles is bundled with the Paragraph Styles and I like to use both of these when I'm doing web-based work. In addition, I like to have my Glyph panel open. That's located under Window, Type, Glyphs. And I'm gonna bundle the Glyph panel into the Character and Paragraph Style panels. Now as you can see, my panels are pretty much covering all of my artwork on my screen, so I need to consolidate these, so that I can get my work done. I'm gonna take the Character, Paragraph, and Glyph panel and I'm going to have them appearing underneath the default Character, Paragraph, and Open Type panels that are part of Illustrator. I'm also gonna move my Transform panel and I like this to be right underneath my Info panel, so I'll place that right there. And I'll take my Align and Pathfinder panels and place them underneath my Transform panel. Next, I'm going to make a new column of panels by grabbing my Stroke, Gradient, and Transparency panel and docking them next to the second column that we have. As you can see, once you turn the panels into a column you have the option to collapse and expand them. I'll leave them collapsed for now. I'm gonna place my Swatch and Color panel underneath my Transparency panel. And then I'm gonna move my Symbol and Graphic Styles underneath those. So now I have Illustrator organized in a way that I find most useful in regards to my panel sets. The next thing that I'm going to do is I'm going to turn on my Rulers. I'll go to View, Rulers, Show Rulers. And my Rulers should automatically be set to pixels, since I set that in my Preferences. You can always right-click here and change them to Pixels if they aren't. I'm gonna verify under my View menu that Snap to Pixel is checked. And I also like to work with Snap to Grid. So I'm gonna turn both of those things on. In addition, I wanna make sure that my Pixel Preview checkbox is on. And I'm gonna go into my Grid settings and I'm just gonna check Show Grids. And this will show the pixel grid that we had set up earlier in this exercise. Now Illustrator is optimized in a way that I find most useful to do web-based work and now I'm ready to start designing my websites.

Contents