HOME  â€¢  SYLLABUS/SCHEDULE  •  ASSIGNMENTS  â€¢   COURSE RESOURCES   •   YOUR PAGES   •   YOUR FEEDBACK

 

 

Tutorial IL 1: Illustrator - -workspace, interface, and making a navigation bar

 

In this tutorial, we will get familiar with the Illustrator interface, create a workspace, and make a navigation bar. First, open the Illustrator application. When the window below opens, under Create New, select Web Document... . 

Name your new document navBar, and change the Width to 780 pixels and the Height to 60 pixels. Make sure you've selected Pixels as your unit of measurement, and at the bottom of the window, make sure you select RGB Color Mode at Screen (72 ppi) under Raster Effects, and select Default Preview Mode.

 

The workspace will look like the image below. Open any window you don't see here from the Window menu. As in the Photoshop tutorial, arrange the tool windows so they look like the column of tools on the right:

 

1. Swatches, Brushes, Symbols

2. Stroke, Gradient, Transparency

3.  Transform, Align, Pathfinder, Layers

4. Color, Character (text), Paragraph, Open Type

 

Under the Window menu, select Workspace, and save this workspace for future use.

 

 

In the center of the main file window (the one with the name navBar), you'll see the file dimension in a green outline, with register marks on all four corners. In the toolbar on the left, select the Text tool (T), and click in the lower right hand corner of outline area, about one-third of the distance from the left. Type 'HOME • PAGE 1 â€¢  PAGE 2 • PAGE 3 • PAGE 4 • CONTACT'. Click and select the entire text with the cursor (the text should be white against a black background). In the text options window just below the main menu, choose a basic sans serif font like Myriad Pro. Make the text regular weight, at 24 points.

 

 

 

Type larger, bolder text for the name of your site (you can also insert a logo for your site here if you have one). 

 

 

Select the Layers tab.

 

 

Double-click on Layer 1, and rename your layer as Text.

 

 

Locate the Layers submenu (the down-pointing triangle with three little lines, on the right side of the window). In the submenu, select New Layer... .

 

Rename the new layer as Background.

 

 

Click and drag the Background layer below the Text layer. It should snap in place. Click in the box next to the eye icon in the Text layer to lock it so you won't accidently edit it. 

 

 

Select the Background layer so you can edit it.

 

 

Click and hold on the Rectangle Tool on the Toolbar to reveal a submenu. Scroll down to Rounded Rectangle Tool and release.

 

 

Click and drag to draw a rounded rectangle in the center of the file, partly obscuring the text you've created:

 

On the toolbar, make sure the fill/stroke icons look like this, with the fill icon in front of the stroke icon: 

 

 

 

The icons indicate the current selection has a black fill and no stroke. Change the fill to medium blue by clicking on the desired color swatch under the Swatches window on the right:

 

 

Now, lock the Background layer and select the Text layer. You'll be working like this a lot - - locking the layers you aren't editing, so you can quickly and easily edit the layer you do select.

 

 

Click on the black cursor icon at the top of the toolbar, and select the big text on the left. Hold down the shift key and select the remainder of your text (HOME • PAGE 1 • etc.). You can always hold down the shift key to make multiple selections, or to add other objects to your current selection.

 

 

Notice the Type options window has your fill and stroke selections, same as what you'd see on the tool bar. Click and hold on the first icon (fill) to reveal a drop-down swatch menu.

 

 

 

Select the white swatch.

 

 

Your text will turn white. You won't see the entire text here because the background seems to be white, too. It's actually transparent, but there's no way in Illustrator to preview that (unless you select Save for Web and Devices... , but we'll get to that later).

 

 

Let's add a drop shadow to the text. With the text still selected, go the the Filter menu and select Stylize > Drop Shadow... .

 

 

In the Drop Shadow window, select Multiply mode, 75% opacity, with x and y offset and blur each set a 3 pixels:

 

 

Your file should look like this:

 

Now, lock the Text layer and select the Background layer. Select your blue rounded rectangle and click on the Transparency tab. Change the opacity to 65%.

 

With the rounded rectangle still selected, add a drop shadow to it by again selecting Filters > Stylize > Drop Shadow... . Use the same drop shadow settings as you used on the text. This is what it will look like:

 

 

Like the Photoshop file format .psd, the native, editable Adobe Illustrator or .ai format cannot be read on the web, so you must export a copy of this file as a .png file. Select Save for Web & Devices under the File menu, and select the 4-up tab.

 

 

Notice that the original .ai file and the PNG-24 version of the file have a grey and white checkerboard pattern in the background. This indicates transparency. Select the PNG-24 file format, and be sure the transparency box is checked. Click on Save, and save this copy as navBar.png into your GRAPHICS folder of your site root. Then, under File, select Save As to save this work file as a native .ai file, to your Resource folder.