Premium Styles – Letterpress and Emboss Effect

Posted in Resources > Text Effects by Firetuts

In the next installment of premium products from Firetuts I would like to introduce our new letterpress and emboss style. Depending on the background colour of your design or background pattern these types of effects can be difficult to use. With this in mind I have created three different styles to match the type background you might find working on a design.

To use the style simply select the style you need from the style panel.The 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.

Letterpress-Emboss-mid-thumb

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

Letterpress-Emboss-dark-thumb

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

Letterpress-Emboss-light-thumb

 

How to import styles

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

Mega Pack – 200+ Web Ribbons and Badges

Posted in Resources > Vector by Firetuts

ribbon-badges-thumb

I’ve put together a huge pack of over 200 web ribbons and badges. Each element is in vector format and easily scaled and configured to the style of your own design. All ribbon elements come as grouped objects for simplicity of use and all elements are numbered in layer panels.


Comes in .AI, .PSD and FW.PNG file types!

FIREWORKS PNG DETAILS:
- Full compatible with Adobe Fireworks.
- Layers intact.
- Vectors intact.
- Fully editable to match own design.
- No Watermarks

ILLUSTRATOR AI DETAILS:
- Full compatible with Adobe Illustrator.
- Layers intact.
- Vectors intact.
- Fully editable to match own design.
- No Watermarks

PHOTOSHOP PSD DETAILS:
- Full compatible with Adobe Photoshop.
- Layers intact.
- Limited vector support.
- Fully editable to match own design.
- No Watermarks


Sample file

Ribbon vector set 1

ribbon-and-badges-one-promo-thumb

Ribbon vector set 2

ribbon-and-badges-two-promo-thumb

Badge vector set 1

ribbon-and-badges-three-promo-thumb

Badge vector set 2

ribbon-and-badges-four-promo-thumb

Specctr – Generate page specifications automatically.

Posted in Extensions > Automation by Firetuts

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.

Campaign to open source Adobe Fireworks

Posted in Resources > Culture by Firetuts

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

Premium Styles – 3D Effect

Posted in Extensions > Styles by Firetuts

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.

3d-effect-banner-thumb

Click image to view list of all included styles.

3d-effect-style-thumb

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.

Export SVG with Fireworks

Posted in Extensions > Commands by Firetuts

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.

Open SVG in Fireworks

Posted in Extensions > Automation by Firetuts

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.

iOS Grid System For Fireworks

Posted in Extensions > Commands by Firetuts

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

Why we need a new file format for Fireworks

Posted in Resources > Culture by Firetuts

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.

What file format would you like for the future of Fireworks

View Results

Loading ... Loading ...

Web Application Prototype UI Components

Posted in Extensions > Common libraries by Firetuts

Web Application Prototype UI

This Web Application Prototype UI Component is an oldie but still worth while downloading and adding to your common library. Most elements have support for 9-slice scaling and all are symbols. To access this extension,press F7 to open the common library or Window > Common Library. (more…)

Page 1 of 212