Icons are graphical symbols that represent a thing, group of things, function, or actions. These usually aid readers to understand a text or a paragraph in a form of an image. Icons play a vital role in making a website effective and at the same time, attractive. Whether purchased, downloaded for free, or originally created by you, it gives value to your work and gives your site that “personal touch.” Today, I’ll teach you how to create your own icon by using Adobe Photoshop. The things needed to create an icon are the following:

  • Sketch and doodles of your desired icon
  • Adobe Photoshop CS6 software (there are also FREE image editing softwares like GIMP and INKSCAPE if you don’t have Photoshop)
  • Color Palette of choice

At the end of this post, you will be able to make this icon:

Finished Icon

Let’s get started!

Step 1: Set up your Document

Create a NEW Document in Photoshop 500px by 500px. Then, open your sketch or doodle in the program.

Step 1a

Copy your sketch and paste it on the new Document that you created. You may resize it to the size that you want. In my case, I gave a 10px allowance on every side to be sure. (To do this, you may use guidelines – Ctrl+R and drag the lines from the ruler on top and on the side)

Step 1b

Step 2: Pre-Check

Before creating your first basic shape, note what colors you want to use in this project. You can get color inspiration from different sites like Colour Lovers or Kuler. Add a new layer and try to decide what color goes where. If you’re happy with the color combination you have chosen, proceed to Step 3.

Step 2

Step 3: Create your first Basic Shape

There are different approaches to work your way around your icon design and the one we will use involves Photoshop’s installed basic shapes. Take a look at your sketch and figure out the shapes that comprise it. In the example sketch that we have in this tutorial, there are three shapes that can be observed at first glance: a rectangle with rounded corners, circles, and a slightly irregularly shaped oblong (see: magnifying glass handle).

Creating basic shapes is simple. First, you may press the letter U in your keyboard to activate the shapes tool. By default, pressing U will give you a Rectangle tool. You may look for the rectangle symbol in your toolbar (found usually on your far left). Make a new layer. Select the Rounded Rectangle tool, change its fill color to #6dcff6 (that’s the light blue color), its radius to 40px, and create the shape onto your sketch.

Step 3

We just made a rectangle with rounded corners. The upper left corner should have a straight line. We need to use our Direct Selection Tool (press A on your keyboard) and click on the newly made shape. You will then see anchor points (the little square dots) and their handle (the little circle dots). Click on the handle and press shift and simultaneously drag it down. The other handle, drag it to the right. To make it wider, use the Direct Selection tool again this time drag the anchor point to the right while holding the shift key. Then, drag the other anchor point to the bottom while holding the shift key. (Kindly refer to the illustration below)

Step 3a

Let’s now add the fold. To add the upper left fold, add a new layer, select the Rounded Rectangle Tool again, select the color #00a99d (that’s the blue green color), and then create the shape on top. After creating the shape, go to the layers panel, right click it and select Create Clipping Mask.

Step 3b

Step 4: Combine different shapes

Now that we’re done with the rounded rectangles, we will proceed with the magnifying glass. Let’s start off by adding a new layer and selecting the Ellipse Tool (press U or Shift + U to toggle between shapes). Select the color #e2d95d (dark yellow) and create a big circle on the layer.

To make the handle, create a new layer again, and this time, select the Rounded Rectangle Tool. Make its radius to 100px so that it will give us a nice oblong shape. Create the shape onto the layer and resize it until it fits the sketch. To “transform” the shape, press Ctrl + T or go to Edit > Free Transform. Rotate the shape until its in place. Once in place, press Ctrl and Shift while dragging the corners to adjust the shape as shown below.

Step 4

Step 4a

To make the highlight, select the circle and the handle layer by pressing Shift and clicking onto their respective layers. Right Click and Merge Shapes. Now, we will create the “flat” highlight on the magnifying glass by using the Rectangle Tool. Set your color to #f8ee65 (lighter shade of yellow) and then create the rectangle – adjust the angle and the size by using the Free Form Tool (press T).

Step 4c

To finish the magnifying glass look, Add a new layer, select the Ellipse Tool again and this time the color should be white #ffffff (or any color lighter than yellow). Create the shape and adjust the opacity if you like.

Step 4b

Step 5: Adding Details

To make the highlight, Add a new layer again. We will use the Pen Tool (which needs a little practice) – press P. Set it to shape (refer to image below).Create the desired shape by putting points around and pulling the handles to make specific curves. Yes, this needs practice.

Step 5

To adjust the shape, use the Direct Selection Tool (press A) and click on the anchor points or handles to get your desired shape.

Step 5a

For an added uniform effect, Add a highlight over the blue paper to get the look (following the same steps in Step 4). To finish the design, add a dark circle behind all the layers to give us that icon look. Remove the sketch from the layer to make it transparent, save it as a .png file. There you have it. Your very own icon! 🙂

If you want to practice using my sketch, below is the download link. I also made a Free Icon Set ready for download.

[att_button color=”rosy” url=”http://clevrrrr.com/wp-content/uploads/2013/08/icon-sketch-Clevrrr.jpg” title=”Download Icon Sketch” target=”blank” border_radius=”100px”]Download Sketch[/att_button]

*** If you like this tutorial, I would appreciate you telling your friends about Clevrrr by sharing this to your Social Network! Just select the button of your choice below… Thanks!

Pin It on Pinterest

Share This