Fireworks MX & MX2004: Fun with Productivity - Part 1

It's no secret, when designing a site, your graphics need to be sliced, diced, optimized, and even put back together in our (X)HTML pages. In a previous article, Things you should know about FW (part 1), I covered basics of features like Symbols and Styles, perfect for during the production process. Now, I'm going to show how we can chop down more grunt work areas before and after we draw any of our cool ideas; we'll be more productive thanks to Fireworks. This article shows productivity tips that work in both Fireworks MX & MX2004.

  • Learn where and what shortcuts (not keystrokes) provide you less mouse strain.
  • Learn “safe sizes” for designing web-pages, making sure they fit in each popular browser nicely.
  • Take “safe sizes” to another level of productivity, utilizing a free FW extension.
  • Learn to batch process like a pro.
$2.89
- OR -

Overview

Crawl fast before we run faster

Don't get mad if I told you the first place we're going to optimize your Fireworks habits is in your Properties panel. Yes, the Properties panel. You'd be surprised how fast you can design anything if you know how to count, well, I mean add and subtract. No heavy Mathematics, just know you'll have to track X, Y, Width, and Height coordinates of the stage and elements we design.


The particular area I'm talking about is the lower-left side of our Properties panel when an object is selected (size properties area highlighted below). I cannot stress enough how important this size/coordinates area is. Fireworks gives us perfect control for pixel-based sizes and position. The header, body, and footer are the most common elements of a web-page. Need your header to be 150px tall and 5px from the edge? Click in the coordinates area, edit the size & position, and you're done! No dragging or re-dragging. You'll reduce the need to zoom in, since you know your designs' coordinates! Pixels are easy to count; no fractions, no decimals.

Resizing & Repositioning multiple objects

Repositioning multiple objects at once is easy. Resizing multiple objects is a bit tricky, regardless if they are grouped or not. When trying to resize multiple vector objects, they end up getting an algorithm applied to them where Fireworks divides the added width or height by how many objects are selected (or grouped). The result will never be what you intended, unfortunately. Two ways around this, resize each object individually (with the Sub Select tool) or scale all objects together with the Scale tool. I find these to work best - even though I hate dragging handles being a Math geek.

Safe Sizes

Let me show you where we should handle things before jumping onto our computer. Did you already sketch (hand draw) your page layout? I hope so. Pre-design planning (sketching) will greatly aid your workflow, since it'll be your blueprint of the page layout and design. So what does sketching a design have to do with “safe sizes”? Well, do you know how many pixels your header will be? Side-content (“nuggets”) width? Do you know how tall your footer will end up being? If not, then you might need to start pulling out your ruler, er, I mean launch your calculator software.

Read more: Idea to Implementation: Wireframing and Prototyping shows paper sketching concepts, even “chicken-scratch”, are best for the start of any web design.

Browser(s) Window(s) Size(s)

Let's briefly remember we work in pixels (px). The lowest common monitor resolutions is 800x600 pixels, and the next up is 1024x768 pixels. As a web-designer, stay familiar with these two sizes when planning web-page layouts. But there's a catch, those sizes are the whole screen, not what fits in a browser window. If you designed anything on the web exactly 800px wide, then you've probably seen a horizontal scrollbar appear in a browser. No two browsers are the same, in regards to layout and the viewing area. To mess with our heads even more is, no browser is entirely the same if on different Operating Systems. The worst culprits: Internet Explorer and Netscape on both Mac & Windows.


If you're a Dreamweaver user, then you may use (or noticed) the browser size options (bottom-right of each window in Design View).

Take notice, the monitor resolutions on the right side say, “(800x600, Maximized)” with some smaller sizes to the left(“760x420”). Like I said before, no two browsers have the same viewing area size and Macromedia was kind to incorporate “safe sizes” (since DW3) that work extremely well in any browser on any Operating System so far. If you don't have Dreamweaver then I'd take note of the safe sizes in the screenshot above, these are practically holy grails of safe sizes for web-page layouts!

Dreamweaver Tip: Make custom browser preview sizes by choosing “Edit Sizes...”.

Chris Charlton

Chris CharltonChris, Los Angeles' CSS & ActionScript guru, successfully cannonballed into web development in the late 90's. Always caught up with the latest in Flash, Dreamweaver, Fireworks, and XML, Chris authored premium articles for the largest Dreamweaver/Flash community (www.DMXzone.com) and produced WebDevDesign (iTunes featured), a popular Web Design & Development Podcast. Somewhere, Chris finds time to run an authorized Adobe user group focused around open source and Adobe technologies. Being a big community leader, Chris Charlton remains a resident faculty member of the Rich Media Insitute and lends himself to speak at large industry events, like JobStock, NAB, and FITC Hollywood.

Brain cycles from Chris are always Web Standards, Flash Platform, and accessibility.

See All Postings From Chris Charlton >>

Reviews

Be the first to write a review

You must me logged in to write a review.