Crystal Office Icon Collection

34 Comments

This Crystal Office Icon Collection contains 133 high quality, free icons in these sizes: 16×16px, 24×24px, 32×32px, 48×48px, with GIF, ICO and PNG file format.

iconshots.com complete office icon set

[download id=”11″ format=”3″]

Crystal Office Icon Collection contains the following file formats: GIF, ICO and PNG.

Showcase of Illustrative Interface Design

4 Comments

1. KrazyPlayer

iconshots.com gui design

2. Optimus Icons

iconshots.com gui design

3. Innovator

iconshots.com gui design

4. Clock

iconshots.com gui design

5. Xbox

https://iconshots.files.wordpress.com/2010/01/dragon1.jpgwp-content/uploads/2010/01/logo1.jpg

6. Video Player

iconshots.com gui design

7. Stereo

iconshots.com. gui design

8. PGL

iconshots.com. gui design

9. Fire

iconshots.com. gui design

10. Dragon

iconshots.com gui design

Chart Vector Icon

1 Comment

Colorful Chart Free Vector Icon

Chart Icon
File Format: Ai, EPS, JPG

chart vector icon

[download id=”10″ format=”3″]

Create Media Player "Play" Button

6 Comments

How to create media player “Play” button

This will be our final image.

Tutorial Details

  • Program: Adobe Illustrator CS3
  • Difficulty: Beginner
  • Estimated Completion Time: 30 minutes

Step 1

Open a new document with 420 pixels by 420 pixels. Activate Smart Guides in View Menu (Ctrl+U). Draw a circle with a Ellipse Tool 400 pixels width and 400 pixels height.

iconshots.com

Step 2

Fill the circle with a linear gradient with colors from R=38, G=169, B=224 to R=43, G=56, B=143.

iconshots.com

Step 3

With Circle selected go to Object > Path > Offset to open the Offset Path dialog. Change the Offset to -30 pixels and press OK.

iconshots.com

Step 4

Fill the smaller circle with a linear gradient with Grayscale color 20%  to 5%. Set the angle to -90 degree.

iconshots.com

Step 5

Now with Smaller Circle selected go to Object > Path > Offset to open the Offset Path dialog. Change the Offset to -0 pixels and press OK.

iconshots.com

Step 6

Don’t change the color of the smallest circle, only change the gradient angle to 90 degree.

iconshots.com

Step 7

Select all circles and group them. Draw a triangle with Star Tool that is 100 pixels width Radius 1 and 100 pixels Radius 2, Points – 3, press OK.

iconshots.com

Step 8

Rotate the Triangle to -90 degree, press OK.

iconshots.com

Step 9

Place the Triangle at the center of Circles. Select Triangle and with Eyedropper Tool click on the biggest circle that is blue gradient. Change the gradient angle to 90 degree.

iconshots.com

Step 10

With Triangle selected go to Object > Path > Offset to open the Offset Path dialog. Change the Offset to -10 pixels and press OK.

iconshots.com

Step 11

Draw a rectangle that intersects the triangle. With rectangle and triangle selected press the Subtract From Shape Areas button in the Pathfinder Panel.

iconshots.com

Step 12

Fill it with a linear gradient with colors white and black, change the gradient angle to -90 degree. Last step, change the transparency to Screen Mode.

iconshots.com

Final Image

You can download .ai and .eps formats below.

[download id=”9″ format=”3″]

Media Player Interface

1 Comment

Media Player Interface Free Vector Graphic

Multimedia Player

File Format: Ai, EPS, JPG

iconshots.com skin

[download id=”8″ format=”3″]

Simple Office Free Icon Set

1 Comment

This Simple Office free icon set contains 42 high quality, free icons in these sizes: 16×16px, 24×24px, 32×32px, 48×48px, with GIF, ICO and PNG file format.

office collection

[download id=”7″ format=”3″]

document download ball notebook chart mail user print folder toolbar font draw calendar search

Simple Office Free Icon Set contains the following file formats: GIF, ICO and PNG.

How to create green house icon

3 Comments

Iconshots Tutorial

How to create house icon

This is the final icon we will design.

iconshots house icon tutorial

Step 1

Create a new document with 400 pixels width by 400 pixels height and draw a rectangle with 300 pixels width and 325 pixels height.

iconshots tutorial

Step 2

With the rectangle selected, go to Filter > Stylize > Round Corners and change the Radius to 30 pixels and press OK.

iconshots home tutorial

Step 3

Fill the rectangle with a Linear Gradient from the Gradient Panel. Change the first swatch in the gradient to a green color and change the second swatch to a yellow and change the angle to 90 degree.

iconshots home icon tutorial

Step 4

Draw a star that is 200 pixels width Radius 1 and 150 pixels Radius 2, Points – 3, press OK.

iconshots home tutorial

Step 5

Select the new star shape recently created and rectangle press the Horizontal Align Center and Vertical Align Top from Align Objects in Align Panel.

iconshots home icon tutorial

Step 6

Star and rectangle shapes selected press the Intersect shape areas from shape models in the Pathfinder Panel. Press Expand Button.

Step 7

Now we will create the roof of the house. Draw a rounded rectangle that is 280 pixels width, 60 pixels height and 30 pixels corner radius.

iconshots home icon tutorial

Step 8

Fill the rounded rectangle with a Linear Gradient from the Gradient Panel. Change the first swatch in the gradient to a dark green color and change the second swatch to a green and rotate the shape 45 degree.

iconshots home icon tutorial

Step 9

Select rounded rectangle and go to Objects – Transform – Reflect and press Copy.

iconshots home icon tutorial

Step 10

Group two rounded rectangles.

iconshots home icon tutorial

Step 11

Now select rounded rectangle and body of the house previously created press Horizontal Align Center in Align Panel.

iconshots home icon tutorial

Step 12

Select the roof shape and go to Object > Path > Offset to open the Offset Path dialog. Change the Offset to -3 pixels and press OK.

iconshots home tutorial

Step 12

Copy and Paste in Front the object we created through Offset and move it to bottom 7 pixels. Select two new rounded rectangles and press the Subtract From Shape Areas button in the Pathfinder Panel.

iconshots home icon tutorial

Step 13

Draw a rounded rectangle that is 88 pixels width by 177 pixels height, corner radius is 30 pixels and place it on the right side of the house, then send it to the back.

home icon tutorial

Step 14

Now we know how to give a special effect to the top of the object. Select last rounded rectangle go to Object > Path > Offset to open the Offset Path dialog. Change the Offset to -3 pixels and press OK. Copy and Paste in Front the object we created through Offset and move it to bottom 7 pixels. Select two new rounded rectangles and press the Subtract From Shape Areas button in the Pathfinder Panel.

home icon tutorial

Step 15

Our last step, draw a rectangle that is 70 pixels width by 140 pixels height and place it over the body of the house icon. By the way our green house icon is ready.

home icon tutorial

Final Image

You can download .ai and .eps formats below.

home icon tutorial

[download id=”6″ format=”3″]

Older Entries