Shiny metal Icon Tutorials

23 Flares 23 Flares ×

Shiny metal Icon Tutorials

After you see this shiny icons, you wish learn how to make them!

In this tutorial you will learn how to create shiny metal icon using adobe illustrator CS3. this tutorial contains amazing techniques.

I hope you enjoy!

 

Step 01

Open the Illustrator and create new page, you can choose any size you like but I choose (1024px*768px) as the image below.

Shiny metal Icon Tutorials

 

Step 02

Create 3 circles using (Ellipse Tool) select Ellipse tool and click (one click) any where in the page to show the Ellipse window, and this is the properties of the circles:

- Circle1  size: “210px*210px ”    color: “#c1c1c1″

- Circle2  size: “160px*160px”   color: “#e2e2e2″

- Circle3 size: “62px*62px”   color: “#c1c1c1″

Shiny metal Icon Tutorials

 

The following step is basic. if you know how to arrange the shapes please skip this step!

Step 3 “Arrange the shapes?”

So this step is new for you! I hope this step will be useful and clear for you.

Select the centered shape and hit right click and select arrange the menu will appear, the image below will explain.

Shiny metal Icon Tutorials

 

Step 4

Arrange the circles to appear as shown here, and select all of them and open the align palette from window>>align and click on the Horizontal Align Center and the Vertical Align Center, to align the circles to the center.

Shiny metal Icon Tutorials

 

Step5

Select the small circle click Swap Fill and Stroke (shift+x) then from the stroke palette make the stroke weight:7.5pt .

Shiny metal Icon Tutorials

 

Step6

In this step we need to create power icon. Press Ctrl+R to show the ruler and drag a guide to top of the small circle, and add two points by Add Anchor Point Tool then select Direct Selection Tool and click on the top point and hit delete from the keyboard.

Shiny metal Icon Tutorials

 

Step7

Select Line Segment Tool and draw it as below, then select the power icon and open stroke palette and click on the Round Cap. to round the end point of the strokes.

Shiny metal Icon Tutorials

 

Step8

Keep selecting the power icon and go to Object>>Expand then click Ok on the expand window to convert the stroke to fill color. we do that because we can’t give the stroke gradient color.

Shiny metal Icon Tutorials

 

Step9

Rotate the shapes. Go to the Effect>>3D>>Rotate from the menu, and put the following values:

X axis: 29   –   Y axis: 16  –  Z axis: 11  and the Perspective: 115.

Shiny metal Icon Tutorials

 

Step10

Expand 3D object and clean the shapes. Select the object and click on the Object>>Expand Appearance from the menu, then right click select Ungroup right click again select Release Clipping mask then delete the mask *note that the mask appear without stroke and fill color. then select the shape and right click again ungroup .

Shiny metal Icon Tutorials

 

Step11

Coloring, select the gray frame and click on the Gradient icon where placed in the bottom of the Tools, and open gradient palette, then add five gradient points on the gradient slider. we will start from the left point in the gradient slider:

When you select any point choice the Grayscale from the color options

Point01: Color: 40%K      Location:5%               Point02: Color: 0%K      Location:30%

Point03: Color: 40%K      Location:50%            Point04: Color: 0%K      Location:70%

Point05: Color: 40%K      Location:95%

 

Shiny metal Icon Tutorials

 

Step12

Coloring the inner circle. first select it and click on the gradient from  tools choose the color for the left point on the gradient slider Red: 214 – Green: 222 – Blue: 35 and for the right point on the gradient slider Red: 0 – Green: 104 – Blue: 65 then select the gradient tool and start drag from the top left corner to the bottom right corner as below image, then select the power icon and choice the white color (#FFFFFF) .

Shiny metal Icon Tutorials

 

Step13

Select the metal frame and hit Ctrl+C and Ctrl+F to copy it and paste it in the same place, click fill color icon on the tools then click none to make empty fill color, now select the stroke with 4pt weight and light gray color (#EEEEEE).

 

Shiny metal Icon Tutorials

 

Step14

Select the stroke and go the  Menu >> Object >> Expand and from the expand window hit ok to convert the stroke to fill color. again we do that because we can’t give the stroke gradient color.

Shiny metal Icon Tutorials

 

Step15

Now keep select the expanded object and pick the Eye Dropper tool then click on the frame to fill the same gradient.

Shiny metal Icon Tutorials

 

Step16

Select the Gradient tool and start drag from top left corner to the bottom right corner and apply the stroke with 0.5pt weight and gray color (#D3D3D3).

Shiny metal Icon Tutorials

 

Step17

Select the green circle and copy and paste it in the same place, note that the power icon appear as part of the green circle, but it is not! That’s happened when we do Expand Appearance for the 3D rotate, so we can fix it just keep selecting the duplicated green circle and right click on it and select Release Compound Path, that will separate the power icon, now keep selecting the objects and open pathfinder palette and select Add to shape aria icon and the expand button will be active click on it.

Shiny metal Icon Tutorials

 

Step18

Now just re size the duplicated green circle by click on the top right point of the bounding box and start drag to left bottom corner and keep pressing the Ctrl+Alt+Shift on the keyboard.

Shiny metal Icon Tutorials

 

Step19

Select the bigger green circle and click on the gradient tool then open the gradient palette and select the type Linear and start drag from bottom right corner to the top left corner and keep dragging to the out of the object as showing below.

Shiny metal Icon Tutorials

 

Step20 (The final step)

Duplicate the power icon, and move it up by pressing on the up arrow on the keyboard, then select the bottom power icon and click on the Eye Dropper tool then pick the green gradient color from the bigger green circle.

Shiny metal Icon Tutorials

 

Final:

Beautiful! I hope you enjoy this tutorial.

Shiny metal Icon Tutorials

 

Click here to download the victor format.

Shiny metal Icon Tutorials

mameara

Creative designer since 2003, Specialized in graphic and web design, also I have an experience with HTML – CSS and some jquery code

More Posts - Website - Twitter - Facebook

About mameara

Creative designer since 2003, Specialized in graphic and web design, also I have an experience with HTML – CSS and some jquery code

9 Responses

  1. The final result its pretty good. Great tut – congrats!

  2. chrome

    nice tut man
    keep it up ;)

  3. Becoming a Kyani distributor is a fun, affordable way to help you realize the financial freedom that many dream about.

  4. Hey admin, very informative blog post! Pleasee continue this awesome work.

  5. SSchell

    I’m stuck!!

    “Expand 3D object and clean the shapes. Select the object and click on the Object>>Expand Appearance from the menu, then right click select Ungroup right click again select Release Clipping mask then delete the mask *note that the mask appear without stroke and fill color. then select the shape and right click again ungroup .”

    I get to here, then i get stuck…then delete the mask – where do i delete the mask? Sorry, a little new :)

  6. when you create 3D Object and expand it, then ungroup the shapes, it still has the mask shape, so you do release clipping mask, it will release the mask with keep selecting this mask, so hit delete on the keyboard and all done! :).

  7. This is a great tutorial! Thanks for sharing.

  8. Great and fun tutorial! Thanks for sharing :)

  9. amazing post and like your weblog quite a lot and both of you are seeking very cute !

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>