Try Tuts+ Premium, Get Cash Back!
Fireworks Pro Series: From Photoshop to Fireworks to the Web

Fireworks Pro Series: From Photoshop to Fireworks to the Web

on Jan 13th 2011 with 18 comments
Tutorial Details
  • Programs: Adobe Photoshop and Fireworks
  • Version: CS4 and above
  • Estimated Time: 15 minutes
Download Source Files
This entry is part 3 of 8 in the Fireworks Pro Series Session
« PreviousNext »

It’s time for another Fireworks Pro Tutorial! In this video tutorial we’re going to show you how to move from a Photoshop .PSD file to Fireworks, and then to the web with a functional CSS prototype. We’ll also cover some of the little “gotchas” that you’ll encounter along the way.

Moving from Photoshop to Fireworks to a Web Prototype

In the series introduction, we discussed where Fireworks actually fits in a web designer’s workflow. Today, Tom Green, a mighty Fireworks wizard, going to show us firsthand how to move from a finished .PSD file to a Fireworks document… the goal, to create a functional coded prototype. Grab a cup of coffee and hit play:

About the Author

Tom Green is a professor of Interactive Multimedia through the Humber Institute of Technology and Advanced Learning’s School of Media Studies. Like all faculty in the program, Tom believes his students deserve to be taught by instructors who are regarded as experts in their field and whose knowledge of their subject is current with industry best practice. He is an Adobe Community Expert, Adobe Education Leader (Post Secondary), Community MX partner and was listed in Adobe’s Top Ten Most Influential Flash Designers.

Tom has written several books (9 in all!) and extended tutorials on the topic of Fireworks and web design over the last 7 years, so he’s a natural fit to guide us through this incredible program. After this introduction, Tom will be guiding us through the wonderful world of Fireworks with several video tutorials. Alright, now that you know a bit about Tom, let’s dig in!

About the Fireworks Pro Series

If you’ve been wondering about what makes Fireworks tick for a while, this series is being recorded for you!

We’re amassing quite a few tutorials for everyone from the beginner to the expert, so be sure to check out our entire library of Fireworks tutorials.

If you have a particular request or question about using Fireworks for web or app design, post it in the comments section along with any of your other thoughts!

 
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.

Tom is a professor of Interactive Multimedia through the Humber Institute of Technology and Advanced Learning’s School of Media Studies. Like all faculty in the program, Tom believes his students deserve to be taught by instructors who are regarded as experts in their field and whose knowledge of their subject is current with industry best practice.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Xurion

    The simplicity of the example makes Photoshop step useless here : everything could be made into Fireworks directly, really improving the efficiency of the work …

    But thanks for the details about the use of Fireworks :)

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

      Thanks for the comment Xurion – Yes, most everything can be created in Fireworks – but as a lot of the users out there are starting out in PS, this video is intended to illustrate how to move from one to the other… so even seeing some of the basic steps of opening up a PSD in Fireworks can feel alien. As we dig further into this series, some of the reasons for why you might actually want to start in Fireworks will be discussed. Thanks again!

      • Xurion

        Right, I didn’t catch it when I posted my comment ^^”

        I look forward to seeing deeper tutorials about this powerful program named Fireworks. I see it as a mix between Illustrator and Photoshop, but lighter and at a more affordable price. This makes it really interesting for web designers, in combination with Flash.

        The fact those programs were bought by Adobe occults them behind Photoshop & co, I think. So, thanks for bringing back some light on them :)

  • Marta

    Erm please don’t get me wrong as I do appreciate Fireworks series a lot, but this is just so pointless. Why would you use Photoshop to create such a layout at all? You can do it all in FW half asleep and with mighty hangover. You could in fact do a lot better.

    I just can’t see the point of perpetrating the myth of FW being good for slicing and prototyping only?

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

      No worries Marta! You make a perfectly valid point that, with simple layouts, it makes a lot more sense to start out in Fireworks… BUT, as our readers’ polls have revealed, the vast vast majority of web designers rely primarily on Photoshop for everything from simple wireframes to complex multi-page layouts. This first official video in the series is meant to be more of a primer for designers with a strong Photoshop background to see how to move from a PSD to FW.

      Keep in mind this is part of a long series that we’re publishing over the next couple of months… by no means are we limiting FW to a “slicing and prototyping tool” only… but it’s the first step towards understanding one of the key roles that Fireworks can play in a web designer’s workflow. Each week we’ll be digging further into the unique features that FW offers and how to use them… so if this is still too beginner-level for you, just hang tight until we get to the good stuff!

      Thanks for the comment :)

    • Tom Green
      Author

      Let’s not get hung up on the “Simplicity” or “Complexity” of the Pshop files issues.

      The key point is the “seamless” move from Pshop to FW with a couple of gotchas – effects and so on – thrown in. As you saw layers remain inact. I also attempted to answer the “What do I do when it gets to FW? ” question. What I showed is how the thing gets sliced and diced- regardless of complexity of the Pshop image- and out to a browser. The workflow is simple but those “boxes for divs” technique may not be common knowledge for those new to FW.

      I deliberately avoided the HTML output because it is still tables based which seriously makes no sense when the “Standardistas” rule the roost.

      The really interesting point is that regardless of how complex or simple a layout you have in Pshop, the FW workflow really won’t deviate significantly from the one shown.

  • Liz

    Look forward to seeing Tutorials on Designing in FW. I saw one design video on FW in the premium nettuts+ category and it was very helpful. Right now i mimic the photoshop web design tutorials but do it in FW since that’s my preference. Thanks!

  • http://www.jakub.chodorowicz.pl/ chodorowicz

    Sorry, but this didn’t convice me to Fireworks at all – maybe the benefits weren’t highlighted enought, I couldn’t see none. This export wasn’t even interactive, yeah? Why not to export just a whole flattened jpg file and show it to client? The code exported by FW, as far as I could say, was just usuless – “to make it rock” you would have anyway to start it all over anyway.

  • Mike

    Unfortunately this has just proved how utterly useless FW is to my workflow. If I wanted to show the client a mock I could have just loaded a flat image into the browser. Fireworks is fine for simple layouts but the code generated here would be torn up and rewritten here. I appreciate this may be of use to some here but when will Adobe either give PS the best buts of Fireworks or rewrite Fireworks into an agile lightweight web design app, Drawit by Bohemian Coding already gives this a run for it’s money or even Apple Keynote!!

  • http://www.zenwebsolutions.com/ meemo

    I agree with Marta in that I too would skip Photoshop and start off initially in Fireworks anyway. I much prefer it to Photoshop in terms of creating a web design layout – it’s alot quicker and simpler to use for design and slicing. Usually when creating a concept for a client to review I just save the whole thing as a flattened JPEG, drop it into Dreamweaver and upload. I wouldn’t really say the specific CSS and HTML are necessary at concept stage… especially having just seen how messy the output code was!

    Nonetheless thanks and I’ll look forward to seeing further (more in depth?!) Fireworks tutorials in the future :)

  • http://nataliaventre.com Natalia Ventre

    I think Fireworks is great for prototyping/designing, the pages and styles are powerful and it’s very easy to add interactivity, but exporting as HTML takes time and the result is a disaster. To present the design in the browser to a client, I rather just export the images’s slices and do some basic code by myself.

  • Carri Craver

    I generally use Fireworks and prefer it to Photoshop on a daily basis. And so I am pretty excited to see tutorials from designtuts on Fireworks. Looking forward to learning things I may overlook.

    However, I never use this CSS feature b/c it just seems like a mess. It seems like way more trouble than it is worth. Am I missing something?

  • Vinay Bhat

    Great Article!

  • Brandon

    I don’t really get the purpose of rapid prototyping, and this tutorial hasn’t clarified it any more for me. Unless required, isn’t it easier to just mock up an image in a browser?

    Sure, it lets clients click and navigate the site, but in my opinion, it’s a nice-to-have but not required. Why would I spend time (and therefore, money) mocking this up simply so a client can click things?

    Perhaps Fireworks has uses outside of this, but I haven’t found a compelling reason to incorporate it into my workflow yet.

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

      Hi Brandon (great name!),

      “isn’t it easier to just mock up an image in a browser?”

      Yes and no – in some cases, yes, it’ll make a lot of sense just to show a static .JPG image to a client. However, I’ve found myself in a situation countless times where that’s not enough. You could be mocking up a web-app, or a complex site feature that a high level client actually requires the ability to see it functioning to a small degree. This is where a “prototype” comes in… it’s not a fully coded solution, but it’s enough to give the decision maker enough information to make an informed decision on whether or not they actually want to pay for the fully coded version. It’s a situation that a lot of web designers find themselves in when working with clients who have entire teams making decisions (like most major companies) – and it’s often a vital tool for building consensus. In this way, Fireworks brings a lot more ease to the process of creating a prototype because a lot of the simplified tools are built in.

      Hope that helps clarify.

      Cheers!
      Brandon

  • http://slcoding.com Lucas Rolff

    The big image on the site, is missing the shadow and stroke on the right side? How come?

  • Pingback: Fireworks ist für das Web besser als Photoshop « F-LOG-GE

  • Hafsah M

    This was extremely helpful to watch. I’m one of those weirdos who does everything in Photoshop but doesn’t have a strong hold on getting it from PSD to the web. I’ll have to play with Fireworks more! Its awesome that Fireworks makes creating a CSS file SO easy — pop your psd in, export and boom, a css file to tweak. Love it.

    Thanks for this tut!

  • Ian

    Thanks for this well done tutorial. I’ve been learning PS and would like to also learn fireworks. I’m new to both. I’m glad you pointed out that this is a prototype and not intended to be the final product. It’s funny since I have learned html and css with a text editor, it drives me nuts when I have to look at and try to edit code that looks like it came right from the prototype export. I know a few people who are major artists when it comes to designing the page in photoshop but are clueless about semantics, standards, and clean coding in html. Nothing worse to me than a web site in production with millions of html space characters, br tags, and extra divs for spacing, and inline styles on everything.

    I’m going to enjoy the rest of the series. Thanks :-)