Getting Started with Fireworks: Using Master Pages, Pages, and Web Layers

Getting Started with Fireworks: Using Master Pages, Pages, and Web Layers

on Dec 14th 2010 with 58 comments
Tutorial Details
  • Topic: Getting Started with Fireworks
  • Time Required: 30 Minutes
  • Software: Fireworks
  • Version: CS5

Final Product What You'll Be Creating

Download Source Files

Today we’re going to dive into the world of Fireworks by examining some of the basic features that make it different from Photoshop. Specifically, we’re going to be using a very basic design to show how Master Pages, Sub-Pages, and Web Layers work to create a complete web design in Fireworks that uses internal file linking. This is a great place to start if you haven’t really used Fireworks much before, so let’s dig in!

Getting Started With Fireworks

This is the first in our series of Getting Start with Fireworks posts where we’re be examining the program and what it has to offer to web designers. In future tutorials we’ll be walking through how to properly slice and export optimized web files, how to use Fireworks for rapid prototyping, and how to use many of the other features that are specific to FW.

About Fireworks Pages

We’ll be examining the Fireworks feature called “Pages” in the video, but let me provide just a bit of background. These features simulate different pages within a webpage; Fireworks has the unique ability to allow users to define some “universal” or “master” elements for the entire site (like navigation and branding) in addition to variable content, like text, images, etc. In the video, we’ll be examining how these features relate to each other using a very simple design. By the end of the video, you should have a pretty good understanding of how you can use these features in your own web design.

Feel free to download the source files and follow along, or use your own design to create the same effect.

About the Author:

Connor Turnbull is a web designer based in the UK with a special interest in attempting to create websites around a specific need. He has a special interest in designing usable websites that user can really interact with. And, he’s also part of a new, three-person collaboration on the Envato Marketplaces.

Connor will be walking us through more of these Fireworks videos in the future, so if you have any other specific requests, questions, or ideas, post them down below!

 
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.

This author has yet to write their bio.  

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

    Thank you! Thank you! Thank you!

    I’m GLAD that you guys are going to have a series on this :D!

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

    Interesting video Connor. While I’m still going to label myself a “Photoshop Web Designer”, it’s definitely interesting to see some of these features that Fireworks has to offer. The Pages feature seems a little bit more graceful than my own method of hiding/unhiding lots of different layer-groups… and I can actually see how Fireworks might be a better tool for rapidly creating a wireframe to show a client how a site might work. The trick of saving out an interactive PDF was great as well ;)

    Cheers!

    • Tom Green

      You should see what you can do with the Pages feature of Fireworks and Catalyst. It rocks da house!!!

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

        I’ve been reading up on that just today and I’ve gotta admit that it looks pretty hot… Definitely a worthy topic for future tutorials. Thanks for the comment Tom!

    • dogs

      “hiding/unhiding lots of different layer-groups”

      Honestly can’t believe people work like this in a world where Fireworks exists.

  • LaToya

    This is great and just what I’ve been looking for! Thanks! :D

  • http://shawnrgrimes.com Shawn Grimes

    This is really great.

    I have been really wanting a series on using Fireworks in web design. I’ve been using Photoshop for years and have wanted to actually move to Fireworks for many facets of my work and this is a great starting point.

  • Carlos

    Thanks! But please don’t refer Fireworks only as a wireframe tool. A lot of great stuff can be done with FW :)

  • http://www.josemiguelgonzalez.com Jose González

    Great video! This was my first time watching the Fireworks interface and interaction.
    I loved the option of saving the PDF file and making it feel just like a website.

  • http://circullr.com tom

    After watching this I will be using Fireworks for my next site.

    Thanks keep them coming!

  • http://www.lucasdelrio.com.ar Lucas del Río

    Nice video! Great trick for PDF interactive creations.

    I found a bit difficult understanding what he was saying. Apart from that, great introduction =) hope to see more!

  • http://superfetz.com Henrik

    Cool video – keep ‘em coming! So happy to see some focus on Fireworks :-)
    Can’t wait for next round… thanks for sharing!

    Happy Holidays :-)

  • Paulo Vítor

    Can’t watch it!

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

      Can you elaborate on this a bit Paulo? Was it too slow, a language gap, are you on an iPhone? Any information will help out ;)

  • Lukas

    I love your accent dude!

    The pages feature looks very nice, but when you cooperate with other designers or coders you probably still need to use photoshop, because they aren’t familiar with FW. That’s one of the big contra’s against FW, I think.

  • http://www.twitter.com/mkkov Mikko

    Thanks for covering #adobefireworks in Envato network.

    Some feedback. I dont know how much/long the presenter has been using Fireworks, but there is some dubious rushing going on. An experienced Fireworks-user could done the same video in just 2 minutes presenting the same scenario loud and clear. This video pretty much shows the method to do it in the hard way.

    - Optional way to spread PS-comp to several pages is to duplicated the page and remove unwanted content instead of endless copypaste.

    - Copypaste elements to Masterpage is totally unnecessary – you can just go over any folder/layer (in layers-panel) and “Add to Masterpage” via select right click.

    - This example works when you got equal hight pages. Usually each page is random height, so adding footer to masterpage is a bad idea. Better idea is to convert the footer as a Symbol and share the element across all pages.

    - The pages-shortcut in bottom of pages-panel is hardly ever used – everybody uses the pages-shortcut which is located at the just upper right corner near canvas.

    - Adding webslice as a link? select object and press ALT+SHIFT+U. Drawing boxes is just too slow.

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

      Thanks for the feedback Mikko – I’ll follow up and see if we can’t re-record this and improve a few of the details that you mentioned. Thanks!

    • Connor Turnbull

      Thanks for your feedback. This was my first screencast so naturally I did get a little nervous and maybe missed out one or two things. However, I tried to approach it in a way that wouldn’t introduce too many shortcuts and options to a new user.

      Also, in a screencast I thought it might be a little easier to go the longer way (ie drawing boxes) to be able to visually illustrate it on the video rather that doing keyboard shortcuts.

      Anyways, I’ll keep your feedback in mind for future videos.

    • http://www.twitter.com/mkkov Mikko

      The tutorial is very good for non-experienced users – There are so many way to achieve the same results in FW. I just wanted to point out the most common ways. Thanks for sharing FW-love, there is never enough Adobe Fireworks tutorials, so keep up the spirit.

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

        Sure thing Mikko :)

        And yes, there are tons of ways to complete the same task in FW… we’ll feature some other ways in the next couple tutorials as well.

        Cheers!

  • Jamalorg

    Disappointed :(

    I was not expecting screen cast for this. Authors suppose that everybody is on the same boat of the broadband internet.

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

      Hmmm, my apologies jamal – while it’s true that the video works better on a broadband computer, it’s definitely not something that we assume. I’ll do my best to optimize videos in the future to see if it’ll speed things up, but I’m pretty sure it’s the same setting that the rest of the tutsplus network is using ;)

  • Malik Dixon

    I have three things that I can would like to say; More Fireworks, More Fireworks, and More Fireworks. The Fireworks tutorials have been is a long time coming. Adobe TV has a lot of tutorials on Fireworks done be Dave Hogue and Jim Babbage; however they don’t get into how to of a particular item within fireworks i.e. how to link the pages so that when the master pages get updated, the other pages get updated as well. There are many other things that Fireworks can do that a lot of designers just don’t know about. I hope through these tutorials more designers can use Fireworks along with Photoshop as part of their workflow.

    • http://www.communitymx.com Jim Babbage

      The Adobe TV videos are meant to be high level overviews of certain features. I cover these topics in much more detail on CommunityMX, and in my books and video training.

      I think it’s great that there is now another Fireworks resource out there and I’m looking forward to seeing more! Keep up the good work!

  • http://wpcanyon.com Boba

    I barely understand what UK people are talking :)

    But i managed to understand 80% of what you said, so thanks, great screencast :) But i design directly in the browser and just do graphics in Adobe Photoshop :P

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

      LOL! My wife said the same thing (actually, her response was more like, “who cares what he’s saying, I love his accent”, but that’s besides the point). While we’ll be doing out best to stick to English language tuts here, there are all sorts of different flavors and accents within that frame of reference :)

      Thanks for the comment Boba!

  • http://www.jasonbobich.com Jason

    Awesome video. I’d love to see some more!

    It’d be cool to see some more complicated design elements created in FW. It would also be cool to see some finalized setup for having all your images ready to export. This would be great to see combined with some more complicated design aspects like maybe some transparent PNG’s or gradients you plan to repeat across when you code the design where you’re only exporting a small sliver of it, etc.

  • http://www.mrblonde.ca Mr. Blonde

    Good Job, Mr. Turnbull. Thank you for the brief overview, although I would of preferred to see the whole thing created in Fireworks rather than copy/pasted from PS. I’m excited to see more. Thank you.

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

      Thanks for the feedback Mr. Blonde. As this was our first Fireworks tut, I told Connor to keep it as simple and intermingled with Photoshop as possible (as that’s what most people are used to at the moment). We’ll be doing quite a few of these in the future though, so I’ll keep your feedback about offering standalone Fireworks tutorials in mind :)

  • http://www.idesignit.co.il/ Elron

    Great video! Thank you!
    i want more tuts for FireWorks. :D
    next time please put some subtitles becouse i dont understand everything he saying…

    Keep on great work!

  • http://www.reinegger.net Andre Reinegger

    Grat stuff, I love to see more of these!!!
    I am tierd of watching people using Photoshop so ineffective for screendesign tasks which can be done in Fireworks in less then half of the time!

    Please webdesign tuts, don’t make the mistake showing us more of this timeconsuming Photoshop workarounds for webdesign.

    Meanwhile you can have a look at my article “50 reasons NOT to use Photoshop for Web Design” which will be updated these days. http://www.reinegger.net/50_reasons_not_to_use_photoshop_for_webdesign.html

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

      Thanks for the feedback Andre (and great link!) – we actually have a massive set of Fireworks tutorials scheduled (about 20 over the next 5 months), so you can be sure that we won’t be neglecting Fireworks as part of the web designer’s workflow. We’ll still be doing plenty of Photoshop tutorials too, but there’s going to be a steady flow of tutorials showcasing how the two can and should work together as well ;)

  • Alex W

    Fireworks is an exceptional tool.
    I’ve been a Photoshop designer for the past few years, and have always wanted to try out Fireworks to design. I may give it a go!

    For those of you who might be skeptical, Fireworks can create some beautiful pages.
    Check out Rogie King’s Website that was built completely with Fireworks.

  • Alex W

    Whoops.
    Fixed Link

    (edit – Brandon – I fixed it for you Alex ;))

    • Alex W

      Haha, thanks Brandon!

  • http://www.alanfeekery.com Alan Feekery

    Fireworks tutorials, now were talking. =D

    Keep em coming!

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

      Will do Alan – thanks for the comment!

  • Windo

    Wow, I didn’t know fireworks can export into pdf with a linked button in it. It’s Awesome.

    One question, how to, for example, when you are in home page, the home button should look bolder than the other nav menu. but the nav menu is in the master page.

    Thanks,

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

      I’ll admit that I’ve been surprised quite a few times in the last month since I started digging into Fireworks… so I’m on the same page with you there ;)

      As for your question – the UI here is pretty much just for demonstration – I agree that the home button should be bold (or have some other indicator of being selected), but as this is mainly just to show off the Pages/Master Pages feature, I don’t think it gets in the way. Good to know that people are noticing these little details though – I’ll do my best to make sure any inaccuracies like that get ironed out in future vids.

      Cheers!

      • Windo

        Thanks for replying, yes it impress me much, right now am thinking to recreate some of my old psd with it.

        One more wow., I think I can do a perfect free transform rounded box! (is it just me? or everyone think the same way too)., anyway Thanks for doing the best, going to wait for more post about firework.

  • Connor Turnbull

    Really shocked with the response to this screencast overall! You guys seem to love Fireworks. Don’t worry theres more stuff coming.

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

      Yep yep yep! We also just booked a fantastic new guest author to do some advanced Fireworks video tuts for us to, so we’ll be able to compliment Connor’s series of entry level courses with some complex usage scenarios (like combining FW with Catalyst, Flash, even After Effects) in the future. Thanks for the feedback everyone!

  • saquib

    That’s cool, please make tut on Fireworks tools. :)

  • Jazcash

    I’m the opposite, having been a Fireworks user since 2005 when I used to use Macromedia Fireworks MX 2004. After a year or two after using Fireworks, I finally decided to try out Photoshop, unfortunately, being so used to the ways of Fireworks, I couldn’t adjust myself to the PS environment. Since CS3 and up though, Adobe made the interfaces a lot more alike and made them work in a very similar way.

    Anyway, good screencast, good to finally see Fireworks getting the attention it’s always deserved. Looking forward to seeing more.

  • Averageman

    Great Job! This print designer learned a lot. More on fireworks please.

  • Mike

    Does anyone else think that Fw seems like the holy grail in theory but not in practice. Masterpages in Fw seems like a waste of time since when you slice/css your photoshop design you practically get masterpages.
    I really want to like Fw I really do. :) I appreciate you taking time making this tut btw.

    • http://www.optimiced.com Michel

      Pages/Master Pages in Fireworks are not a waste of time, but a time saver! ;)

      CSS/HTML will be the last stage of the design you have created in Ps (or Fw).

      But before arriving to that stage, you’ll have a first draft, then probably a few more revisions of the design. During this stage, you’ll be discussing the design with the client, and you’ll be sending to him your revisions, based on feedback. At this point, being able to design the front page and inner pages using the Pages/Master Page feature might be a huge timesaver — no need to copy and/or edit numerous layers, trying to adjust every single page of the design!

      If your design shares common elements (header and footer come to mind) between, let’s say, 5 or 10 pages of the design (front page, standard inner page, inner page with contact form, etc.), you create the header and footer only once, edit them in one place, then share them between any number of pages. Then you can make edits to any part of the design, but the common elements will be automatically updated everywhere! And then you just have to export your pages (as images, or as an interactive PDF, etc) and presto! job done much faster! :)

  • http://www.optimiced.com Michel

    @Connor & @Brandon:

    1+ for more tutorials about Fireworks! This is a highly underrated Web design tool, but I see that finally it starts to gain some attention, from both pro designers and from popular design magazines. And that’s really cool! (Hint: I think that your tutorial just got listed here…;-)

    Fireworks is my favourite tool since I started doing serious Web design. I never missed Ps (or Ai), because for Web design, Fireworks gives me all the power and speed I need!

    In my opinion:
    – Ps is for bitmap editing & print/screen,
    – Ai is for vector editing & print/screen,
    – Fw is for bitmap/vector editing, but for Web/screen only.

    And because Fw is so focused, it does the job so well. :-)

    With Fireworks, Web (graphic) design is a breeze. Pages/Layers/States help a lot during the Web design process; you can create a beautiful design and then show to a client an interactive, clickable mockup; export of images is very fast and optimized for best quality and smallest possible size; Fw handles pretty well .psd and .ai files (you are not “locked” to Fw); the object-oriented interface (click on an object, edit almost all of its properties instantly in one panel!) speeds up work a lot; symbols, vector rectangles with editable rounded corners, and other special vector shapes increase ease of use even more…

    You can also create beautiful artwork with Fireworks — website designs, illustrations, drawings, icons, etc. (I once tried to highlight some of the best examples in an article for Smashing Mag).

    Of course, Fireworks is not perfect, but my experience so far tells me that if you are a Web designer, this is probably the most useful tool you’ll ever have at your fingertips.

    All eager to see what will be your next article on Fireworks! :)

  • http://www.daft-thoughts.com DafT

    I’d love to see more Fireworks tutorials, as, being a Web developer, it suits my needs better than Photoshop does (which is what I currently use).

    Great tutorial, and I’m looking forward to another great Fireworks one :)

  • http://newstreamdesign.com LN

    I’m a huge Fw fan for a long time now and use it practically for all my web design work. It is great that tutorials such as these are starting to pop along but one thing we need for it to become mainstream – WE NEED THE DEVELOPERS TO CATCH ON!

    Please make some tutorials on how how the CSS / HTML guys can make the most out of Fw. How easy it is to slice, optimize, export etc. Any takers?

    (P.S. I know you can convert Fw .pngs to Ps .psds – though it’s still not perfect. At all….)

  • http://northnexposure.com Gareth

    Great start to a what I hope will be a full series on using Fireworks. It would be great to see a full website design created step by step in Fireworks showing as many of its features as possible.

  • http://www.bigbossdesign.de ConnyLo

    Great Tutorial! Thank you! I hope you can tell me more astonishing things of FireWorks. I have tried a few things around because I feel that FF is more uncomplicated than PS. Now I thing I have to explore FF much more.

  • kirav

    thanks a million.

  • bp

    Great tutorial. It looks like Fireworks has stepped up their game.

    Coming from a print/Indesign background, this feels more natural to me. I do a lot of skinning around a set site structure, so the master pages and linking will come in handy when creating mock-ups. Also great for wire-framing.

  • Pingback: Viral Notebook » Diigo bookmarks & resources for January 21, 2011

  • FP

    It’s a great tutorial!
    I have recently created an animated drop down menu bar by CS4 Flash, and I want to put that menu bar into my firework website master layout. How can i do that?

    cheers

  • Steve

    Great first tutorial. I’ve always wondered why you’d use Fireworks rather than Photoshop and that simple feature of master pages has already answered it!

  • Pingback: 60 Excellent Web Development Tutorials | stylishwebdesigner

  • http://www.fcswebsites.co.uk Nick

    I’ve been using Fireworks for several years, but only just started using the pages feature thanks to this video. It’s a big timesaver over using separate files and the PDF export is great for showing to clients. Thanks!

    Nick

  • Pingback: Ein paar Fireworks-Links « F-LOG-GE

  • Pingback: Student, Apple Fan, Non Dualist, Feyenoord Supporter en Webdeveloper bij Webrr » Randy van Vugt

  • http://haywardwindshieldshop.com Windshield Repair Hayward CA

    Thanks for the making the Video. Its really helpful. I am starting to make design for my website. I hope it comes out good design..

  • Pingback: Wireframing & Prototyping with Adobe Fireworks – Resources and Tutorials

  • Pingback: Web Development articles, tutorials, help » Blog Archive » Wireframing & Prototyping with Adobe Fireworks – Resources and Tutorials

  • Pingback: Developing A Design Workflow In Adobe Fireworks@smashing | seo博客大全

  • Pingback: Developing A Design Workflow In Adobe Fireworks | Web Design Kingston

  • Pingback: Developing A Design Workflow In Adobe Fireworks | FloroGraphics.com

  • Pingback: Developing A Design Workflow In Adobe Fireworks | DigitalMofo

  • Pingback: Developing A Design Workflow In Adobe Fireworks | E BLADE

  • Pingback: Developing A Design Workflow In Adobe Fireworks | I AM A SLUCKER

  • Pingback: Developing A Design Workflow In Adobe Fireworks | Steve deGuzman

  • Pingback: Developing A Design Workflow In Adobe Fireworks | Buypappa blog

  • Pingback:   Adobe Fireworks CS6 Features and Tutorials by Web Factory South Africa

  • Pingback: 【翻译】如何通过Adobe Fireworks建立工作流程 | I am Xaviering