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