Since I discovered Macromedia Fireworks some years ago I moved from Photoshop to Fireworks and I am a big fan and supporter of it, the learning curve is smooth and it is much quicker and easier to work with images. I’ve also been converting web designers to the yellow side by explaining how much better, faster and simpler is Fireworks compared to Photoshop. And whenever I stumble upon another Fireworks fan in events or conferences, a little light brights inside my heart.

I am proud to be releasing a freebie for all the fans of Fireworks today. It is the new Twitter website template as a multilayered Adobe Fireworks CS5 PNG file. The PNG has been designed to be pixel perfect and following the colour and transparencies specified in the HTML/CSS. Everything is organized into folders and layers (see end of post), friendly named, guides and the Twitter CSS sprite map with all the extra icons are included to help you snap everything to the grid and design your own Twitter website-based and learn more about their web design.

License

This template is released free to use for both personal and commercial use, free for you to use and base your work on. No attribution is required although appreciated. If you want to share this template you should not host the source file directly on any website but link to this page (since I keep improving the file, having several copies spread around the Internet will create confusion among users).

Download the Twitter template

Right click the button and select “Save As”:

Twitter Template for Adobe Fireworks CS5 (1.90MB)

If you have any questions, feedback or ideas please post a comment below.

Thanks for using Fireworks!

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

The image was created in 20.2 seconds and quickly rubber stamping the margins with Adobe Fireworks. I wasn’t even willing to create it, just playing around and I’m pretty sure if you spend a bit more dedication you can accomplish really neat stereographic projections. Here’s a video on someone using it:

Photo is from the Brighton Pier, United Kingdom
(by Xavi Esteve, Creative Commons Attributive Share Alike).

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

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!