Creating Web Graphics in Illustrator

When using Illustrator to create web graphics, we'll need to create our images from scratch. Using the basic shape tools available to us, we can create graphics for a website using combinations of different shapes. We can also easily add color to graphics to help them stand out. For our first Illustrator graphic, we'll create a website logo composed of shapes and some text. Later, we'll create some icons to use in the website.

Creating a New Web Graphic in Illustrator

The first thing we'll need to do is set up a new document where we can create our shape. Let's open Illustrator and do that now.

Step1. Launch Illustrator CC.

Illustrator opens, and we're ready to start creating our graphic.

Step2. To create a new file, in the Menu bar,

Click File, Click New...

The New Document dialog box will appear:

You'll notice that it looks very similar to the New Document dialog box in Photoshop. Here we can start the process of creating a web-ready graphic. The process is very similar to how we created our web graphic in Photoshop.

Just as in Photoshop, there are many different profiles that we can work with in Illustrator. We will be working with the Web profile, as that will ensure the most common web-based document settings will be changed automatically for us.

Step3. To change to the Web profile, in the bar at the top of the New Document window,

Click Web

Next, we'll set the size of our first artboard. We'll learn more about how artboards work in Illustrator a little later. For now, we'll make an artboard that is 250 pixels wide and 100 pixels high, which is the size of the logo we'll be making.

Step4. To specify the size of the document, in the Width field,

Press & Drag the current value, type: 250 Tab key 100

As part of the Web preset, Illustrator set the color mode to RGB for us — since we don't need to change any other settings, we'll finish creating the new document now.

Step5. To finish creating our new document,

Click

NOTE: If you are working with a device that has touch options available, such as a touchscreen monitor, you may get a message about switching to the Touch interface, or may be switched into the Touch workspace - to switch back to the traditional Illustrator interface, simply switch back to the Essentials workspace using the workspace switcher at the top right corner of the screen.

Now that we have our new document, we'll need to make sure our new objects are aligned to the pixel grid; this is especially important when we create web graphics. Aligning objects to the pixel grid ensures our graphics have crisp edges, as any new objects we add to our Illustrator artboard will be aligned to the underlying pixel grid. Following is an example of an object that is aligned to the pixel grid, and one that is not:

You'll notice that the example that is not aligned to the pixel grid has a softer edge to it, and is not precisely aligned to the underlying pixel grid. The aligned example, however, is much crisper and does not have the odd blending of colors when two colors meet. When we create a graphic using the Web profile, the Align Objects to Pixel Grid option should be selected by default, but let's double-check before we go on. The button will be dark gray if it is active - if it's not, we'll need to activate it.

Step7. To ensure our objects will align to the pixel grid, on the right side of the Control Panel, if necessary,

Click

Now, all new objects we make will be automatically aligned to the pixel grid.

We're just about ready to start making the logo. Before we do that, though, let's set up our Illustrator workspace to make it easier to design our web graphics.

Setting Up Illustrator for Efficient Web Graphic Creation

There are a few more things we'll need to do in order to enhance our web graphics workflow. First, we'll turn on our rulers and grids, then we'll adjust the grid size so we can more easily visually measure the objects we add to the artboard. We'll also want to make sure we're working with the Essentials Classic workspace (or the Essentials workspace, if working with an older version of Illustrator), which will bring out many of the panels we'll need to use while creating web graphics.

Step1. To switch to the Essentials Classic interface, if necessary, in the upper right corner of the screen,

Click, Click Essentials Classic

NOTE: In Illustrator CC 2017 and older, ensure that the Essentials workspace is the active workspace, and skip ahead to step 4.

The interface changes slightly, and you'll see some additional panels appear in the Panel dock at the right of the screen.  You'll also see the Control Panel appear across the top of the Illustrator interface.  The panels we'll be using most frequently are currently collapsed, and displaying as icons — we'll expand that section of the Panel dock so we can see them all. We'll also collapse the section of the Panel dock that we won't be using.

Step2. To expand the panel dock in order to view all the available panels, at the top of the Panel dock,

Click 

Step3. To collapse the panels that won't be used, at the top of the Panel dock,

Click 

Now we're ready to turn on the rulers and grids.

Step4. To view the rulers, in the Menu bar,

Click View, Point Rulers, Click Show Rulers

Step3. To turn on the grid, in the Menu bar,

Click View, Click Show Grid

The rulers and grid are now active. Let's resize our grid squares so we can use them to make quick measurements at a glance.

Step4. To change the grid measurements, in the Menu bar,

Click Edit, Point Preferences, Click Guides and Grid

NOTE for MacOS Users: To open the preferences, from the Menu bar, Click Illustrator, Click Preferences, Click Guides and Grid.

The Preferences dialog box opens to the Guides and Grid options. We'll change where our major grid lines are located, and the size of the individual grid squares.

Step5. To change the location of the major grid lines, in the Gridline Every field,

Press & Drag the current value, type: 50

This will result in major gridlines that are 50 pixels apart. Let's adjust our minor gridlines next.

Step6. To change the number of subdivisions, in the Subdivisions field,

Press & Drag the current value, type 5 Enter

Setting our subdivisions to 5 will result in 5 minor grid lines, 10 pixels apart.

The changes we just made result in a grid that has squares that are 10 pixels high and 10 pixels wide, allowing us to easily visually measure objects on the artboard.

We're almost ready to start creating our logo. Before we do that, we should save our file.

Step7. To save the file, on the keyboard, press:

Control key+S

NOTE for MacOS Users: The keyboard shortcut for saving a file is Command key+S.

You see the Save As dialog box.

We need to specify where to save the file and what to call it.

Setting the Location and Filename

When the dialog box opens, it lists a default location for saving the file. On a PC, this location is displayed in the field near the top-left corner of the dialog box.

We want to move to the epclass folder, which is where we will save our file.

Step1. To move to the desktop,

Click

The current location is now set to the desktop. All of our exercise files are contained in the epclass folder, located on the desktop.

Step2. To open the epclass folder,

Double-Click

The epclass folder contents are now visible.

We want to save this document in the Bunny Trails Site subfolder of the epclass folder.

Step3. To open the correct subfolder,

Double-Click the Bunny Trails Site folder

Now that we have specified the Save in location, we need to specify the filename.

Let's make sure that the filename is highlighted first.

Step4. If the filename is not highlighted,

Press & Drag across the default filename

Step5. To name the file, in the file name field, type:

bunnytrails Enter

Step6. To accept the settings for our document, in the Illustrator Options dialog box,

Click

Our document is now saved, and we can start creating our logo.