Firetuts

Specctr – Generate page specifications automatically.

Firetuts — Wed, 15 May 2013 14:25:49 +0000

Introducing Specctr the specifications extension for Fireworks

Specctr is a plugin for Adobe Fireworks and Illustrator which automates spec generations for your designs. The term, “spec” is short for specifications — in the case of web design, they are instructions that specify colors, fonts, sizes, spacing and so on, just like a blueprint. Creating these specs is unfortunately very time consuming and boring but with specctr your designs can be specced in just a minute or two.

Video outlining Specctr’s functions

Who should use Specctr

Specs are a crucial part of the design and development process for companies with big teams and for small companies that have to outsource some of their development. Specs function not only as instructions to developers, but also as a reference point to make sure the whole team is on the same page.

How to use the extension

We designed the extension to be very easy to use. To use Specctr open the panel from the Fireworks Window menu. Set your Options and select which details to display by toggling them on or off.

Then prepare your document by making room for your specs. Select the size of your design’s border, and click on the “Expand Canvas” button: Specctr Pro will automatically display your spec with a single click.

To spec a shape (shape, line, dot, etc.) or a text object, select the object (or multiple objects), and click on the “Shape/Text” button. The specs will be outputted to the nearest edge of the canvas.

You can also spec the spacing between two objects by selecting them and then clicking the “Spacing” button. If you select only one object, Specctr will measure the object’s distance to the edges of the canvas.

Finally, you can also spec the width and height of any object.

Summing up

Specctr is a very useful tool and increases your design teams efficiency and happiness. Leave more time for creative work and let Specctr do the pixel counting. Learn more at Specctr.com.

The post Specctr – Generate page specifications automatically. appeared first on Firetuts.

Campaign to open source Adobe Fireworks

Firetuts — Mon, 13 May 2013 10:41:20 +0000

On May 6, 2013 Adobe announced that Fireworks the graphics platform will no longer be developed by the team at Adobe. This petition is to give a voice to those who want this decision to be overturned or to have the code release to open source.

Please make sure you sign it.

http://www.change.org/petitions/adobe-com-release-adobe-fireworks-to-open-source

The post Campaign to open source Adobe Fireworks appeared first on Firetuts.

Change color of an element in a photo or bitmap

Firetuts — Mon, 13 May 2013 07:00:44 +0000

With this technique you can change the colour of a particular part of a bitmap image or photo. The tutorial uses a photo as an example but remember that this technique can be used with elements of graphic design, icons or even web graphics.

The post Change color of an element in a photo or bitmap appeared first on Firetuts.

Convert color photographs to black and white and sepia tone

Firetuts — Mon, 13 May 2013 06:39:07 +0000

In this tutorial, you will learn this simple and extremely helpful technique of converting color photographs to black / white and sepia tone using Adobe Fireworks.

The post Convert color photographs to black and white and sepia tone appeared first on Firetuts.

Premium Styles – 3D Effect

Firetuts — Sun, 05 May 2013 18:41:21 +0000

After seeing how many of you downloaded the 3D text effect source file, I thought I use this opportunity to release the first of our premium products.

One of the most time saving aspects of Fireworks is the ability to apply styles to objects on the canvas with one click. I have put together a library of 42 3D effect styles to use in Fireworks. These effects can be used with text or vector elements, if you need any help with styles you can view a guide from Adobe.

Click image to view a real pixel example of the styles.

Click image to view list of all included styles.

How to import styles

Select Import Style Library from the Styles panel options menu.
Select the Firetuts 3D Effect style library (*.stl) file to import. This will make the style library available across multiple documents and multiple sessions of Fireworks.

The post Premium Styles – 3D Effect appeared first on Firetuts.

Export SVG with Fireworks

Firetuts — Sat, 04 May 2013 21:32:57 +0000

Now that we can open SVG in Fireworks, I wanted to write a post to draw attention to Aaron Beall’s export extension as it supports exporting vectors within fireworks to a SVG file.

Export SVG with Fireworks

Once you have downloaded and installed the plugin, click Command -> Export -> Export SVG to export your vectors as a SVG file. Please note that if your canvas contains bitmap images these bitmaps will be exported to the same folder you are exporting the SVG file.

If you want to learn about more about how to use SVG in context to webdesign try reading css-tricks.com section on SVG.

NOTE: There has been a fork of Aaron’s code that enables the export of single selected items from the canvas to SVG files. Check out the command on Github.

The post Export SVG with Fireworks appeared first on Firetuts.

Open SVG in Fireworks

Firetuts — Fri, 03 May 2013 23:21:48 +0000

John Dunning has saved us all again, he has just released the first version of his SVG extension that lets us open SVG straight into Firewroks.

Open SVG file in Fireworks

Now complete support for SVG is a reality we can use this very flexible and lightweight image format with confidence. If you’re not familiar with SVG, its basically a text based image file that describes vector images and effects. In reality SVG supports very complex image types so be aware the extension has partial to no support for some parts of the SVG spec at this time. If you want to learn about more about how to use SVG in context to webdesign try reading css-tricks.com section on SVG.

The current version of the extension doesn’t have support for export, so download Aaron beall’s SVG export extension from his site.

The post Open SVG in Fireworks appeared first on Firetuts.

iOS Grid System For Fireworks

Firetuts — Fri, 03 May 2013 21:17:08 +0000

Joshua Mauldin over at smashing magazine has release an iOS Grid System for Fireworks. The extension is command based and will create guides and guide layers to your canvas.

Using the iOS Grid System

Once you have downloaded the plugin and installed it, simply run the extension by clicking Commands -> iOS grid system. You can pick the iOS device you wish to design for and the command will configure the canvas to the dimensions of the device and layout the grid and guides to the appropriate spacings.

Here’s the devices included with the extension :

Non-Retina iPhone (3GS) grid command – Grid size: 320 × 480 pixels
Retina iPhone (4, 4S) grid command – Grid size: 640 × 960 pixels
Retina iPhone (5) grid command – Grid size: 640 × 1136 pixels
Non-Retina iPad (1, 2, Mini) grid command – Grid size: 1024 × 768 pixels
Retina iPad (3, 4) grid command – Grid size: 2048 × 1536 pixels

The post iOS Grid System For Fireworks appeared first on Firetuts.

Why we need a new file format for Fireworks

Firetuts — Fri, 03 May 2013 14:50:44 +0000

With this post I’m going to open up a can of worms that’s been going from way back in Fireworks conception. If you’re familiar with Fireworks you know it has a native file format of .PNG for a source Fireworks document. Over the years many have discussed the merits of changing this to something specific to Fireworks.

The current options for saving a source file comes in two flavors, the native .PNG file format or using a prefix method of .fw.png. This prefix method is a bit of a compromise and more a workaround than a real solution. So in this post I’m going to try and put a case together to why I think the file format should be changed.

A little background to the current file format

To understand the discussion lets go back to the beginning of Fireworks, when the spec was created the file extension needed to be as interoperable as possible, that is to say it should be compatible with as many other graphics programs as possible. To achieve this Fireworks adopted the PNG format or more specifically the APNG format that is allowed by the PNG spec to carry ancillary data. This allowed Fireworks source files to be opened up in other graphics programs without relying on extra functionality.

What’s wrong with the PNG format

The oldest problem is the complicated process of having a source file format that can also be a destination (exported PNG) file. As users of Fireworks we will always have to make sure we never overwrite a source file with a flat exported PNG file. Lets be honest we have all done it at some point, granted using the .fw.png prefix makes the process of separating the source and export possible but its still not ideal.

As the prefix method is not a standardized method, working with unfamiliar files we still need to test to see if the file is a PNG source or not. So without a standard unique file format its impossible to be 100% accurate about the contents of a potential Fireworks source file.

CS4 introduced Pages

Ever since the introduction of ‘pages’ in version Fireworks CS4, the effectiveness of the interoperability of the PNG format became compromised. The goal of using the PNG format with Fireworks was to enable other programs to be able open a PNG file and manipulate the contents, even in the simplest fashion. With pages this idea became impossible as any Fireworks document that has more than one page makes those pages inaccessible to an external graphics editor.

Can you send me the PSD

How often after working on something have you heard the phrase ‘Can you send me the PSD’ from a college. This phrase is painful if you’re a Fireworks devotee like me but it’s a good example of how we associate functionality and brand to file formats.

Fireworks has been suffering from this lack of association. If you took a survey of what designers and developers associated with the PNG format, you might find people that associate it with supporting alpha transparency or IE6 didn’t support this transparency, you may find a few people that know its the source file format for Fireworks. The problem is that the brand and functional association to a source PNG file is messy at best and non existent at worst.

Future

I don’t know what Adobe has planned for Fireworks in the future but I hope they can see the merit of changing the file format to something unique. Lets see how Fireworks popularity performs if we give it that unique identity that it deserves now that the old reason for keeping the PNG format are no longer true.

My personal preference is change the file format to .fwd because is an acronym of Fireworks Document and it is short form for ‘Forward’, but this is my own opinion so let me know in the poll below what your favorite file format would be.

Note: There is a poll embedded within this post, please visit the site to participate in this post's poll.

The post Why we need a new file format for Fireworks appeared first on Firetuts.

Transparent text effect in Fireworks

Firetuts — Tue, 30 Apr 2013 12:09:56 +0000

Transparent text effect

This transparent text effect was based on the article on maagraphics. The effect is a simple and effective way of adding text to an image in an unobtrusive way, also with a few tweaks you can use this effect in conjunction with the letterpress effect, to create a nice click action.

The post Transparent text effect in Fireworks appeared first on Firetuts.