Try Tuts+ Premium, Get Cash Back!
Getting Started with Fireworks: Batch Processing Experiment

Getting Started with Fireworks: Batch Processing Experiment

on Jan 14th 2011 with 13 comments
Tutorial Details
  • Program: Adobe Fireworks
  • Difficulty: Easy Peezy
  • Estimated Time: 4 mins

Ever needed to batch process an entire folder of files for the web? We’ll walk you through how to do it in this screencast… and there’s a special surprise at the end (hint, you’ll wonder why you haven’t been doing this all along!).

Batch Processing in Adobe Fireworks

We’ve been releasing a wave of Fireworks tutorials lately… but we haven’t hit the single most important tool that (I believe) Fireworks has to offer web designers. What is it you ask? Batch Processing!

In mere seconds, Fireworks can offer you some enormous file-size reduction over the “Save for Web” process in Photoshop… but what’s better is that it’s 100% automated. This means you can easily save out all of your normal files in Photoshop, and run a simple batch process over the entire folder and get some massive file compression without losing any noticeable quality loss!

It’s Like Liposuction… for Your .JPGs

I was going to make some crass reference to overweight web graphics and the serious need for a treadmill… but this is a professional blog, so I won’t.

Just do this test for me (you can thank me later):

  1. Find an existing folder of web-images that you’re using right now for a site. (preferably all .JPGs for simplicity, but any files will do).
  2. Run a Batch Process over the entire folder…
  3. Use JPG > 85% for your .JPGS – play around with optimal settings for the other file types.
  4. Record the orginal file sizes and the new file sizes.
  5. Post Your Results in the Comments Section below.

I’ve done this little text about 30 times over the last 2 weeks and each and every time I save about 40% – 60% of the file size…

It works for all file types…

I’m about to release a new product over at ThemeForest.net, so I figured that I would run some basic tests over some of the background images. The problem was, a lot of the files were PNG-24 files with transparency and I didn’t think Fireworks would offer any better compression. I was oh-so-wrong! I was able to save out the PNG-24s as PNG-8′s in most cases with no lost quality and came out with 50% file size savings.

Alright – I’ll stop gushing about how much I love the Batch Processing tool (because I kinda feel like one of those infomercial goons on late night TV right now). Even if our Fireworks Pro Video series doesn’t convince you to stop using Photoshop as your pimary tool (I’m still a die-hard PS user myself), take a moment to consider what Batch Processing in Fireworks has to offer.

Brandon Jones is MDNW on Themeforest
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Brandon Jones is the old Wptuts+ Editor. From sunny Southern California, Brandon has been designing, drawing, photographing, and coding the world around him for the past several years. Not content to pick one media and stick with it has left Brandon with a broad range of talents that have allowed him to work on projects ranging from grungy digital art kits to Fortune 500 software prototyping. He loves design, but even more, he loves the passion and creative spirit that embodies the design community. Check out Brandon's work at ThemeForest.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://davidlender@hotmail.com David Lender

    I’ve been using Fireworks for almost 10 years now and have had many discussions with Photoshop users about the benefits of optimizing images with FW over PS. Fireworks is streamlined for the web and makes designing so much easier with intuitive tools and interface. The slices is one of the biggest reasons I use FW. It’s so much easier to see and manipulate them than with PS. Also, how the images, text and slices are on their own layers in FW makes so much more sense than how PS puts them in folders and such. In FW you click on the image or text and it’s selected and you can immediately start editing. So much more easier!
    Thank you for doing this screencast. While I knew about the batching, it’s good to get the word out to others who don’t know about the many benefits of FW. I look forward to more great screencasts and tutorials!

    • http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones
      Author

      Funny you should mention slicing – we actually have a video tutorial coming out shortly that reviews how it’s different (and easier to use) than Photoshop. :)

      Part of me wishes there could be some hybrid Photoshop version with Fireworks features… but I suppose that’s asking a lot.

      Thanks a bunch for the comment David!

  • Brent Larson

    Your RSS Feed is broken, yo.

    • http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones
      Author

      Fo realz? I’ll checkx it out… :)

      Thanks Brent – Passing it along to the dev crew.

  • Andrea

    Could you make a tutorial about the background used in the screen cast ;P

    • http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones
      Author

      I’ll see what I can do :) Thanks for the comment Andrea!

  • kankaro

    Thanks a lot for this great tuts :D

  • BeatShot

    What’s up with all that FW in here lately? I mean this is cool and all, but somehow this is strating to be the main focal point of this site. Would like to more webdesign related articles, interface tutorials. Right now every second post here is about FW and interface tutorials have been burried like they were in PSDtuts.

    • http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones
      Author

      Hi Beatshot,

      Thanks for the comment – it’s well noted. The reason we’ve been showcasing a bit more Fireworks content than non-FW content lately is simply because, for the first several months since launch, WebDesignTuts didn’t show off any Fireworks content at all. We got quite a few emails and comment requests that we publish more of these FW tutorials, so it’s in direct answer to reader comments.

      That said, Fireworks isn’t for everyone. I know that as well as anyone else (I’m a die hard PS fan myself), so we’re going to be doing our best to release a better blend of content over the next couple weeks. We certainly won’t stop publishing the FW stuff as a lot of people are getting some great use out of the lessons, but I’ll personally see to it that we release some articles and tuts for non-FW users as well.

      Cheers and thanks for the comment! Feedback is what makes the site.

  • # Fez

    Hey Brandon,
    Thanks for the tut. Could you please post a picture of the original vs the processed file so that we can see how much of a loss there is using this method. So far from what I’ve seen with my files maintaining the quality at 85 doesn’t make the images look bad and the file size savings are significant!

  • http://W.I.P. Peter Richardson

    Hi,
    Another feature that has been in FWs for a while now is ‘Selective JPEG’ (Modify > Selective JPEG > Save selection as JPEG mask) Great for reducing file size of individual images with large areas of sea/sky for example.

    Thanks for the tut and keep up the good work :-)

    Peter

  • Pingback: Batch Processing in Adobe Fireworks

  • Pingback: Getting Started w Fireworks: Intro to Using the Slicing Tool | Webdesigntuts+

  • Pingback: ART COPILOT VFX & MOTION GRAPHICS Getting Started with Fireworks: Intro to Using the Slicing Tool | ART COPILOT

  • Pingback: Primeros pasos con Fireworks: Proceso por lotes Experimento

  • Andy

    ORIGINAL SIZE: 532.2 MB
    NEW SIZE: 144.5 MB

    SAVINGS: 72.85% SMALLER!

    ALL CAPS = THANK YOU!

    • http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones
      Author

      Love the all-caps! Thanks for the stats Andy!