In today’s tutorial, we’re going to tackle another icon project, in which we’re going to gradually learn how to create a set of text editor elements, using some of the basic shapes and tools found within good old Illustrator.
So, if that sounds
like something right up your alley, make sure you grab a fresh cup of that
magic bean juice and let’s get started!
And don’t forget, you can always expand the pack by heading over to
GraphicRiver where you’ll find a huge selection of UI icons.
1. How to Set Up a New Project File
Assuming you already have Illustrator up and running in the background, bring it up and let’s set up a New Document (File > New or Control-N) using the following settings:
- Number of Artboards: 24
- Spacing: 20 px
- Columns:4
- Width:32 px
- Height:32 px
- Units:Pixels
And from the Advanced tab:
- Color Mode: RGB
- Raster Effects: Screen (72ppi)
- Preview Mode: Default
2. How to Set Up a Custom Grid
Since we’re going to be creating the icons using a pixel-perfect workflow, we’ll want to set up a nice little Grid so that we can have full control over our shapes.
Step 1
Go to the Edit > Preferences > Guides & Grid submenu, and adjust the following settings:
- Gridline every: 1 px
- Subdivisions:1
Quick tip: you can learn more about grids by reading this in-depth piece on How Illustrator’s Grid System Works.
Step 2
Once we’ve set up our custom grid, all we need to do in order to make sure our shapes look crisp is enable the Snap to Grid and Snap to Pixel options found under the View menu, which will transform into Snap to Pixel each time you enter the Pixel Preview mode (if you’re using an older version of the software).
Now, if you’re new to
the whole “pixel-perfect workflow”, I strongly recommend you go through my How
to Create Pixel-Perfect Artwork tutorial, which will help you widen your
technical skills in no time.
3. How to Set Up the Layers
With the New Document created, it would be a good idea to structure our project using a couple of layers in order to separate the reference grids from the actual icons. If you're familiar with my previous tutorials, you’ll notice that with this one we’re taking a slightly different approach, since we’re basing the project on Artboards instead of Layers due to the high icon count.
That being said, bring up the Layers panel, and create a total of two layers, which we will rename as follows:
- layer 1: reference grids
- layer 2: icons
4. How to Create the Reference Grids
Thereference grids (or base grids) are a set of precisely delimited reference surfaces, which allow us to build our icons by focusing on size and consistency.
Usually, the size of the grids determines the size of the actual icons, and they should always be the first decision you make once you start a new project, since you’ll always want to start from the smallest possible size and build on that.
Now, in our case, we’re going to be creating the icon pack using just one size, more exactly 32 x 32 px, which is on the smaller side of the scale.
Step 1
Make sure you’re on
the right layer (that would be the first one), and then grab the Rectangle Tool (M) and create a 32 x 32 px orange (#F15A24) square
which we will center align to the first Artboard and use to define the overall
size of our icons.
Step 2
Add a smaller 28 x 28 px one (#FFFFFF) which we will
position on top of the previous shape, since it will act as our active drawing
area, thus giving us an all-around 2 px padding
to work with.
Step 3
Select and group the two squares together using the Control-Gkeyboard shortcut, and then create the remaining grids using 23 copies (Control-C > Control-F) which we will position onto each of the empty Artboards. Take your time, and once you’re done, make sure you lock the current layer before moving on to the next section.
5. How to Create the Justify Icon
Assuming you’ve successfully managed to create and position the little reference grids, move on to the next layer (that would be the second one), and let’s kick off the project by creating the first icon of the set.
Step 1
Start by creating the bottom horizontal line using a 2 px thick Stroke, which we will color using #252A2D and then position at a
distance of 2 px from the center of
the active drawing area’s bottom edge.
Step 2
Finish off the icon by adding the remaining lines using two copies (Control-C > Control-F twice) of the one that we’ve just created, which we will vertically stack at a distance of 4 px from the original. Once you’re done, select and group all three of them together using the Control-G keyboard shortcut before moving on to the next reference grid.
6. How to Create the Align Left Icon
As soon as we’ve finished working on the second icon, we can move on to the next active drawing area, where we will quickly put together our next one.
Step 1
Since some of the upcoming icons are based on the one that we’ve just finished working on, we will make a copy (Control-C) of it which we will then paste (Control-F) onto the current reference grid, making sure to click on the underlying Artboard first to make it active.
Step 2
Isolate the middle stroke by double clicking on it, and then shorten its length from 24 px to 16 px—you can do this by selecting its right anchor point using the Direct Selection Tool (A) and then pushing it to the left by 8 px using the Move tool (right click > Transform > Move > Horizontal > - 8 px).
Once you’re done, press the Escape key to exit IsolationMode, and then make a copy (Control-C) of the resulting icon before moving on to the next grid.
7. How to Create the Right Align Icon
Next, we’re going to quickly create the right align icon, so make sure you’re on the right Artboard (that would be the third one) and let’s get started.
Step 1
Paste a copy of the icon that we’ve just finished working on onto the empty active drawing area using the Control-F keyboard shortcut.
Step 2
Adjust the copy that we’ve just created by vertically reflecting it using the Reflect tool (right click > Transform > Reflect> Vertical). Once you’re done, don’t forget to make a copy (Control-C) of the resulting icon, before moving on to the next one.
8. How to Create the Center Align Icon
Since no text editor is complete without a center align option, we’re going to quickly add one in the following moments.
Step 1
Paste a copy of the previous icon onto the fourth Artboard using the Control-F keyboard shortcut so that it places it in exactly the same position.
Step 2
Isolate the middle Stroke of the copy that we’ve just created by double clicking on it, and then center align it to the underlying Artboard using the Align panel’s Horizontal Align Center option. Once you’re done, quickly exit IsolationMode by pressing the Escape key.
9. How to Create the Increase Indent Icon
Move on down to the second row, and then zoom in on the first artboard where we will start working on our next icon.
Step 1
Create the icon’s main shapes using a copy (Control-C) of the justify one, which we will paste (Control-F) onto the current active drawing area and then adjust by isolating and shortening the length of its middle and bottom Strokes from 24 px to 12 px using the Move tool (left anchor points selected > right click > Transform > Move > Horizontal > 12 px).
Step 2
Add the main shape for the right-facing arrow
using an 8 x 12 px rectangle, which
we will color using #252A2D and then position on the left side of the active
drawing area, as seen in the reference image.
Step 3
Finish off the icon by turning the shape that we’ve just created into an arrow by first adding a new anchor point to the center of its right edge using the Add Anchor Point Tool (+), and then removing its top and bottom ones using the Delete Anchor Point Tool (-). Once you’re done, exit Isolation mode, and then make a copy (Control-C) of the entire icon before moving on to the next Artboard.
10. How to Create the Decrease Indent Icon
Assuming you’ve finished working on the previous icon, position yourself on the neighboring Artboard, where we will create its alternate version.
Step 1
Use the Control-F keyboard shortcut to paste a copy of the increase indent icon onto the current active drawing area.
Step 2
Double click on the little arrow to isolate it, and then quickly adjust it by vertically reflecting it using the Reflect tool (right click > Transform > Reflect > Vertical). Once you’re done, don’t forget to exit Isolation Mode using the Escape key before moving on to the next icon.
11. How to Create the Add Space Before Paragraph Icon
As soon as you’ve finished working on the decrease indent icon, we can move on to the next active drawing area, where we will create our next item.
Step 1
Create the main shapes of the icon using a copy (Control-C) of the justify one, which we will paste (Control-F) onto the current Artboard, making sure to center align it to the active drawing area’s bottom edge.
Step 2
Ungroup the copy that we’ve just pasted (right click > Ungroup or Shift-Control-G), and then adjust it by removing its top Stroke line by selecting it and then pressing Delete.
Step 3
Finish off the current icon by adding the down-facing arrow. We will create it using a 12
x 8 px rectangle (#252A2D), which we will adjust by adding a new anchor
point to the center of its bottom edge using the Add Anchor Point Tool (+), and then removing its bottom ones using
the Delete Anchor Point Tool (-).
Once you’re done, select and group (Control-G)
all three shapes together before moving on to the next one.
12. How to Create the Add Space After Paragraph Icon
Next, we’re going to quickly create an alternate version of the icon that we’ve just finished working on.
Step 1
Create a copy (Control-C) of the previous icon, which we will paste (Control-F) onto the empty active drawing area, as seen in the reference image.
Step 2
Ungroup the copy that we’ve just created (right click > Ungroup or Shift-Control-G), and then adjust the icon by flipping the position of its Strokes with its arrow as seen in the reference image, making sure to select and group (Control-G) them before moving on to the next one.
13. How to Create the Type Tool Icon
Assuming you’ve already moved down to the third row, let’s start working on the next category, which has to do with text formatting.
Step 1
Create the upper section of the icon using a 20 x 6 px rectangle with a 4 px thick Stroke, which we will color using #252A2D and then center align to
the active drawing area’s top edge.
Step 2
Open up the path of the shape that we’ve just created by adding a new anchor point to the center of its bottom edge using the Add Anchor Point Tool (+) and then immediately selecting and removing it by pressing Delete.
Step 3
Add the center section using a 20 px tall 8 px thick vertical Stroke
line (#252A2D), which we will center align to the previous shape, as seen in the
reference image.
Step 4
Finish off the icon by creating the bottom
section using a 16 px wide 4 px thick Stroke line (#252A2D), which we will center align to the active
drawing area’s bottom edge. Take your time, and once you’re done, select and
group (Control-G) all three shapes
together before moving on to the next one.
14. How to Create the Bold Icon
Next, we’re going to quickly create one the most used icons in all text editor history, so make sure you’ve positioned yourself on the next Artboard, and let’s jump straight into it.
Step 1
Create the lower section of the icon using a 12 x 12 px square with a 4 px thick Stroke, which we will color using #252A2D and then center align to
the active drawing area’s bottom edge.
Step 2
Quickly adjust the shape that we’ve just created by setting the Radius of its right corners to 6 px from within the Transform panel’s Rectangle Properties.
Step 3
Finish off the current icon by adding the upper
section using an 8 x 8 px square
with a 4 px thick Stroke (#252A2D), which we will adjust
by setting the Radius of its right
corners to 4 px from within the Transform panel’s Rectangle Properties. Once
you’re done, position the resulting shape as seen in the reference image, making
sure to select and group them together afterwards using the Control-G keyboard shortcut.
15. How to Create the Underline Icon
As usual, make your way to the next Artboard, where we will see how to put together the underline icon.
Step 1
Start by creating the lower section using a 24 px wide 4 px thick Stroke line, which we will color using#252A2D and then center align to the active drawing area’s bottom edge.
Step 2
Create the main shape for the “U” letter using a 12 x 14 px rectangle with a 4
px thick Stroke (#252A2D), which
we will center align to the active drawing area’s top edge so that its path
overlaps it.
Step 3
Start adjusting the shape by setting the Radius of its bottom corners to 6 px from within the Transform panel’s Rectangle Properties.
Step 4
Finish off the icon by opening up the path of the shape that we’ve previous adjusted, by adding a new anchor point to the center of its top edge using the Add Anchor Point Tool (+), and then immediately selecting and removing it by pressing Delete. Once you’re done, don’t forget to select and group the two shapes together using the Control-G keyboard shortcut.
16. How to Create the Italic Icon
We are now down to the last icon of the current row, so assuming you’ve already positioned yourself onto the Artboard, let’s create the next item.
Step 1
Create the bottom and upper sections of the “I” shaped letter using two 16 px wide 4 px thick Stroke lines
(#252A2D), which we will position as seen in the reference image.
Step 2
Finish off the current icon by adding the diagonal line connecting the
two horizontal sections using a 4 px thickStroke (#252A2D). As always, once
you’re done, select and group (Control-G)
all three shapes together before moving on to the next one.
17. How to Create the Bring to Front Icon
Assuming you’ve moved down another row, zoom in on its first Artboard and let’s create our next icon.
Step 1
Start by creating the front shape using a 12 x 12 px square with a 4
px thick Stroke, which we will
color using #252A2D and then align to the active drawing area’s top-left
corner.
Step 2
Create the back shape using another 12
x 12 px square with a 4 px thickStroke (#252A2D), which we will align
to the active drawing area’s bottom-right corner.
Step 3
Adjust the shape of the square that we’ve just created by adding a set of new anchor point where its paths intersect those of the first one using the Add Anchor Point Tool (A), making sure to reposition its corner one as seen in the reference image.
Step 4
Finish off the icon by adding a fill to the resulting shape, which we will create using a copy (Control-C) which we will paste in place (Control-F) and then adjust by flipping its Stroke with its Fill (Shift-X). Once you’re done, select and group (Control-G) the two shapes together, doing the same for the entire icon afterwards.
18. How to Create the Send to Back Icon
By now, you already know the drill, so jump on the next Artboard and let’s carry on working on our next item.
Step 1
Create the back shape using a 12
x 12 px square with a 4 px thickStroke (#252A2D), which we will
align to the active drawing area’s top-left corner.
Step 2
Finish off the current icon by adding the front shape using another 12 x 12 px square with a 4 px thick Stroke (#252A2D) and a 12 x
12 px fill shape (#252A2D), which we will group (Control-G) and then align to the active drawing area’s bottom-right
corner. Once you’re done, select and group (Control-G) all of the shapes together before moving on to the next
one.
19. How to Create the Insert Header Icon
Make sure you’ve positioned yourself onto the empty neighboring Artboard, and then let’s get started working on our next icon.
Step 1
Create the upper section using a 20
x 6 px rectangle with a 4 px thickStroke, which we will color using #252A2D and then center align to the active drawing area’s top edge.
Step 2
Add the main shape for the lower section using a 20 x 8 px rectangle with a 4
px thick Stroke (#252A2D), which
we will position so that its bottom path overlaps the edge of the active
drawing area, as seen in the reference image.
Step 3
Open up the path of the shape that we’ve just created by adding a new anchor point to the center of its bottom edge using the Add Anchor Point Tool (+) and then immediately selecting and removing it by pressing Delete.
Step 4
Finish off the icon by adding the little fill segment using a 12 x 4 px rectangle (#252A2D), which we
will center align to the active drawing area’s bottom edge. Once you’re done,
select and group all of the composing shapes together using the Control-G keyboard shortcut.
20. How to Create the Insert Footer Icon
Next, we’re going to quickly create another version of the header icon, so make sure you position yourself onto the next active drawing area, and let’s get started.
Step 1
Create a copy (Control-C) of the previous icon, which we will then paste onto the current Artboard using theControl-F keyboard shortcut.
Step 2
Finish off the current icon by horizontally reflecting the copy that we’ve just created (right click > Transform > Reflect > Horizontal), making sure to center it again afterwards.
21. How to Create the List Icon
Our next item is a must have for any good text editors, so hop on down to the next row and let’s jump straight into it.
Step 1
Create the upper bullet using a 4
x 4 px square, which we will color using #252A2D and then align to the
active drawing area’s left edge, positioning it at a distance of 2 px from its top one.
Step 2
Add the list item using a 16 px wide 4 px thick Stroke line (#252A2D), which we will
position next to the bullet as seen in the reference image, making sure to
select and group (Control-G) the two
together before moving on to the next step.
Step 3
Finish off the icon by creating two copies (Control-C > Control-F twice) of the shapes that we’ve just grouped, which we will vertically stack below at a distance of 4 px from the original. Once you have your shapes in place, don’t forget to select and group all of them together using the Control-G keyboard shortcut.
22. How to Create the Sublist Icon
We now have a list icon, but how about we move on to the next Artboard and create a sub-level one.
Step 1
Start by creating a copy (Control-C) of the previous icon, which we will paste onto the current active drawing area using the Control-F keyboard shortcut.
Step 2
Finish off the current icon by isolating the middle and bottom list items, and then adjusting their length so that their bullets align to the top one as seen in the reference image. Take your time, and once you’re done, exit Isolation Mode by pressing the Escape key.
23. How to Create the Insert Page Break Icon
Number 19 off our items’ list is the page break icon, which we will create in a blink of an eye.
Step 1
Start by creating the center line using a 24 px wide 4 px thick Stroke, which we will color using #252A2D and then center align to the underlying Artboard.
Step 2
Add the main shapes for the pages using two 12 x 6 px rectangles with a 4
px thick Stroke (#252A2D), which
we will position onto the top and bottom edges of the active drawing area as seen
in the reference image.
Step 3
Finish off the icon by opening up the paths of the shapes that we’ve just created by adding a new anchor point to the center of their outer edges and then immediately selecting and removing them using the Delete key. Once you’re done, select and group all three shapes together using the Control-G keyboard shortcut.
24. How to Create the Resize Icon
Next off, we have another simple yet useful tool that most of the time goes overlooked, but not today.
Step 1
Create the icon’s main body using a 20
x 20 px square with a 4 px thickStroke (#252A2D), which we will
center align to the underlying Artboard.
Step 2
Finish off the current icon by creating a smaller 12 x 12 px square with a 4 px thick Stroke (#252A2D), which we will align to the active drawing area’s
bottom-right corner. Once you’re done, don’t forget to select and group (Control-G) the two together before
moving on to the next one.
25. How to Create the Shapes Icon
We are now down to our sixth and last row of icons, so assuming you’ve already positioned yourself onto the first of its Artboards, let’s create our next item.
Step 1
Start by creating a 16 x 16 px
circle with a 4 px thick Stroke, which we will color using #252A2D and then
align to the active drawing area’s top-left corner.
Step 2
Add a smaller 12 x 12 px square with a 4
px thick Stroke (#252A2D), which
we will position on the circle as seen in the reference image.
Step 3
Finish off the current icon by adding a set of new anchor points to the edges of the square where the two paths overlap using the Add Anchor Point Tool (+), and then selecting and removing its corner one using the Delete key. As always, don’t forget to select and group (Control-G) the two shapes together once you’re done.
26. How to Create the Chart Icon
If you love charts, you’ll be happy to know that we’re going to be building one of our own in the following moments.
Step 1
Create the lower section of the icon using a 24 px wide 4 px thick Stroke line (#252A2D), which we will
center align to the active drawing area’s bottom edge.
Step 2
Add the vertical chart segments using three 16 px tall 4 px thick Strokes (#252A2D), which we will
position 4 px from
one another horizontally, and then center align them to the active drawing area’s top edge.
Step 3
Finish off the chart, by adjusting the length of its outer vertical segments as seen in the reference image. Take your time, and once you’re done, make sure you select and group (Control-G) all of the icon’s composing shapes before moving on to the next one.
27. How to Create the Table Icon
The next item off our list is one that you probably use quite a lot, so make sure you position yourself onto the next Artboard, and let’s quickly learn how to create it.
Step 1
Start working on the upper section by creating an 8 x 8 px square with a 4 px
thick Stroke (#252A2D), which we
will align to the active drawing area’s top-left corner.
Step 2
Add a wider 12 x 8 px one
with the same 4 px thick Stroke (#252A2D), which we will
position onto the square’s right side so that their outlines overlap.
Step 3
Create the left shape for the icon’s lower section using an 8 x 12 px rectangle with a 4 px thick Stroke (#252A2D), which we will align to the active drawing area’s
bottom-left corner.
Step 4
Finish off the current icon by adding a 12 x 12 px square with a 4
px thick Stroke (#252A2D) in the
lower-right corner of the active drawing area, making sure to select and group
all four shapes together afterwards using the Control-G keyboard shortcut.
28. How to Create the Ruler Icon
We are now down to our last icon, so make your way to the remaining Artboard, and let’s wrap things up!
Step 1
Create the upper section of the ruler using a 20 x 6 px rectangle with a 4
px thick Stroke (#252A2D), which
we will center align to the active drawing area’s top edge.
Step 2
Finish off the icon, and with it the project itself, by adding a 6 x 20 px rectangle with a 4 px thick Stroke (#252A2D), which we will center align to the active drawing
area’s left edge. As always, once you’re done, don’t forget to select and group
(Control-G) the two shapes together
before hitting that save button.
Great Job!
It might have been a longer one than usual, but if you made it to the end, you should now have a nice little practical icon set that you can put to use in any future project.
As always, I hope you’ve managed to keep up with each and every step and learned something new and useful along the way.
That being said, if you have any questions, feel free to post them within the comments section and I’ll get back to you as soon as I can!
