08Sep
2011

Brushed Metal Apple iCloud Logo

Posted in Advanced, Icon, Logo by Firetuts

I came across the new iCloud application from apple (which is in beta at the time of writing this tut) the logo replicates the brushed metal that permeates most, if not all apple products. I thought it would be a good excuse to show some techniques for creating brushed metal effects.

Create basic shape and add noise

First thing we do is create our basic shape for the logo, lets use the rounded corner auto shape tool to give us our shape.
Then with the shape selected we add a noise live filter, select Filters > Noise > Add Noise.

Create radial blur

To create the machined metal texture we add a radial blur to our shape with the noise filter Filters > Blur > Radial Blur..

Mask out texture

Now we have created our texture we need to mask out the shape, to do this we must create our mask template. To mask a shape we use a black, white and shades of grey image. To completely mask the image we use black, to completely show the image we use white and we use shades of grey to create levels of partial opacity.

To create the mask in this case I used the autoshape to create the black and white parts of the mask which we can use to actually mask out the radial blur. To mask the element we select the radial blur and the mask at the same time (both are highlighted in the layers panel and they will both have blue handles), we then select Modify > Mask > Group as mask.

Create the cone gradient

The texture created gives us only half the effet we are after, the other half is the radial/cone gradient to simulate the colour and shine of a metal object.

Create cloud vector

To create the cloud shape we will need to do some clever vector work. Firstly use auto shapes to build up the shape of the cloud using individual simple shapes. Once the correct outline shape has been established we must join the vectors to create a single complex shape, to do this select the vectors we wish to join and select Modify > Combine Paths > Union.

Now select the new joined shape and create a duplicate on the layer above, using the scale tool resize the vector so its smaller than the original cloud. Then selecting both cloud shapes select Modify > Combine Paths > Punch to punch out the middle of the vector.

Put it all together

Now we have all the elements we need we can put the full icon effect together.

10 comments

  1. Gravatar FIREWORKS ZONE | Adobe Fireworks tutorials and Downloads says:

    [...] Continue reading → [...]

  2. Gravatar Esteban says:

    Excellent! Thanks for tutorial!

  3. Gravatar Mgjaltema says:

    The other day I saw one my colleagues do this in Photoshop and I thought to myself.. hmm… maybe I’ll have to make the switch some day. But you proved me wrong! Sticking with Fireworks for my webdesignwork :)
    Thanks for the inspiration.. hope to see many more tuts!

  4. Gravatar Firetuts says:

    Thanks for your comments, they are appreciated.

  5. Gravatar Aida Rojas says:

    This is a very helpful post, will try this effect on some of my sites. I love using Fireworks, as Photoshop seems too hard. Thanks for the tip !

  6. Gravatar Ruben says:

    Hi, sorry about this noob question but how do you do Step 4, Mask out Texture?

  7. Gravatar Firetuts says:

    @Ruben and others who have asked, I have updated the tutorial to expand on how to mask out the image.

  8. Gravatar Albert says:

    This is the first time I came across in this site! Very nice tutorial!

  9. Gravatar Albert says:

    Ok, I finally did this one ^_^

  10. Gravatar Brushed Metal Apple iCloud Logo - GFX WARRIOR says:

    [...] effects in Fireworks. In our example we create Apple iCloud logo. You can read this tutorial at: Firetuts   Tags: brushed metal, fireworks, iCloud, [...]

Leave a Reply