2011
Brushed Metal Apple iCloud Logo
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.








September 13th, 2011 at 7:10 am
[...] Continue reading → [...]
September 13th, 2011 at 1:55 pm
Excellent! Thanks for tutorial!
September 13th, 2011 at 3:51 pm
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!
September 13th, 2011 at 3:59 pm
Thanks for your comments, they are appreciated.
September 13th, 2011 at 9:20 pm
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 !
September 23rd, 2011 at 4:40 am
Hi, sorry about this noob question but how do you do Step 4, Mask out Texture?
September 26th, 2011 at 1:33 am
@Ruben and others who have asked, I have updated the tutorial to expand on how to mask out the image.
November 2nd, 2011 at 4:17 am
This is the first time I came across in this site! Very nice tutorial!
November 2nd, 2011 at 11:08 pm
Ok, I finally did this one ^_^
November 11th, 2011 at 11:01 am
[...] effects in Fireworks. In our example we create Apple iCloud logo. You can read this tutorial at: Firetuts Tags: brushed metal, fireworks, iCloud, [...]