Top
Create a Color Picker Icon In Illustrator - Colorburned
fade
46520
single,single-post,postid-46520,single-format-standard,eltd-core-1.0,flow-ver-1.0.1,eltd-smooth-scroll,eltd-smooth-page-transitions,ajax,eltd-blog-installed,page-template-blog-standard,eltd-header-vertical,eltd-fixed-on-scroll,eltd-default-mobile-header,eltd-sticky-up-mobile-header,eltd-menu-item-first-level-bg-color,eltd-dropdown-default,wpb-js-composer js-comp-ver-4.9.2,vc_responsive

Create a Color Picker Icon In Illustrator

In this tutorial I will show you how to create a color picker icon from some blends, gradients, and simple shapes. This icon works great for web design project and in user interface design. Moreover, you can use the techniques in this tutorial in other icon, web, and print projects. Let’s get started!

Final Image

Take a look at what we will be creating.

color-picker-icon_final

Preparation

There isn’t much preparation needed for this tutorial. All you need is Illustrator CS4 or CS5 and a beginning to intermediate knowledge of how to use the program.

Step 1

With the Line Segment Tool (/), create a path that is about 80 px tall. Make sure the new path has a 1 pt stroke and change the stroke color to an orange.

color-picker-icon_01

Step 2

With the line selected, choose Effect > Distort and Transform > Transform. In the Transform Effect dialog, change the number of copies to 6, select the bottom center reference point in the Reference Point Locator, and set the Angle to 60. Generating six copied will place one copy in front of the original. We want to do this so we will have a complete blend in the next couple of steps.

color-picker-icon_02

Step 3

With the transformed line selected, choose Object > Expand Appearance and Ungroup (Command +Shift + G). Change to stroke colors to primary (red, yellow, blue) and secondary colors (orange, purple, green).

color-picker-icon_03

Step 4

Select all the strokes and choose Object > Blend > Make (Command + Alt/Option + B).

color-picker-icon_04

Step 5

Create an ellipse within the blend with the Ellipse tool (L) centered over the blend. Select the ellipse and blend and choose Object > Clipping Mask > Make (Command + 7).

color-picker-icon_05

Step 6

Create another ellipse about half the height and slightly smaller width as the previous ellipse. Place it close to the top side of the masked blend. Change the fill of the new ellipse to a linear gradient and in the Gradient panel, change the Location to -90, change both colors stops to white, change the opacity of the second color stop to 0, and change the middle point Location to 30.

color-picker-icon_06

Step 7

Copy (Command + C) the highlight ellipse and Paste in Front (Command + F). Move and rotate the copy to the bottom side of the mask blend. Change the first color stop in the gradient to a light gray and set the Blending Mode to Multiply from the Transparency panel.

color-picker-icon_07

Step 8

Create another ellipse about the size of the main masked blend and fill it with a radial gradient. Make sure the first color stop in the radial gradient is black and the second is white. Squish the ellipse and place it behind all other artwork. Set the Blending Mode of the ellipse to Multiply and change the opacity to 50 percent.

color-picker-icon_08

Step 9

Now that we have the color wheel done, we can concentrate on the eyedropper. Create a rectangle with the Rectangle tool (M) about three fourths the height of the color wheel. Create another smaller rectangle about a fifth the height of the main rectangle and half its width and place at the bottom of the main rectangle.

color-picker-icon_09

Step 10

Select both rectangles and press the Unite button from the Pathfinder panel. Next, choose Effect > Stylize > Round Corners. In the Round Corner Dialog, change the Radius to 3 px. Next, choose Object > Expand Appearance.

color-picker-icon_10

Step 11

Copy (Command + C) the eyedropper shape and Paste in Front (Paste in Front). Create another rectangle that covers the bottom part of the eyedropper. Select the main copy and the smaller rectangle and press the Intersect button from the Pathfinder panel.

color-picker-icon_11

Step 12

Create a rectangle towards the top of the main eyedropper shape. Make the new rectangle about double the width and one sixth the height of the main eyedropper shape. Next, choose Effect > Stylize > Round Corners and in the Round Corner Dialog, change the Radius to 5 px.

color-picker-icon_12

Step 13

Create another rectangle slightly wider and about a fourth the size of the main eyedropper shape. Place the shape towards the top of the previous rectangle and round the corners 15 px.

color-picker-icon_13

Step 14

Select the top eyedropper shapes and go Object > Expand Appearance. Next, go Object > Path > Offset Path and in the Offset Path dialog change the Offset to -2 px. This value might be different depending on the original size of your shapes.

color-picker-icon_14

Step 15

Now that we have all the shapes done for the eyedropper, we can place them over the color wheel we already created. Creating the shapes and not filling in before we place the dropper makes it easier to see the white and transparency parts of the gradients when we fill them. So, place your eyedropper shapes over the color wheel at a 45 degree angle.

color-picker-icon_15

Step 16

First, select the smaller rectangle and its offset from the top of the dropper and go Object > Arrange > Bring To Front (Command + Shift + ]). Select the original top shapes (not the offsets) and fill with a linear gradient. Change the first color stop in the gradient to a dark gray and the second color stop to black. Change the Angle to -90 in the Gradient panel.

color-picker-icon_16

Step 17

Select the offsets of the upper rectangle shape and fill with a linear gradient. Change both color stop in the gradient to white. In the Gradient panel, change the opacity of the first color stop to 80 and the second to 0. Change the Angle to -90 and change the middle point Location of the gradient to 15.

color-picker-icon_17

Step 18

Select the main body of the dropper and fill with a linear gradient. For this gradient we are going to add three more color stop giving a total of five. Add these color stop by clicking right below the Gradient Slider in the Gradient panel. Once you added the color stop, change the first stop to gray, the next three to white, and the last one a dark gray. Change the Opacity of the first white color stop to 56 and change the Opacity of the third white color stop to 35. Change the Location of the first white color stop to 12, the Location of the second white color stop to 30, and change the Location of the third white color stop to 63. Change the Angle of the gradient to -45. Finally change the stroke to white and press the Align Stroke To Outside button from the Stroke panel.

color-picker-icon_18

Step 19

Select the shape at the bottom of the drop and fill it will a linear gradient. Change the first color stop to white and the second to a gray color. From the Transparency panel, change the Blending Mode to Multiply.

color-picker-icon_19

Step 20

Select the main small rectangle from the top of the dropper, Copy (Command +C), and Paste in Back (Command + B). With the copy still selected move it slightly down. Select the main dropper shape, Copy (Command + C), and Paste in Front (Command + F). Select both copies and press the Intersect button from the Pathfinder panel. Change the fill to a light gray color, change the Blending Mode to Multiply from the Transparency panel and slightly scale it to fit over the stroke of the main dropper shape.

color-picker-icon_20

Step 21

Select the main dropper shape, the main top shapes, and Copy (Command + C) and Paste in Back. With the copies still selected, press the Unite button from the pathfinder panel. With the Selection tool (V) move and rotate the new shape clockwise to create a shadow of the dropper.

color-picker-icon_21

Step 22

Create a ellipse the size of the color wheel, select the ellipse and shadow shape, and Intersect them.

color-picker-icon_22

Step 23

Select the new shape and go Object > Arrange > Send Backward (Command +[) until the shape is behind the original eyedropper shapes. Fill the shape with a linear gradient, change the first color stop to a dark gray, and the second color stop to a light gray. Change the Blending Mode to Multiply from the Gradient panel and you are all done!

color-picker-icon_23

Conclusion

That wasn’t too bad was it? This tutorial uses some pretty basic concept that can easily be applied to other vector illustrations, icons, and more. What can you come up with?

color-picker-icon_final

Ryan Putnam

Ryan Putnam (Rype) runs <a href="http://vectips.com">Vectips.com</a>, a site dedicated to Illustrator tips, tricks, and tutorials. In addition, he run the small design studio <a href="http://rypearts.com">Rype Arts</a>, he's a contributing author and artist to the Adobe Illustrator WOW! CS4 and CS5 books, and writes for many vector and Illustrator related blogs. You can find him on Twitter <a href="http://twitter.com/vectips">@Vectips</a> and <a href="http://twitter.com/rypearts">@RypeArts.</a>

  • http://ialfred.com Alfred R. Baudisch

    I can’t make Step 4 work (Object > Blend > Make).. I just got 4 more colored lines, not a full colored solid shape. Any tips?

    I started the tutorial from scratch and got the same result, so I think I’m following 100%.

    Thanks!

  • http://philwebservices.i.ph/ John Paul

    Very nice icon ,the combination of colors are so alive .
    Thanks for the great post .BOOKMARKED
    .-= John Paul´s last blog ..The Serious Risks of Black Hat SEO =-.

  • http://www.iconfinder.com Martin LeBlanc

    Great tutorial and end-result.

  • http://www.cutelittlefactory.com Andrea Austoni

    Great work as always from Ryan. This is correctly executed as an icon: clean, cute and colorful.
    .-= Andrea Austoni´s last blog ..HandyEtat Icons and Interface =-.

  • http://www.bebop-cafe.com BebopDesigner

    Excellent tut! Love the result… looks amazing.
    Thanks for sharing

  • http://talks.designcentric.in Varun

    Really nice , loved your techniques.
    .-= Varun´s last blog ..About Me =-.

  • http://www.diegomonzon.com Diego Monzon

    Great tutorial and beautiful icon

  • http://magg.us Codrin Sava

    @Alfred you need to adjust the settings of the blend: Object/Blend/Blend options. You should select ‘Smooth colour’ from the Spacing drop-down. If that doesn’t work, select ‘Specified steps'(like I did) enter a high number, somewhere around 300, check ‘Preview’, you should see the blend.

    Otherwise cool tut. I had fun doing it. Thanks Ryan.

  • http://tookooldoggies.blogspot.com Elena

    This is a great tutorial. Anything with the blend tool is a good thing. Thanks for making a complex object look simple.
    .-= Elena´s last blog ..Guess Whos Going On A Diet =-.

  • http://shahrez.carbonmade.com Shahrez Rafiq

    Have never been good with Illustrator but following this tut is like piece of cake. Great tutorial with stunningly beautiful icon.

  • http://webdesigners.ca/ Web Designers

    Great tutorial

  • http://squareart.co.za squareart

    Wasn’t going to read this – was about to close window and I started scrolling down, and got hooked. Great Tut, with a few nicely added tips.

  • http://www.welcome2solutions.com Paromita

    Very good tutorial.

  • http://dariocalonaci.ueuo.com/ Dario Calonaci

    Great tutorial Rype, I love this icon…

  • http://www.blog.adrice.co.uk Adie

    Thats a really cool looking icon. Will give this a go
    .-= Adie´s last blog ..Tips On Creating A Mobile Website =-.

  • http://macxim.posterous.com Maxime

    Thanks for the tutorial.
    Here is what I came up with: http://post.ly/12FIw
    Thanks for watching. Feel free to comment and criticize.

  • http://www.taxi9.com.ua/ taxi dnepr

    Very interesting AI tutorial, thanks

  • http://www.anastasiia-ku.com ychty

    Really nice tut indeed!
    .-= ychty´s last blog ..Free Vector Alphabets in English and Russian new RB designs =-.

  • http://www.redchillimedia.com Sachin Gupta

    Excellent tutorial! It’s a complete tutorial for everyone specially for the beginners that wants to design with yourself.
    .-= Sachin Gupta´s last blog ..Web Hosting =-.