Apple iCloud Logo with Brushed Metal effect

Posted in Resources > Icons by Firetuts

I came across the new iCloud application from apple (which is in beta at the time of writing this tut) the Apple iCloud 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.

Brushed Metal Apple iCloud Logo

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..

Brushed Metal Apple iCloud Logo

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.

Brushed Metal Apple iCloud Logo

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.

Brushed Metal Apple iCloud Logo

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.

Brushed Metal Apple iCloud Logo

Put it all together

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

Brushed Metal Apple iCloud Logo

Final Apple iCloud Logo Image

Brushed Metal Apple iCloud Logo



Get Source
Creative Market Ad

There're 10 comments for this post.
  1. Pingback: FIREWORKS ZONE | Adobe Fireworks tutorials and Downloads

  2. 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!

  3. 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 !

  4. Pingback: Brushed Metal Apple iCloud Logo - GFX WARRIOR