Network Icon in Photoshop

Network Icon in Photoshop

This tutorial has been viewed: 5401 times


Page 1 of 1


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.


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


  • 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


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


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 :)

Tags: , ,

Added By:
  1. Dexter Said: Comment by Dexter on July 1, 2009 at 3:19 am | Permalink

    This is really excellent! Thank you for sharing! :)


  2. Jeff Lumbaro Said: Comment by Jeff Lumbaro on August 26, 2009 at 9:40 pm | Permalink

    This is a great article friend! I have a few similar tutorials at my website, http://jefflumbaro.tld. Check it out and get involved, maybe we can exchange links!



Leave a Comment