-a04-01.ai: Creating Custom Symbols

The following Tools will be used:

• Selection Tool
• Direct Selection Tool
• Rectangle Grid Tool
• Rectangle Tool
• Ellipse Tool
• Star Tool
• Slice Tool
• Magnify Tool

 

 

 

The following Panels will be used:

• Symbols
• Layers
• Align
• Transform
• Web Icons (sub-panel)
• Character (optional)
• Pathfinder (optional)

 

 

 

Creating Custom Icons

 Menu Icon

Open a New File – Prefile: Web 800×600 (would be sufficient). From the Top Menu > View > Rulers > Show Rulers (Command-R)

Name the current Layer 1 “Guides”. Place the curser anywhere over the Ruler area Click-hold-Drag onto the artboard to create a Horizontal and Vertical guideline. With the Selection tool (Black Arrow) select the Horizontal Guide and and using the Option bar set the the “Y” value to a whole number. Do the same with the Vertical guide by setting the “X” value also to a whole number.

From the bottom right of the Layers panel click on the “Create New Layer” icon. Name the new layer “Icons”.

In the Layers panel select the new “Icons” layer.

On the artboard, use the Rectangle tool and click once at the intersection of the two guidelines.

In the Rectangle dialog box type Width: 5 px Height: 5 px. A 5×5 square should now appear with the upper left corner aligned at the guideline intersection.

In the Layers panel select the “Guides” layer. On the artboard, create a vertical guideline 5 px to the right of the new square.

In the Layers panel select the “Icons” layer. On the artboard, use the Rectangle tool and click once at the intersection of the two guidelines. In the Rectangle dialog box type Width: 25 px Height: 5 px.

With the Selection tool (black arrow) elect both the square and the new rectangle and in the Options bar click on the Vertical Align Top icon. In the Layers panel “group” the two <paths>.

In the Layers panel select the “Guides” layer. On the artboard, create a horizontal guideline 5 px below of the new square.

In the Layers panel select the “Icons” layer. On the artboard, using the Selection tool hold down the Option key (Alt) and hover over the group objects. The cursor will change to a double “flying black-over-white arrow”. Click-hold-drag the “clone” so it nests with the lower guidelines.

In the Layers panel select the “Guides” layer. Again on the artboard, create a horizontal guideline 5 px below of the new group. Repeat the “clone process” once more to create a total of (3) square-rectangle groups.

In the Layers panel create a master Group of these (3) rectangle groups and name it “Menu”.

Open the Symbols panel – from the Top Menu > Windows > Symbols.

In the Symbols panel select all the current symbols that appear and delete them by clicking on the Garbage Can icon in the lower right corner of the panel.

From the Layers panel select the “Menu” group and in the Symbols panel fly-out menu select New Symbol….

In the Symbol Options dialog box; Name: menu – Type: Graphic – confirm by clicking OK.

There should now be a new icon in the Symbols panel. Hover over it to confirm it has been labeled properly.

The User Icon

In the Layers panel select the new “Icons” layer.  On the artboard, use the Ellipse tool and click once along an existing vertical guideline. In the dialog box create a 30px x 30px ellipse, click OK.

Using the Ellipse tool again click slightly below the newly created circle and using the dialog box create an oval – Width: 60px; Height: 70px – click OK.

Using the Direct Selection tool (black arrow) align the new oval tangent to the bottom of the 30px circle.

Using the Minus Pen tool click on the bottom anchor point of the oval.

Using the Adjust Anchor Point tool click once on the anchor handle below each side anchor point to create a horizontal edge on the bottom of the oval.

In the Layers panel select the half oval path and move it 3 pixels down by using the Down Arrow key on the keyboard. Then select both the Circle and the half oval and Group them. Name the new Group “user”

From the Layers panel select the “Menu” group and in the Symbols panel fly-out menu select New Symbol….

In the Symbol Options dialog box; Name: user Type: Graphic – confirm by clicking OK.

There should now be another new icon in the Symbols panel. Hover over it to confirm it has been labeled properly.

The Download Icon

From the Tools panel select the Line tool and in the Option bar open the Line Settings drop-down menu. Click on the icon in the lower left corner to access the Arrows libraries and select Arrows Standard.

Scroll down and select Arrow 1.14.

From the Layers panel make sure you are on the Icons layer. Select the arrow in the Arrow panel and drag it onto the artboard then release to create a single arrow. Right click on the new arrow and in the context menu select Transform then Rotate…

In the Rotate dialog box set Angle -90 and chech Preview to ensure the arrow is pointing down. Click OK.

Select the Direct Selection tool from the Tool panel.

Drag across the top end of the arrow to select both the Anchors.

Using the Down Arrow key on the keyboard lower the two end points about 20 pixels (count 20 key strokes).

From the Tool panel select the Rectangle Tool.

Click once on the artboard somewhere to the lower left of the arrow. In the Rectangle dialog box create a rectangle – Width: 32px; Height: 6px – click OK. Adjust the rectangle to be tangent to the point of the Arrow path.

In the Layers panel select both the arrow and the new rectangle and in the Options bar use the Horizontal Align tool.

In the Layers panel select both the paths and Group and name “download”.

From the Layers panel select the “download” group and in the Symbols panel fly-out menu select New Symbol….

In the Symbol Options dialog box; Name: download Type: Graphic – confirm by clicking OK.

There should now be a third new icon in the Symbols panel. Hover over it to confirm it has been labeled properly.

The Form Icon

From the Tool panel select the Star Tool

In the Layers panel make sure you are on the Icon layer. Click once on the artboard and in the Star dialog box create the following: Radius 1: 5px ; Radius 2: 10px ; Points: 3. Click OK.

Align the new Triangle to a vertical guide. Using the Rectangle tool click once on the artboard along the vertical guide about 55px above the triangle. In the Rectangle dialog box create the following: Width: 17px ; Height: 50px. Click OK.

Align new rectangle 3px above triangle. Using the Rectangle tool click once on the artboard along the vertical guide about 20px above the triangle. In the Rectangle dialog box create the following: Width: 17px ; Height: 17px. Click OK. Align new rectangle 3px above previous rectangle.

In the Layers panel select all three newly created paths. Select the Direct Select tool (Black arrow) and from the Options bar click on Horizontal Align Center. Then Group the three selected paths.

With the new group selected right-click on it and from the Context menu: Transform > Rotate…

In the Rotate dialog panel Angle: -45º. Check Preview to ensure the angle is correct. Click OK.

In the Layers panel select both the paths and Group and name “form”.

From the Layers panel select the “form” group and in the Symbols panel fly-out menu select New Symbol….

In the Symbol Options dialog box; Name: download Type: Graphic – confirm by clicking OK.

There should now be a fourth new icon in the Symbols panel. Hover over it to confirm it has been labeled properly.

UI-icons-01.ai: Saving a Symbol Library…

In the Symbols panel select all four new symbols.

From the Fly-out menu > Save Symbol Library…

In the Save Symbols as Library dialog box: Save as: UI-icons-01.ai to your assignment (a05) folder. File Format: Symbol Files (*ai) Click OK.

-a04-02.ai: Adding Symbols to create a custom Symbols Library

In a new document open the Symbols panel – from the Top Menu > Windows > Symbols.

In the Symbols panel select all the current symbols that appear and delete them by clicking on the Garbage Can icon in the lower right corner of the panel.

From the Layers panel select the “Menu” group and in the Symbols panel Fly-out menu > Open Symbol Library > Web Icons.

From the Web Icons panel, select and drag over to the Symbols panel, the following:

• Email
• Home
• Comments
• Search
• RSS
• Plus
• Minus
• Delete

Again, from the Layers panel select the “Menu” group and in the Symbols panel Fly-out menu > Open Symbol Library > Other Library…

In the Select a library to open dialog box find your assignment (a04) folder and select UI-icons-01.ai. Click OK.

From the UI-icons-01 panel, select and drag all the custom Symbols over to the Symbols panel.

-a04-sprite: Creating an Icon Sprite

Continue to use the -a04-02 document as the base to build the Icon Sprite.

From the top menu View > Rulers > Show Rulers (command R).

From the upper left corner where the Rulers meet at 0,0 click-hold-drag to reset 0,0 about 250 px to the right and about 150 pixels down then release. Now the 0,0 has been reset.

Name the current Layer 1 “Guides”. Place the curser anywhere over the Ruler area Click-hold-Drag onto the artboard to create a Horizontal and Vertical guideline. With the Selection tool (Black Arrow) select the Horizontal Guide and and using the Option bar set the the “Y” value to “0”. Do the same with the Vertical guide by setting the “X” value also to “0”.

From the Tool panel select the Rectangular Grid Tool. Click at the intersection of the new guides.

In the Rectangular Grid Tool Options dialog box create the following: Default Size – Width: 120px Height: 120px; Horizontal Dividers: 3 Skew 0%; Vertical Dividers – Number: 3 Skew 0%. Check Use Outside Rectangle As Frame. Click OK.

From the Layers panel select the new <Group> and using the Direct Select tool (black arrow) align upper left corner of grid to the intersection of the guides.

With the  <Group>  selected, from the top Menu > View > Guides > Make Guides.

In the Layers panel name the  <Group>  “grid”.

In the Layers panel create a new layer. Name it “icons”.

Open the Transform panel: from the top Menu > Window > Transform

From the Layers panel select the “icons” layer. From the Symbols panel select the first symbol and drag it to the artboard. With the symbol till selected, in the Transform panel click on Constrain Width and Height Proportions (linked chain icon).

From the Transform panel – type 20px in whichever dimension is the greatest. In this case that was the W value. The symbol will now resize. Using the Direct Select Tool (black arrow) position the symbol in the center of the upper left corner grid square.

Continue this process with the remaining symbols.

Using the Direct Select Tool (black arrow) align the symbols using the Alignment settings from the Align panel.

Expand the “icons” layer and ensure all symbols are named properly.

Now add (4) four more symbols that you have created to the grid. (Do not use any existing icons from the Symbols Libraries nor acquired from the web).

 Slicing an Icon Sprite

In the Layers panel create a new layer. Name it “slices”.

From the Tools panel select the Slice Tool.

From the Layers panel select the new “slices” layer. On the artboard click-hold-drag from the upper left corner of the Grid (0,0) down to the lower right corner of the Grid.

Zoom into the upper left corner (0.0) using the Direct Select Tool (black arrow) click on the Slices Anchor Point and make sure it aligns with the corner of the Grid (0,0) and do the same with the lower right corner.

From the Top Menu > Export > Save for Web (Legacy)…

In the Save for Web dialog box use the Slice Selection tool and click on the slice that contains the Custom Symbols – Preset: PNG 24 – Export: Selected Slices – Click OK.

In the Save Optimized As dialog box name Save as: lastname-web114-a04-sprite.png. Save to assignment (a04) folder. File Format: Images Only – Click Save.

After adding the remaining 12 icons to the Symbols panel remember to update your Custom Symbols Library (UI-icons-01.ai) so that it contains all 16 symbols that appear in the icon sprite document.

To do this follow the steps to create a Custom Shape Library above and when you go to save over-write the existing UI-icons-01.ai that contained only the 4 basic symbols.

The following files should be in your assignment (a04) folder:

• images (folder) with -sprite.png
• -a04-01.ai
• -a04-02.ai
• UI-icons-01.ai (custom Symbols Library) – containing all 16 icons