Configuring the workspace for web design

- Hello friends, this is Sue Jenkins with productivity tips for web designers. In this week's lesson, I'll show you how to configure your copy of Adobe Illustrator for the web, to improve the quality of your web graphics and streamline your workflow. Most people use Adobe Illustrator for creating digital illustrations, logos, and other vector graphics. Then they'll switch to Photoshop and Fireworks when they need to do photo editing and design web graphics. In fact, roughly 75% of all web designers use photoshop for their web mockups, which leaves roughly 25% split between Fireworks, Illustrator, and other software design programs.

It's not to say you can't use Illustrator for the web. On the contrary, you should use Illustrator to create whatever vector graphics you need for your web designs, whether you paste them into Photoshop as smart objects or optimize them directly for the web from Illustrator. Here we are in Illustrator, and before we change any settings, let's create a new document optimized for the web. To create a new document, you'll go to the file menu and choose new, and then from the profile drop down menu, you'll choose web.

From here, you can use any of the preset sizes, or you can certainly override this. So maybe I wanted to do something like 960 x 900, then I can click okay. The dialogue box is already set up for working RGB at 72 pixels per inch, with the align to pixel grid turned on. 960 pixels wide is a standard design width, and 560 is an arbitrary height. You can do as I did and adjust the height, either before you start or while you're working, you can always grab the Artboard tool to increase or decrease the size of your Artboard while you're working.

Now that we have our document open, we can open Illustrator's preferences panel by selecting edit preferences on windows, or by choosing Illustrator preferences on a Mac. We'll start in the general category. Here is where you can change your keyboard increments from one point, and we're going to switch it to pixels. And not just one pixel, but I'd like you to input 0.5 px. Next, switch over to the units category, and change the general units from points to pixels, if it's not already that way.

Mine was already set to pixels. Switch next to the guides and grid category, and you'll want to change your gridline every and subdivision units. I would recommend putting in one and one, so that you get a gridline every pixel, both horizontally and vertically. Now we're done with changing the preferences panel, so you can click okay to go back to your Artboard. The next thing you may want to do is switch your workspace from essentials, which is probably what it's on now.

There is a layout for the web, and if you choose this one, it'll open up panels that will be useful to you working on a web design project. And of course, you can customize the panel dock area to your needs, but generally, these are the tools that you'll be using while you're working on a web layout. There are a few other settings that you want to make sure that are turned on before you start working, so first is going up to the view menu. We're going to change a few settings if they're not already changed here. First, you want to enable pixel preview. Turning pixel preview on will allow you to see the individual pixels when you zoom in, and also help you with the alignment and positioning of objects on your Artboard to pixel precision.

Next, you want to make sure that your rulers are turned on. You can turn those on through the view menu, view rulers, show rulers, or use a keyboard shortcut. You also want to make sure that your rulers are set to pixels. You can check that by right-clicking on the ruler and verifying that it is set to pixels. You also want to make sure that the snap to pixel option is turned on, and if you want, you can even turn on the grid. To turn on the snap to pixel, you go to the view menu and mine already has a check mark next to it, so I'm assured that that's on.

As I move my objects along in the Artboard that they're going to snap to each pixel increment, which will make for cleaner graphics when I go to optimize. The next thing you'll want to do is make sure that your transform panel options are set correctly. My transform panel is already open because I changed my workspace to web. You want to make sure the align pixel grid is enabled. This is one of those things, like anti-aliasing, anytime you see it as an option and you're working on a web project, turn it on.

Now, we don't have an object to transform, so the whole panel was grayed out, but once I create an object, then I can see that I have the option to turn it on or off, I want to leave it on. In fact, when you're creating web graphics, anytime you see an option that says snap to grid, I want you to turn that on too. Next, we're going to head over to our strokes panel, and in this layout view, it's actually in a collapsed menu over here. We'll just click on the stroke button to expand it out into the workspace. The stroke panel has three options for aligning your stroke, and by default, any paths that you create, the stroke will be perfectly centered along the path, overlapping a little on one side and a little on the other.

But when you're designing for web, you really need to make sure that the strokes are either inside or outside of the path, not on the path itself. In addition, the central alignment doesn't match up with the pixel grid, and it can give you fuzzy pixels, which is something that you don't want. I'd recommend that you choose outside, since in CSS, the border is applied around the outer edges of a shape. Let's switch over to this other layout that I have here, to show you a little bit more about what you can do when you optimize your workspace for the web.

If you'll be creating any elements that you plan to use multiple times within the layout, you'll want to convert those objects or elements into a symbol by dragging it into the symbols panel. The symbols panel is open here and there are several symbols in there. I have already selected this one shape, dragged it in as a graphic art piece, and then it turned it into a symbol. Then I could reuse that symbol over and over again, without increasing the file size by that symbol's reuse. The neat thing about symbols is that if I ever wanted to adjust all of the symbols at once, I really only need to edit one.

By clicking on that, I bring up the symbol into isolation mode, I can modify the background color. When I go back to my Artboard, all three instances of the symbol use that same coloration. Take advantage, too, when you're working in a web layout, of using character styles and paragraph styles. You can access those panels by going to the window menu, and choosing type, character styles. That's grouped with paragraph styles. One thing you could do is, if you're mocking up for a web design, you can set what will be heading one, heading two, heading three, navigation buttons, paragraph text and so forth.

Same goes for paragraph styles. If you had a block of text, and you were styling them in a particular way, you can create styles and then reuse them. That makes your process of designing in Illustrator go much faster, and then when you save your work for the web, you have those already ready to go to convert into CSS. Let me close this panel. In addition, if you use custom styles and effects in your design, consider saving those as graphic styles through the graphic styles panel. For example, if I select this dotted line here in the middle, I can save it as a graphic style, just by going over here and clicking the add new graphic style button.

Then I can apply that graphic style to an object just by selecting the object and clicking on it. We can do both of those. When you're finished working on your web project, you may want to reset your Illustrator workspace preferences back to factory default. To do this, you'll quit Illustrator, and then press and hold CTR+ALT+SHIFT on Windows, or Command+Option+Shift on Mac, when you reopen the program. Remember, when you're using Illustrator for web design, following all of these simple set up guidelines can help you work more effectively to create more precise, web-ready graphics.