Crop Area

After creating a design and saving it to the web, have you ever noticed that the image size is smaller than the actual artboard size? With this tutorial, you'll learn how to define your design's final size by using a crop area.


Let's say you've just finished designing an icon. The image size is set to 128 pixels by 128 pixels:

Crop Area step 1

You're ready to save the icon in jpeg format to use on your website. So you go to File > Save for Web. Take a look at the "Image Size" tab in the "Save for Web" dialogue box:

Crop Area step 1a

Hmm, the final size of the icon isn't the same size of the artboard? It was 128x128 pixels. Now it's going to be 110x104 pixels. How do I force Illustrator to keep the icon's size at 128x128? Let's find out in step 2.


If your artboard is already set to 128x128 pixels, you can go to Object > Crop Area > Make and your crop area will be the same size of your artboard.

Another way of doing it is if you select the Rectangle Tool, draw out a rectangle that's 128 pixels wide and 128 pixels high. It shouldn't matter if there is a fill or stroke defined.

Crop Area step 2

With the rectangle selected, go to Object > Crop Area > Make. You'll see that the rectangle disappears but there will be lines in all four corners. These lines signify that a crop area has been created:

Crop Area step 2a

Now go to File > Save for Web and take a look at the "Image Size" tab in the "Save for Web" dialogue box. You'll notice that the size is 128x128 pixels.

Crop Area step 2b

More Illustrator Tutorials