The file is in Fireworks PNG format and all of the icons in it are vectors (you can make them bigger, smaller, etc.), I have added some Fireworks effects to them as an example although you can elaborate them much further. It includes icons for:

1. Twitter
2. RSS feed
3. Behance
4. LinkedIn
5. Facebook
6. StumbleUpon
7. Last.fm
8. Spotify

This free social media icon pack is released under a Creative Commons 3.0 Attributive Share-Alike license. This means that you can use them for both personal and commercial use while keeping them open and giving me a link back.
You can download the Fireworks editable PNG from here (Right click > Save file as…):

• Adobe Fireworks Free Social Media Icons Pack (1,2MB)

Feel free to request more icons and web services.

Fireworks is the best tool for web design, period. Photoshop cannot compete with the precision and user experience of it. PS may have more features and functions but it is not optimized for producing content to display on a screen at 72dpi. Not even Illustrator has the pixel accuracy and such a great bitmap/vector interaction.

The only turnaround of it is the amount of bugs it has and the discrimination it suffers from Adobe (since they bought it from Macromedia) as they consider it ‘the ugly brother’ in the Creative Suite and don’t give it proper attention and resources. This is why most users encounter themselves in the dark with frequent bugs awaiting for Adobe updates that take months to appear. Some of them have even rolled back to Macromedia Fireworks 8 to get rid of such stupid errors but that may seem like an extreme solution to some of us.

Through trial and error as well as user research and feedback, here’s a list of the most common errors you may find while working with Fireworks:

Fireworks ‘Not enough memory’ bug

Even though you may have 8GB of RAM and a brand new computer (that’s my case) you can still stumble with this error. This usually happens when working with several pages and a lot of elements in them, specially big images.

Solution: It seems that closing the Optimize panel (press F6 to toggle it on/off) can help fix this issue as reported by some users.

Fireworks mouse pointer becomes a hand

The cursor becomes a hand and you can’t select any other tool from the main toolbar. This issue is quite frustrating and there is no real solution to it. Even restarting the application won’t fix the problem.

Solution: In the post entitled Adobe Fireworks Hand pointer error you can find a quick fix.

Fireworks half pixel

Although Fireworks is a pixel based design software, when resizing shapes like rectangles the software may add anti-aliasing, also known as half-pixels, which adds a semi-transparent border.

Solution: Select the element and increase or decrease manually the X or Y position of it in the Properties toolbar. The element will move but it will remove the half-pixel it had and recover its real size smoothing the sides of it. Then you just need to place it again where you wanted it.

Fireworks ‘Internal Error’ when launching

Some users cannot start Fireworks any more when  upgrading from a previous version of Fireworks or when installing the full software after testing the trial version or a Beta.

Solution: Not quick but effective. Uninstall everything through the script provided by Adobe: Adobe CS4 clean uninstaller and reinstall everything again.

References

• http://forums.adobe.com/thread/227476
• http://ubuntuforums.org/archive/index.php/t-676915.html

Office photo by schnaars (CC BY-SA) modified by Xavi Esteve

Adobe Fireworks or Photoshop haven’t got any CSS Sprite Map tool or wizard but it is very easy to create sprite maps. I recommend you to use Fireworks instead of Photoshop for this since the interface is much cleaner and organized and the exported images have smaller size but excellent results. You should also use Smush.it when you finish with your image to compress it even more.

What is a CSS Sprite?

A CSS Sprite is one big image that has many small images in it. We then use CSS to get the little images, all from the big image. Everyone uses them nowadays and once you get the trick of it it is really beneficial for a website. So, what are the advantages of using Sprites? The user will only have to make one server request to get all the icons and logos, etc. Instead of asking for each image separately. Here are some examples: XaviEsteve, Google, LinkedIn, Facebook…

How to create a CSS Sprite Map with Adobe Fireworks

The image map

Place every little image in a large canvas, trying to order them by groups. Leave as few space as possible between images but do not overlap them, leave 1px spacing between them.

CSS properties for the sprite

The main three CSS properties needed for a CSS Sprite are:

background-position: -Xpx -Ypx;
height: 16px;
width: 16px;

Which can be easily found in Fireworks. Click the image or layer you want to know the CSS values and look at the bottom left of Fireworks:

Remember that Background Position is always negative. Nothing to worry about, just add a hyphen (-) in the CSS style sheet.

If we are using <div> or <span> tags and want to show them as inline elements we should use:

display: inline-block;

IE6 doesn’t support inline-block so use this in the IE6 style sheet:

display: block; float: left;

We can also use <h1> or any other HTML tags we want. If we need to hide the text inside that tag we can put the text in a <span> and hide it:

<h1><span style="display:none;">Text to be hidden</span></h1>

Do not use inline styling, I’ve added it above just to show you the example in one line.

Group properties to optimize the CSS code

To get the best out of CSS sprite maps it is recommended to group the properties and make the code as small as possible.
There are two main ways to save code while creating a sprite map. The first one is to add all the selectors to the same URL:

The second one is to group all the images by its same height/width or any other shared properties like floatings:

Once you have the image and the CSS you just need to call it in the HTML page like this:

<span class="bigico hp"></span>

This will “magically” convert the <span> into an image.

CSS Sprite Planning for a website

Before starting with creating the CSS Sprite in Fireworks it is good to plan how many icons/images you are going to use and which type of images are you going to use: if they will have transparent background, use a lot of colours or gradients…

How many files will you need?

CSS Sprite map based on its use

Think which graphics are used always and which are just used for specific sections and split them. For example, create one for the home and common content like the header, sidebar, etc. and another one for specific sections that may not be accessed as much. The idea of CSS Sprites is to minimize server requests so packing images by context is the way to go.

Do you need transparency?

Are these images/icons going to be placed always on the same background? If they are going to have different backgrounds save the sprite as a PNG with alpha transparency (or a transparent GIF to support IE6 users). If you don’t need transparency then go with JPG or GIF.

File size of the image

The CSS Sprite map shouldn’t weight more than 300KB. If it does, split it on different ones.

The screenshots of Fireworks were taken using Adobe CS3, the sprite map belongs to PC-Site.co.uk

Top photo by Gadl

It takes 2 minutes and you just need two layers. Let’s get started!

Step 1 – Find the picture

Find any picture that has nice contrasts.

Step 2 – Decrease Saturation

Decrease the saturation (Filters > Adjust Color > Hue/Saturation…) of the picture to remove the color (-81 in my example). I’ve leaved a bit of color because it gives this “old” effect.

Step 3 – Increase Contrast

Increase the contrast (Filters > Adjust Color > Brightness/Contrast…) without any fear (in my example it’s 63). But not too much. You can play a bit with the brightness to balance it.

Step 4 – Duplicate layer

We are done with this layer. Right click it and Duplicate it. Hide the bottom one (click the eye at the left of the layer).

Step 5 – Gaussian Blur

Add Glaussian Blur (Filters > Blur > Gaussian Blur…) to the new layer (15 in my example).

Step 6 – Darken

In Blend mode (it’s a dropdown in the Properties toolbar at the bottom, next to the transparency dropdown), select Darken.

Step 7 – Unhide the first layer

Unhide the first layer, it should be at the bottom.

That’s it! The final result looks like this (click the image to view it full size):

Final words

Although it’s true that Fireworks is quite limited compared to Photoshop and it doesn’t have the same community as Adobe’s big one, the speed and ease of use of FW makes it the perfect tool for beginners to semi-professionals with a nice and sweet learning curve.

Images in this post are licensed under Creative Commons Attribution Share-Alike Non-Commercial.
Original: mac as music studio by shapeshift
Result: Grunge effect Photo Tutorial in Adobe Fireworks by Xavi Esteve

Download the Fireworks Thematic Template

Version 1.0 (374KB, November 8, 2009)

• Download from Mediafire (recommended)
• Megaupload
• Download from my server (right click, Save as)

Note: The file is a PNG, you will need to right click it and select Open with > Adobe Fireworks in order to work with it.

What is the template and how to use it

It’s the design of the Thematic WordPress Theme Framework in Adobe Fireworks PNG format. The main purpose of it is to save you time in your designing process by providing all the obvious things and repetitive tasks you need to do every time. You can start editing right away any kind of website but take the time to know all the different features that have been already implemented in this template.

Organized layers and folders

If you have a look at the Layers panel, you’ll find that everything is organized and the basic layout has been created so that you can start designing and keep organized.

Guides locked and hidden

Guides have been created following the 24 columns of the Blueprint CSS grid. Each one is 30px width and there is a 10px separation between them. The 24 columns and 23 separators equal 950px.
Guides are locked and hidden. Perfect for snapping everything to the grid and keep it aligned. You can make them visible, add new, edit them, etc…

Blueprint watermark

To aid visually, I have added a transparent bitmap of the 24 columns at Blueprint. All these columns have guides at both sides (they’re hidden). By default it has a 2% opacity (you may not be able to see it in some screens) and Color Fill effect to Red. If you design a red page, change it to green or whatever.

Typography styles

If you don’t use them you should! Once you get used to work with styles designing is even faster.

Color palette ready to use

Icons ready to use

No need to start searching for them, already pasted in the template.

Blocks as image/objects placeholders

Create some copies and start pasting to get visual aid in structuring the content.

Sample dummy text

Apart from all the above features, the Fireworks PNG file has some sample text:

• header
• top menu
• main menu
• titles
• paragraphs
• lists
• sidebar
• footer

Also, it is real English text, not any Lorem Ipsum. So designs will look much more reliable.

Remember that Lorem Ipsum is available in Fireworks by going to Commands > Text > Lorem Ipsum.

Template requirements

To use the features of this template you will need:

• Fireworks CS4 (typography styles may not work in previous versions)
• Helvetica and Georgia fonts (Helvetica may not be available in Windows)
• Inspiration and good music

License

The Thematic WordPress Theme design is from ThemeShaper and is released under GPL license.
The Fireworks Template for Thematic has been made by Xavi Esteve and is released under CC Attributive Share-Alike.

I have created this from scratch and haven’t had the chance to test it thoroughly so feel free to suggest, improve or customize your own template and leave a comment or e-mail me the results. Some things may change in your computer. FYI, I am using Fireworks CS4 in Mac OS X 10.6.1.

Enjoy! :-)

Download links at the top

24 columns of 30px width separated by 10px spaces which make 950px width in total.

Paste it into your template with your favourite editor (Photoshop, Fireworks…) and align everything to the grid. I recommend you use Blueprint CSS or a similar 24 column based framework when developing the front-end.

Download Blueprint Bitmap (37KB)

• 24 columns of 30px
• separations of 10px
• 950px total width

For a 3 column layout you would use 8+8+8 columns, for a two column layout 16+6 is good or for four boxes 6+6+6+6 columns.

Since I work in Fireworks for web design and I am a great fan of Blueprint, I will be releasing a collection of Fireworks templates ready to be modified, think as if they were some kind of PNG “framework”.

The hand or pointer cursor gets selected and the user cannot select any other tool. It is a very weird problem with Fireworks versions (Macromedia 8, Adobe CS2, CS3, CS4 and CS5).

It has happened in my laptop running Windows XP Professional SP3 first with Fireworks CS3, then opened Fireworks 8 and still the same, also happened in a Mac OSX with Fireworks CS5. Other people have also experienced this issue, here you can find an open thread in Adobe forums talking about this same error and another one in Layers Magazine, similar but with Adobe Illustrator CS2.

The solution is to select the tool and press the Spacebar key (thanks Angela). If that doesn’t work, minimize and maximize the window or try pressing Alt key and clicking on a tool, then with Shift key and press some tools, then minimize and maximize again. You can also try restarting the computer or the application but you should not delete your preferences since it seems not to work.

If the suggested solutions don’t work and you still get the bug, try selecting the Text tool (T shortcut key) and create a text box. Thanks Olaf for this solution :-)

Vista users: Another solution if the hand keeps coming up is to try to minimize Fireworks and then go to another application such as Firefox. Thanks John!

Vista users: Go to File > Preview in Browser > Preview in firefox.exe. Thanks Mike!