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!

As a full-time freelancer and a passionate in GTD it’s been a while since I started reading about how to optimize my time while providing my best services. A time ago I watched Hamids’ video explaining SCRUM in 10 minutes and I got inspired in creating something simple but really useful. I could code a web-based app or some software but Google Spreadsheets was enough powerful to create something nice and I was also able to share it publicly in a very easy way.

What is Agile SCRUM?

The video is really inspiring for all those people like me that try to get its productivity to the next level and hadn’t heard about -or where reluctant to adopt- such a professional project management method for simple solo or very small team projects.

Considering the methodology of SCRUM I’ve designed a Google Spreadsheet for freelancers or small teams ready to use. It is very basic but gives you an overall idea and accuracy in a fast and simple way on how the project is evolving during its process.

Simple Agile SCRUM template for freelancers

How to use the Spreadsheet

1. Fill in the name or description of the tasks in the first column.
2. On the second column to the right, estimate the hours needed for each task in total (among all days).
3. Fill in the daily calendar with the initial estimated hours you will dedicate to each task every day.
   These are just initial estimates, once you start the burnout you can correct them. This way you will see how accurate you where while planning and will help you estimate better on the next project.
4. Now estimate your burnout by filling the cells in the Estimate your burnout row
   This should represent the amount of hours you dedicate each day to the project.
5. Change the numbers at the top row to your own dates.

You should only edit the cells in white (the ones without a formula in it). Some columns and rows are hidden to fit the screen of a laptop, if you need more space just unhide them.

Download

Follow the link to see the Spreadsheets:

Agile SCRUM Project Management Google Spreadsheets

And click the button Use this template.

Learning the Art of Agile Development

If you are interested in learning more about Agile techniques I encourage you to read The Art of Agile Development from James Shore and Shane Warden, it presents all the concepts and ideas needed to start putting Agile into practice.

Changelog

28 Sep 2011

• Fixed an error that ignored the first row hours in the total time

4 Feb 2011 – Version 2.1

• Fixed Time (left) from being negative @Shannon

25 Nov 2010 – Version 2

Thanks to all your feedback guys! I have rewritten the whole spreadsheet to improve it with the feedback from the community (both by posting in the comments or by email) and other minor fixes:

• Improved UI
• Added Real Time Spent (to differentiate between estimated time and extra time spent). Suggested by @Mike
• Updated graphic to the new version of Charts (this may help in exporting the spreadsheet to Excel) @Jai
• Calendar is flexible now (starting from Day 1)
• Calendar extended (unhide columns to view them)
• Task list extended (unhide rows to view them)
• Conditional coloring to improve UX

Instructions, feedback, requests and support

Have some ideas? Feedback welcome! If you wish to add some modifications or come up with an improved design please let me know and I’ll update the Agile SCRUM Google Spreadsheet.

Photo by Alan Dayley

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