In Fireworks CS6, the Fireworks team has added the Auto Save feature. The Auto Save will auto trigger the saving of your document based on the time interval you have set in the preference file.

To enable the Auto Save, you have to edit the preference file found below

Preference file location

Win 7 : C:\Users\<user>\AppData\Roaming\Adobe\Fireworks CS6\English
Mac :\Users\<user>\library\preferences\Fireworks CS6\en

*Note: For Lion OSX, you need go to Finder, under the "GO" in the file menu, hold down ALT key to see the Library folder.

Instructions to modify the Preference file

Look for the "TurnOnAutoSave" in the preference file and change its value from "False" to "True" 

<key>TurnOnAutoSave</key>
<bool>false</bool>

Also in the AutoSaveTimeLimit, enter a number in the Integer to set the minutes you want to start the Auto Save.

<key>AutoSaveTimeLimit</key>
<integer>5</integer>

Once done, save the preference file and restart Fireworks CS6 to enable the Auto Save feature.

Permalink | Leave a comment  »

In this interview, we have Lorenzo Franchini, a master in user interface and web design.  He has a very strong belief in what Fireworks is best at.

To begin with, who are you and where are you from?
My name is Lorenzo Franchini, and I'm an italian Web, Graphic and User Interface designer from Verona. 

What do you work as in your day job?

What type of projects do you work in Fireworks and are there any challenges you faced that Fireworks have helped you? 

See the full gallery on Posterous

About how Fireworks helped me, I think it's going to be clear by the end of this interview ;)

How long have you been using Fireworks?
I started "playing" with Fireworks back in 2003, and today I'm a totally addicted Fireworks user.

Why should a designer use Fireworks? 
In a world where everyone starts with Photoshop just because it's the most famous design application, I think a designer should understand what is the best tool for the task he needs to accomplish. Fireworks is focused on web, user interface and screen design, and it's a really easy, intuitive and effective application.

InDesign is focused on digital and desktop publishing, Photoshop on a lot of different things but it rocks in pixel manipulation. Illustrator is a master in complex vectors manipulation and Fireworks is perfect for every kind of user interface design, which means web, mobile apps and almost every graphic that lives on the screen.

Tell us why Fireworks is your preferred choice for doing UI design?
It does what you need in seconds and in a very intuitive way. It has the key feature and capabilities you need for UI and web design. With intuitive vector forms and objects, stackable filters — which are a killer feature for me, mainly because you can apply more filters of the same type on the same object, like three different inner shadows on a button — and quick-editing gradients, Fireworks is the most effective application for UI and prototyping.  

For your workflow, what are the biggest benefits of a vector-based workflow in Fireworks over Illustrator?
The answer is very simple. Illustrator is more focused on advanced vector manipulation, while Fireworks was created only and exclusively for UI design. As for Photoshop, also Fireworks and Illustrator are two different applications, with different purposes.

If you can only list 5 favorite best features in Fireworks, what will they be?
1. Stackable filters ~ more filters of the same type on the same object, for example three different inner shadows. This is a killer feature for UI design.
2. Simplicity and speed of editing shapes and objects
3. Gradients intuitiveness
4. Slices
5. Pages 

Many people compare Photoshop with Fireworks. What is your viewpoint in this?
As I said before, they're both great applications, yet with different purposes. Photoshop isn't made for web, UI and prototype design, so there's no winner. There's no battle. 

Do you have a Fireworks tip for the Fireworks community?
Let's create the the good old engraved button in seconds.

1 - Vector shape (rectangle)
2 - Round corners
3 - Inner shadow
4 - Drop shadow
5 - Text plus drop shadow

And that's it!

Obviously you need to play a little to find the best colors — we do know well that an engraved shape is darker that the background, right? — and the inner/drop shadows settings you prefer. 

Do you have a blog? Where can we find you?

I've an italian blog about design and technologic innovation.

Thanks for the opportunity to talk you, Lorenzo.  Last question, any advice to the designers out there exploring Fireworks?
If you are a web or UI designer and you are using Photoshop, give Fireworks a try. You'll see how much its features are web/UI focused, unlike Photoshop, and how much it can help to boost your workflow. 

Permalink | Leave a comment  »

In this interview, we are honoured to have Justin Seeley, a Certified Photoshop Expert and host of the Photoshop Quicktips Video Podcast, Founder of SeeleyTraining.com

To begin with, who are you and where are you from?
My name is Justin Seeley, and I'm a designer/software trainer from Murray, KY but currently residing in Oklahoma City, OK.

What do you work as in your day job?
I'm the "Design Guy" for a company called WebDesign.com. Basically, I teach online classes/seminars on design-based topics for the WebDesign.com website.

At the D2WC, you presented on Designing For Social Web. Tell us about it and what's your view on Fireworks for the web? 

You can find the presentation slides here

I think Fireworks plays a huge part in web graphics. Whether it's for prototyping or designing an entire site, Fireworks makes it so easy to get up and running. The fact that it's a vector based tool, allows for more flexibility than traditional pixel based image editors and allows you to adapt your designs for new mediums quickly and easily.

I love your Photoshop Quick Tips videos.  Tell us what makes you started to explore Fireworks too?

Honestly, it was the persistence of all my friends in the Adobe community! I've always been a "Photoshop Guy" and that was my primary tool for almost anything graphics related. However, after years of my friends hounding me about how great Fireworks was (especially for web graphics) I had to give it a try… and I'm glad I did!

What type of projects do you work in Fireworks and are there any challenges you faced that Fireworks have helped you? 

How long have you been using Fireworks?

Fireworks excels as a rapid prototyping tool. How does Fireworks helps you in your daily design workflow?
Exactly that. Fireworks helps me get up and running faster with a design. Where as it might take me 2-3 hours to do a mockup in Photoshop, I can crank it out in an hour or less with Fireworks. I especially love the export options in Fireworks, they're so much better than any other app in the suite right now.

If you can only list 5 favorite best features in Fireworks, what will they be? 

1. Pages
2. Vector-based Design
3. HTML Export
4. Live Filters
5. Symbols

Many people compare Photoshop with Fireworks. What is your viewpoint in this?
At this point, I'm not sure a comparison between those two apps is fair. They are two completely different animals. You have Photoshop on the one hand, which is an image editing powerhouse and the "go-to tool" for all photographers. On the other hand, you have Fireworks, which is (as you say) a rapid prototyping, web graphics powerhouse. They both serve their purpose and they both serve it well. I think what it comes down to in the end is whether or not the user takes the time to implement them both effectively into their workflow. 

Do you have a Fireworks tip for the Fireworks community?
Yes, if you're not using pages and symbols in your work yet… Start doing it NOW! You won't believe how much time and effort both of these will save you in your day-to-day work. 

Are you involved with any communities on the web?
I am very active in the WebDesign.com community, but I also occasionally pop up on the Adobe Forums. I'm also the founder of AUOKC, a new Adobe User Group I started here in Oklahoma City… I consider that to be my biggest community project :)

Do you have a blog? Where can we find you?

Thanks for the opportunity to talk you, Justin.  Last question, any advice to the designers out there exploring Fireworks?
Well, considering I'm relatively new, I won't try to impress you here, but if you're just learning Fireworks my suggestion is simple… Follow the work of folks like Jim Babbage, Dave Hogue, and Dee Sadler. These were my resources for learning the ins-and-outs of this program, and they'll help you immensely as well. 

Permalink | Leave a comment  »

In this interview, we have Gareth Thompson,  a guy who has discovered his love for Fireworks and his own company.

To begin with, who are you and where are you from Mr. Gareth Thompson?
I'm a web designer and developer from Hampshire, UK. 

What do you work as in your day job?
I work for myself running [codepotato], a web firm that specialises in website for the financial services industry.

What type of projects do you work in Fireworks and are there any challenges you faced that Fireworks have helped you?

See the full gallery on Posterous

How long have you been using Fireworks?
Five years day in day out. I taught myself from MX 2004 all the way up to the current version i run (CS5). 

Fireworks excels as a rapid prototyping tool. How does Fireworks helps you in your daily design workflow?
I believe Fireworks is the quickest way to get your ideas down as a prototype, but it's way more than that. It's, in my opinion, the best tool for designing websites. Fireworks allows me to store favourite colour combinations for projects, and separate the design into "pages". Just awesome! 

What are your favorite workflow in Fireworks and why?
I usually start by putting together the grid for the site, using the guides tool. I don't use a standard grid (like 960gs) but make my own for each project. After all, every company is different right? Following from that, i'll work out the colour scheme, often using Adobe's Kuler app, and get to work on the general layout. Once the blocks are in place, i start adding the "jazz". 

If you can only list 5 favorite best features in Fireworks, what will they be?
Guides! Export Area Tool, In-built gradient tool, It's extensions ability, Magic wand tool. Couldn't live without them! 

Many people compare Photoshop with Fireworks. What is your viewpoint in this?
People use the tool they're most used to. Personally, FW has everything a web designer needs such as the image exporting wizard, where you can export images in the best format and file-size. Photoshop is a tool that's been adopted by the web industry, but that's not the reason it was built. Not surprisingly it was built to edit photos. Funny that people forget that!  

Fireworks is light, stable and feature rich for web design. I would love for PS users to just try FW for a week and see what they think.

Fireworks work even better with fireworks extensions. What are your favorite extensions from other developers and how do you use it in your work?
I have one extension installed, and that's "Orange Commands". It's a wonderful collection of tools that help solve annoying issues, like converting a selection of text to uppercase, or vice-versa. It does a lot more than that, but you would do best to learn about it on their website : http://orangecommands.com/

Do you develop your own Fireworks extensions too? 
Nope, no need to! The community rocks. Someone would have already built one to solve your problem!

Do you have a Fireworks tip for the Fireworks community?
Always double check the file type you export images as. It pays off to examine which format exports at the required quality and file-size. Good images == quicker site! 
 

Are you involved with any communities on the web? 
Would love to, but don't have the time!

Do you have a blog? Where can we find you?
As i mentioned, i run www.codepotato.co.uk and blog frequently on there. I'm also an avid user of Twitter, and you can tweet me at @cssgareth.

Thanks for the opportunity to talk you. Last question, any advice to the designers out there exploring Fireworks?
Just try it. If you don't know how to do something, just ask! The community is here to help you!  

Permalink | Leave a comment  »

See the full gallery on Posterous

Permalink | Leave a comment  »

Where and what do you work as?
I am a work-at-home Web and Print Designer based in the Baguio City, Philippines. I work for Anomalist Design (http://www.anomalistdesign.com/), but also do freelance projects with my friends under Brown Battery Studios (http://www.brownbatterystudios.com/).

What type of projects do you work in Fireworks and are there any challenges you faced that 
Fireworks have helped you ?
Fireworks is where I do all of my interface design across different platforms: web, iPhone, digital signage, etc.. Fireworks purists may balk at the idea, but sometimes I'll even do some small print projects (such as business cards and leaflets) in Fireworks.

See the full gallery on Posterous

Fireworks excels as a rapid prototyping tool. How does Fireworks helps you in your design workflow?
I do the majority of my web design tasks in Fireworks, from design mockups, to image slicing, and even when I'm hand-coding my markup and stylesheets, I refer to the original design I have in Fireworks for element layering, position, and dimensions. Even if I don't use the HTML export option of Fireworks (in favor of complete control over the markup structure), Fireworks is still an invaluable tool for me.

What is your favourite tool / feature in Fireworks and why?
My favorite feature in Fireworks are Pages and Layer Folders. I cannot express enough how much easier it has become to manage revisions, interfaces, application states, screens, and assets with these levels of organization at my disposal.

If you can only list 5 favorite best features in Fireworks, what will they be?

Pages - provides a convenient way of managing your project according to logical groups (like different page layouts of a website, or screens of a mobile app), as well as allowing you to set master pages that contain repeating elements.

Path Panel - Fireworks was already powerful with the inclusion of several vector tools and features, but the Path Panel brings it to a whole new level! It even has some features (like Fillet Points, as of CS4) that requires a plugin in Illustrator, but is included out of the box in Fireworks!
9-slice Scaling - a very handy feature for smart-resizing symbols.

Image Export - Fireworks has one of the best image export features I've come across, with regards to output filesize and level of control. You can even export 8-bit PNG with alpha transparency!

Styles - basically, Styles is to Fireworks as CSS is to HTML. Stacks of effects and other object attributes can be easily managed, reused and changed!

Fireworks work even better with fireworks extensions.  What is your favourite extension and how do you use it?
I'm going to take this opportunity to send a shout-out to Fireworks Guru Aaron Beall (http://www.abeall.com/), who creates some really useful Fireworks extensions (that eventually get absorbed into the Fireworks core). A couple of my favorites from his library would have to be Path Points (http://fireworks.abeall.com/extensions/commands/#PathPoints) and Path Panel (http://fireworks.abeall.com/extensions/panels/#Path).

Many people compare Photoshop with Fireworks. What is your viewpoint in this?
Photoshop and Fireworks each have their own strengths and weaknesses: Photoshop excels in photo editing and manipulation, while Fireworks is the right choice for web and interface design. Of course, in the same way I tend to use Fireworks for some print projects, people who are more familiar with Photoshop tend to use it for web design, too. In the end, it's about choice: you just can't force people to use a certain piece of software, especially if they're already comfortable with what they use. What matters is what they can achieve, regardless of the tool.

Do you have a Fireworks tip for the Fireworks community?
The most important Fireworks tip: as much as possible, don't flatten. During the course of a design project, there is always a probability that the client will want to change something in the design. Use the power of Live Filters and Symbols to keep your base objects editable, while keeping the effect persistent.

Are you involved with any communities on the web?
I am an active supporter and moderator of the PhilWeavers Network (http://www.philweavers.net/), the de facto organization for Filipino web designers. I am proud to say that I've learned a lot from the past discussions in this community, and that I, in turn, shared my knowledge of and experience in the design industry.

Do you have a blog? Where can we find you?
Whenever I'm not busy working on a project, you can find me tinkering with my technical blog, SixThings (http://www.brownbatterystudios.com/sixthings). As a Fireworks aficionado, I also share some Fireworks tutorials under the Rapid Fire series (http://www.brownbatterystudios.com/sixthings/rapid-fire/). These tutorials abide by the principle of using Fireworks as an all-in-one design tool, without having to depend on extensions or other software. (And when I'm not doing any design-related tasks, you can find me hacking-and-slashing in Guild Wars, as a flexible warrior-primary Vedreus Aardimus.)

There's no better way to learn a piece of software than poking around the menu and the toolbars. Fireworks is packed with lots of useful features that's exciting to find out, and soon enough you'll have enough knowledge to make you more confident in using it as a design tool for your projects. In my opinion, it is relatively easy to use and get a hang of, so don't be afraid to look into what it can do.

Permalink | Leave a comment  »

Thanks to Aaron Abeall for his time for this wonderful interview and his continuous contribution to Fireworks and the community over the years!

To begin with, who are you and where are you from Mr. Aaron?
I'm a web designer and developer, freelancing in the Washington DC area.

What do you do for work as your day job?
I design a lot of websites, apps, and other design work, as well as build frontend experiences that focus on interaction and animation using Flash, Flex, and jQuery. The particulars of what I do can vary a lot from project to project, and Fireworks' flexibility is critical.

Firstly, I love your extensions. Tell us a bit about how you got started making extensions for Fireworks. 
I always loved Fireworks because it is so precise, flexible and fast, and by creating extensions I can make workflows even faster and more precise, letting me focus on creativity. It's like the perfect combination of using my left and right brain: I get to develop useful functionality, and I get to actually use it to create cool stuff. 

What motivates you to make extensions and how do you get the ideas?
Most of my extensions were made because I was trying to achieve an effect, and I thought "hey, I could do this faster/better if there was a tool for it." So I make one! I also get lots of great ideas from the Fireworks community, and I am very keen to help promote Fireworks by extending it.

What is your proudest extension you have developed so far?
I think I would have to be proudest of the Path panel. I love Fireworks' vector editing capabilities, and the Path panel was a project to bring many of those vector related features into focus, and push the features even further. I use it constantly. I also can't help be a little proud that the Path panel now ships in Adobe Fireworks, my favorite design app. :)

Fireworks works even better with fireworks extensions.  What are your favorite extensions from other developers and how do you use it in your work?
There's a lot of great extensions for Fireworks, but one of my favorites has to be John Dunning's "Keyboard Resize" commands. They're so simple yet very useful for resizing vector layouts, which you do a lot in Fireworks. Another all-time favorite is the Transform panel from senocular.com.

You are currently working on a new revamped website for the Fireworks community. Tell us more about it and the process in making the website.
Yes, I am very excited! I've totally redesigned and rebuilt my Fireworks resource site, fireworks.abeall.com, using Fireworks and Dreamweaver -- I have many new Fireworks goodies lined up for release. I started with a lot of planning, then made a few homepage design variations in Fireworks based on a main theme I had in my mind. After I selected a homepage, I designed out many of the key interior page layouts on various pages within Fireworks; by using layer sharing across pages this is a rapid process. Then I went about exporting layout images using slices, and using some of my own extensions along the way to do things like CSS image sprites and CSS styles, and finalized the code in Dreamweaver. I am working on an in-depth article that covers the whole process from start to finish.

What type of projects do you work in Fireworks and are there any challenges you faced that Fireworks have helped you ?
In Fireworks I design a lot of web and app layouts. One of the biggest challenges Fireworks helps with is designing out how interaction will work. Since I can design in vector and use 9-slice resizing, I can quickly and accurately design exactly how something might move, resize, or adjust layout when interacted with. It also helps when a client decides on a change; when I'm using pages and page sharing, I can change something on one page and its changed on all pages, and I can export a preview of the entire site for the client in no time. Another big advantage is when building things in Flash: Fireworks' hybrid vector and bitmap designs translate really well into Flash, where other tools have problems with things getting flattened lost along the way. Also, the guide tooltips let me build in HTML faster, because I can easily measure distances from the guides I used to design the site graphics itself. The list could go on. :) 

See the full gallery on Posterous

How long have you been using Fireworks?
I have been using it since Fireworks MX. 

If you can only list 5 best features in Fireworks, what will they be?
1. Vector tools
2. Pages and states
3. Symbols
4. Live filters
5. Gradient tool with live dithering (smooth gradients without banding)

Many people compare Photoshop with Fireworks. What is your viewpoint in this?
Both are great tools and I think there's a lot of overlap in how people try to use them, but their strengths are a bit different. Photoshop is great at pixel editing, brushing, editing photos, and creating artwork; while Fireworks strengths are hybrid vector/bitmap editing, layout design, interaction mockup, wireframing, web export workflows, and it handles design changes very flexibly. Both are great at what they do, and I use both, but I will always go to Fireworks for a web/screen design because of its strength, and I will always go to Photoshop when I have photo/imagery I need to work on.

Do you have a Fireworks tip for the Fireworks community?
Use symbols. Everyone knows about pages and states (I hope!) but often symbols are over-looked. They let you re-use common elements across your design and keep them in sync, they let you resize bitmap images without losing quality, they let you resize vectors and bitmaps using 9-slice scaling to preserve corners and edges, they let you link assets in multiple documents, and they can even be have custom editable widget-like properties added. Symbols can really save the day when you remember to use them. 

Are you involved with any communities on the web?
Yes, I tend to hang around fireworksguruforum.com, forums.adobe.com/community/fireworks, ActionScript.org, and I always like hearing from fellow Fireworkers over good old fashioned email. 

Do you have a blog? Where can we find you? 
I post lots of Fireworks related stuff at fireworks.abeall.com, and you can find me on Twitter @AaronBeall 

Thanks for the opportunity to talk to one of the best Fireworks Developers. Last question, do you have any advice to the designers out there exploring Fireworks?
If you are a Photoshop user and you design or develop for the web and the screen, I recommend using Fireworks for a few days to get accustomed to the UI differences, and I would be surprised if you don't see how it can help your workflow! Photoshop and Fireworks can work together quite well. 

Permalink | Leave a comment  »

What type of projects do you work in Fireworks and are there any challenges you faced that Fireworks have helped you?
Fireworks is the tool I used the most I think it's one of the most versatile apps there is out there because you can work with vectors pretty much like Illustrator but also you have some great bitmap editing features and filters. For web design project it's definitely the best tool in my opinion. 

Fireworks excels as a rapid prototyping tool. How does Fireworks helps you in your design workflow?
I always start the projects in Fireworks, I start adding all the elements I will need, like texts, navigation, some images. All inblack and white. After that I start testing different things based on the design brief. 

What is your favorite tool / feature in Fireworks and why?
I love the vector capabilities, and that we can add multiple effects in the same object, like multiple inner shadows, glows, blurs.. etc.

Fireworks work even better with fireworks extensions. What is your favorite extension and how do you use it?
Can you believe that I haven't installed any extensions?

Many people compare Photoshop with Fireworks. What is your viewpoint in this?
I think they are different tool, like Photoshop has much more features and it's specifically for photo treatment and editing. Of course you can create websites, but it's much easier to do that in Fireworks in my opinion. It's much more flexible. 

Do you have a Fireworks tip for the Fireworks community?
My tip is play with the Feather with white shapes over dark backgrounds with Overlay for the blend mode to create nice light
effects.

Are you involved with any communities on the web?
I try to share my work as much as possible, through my blog at abduzeedo.com, and other websites such as flickr, behance, twitter,facebook...... I think it's very important to put your work out there and these sites make our life much easier.

Do you have a blog? Where can we find you?
You can find me at
Blog: Abduzeedo.com
Personal Site: fabiosasso.com
twitter: twitter.com/abduzeedo
facebook: facebook.com/abduzeedo
 

Permalink | Leave a comment  »

Sometimes we do encounter unexpected errors or crashes in Fireworks.  One possible reason is due to damage preference files.  Here is an overview of steps what you can do to troubleshoot.

Follow the instructions below to restore preferences to the default settings.

Remove preferences on Mac OS

1. Quit Fireworks.
2. In the Finder, navigate to /Users/Your User Name/Library/Application Support/Adobe.
3. Rename the Fireworks application support folder: 

   Fireworks CS5.1: Rename the Fireworks CS5.1 folder to Old Fireworks CS5.1, for example. 

   Fireworks CS5: Rename the Fireworks CS5 folder to Old Fireworks CS5, for example. 

4. Navigate to /Users/Your User Name/Library/Preferences.
5. Rename the Fireworks preferences folder: 

   Fireworks CS5.1: Rename the Adobe Fireworks CS5.1 folder to Old Adobe Fireworks CS5.1, for example. 

   Fireworks CS5: Rename the Adobe Fireworks CS5 folder to Old Adobe Fireworks CS5, for example.

Permalink | Leave a comment  »

IOS does its own PNG compression for the assets in your mobile app but this leaves with no control over image optimsation.

Here is a png file for testing.  It is a 230kb Fireworks png file.  A quick 24bit png export from Fireworks produces a 6kb png file with no much visual loss.
However when the source file is compress by xcode, it produced a 19kb file.  So using Adobe Fireworks will gives you up to 3 times better than letting xcode handle it for you. 

See the full gallery on Posterous

Permalink | Leave a comment  »

http://blip.tv/building43/build-your-iphone-app-mockup-with-adobe-fireworksbu...

Luke Kilpatrick in a video talked about the process of iphone prototyping and why he uses Adobe Fireworks.
In 1-2 hours time, anyone can piece things together to show and discuss with anyone. You will find out lots more in this video.

Permalink | Leave a comment  »

In Fireworks there are 3 types of slice mode - Foreground, Background and HTML.  HTML mode is use to add custom text or render html codes in a page.
You can also use this feature to build useful interactive components to enhance the experience for your prototypes.

Here is a quick snapsot of the steps you can do for yourself too. I use the javascript plugin from Chosen - http://harvesthq.github.com/chosen/

Permalink | Leave a comment  »

To celebrate the launch of the D2WC event with so much buzz on Adobe Fireworks,  I have released a new set of text styles.
Hope you like it and will play with it.

Download the styles here.
http://dl.dropbox.com/u/1677957/Text%20Effects.stl

Permalink | Leave a comment  »

The Designer / Developer Workflow Conference (D2WC)
I believe every designer or developer out there will be watching this event.  It is packed with lots of awesome sessions by speakers around the world.

This year, i am so excited that Adobe Fireworks will be 1 of the key focus where Dave Hogue, Jim Babbage and Tom Green talk about Fireworks from prototyping, web and mobile and workflows.

I will be blogging closely on the highlights of the Fireworks sessions.

Download the iOS app here
http://itunes.apple.com/us/app/d2wc-2011/id448045715?mt=8

Permalink | Leave a comment  »

As we all know channels helps us to find the most contrast of an image to extract objects from the background.  We often go to Photoshop to perform this kind of tasks. Now with the Channels styles, you can do the same in Fireworks.  You will get exactly the same set of channels that you see in Photoshop.

Download the "Channel Styles" here
(The set contains of RGB channel each, Red & Blue channel, Green & Red channel and Blue and Green channel. Also includes the Alpha Channel and Desaturate)

Tutorial

Step 1:  Open an image you like to use

Step 2:  Duplicate the image

Step 3:  Apply Channel style on the duplicated image to get the best contrast

Step 5:  Flatten the duplicated image

Step 6:   Apply Level to futher enhance the contrast (more white in the background)

Step 7:   Lasso the area at the top to make a selection of the background area near her hair

Step 8:   Paint over with White Brush to remove the background completely

Step 9:   Magic Wand the white background to select the background

Step 11:  Choose "Convert Marquee to Path" to turn selection into a vector path shape. Since is a path object, you can modify the points using the awesome path panel with the subselection tool.

Step 12:  Now cut the path object

Step 13:  Add layer mask to the original photo

Hope you find the Channel Styles useful with photos.  Enjoy!

Permalink | Leave a comment  »

1. First, we draw a button on the four states: the "normal", "mouseOver", "mouseDown" and "unavailable".  These are also the object names which we will use later as button labels for the rich symbol.
   
   
   
   
2.  Next Align Vertical Center the 4 states so that they overlap each other. 
   
   
   
   
3. Then select all 4 states, and press the F8 key to open "Convert to Symbol" dialog window
   
4.  Enter name for the symbol, choose Graphic symbol and enable 9-slice scaling guides
   
   
5.  Enter symbol edit mode and add a text object and name it as "label"
   
6. Make sure the text object is within the safe area of 9-slice guide
7. Set the text object is align to Center in the Properties Inspector

8. Next go to Command menu and choose "Create Symbol Script"
9. In the "Create Symbol Script" dialog box, browse to the graphic symbol you just saved
   
10. Set the following properties as show
11. Done. Your Rich Button Symbol is created inside the Common Library, Custom folder.
12. Go and open the rich symbol jsf in a notepad
13. Paste the code given below and save the jsf.  This is to change the state properties into a dropdown
    
14. Now drag the button symbol to canvas and test the button

Open the jsf file and paste the code as shown

------------------------------------------------------------------------------------------------------------

switch (Widget.opCode){
case 1: setDefaultValues(); break;
case 2: applyCurrentValues(); break;
}

//Initialization function
function setDefaultValues(){
var values = new Array();

//Establish Label and State property, and to define the initial value;
values.push({ name:"Label", type:"text", value:"My Button" });
values.push({ name:"State", type:"ComboBox", value:"normal,normal,mouseOver,mouseDown,unavailable"});

//With built-in method to the current property gives the initial value;
Widget.elem.customData["currentValues"] = values;
}

function applyCurrentValues(){
//Get the current value
var vals = Widget.elem.customData["currentValues"];
//State the current status list entry to obtain the name
var state = vals[1].value.split(",")[0].toString();

//When an error is encountered can alert (); to Debug;
//alert(state);

//Based on user input to change the label value
Widget.GetObjectByName("label").textChars = vals[0].value;

//In the drop-down list, select the user to display or hide the corresponding button background image;
Widget.GetObjectByName("normal").visible = (state=="normal");
Widget.GetObjectByName("mouseOver").visible = (state=="mouseOver");
Widget.GetObjectByName("mouseDown").visible = (state=="mouseDown");
Widget.GetObjectByName("unavailable").visible = (state=="unavailable");
}

------------------------------------------------------------------------------------------------------------

Permalink | Leave a comment  »

One of enhancement in this 5.1 is the support for better improvement for color optimization algorithm.  Fireworks has been having this issue of exporting as GIF, PNG8 for gradient colors due to their limitation. You will have this banding issues which make is quite unusable.

Now this have been tweaked and the result is amazing good.  This is good news for people creating assets for mobile application and mobile web site. The size of bitmap is a big matter since downloading speed is critical.

Here is a screenshot of the comparison.

Here is a great example of png8 in smaller file size and yet same result as png24

png8 - 8kb

Permalink | Leave a comment  »

Creative Suite CS5.5 will include Fireworks CS5.1, which is a minor update from Fireworks CS5.0.

In addition, we will be releasing a patch for Fireworks CS5.0 users.  This patch will include all of the bug fixes that are going into CS5.1.  It will not, however, include the subscription engine that will be part of CS5.1, so it will not fully upgrade CS5.0 to CS5.1. To identify the builds:

n  The full CS5.1 internal build number will be 11.1.

n  After applying the patch to CS5.0 the internal build number will be 11.0.1.

The following bug fixes will be included in the patch and the Fireworks CS5.1 release.
=======================================
Major crash bug fixes
Thank you for using the crash reporter to submit crash problems. Our developers figured out the root cause of many crashes and fixed a variety of unexpected crash bugs when using the following functions and APIs.

• PS Live Effects area
• Vector tool
• Layer naming, editing in multiple pages
• Undo/redo name change
• Find and replace
• Saving files
• Opening legacy Fireworks 8 file
• Win API related changes for 64bit

=======================================
Color optimization improvement
We’ve heard customers’ complaints about the color banding issue of GIF, PNG8, JPEG optimization, and now we have improved color optimization to enable multiple bit depth algorithms for color optimization.

=======================================
Out of memory prevention on Win
Please be aware of 32bit application limitations. Since Fireworks is 32bit application, it is limited to accessing up to 2GB of RAM on Windows. As RAM prices have dropped, you might have a higher-end machine loaded with 8GB or more of RAM, but Fireworks cannot access anything but the first 2GB. Instead of popping up an out of memory dialog box, and risk losing data,  we’ve modified the behavior to bring up a “Low memory” warning dialog box so you can save and close the document, and delete the old history to free up memory. You may also assign a keyboard shortcut to bring up the dialog box to delete the history and close the document too.

=======================================
Enable Save on Crash on Mac
When an application crash occurs on the Mac platform, Fireworks saves the most recent working file onto the desktop to help recover the file.

Improvements:
=======================================
Sticky Save As… location
Fireworks used to keep the same file location as the opened file when the user chose “Save as…”. Fireworks CS5.1 will respect the last saved location.
Choosing export slice from the context menu also preserves the last saved location.

=======================================
AIR SDK update
We replaced the AIR 2.0 SDK with AIR 2.5.1 SDK for creation of AIR applications in Fireworks.

More Bug Fixes
=======================================
FXG related bug fix

• Buttons were not appearing properly in Flash Catalyst after opening a .fxg file that contains buttons.
• FXG Symbols (button, graphic, and Animation) with same symbol ID were not being exported properly.
• RichText tags in exported FXG were[JGW1] required to have a fontFamily attribute.
• Fireworks threw an error while exporting a FXG that contained text with missing fonts or legacy text.
• When an empty text object with the cursor on it is present, Fireworks threw an error while exporting to FXG.

=======================================
Image preview now preserves the settings done through “Save as…”  options dialog box.

=======================================
Fireworks no longer crashes when you try to edit a symbol with a blank name.

=======================================
When an empty text object with the cursor on it is present, Fireworks threw an error while exporting to CSS and Images

=======================================
When exporting an image, nearly white objects on a white background turned transparent.

=======================================
File overwriting warning didn’t pop up for “images” when exporting as HTML and images.

=======================================
The focus was not on the file name in the Windows Export dialog box, and the keyboard could not be used in that dialog box.

=======================================

Regards,

Takashi Morifusa
Fireworks Sr. Product Manager

Permalink | Leave a comment  »

Consulting shows you how to quickly mock-up design a website within 10 minutes. Using Adobe Fireworks, Michael Locke demonstrates how to design a website home page. In this video, you'll see how a web design comes along from beginning to end. You'll see a few design tips and tricks that you can apply to your own project or website.

Download the Work Files Here (Both PNG and PSD files):
http://www.mlwebco.com/tutorials/web-design/fictitious_website.zip

If you have any questions, send an email to mlocke@mlwebco.com or visit http://www.mlwebco.com

Permalink | Leave a comment  »

When Adobe Fireworks was launched, i did a demo presentation of the 9 key features. Some of you may have forgotten already. So here is the recap of the slides for those who have missed it.

In the first few slides, i showed about how the Adobe UX team uses Fireworks to do brand identity and splash screens design inside Fireworks. Cool right?

Permalink | Leave a comment  »