Fireworks
Create Your Own Custom CMX Fireworks Course - Updated
by Jim Babbage - 17-Nov-09
Reader Level: 
Since March of 2009, we've added more than 40 Fireworks or Fireworks-related articles to the Community MX content list. Now, as of November 2009, there are over 400! I figured it was about time to yet again update what we have available for my favorite imaging application.
This learning guide will group articles into categories, guide you in determining their levels, and help you design your own custom Fireworks course. This article will break down the various FW articles into several areas, from the basics of the Fireworks interface, to creative design and production techniques.
The CMX JumpStart Catalog Update 2009
by Sheri German - 10-Nov-09
Reader Level:
Our last JumpStart Catalog was published in 2008, and of course we've released quite a few new JumpStarts since then. It's almost 2010(!), so it's definitely time to update and put all our JumpStarts more conveniently at your fingertips.
Hard as it is to believe, it is five years - almost to the day - since we published our first JumpStart, CMX JumpStart Paris, on Oct. 28, 2004. Long live the CMX JumpStart!
This catalog will start out by breaking down the JumpStarts into categories such as fixed-width, fluid, horizontal band, and number of columns. It will then list the special features that can be found in various JumpStarts, such as galleries, widgets, typography enhancements such as sIFR, Flash MP3 players, forms, and many more. Finally, we'll get to the actual catalog of every JumpStart we've published over the last five years. There will be a picture, a list of features, and links to the JumpStart itself, as well as the free article that describes it.
Going Mobile with Fireworks - Creating an iPhone Application Wireframe
by Jim Babbage - 01-Oct-09
Reader Level: 
In the last three articles in this series, Tom Green and Kim Cavanaugh shed a great deal of light on the conceptual process for creating our iPhone app. We're now at the stage where a wireframe of our concept would be a really good idea, and that's where I come in.
In this article I'll talk about the considerations made for building the wireframe and share some tips and Fireworks features that can help ease the process.
The Going Mobile with Fireworks CS4 Series:
Going Mobile with Fireworks CS4: The iPhone Project
Going Mobile with Fireworks CS4: On Design and Branding for iPhone Apps
Going Mobile with Fireworks CS4: The iPhone Project Comes into Focus
Going Mobile with Fireworks CS4: Creating an iPhone Application Wireframe
Going Mobile with Fireworks CS4: Creating a Branded Application
Going Mobile with Fireworks CS4: The iPhone Project Comes into Focus
by Tom Green - 29-Sep-09
Reader Level:
In this installment the team wrestles with the specific design issues posed by the iPhone.
The Going Mobile with Fireworks CS4 Series:
Going Mobile with Fireworks CS4: The iPhone Project
Going Mobile with Fireworks CS4: On Design and Branding for iPhone Apps
Going Mobile with Fireworks CS4: The iPhone Project Comes into Focus
Going Mobile with Fireworks CS4: Creating an iPhone Application Wireframe
Going Mobile with Fireworks CS4: Creating a Branded Application
Going Mobile with Fireworks CS4: On Design and Branding for iPhone Apps
by Kim Cavanaugh - 24-Sep-09
Reader Level:
I'm taking the plunge along with Tom Green and Jim Babbage for an in-depth look at the world of mobile design, and as luck would have it, we've decided to take on what is likely the most challenging of all mobile devices by starting with the iPhone.
The Going Mobile with Fireworks CS4 Series:
Going Mobile with Fireworks CS4: The iPhone Project
Going Mobile with Fireworks CS4: On Design and Branding for iPhone Apps
Going Mobile with Fireworks CS4: The iPhone Project Comes into Focus
Going Mobile with Fireworks CS4: Creating an iPhone Application Wireframe
Going Mobile with Fireworks CS4: Creating a Branded Application
Going Mobile with Fireworks CS4: The iPhone Project
by Tom Green - 22-Sep-09
Reader Level:
The question is not if you will start designing for mobile devices. It is when you will start. Join Jim Babbage, Kim Cavanaugh and I as we enter the wild, wacky and weird world of designing for mobile devises using Fireworks CS4.
The Going Mobile with Fireworks CS4 Series:
Going Mobile with Fireworks CS4: The iPhone Project
Going Mobile with Fireworks CS4: On Design and Branding for iPhone Apps
Going Mobile with Fireworks CS4: The iPhone Project Comes into Focus
Going Mobile with Fireworks CS4: Creating an iPhone Application Wireframe
Going Mobile with Fireworks CS4: Creating a Branded Application
CMX Design Element - Sulphur
by Gordon Mackay - 28-Aug-09
Reader Level:
Hello, and welcome to a new CMX Design Element. It has been a while since we last released one of these, so we hope that this one comes as a pleasant surprise.
This Design Element's code name is Sulphur.
While our previous Design Elements have been loose designs with no particular theme, Sulphur is a design that is focused towards (but not in any way limited to) blog themed sites.
It's designed along the same lines as many modern websites that contain much of the extended page content in an oversized footer section.
Approximate download size: 29MB
Introducing CMX Design Element Sulphur
by Sheri German - 28-Aug-09
Reader Level:
It's been a while, but we hope the wait is worth it - today we have a new Design Element to offer you - CMX Design Element Sulphur, a layout that is intended for, though not really limited to, blogging sites.
If you're a subscriber, be sure to download CMX Design Element Sulphur from Gordon MacKay's article, also published today. If you're not a subscriber, continue with this article to learn about the Design Element concept and to get a peak at what the Sulphur design looks like.
Introducing CMX JumpStart: Stelvio Pass - Gallery
by Sheri German - 19-Aug-09
Reader Level:
Let's take a car ride along the highest paved mountain pass in the Eastern Alps, the Stelvio Pass of Italy. Then let's take some great shots along the route and when we get home, place them on a web page in a stunning gallery format, courtesy of the free Adobe Lightbox, to share with our friends and family. Guess what? That's exactly what Adrian Senior did for the the latest JumpStart, CMX JumpStart Stelvio Pass - Gallery.
Fireworks CS4 Classroom in a Book Excerpts - Part 4: Advanced Prototyping
by Jim Babbage - 08-Jul-09
Reader Level:
Adobe Fireworks CS4 has quite a few cool features, but if you're completely new to the program - or new to web design, you might be wondering where to start in Fireworks. In the Fireworks CS4 Classroom in a Book, my goal was to introduce the complete novice to Fireworks and by the end of the book, leave them with a wide range of skills and a solid grasp of what Fireworks could - and could not - do.
In this four part series, you will find PDF excerpts from the book, complete with some of the working files to help you along. Below is a break down of the series.
The excerpts in in this final installment are taken from Lesson 11 in the book. While there are only two excerpts in this final part, they are both very detailed, covering some time saving steps to working with multiple rollovers on the same page and combining basic and more complex rollover effects to imitate a master detail Spry data table.
Fireworks CS4 Classroom in a Book Excerpts Series
Fireworks CS4 Classroom in a Book Excerpts - Part 1: Bitmap and Vector Tools
Fireworks CS4 Classroom in a Book Excerpts - Part 2: Text and Image Optimization
Fireworks CS4 Classroom in a Book Excerpts - Part 3: Workflow
Fireworks CS4 Classroom in a Book Excerpts - Part 4: Advanced Prototyping
Fireworks CS4 Classroom in a Book Excerpts - Part 3: Workflow
by Jim Babbage - 30-Jun-09
Reader Level: 
Adobe Fireworks CS4 has quite a few cool features, but, if you're completely new to the program - or new to web design, you might be wondering where to start in Fireworks. In the Fireworks CS4 Classroom in a Book, my goal was to introduce the complete novice to Fireworks and by the end of the book, leave them with a wide range of skills and a solid grasp of what Fireworks could - and could not - do.
In this four part series, you will find PDF excerpts from the book, complete with some of the working files to help you along.In this, the third part of the series, you will learn how to create an animation symbol, share a web layer and share a layer to multiple pages.
Approximate download size: 4.2MB
Fireworks CS4 Classroom in a Book Excerpts Series
Fireworks CS4 Classroom in a Book Excerpts - Part 1: Bitmap and Vector Tools
Fireworks CS4 Classroom in a Book Excerpts - Part 2: Text and Image Optimization
Fireworks CS4 Classroom in a Book Excerpts - Part 3: Workflow
Fireworks CS4 Classroom in a Book Excerpts - Part 4: Advanced Prototyping
The Fireworks Master Page - In Detail
by Jim Babbage - 02-Jun-09
Reader Level:
Ah, the Fireworks Master Page. Misunderstand, perhaps maligned and arguably somewhat limited, but I'm here to change all that. Well the misunderstood part, anyway. We're going to examine the Master Page in detail in this article, so by the time we're done, you will just what you can - and can't - do with it.
Replace Your PowerPoint Presentations with Cool Iris and Fireworks CS4
by Kim Cavanaugh - 01-May-09
Reader Level:
One of the coolest web applications I've come across in a long time is the terrific CoolIris program "…the plugin that transforms your browser into a lightning fast, cinematic way to enjoy photos and videos from the Web or your desktop." That's a pretty dry definition of what this ground-breaking program does, introducing a 3-dimensional interface that allows you to view photos, videos, and much more in any modern browser.
While the program is touted as a browser plugin the fact is that you can do much more with Cool Iris than simply browse the web for interesting content. The most recent version of the plugin added a new feature that takes things to an entirely different level—the ability to browse your computer and view your images in the 3-D interface that Cool Iris provides. Having seen this I immediately thought that the Cool Iris interface would be a terrific alternative to PowerPoint.
The trick to getting a presentation to view in Cool Iris is simple—you merely need to create images that are named or numbered sequentially so that browsing your "slides" becomes easier. And there's no better way to quickly generate sequential images that I know of than Fireworks.
In fact, by using the Master Pages feature built-in to Fireworks CS4 (and CS3) you can easily create a slide master as you would in PowerPoint, add pages for each slide in your presentation, then export your files using the pages to files feature that Fireworks provides. Using this method you can generate slides nearly as quickly as you can in PowerPoint, use all of the great image and graphics editing tools that come with Fireworks, and then display your presentation in the way cool and completely fresh Cool Iris interface. No more boring PowerPoints!
Introducing CMX JumpStart Isle of Skye
by Sheri German - 30-Apr-09
Reader Level:
National Geographic rated it the fourth best island in the world. It is the second largest island in Scotland, with a coastline strewn with peninsulas and bays. And now, it's a first class design for the latest CMX JumpStart, CMX JumpStart Isle of Skye.
CMX JumpStart Isle of Skye is a centered, fixed-width layout with features that work well for a business site. There is a highlighted style for a promotional paragraph above the two-column main content region. There is an extended area for displaying images that express your business model. A print style sheet includes your business contact information so that it is not lost when a visitor prints out any page of the site. Your logo appears next to the popular accessible Sliding Door tabbed navigation. And best of all, this is one of the easiest JumpStarts to modify! Once you edit the PNG file and export the slices to the defined Dreamweaver site, the changes you'll need to make to the CSS file are minimal.
Introducing CMX JumpStart Landeck
by Sheri German - 16-Apr-09
Reader Level:
CMX JumpStart Landeck is a centered, two-column or three-column, 770 pixel liquid and fixed-width layout. The content is constrained for optimal line lengths of text, but the outer divs are flexible and expand to the user's window size. The two tier navigation uses Sliding Door technique for its main navigation. The left column navigation is constructed from an unordered list, which has a generous amount of bottom padding to accommodate a decorative background image. The right column of the three-column version provides space for more content, or, as in our JumpStart, some eye catching images. The header div uses the Fireworks Fade Image (Auto Vector Mask in CS4) command to blend its image into the background color.
Introducing CMX JumpStart Lima
by Sheri German - 13-Mar-09
Reader Level:
Peru's archaeological heritage and great natural beauty make it a popular travel destination for thousands of visitors each year. Most of them visit Lima, Peru's cultural and business center. The latest CMX JumpStart, CMX JumpStart Lima, will also become an artistic center - for designers. With its neutral color scheme, modern design, and elegant simplicity, it will be a JumpStart you can use again and again to almost instantly create a new site.
CMX JumpStart Lima is a centered, two-column, fixed-width layout that makes extensive use of background images to produce its space age design. The left column navigation is constructed from an unordered list. The header div uses the Fireworks Fade Image (Auto Vector Mask in CS4) command to create a subtle blend whose visual appeal makes a great substitute for the navigation buttons in Gordon's original Mercury Design Element.
That's right - if this design looks familiar, it should. Adrian Senior coded it from Gordon Mackay's Design Element Mercury.
Of course Lima meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.
Create Your Own Custom CMX Fireworks Course - Updated
by Jim Babbage - 10-Mar-09
Reader Level:
When I first wrote this article back in 2007, there were more than 315 Fireworks or Fireworks-related articles available on Community MX. Now, as of March 2009, there are over 400!
Well, we've seen two new versions of Fireworks arrive since January 2007, and I figured it was about time to update what we have available for my favorite imaging application.
This learning guide will group articles into categories, guide you in determining their levels, and help you design your own custom Fireworks course.
Introducing CMX JumpStart: The New Forest
by Sheri German - 08-Jan-09
Reader Level:
Where can you stay in a five-star hotel or bed-and-breakfast, experience all kinds of wildlife, visit gardens and museums, go biking, and even get married? How about England's newest National Park The New Forest, where there is, it seems, something for everyone? There is also something for everyone in the latest CMX JumpStart, CMX JumpStart: The New Forest.
CMX JumpStart The New Forest is a centered, two-column or three-column, 770 pixel liquid and fixed-width layout. The content is constrained for optimal line lengths of text, but the outer divs are flexible and expand to the user's window size. The two tier navigation uses the infamous Sliding Door technique for its main navigation. The left column navigation is constructed from an unordered list, which has a generous amount of bottom padding to accommodate a decorative background image. The right column of the three-column version provides space for more content, or, as in our JumpStart, an eye catching image. The header div uses the Fireworks Fade Image (Auto Vector Mask in CS4) command to create a blend of images that has great visual appeal.
Of course The New Forest meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.
Introducing CMX JumpStart Nairobi
by Sheri German - 26-Nov-08
Reader Level:
Nairobi is the capital and largest city in Kenya. The latest U.S. election put focus on Kenya as the President-Elect, Barack Obama, had a Kenyan father. Nairobi is now one of the most important cities in Africa, and we think that the latest CMX JumpStart, CMX JumpStart Nairobi, will become one of your most important JumpStarts as well. Why? Because Nairobi is all about features and flexibility.
Designing Interfaces in Fireworks CS4
by Jim Babbage - 25-Nov-08
Reader Level:
If you've been reading any of the Fireworks CS4 articles here at CMX, you can see that the application has had some pretty cool new features added to it.
That said, however, CS4 is not just about new features. If you're new to the software, learning the basics is equally, if not more, important.
In my book Adobe Fireworks CS4 How-To's, my goal was to explain the software in easy to digest techniques. This PDF excerpt from my book - Chapter 12 - covers 10 techniques for designing interfaces using Fireworks, including two new features: Exporting an AIR Prototype and Exporting a CSS-based layout.
Introducing CMX JumpStart Tokyo
by Sheri German - 16-Oct-08
Reader Level:
Want a JumpStart where you need to modify only two graphics AND you can choose a two or three column version that you turn on with the flick of one class? Then welcome to CMX JumpStart Tokyo!
Tokyo is a centered, two-column or three-column, 770 pixel fixed-width layout that has many appealing design features. The left column navigation is constructed from an unordered list, and it is easy to add as many links as you need. The right column of the three-column version has a series of pods that can be used for "teaser text" with thumbnail images.
Calculating Embed Dimensions with Fireworks
by Kim Cavanaugh - 25-Sep-08
Reader Level:
These days it's quite common to use one of the free and freely available web services that exist to create content for a web site, blog, or just about any other online publishing format you can dream of. And, in many cases, those way cool new methods for sharing ideas, videos, images, audio and photos comes in the form of a block of embeddable code that allows you to share what you've created as a Flash movie by simply copying and pasting into document. These new services make it incredibly easy to do some amazing things—from capturing your screen and adding voice annotations using the Jing
Project, to brainstorming using Bubbl.us, to exporting PowerPoint slides with the ability for viewers to insert their own voice comments using VoiceThread—all of these services and many, many more ultimately rely on the Flash Player for displaying content in the browser. These are the services that are putting the "Oh, cool!" into Web 2.0.
In most cases these services are dead simple to use, and even easier to embed into a web page. But, as with most things, there can be a little catch when it comes time to embed your code into a page. In all cases the width and height of the Flash movie is determined by the service, and while you can certainly change those parameters there is one issue that needs to be resolved—maintaining the correct proportions to what you embed. This is where Fireworks can perform an invaluable service when you want to get things just right. By using a simple trick you can be sure that the modifications you make to the embed code always comes out with the correct aspect ratio so your new creation fits your page layout and still gives you the best display possible when seen by your viewers.
Read on to learn how to do this simply and easily without having to pull the old calculator out of the drawer.
Font Rendering in the New Fireworks
by Kim Cavanaugh - 19-Sep-08
Reader Level:
There are so many improvements that can be seen in the pre-release beta of Fireworks that it might be easy to miss one of the most requested—and long overdue—improvements that will be seen when the next version of Fireworks is officially released. No, I'm not talking about the very cool and useful new features such as CSS exporting, rapid prototype previews, or even the awesome new additions to the Library. Nope, in this case the change is something much simpler and yet more profound, and in fact may be the one single reason you consider upgrading your version of Fireworks when it becomes commercially available.
That's right, we're talking about the program's ability to produce text in such a way that the colors are rich and vibrant, and change that has been sorely needed in Fireworks for a long time, and something that we old hands with the program say "Hallelujah!" to in a big way.
Introducing CMX JumpStart Prague
by Sheri German - 07-Aug-08
Reader Level:
It's that time again! CMX is proud to introduce our latest JumpStart design, CMX JumpStart Prague.
CMX JumpStart: Prague is a two-column, centered, 770 pixel fixed-width layout that features rounded corners. Multiple wrappers, used in conjunction with faux column technique, maintain the integrity of the structure even upon text resize. Additionally, the JumpStart provides an attractive example of overlapping areas within a design.
This JumpStart filters styles for various versions of Internet Explorer, and includes a separate style sheet to address navigation issues found in IE 5.01.
Of course Prague meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.
Introducing CMX JumpStart: The Lake District
by Sheri German - 20-Jun-08
Reader Level:
The Lake District in rural North West England is famous for its gorgeous scenery — and, of course, lakes. It is also associated with the poetry of William Wordsworth and the Lake Poets. It is to that region that we travel for our latest JumpStart design, CMX JumpStart The Lake District.
CMX JumpStart: The Lake District features an accessible split level navigation system. The main navigation is a series of tabs that uses the Sliding Door method as described by Douglas Bowman. The sub navigation is an unordered list based system, and has rounded corners, as well as a decorative background image on the bottom that is reminiscent of CMX JumpStart North Pole. Both navigation systems provide clear "you are here" page markers. The design is a two column layout fixed at 750px wide and utilizes subtle gradients on various page areas.
The color scheme of this layout was selected to make sure that the eye goes to the subject matter rather than the design. Thus, The Lake District is composed of black, gray, and white to help the images pop.
Exploring the New Paths Panel in Fireworks CS4 Public Beta
by Kim Cavanaugh - 30-May-08
Reader Level:
Fireworks has always been a unique tool in the pantheon of image editors. With its ability to work with both vector and bitmap images Fireworks stood alone as the one image editing software product that could combine pixel-level editing and effects with the ability to manipulate shapes by changing the basic properties of the vector paths that defined those shapes.
At least that has always been the promise, but in reality the vector tools that Fireworks has always included were fairly basic, and had never received an overhaul throughout the many revisions and new versions of Fireworks that were released over the years. If you learned how to modify paths in Fireworks 4 you had a pretty good handle on how it was done in Fireworks MX and MX2004, in Fireworks 8, and finally in Fireworks CS3. Basic, simple path operations were available in all of those versions and little changed over the years.
With the impending release the Fireworks public beta all that is about to change as Adobe has added a terrific new bundle of path operation tools into a new panel, cleverly called the Path panel. Finally! No more trips over to Illustrator or even Freehand when you need to perform more complex and creative path operations. As you'll see in this sneak peak from the Fireworks
public beta, the changes are quite profound.
Introducing CMX JumpStart Bordeaux
by Sheri German - 14-May-08
Reader Level:
It's May, and for many of us that means lots of end-of-year events. School concerts, graduations, award ceremonies, last meetings till the fall...we celebrate these endings and look forward to the easy lifestyle of summer. Many of our celebrations are accompanied by parties - delicious food, and sometimes a special wine. What more preeminent center of great wine is there than Bordeaux, France? And to that region we dedicate our latest JumpStart design, CMX JumpStart Bordeaux.
CMX JumpStart Bordeaux features an accessible split level navigation system. The main navigation is a series of tabs that use the Sliding Door method as described by Douglas Bowman. The sub navigation is an unordered list based system, and both navigation systems provide clear "you are here" page markers. The design is a two column layout fixed at 740px wide and utilizes gradients on various page areas. Of course Bordeaux meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.
Introducing CMX JumpStart Malé
by Sheri German - 10-Apr-08
Reader Level:
I grew up at the New Jersey shore, and spent my childhood playing in the surf and sand. I felt, and still feel, a bliss and peace there that I feel no where else in the world. So, when I first viewed Adrian Senior's latest JumpStart design, CMX JumpStart Malé, I was immediately smitten.
CMX JumpStart Malé, one of our most flexible JumpStarts to date, is a fixed-width two and three-column layout. You can show or hide the third column on a page-by-page basis, without having to delve into the code. The left column features a CSS based flyout menu that you can customize with as many levels as you need.
Of course Malé meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.
Creating 8-bit Alpha Transparent PNG Files
by Jim Babbage - 13-Mar-08
Reader Level:
Alpha Transparency is not limited to 32-bit PNG files.
If you're using Fireworks, that is. And if you export an 8-bit PNG file.
Read on to learn how to make use of this feature in Fireworks.
Introducing CMX JumpStart Sydney
by Sheri German - 06-Mar-08
Reader Level:
It has to be one of the most beautiful opera houses in the world: the Sydney Opera House in Sydney, Australia. Opulence, elegance, and grandeur all come to mind when viewing pictures of the architecture and the city. And now those very same qualities come to you in the latest JumpStart, CMX JumpStart Sydney. Indeed, the header includes an image of the Sydney Opera House under a night sky as the centerpiece of a tasteful and elegant page layout.
CMX JumpStart Sydney is a centered, fixed-width layout that features an absolutely positioned left column with menu system that drapes over the header and content regions. With its quiet color scheme and simplicity of layout, JumpStart Sydney wreaks of class.
Read on to find out what the Sydney package includes and to view a Sydney example modification.
Take Control of Your Workspace
by Jim Babbage - 22-Feb-08
Reader Level:
There are several ways to increase your productivity within your software applications:
- Memorize keyboard commands
- Learn the application inside out
- Configure the application layout to suit you
This third point is what we'll talk about in this article, using Fireworks as an example. Most Adobe applications offer ways to customize the the workspace. Sometimes these features are obvious, sometimes not.
Read on and learn how to make the workspace work for you.
Introducing CMX JumpStart Stirling
by Sheri German - 24-Jan-08
Reader Level:
CMX JumpStart Stirling, a centered, fixed-width layout with a header, is based upon the popular Playa Blanca JumpStart. However, it has some intriguing enhancements, the most notable of which is the use of descendant selectors to flip the design from a two-column layout to a three-column layout on a page-by-page basis. Stirling also positions the main structure in a different way than Playa Blanca in that all of the columns are floated to achieve the design layout. The navigation in the left hand column, on the other hand, is switched to an AP div for older versions of IE in order to enable the bleed into the main content area from the page marker. Of course Stirling meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements.
Fireworks Kuler Panel
by Jim Babbage - 10-Dec-07
Reader Level:
Making color choices for a web site can at times be a daunting task, especially for those of us not schooled in color harmonics. Help in making those choices has recently gotten much easier with the introduction of the Flash kuler Panel for Fireworks. Ben Pritchard from Pixel Fumes first built a kuler panel for Flash, then Alan Musselman asked him if he would consider creating one for Fireworks. In early August of 2007, Ben had one for all us faithful FW users.
Fitting Fireworks CS3 into the Design Work Flow
by Jim Babbage - 02-Nov-07
Reader Level:
In my last article, I talked about the decision process between when to use Photoshop or Fireworks in your projects.
Really, what I'm talking about here is freedom of choice. Knowing your options and where different applications fit together can help you work faster and smarter in your day to day production work flow. And - happily, Fireworks can fit in quite nicely in the digital workflow of many professionals, even if they don't know it yet!
This article, based on my talk at Adobe Max 2007, gives an overview of the integration between Fireworks and the other core Adobe products such as Photoshop, Illustrator, Flash, Dreamweaver and Bridge. I thought it would be good have an overview of the features in a single location. Where relevant, I have included links to other CMX articles that dig deeper into the topics.
Introducing CMX JumpStart: Playa Blanca
by Sheri German - 01-Nov-07
Reader Level:
I admit it: this JumpStart city necessitated that I do a little geography lesson. Adrian Senior, creator of the latest CMX JumpStart Playa Blanca gave me clues to googling for Playa Blanca information in the introduction to his article:
While not exactly a city, Playa Blanca is a beautiful town that can be found on the southern tip of Lanzarote. Lanzarote is one of a group of small volcanic islands that despite sitting off the African coast come under Spanish sovereignty.
All right! A beautiful beach resort that brought me back to my summer trip in Hawaii. Now on to the latest JumpStart....Playa Blanca is a centered, two-column, fixed-width layout with header and footer, but it is a more complex variation of that common layout type. It uses a series of nested divs that create the illusion of the secondary navigation effect that bleeds the appropriate button into the related content region. Of course Playa Blanca meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements.
Fireworks or Photoshop?
by Jim Babbage - 25-Oct-07
Reader Level:
A common question that comes up from new users is, "How do I decide whether to use Fireworks or Photoshop for a project?"
It's a good question. In fact, the answer may not be completely black and white (or RGB).
By answering the 5 questions in this article, you will be better prepared to decide not only what software application is best suited to the job at hand, where Fireworks can reside in your creative or production workflow.
Some of these questions you can answer yourself, while some may need to be posed to the client, or even other production partners.
Are you ready? Sharpen your pencil and let's go!
Introducing CMX JumpStart Madrid
by Sheri German - 20-Sep-07
Reader Level:
Madrid, Spain, capital of Spain and one of Europe's major political and financial centers, is home to some of the most captivating museums and cultural events in the world. Like the atmosphere that pervades the city, we are pleased to introduce the equally warm and vibrant CMX JumpStart Madrid!
Madrid is a three-column, elastic layout that includes a background image in the content region that uses the background attachment property set to a value of fixed, an expandable header region, and a dual navigation system. The main navigation consists of an inline unordered list at the top of the design, and vertical sub navigation buttons in the left column. As with all the CMX JumpStarts, Madrid meets the W3C standards for CSS and XHTML, as well as for WAI and 508 accessibility.
Fireworks Automation Features in Bridge CS3
by Jim Babbage - 13-Sep-07
Reader Level:
As you are learning in my Bridge CS3 video series, this application does many things and is a great jumping off point for pretty much any users of Adobe products. In this video, we will take a look at the Fireworks Automation features which are available from within Bridge, how to use them and the benefits of accessing those tools via Bridge.
Approximate download size: 12.5MB
Introducing CMX JumpStart Palm Springs
by Sheri German - 16-Aug-07
Reader Level:
Palm Springs, California, a desert city that is about 110 miles east of Los Angeles, is home to some of the most famous golf courses in the country. With that in mind, we have a new JumpStart that should especially appeal to all the golf fans among us. Welcome to CMX JumpStart Palm Springs!
Palm Springs is a three-column, fixed-width layout that includes a dual navigation system. The main navigation consists of horizontal tabs at the top of the design, and vertical sub navigation buttons in the left column. The design also features pre-prepared login and subscribe form layout elements. As with all the CMX JumpStarts, Palm Springs meets the W3C standards for CSS and XHTML, as well as for WAI and 508 accessibility.
Slicing Options in Fireworks CS3
by Jim Babbage - 14-Aug-07
Reader Level:
Many issues can occur when the final Fireworks design and layout is treated as the final step before slicing. That is, the PNG looks JUST like how you want the web page to look. This methodology is very helpful in the creative process and for gaining client approvals with prototypes or mock ups. In many cases, however, the PNG file best suited for slicing and export may not look at all like a page layout. It may more resemble a bunch of small disconnected objects that will be exported and reassembled using CSS and DIV's (or table/cell background images).
I also want to take a closer (read exhaustive) look at how slices and web layers work in the new Fireworks CS3 workflow. We'll look at things to watch out for when using slices, frames, pages, symbols and multiple web layers. With the additoion of the Pages feature and the ability to now share web layers and object layers across those pages, we've gained a lot of flexibility, but slicing can get quite complex and the results confusing in designs. While the scenarios I share hear may not be bugs per say, neither are the issues are documented in the help files. Lots of food for thought.
Throughout the article, I'll make use of a simple PNG layout and you will find in the source files several different PNG's representing the slicing issues I experienced.
Must-Have Extensions for Fireworks CS3
by Jim Babbage - 19-Jul-07
Reader Level:
A new software release is always kind of exciting, but with the release of products like Fireworks and Dreamweaver, it's even better. Not only can you expect new goodies in the application itself, but you can expect extension developers to create other cool commands and tools for the applications.
Fireworks CS3 has only been out for a short time, and already there is already an impressive list of new extensions we can make use of. This article will outline some of those extensions and point you to where you can find them.
And did I mention that all these extensions and commands are FREE?
Introducing CMX JumpStart Washington, D.C.
by Sheri German - 12-Jul-07
Reader Level:
Washington, D.C. is, of course, significant for being the capital of the United States, but it has also been my "hometown" since I was seventeen years old. I have lived in the city or one of its suburbs for all of my adult life. It is with the greatest pleasure, therefore, that I introduce the newest JumpStart, designed and coded by Adrian Senior, CMX JumpStart Washington, D.C.
Washington, D.C. is a two-column, fixed-width design that employs a horizontal band method for the header and footer areas. It has a main navigation level that uses the popular tabbed sliding doors technique. CSS based buttons on the left form the secondary navigation. Washington, D.C. meets the standards for CSS, XHTML and Accessibility, thus ensuring that you have a good solid layout on which to base a client site.
CMX Design Element - Xenon
by Gordon Mackay - 29-Jun-07
Reader Level:
Hello, and welcome to the sixth CMX Design Element. It has been a while since we last released one of these, so we hope that this one comes as a bit of a treat.
This Design Element's code name is Xenon (that's the Xenon with a Zzee).
While our previous Design Elements have been loose designs with no particular theme, Xenon is a design that is focused towards (but not in any way limited to) financial themed sites.
It's designed along the same lines as many modern websites that contain much of the extended page content in an oversized footer section.
It looks like this:
Image 1: CMX Design Element - Xenon.
What's Included?
- The Xenon PNG file
- Custom web icons drawn in Fireworks that will compliment the Xenon design perfectly
- A STL file that will allow you to re-apply all the Fireworks Styles used in Xenon's design via the Styles Panel
- Bullets and buttons specially designed to be used with Xenon
- Full support via our forums
You also receive 6 bundled articles that explore the concepts and techniques used in the development of CMX Design Element - Xenon in detail:
- Cool Pie Charts by Gordon Mackay
- Best Practices Work Flow in Fireworks CS3 by Jim Babbage
- Fireworks Layers - Best Practices by Jim Babbage
- Designing with Gradients and Glows by Adrian Senior
- Reflections on a Theme in Fireworks by Kim Cavanaugh
- Creating Web Icons: Part 1 by Gordon Mackay
Our aim with the CMX Design Elements series is to provide you with an educational, as well as productivity enhancing, tool to reuse as often as you need.
Approximate download size: 28MB
The CMX Design Elements
CMX Design Elements - Krypton
CMX Design Elements - Carbon
CMX Design Elements - Gold
CMX Design Elements - Mercury
CMX Design Elements - Iodine
CMX Design Elements - Xenon
Best Practices for Multi-page and Hierarchical Layer Designs in FW CS3
by Jim Babbage - 27-Jun-07
Reader Level:
With the release of Fireworks CS3, some may be wondering how to best approach the design process using the new feature set. This article will cover my experiences and recommendations for working with the Pages and Master Page features, as well as the new Hierarchical Layers feature; things to do, things to avoid and ways to help structure your designs.
I've written and talked on these subjects through various articles and videos, but this article will nail down some key points, much like my much earlier Fireworks Layers- Best Practices did in 2005.
While much of that older article still stands true, now we have the ability to control and organize the design process even further. First I will go into detail about each feature, then at the end of each section, I'll summarize with bullet points.
Introducing CMX JumpStart Detroit
by Sheri German - 05-Apr-07
Reader Level:
We are pleased to introduce our latest CMX JumpStart: Detroit. Created by Adrian "JoJo" Senior, it has all the trademarks of his designs: clean with no-fuss CSS, easy to modify, and always professional looking. This two-column, centered, fixed-width layout includes a shadowed, tapering background image on the main column that gives the effect of a raised platform for the content. Like all JumpStarts, Detroit uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines.
Rapid Prototyping in Fireworks CS3
by Tom Green - 30-Mar-07
Reader Level:
When it comes to Fireworks CS3 Adobe is linking the application to the phrase: "Rapid Protoytyping". Here is what they are talking about.
Approximate download size: 5.7MB
A Look at The Integration Between Fireworks and Photoshop CS3
by Jim Babbage - 30-Mar-07
Reader Level:
Communication – that’s what this industry is all about. For years, Fireworks and Photoshop have been like those two brothers who never really talked to each other and wouldn’t share their knowledge either. With the release of CS3, these two applications have finally buried the proverbial hatchet and are clasping hands – if somewhat tentatively at times.
Many graphics professionals use more than a single application to create their work. Personally, I’m always moving from FW to PS, depending on my client’s needs and the goals of the project. This shuffling back and forth has become much easier with CS3. A great deal of effort was put into making Fireworks and Photoshop more compatible in this release. Here’s the list in brief:
- Improvements to the Photoshop Import and Export functions within Fireworks
- Hierarchical Layers panel
- FW support for Photoshop Layer Effects, with the Live Filters menu.
- Support for commonly used Photoshop blend modes
- Bridge/XMP Data Integration
Follow along in this Sneak Peek article for more reasons to consider upgrading.
A Fireworks CS3 Sneak Peek - Multiple Pages and Hierarchical Layers
by Jim Babbage - 28-Mar-07
Reader Level:
Presented for your consideration; a world where there is no more:
- Showing and hiding different sized and/or colored overlapping web slices
- Hiding and showing layers on specific frames to ensure your overlapping slices are exported correctly
- Juggling web layer hierarchy for the same reason
- Using frames as a comping tool for multiple designs
- Creating multiple PNG files for each different web interface design
You haven't entered the Twilight Zone. You've been warped into the Adobe Zone, and specifically (big surprise for those of you who read my articles) Fireworks CS3.
Fireworks CS3 includes many updates. It's probably the biggest feature release in years for Fireworks. And while those features don't include much needed changes to the main bitmap or vector tool set, other very significant tools have been added. Indeed, Adobe has put Fireworks on a path that I believe will keep the app around for a long time.
The addition of hierarchical layers, multiple page and multiple web layers support are only a few of the features that put Fireworks on the path as one of the best graphical rapid prototyping tools out there.
From Fireworks to Photoshop - Traverse City PNG to PSD Conversion
by Jim Babbage - 07-Mar-07
Reader Level:
Recent enquiries from one of our loyal subscribers was the inspiration for this, the fourth in my series of CMX JumpStart PNG's conversion articles. I supply you with the Traverse City PNG file as a fully editable PSD file. Much like the Venice conversion (Hmm, The Venice Conversion . . sounds like a new John Grisham novel . . .) the Traverse City JumpStart, designed by Linda Rathgeber-Stewart and coded by Zoe Gillenwater, has two complete layout designs, each on its own frame. The advantage to doing this is you only have to deal with a single PNG file.
Currently, one can't save a multi-framed Fireworks PNG file as a PSD and expect it to display properly in Photoshop. Each frame must be saved as a separate PSD file, then the user must combine the elements of both files into one, using Layer Comps to emulate the multi-frame design method.
For detailed information and steps on converting flattened vector objects into editable Shape Layers be sure to read Fireworks to Photoshop - Rebuilding the CMX Vienna JumpStart PNG as a PSD file. For details on creating and working with Smart Objects, or working with an exported Adobe Illustrator file see Converting the CMX Orlando JumpStart PNG to a PSD and AI file. An in-depth description of working with Photoshop Layer Comps can be found in Fireworks to Photoshop - Converting the CMX Venice JumpStart PNG to a PSD File. The main purpose of this article is to supply you with a fully editable - and sliced - Photoshop version of the Traverse City PNG. For the actual conversion, I used exactly the same steps as I did with the Venice JumpStart.
Approximate download size: 1MB
Putting the Sting into the CMX San Francisco JumpStart
by Jim Babbage - 23-Feb-07
Reader Level:
I was recently contacted by a small, family run business who wished to update their website. They wanted to make some content changes and have the overall look of the site be more contemporary. Being a small business, their budget was limited as well. I took on the project, thinking that a CMX JumpStart would be the perfect solution.
I see many questions on our forums about the CMX JumpStarts and how to make them work for one's own specific needs. As you may be aware, the JumpStarts are designed and tested to work based on specific layout concepts - that's why we have so many and continue to create more.
But I'd like to share with you my own personal experience in customizing one of our recent JumpStarts: San Francisco. San Francisco is based on Gordon Mackay's CMX Design Element: Gold PNG file. My customizations include:
Fireworks PNG
- Color alterations
- Changing dimensions of the background image for the innerwrapper div
- Altering export format of slices
CSS
- Adjusting rules to change the position of the navigation
- Adding a custom bullet image
- Creating a secondary modified style sheet and web page for a pop up window requirement.
So what are you waiting for? Hop on that trolley and follow me from San Francisco to Sooke, British Columbia.
CMX JumpStart: Kansas City
by Heidi Bautista - 20-Feb-07
Reader Level:
Welcome to the next design in the CMX JumpStarts series, Kansas City, located in the wide, open great plains of the U.S.
The Kansas City JumpStart is a two-column design based on Zoe Gillenwater’s Horizontal Band Layout. The content is centered and fixed-width. The bands of color behind the header, footer, and main navigation bar stretch across the entire browser giving the design a wide, open feeling. Much like driving through the miles and miles of wheat fields in Kansas.
As with all of our JumpStarts, Kansas City can be used in any way you wish, commercial or personal, and includes several tutorials, an extension, and source PNG.
Kansas City is structured to be as hack-free and straightforward as possible. So, if you've been looking for a smooth transition into using CSS for positioning as well as aesthetics, this may be just the JumpStart for you.
Kansas City comes with a starter page and a nicely styled form page. Of course, both use valid XHTML 1.0 Transitional and CSS 2 markup and follow WAI and Section 508 accessibility guidelines making it ready for you to customize to suit your own requirements.
Using Background Images in a Horizontal Band Design
by Sheri German - 20-Feb-07
Reader Level:
Zoe's part two of the Horizontal Band Layout series describes ways to set additional background images on various areas of the design. While Heidi Bautista's JumpStart Kansas City focuses on the layout that Zoe described in part one of her series, the design that I created as the companion site for the Graphic Design for the Web class that I am now teaching focuses on the techniques in part two. Taken together, these two free articles that we're offering on the day that Community MX reaches its second grand milestone should give you plenty of ideas about how to capitalize on the horizontal band layout technique.
Design Your Own Custom CMX Fireworks Course
by Jim Babbage - 09-Feb-07
Reader Level:
Note: This article has been updated on 3/10/2009. Check out the updated article
The Basics
You gotta walk before you can run, as they say. The articles in this section go over the basics of the Fireworks interface and standard workflow/best practices concepts. These articles should help you get comfortable working with the program if you're new to it, or may remind you of features you'd forgotten about if you are an expereienced user.
Production and Workflow
Batch processing, Symbols and Instances, advanced articles on slicing, optimizing and exporting, Fireworks extensions
Design and Layout
Articles on creating layouts within FW, or graphics for use in web page designs,
Retouching and Photo Manipulation
Fireworks has a pretty solid set of bitmap tools. While not as extensive as Photoshop's tool set, these creative and corrective tools can do quite a lot and may be all you need for screen based graphics.
Vectors
Vectors are one of Fireworks key strengths. articles on creating and editing vector paths and shapes will be in this section
Masking
Vector and bitmap masking are two other major strengths of Fireworks. Both types of masking give you the flexibility to show or hide parts of your image or design, without permanently damaging anything.
Projects
Image collages, conceptual pieces and just plain old fun things to do in Fireworks, from creating an e-card deisgn for your Mom, to desigining holiday ornaments and bringing scary monsters to sceen life.
Fireworks Related
Many of our JumpStart articles include some Fireworks related tips and techniques. Flash and Fireworks also integrate well. Photoshop and Fireworks also talk to each other fairly well (although some things are lost in the translation). In this section, look for articles where Fireworks ties in with other software or where Fireworks techniques are covered as part of a larger article.
You can bookmark the page on CMX making it easy to use this article as a Fireworks reference. And by the way: if you're not a CMX subscriber, you can still glean a lot from our free (80 and counting in the Fireworks category) articles. Those are identified so that you'll be able to easily access them.
The Complete JumpStart Catalog Update
by Sheri German - 15-Dec-06
Reader Level:
We now have 20 JumpStarts and are still counting. For anyone who has ever agonized over which to use for a current project, this article is for you. Updated from an article we released a year ago, the newly expanded and refreshed catalog should help you make the tough decisions about which layout and features will work for your latest client's site.
Working with Overlapping Slices in Fireworks 8
by Jim Babbage - 14-Dec-06
Reader Level:
Creating a design or interface in Fireworks can be a pretty free-flow process. Sometimes when it comes to slicing the design for use on the web, though, we find it necessary to overlap certain web slices, in order to get two different images from a similar area on the canvas. This could be due to our use of frames, where we have created a secondary design. Because Fireworks 8 and earlier only supports a single web layer, we find that we are creating slices that for both frames, and some of these may overlap each other. Sometimes we just need a segment of a larger slice area to use as a background image.
Fireworks engineers have tried to solve this issue of overlapping slices by setting a priority in the slice hierarchy. This means that if you have two slices overlapping, the one that is closer to the top in the stacking order controls how the overlapping slices get exported.
Here's a quote from the FW help files:
When slices overlap, the topmost slice takes precedence if interactivity is involved.
Now, this sounds like a workable idea, but often it causes a lot of grief; not only does the top slice get sliced accurately, but multiple slices can be generated from the underlapping slice, when it is exported.
Read this article to learn what can happen when overlapping slices are exported, as well as some tips on preventing undesireable results.
Introducing CMX JumpStart Metropolis
by Jim Babbage - 22-Nov-06
Reader Level:
Metropolis. Home of the Man of Steel. Where looking up in the sky means you could see something other than a bird or a a plane. This symbol of a thriving cosmopolitan American city complete with villains and heroes, is now the feature of our latest JumpStart. Metropolis is based on the Gordon Mackay's CMX Design Element, Krypton (Hmmm, I sense a theme . . .). Sheri German has sliced up the Krypton PNG file and created all the necessary components to make Metropolis a solid, standards-based design that holds up well in even the latest browser, I.E. 7. In fact, it's just super!
Read on to find out what Metropolis includes and get some tips about how you can adapt it in unique ways. We'll even include our own Metropolis adaptation to give you inspiration to build your own design, faster than a speeding bullet. At the end of this article we'll provide the link for you to download Metropolis so you can get started today!
CMX JumpStarts: Santorini
by Heidi Bautista - 05-Oct-06
Reader Level:
Welcome to the next design in the CMX JumpStarts series, Santorini, a sun-kissed island in legendary Greece.
The Santorini JumpStart is a three-column design that leverages the entire width of the browser. The center (main content) column widens and shrinks as the user resizes his window. But the two outer columns are fixed width so your links and extra info is always visible to the user.
As always, the Santorini CMX JumpStart can be used in any way you wish. commercial or personal, and includes several tutorials and an extension.
Santorini is structured to be as hack-free and straightforward as possible. So, if you've been looking for a relatively painfree way of getting started with CSS layouts this may be just the JumpStart for you.
The source PNG included with Santorini is pretty simple too in that it doesn't have any complicated images that you need to slice up and shoehorn into the design. What you get with Santorini is a starter page that uses valid XHTML 1.0 Strict and CSS 3 markup and follows WAI and Section 508 accessibility guidelines making it ready for you to customize to suit your own requirements.
Approximate download size: 2.9MB
CMX Announces a JumpStart Contest and FREE JumpStart
by Sheri German - 05-Oct-06
Reader Level:
The Greek island of Santorini is considered by some to be the location of the legendary Atlantis. Atlantis still fascinates and inspires everything from literature and art to movies and music. Now, as the latest Community MX JumpStart, we hope that Santorini will inspire your Web designs, too.
Santorini is our 18th JumpStart, and we think that this is a nice "coming of age" number. To celebrate, we're going to give Santorini away for free AND hold a JumpStart contest. Read on to learn more about our latest JumpStart and to get all the contest rules.
Introducing CMX Jumpstart Greenville
by Sheri German - 10-Aug-06
Reader Level:
The name Greenville evokes the radiant ambiance of gardens, nurseries, and landscapes. And that is just how Heidi Bautista paints it in our latest Community MX JumpStart: Greenville, NC. Let's take a closer look at this bloomingly lovely design to see what new treasure we've added to our JumpStart collection.
Fireworks to Photoshop - Converting the CMX Venice JumpStart PNG to a PSD File
by Jim Babbage - 03-Aug-06
Reader Level:
I will do my level best not to bore you with why I like Fireworks in this, the third in my series of CMX JumpStart PNG's conversion articles. But I have to say, for rapid prototyping and flexibility, Fireworks can't be beat. By using Frames, you can create completely separate designs and where there are common elements in each design, you can share specific layers throughout the frames. This is just the case with the Venice JumpStart which has two complete layout designs, each on its own frame.
That said, PhotoShop is no slouch in this area either. While there is no way to directly port over this multi-frame document to Photoshop, by using Layer Comps we can emulate the PNG file quite nicely.
For detailed information and steps on converting flattened vector objects into editable Shape Layers be sure to read Fireworks to Photoshop - Rebuilding the CMX Vienna JumpStart PNG as a PSD file.
For details on creating and working with Smart Objects, or working with an exported Adobe Illustrator file see Converting the CMX Orlando JumpStart PNG to a PSD and AI file.
Because these steps have already been covered, I will not be covering them again in this article in any great detail. The focus in this piece will be exporting the two-frame PNG file as individual PSD files. We will then merge those two files in to one and use Layer Comps to emulate the original two-frame design.
Several other workflow techniques will be discussed as well:
- PNG layer hierarchy to PSD layer hierarchy
- Creating Layer Comps
- Creating new, editable layer masks
- Creating and working with Work Paths
- Working with Slices
- Working with the Gradient Editor
The instructions in this article, along with the two previously mentioned articles, are meant as a guide if you choose to do the conversion on your own. Remember, as with all the articles in this series, a final, editable PSD file is part of the support documents download.
Approximate download size: 1.8MB
Fireworks to Photoshop - Rebuilding the CMX Orlando JumpStart as a PSD (and AI) File
by Jim Babbage - 14-Jul-06
Reader Level:
I love Fireworks. As I progress through these articles on converting FW PNG files to PSD files, I am quickly learning just how versatile and powerful Fireworks is for design, creation and optimization. The Orlando JumpStart is a perfect example. As you will see, depending on the design you need either Photoshop or Illustrator (and sometimes both) to do what Fireworks does easily in one application. That's not to say either of these other Adobe products is weak; they are designed to do specific things and they do them quite well. You can certainly add vectors to Photoshop or Bitmaps to Illustrator. It just seems to me that this workflow is handled best by Fireworks.
In this continuing series, I supply you with an editable PSD version of the main Orlando JumpStart PNG file. For details on most of the conversion process, make sure to read Fireworks to Photoshop - Rebuilding the CMX Vienna JumpStart PNG as a PSD file .
NOTE: These articles are based on using the most current versions of Fireworks, Photoshop and Illustrator. Older versions of the software may behave differently or may not even include some of the features/tools listed here.
As with any of these conversions, there will be some differences to how I approach the process. In the case of Orlando, it's all about vectors. Complex, custom vectors.
In my first conversion (Vienna), I ungrouped all my grouped objects, made sure each object had a name, then saved as a PSD. From there, I tweaked several things in Photoshop, including the re-creation of a few vector shapes. You may recall that saving as a PSD in Fireworks rasterized all vectors except for fonts.
With Orlando it is very easy to do the same thing. And assuming your aren't going to use/edit any of the amusement park vector art, clouds or the paths that make up the words Orlando JumpStart, the conversion is quite simple. The PSD file includes all the artwork as flattened bitmaps by default.
However, for those of you who still want scaleable vector art, a different approach was taken. Not only did I save the file as a PSD, but I also saved it as an AI file. This preserves all the vector paths. Once both files are created, (PSD and AI), I can work in either Photoshop OR Illustrator. We're going to look at both options here and in fact, you will find both a PSD file and an Illustrator file in the support documents. With this particular JumpStart, there are pros and cons to working in either program. A big part of the decision factor is your comfort level with Photoshop or Illustrator. So let's have a look at both scenarios.
Fireworks to Photoshop - Using Fireworks to Rebuild the CMX Vienna JumpStart PNG as a PSD File
by Jim Babbage - 30-Jun-06
Reader Level:
I'm sure that most people will agree, JumpStarts can be a great way to get a new site up and running quickly; these template pages are ready to roll, CSS is done and commented to death; just add content and away you go! From the graphics side, you've got a structured and sliced PNG file. All you need to to is change the graphic objects and you're good to go. IF you have Fireworks.
As you may have discovered the hard way, opening a native FW PNG file in Photoshop gives you a flattened bitmap. Not much use when you are trying to customize the design to your own needs.
Fireworks does give you the ability to save as a PSD file, though. So if you have clients or other team members who need or prefer to work in Photoshop, this tutorial may be for you.
In this, the first of several articles in the series, I will convert a native Fireworks PNG file to a useable Photoshop PSD file, ready for slicing.
By following along with this article you will learn how to:
- Prepare a Fireworks PNG file for save/export as a Photoshop PSD file to maximize its editability
- Build a layer structure similar to the layer/object model of Fireworks by creating Layer Groups
- Recreate vector shapes and editable Photoshop Shape Layers
- Accurately control the size and position of Shape Layers
- Work with Layer Styles to create gradient fills and strokes for the Shape Layers
- Create Layer-Based and User slices in Photoshop
- Use Save for Web to optimize the sliced images and save only the slices we created
You will also learn about some of the limitations of a Fireworks generated PSD.
Included with the article is a Photoshop format version of the Vienna design. For all other articles relating to JumpStart Vienna, make sure to download the Vienna JumpStart.
Approximate download size: 1.1MB
Introducing CMX Design Element Iodine
by Sheri German - 22-Jun-06
Reader Level:
Our CMX design sorcerer, Gordon Mackay, is back with another CMX Design Element in our series of fully developed Fireworks design comps that you can slice and code in any way that fits your page specs. This time we offer you element Iodine in our CMX Design Element Iodine.
Batch Processing in Fireworks 8
by Jim Babbage - 16-Jun-06
Reader Level:
I've lately seen a few posts on the Adobe forums and here on CMX about batch processing in Fireworks. Considering the Fireworks 8 Batch Processing utility had some noteworthy revisions, I thought it would be a good idea to go over the wizard in detail.
Streamlined and enhanced file renaming, the ability to check file dimensions when scaling during a batch process and the addition of a status bar and log file are the most notable improvements to Batch Processing.
There are many articles here on CMX that touch on Batch Processing, but they are geared towards specific goals. In this article, we'll examine the utility itself piece by piece.
In a nutshell, you can do the following with Batch Processing:
- Convert a selection of files to another format.
- Convert a selection of files to the same format with different optimization settings.
- Scale exported files.
- Find and replace text, colors, URLs, fonts, and non-Web216 colors.
- Rename groups of files by any combination of adding a prefix, adding a suffix, replacing a substring, and replacing blanks.
- Perform commands on a selection of files.
Introducing CMX Jumpstart Orlando
by Sheri German - 15-Jun-06
Reader Level:
Orlando, Florida. It's every kid's dream vacation spot. It's warm and sunny, and makes the world of school seem galaxies away. It's got theme parks galore that take them to galaxies far away. When most people think of Orlando, they probably think of Disney, Epcot, MGM Studios, and Sea World. Now there is also CommunityMX JumpStart Orlando to add to the list of Orlando attractions.
Orlando was designed by Chris Flick and coded by Zoe Gillenwater. Orlando uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design for which you may wish to use it. Orlando is a two-column elastic layout that also features a subhead area, a styled list as a navigation menu, and floated images.
CMX GIF Pre-Loader Pack 2
by Jim Babbage - 12-Jun-06
Reader Level:
The CMX GIF Pre-Loader pack provides you with editable GIF animation artwork in a Fireworks PNG format. In this second release of the series, you'll find a collection of ten PNG files and the final export animated GIFs.
Approximate download size: 1.1MB
The CMX GIF Pre-Loader Pack Series:
CMX GIF Pre-Loader Pack 1
CMX GIF Pre-Loader Pack 2
Introducing CMX Jumpstart San Francisco
by Sheri German - 01-Jun-06
Reader Level:
We are pleased to introduce CMX JumpStart San Francisco, a great first CSS layout for students and experienced developers alike. Structured to be as hack free and straightforward as possible, this may be just the JumpStart for you if you have been holding back on CSS layouts so far. Like all JumpStarts, it uses valid XHTML and CSS as its foundation and is 508 and WAI compliant. This two-column, fixed-width layout, described rule by rule in the documentation article, makes a great learning tool.
Introducing CMX Design Element Mercury
by Sheri German - 25-May-06
Reader Level:
Our CMX design sorcerer, Gordon Mackay, is back with another CMX Design Element in our series of fully developed Fireworks design comps that you can slice and code in any way that fits your page specs. We leave elements Carbon, Krypton, and Gold, and this time offer you element Mercury in our CMX Design Element Mercury.
Introducing CMX Design Element Gold
by Sheri German - 11-May-06
Reader Level:
I am sure you remember that the symbol for Gold, Au, comes from the Latin word "Aurum". No? You don't remember that? Well, then maybe you remember this: gold is one of the most valuable commodities in the world of commerce. And a good design is also one of the most valuable commodities on the Web. It catches your visitors' eyes and encourages them to stay and explore - and perhaps even to buy. There is almost no price tag for a great design, and fortunately you don't have to come up with one all by yourself. Gordon has done the creative work for you in our latest CMX Design Element Gold. Read all about it in this article.
From iPhoto to Flash Video: Creating a Custom Slideshow for the Web
by Kim Cavanaugh - 04-May-06
Reader Level:
Recently the school district where I work conducted our annual technology conference—a huge event that requires months of planning by the team that I work on, culminating in a single-day event attended by over 1,300 teachers.
To capture the whirlwind of activity that it requires to pull this off I wanted to grab as many photos as possible during the set up and then share them with members of my team and with the other volunteers that help us. And to make it more engaging than simply sharing a bunch of pictures, I decided this year to set the photos to music and produce a slideshow that has the proper musical accompaniment.
In this article I'll discuss how I created our little music video using a number of tools on my Macintosh. Yes, this is a decidedly Mac specific project. The video itself was generated using a combination of iTunes, iPhoto, Quicktime Pro, and finally published as a Flash video so that everyone would be able to see and hear my tribute to all of those who worked so hard to make our event a success.
Introducing CMX Design Element Krypton
by Sheri German - 27-Apr-06
Reader Level:
It's a bird! It's a plane! No, it's super design CMX Design Element Krypton!
Join me as I unveil the latest Gordon MacKay Fireworks design element. We'll look at what the package includes, what articles come bundled with it, and at some possible ways you might implement it as a Dreamweaver CSS-based layout.
Introducing CMX Design Elements
by Sheri German - 13-Apr-06
Reader Level:
No doubt it's happened to you. You stare at the blank canvas for hours, and not a thing ignites your imagination. Not one thing.
If only a sorcerer would throw a few elemental ingredients into a beaker and whip up something fantastic just for you. A little gold, a little silver, a pinch of oxygen, and poof! It emerges through an expanding mist - a mesmerizing design.
Well, the sorcerer is here at CMX, and his name is Gordon Mackay. Gordon is an artist who taps a nearly bottomless well of design wizardry. He has concocted the first of our CMX Design Elements - a fully developed Fireworks design comp that you can slice and code any way you please. We are proud to present element C, CMX Design Element Carbon, an ultra-modern design with clean lines and curves.
Introducing CMX JumpStart Modifications
by Sheri German - 30-Mar-06
Reader Level:
With our growing repertoire of JumpStarts, there are now layouts to fit a wide range of design requirements. Still, sometimes a particular JumpStart is just what you are looking for - if only you could fix one or two little details. If only the navigation had been on the right instead of left. Or what if that left DIV had been floated rather than set to position absolute? And what if instead of a fixed-width, centered layout, the JumpStart had been fluid?
We often see such sentiments on the forums, and thought it might be helpful to respond with articles that show how to modify some of our existing JumpStarts to give you a wider variety of options without having to go in and code the tweaks yourself. Towards that end, we give you CMX JumpStart Playacar, Mexico.
Changing Continents and Layouts - Modifying the Paris Jumpstart to Make Playacar, Mexico
by Jim Babbage - 30-Mar-06
Reader Level:
Community MX is pleased to announce the release of a modified Paris CMX JumpStarts. Based on Web standards, these versatile layouts employ valid CSS2 and XHTML 1.0 Transitional markup and pass WAI and 508 accessibility checkpoints. This makes it easy for you to quickly create new sites that work on a variety of browsers and platforms. You are only a few simple edits away from your own look and feel.
This article covers the following:
- A list of what is included in the CMX JumpStarts: Playacar download
- A list of the bundled tutorials that teach the theory behind the layout
- Directions for creating the effects in the Fireworks PNGs
- Demos of live pages
Approximate download size: 9.3MB
DesignBits Volume 1 - Fireworks Symbols For Your Designs
by Gordon Mackay - 29-Mar-06
Reader Level:
Welcome to the first in a series of exciting new aids for your design workflow. In this article I will introduce you to using CMX "DesignBits" in your Fireworks compositions.
The DesignBits are a series of editable Fireworks symbols that will cover various graphical elements commonly used in modern web site designs, for example: bullets, form buttons, gallery controls — all the little parts of a design that take up a lot of your time, but at the same time are critical to a detailed and good looking page.
By creating DesignBits for our subscribers we hope that we can save you time and assist you in creating some wonderful client projects. If that appeals to you, please read on…
CMX GIF Pre-Loader Pack
by Jim Babbage - 10-Mar-06
Reader Level:
The CMX GIF Pre-Loader pack provides you with editable GIF animation artwork in a Fireworks PNG format. In this first release of the series, you'll find a collection of eleven PNG files and the final export animated GIFs.
Approximate download size: 1MB
The CMX GIF Pre-Loader Pack Series:
CMX GIF Pre-Loader Pack 1
CMX GIF Pre-Loader Pack 2
Introducing CMX Jumpstart Minneapolis
by Sheri German - 03-Mar-06
Reader Level:
What city has the biggest shopping mall in America? What city has a full-sized theme park inside its mall? What city is one of the most popular destinations for shopping-based vacations in the United States? Why, Minneapolis, Minnesota, of course! Home to the Mall of America, tourists flock there to shop till they drop. But there is one bigger mall in America, and indeed the world, and that is the Mall of the World Wide Web. More and more people do their shopping there, and eCommerce is hotter than ever. When we were planning our next JumpStart, we decided to do something a little different, a little out of the ordinary. We decided to do an eCommerce template and call it CommunityMX JumpStart Minneapolis.
Designed and coded by Gordon Mackay, Minneapolis is a fluid, three-column design with hidden layers. The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2.1 styling. Minneapolis also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design.
Creating Design Concepts from Photographs
by Kim Cavanaugh - 01-Feb-06
Reader Level:
One of the questions we see pretty frequently at the Community MX forums is a simple one, but one that is difficult to answer definitively: "Where do you get your design inspirations from?"
If you're blessed with an innate sense of color and style, perhaps you are one of the rare few that can sit down in front of the computer or with a sketch pad and come up with something that is not only pleasing to the eye, but catches and holds the attention of the person viewing your design.
But most of us need some help in this area. We look at designs that we see on the Web, that we see in magazines, and that we encounter all around us. But one of the places that we often fail to look is even more common place in our lives—nature.
Redesigning the Inverness JumpStart
by Heidi Bautista - 23-Dec-05
Reader Level:
All JumpStarts boast flexibility and the Inverness Blog JumpStart is no exception. In this article you'll see how I reskinned the site with only minor modifications to the CSS and source PNG and NO changes to the original html file at all! A true reskinning operation. Check out how I changed the feel of the site: from cool Scottish Highlands to warm tropics at sunrise.
All my CSS changes are commented (the majority of which are simply color changes). The source PNG continues to use the original slice names (okay, I did add a couple of new slices). And the article takes you step by step through my changes.
Redesigning the Inverness JumpStart
by Zoe Gillenwater - 23-Dec-05
Reader Level:
Our JumpStarts are designed to be easy to rebrand with your own unique look. To show you what it takes to create a unique design from a JumpStart, I've redesigned the Inverness JumpStart by modifying the PNG and changing a few lines of CSS.
Introducing CMX Jumpstart Inverness
by Sheri German - 21-Dec-05
Reader Level:
We are pleased to announce Community MX JumpStart Inverness, a design you can use to create your own Web blog. CMX JumpStart Inverness was designed and coded by new CMX partner Gordon Mackay. It is a centered, two-column, fixed-width design that makes use of background images to achieve its faux column appearance. The page is constructed using valid XHTML 1.0 Strict markup and formatted using valid CSS 2.1 styling. Inverness also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design. Read on to find out what the Inverness package includes and how you can make it your own.
The Complete JumpStart Catalog
by Sheri German - 20-Dec-05
Reader Level:
We now have a healthy portfolio of JumpStarts, and sometimes so much choice can be overwhelming. This article outlines the features of all the JumpStarts, offers guidance in choosing the right JumpStart for your project, and provides a complete catalog of our first thirteen JumpStarts.
Fireworks Symbols - a Non-Destructive Way to Transform Images
by Jim Babbage - 29-Nov-05
Reader Level:
Sometimes, I think people forget that Symbols exist in Fireworks or what they can do for you. Symbols are an important part of the Fireworks workflow. This article will address some of the way cool things you can do with Fireworks Graphic Symbols, starting with how to create a symbol, and then how this tool can become an essential part of the creative process.
Graphic Symbols are much like Photoshop's Smart Objects. When you place a Smart Object into your document, you can do many things to it without affecting the original source file. You can even edit the original Smart Object itself, and have those changes propagate across any iteration of the smart object in a document.
Introducing CMX JumpStart Cairo
by Sheri German - 17-Nov-05
Reader Level:
We are excited to announce CMX JumpStart Cairo, Egypt. It was designed and coded by Adrian Senior, and makes extensive use of lush gradients and glows. It is a centered, two-column, fixed-width design, and, like all CMX Jumpstarts, is constructed using valid XHTML 1.0 markup and CSS 2.1 styling. Cairo also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design. This article will introduce you to what Cairo includes in its bundle, as well as show you an example site created from its source PNG and CSS/XHTML files.
Introducing CMX Jumpstart Traverse City
by Sheri German - 27-Oct-05
Reader Level:
Traverse City, Michigan is one of those hidden gems that tourists sometimes stumble across by lucky chance. With over 180 miles of Lake Michigan shoreline as well as a host of lakes and bays, beach lovers can enjoy lots of sailing and sunbathing.
Traverse City was designed by Linda Rathgeber-Stewart and coded by Zoe Gillenwater. It is a centered, fixed-width design with both a two-column and three-column page from which to choose. The two-column layout also includes a styled data table. The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2.1 styling. Traverse City also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design.
Five Little Things to Love About Fireworks 8
by Kim Cavanaugh - 10-Oct-05
Reader Level:
It could be argued that there hasn't been a serious overhaul of Fireworks since the release of Fireworks MX. In that version of Fireworks major changes to the interface were introduced as Macromedia aligned all of the tools in their web production suite. While Fireworks MX 2004 made some minor improvements to the software, nothing profound was really added. Now with the release of Fireworks 8 the same kinds of complaints are being heard.
In my humble opinion there's plenty to like in Fireworks 8. But sometimes it's the little things that matter, and in this release I've found lots of nice little changes that make my work easier and allow me to work more productively. No, they aren't ground-shaking changes, but several have been on my wish list for some time, while others fall into the "Gee, I wish they'd done this sooner" category.
In this series of five short Captivate video demonstrations I'll show you what's different in Fireworks 8 and contrast these changes with the way things used to be done. By the end of these short clips you'll have a better idea of what the little things are that I really like about Fireworks 8.
A CSS Web Design Case Study: Constructing a Personal Site - Slicing the Comp
by Zoe Gillenwater - 26-Sep-05
Reader Level:
In the last article of this series, you saw how I constructed my design comp in Fireworks. This article will cover how to slice the comp and export the pieces as web-ready graphics for placement in the CSS and XHTML. Why didn't I just cover this step in the last article? Because slicing a comp actually has more to do with the XHTML page than it does with the design comp construction. If you intend to build your pages using CSS to control the layout, you will need to slice your pages in a very different way than you may be used to from building table-based layouts. You'll see how I sliced my comp with CSS in mind, and I'll contrast this with how I might have sliced it had I intended to use tables instead.
The CSS Web Design Case Study Series:
A CSS Web Design Case Study: Constructing a Personal Site - Planning
A CSS Web Design Case Study: Constructing a Personal Site - Visualizing the Design
CSS Web Design Case Study: Constructing a Personal Site - Design Comp Construction
A CSS Web Design Case Study: Constructing a Personal Site - Slicing the Comp
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 1
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 2
Teaching Dreamweaver the Web Standards Way
by Sheri German - 23-Sep-05
Reader Level:
I have been teaching Dreamweaver in various training venues since version 2. Each new upgrade adds more features and makes my job more complex. How does a teacher help beginners make sense of an increasingly overwhelming interface that includes seemingly endless choices?
My syllabus has changed a lot over the years, and this is what I have learned: pare the syllabus to the absolute essentials. Subtract, do not add. Aim for elegant simplicity. Focus on Web Standards.
This article gives teachers a syllabus they can use to help their beginning students learn Dreamweaver within the framework of Web Standards.
A CSS Web Design Case Study: Constructing a Personal Site - Design Comp Construction
by Zoe Gillenwater - 15-Sep-05
Reader Level:
So far in the case study of building my personal site, you've seen how I planned my web site and came up with ideas for its design. In this article, you'll see how I turned that sketch into a design comp using Fireworks MX 2004 and a bit of Freehand MX. Because this article is meant to help you understand the design process rather than the specific design techniques I used, it will not go into the technical details of how I completed every task. So, I won't bore you with every click I made in Fireworks, but you will learn how to set up your comps in a web instead of print mentality, so that when it comes time to actually build the pages, you won't tear your hair out trying to create a design that isn't well suited to its medium.
The CSS Web Design Case Study Series:
A CSS Web Design Case Study: Constructing a Personal Site - Planning
A CSS Web Design Case Study: Constructing a Personal Site - Visualizing the Design
CSS Web Design Case Study: Constructing a Personal Site - Design Comp Construction
A CSS Web Design Case Study: Constructing a Personal Site - Slicing the Comp
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 1
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 2
Introducing CMX Jumpstart Machu Picchu
by Sheri German - 12-Sep-05
Reader Level:
Machu Picchu, Peru: a rediscovered ruin, a sacred ceremonial city of the Incas, a place of ethereal beauty, and now also a Community MX JumpStart. CMX JumpStart Machu Picchu, designed and coded by Adrian Senior, was built specifically to take advantage of the new Style Rendering Toolbar in Dreamweaver 8. It includes style sheets for the screen, print and handheld media types.
Read on to learn more about this centered, two-columnm, fixed-width, Web Standards compliant CSS layout.
Image Editing Panel - Fireworks 8 Sneak Peek
by Jim Babbage - 09-Sep-05
Reader Level:
There are many new goodies awaiting you in Fireworks 8. If you are new to Fireworks, Macromedia has added some features to help you get "up to speed" very quickly. One of these new features is the Image Editing Panel. Its purpose is to quickly expose new users to some (not all) of the most common image editing functions in Fireworks.
This brief overview details will give you a basic grasp of what the Image Editing Panel can do
Bitmap Artwork Versus Vector Artwork: Part I
by Kim Dudley - 24-Aug-05
Reader Level:
Vector and bitmap are terms that are often used for describing artwork. At one time applications would either create vector artwork or bitmap artwork. These days many applications like Freehand and Fireworks contain both vector and bitmap tools. Although this can be very convenient it could mean trouble if you are preparing artwork for some types of output.
In Part I of this two-part article we will compare raster and bitmap artwork and look at different types and file formats of each. We will also discuss some issues that may arise when working with vector and bitmap artwork.
Fireworks 8: We Have Convert Marquee to Path!
by Linda Rathgeber-Stewart - 12-Aug-05
Reader Level:
In five years of answering question on the Macromedia Fireworks forum, I can't begin to tell you how many times I've read the questions, "How do I convert a selection to a Path in Fireworks?" and "How do I convert a path to a selection in Fireworks?" The Fireworks engineers have been listening, folks. And I'm going to show and tell how they've responded.
Only the Shadow Knows - New Shadow Features of Fireworks 8 - A Sneak Peek
by Jim Babbage - 11-Aug-05
Reader Level:
For a long time, faithful users of Fireworks have been pining for ways to add shadows to objects – other than the drop shadow effect. Fireworks 8 introduces two new shadow features: Add Shadow command and Solid Shadow Live Filter.
In Section 1 of this article, we will look at the new Add Shadow Command. Section 2 will delve into the Solid Shadow Live Filter. We'll then wrap things up with some ideas on using these two new features of Fireworks 8.
Fireworks 8 - A Power Blender for Graphics
by Jim Babbage - 08-Aug-05
Reader Level:
Fireworks 8 is packed full of neat things, but in my opinion, one of the coolest is the addition of 26 different Blend Modes. Adding to the Blend Modes opens up a world of creative potential. I admit it; I’m a Fireworks junkie. I do a great deal of my image work in FW, but I also like to play around in it, experiment and create. The new Blend Modes make Fireworks a much bigger playground.
Blend Modes can be applied to Layers or Objects in Fireworks. The impact of a blend mode is controlled primarily by the colors in the images being blended, but also by the Opacity of the Layer or Object.
So come along with me and explore this truly enhanced feature set of Fireworks 8.
Redesigning the Vienna JumpStart
by Linda Rathgeber-Stewart - 08-Jul-05
Reader Level:
Vienna isn't famous just for composers. It's well known throughout Europe for its coffee houses. This variation on the Vienna Jumpstart attempts to capture the ambiance of Viennese coffee houses. Bonus: an authentic Austrian Strusel recipe. :-)
Redesigning the Vienna JumpStart
by Jim Babbage - 07-Jul-05
Reader Level:
One of the great features of the CMX JumpStarts, from a design standpoint, is their flexibility. With Vienna, I thought I would show just how flexible the PNG file can be, without making any major changes to the slices used in the page design and CSS. I took the Vienna and changed it to Canadian Cottage Country. Specifically, I revised the design for a fictitious Bed and Breakfast business in the Muskokas. I spend as much time as I can in that region and its eastern counterpart, the Haliburtan Highlands. So needless to say, I have many photos from the area. In fact, the hardest part for me was narrowing down which photos to use!
Introducing JumpStart Vienna
by Kim Cavanaugh - 06-Jul-05
Reader Level:
It wouldn't be much of a stretch to call Vienna the cultural capital of Europe. With its long history as the home to such cultural icons as Franz Schubert and Johann Strauss, as well as the numerous museums and its world-famous opera house, Vienna has long been known as a city where culture and sophistication are the norm. It's no wonder then that for our latest JumpStart design we turned to our own cultural maven—Sheri German—for the creation of a design that is as stylish as the city it is named after.
In addition to the use of valid XHTML 1.0 and CSS 2.1, and validating for 508 and WAI, we have a number of special features in Vienna. The three-column layout has two outer columns with fixed widths, a fluid center column for content, and a very cool fluid header and footer. The two-column layout has a fixed-width left column and fluid right column. There are also unordered lists for navigation: one for the main navigation, one for the sub navigation, and one for the footer navigation. We have also added a search field, and if your server provides PHP and MySQL, you can follow Sheri's bundled article Creating a Search Engine with iSearch to make a working search engine for your site. So far, reasonably cool, right? But hold on. We have something far more exciting to reveal with this JumpStart. We will introduce a new and revolutionary technique called Jello Mold. As with all our JumpStarts, Vienna was tested extensively in all major browsers. You can view the screenshots here
CMX JumpStart: Vienna
by Sheri German - 06-Jul-05
Reader Level:
Last summer we took a trip to Germany and Austria with our son's orchestra director. My favorite city was Vienna, Austria. So it is only natural that I should choose Vienna for my city as I "change hats" from JumpStarts marketer to JumpStarts creator. I am particularly pleased and excited to offer our latest CMX JumpStart: Vienna.
In addition to the use of valid XHTML 1.0 and CSS 2.1, and in addition to validating for 508 and WAI, we have a number of special features in Vienna. This three column layout has two outer columns with fixed widths, a fluid center column for content, and fluid header and footer. There are also unordered lists for navigation: one for the main navigation, one for the sub navigation, and one for the footer navigation. We have also added a search field into an area that is at the top of the page outside the main centered layout. So far, reasonably cool, right?
But hold on. We have something far more exciting to reveal with this JumpStart. We will introduce a new and revolutionary technique called Jello Mold that has an implied minimum and maximum width that works in Internet Explorer without the use of Javascript! Furthermore, this technique allows for fluid margins on the fluid centered layout that depend on the size of the user's window.
The download folder for this article includes a bundle of 11 articles (including two about Jello Mold technique), a starter page, an images folder, four style sheets (including design-time and print), a source png, the Vienna extension, an installation and usage guide, and this article as a PDF.
Introducing Jumpstart Vegas
by Sheri German - 02-Jun-05
Reader Level:
We proudly introduce CMX JumpStart Vegas, designed by Fireworks expert Linda Rathgeber, and coded by CSS guru Stephanie Sullivan. Vegas includes a Flash slideshow, FlashObjects JavaScript for accessibility, sIFR for using custom fonts on your pages, a form with an often requested complex layout, and a golden design that does justice to the town that never sleeps. It's all there, ready for you to adapt it for your own sites.
Introducing CMX Jumpstart New Orleans
by Sheri German - 21-Apr-05
Reader Level:
The suspense has been building around the release of our next JumpStart, and now it's here: Jazzy JumpStart New Orleans, a hybrid CSS/Flash layout that should appeal to anyone needing to build a music site. Its inspiration is derived from two sources: the sites of Sony artists such as Vladimir Horowitz, Joshua Bell, Louis Armstrong, and The Isley Brothers where Flash and frames combine, and content scrolls in a fixed-area; and the recent acquisition of our own "CMX artist" the jazzy, bluesy Umoja String Quartet, whose site will be hosted on Community MX in the upcoming weeks.
Read on to find out more about this feature-rich JumpStart that includes an MP3 Player that uses wmode, FlashObject for accessibility, scrolling content, functional forms, and a fully editable source PNG.
Color Correction Part 4: Pixel Clipping
by Tom Green - 28-Mar-05
Reader Level:
When a pixel gets "clipped" in Fireworks, all sorts of nastiness breaks out. See how judicious use of sliders and values can either improve - or destroy - an image.
Fireworks Layers- Best Practices
by Jim Babbage - 21-Feb-05
Reader Level:
Organization. Structure. These are keys to productivity in a business environment, and in a creative environment as well. In a program like Fireworks, the Layers panel can really help you get - and stay - organized. But only if you get - and stay - in the habit of working with it in a logical manner. The goal of this article is to give you some tips on staying organized with Layers.
The design and layout of your creations may require different processes, but I believe that the following tips will help you organize your document, regardless of how you work.
Fireworks is unique in that - unlike Photoshop - multiple objects can be placed in a single layer. Fireworks treats anything in a document - text, vector or bitmap - as an object. The temptation (or possibly old habit) is to think of those objects as layers. The ability to have objects within layers gives us more control over the document, however, than Layers alone.
JumpStart Venice: An Introduction
by Sheri German - 14-Feb-05
Reader Level:
Valentine's Day is one of my favorite holidays of the year. It's fanciful and lighthearted, and I don't feel the pressure of the big holidays like Christmas or Easter. I can daydream about a romantic rendezvous, such as a gondola journey through the canals of Venice on a moonlit night. Though I can't make that a reality, I can pretend while exploring the latest CMX JumpStart.
CMX is proud to announce its sixth JumpStart, Venice, which includes both two and three column, fixed-width, rounded corner layouts in its home and form pages. Like all CMX JumpStarts, it is based on Web standards with valid CSS2 and XHTML 1.0 Transitional markup, and it passes WAI and 508 accessibility checkpoints. We've created a video to give you an overview of the design and functionality of Venice.
Announcing CMX JumpStart: Liverpool
by Sheri German - 20-Jan-05
Reader Level:
It was the early sixties, and all the world was in a frenzy over a new group from Liverpool, England called The Beatles. They revolutionized rock 'n' roll music, and the world has never been the same. Maybe the Web Standards movement doesn't stir quite that much excitement, but it is changing the Web world all the same. And because we "love you, yeah, yeah, yeah" we're here to help you join the revolution.
Community MX is pleased to announce the release of its fifth CMX JumpStart: Liverpool. This time we're giving you more than a CSS layout, however. We're also giving you a dynamic ColdFusion login application built with Dreamweaver's User Authentication server behaviors that will allow you to quickly and easily edit the login.
This article will tell you all about what this fantastic package includes--bundled tutorials, an authentication system, a two-column, fixed width layout (with a little bit of a twist), original PNG files, and more.
Fireworks Piece By Piece - The Assets Panel Group
by Jim Babbage - 10-Jan-05
Reader Level:
Welcome to another article in the "Fireworks MX 2004 Piece by Piece" series. We think you will find that this series offers a more comprehensive reference to the details of the Fireworks interface and functionality set, than what is available in any other single place. Even in the most basic of articles, we hope you will find something that makes Fireworks more useful to you.
The purpose of this article is to give you an in-depth look at the Assets Panel Group in Fireworks MX 2004. The panels and panel groups are there to improve your workflow, and help you concentrate more on creation, and less on procedure.
Announcing CMX JumpStart: Aspen
by Sheri German - 23-Dec-04
Reader Level:
Aspen Mountain, packed powder, light snow falling and you've just ascended by lift to the top. If you're a beginner, forget it. You shouldn't have. How will you make it down alive to sit by that fire to sip a hot toddy?
But wait. CMX, your expert guide, has negotiated all the slick turns and steep curves. We know you have been waiting for a three column liquid layout, and for our CMX holiday celebration, here it is: JumpStart Aspen.
With a three column liquid-width layout, a base page, and a form page, Aspen employs valid CSS2 and XHTML 1.0 Transitional markup and passes WAI and 508 accessibility checkpoints. Aspen has been tested in numerous browsers. Read on to find out what the bundled package includes.
Announcing a New CMX JumpStart: Seattle
by Sheri German - 11-Nov-04
Reader Level:
Put down that coffee, and get your Grunge thing going on. That's right, we're off to the "Emerald City", once called Duwamps, but now known as Seattle!
Community MX is pleased to announce the release of the latest CMX JumpStart: Seattle. Based on Web standards, this versatile layout employs valid CSS2 and XHTML 1.0 Transitional markup and passes WAI and 508 accessibility checkpoints. This makes it easy for you to quickly create new sites that work on a variety of browsers and platforms. You are only a few simple edits away from your own look and feel.
This article covers the following:
- A list of what is included with the CMX Seattle JumpStart package and bundled tutorials and extensions
- An explanation of the benefits of Web standards
- A demonstration of the ease with which the layout is customized
- The presentation of pages that were created from the Seattle JumpStart
- Information about how this exciting design can belong to you for use in as many projects as you please.
- Screenshots of the page in multiple browsers
Who's ready for a spin on the Space Needle?
Announcing CMX JumpStarts
by Sheri German - 28-Oct-04
Reader Level:
Community MX is pleased to announce the release of an exciting new line of products called CMX JumpStarts. Based on Web standards, these versatile layouts employ valid CSS2 and XHTML 1.0 Transitional markup and pass WAI and 508 accessibility checkpoints. This makes it easy for you to quickly create new sites that work on a variety of browsers and platforms. You are only a few simple edits away from your own look and feel.
Inspired by famous world cities, each JumpStart will have an individual ambience and offer different table-less layouts and features. We travel first to Paris, a city of romance and style, with a design that features the Iris, the national flower of France. This two-column, fixed-width layout, complete with banner and footer, will serve as an elegant underpinning for almost any design.
This article covers the following:
- A list of what is included with the CMX Paris JumpStart package and bundled tutorials
- An explanation of the benefits of Web standards
- A demonstration of the ease with which the layout is customized
- The presentation of a page that was created from the Paris JumpStart
- Information about how this exciting design can belong to you for use in as many projects as you please.
- Screen shots of the page in multiple browsers
Fireworks Is Better Than Photoshop! Challenge #1
by Brian Edgin - 03-Sep-04
Reader Level:
A few weeks ago Brian Edgin set forth a challenge: Send him any Web design created in Photoshop and he will show you how to do it more efficiently in Fireworks. Craig Hartel was the first to respond to the challenge and provides a good first example for us to look at.
Immersive Imaging - An Introduction
by Jim Babbage - 29-Jun-04
Reader Level:
Immersive Imaging - the Final Frontier. OK maybe not the FINAL frontier, and not all that new in many ways. But it's an interesting subject nonetheless. With the increase in high-speed Internet usage, it has become a more practical option for web sites, and is another potential revenue stream for you.
In Part One of this two-part series, we'll look at why I got invovled in this technology, and introduce you to the basics of creating 360 degree panoramic images. I'll give you tips on creating good images for stitching, and give you a whack of other online resources to boot.
Did I mention "revenue stream?"
Go With The Flow
by Val Tobin - 29-Jun-04
Reader Level:
Flowcharts are not only a useful tool for planning a software application, but they are also handy for planning web sites and web applications. This article explains what flowcharts are, why they should be used, how to use them, and then provides an example of how a flowchart for a registration component for a web site might look.
Resources for Extending Fireworks--Part 2--Extensions
by Kim Cavanaugh - 18-Jun-04
Reader Level:
In this article we'll be looking at some of the ways that you can enhance your experience with Fireworks through the use of extensions. In the other articles in this series we'll look at methods for extending Fireworks with filters and plug-ins, commands and styles. Each of these methods for adding additional capabilities performs in its own way, and each allows you to make Fireworks an even more powerful program than it already is.
To Gif Or Not To Gif - That Is The Question
by Bill Horvath - 15-Jun-04
Reader Level:
You've worked hard on your website. You have made sure that all of your tables are perfectly arranged, your CSS is flawless and the colors you chose... well, do I even have to say how beautiful it looks? But what about the images you're using? Too many websites suffer from the "If they'd only concentrated on _______, they'd have a darn nice looking website" syndrome.
Today we're going to fill in the blank with the word "images". You can choose fantastic looking images for your web page, but choosing the wrong file format for those images can result in disaster. Exporting an image from Fireworks is not rocket science, but it's an important part of your tool set as a web designer.
Transforming Fireworks Objects With the NN_Transform Extension
by Kim Cavanaugh - 10-Jun-04
Reader Level:
Every once in awhile you come across something new that just makes you want to say "Hey! Cool!". Such was the case when I began researching the extensions that are available for Fireworks, and came across the NN_Transform extension from a new extension developer from Japan, known simply as Nansya. His NN_Transform extension is a wonderful new tool for performing complex transformations to objects in Fireworks, and the results can be quite impressive.
Resources for Extending Fireworks--Part 1--Filters
by Kim Cavanaugh - 04-Jun-04
Reader Level:
In the first of a four part series on extending Fireworks we'll be looking at filters--small scripts that perform specialized operations within a graphics application. If you're a PhotoShop user you're quite familiar with the concept of filters as these scripts, also known as plug-ins, are a common way to create special effects such as cracked glass, watercolor effects, and even stained glass. So, where are the cool tools that allow you to do those things in Fireworks?
Fireworks Piece By Piece - Web Tools
by Jim Babbage - 25-May-04
Reader Level:
While the Web Tool area is the smallest section of the toolbar, it is the toolset if you are gearing your images to the web. Combined with the Optimize Panel and the Properties inspector, these are your tools for getting your designs and images web-ready.
This article goes into detail about the web tools, and helps to explain the differences - and similarities - between slices and hotspots.
Fireworks Piece By Piece - Vector Tools
by Jim Babbage - 20-May-04
Reader Level:
Welcome to the fourth article in the "Fireworks MX 2004 Piece by Piece" series. We think you will find that this series offers a more comprehensive reference to the details of the Fireworks interface and functionality set than what is available in any other single place. Even in the most basic of articles, we hope you will find something that makes Fireworks more useful to you.
The previous two articles in this series dealt with the Bitmap Tools in the Toolbar. This article will deal with the next section of the Toolbar: the Vector Tools. The Vector Section was revamped in FW MX 2004 to include a whole new series of vector shapes, called auto shapes. There are also several other, older tools that don't get nearly enough exercise.
Creating a Comical Music Video in Flash and Fireworks
by Kim Cavanaugh - 23-Apr-04
Reader Level:
Learning about software doesn't always have to be a grind. Sometimes, in fact, doing something frivolous and fun can be just as instructive as doing more "serious" work. In this case, my desire to make a silly music video in Flash featuring some of the partners at Community MX led me to learn some valuable new skills in Fireworks and Flash, and also resulted in a fun video to share with the world.
You Say You Want a Resolution?
by Jim Babbage - 25-Mar-04
Reader Level:
Despite the fact that Fireworks was built from the ground up to be a WEB graphics application, many web graphic designers are finding themselves in the postion of producing images suitable for print and are relying on Fireworks to do it.
This article will explain the different types of resolution that are bandied about in both the print and web worlds, and explain why you should not be using Fireworks as your sole print graphics application.
Using Smart Shapes in Fireworks MX 2004
by Kim Cavanaugh - 16-Mar-04
Reader Level:
If you've been waiting to upgrade to Fireworks MX 2004 you're missing out on one of the really fascinating new capabilities that the program has. With Smart Shapes you can easily create complex objects like arrows, stars, rounded rectangle, and even 3-dimensional objects with click and drag ease. What's really cool is how easy it is to modify these objects once they're on you canvas, as you'll see in this introductory video tutorial.
Hidden Gems - Fireworks Fade Image Command
by Jim Babbage - 10-Mar-04
Reader Level:
Ever wanted to quickly fade an image from one side to the other? There's a well-hidden little gem in the Fireworks Command Menu that does just that. Let's take a look.
This command has been remaned to the Auto Vector Mask command in Fireworks CS4.
Fireworks MX 2004 Piece by Piece - Bitmap Tools - Part 2
by Jim Babbage - 22-Jan-04
Reader Level:
When we last left the Bitmap Tools in Part 1, the first six tools had been exhaustively explained, up to and including that master Cleaner-Upper, the Eraser Tool.
Now in this exciting conclusion, we explore the rest of the bitmap toolset, including the NEW tools, Replace Color and Red Eye Removal.
Web Typography - Part 1
by Tom Green - 16-Jan-04
Reader Level:
The first principle of Typography is "Typography exists to honor content." When it comes to the web, sometimes it's as though this principle never existed. This series starts with a discussion of how this can actually be achieved simply by "giving words a voice". Read more...
Fireworks MX 2004 Piece by Piece - Bitmap Tools: Part 1
by Jim Babbage - 12-Jan-04
Reader Level:
This article, and the one quickly following it, will deal with the next section of the Toolbar: the Bitmap Tools. This is the largest section of the Toolbar, and I felt it best to break things up into two sections. Many of these tools are the same in Fireworks MX and even Fireworks 4, but that doesn't mean they'll escape our scrutiny in this article. The Bitmap Section is also the area that received the greatest "revamp" in FWMX 04, with new tools to help you work better, faster and smarter with bitmap images.
Fun with Wingdings and Webdings
by Kim Cavanaugh - 31-Dec-03
Reader Level:
Many people have a difficult time trying to generate icons and other common shapes and spend a great deal of time and energy searching for free clip art that contains the images they need—without ever realizing that they already have access to an entire library of icons right on their computers.
The Benefits of Externalizing Fireworks Pop-up menu JavaScript
by Jim Babbage - 12-Dec-03
Reader Level:
Fireworks and Dreamweaver pop-up menus have their uses, in spite of all the critics. One nagging issue though, is that both DW and FW insist on dumping a hefty javascript function into EVERY page that makes use of the menu. This article shows you how to turn this internal js into an external file, and how to link it to the pages that need the pop up menu.
Fireworks MX 2004 Piece by Piece – Part 1: The Select Tools
by Ray West - 11-Nov-03
Reader Level:
The Piece by Piece series' of articles aim to provide the most comprehensive references available to the interfaces and functionality of Macromedia products. In this installment, we cover the Select Tools section of the Fireworks MX 2004 Toolbar.
Using the New Auto Shapes in Fireworks MX 2004
by Tom Green - 28-Aug-03
Reader Level:
When I first saw these things my first reaction was, "just how the hell do I describe them?". My first reaction was, "They are code driven art." That sounded a little presumptuous . So I thought about them a bit more and decided the best way of describing these things is as "interactive clip art." In this exercise I'll walk you through how to apply and manipulate an Auto Shape from the Toolbar and how to "play" with one of the Autoshapes that come prepackaged with the application.
What's New in Fireworks MX 2004
by Kim Cavanaugh - 25-Aug-03
Reader Level:
Every new product release from a major company is accompanied by a good dose of hype and hoopla, and Macromedia is no exception. Now that the latest and greatest version of the MX Studio has been announced it's time to take a look at what the newest version of Fireworks MX has to offer. In this article you'll get a run-down of the new features found in Fireworks MX 2004 and find out if Macromedia has hit nothing but home runs with this version or if there are some singles or foul balls in the mix. Below you'll find my take on what are the best--and worst--of Fireworks MX '04.
Exploring Preference Options in Fireworks MX
by Kim Cavanaugh - 18-Aug-03
Reader Level:
If you're an old codger like me you may remember the routine that Johnny Carson and Ed McMahon used to go through on The Tonight Show way back in pre-Jay Leno days. Ed would tell some story about an interesting or unusual fact and Johnny would end up saying "I did not know that". Maybe you had to see it live to appreciate the humor, but I've had a few "I did not know that" moments with Fireworks, and most of them have come with regards to the different program options that are available in the Preferences settings. In this article we'll take a look at a few of them and see what preferences you might want to change from their default settings to help you work more efficiently in Fireworks.
Installing Custom Styles in Fireworks
by Kim Cavanaugh - 01-Aug-03
Reader Level:
Creating custom Styles for Fireworks is lots of fun, and can be especially useful if you want to share a set of standard stroke, fill and effects settings with co-workers. Even more exciting, you can take advantage of the custom Styles that are being made available by Fireworks designers all over the world.
Using Guides to help Slice an Image
by Jim Babbage - 17-Jul-03
Reader Level:
Last week, we looked at the benefits of slicing. This article delves into the "how" instead of the "why", and shows you a couple tricks along the way.
The Benefits of Slicing Images
by Jim Babbage - 10-Jul-03
Reader Level:
Slicing up large images in Fireworks is one of the program's key features. But what are the benefits of going through this process? This article explains the reasoning behind slicing and why you should consider it for large images.
Creating Custom Strokes in Fireworks
by Kim Cavanaugh - 25-Jun-03
Reader Level:
Many people are surprised that Fireworks doesn't contain a method for applying a dashed line or dotted to a stroke. Yes, it's true that you can type in a series of dashes as text and then convert them to a path to get a dashed line , but what if you want to place a dotted line around a rectangle or some other shape? In that case you'll need to build a custom stroke, which can be a time-consuming process. Wouldn't it be better if you could make your own dashed line setting, Style or Command and then have it at the ready when it was needed? In this tutorial you'll learn to do just that.
Positioning text when attached to a path
by Jim Babbage - 17-Jun-03
Reader Level:
Attaching text to a path is pretty easy, but getting that text to go where YOU want it can be a little tougher. This article has tips on how to control your text once it's been attached to a path.
Levels and curves
by Jim Babbage - 26-May-03
Reader Level:
Most digital images need at least a little help to show them at their best. Using Levels or Curves can really make a difference. But the dialog boxes for these features can be intimidating, to say the least. This article helps to shatter that wall of fear, and shows you how easy it is to get better quality images using Levels or Curves.
What is This Thing Called PNG?
by Jim Babbage - 22-May-03
Reader Level:
The PNG format has been around since 1985. While hardly new, the use of the PNG image format still raises concern - even suspicion - when it comes to web graphics. This article will discuss PNG, and hopefully dispel a few myths in the process. I'll also talk about why you should NEVER use one specific PNG derivative.
The Science of Color
by Stephanie Sullivan - 12-May-03
Reader Level:
How many times have you stared at that blank canvas trying to figure out just where to begin? If you know your business, your audience and the psychological effect you want to have on them, you're well ahead of the game. This article discusses ways to make a color plan and creatively and harmoniously blend your color palette.
