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.

Having got a google plus account recently I thought I would have a go at creating some social icons, the source for the icons is open to download and re-use.

1. Start with a canvas which is 175% higher than your circle for the drop shadow, reflection etc. Draw a circle and gradient fill it using a sample of blue (dark) and then a dropper sample of a lighter (not white that’s too harsh) shade of blue, or your chosen color.

2. Now grab a copy of the circle and invert it and position it under the existing circle and commands > creative > fade image to fade it out as a reflection then reduce the opacity down to 60%

3. Now we add the inner reflections to create the shiny effect on the surface of the marble. Draw a small ellipse with the same colour (FW usually keeps the same gradient you used earlier) and place it in the circle as in the image below.

4. Now copy the added inner circle and paste it on the top of the circle, again fade it out to get it to blend in the main circle and reduce it’s opacity down to 60%.

5. Nearly there, you can add in a further drop shadow to the left or right of the main circle (make sure that it sits under the main marble and is lowest in the order list in the layers panel. Draw an ellipse. fill = solid, colour=#DDDDDD. width=70px, height=13 pixels, feather = 5

6. You can add in surface elements and an overlapping title for the navigation item if, like me, you needed to use a number of these on a page.

Have fun, I hope this was of use to somebody somewhere!

This tutorial will show you how to create a barcode for any purpose.

Step 1.
Select the Pencil Tool, set the color to black, and make sure both the Anti-aliased and the Auto erase boxes are unchecked. Holding down Shift, start drawing random lines on the stage. You should get something like this:

Step 2.
Make sure the layer of the bitmap is selected, and using the Marque Tool, create a selection box anywhere on the bitmap with a width of choice but a height of 1. Right click on the selection, then pick New Bitmap Via Copy.

Step 3.
Now that you have what you need, go ahead and delete the original Bitmap layer (the random pencil lines). At this time, on the stage you should only see a few black dots/pixels lined up. Increase the height of this Bitmap by using either the Free Transform Tool or by imputing the desired height of the barcode in the Properties Panel.

Step 4.
We all know a barcode has numbers. Using the Marque Tool, select a portion of the barcode as illustrated below, and press Delete. Add some randomly spaced out numbers in the cleared portion.

Step 5.
Get creative! Add text instead of numbers, or both. Place the barcode on a sticker and create a peeling effect featured in “Creating a Realistic Peelable Sticker Effect in Fireworks” tutorial. Give the sticker a Web 2.0 touch featured in Justin’s “Create Web2.0 logos with Fireworks” tutorial.

*Download not available*

I came across the ‘artwork’ of Nip/Tuck season 4. I don’t watch the show at all but the design I saw on a commercial caught my eye. You can also do this in Photoshop, but here’s how to glamorize your name or logo with a cool scenic background with Fireworks.

1. First find the a good landscape photo, preferably with the horizon across the middle. I found this in some free stock photography website.

2. Draw a rectangle with vertical linear gradient and set the colors #000099 on top and #ff9900 on the bottom.

Set that to overlay.

3. Next, draw two ellipses the approximate width of the image itself and a third of its height. Make the top one yellow and the bottom white. Set both to overlay.

This will generate somewhat of a sunrise effect.

4. Type your name! I use Free Sans, radial fill (white center grey edge), drop shadow (0 distance, 3 softness 98% opacity).

Voila! You have pretty artwork with your name on it. You don’t have to follow these exact specifications but you get the point. Optionally, you can put a dark rectangle gradient to make the top part of the sky darker. To see it, download the master file.

(This one is huge! 1.3MB)