Always wanted to learn how to create a filter icon, but never knew exactly where to start?
Well, if that’s the case then you’re in luck, since in this video I’m going to walk you through the entire process and show you how to create two variations of the same icon using Adobe Illustrator.
If you’re new to icon design and feel like learning more about how to make icons, then this minimal icon project should be a great starting point!
You can view this video and many more on our Envato Tuts+ YouTube Channel.
How to Make a Filter Icon in Adobe Illustrator
Assuming you already have the software running in the background, bring it up and let’s get started!
As with every new project, we’re going to start
by setting up a new document. Head over to File > New, or use the Control-N
keyboard shortcut, which will bring up the following window.
Here, we’ll want to set our Profile to Web and increase the Number of Artboards to 2, positioning them 32 px from
one another. Moving on down, we’re going to set both the Width and Height of our Artboards
to 32 px.
As soon as we hit OK, we can start working on
our little project by opening up the Layers
panel and creating a secondary layer, naming them both so that we can
separate our icons from our reference grids.
Position yourself on the bottom layer, and
let’s create the main shape for our reference surface using a 32 x 32 px square, which we will color
using a dark orange (
#F15A24), making sure to center align it to the left Artboard
Add the active drawing area using a 28 x 28 px square, which we will color
using white (
#FFFFFF) and then position in the center of the previous shape, making sure
to select and group both of them together using the Control-G keyboard shortcut.
Quick tip: while basic, this reference grid will give us an
all-around 2 px protective padding,
which should prevent our icon from being clipped when used by other people.
Once you’re done, create a copy (Control-C) of the resulting
grid and then paste (Control-F) it onto the secondary Artboard.
As soon as we’ve finished setting up the grids,
we can lock the current layer and then move on up to the second one, where we
will start working on the actual icons.
Position yourself on the first Artboard, and then create the upper
section of the funnel-shaped symbol using a 24 x 12 px rectangle, which we will color using a dark grey (
then position at a distance of 2 px
from the center of the active drawing
area’s top edge.
Add the funnel’s lower body using a 6 x 12 px rectangle (
#4D4D4D), which we will
position below the previous one, so that their inner-facing paths overlap.
Next, we’re going to adjust the shape of the
larger rectangle by individually selecting its bottom anchor points using the Direct
Selection Tool (A) and then dragging them to the inside so that they end
up overlapping those of the smaller shape.
Adjust the lower shape by selecting its
bottom-right anchor point and then
pushing it to the top by 4
px using the directional arrow keys.
Once you’re done, select both shapes and combine them into a single larger one by opening up the Pathfinder panel and using its Unite Shape Mode.
Give the resulting
shape an outline by creating a copy (Control-C), which we will paste in front (Control-F). Flip its Fill with
its Stroke using the Shift-X keyboard shortcut, and then
open the Stroke panel and
set its Weight to 4 px and its Corner to Round Join.
As soon as we’ve added the outline, we can select and group the two
together using the Control-G
Since we’re pretty much done working on the
first icon, we can position ourselves on the second Artboard, where we will build our second one.
Start by creating the main shape for the center
dial using a 4 x 28 px rounded
#4D4D4D) with a 2 px Corner Radius,
which we will center align to the underlying Artboard.
Add the knob using a smaller 8 x 4 px rounded rectangle (
#4D4D4D) with a 2 px Corner Radius, which we will
position 8 px from
the previous shape’s top anchor point.
Once we have both shapes in place, we can select
and then group them together using the Control-G
Create the left and right sliders using two
copies (Control-C > Control-F twice) of the one that we’ve just finished working on, which we will then align
to the side edges of the active drawing
All we have to do
now is horizontally reflect the two copies, by first selecting them both and
then right-clicking and going
to Transform > Reflect >
Since at this point we’re pretty much done, we can select and group (Control-G) all
of the icon’s composing shapes so that they won’t get separated by accident.
As always, I hope you had fun watching this video and most importantly managed to learn something new and useful during the process!
Further Expand Your Icon-Building Skills!
Just finished going through this quick tutorial, and feel like learning more?
Well, if that’s the case, you’re in luck, since I took the time to put together this little list that should keep you going for the following days!
How to Make Icons
The Do’s and Don’ts of Creating Line Icons
10 Styles That Have Changed the Face of Icon Design
How to Scale Icons Correctly in Adobe Illustrator
How to Create Pixel-Perfect Artwork Using Adobe Illustrator
Illustrator in 60 Seconds: How to Create an Emoji Icon
How to Create a Text Editor Icon Set in Adobe Illustrator
How to Create 10 Common Icons and Their Variations in Adobe Illustrator
How to Create a Food Groups Icon Pack in Adobe Illustrator
Go to original Source
Powered by WPeMatico