Increasing the resolution of your web art

In this movie, I'll show you how to change the size at which you export your artwork to the web. And also show you how to navigate around a weird problem that you might encounter when working on your own projects. Now the misleading thing about the Pixel Preview that we're seeing on screen right now, is that it implies that this is about the best your going to do. What its really doing is rendering your artwork at 100% at 72 pixels per inch when in fact we can do much better than that in let's say for web dialog box.

In fact you can change the pixel dimensions of your artwork to anything you like. So, I'm going to go up to the View menu and turn off the pixel preview, which I can also do by pressing Ctrl+Alt+Y, or Cmd+Option+Y on the Mac. And now we can see that nice, smooth artwork. And now, I'll drop down to the bottom left corner of the screen here. And I'll switch to the seventh art board which is called Featured Authors, in order to see a close up of the authors that are featured in this magazine. Now because this frame cuts through the upper left corner of the art board.

I'll go ahead and turn the Frames layer off here inside the Layers panel. And that way we have a solid area of green surrounding the authors' names, with perhaps just a tiny bit of purple in the upper left hand corner. Now, if you're working along with me, go up to the File menu and choose Save for Web. Or you can press Ctrl+Shift+Alt+S or Cmd+Shift+Option+S on the Mac. And notice midway down on the right side of the screen. we have an image size option and you can expand these values to anything that you'd like.

So assuming that you want to expand the image proportionally, make sure that the link icon is turned on As it is for me. And I'll go ahead and increase the width value to 590 pixels, because that's the widest I can go on my own site, deke.com. And then, I'll press the Tab key, and notice that Illustrator goes ahead and increases the size of my art by a total of more than 464%. Now, if I had done something like this in Photoshop, which is where a lot of folks prepare their web graphics, I would up sample the pixels.

That is, I would blow up the pixels, and we'd get these very soft transitions. Whereas Illustrator goes ahead and recalculates the artwork based on the original vector graphics. So you end up getting really sharp, smooth results. Now at this point it doesn't really matter whether we set this option here to art optimize or type optimize. Because either way we're going to end up getting really sharp legible text as you're seeing on screen. But I will tell you that type optimize is the way to go when you're working with very small type.

Now, the problem with our image is that we've got this weird line over here on the right hand side of the graphic. This is not an element of the screen preview. It's really going to export along with the graphic And you can see that that's the case because look at all these weird colors that we have going on. In addition the greens, we have this purple which is potentially that little bit of purple in the upper left hand corner then we have all these weird colors going on here. That are making up this odd edge. And just so you can see it in the video, I'll go ahead and zoom in and I'll scroll over.

And it's this little band of strangely colored pixels right there. And this turns out to be a function of this checkbox right there. Clip to art board, which you want to leave turned on. Because if you were to turn it off, you'd end up optimizing your entire artwork. So in other words, you'd take all five of the art boards, and you'd squish them down to 590 pixels. And by the way, I do not recommend you do that if you're working along with me because it takes forever. So you do want to go ahead and leave this check box turned on. The problem is with this particular art board itself.

The seventh art board has an odd size and you may run into this problem as well. If you do just go ahead and Cancel out. And here's the solution. You want to switch to the Art Board tool which you can get by pressing Shift+O. And then notice up here in the Control Panel, these width and height values. They are set to decimals. And that is going to cause problems when working with save for web every time. So I'm going to take that width value and raise it up to 127 points as long as it's an even value that's all that matters.

And then I'll tab over to the height value, and I'll take it down to a 107 points like so. And that goes ahead and lowers the top of the art board, so that we are shaving away that little bit of purple. Now press the Esc key in order to return to the standard drawing mode. And then I'll go back to the File menu and choose Save for web. And I'll increase the width value once again to 590 points, just as we did before. And now notice That everything looks great. And we can see not only that it looks great here inside the preview.

We don't have that weird edge. But you can also see that we've got some great greens, and only greens. Various shades of greens, of course, here inside the color table. Which is to say we no longer have those odd colors at the bottom of the table, and we no longer have that purple, either. And that's how you scale your artwork to any pixel dimensions you like here inside the Save for Web dialog box.