In the following tutorial you will learn how to create a price range filter which would look great in a mobile phone app or website interface. We’ll be working in Adobe Illustrator with some basic tools to create an essential element for any designers portfolio.
Step 1
Open Illustrator and hit Command + N to create a New document. Enter 600 in the width box and 300 in the height box then click on the Advanced button. Select RGB, Screen (72ppi) and make sure that the "Align New Objects to Pixel Grid" box is unchecked before your click OK.
Enable the Grid (View > Show Grid) and the Snap to Grid (View > Snap to Grid). You’ll need a grid every 1px. Simply go to Edit > Preferences > Guides > Grid, enter 1 in the Gridline every box and 1 in the Subdivisions box. You can also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Do not forget to replace the unit of measurement to pixels from Edit > Preferences > Unit > General. Al these options will significantly increase your work speed.
Step 2
Using the Rectangle Tool (M), create a 301 by 3px shape and fill it with R=50 G=50 B=50. Select this thin rectangle, focus on the Appearance panel (Window > Appearance) and add a second fill using the Add New Fill button (pointed by the arrow in the following image). Select this new fill, set its color at R=25 G=25 B=25 and go to Effect > Path > Offset Path. Enter a -1px Offset and click OK. Return to the Appearance panel, make sure that no fill or stroke is selected and go to Effect > Stylize > Rounded Corners. Enter a 1.5px radius and click OK.
Step 3
Focus on the left side of the shape made in the previous step. Using the Rectangle Tool (M), create two, 1 by 3px rectangles. Fill both shapes with R=50 G=50 B=50, place them as shown in the first image then turn them into a compound path (Object > Compound Path > Make). Select this fresh compound path and go to Effect > Stylize > Rounded Corners. Enter a 0.5px radius, click OK and go to Effect > Distort & Transform > Transform. Enter the data shown in the third image and click OK.
Step 4
Using the Rectangle Tool (M), create two, 1 by 4px rectangles. Fill both shapes with R=50 G=50 B=50, place them as shown in the first image then turn them into a compound path (Object > Compound Path > Make). Select this fresh compound path and go to Effect > Stylize > Rounded Corners. Enter a 0.5px radius, click OK and go to Effect > Distort & Transform > Transform. Enter the data shown in the third image and click OK.
Step 5
With the Rectangle Tool (M), create a 359 by 96px shape, fill it with the linear gradient shown below, send it to back (Shift + Control + [ ) and place it as shown in the following image.
Step 6
Reselect the rectangle made in the previous step, focus on the Appearance panel, add a second fill, set its color at R=210 G=210 B=210 and drag it in the bottom of the panel. Return to the first fill, select it and go to Effect > Distort & Transform > Transform. Enter the data shown in the following image and click OK.
Step 7
Reselect the rectangle made in the fifth step, focus on the Appearance panel, add a third fill and drag it in the bottom of the panel. Select this new fill, add the linear gradient shown in the following image and go to Effect > Path > Offset Path. Enter a 1px Offset and click OK.
Step 8
Reselect the rectangle made in the fifth step, focus on the Appearance panel, make sure that no fill or stroke is selected and go to Effect > Stylize > Rounded Corners. Enter a 3px radius, click OK and go to Effect > Stylize > Drop Shadow. Enter the data shown in the top window, click OK and go again to Effect > Stylize > Drop Shadow. Enter the data shown in the middle window, click OK and go once again to Effect > Stylize > Drop Shadow. Enter the data shown in the bottom window and click OK. In the end your shape should look like in the following image.
Step 9
Using the Ellipse Tool (L), create a 9px circle, fill it with R=88 G=88 B=88 and place it as shown in the following image.
Step 10
Reselect the shape made in the previous step, focus on the Appearance panel and add a second fill. Select it, set the color at R=190 G=190 B=190 and go to Effect > Path > Offset Path. Enter a -1px Offset and click OK.
Step 11
Reselect the circle made in the ninth step, focus on the Appearance panel and add a third fill. Select it, add the linear gradient shown in the following image and go to Effect > Path > Offset Path. Enter a -1px Offset, click OK and go to Effect > Distort & Transform > Transform. Enter the data shown in the following image and click OK.
Step 12
Reselect the circle made in the ninth step, focus on the Appearance panel and add 1pt stroke. Select it, set the color at black, align it to outside and lower the opacity to 20%. Keep focusing on the Appearance panel and add a second stroke for this shape using the Add New Stroke button (pointed by the arrow in the following image). Select this new stroke, make it 1pt wide, set the color at R=50 G=50 B=50 and align it to inside.
Step 13
Reselect that 9px circle and make a copy in front (Control + C > Control + F). Select it and move it 84px to the right as shown in the following image.
Step 14
Reselect the thin rounded rectangle made in the second step and make a copy in front (Control + C > Control + F). Select this copy and resize it as shown in the following image. Keep the height set at 2px, but decrease the width to 85px. Move to the Appearance panel and change the color properties for this new shape. First, select the fill and set the color at R=0 G=69 B=33 then select the stroke and set the color at R=57 G=181 B=74. In the end things should look like in the third image.
Step 15
Reselect the compound paths made in Steps 3 and 4 and go to Effect > Stylize > Drop Shadow. Enter the data shown in the following image and click OK.
Step 16
Using the Type Tool (T), add some simple text as shown below. Use the text properties and the color codes shown in the following image.
Step 17
Reselect the text pieces added in the previous step and add the Drop Shadow effects shown in the following image.
Step 18
Finally, you can easily change the overall color of your main shape. Reselect the grey rectangle made in the fifth step, focus on the Appearance panel, add a new fill and make sure that it goes in the top of the panel. Select it, set the color at R=196 G=154 B=108, lower its opacity to 70%, change the blending mode to Color and go to Effect > Path > Offset Path. Enter a 1px Offset and click OK. Clearly, you can pick a different color for this new fill, you can try some other blending modes or you can increase/decrease the opacity percentage. There are countless possibilities.
Conclusion
Now your work is done. Here is how it should look.
