The presentation will be provided LIVE online but will be recorded and posted on our site at a future date:
Register for the Meeting at Eventbrite
URL for Live Presentation (flash player required): http://bit.ly/adobefireworks

When you login for the meeting, simply log in as a guest.

What’s New in Fireworks CS6

• Improved CSS support – Extract CSS code with the Properties panel and create CSS sprites from design comps. Mock up complete web pages and export layouts with external style sheets in one step.
• New jQuery Mobile theme skinning support – Create, modify, or update jQuery themes for mobile websites and apps, including CSS sprite images.
• Easy-to-use screen-based design tools – Quickly create, edit, and optimize your designs, web and mobile mock-ups, and more with easy-to-use vector and bitmap graphics tools.
• Intelligent integration – Import and export to Photoshop and Illustrator. Copy and paste from Fireworks to Dreamweaver. Work faster thanks to tight Integration with other Adobe solutions.
• Templates and styles – Save time, boost productivity, and increase standardization with templates for mobile apps, web content, and designs. Add customized styles to your library.
• Pixel-precise rendering – Keep designs crisp on destination screens with advanced rendering. Vector and bitmap objects appear sharper, even when converted from one mode to the other.

With the release of the iPhone 4S we saw the introduction of Siri. For many of us it marks the serious initiative to implement a long talked about idea of voice controlled computing. I wanted to mark the introduction of voice controlled computing by recreating the Siri icon in fireworks.

Create basic icon shape

Firstly lets create the basic shape of the icon. Create three circles using the ellipse tool, give each circle the diameter of 158px 140px and 126px respectively.

Select the two outer circles and select Modify > Combine Paths > Punch . This should now give you an outer ring surrounding an inner circle.

Now we have our basic shape we can add some texture and colour, select the shapes and add a cone gradient colour fill, you can use the colours and gradient shapes I have used but I suggest you have a play around to get an effect that you feel comfortable with.

Reusing iCloud tutorial material and texture

To create the texture we are going to reuse the radial blur effect we created in the iCloud tutorial. Adjust the opacity and size of the texture depending on how much texture detail you want to have.

Make the microphone stand vector

To make the microphone stand create a rounded rectangle and move the handle so the ends meet to create a fully rounded end. Now create a duplicate of the rounded rectangle and use the scale tool to make the copy smaller. Place the smaller rectangle over the larger, select both and use Modify > Combine Paths > Punch to punch the center out. Now create a square vector and place over the oval shape and use Modify > Combine Paths > Punch again to remove the top half. Now use the rectangle tool to create the vertical and horizontal parts of the stand which is in essence an inverted ‘T’.

Create microphone body vector

Create a new rounded rectangle and round both ends like we did before, make a copy and keep to one side. To create the illuminated texture first add a contour gradient as in the example below as well as adding a ‘grid 2′ texture with a transparency of 33%. We now need to add a vector mask, select Commands > Creative > Auto vector mask and use handle to mask out the appropriate portion of element. Now use the saved rounded rectangle as a background to finish the full effect.

Create background glow effect

Create a circle with the ellipse tool and create a square with the rectangle tool, use the rectangle to punch a 1/4 of the circle away Modify > Combine Paths > Punch . Now apply a cone gradient fill with the colour profile in the example.

Put it all together

Now we have all the elements we can put them all together with a few tweaks. Add a blur to the glow effect to remove sharp edges and add a drop shadow to the microphone stand to add some depth as in the original.

Finished effect

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.

While creating the google plus icon recently I started to explore creating other icons.

I managed to create a fair list and If im honest I only tackled the easy ones but if you look at the file you’ll see I used the same basic method on all icons to create the shine effect.

In short it can be broken down into these steps.

1. Create gradient fill (brand colour mixing into lighter colour).
2. Add a “inner glow” with a darker or similar shade of the brand colour.
3. Add a border colour thats darker or similar shade of the brand colour.
4. Once you’ve got the logo shape then apply a drop shadow with a darker or similar shade of the brand colour

Below is the list of Icons in the source file.

• Google Plus
• Twitter
• Facebook
• Linkedin
• Myspace
• RSS
• Pod Cast
• Quora
• Flickr
• Yahoo
• Digg
• WordPress

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.

This is a relatively easy effect to achieve and relies on only two filters to get a really good look and feel.

1. Find a font that has a thickness and shape to compliment the effect, in this case i’ve used good old Times New Roman.

2. Apply Inner shadow “distance > 2″ , “Opacity > 80%” , “softness > 3″ and “Angel > 330°.

3. Apply Drop shadow “distance > 2″ , “Opacity > 75%” , “softness > 0″ and “Angel > 315°.

4. If using a pattern background try adding a “filter > Overlay” to let the pattern leach through the type face and effect.

5. The Finished effect.

Even though Fireworks is a great web workhorse its still possible to create some nice photo manipulation effects similar to photoshop. In this article i’ll go through a simple way to approximate the “tilt shift” effect we see all over flickr and alike.

1. I’ve used a scene of a busy street with no particular focal point.

2. Create a copy of the original image so you have an image in two layers. Select the bottom most layer and apply a Gaussian blur filter, I’ve used a blur radius of around 3.1 but you can play around with this until you get the effect you would like.

3. Create a copy of unblurred image to use as the source for a vector mask. Create a square vector with a gradient fill, the same size as the image.  Now group the image and  gradient as vector mask,  Modify > Mask > Group as mask.

Once you have created the vector masked image it should look something like the image below. Make sure its the top most layer and apply an “overlay” filter with a alpha opacity of around 46.

4. Now we have a layer to define the general focus for the effect we need create a second vector mask to create a real contrast between the blurred area and focus areas. To do this copy the original vector mask layer and place it on the top of the layer stack,  apply a “lighten” filter and adjust the orientation and size of the gradient for best effect.

5. Now that we have our general effect in place we can apply a few live filters to maximise the effect of the tilt shift. Firstly lets group all layers together so all layers take the effect,  in this case we applied saturation and contrast to maximise the effect.

6. Final Image

Every now and again you will need to adjust the shape of a font you are using in a project, Ive needed to do this quite a few times when creating logo concepts that have a play on text shape rather than use a icon/shape logo. It’s an easy technique to learn and will give you loads more scope when coming up with those creative concepts.

1.  Lets start with some plain text, Ive used Impact as its a safe font that most of you should have.

2. Now right click the text and select convert to paths

3. You will now have a Group of paths, so right click again and click ungroup to get a set of paths distributed to individual layers.

4. Now that we have our font in the format we want, we can now start to play around to get the font deign we want. To do this select your subselection tool  from your toolbar and select the anchor points you would like to move. I have chosen to skew the bottom of the font to stretch downwards for this example but you are really only limited by you imagination.

5. To make the adjustment you can either drag and drop the selection or use cursor keys ( I prefer cursor keys as it gives me more control).

6. The final result.

This month

• Date: Tuesday, March 18th, 2007 6:30pm
• Speaker: Tim Strickland
• Topic: Making Fireworks kuler
• Location: 601 Townsend St, San Francisco, California 94103 (Kojack Conference Room)

Making Fireworks kuler:

• kuler overview
• What’s new in kuler 2.0
• Prototyping kuler 2.0 with Fireworks
• kuler 3rd party APIs & applications