-a04-01.ai: Creating Custom Symbols

The following Tools will be used:

01-itc298-icons-tools

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

 

 

 

The following Panels will be used:

02-itc298-icons-panel

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

 

 

 

Creating Custom Icons

 Menu Icon

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

03b-itc298-icons-set-guidesName 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.

03c-itc298-icons-guides-layerFrom the bottom right of the Layers panel click on the “Create New Layer” icon. Name the new layer “Icons”.

04-itc298-icons-icons-layerIn the Layers panel select the new “Icons” layer.

05-itc298-icons-intersectionOn the artboard, use the Rectangle tool and click once at the intersection of the two guidelines.

06-itc298-icons-5x5-rectangleIn 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.

07-itc298-icons-5px-guide-XIn the Layers panel select the “Guides” layer. On the artboard, create a vertical guideline 5 px to the right of the new square.

08-itc298-icons-5x25-rectangleIn 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.

09-itc298-icons-align-topWith 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>.

10-itc298-icons-5pc-guide-YIn the Layers panel select the “Guides” layer. On the artboard, create a horizontal guideline 5 px below of the new square.

11-itc298-icons-clone-menu1In 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.

12-itc298-icons-group-menuIn 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.

13-itc298-icons-name-menuIn the Layers panel create a master Group of these (3) rectangle groups and name it “Menu”.

13a-itc298-icons-symbols-panelOpen the Symbols panel – from the Top Menu > Windows > Symbols.

13b-itc298-icons-delete-symbolsIn 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.

14-itc298-icons-new-symbolFrom the Layers panel select the “Menu” group and in the Symbols panel fly-out menu select New Symbol….

15-itc298-icons-menu-symbolIn the Symbol Options dialog box; Name: menu – Type: Graphic – confirm by clicking OK.

16-itc298-icons-confirm-symbolThere should now be a new icon in the Symbols panel. Hover over it to confirm it has been labeled properly.

The User Icon

17-itc298-icons-30x30-ellipseIn 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.

18-itc298-icons-60x70-ellipseUsing 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.

19-itc298-icons-align-ellipsesUsing the Direct Selection tool (black arrow) align the new oval tangent to the bottom of the 30px circle.

20-itc298-icons-delete-pointUsing the Minus Pen tool click on the bottom anchor point of the oval.

21-itc298-icons-delete-toggleUsing 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.

22-itc298-icons-group-userIn 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

23-itc298-icons-new-userFrom the Layers panel select the “Menu” group and in the Symbols panel fly-out menu select New Symbol….

24-itc298-icons-symbol-userIn the Symbol Options dialog box; Name: user Type: Graphic – confirm by clicking OK.

25-itc298-icons-user-confirmThere should now be another new icon in the Symbols panel. Hover over it to confirm it has been labeled properly.

The Download Icon

26-itc298-icons-new-downloadFrom 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.

27-itc298-icons-arrow-1-14Scroll down and select Arrow 1.14.

28-itc298-icons-arrow-rotateFrom 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…

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

30-itc298-icons-arrow-directSelect the Direct Selection tool from the Tool panel.

31-itc298-icons-select-45angleDrag across the top end of the arrow to select both the Anchors.

32-itc298-icons-move-pointsUsing the Down Arrow key on the keyboard lower the two end points about 20 pixels (count 20 key strokes).

33-itc298-icons-add-rectangleFrom the Tool panel select the Rectangle Tool.

34-itc298-icons-32x6-rectangleClick 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.

35-itc298-icons-align-partsIn the Layers panel select both the arrow and the new rectangle and in the Options bar use the Horizontal Align tool.

36-itc298-icons-group-downloadsIn the Layers panel select both the paths and Group and name “download”.

37-itc298-icons-new-symbolFrom the Layers panel select the “download” group and in the Symbols panel fly-out menu select New Symbol….

38-itc298-icons-download-symbolIn the Symbol Options dialog box; Name: download Type: Graphic – confirm by clicking OK.

39-itc298-icons-confirm-downloadThere should now be a third new icon in the Symbols panel. Hover over it to confirm it has been labeled properly.

The Form Icon

40-itc298-icons-star-toolFrom the Tool panel select the Star Tool

41-itc298-icons-5x10triangleIn 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.

42-itc298-icons-17x50rectangleAlign 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.

43-itc298-icons-17x17squareAlign 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.

44-itc298-icons-vertical-alignIn 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.

45-itc298-icons-transform-rotateWith the new group selected right-click on it and from the Context menu: Transform > Rotate…

46-itc298-icons-45degreeIn the Rotate dialog panel Angle: -45º. Check Preview to ensure the angle is correct. Click OK.

47-itc298-icons-group-formIn the Layers panel select both the paths and Group and name “form”.

48-itc298-icons-new-symbolFrom the Layers panel select the “form” group and in the Symbols panel fly-out menu select New Symbol….

49-itc298-icons-symbol-formIn the Symbol Options dialog box; Name: download Type: Graphic – confirm by clicking OK.

50-itc298-icons-confirm-formThere 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…

51-itc298-icons-select-symbolsIn the Symbols panel select all four new symbols.

52-itc298-icons-save-library

From the Fly-out menu > Save Symbol Library…

53-itc298-icons-symbol-files

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

54-itc298-icons-symbols-panelIn a new document open the Symbols panel – from the Top Menu > Windows > Symbols.

55-itc298-icons-delete-symbolsIn 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.

56-itc298-icons-web-iconsFrom the Layers panel select the “Menu” group and in the Symbols panel Fly-out menu > Open Symbol Library > Web Icons.

57-itc298-icons-load-iconsFrom the Web Icons panel, select and drag over to the Symbols panel, the following:

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

58-itc298-icons-other-libraryAgain, from the Layers panel select the “Menu” group and in the Symbols panel Fly-out menu > Open Symbol Library > Other Library…

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

60-itc298-icons-load-UI-iconsFrom 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.

61-itc298-icons-view-rulersFrom the top menu View > Rulers > Show Rulers (command R).

62-itc298-icons-reset-zeroFrom 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.

63-itc298-icons-set-guidesName 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”.

64-itc298-icons-grid-toolFrom the Tool panel select the Rectangular Grid Tool. Click at the intersection of the new guides.

65-itc298-icons-3x3-gridIn 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.

66-itc298-icons-grid-alignFrom 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.

67-itc298-icons-make-guidesWith the  <Group>  selected, from the top Menu > View > Guides > Make Guides.

68-itc298-icons-name-gridIn the Layers panel name the  <Group>  “grid”.

68a-itc298-icons-icon-layerIn the Layers panel create a new layer. Name it “icons”.

69-itc298-icons-transform-panelOpen the Transform panel: from the top Menu > Window > Transform

70-itc298-icons-drag-iconFrom 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).

71-itc298-icons-20-centerFrom 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.

72-itc298-icons-add-more-iconsContinue this process with the remaining symbols.

73-itc298-icons-align-iconsUsing the Direct Select Tool (black arrow) align the symbols using the Alignment settings from the Align panel.

74-itc298-icons-icons-namedExpand 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

75-itc298-icons-slices-layerIn the Layers panel create a new layer. Name it “slices”.

76-itc298-icons-slice-toolFrom the Tools panel select the Slice Tool.

77-itc298-icons-make-sliceFrom 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.

78-itc298-icons-adjust-sliceZoom 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.

79-itc298-icons-save-for-webFrom the Top Menu > Export > Save for Web (Legacy)…

80-itc298-icons-save-pngIn 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