How to Create a Text Editor Icon Set in Adobe Illustrator

Post pobrano z: How to Create a Text Editor Icon Set in Adobe Illustrator

Final product image
What You’ll Be Creating

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
setting up a new document

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
setting up a custom grid

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
setting up the layers

4. How to Create the Reference Grids

The
reference 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.

creating the main shape for the reference grid

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.

creating the main shape for the active drawing area

Step 3

Select and group the
two squares together using the Control-G
keyboard 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.

adding the remaining reference grids

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.

creating the bottom line for the justify icon

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.

finishing off the justify icon

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.

creating the main shapes for the left align icon

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 Isolation
Mode, and then make a copy (Control-C) of the resulting icon before
moving on to the next grid.

finishing off the left align icon

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.

creating the main shapes for the right align icon

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.

finishing off the right align icon

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.

creating the main shapes for the center align icon

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 Isolation Mode by
pressing the Escape key.

finishing off the center align icon

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
).

creating and adjusting the main shapes for the increase indent icon

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.

creating the main shape for the arrow of the increase indent icon

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.

finishing off the increase indent icon

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.

creating the main shapes for the decrease indent icon

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.

finishing off the decrease indent 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.

creating the main shapes for the add space before paragraph icon

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.

adjusting the shapes of the add space before paragraph icon

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.

finishing off the add space before paragraph icon

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.

creating the main shapes for the add space after paragraph icon

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.

finishing off the add space after paragraph icon

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.

creating the upper section of the type tool icon

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.

opening up the path of the upper section of the type tool icon

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.

adding the vertical section to the type tool icon

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.

finishing off the type tool icon

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.

creating the lower section of the bold icon

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.

adjusting the lower section of the bold icon

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.

finishing off the bold icon

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.

creating the lower section of the underline icon

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.

creating the upper section of the underline icon

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.

adjusting the upper shape of the underline icon

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.

finishing off the underline icon

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.

creating the bottom and upper sections of the italic icon

Step 2

Finish off the current icon by adding the diagonal line connecting the
two horizontal sections using a 4 px thick
Stroke (#252A2D). As always, once
you’re done, select and group (Control-G)
all three shapes together before moving on to the next one.

finishing off the italic icon

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.

creating the front shape of the bring to front icon

Step 2

Create the back shape using another 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.

creating the back shape of the bring to front icon

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.

adjusting the back shape of the bring to front icon

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.

finishing off the bring to front icon

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 thick
Stroke (#252A2D), which we will
align to the active drawing area’s top-left corner.

creating the back shape of the send to back icon

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.

finishing off the send to back icon

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 thick
Stroke, which we will color using #252A2D and then center align to the active drawing area’s top edge.

creating the upper section of the insert header icon

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.

creating the lower section of the insert header icon

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.

adjusting the lower section of the insert header icon

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.

finishing off the insert header icon

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 the
Control-F keyboard shortcut.

creating the main shapes for the insert footer icon

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.

finishing off the insert footer icon

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.

creating the main bullet for the list icon

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.

adding the top horizontal line to the list icon

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.

finishing off the list icon

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.

creating the main shapes for the sublist icon

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.

finishing off the sublist icon

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.

creating the center line for the insert page break icon

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.

adding the main rectangles for the insert page break icon

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.

finishing off the insert page break icon

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 thick
Stroke (#252A2D), which we will
center align to the underlying Artboard.

creating the main shape for the resize icon

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.

finishing off the resize icon

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.

creating the circle for the shapes icon

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.

adding the square to the shapes icon

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.

finishing off the shapes icon

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.

creating the lower section of the chart icon

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.

adding the vertical lines to the chart icon

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.

finishing off the chart icon

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.

creating the smaller square for the table icon

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.

adding the top rectangle to the table icon

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.

adding the bottom rectangle to the table icon

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.

finishing off the table icon

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.

creating the upper section of the ruler icon

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.

finishing off the ruler icon

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!

finished project preview