🌓

Fireworks Template for Thematic WordPress Theme Framework Having a look at the great Thematic WordPress Theme I thought it would be useful to even have a little “framework” for the design in Fireworks. Most designers still use Photoshop to create websites but as a former PS designer, I tried Fireworks a few years ago and can’t live without it. Download the Fireworks […]

by
on November 10, 2009
(3 minute read)

Having a look at the great Thematic WordPress Theme I thought it would be useful to even have a little “framework” for the design in Fireworks. Most designers still use Photoshop to create websites but as a former PS designer, I tried Fireworks a few years ago and can’t live without it.

Fireworks Thematic Template Theme

Download the Fireworks Thematic Template

Version 1.0 (374KB, November 8, 2009)

Simple Cloud Hosting Built for Developers

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

fireworkstemplate-guides

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

fireworkstemplate-typography

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

fireworkstemplate-palette

Icons ready to use

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

fireworkstemplate-icons

Blocks as image/objects placeholders

fireworkstemplate-blocks

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

Free 100% online banking account

💳 Get your free debit Mastercard

3 comments

  • Chris Cavalluci says:

    Xavi- Thanks for putting together the PNG file. Can you explain a how the naming of the objects and layers relate to the CSS IDs or classes?
    Thank you.

  • Henriko says:

    Hi Xavi! Thanks for sharing this fine PNG file. I’m also a new BIG fan of Fireworks and its productivity tools.
    Cheers!

  • Xavi Author says:

    Updated the download links, they should work again :)

Treasure Chest

Get notified of new projects I make
Usually one email every 3 months

Follow me for cool new products and interesting findings on graphic design, web development, marketing, startups, life and humor.


/*Twitter*/ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); /*Facebook (function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=28624667607";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));*/ /*Google+*/ window.___gcfg = {lang: 'en-GB'};(function() {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();