Description

In this tutorial we will be creating a  nice looking and useful pixel

icon which can be used in any software application related to networks.

Objectives

In this tutorial we will be creating a cool icon for software

application.

• Learn how to draw a simple pixel drawing using pencil tool.
• Using gradient.
• Adding pixel shades.

Final Result:

Step 1:

Create a 35×35 pixel file. Create a new layer by pressing shift+control+n

together. Either use control+’+’ or zoom tool to zoom upto 1200%.

Step 2:

Set the foreground to black. Select 1 pixel wide pencil and draw this

shape.

Step 3:

Draw another shape under the box with the pencil.

Step 4:

Select Rectangular Marquee Tool and select inside the box

as shown in the figure.

Step 5:

Now, we will use Gradient Tool to fill the selection. For that, set the

foreground color to #245C29 and

background to
#316659. Click on  Gradient tool. Select

foreground to background gradient type and linear

gradient to fill the selection.

Image after filling the selection with gradient tool.

Step 6:

Draw 3 small lines with pencil tool. Change their colors as shown in the

figure.

Step 7:

Draw a line below the ‘Monitor’.

Step 8:

Draw another line as shown in the figure.

Actual view of our newly created drawing.

Step 9:

Duplicate and place the first layer as shown in the figure.

Step 10:

Zoom upto 700% and draw three black color lines connecting the monitors.

Now view the actual size of the file. Our icon is ready

First off create a new image document, I made it 100 x 50 pixels, now you need to use the paintbucket tool to fill the background with #D5D3BF.

After you create the new image with the background color set the foreground color to #313025 and pull out your pencil tool set it’s width to 1 pixel, create a new layer and draw a shape like below.

I found it very helpful to zoon im using the zoom tool so it was like this

Now use the wand tool to click inside of the black outline and select inside of it. Then create a new layer .

Now be sure that the new layer is selected (layer 3) and set your foreground color to #9F9B74, then pull out the paintbucket tool and click inside of your selected area to fill it with that color:

Now comes the fun part we’re going to make a highlight of the button, first set the foreground color to #B7B391, then using the pencil tool draw a 1 pixel line around the top left hand corner of the button like so, be sure you have created a new layer

Now simiarly we are going to create a shadow, pull out the pencil tool again and set the foreground color to #797353, then in the bottom right hand corner of the button draw the shadow, it should look like this

In this tutorial we will be covering the Basics of Icon creation by creating a ‘monitor’ icon like below. We will be using the Pen tool and be practicing a fairly common illistration technique for icon development.

First create a new document, I made mine 400 x 400 pixels with a white background. Next pull out the pen tool , and then configure your brush tool to be 3 pixels wide. (make sure you configure the brush tool like below) Also be sure to create a new layer over the background layer.

Next with the pen tool

create a shape like below. Note that I am zoomed in, in this picture.

Now right click in the area and select stroke path (pictured above), when the dialouge box comes up choose the following options.

Press ok, then right click and choose Delete Path you should come out with the following:

Next you will need to use the pen tool again and create lines like the following image

Now this part will probably

be the hardest part so you may mess up a few times but keep at it until you get a good curve. With the pen tool, and on the same layer make a path like below (to do curves when you click the second time, drag the mouse around to configure the curve.

Stroke the path again and zoom out to make sure it looks right, do the same thing to the other side of the computer monitor.

Now make two lines like below.

Now you need to make the curve for the stand, make it look like below

You are now completed with the outline of the computer!

Proceed to the next page to see how to color it

Page 1 2 next