Design

The CMX JumpStart Catalog Update 2009 Free!
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.

Introducing CMX JumpStart Black Forest Free!
by Sheri German - 30-Oct-09
Reader Level:

Known for its highlands, scenery, and forests, the Black Forest in Germany is a popular center of tourism. When someone mentions Black Forest to me, however, I always think of the wonderful cake or waltzing by the beautiful Blue Danube. Now I am going to us all something else to think about, too, and that's the latest CMX JumpStart Black Forest.

CMX JumpStart Black Forest is a centered, two-column, fixed layout in the new wider width that many designers are now using. The tabbed navigation uses the popular Sliding Door technique. The header features a logo with the text placed on a circular path, and will make it easy to design an attractive logo for your site. The main content resides in the left column, and a Digg content sharing menu occupies the right column.

The JumpStart includes a main style sheet, an Internet Explorer style sheet, and a Design Time Style Sheet (in case your version of Dreamweaver makes the layout difficult to edit in Design View).

Of course Black Forest meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.

CMX JumpStart: The Black Forest
by Adrian Senior - 30-Oct-09
Reader Level:

Welcome to The Black Forest JumpStart!

The Black Forest is a wooded mountain range in Baden-Württemberg, in southwestern Germany. It is a region that has vineyards, river valleys, sunny peaks, wide panoramic views, calm forests, revitalising spas, exciting family destinations and a cuisine that is the most elaborate in Germany.

The Black Forest JumpStart uses the Digg This! widget to provide current and up to date information for your users, ensuring your website is always current and informative.

Emerging Typography Technologies on the Web
by Sheri German - 29-Oct-09
Reader Level:

Ah, typography and the web - a sore subject, especially for we designers who have our roots in print design. Most of us are sick of Arial, Verdana, and Georgia, and long to use the perfect font to convey the message. Many creative techniques for using custom fonts have emerged over the years, but none of them have been a universal or permanent solution to the problem with web typography.

This article will take you through some of the history of how we've dealt with fonts in web pages. It will also explore how our options are starting to increase with the use of technologies such as @font-face, as well as new services such as Typekit.

Introducing CMX JumpStart Berlin Free!
by Sheri German - 23-Sep-09
Reader Level:

CMX JumpStart Berlin is a centered, two-column or three-column, liquid/fixed layout. The two tier navigation uses the popular Sliding Door technique for its main navigation. The left column navigation is constructed from an unordered list, and it is easy to add as many links as you need. The header features a third menu, a PhatFusion Image Menu, that lets you add your own categories and images. This feature is especially handy for photographers who would like to feature their work.

The JumpStart filters styles for various versions of Internet Explorer, and includes separate style sheets to address issues found in IE 6 and below versus IE 7. There is also a Design Time Style Sheet in case your version of Dreamweaver makes the layout difficult to edit in Design View. Of course Berlin meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.

CMX JumpStart: Berlin
by Adrian Senior - 23-Sep-09
Reader Level:

Berlin is, of course, renowned as a city of great culture and diversity, and the Berlin JumpStart mirrors those traits. Berlin provides a powerful and flexible interface on which you could base just about any design you could imagine. From the inverted sliding door navigation and the accompanying sub navigation system, and the srolling image menu Berlin is equipped to cope with the largest of websites while remaining attractive and interesting to your users and functional to your clients.

The main construction of Berlin consists of liquid outer divs, while maintaining a fixed inner content width to ensure that the design fills out the user's browser width, while still maintaining a good line reading length. The content, as always, is created with accessibility in mind. Berlin comes complete with an extension to install the design into Dreamweaver, making the creation of new pages a breeze. It also comes complete with a series of tutorials that explain in-depth how the design elements have been put together.

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 Free!
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.

Getting Color Theme Inspiration From Your Local Hardware Store Free!
by Jim Babbage - 20-Aug-09
Reader Level:

There are many excellent online color pickers and color generators, such as Adobe Kuler, or Petr Stanicek's Color Scheme Designer, but I believe it's important that we Web designers get out of our cushie chiars every so often and gain inspiration away from the desktop.

And what better place than the local hardware or paint store? If you cringe at the mere thought of painting a room, fear not! There will be no need to lift a paint brush during this excursion - but a flatbed scanner might be helpful . . .

Example of a final web page mock up, using color chips as the color scheme inspiration.

CMX JumpStart: Stelvio Pass - Gallery
by Adrian Senior - 19-Aug-09
Reader Level:

The Stelvio Pass - Gallery JumpStart presents a nicely integrated image gallery and flexibility of layout width and advanced CSS column control.

The Stelvio Pass - Gallery also includes inverted sliding door navigation and an accessible sub navigation in the left hand column, both of which can be expanded with ease to suit any given situation.

Introducing CMX JumpStart: Stelvio Pass - Gallery Free!
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.

Introducing CMX JumpStart Siberia Free!
by Sheri German - 11-Jun-09
Reader Level:

It's almost summer, so don't make me think. You may have read the book by Steve Krug, a book about web usability, that uses this phrase as its title. If "don't make me think" is your philosophy, then you're going to love the latest JumpStart, CMX JumpStart Siberia. From its completely neutral color scheme that will easily adapt to any color choices you make, to its ready-made inclusion of the Spry Accordion Widget, to its brain dead method for switching from two to three column layouts, Siberia won't make you think, or certainly not much.

CMX JumpStart: Siberia
by Adrian Senior - 11-Jun-09
Reader Level:

Siberia is, of course, renowned for its freezing temperatures, and the colour theme is based around the coldness of the region. Siberia is a design that sits easy with me - it is understated in appearance yet provides a powerful and flexible interface on which you could base just about any design you could imagine. From the inverted sliding door navigation and the accompanying sub navigation system to the built in accordion and flexible column choice, Siberia has it all.

The main construction of Siberia consists of liquid outer divs, while maintaining a fixed inner content width to ensure that the design fills out the users browser width, while still maintaining a good line reading length. The content, as always, is created with accessibility in mind. Siberia comes complete with an extension to install the design into Dreamweaver, making the creation of new pages a breeze. It also comes complete with a series of tutorials that explain in-depth how the design elements have been put together.

Introducing CMX JumpStart: Nairobi Flexible Free!
by Sheri German - 07-May-09
Reader Level:

It wasn't that long ago - November 26, 2008 to be exact - that we released CMX JumpStart Nairobi. At the time, I introduced the JumpStart based on the capital of Kenya with this sentence:

We think that the latest CMX JumpStart, CMX JumpStart Nairobi, will become one of your most important JumpStarts. Why? Because Nairobi is all about features and flexibility.

Read that last word again, because that is exactly what we're offering in this reworking of Nairobi - CMX JumpStart Nairobi Flexible. My original meaning in the word "flexibility" was meant to underline all the ways you could use the JumpStart. In response to subscriber interest in using Nairobi as a flexible layout, however, Adrian Senior has not only provided a modification of his own Nairobi design, but has provided a comprehensive tutorial on how he accomplished thet transformation.

CMX JumpStart: Nairobi-Flexible
by Adrian Senior - 07-May-09
Reader Level:

In this tutorial we will take the Nairobi JumpStart and change it from its fixed width default layout into a flexible layout that works between two preset points, based on the user's browser width.

We will also discuss the merits and pitfalls of the changes we will make as we progress through the tutorial. We will discuss screen resolution and desktop setup through to problem areas of flexible layouts.

CMX JumpStart: Isle of Skye
by Adrian Senior - 30-Apr-09
Reader Level:

A short while ago, the beginning of March to be more precise, I wrote an article on selling your business. It looked at how easy it was to lose visitors when they printed a page from your web site and what we could do to remedy that problem. You can read the article on CMX; it is called Selling Your Business.

This JumpStart, Isle of Skye, takes the principles of that article and puts them to use in a way that means minimal work for yourself. You just need to add the relevant details into the web site and the CSS files will do the rest for you. Further to this automated functionality, Dreamweaver allows you to easily make any edits you need by making good use of the Style Rendering toolbar. The Style Rendering toolbar allows you to move quickly from one media type to another making it easy to stay on top of the different views available within your web site. All this control is provided with just a simple click of an icon.

Introducing CMX JumpStart Isle of Skye Free!
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 Free!
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.

CMX JumpStart: Landeck
by Adrian Senior - 16-Apr-09
Reader Level:

Welcome to the Landeck JumpStart!

The Landeck JumpStart looks at how we can use the flexibility of a CSS layout to control the number of columns on any given page from a single CSS file. To switch the design from a three-column to a two-column layout you simply need to add a class to the body tag and the CSS takes care of everything else for you!

The main construction of Landeck consists of liquid horizontal outer divs with a fixed inner content width to ensure that the design fills out the user's browser width, while still maintaining a good line reading length. The content, as always, is created with valid code and accessibility in mind.

The Landeck JumpStart

Introducing CMX JumpStart Lima Free!
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.

CMX JumpStart: Lima
by Adrian Senior - 13-Mar-09
Reader Level:

Welcome to the Lima JumpStart.

Lima is, of course, the capital of Peru and is our second JumpStart from that country, the first being Machu Picchu. Lima uses the Mercury design element that was designed by Gordon Mackay. The Mercury design element is a simple, yet effective, design to which I have made some subtle changes. Lima is an exercise in taking a design element and modifying it suit your needs. I have kept the main design structure intact and have introduced a change to the main header that originally held the navigation and moved the navigation into the side bar. Design elements are easy and quick to work with, I highly recommend them.

JumpStart Lima

Introducing CMX JumpStart: The New Forest Free!
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.

CMX JumpStart: The New Forest
by Adrian Senior - 08-Jan-09
Reader Level:

Welcome to The New Forest JumpStart!

The New Forest JumpStart looks at how we can use the flexibility of a CSS layout to control the number of columns on any given page from a single CSS file. To switch the design from a three column to a two column layout you simply need to add a class to the body tag and the CSS takes care of everything else for you!

The main construction of The New Forest JumpStart consists of liquid horizontal outer divs while maintaining a fixed inner content width to ensure that the design fills out the user's browser width, while still maintaining a good line reading length. The content, as always, is created with valid code and accessibility in mind.

Approximate download size: 4.4MB

CMX JumpStart: Nairobi
by Adrian Senior - 26-Nov-08
Reader Level:

Welcome to the Nairobi JumpStart!

Nairobi allows you to quickly change the layout of the page from a three-column to a two-column layout by using descendant selectors to change the pages appearance. It also features an "upside down" version of the popular sliding doors navigation method, which is complemented by an accessible sub navigation set.

The main construction of Nairobi consists of liquid outer divs while maintaining a fixed inner content width to ensure that the design fills out the users browser width, while still maintaining a good line reading length. The content, as always, is created with accessibility in mind.

Nairobi comes complete with an extension to install the design into Dreamweaver, making the creation of new pages a breeze. It also comes complete with a series of tutorials that explain in-depth how the design elements have been put together.

Nairobi is a JumpStart not to be missed!

Introducing CMX JumpStart Nairobi Free!
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.

CMX JumpStart: Tokyo
by Adrian Senior - 16-Oct-08
Reader Level:

The Tokyo JumpStart looks at how we can use the flexibility of a CSS layout to control the number of columns on any given page from a single CSS file.

The Tokyo JumpStart provides the easiest of solutions for changing the amount of columns on a page - you simply need to add a class to the body tag and the CSS takes care of everything else for you!

The Tokyo JumpStart includes the following tutorials:

Centering a Wrapper - by John Gallant & Holly Bergevin
Create Columns with Floats by Zoe Gillenwater
Do You Want To Do That With CSS? - Floating Clear- by John Gallant & Holly Bergevin
CMX Internet Explorer Conditional Comment Extension by Paul Davis
Making CC & DT style sheets work for you by Adrian Senior
CSS Tricks: Using Descendant Selectors to Control the Number of Columns by Stephanie Sullivan

There are some great tutorials for you to work through in that list, as well as a great extension for creating the conditions for using conditionally commented style sheets that feed styles to the various versions of Internet Explorer.

The Complete JumpStart Catalog 2008 Update Free!
by Sheri German - 02-Sep-08
Reader Level:

You asked for it, and it's finally here: a massive update to the CMX JumpStart Complete Catalog. This catalog starts off with a rundown of all the types and features of our inventory of JumpStarts. It then lists each JumpStart in the order we released it, including a summary of its main features, along with an image to help you better visualize it. Each itemized JumpStart also includes links to both its subscriber article, as well as the free introductory article.

Introducing CMX JumpStart Phoenix Free!
by Sheri German - 21-Aug-08
Reader Level:

It's another JumpStart, and this one is named after a city I visited and loved, Phoenix, Arizona.

CMX JumpStart Phoenix is a centered, two-column, 760 pixel fixed-width layout that has many appealing design features. There is a strikingly contrasted color scheme, vertical navigation in the right column, and "swap image" rollovers that use a caching technique that corrects flaws in Internet Explorer.

The JumpStart filters styles for various versions of Internet Explorer, and includes separate style sheets to address issues found in IE 6 and below versus IE 7.

Of course Phoenix meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.

CMX JumpStart: Phoenix
by Adrian Senior - 21-Aug-08
Reader Level:

Welcome to the Phoenix JumpStart!

Phoenix, as with all CMX JumpStarts, comes complete with all source files - from the XHTML document to the PNG files to, of course, the heart of the JumpStart, the CSS files.

It is a two-column centred design and can easily be modified to suit your own requirements. Phoenix makes good use of Conditionally Commented style sheets and comes complete with a design time style sheet to ensure everything looks just as you would expect in Dreamweaver's design view.

CMX JumpStart: Prague
by Adrian Senior - 07-Aug-08
Reader Level:

The Prague JumpStart looks at how we can lay out over-lapping elements within our designs and investigates the use of multiple wrappers to ensure that our layout maintains its structure on resize.

In previous JumpStarts we have looked at how we can filter our CSS rules to one browser or another; with Prague we will be filtering our CSS in a slightly different way by providing a style sheet to take care of specific navigation problems that can be found in IE 5.01.

Introducing CMX JumpStart Prague Free!
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.

Using Kuler and Flickr to Create a Color Theme
by Jim Babbage - 24-Jun-08
Reader Level:

A while back I talked about a feature in Adobe kuler that lets you generate a color theme from an uploaded photograph. Well, the kuler development team has just added another new feature which ties in nicely with this. You can now surf flickr.com to find a photo you like, and generate your color theme from that image. In this article, we'll look at the process for doing this.

First, head over to Adobe kuler and sign in. If you have not yet created an Adobe ID, now's a good time. It's free and gives you access to many services on Adobe's site, such as acrobat.com, Adobe Exchange, user forums, software trials etc . . .

Using Kuler to Generate Color Themes from Photos
by Jim Babbage - 16-May-08
Reader Level:

Choosing colors which work well together, be it for a web page design, an interface design or some of type of graphical design, can be a bit challenging. As Kim Cavanaugh pointed out in a Fireworks article, one way to choose these colors is to sample them from a photograph. A great idea for inspiration.

Well we now have another way to do this. Adobe Kuler has a feature which will sample and extract a color theme from an uploaded image file. The best part is, it's easy to do - and fun. In fact, you might find yourself spending more time than you expected on the Kuler site, just experimenting.

Approximate download size: 7MB

Introducing CMX JumpStart Bordeaux Free!
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.

CMX JumpStart: Bordeaux
by Adrian Senior - 14-May-08
Reader Level:

Welcome to the Bordeaux JumpStart.

Bordeaux features a split-level navigation system, both of which are accessible. The main navigation incorporates the sliding door method as described by Douglas Bowman. The sub-navigation is an unordered list based navigation system and both navigation systems provide clear "you are here" page markers. The design is a two-column layout, fixed at 740px wide, and utilises gradients in the background while using the full width of the user's browser to provide a full and expansive appearance to the overall design. Bordeaux can be integrated into the New File dialog window of Dreamweaver by using the extension that is provided within the download

CMX JumpStart: Stirling
by Adrian Senior - 24-Jan-08
Reader Level:

The Stirling JumpStart is based around the popular Playa Blanca JumpStart, with one or two subtle enhancements that will allow you to easily flip the design from a two-column layout to a three-column layout on a page-by-page basis.

Introducing CMX JumpStart Stirling Free!
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.

Tools for Designers: del.icio.us and Flickr' Free!
by Derrick Ypenburg - 07-Dec-07
Reader Level:

This article is the result of me trying to put together a design and idea resource system for my growing company. I want all of our associates to use and share their ideas, inspiration and bank of design bookmarks that inspire them. I find it extremely important for myself, and my team, to take time every day to find inspiration, new code, products and designs and share them. In our constant search for these gems, ideas and inspirations, the best ones and those rare finds make it to our bookmark list for future reference. The problem is, these bookmarks are in one browser only. How do we share these bookmarks and design gems with our peers? Further and most importantly, how can I do this without spending money and having to maintain some kind internal server, wiki, collaboration, crap app that no one will use after a week. This is when I found valuable uses for del.icio.us and Flickr'.

Ten Tips for Overcoming Creative Block Free!
by Sheri German - 21-Nov-07
Reader Level:

What can we do to get inspiration for a new site design? What can we do when serious creative block strikes, but the client expects a mockup within the week? Something in this quick list of ten tips will help get you going again.

CMX JumpStart: Playa Blanca
by Adrian Senior - 01-Nov-07
Reader Level:

Playa Blanca is a two column fixed width design that 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 you may wish to use it for.

The colours in Playa Blanca have been used to reflect the sunshine and the many wonderful volcanic shades that can be found on the island. I hope you like Playa Blanca and it serves you well for future work.

Approximate download size: 1.8MB

Introducing CMX JumpStart: Playa Blanca Free!
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.

CMX JumpStart Madrid
by Adrian Senior - 20-Sep-07
Reader Level:

The latest CMX JumpStart follows the same city theme, but this time you are magically transported across the continents to Europe and the beautiful city of Madrid, Spain.

The Madrid JumpsStart is an elastic three-column layout that incorporates the use of header and footer divs. Elastic layouts are a little different than liquid layouts and are perhaps a little more awkward to work with. Not to worry: we'll be exploring the intricacies of working with an elastic layout and you'll soon be in a position to start modifying Madrid for your own ends.

The Madrid JumpStart contains all source files that were generated in its creation, from the CSS files, to the PNGs and of course the XHTML code that lies at the heart of the design. Madrid meets the W3C standards for CSS and XHTML as well as the WAI accessibilty requirements.

Approximate download size: 2MB

Introducing CMX JumpStart Madrid Free!
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.

CMX JumpStart: Palm Springs
by Adrian Senior - 16-Aug-07
Reader Level:

Palm Springs is a three-column fixed-width layout that incorporates a dual navigation system consisting of a horizontal tab section at the top of the design and a left column vertical sub navigation set. The design includes a pre-prepared log in form, layout elements and a subscribe form layout in the right hand column. As always the JumpStart contains all source files that were generated in its creation, from the CSS files, to the PNGs and of course the XHTML code that lies at the heart of the design. Palm Springs meets the W3C standards for CSS and XHTML as well as the WAI accessibilty requirements.

Approximate download size: 2.3MB

CMX JumpStart: Washington, D.C.
by Adrian Senior - 12-Jul-07
Reader Level:

The Washington, D.C. JumpsStart is a two-column fixed-width design. It uses the sliding doors method for presenting the navigation as a nice horizontal tabbed menu, which acts as a main navigation for the page-level vertical sub-navigation set.

Washington, D.C. makes good use of background images and, as always, meets the standards for CSS, XHTML and Accessibility, thus ensuring you have a good solid layout in which to begin your conversion to a client site.

Approximate download size: 2.6MB

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:

Xenon
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

CMX JumpStart: Tahoe
by Zoe Gillenwater - 18-May-07
Reader Level:

CMX JumpStart Vegas, created in the summer of 2005 by Stephanie Sullivan and Linda Rathgeber, has proven to be a very popular JumpStart. And with good reason: it's a clean, two column design that adapts well to a variety of subject matter, content types, and graphic identities. However, some CMX subscribers were interested in using it as a liquid or fluid design, meaning the layout's overall width would be determined by the width of the user's browser window, instead of a rigid pixel-based width assigned in the style sheet by the designer.

Out of this idea the CMX JumpStart Tahoe was born. Tahoe, the place, shares many similarities with Vegas, the place: both located in Nevada, they are centers of entertainment known for their casinos, nightlife, and incredibly cheap buffets. But Tahoe has something Vegas doesn't: a whole bunch of water in the form of the beautiful Lake Tahoe. Thus, the tagline for the Tahoe JumpStart: "Like Vegas, only fluid."

As do all our JumpStarts, Tahoe 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 you may wish to use it for. Both pages from Vegas, a home page and contact page, are included in Tahoe as well. They feature a two column, centered, fluid layout that is constrained to your desired range of widths by using a minimum and maximum width. The layout is constructed of floats and utilizes a faux column technique. We provide an extensively commented style sheet so you know what each rule does and how to change it to suit your design, as well as an uncommented version for deployment on your site with smaller file size.

This JumpStart has been designed to teach you about the logistics of designing a fluid layout, as well as how to convert an existing fixed-width design into a fluid design. All of the files for Tahoe — the Fireworks PNG, XHTML pages, and style sheets — are simply modifications of those used in Vegas as an exercise to demonstrate how an entire site design can be radically transformed with very little modification to its XHTML structure. However, you need not be familiar with Vegas to use Tahoe. As with all our JumpStarts, each technique or component of Tahoe is fully explained in either this article or one of the 14 tutorials we've included in your download.

Approximate download size: 10MB

Introducing CMX JumpStart Tahoe Free!
by Sheri German - 18-May-07
Reader Level:

If you've been around a while, you may remember the CMX JumpStart Vegas that was released in the summer of 2005 by Stephanie Sullivan and Linda Rathgeber. As one of our most popular JumpStarts, it inspired some CMX subscribers to request a fluid version of this fixed-width design. Zoe Gillenwater, one of our great CSS gurus, happily complied with our newest CMX JumpStart Tahoe, a JumpStart modification. Tahoe, like Vegas, is located in Nevada, and because it shares many of the same kinds of entertainment centers, seems like a fitting city for a permutation of the Vegas design. And Tahoe has one thing that Vegas doesn't - the beautiful Lake Tahoe that gives literal meaning to the tagline in the Tahoe JumpStart: "Like Vegas, only fluid."

Tahoe 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 you may wish to use it for. Tahoe is a two column elastic layout, which means it expands in width based on the user's font size. This allows the overall proportions of the page to stay intact regardless of the visitor's window or font size. The design also features a subhead area, skip link, a styled list as a navigation menu, and floated images.

Coloring Your World - Part 3: Color Trends and Possibilities
by Derrick Ypenburg - 30-Apr-07
Reader Level:

Why do we choose the colors we do?

Look back at your past projects and see the colors that you have used over and over. A trend will surely emerge. I notice that often I use browns and sky blues together. Color trends are everywhere whether they are incental, or planned.

Working with color can be a tricky thing. Many designers get stuck at times using color to "decorate" a design rather than using color effectively to draw attention and lead the eye. We'll have a look at what you can do to avoid the "color slump" by stripping your designs of color and starting from black and white.

Further, we'll look at creating color combinations and the "hot" new color for 2007!

The Coloring Your World Series
Coloring Your World - Part 1: Color Basics
Coloring Your World - Part 2: Two Worlds of Color - Digital vs Print
Coloring Your World - Part 3: Color Trends and Possibilities

The Dreamweaver Web Standards Lesson Plan Series Part Six
by Sheri German - 17-Apr-07
Reader Level:

In lesson five of the Dreamweaver Web Standards series, you created a comp, or design prototype, of the Shakespeare layout. You then exported five images from the slices you drew in the comp.

In this part of the series, you'll use those exported images to set backgrounds on various regions of the layout. In the process, you will explore many of the options for setting background images. You will also learn fundamentals of div behavior that affect the display of background colors and images. Finally, you will work through exercises that guide you in modifying "CMX JumpStart Stratford-on-Avon" so that you can use it for your own projects.

Approximate download size: 960k

The Dreamweaver Web Standards Lesson Plan Series:
The Dreamweaver Web Standards Lesson Plan Series - Part 1
The Dreamweaver Web Standards Lesson Plan Series - Part 2
The Dreamweaver Web Standards Lesson Plan Series - Part 3
The Dreamweaver Web Standards Lesson Plan Series - Part 4
The Dreamweaver Web Standards Lesson Plan Series - Part 5
The Dreamweaver Web Standards Lesson Plan Series - Part 6
The Dreamweaver Web Standards Lesson Plan Series - Part 7
The Dreamweaver Web Standards Lesson Plan Series - Part 8
The Dreamweaver Web Standards Lesson Plan Series - Part 9
The Dreamweaver Web Standards Lesson Plan Series - Part 10
The Dreamweaver Web Standards Lesson Plan Series - Part 11
The Dreamweaver Web Standards Lesson Plan Series - Part 12
The Dreamweaver Web Standards Lesson Plan Series - Part 13
The Dreamweaver Web Standards Lesson Plan Series - Part 14 Coming Soon

Introducing CMX JumpStart Detroit Free!
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.

CMX Jumpstart: Detroit
by Adrian Senior - 05-Apr-07
Reader Level:

Detroit is a two column design that uses background shadows created in the Fireworks to present the content as if it was sitting on a raised and tapering canvas.

As always there are a host of bundled tutorials that discuss each of the techniques used in great depth. I hope you enjoy Detroit and that it will become a useful addition to your design armory.

Flowing Text Around an Object in Fireworks by Using Freehand and Fireworks
by Jim Babbage - 23-Mar-07
Reader Level:

If there is one weak area in Fireworks, it's in the text handling. I've seen many posts on the user groups asking how to flow text around an object in Fireworks. Attaching text on a path won't do the trick. The only way to do this in FW is through a tedious manual process of either creating multiple text objects, or using the space bar to customize the indenting of each line. The functionality is just not in Fireworks at this time. But it is in Freehand. Freehand allows you to flow text inside a path, or around a path or a bitmap object.

You can't do this easily in Fireworks:

But Freehand makes this type of thing simple to do.

This article will how you how to create the wrapped text in Freehand and then how to bring the result over to Fireworks. We'll also look at the limitations of this technique.

Coloring Your World - Part 2: Two Worlds of Color - Digital vs. Print
by Derrick Ypenburg - 23-Mar-07
Reader Level:

In my last article on color, we talked about the hexadecimal and RGB color models and how to interpret colors in your code. Now we will talk about what happens when you will be asked to work from printed material and turn it into an online color palette that looks consistent and will please your clients.

The Coloring Your World Series
Coloring Your World - Part 1: Color Basics
Coloring Your World - Part 2: Two Worlds of Color - Digital vs Print
Coloring Your World - Part 3: Color Trends and Possibilities

Coloring Your World - Part 1: Color Basics Free!
by Derrick Ypenburg - 13-Mar-07
Reader Level:

Part of our job as professional communicators is to work with color every single day, whether it is starting from scratch to create a unique logo and color scheme for a client, sending a multitude of colors from a website out to the world, or ensuring a Pantone color match is adhered to. I love color and I thought it was time to discuss the basics of color for those of us who struggle with it, don't quite understand the basics, or are just stuck in a rut. As well, I luckily work with a print designer as my business partner, so I've come to learn about bringing the world of print and multimedia together and would like to share that with you on a basic level as well.

In this first part of a three part series, let’s go through the color basics.

The Coloring Your World Series
Coloring Your World - Part 1: Color Basics
Coloring Your World - Part 2: Two Worlds of Color - Digital vs Print
Coloring Your World - Part 3: Color Trends and Possibilities

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 Free!
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 JumpStart pages

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 Free!
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 Free!
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.

Using Kerning for Better Headlines Free!
by Kim Dudley - 07-Feb-07
Reader Level:

The success of a promotional piece is often dependent upon the setup of the text. If the spacing between the lines in a paragraph is too tight, causing the text to be hard to read, it is likely a potential client will skip over much of the content. On the other hand, if the text is set up well it not only effectively delivers the information but it can also portray a specific image or style for the company.

The choice of fonts and the spacing of that font's characters goes a long way in the legibility of the text. In this article we will look at how different applications work with a font's kerning information and how you can manually kern your titles and headlines for a more professional look.

Creating a Printable Photo Poster - A Fireworks Project
by Jim Babbage - 02-Feb-07
Reader Level:

A friend of mine was checking out my flickr site recently, and she found a few photos that she felt would be perfect for her office. Three images, set in a single frame. Well to save a little money (and to exercise my FW skills again) I thought it would be cool to make a collage of those three images, set to the largest size that my local online photo lab can reproduce.

The largest image the lab can handle is 12" by 18" so you would think that my starting point would be to create a new document that would be those dimensions at a suitable resolution for reproduction.

If I was in Photoshop, that would be my first step. And indeed, this entire process could be done in Photoshop as well (hmmm sounds like a hook for part 2!). Fireworks, however, gets a bit sluggish with large files, and I first needed to come up with my design. So I created a file that was 12" x 18" at 72ppi as a mock-up. This would allow me to quickly play around with my design until I was happy, but within the correct proportions.

Come follow along as I show you how to work with high res images and make high quality prints using Fireworks as your creation tool.

Get the Red Out
by Jim Babbage - 18-Jan-07
Reader Level:

I was looking at a photo of me from last year's TODCON and I was again reminded how red my face can go, even when I'm not embarrassed! I have a mild case of rosacea, you see, and when you combine that with lots of sun, and the odd alcoholic drink, my face goes quite red. I liked the photo overall, but felt there had to be some way to reduce my redness in Fireworks and indeed there is!

This article will show you a quick and easy way to reduce facial redness. We'll also cover a couple other basic imaging techniques for improving digital photo quality.

Using my face as an example, we'll cover several different techniques in this tutorial, many of which can come in handy if you have to edit images for say, an online company employee directory. The following tools and features will be used to get me looking better than usual.

Live Filters:

Levels
Gaussian Blur
Unsharp Mask

Bitmap Tools:

Dodge Tool
Replace Color Tool
Rubber Stamp Tool
Crop Tool
Pencil tool

Creating a Sidewalk Mural Using Fireworks
by Jim Babbage - 10-Jan-07
Reader Level:

A while back myself and a couple friends went on a photo excursion in the Distillery District within downtown Toronto. It was a great day for photography (which you can see on my flickr site) but after I had reviewed the images, I wanted to see what else I could come up with. I've seen several chalk artists create full color murals on city sidewalks and I thought I would try my hand at this. Using two images from the Distillery District shoot and some stock Fireworks effects and tools, I was able to make a fairly convincing sidewalk mural.

Take a walk with me in this tutorial and see how I created this composite image, using masks, blend modes and various distort features of Fireworks.

Approximate download size: 8.8MB

The CMX PPC Theme for WM5 Free!
by Adrian Senior - 02-Jan-07
Reader Level:

The CMX theme for Windows Mobile 5

Using a CF Custom Tag for Multiple Tabs
by Tom Muck - 21-Dec-06
Reader Level:

Tabs in a web page are an intuitive way for a user to navigate elements on a page. Using tabs, you can create pages of an article, multi-tab forms, multi-tab pages of links, or other types of pages where there is too much content to fit on one page. Using two ColdFusion custom tags -- one for the tab functionality and one for each individual tab -- you can create a simple way to add tabs to a ColdFusion page. The tab code shown in the article is simple, but can be used to expand on, or you can simply use the techniques shown with your own tab code.

The Complete JumpStart Catalog Update Free!
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 Free!
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 JumpStart: Metropolis
by Sheri German - 22-Nov-06
Reader Level:

CMX JumpStart Metropolis is a two-column, hybrid layout that has a fluid left column and a fixed-width right column. It includes rounded corners on its right side, and employs faux column technique to achieve equal height columns. It has a footer as well as a fixed header that remains in view even as the visitor scrolls the page - a property that is now supported by Internet Explorer 7. It features styled unordered lists for the navigation, styled skip links, min and max width, and has a placeholder for a photo gallery. Finally, there are several style sheets involved: a main style sheet, a style sheet for print, and a style sheet for all of the special Internet Explorer rules. And of course, as always, Metropolis validates for XHTML 1.0 Transitional, CSS 2.1, and 508 and WAI accessibility.

Approximate download size: 7.1MB

Turning Two-Frame Rollover Navigation into Button Symbols
by Jim Babbage - 20-Nov-06
Reader Level:

Creating rollover navigation effects or buttons can be done easily in Fireworks, using different workflow styles. One very common method is to design your page on Frame 1, then make Frame 2 and set your rollover effects for your navigation on that page. You can then create your slices for each graphic element (including the buttons) and do your optimizing for each slice. While this method works and is pretty easy to understand, it has a certain pitfall which reveals itself upon Export.

When you have two or more frames and multiple slices, Fireworks will export an image for each slice, in each frame. This means that in order to get your rollover button states from frame two you will also get a bunch of slices from that frame you do not need or want. An easier to manage method is to use Button Symbols.

Ideally, you build your button symbols during the design stage. But what if you were supplied the design and wish to create button symbols from the existing navigation graphics? In this article, we're going to create them from an existing design that uses the 2-frame rollover method. We'll also review the functions of the Button Editor and talk about how if can help your workflow.

Creating a Digital Framed Print in Fireworks
by Jim Babbage - 14-Nov-06
Reader Level:

In my last tutorial, we learned how to create a realistic digital photo matte using Fireworks. Inspired by Scott Kelby's tutorial on creating a photo frame in Photoshop (Photoshop CS2 for Digital photographers - a great book, btw), I thought I would put a Fireworks spin on this process.

On the Macrodobe forums I often see questions where new or potential users of Fireworks ask for a comparison between Fireworks and Photoshop. Now I am not going to get up on a soapbox and expound the virtues of either program right now, other than to say that Fireworks and Photoshop are very different programs at their cores. A different mind set is required to work effectively in one program or the other.

This tutorial - and others where I have taken Photoshop techniques and translated them into Fireworks processes - is a good example. My workflow makes use of primarily vectors to achieve my end result, rather than a bitmap approach. Here's the finished result:

I have built on the digital matte tutorial; I now have a subtly textured matte, and the image appears in what looks like a gallery frame. Whether digital or physical, I prefer simple frames for my photographs, so that the viewer's attention is focused on the image, rather than the decoration. This shot was taken on the same weekend as the photo in the matte tutorial, on the morning I left. A light dusting of snow came down during the night and I wanted to capture that "first snow" feeling.

The Complete (Almost) Vectorized Webding Catalog Free!
by Kim Cavanaugh - 06-Nov-06
Reader Level:

Way back in December 2003 I wrote a free article here at Community MX called Fun with Webdings and Wingdings which is consistently in the Top Ten of our most viewed tutorials. As of this writing the tutorial has been viewed over 55,000 times. And why not? First of all, the tutorial is free, and secondly, Webdings and Wingdings are lots of fun to play around with. They can also serve some really useful purposes. Depending on the font in that family of "Dings" you can get all sorts of little miniature pictures by just typing in the correct character using the Fireworks Text tool.

Recently I needed some small icons for a design project so I started up Fireworks and created my own reference library for the Webding font family. And while I was at it, I decided to go ahead and convert all of the text objects into vector shapes. What you'll find here is a somewhat later version of the same file that is a tad better organized. You can use this file for your own design purposes or use it as a reference for creating your own library of characters.

What do you get in terms of images? Well, you'll have to open the file up to see all of the little pictures that Webdings create, but here are a few samples.

Sample webding characters

In addition there are two source files included in this download—both a Flash and a Fireworks source file that make use of the webding vector shapes included in the library for your examination.

Creating a Digital Photo Matte in Fireworks
by Jim Babbage - 02-Nov-06
Reader Level:

So you've got that cool digital camera and you've been making some pretty awesome photos with it. Wouldn't it be nice to dress them up a bit with a nice matte, to frame the image? Then off you go to add them to flickr or put them on your own website to show the world.

In this tutorial, we'll use Fireworks 8 to create a textured digital matte to frame a photo. We'll be making use of both bitmap and vector tools, and we'll also save the matte settings as a style so they are easy to reuse for other images.

Below is one example of the finished image.

One thing I'd like to do is make this process as automated as possible. This way, we can combine a series of steps into a custom command that could be applied to multiple images.

PNG is Coming!
by John Gallant,Holly Bergevin - 31-Oct-06
Reader Level:

Now that IE7 is out in the wild web, a major design shift is about to occur in the area of image file formats. IE7 will finally provide proper support to the PNG format, enabling all kinds of new possibilities in your pages. Join us as we explore the issue in a general way, providing some explanations and pointing you to much more reading on the subject. This stuff is going to be seriously important before you know it, so get on the train before it leaves the station!

Converting Bitmaps to Vector Art with Live Trace
by Derrick Ypenburg - 27-Oct-06
Reader Level:

The Live Trace feature in Illustrator CS2 is hands-down my favorite new feature. It was around in the last couple of versions but there is no comparison to what it can do now.

The ability to convert a bitmap to a vector image gives you a whole new set of design tools and ideas. Further, there are times I have been stuck not having a high-quality logo from a client that needed to go to print. Only low res/quality logos were available. These low quality logos were able to be converted to vector images using Live Trace and re-colored and scaled with exactness to the original logo.

If you are a better sketcher on paper than you are drawing in illustrator, why don't you make a skecth, scan it and then trace it with Live Trace and colorize it and modify it how you want to. Your pencil strokes also get tarced as thick and thin paths so it maintains the "pencil drawn" look. The list goes on.

The best thing with Live Trace is that you can play for hours and create a whole whack of stock art, textures and symbols

A Fireworks Quickie - Text Mask Effect # 2
by Jim Babbage - 17-Oct-06
Reader Level:

I was reading through Kim Dudley's recent Illustrator article and—like several times in the past—I thought it would be good to see how a similar effect is handled in Fireworks. In an ealier article of mine, we saw how to use text as a mask in Fireworks, but I'd like to take that basic concept and add the polished look of both Kim's and Knut Kubenz's tutorials.

Together, we'll produce samples similar to the images below:

Similar to Kim's image:

Similar to Knut's image:

Text masking works best with a large and/or bold font, so that you can see the image within the text. Figure one resembles one of Kim's results in her Illustrator article. Figure 2 is similar to Knut's. There are many permutations you can come up with during this process, so feel free to spread your own creative wings once you have the basics.

CMX JumpStarts: Santorini Free!
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.

View of bay of Caldera, island of Santorini, in 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.
CMX JumpStart:Santorini.
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 Free!
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.

Cool Pie Charts
by Gordon Mackay - 30-Aug-06
Reader Level:

While Fireworks has a tool for creating pie charts I find that the resulting two-dimensional chart is more often than not quite dull and boring.

In this tutorial I will show you how to spruce up your pie charts and transform them into attractive graphics that will look good on any page. It's really very simple, so let's do it already. :)

Create an Old Style Postcard with Fireworks
by Jim Babbage - 24-Aug-06
Reader Level:

Let's take a little trip back down memory lane, back before there were computers, back before there was even color film for your camera. A simpler time, rendered in shades of gray or brown. A time when a handwritten letter or postcard was the rule, not the exception. A time when -

OK OK, you get the idea, right?

We're going to do a little time traveling in this tutorial, taking a photo I shot this past winter and making it look like it was shot in the 1920's. The original image is seen below.

And our goal is to end up with something similar to this:

The original image is pretty monochromatic to begin with, but it's not the hue we want. You might also notice some overhead wires in the original. The main subject of the photo is also a bit on the dark side which we will fix with some of the bitmap tools.

While we will be covering some of these retouching techniques, if you are unfamiliar with the Fireworks interface, I would recommend reading some of the introductory articles on the toolbar and masking. You'll find a list of these at the end of the article.

Tag Clouds with PHP and MySQL
by Gordon Mackay - 15-Aug-06
Reader Level:

Tag clouds are all the rage these days when it comes to browsing content that's "tagged" with category keywords. They quickly provide users with a visual indication of which categories contain the most information.

Blogs and social linking networks have been quick to utilize this navigation pattern, but whether tag clouds are just the latest craze or a genuinely useful way for users to navigate content is very much a disputed topic.

In this tutorial we will be using some simple PHP and two simple tables from a MySQL database to illustrate a quick and easy method of outputting tag clouds.

Introducing CMX Jumpstart Greenville Free!
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.

CMX JumpStarts: Greenville
by Heidi Bautista - 10-Aug-06
Reader Level:

Our summertime JumpStart takes us to Greenville, North Carolina. Chances are that if you were born in the United States your state has a town named Greenville. And with a name like that, it's got to have great gardening opportunities, right? Our Greenville JumpStart features a beautiful tapestry of transparent backgrounds that afford the designer all sorts of artistic opportunities. Plus, Greenville, like all our JumpStarts, uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines. Taken altogether, Greenville provides you with a solid foundation for any design.

Greenville is a two column, fixed width layout with header and footer. It features styled unordered lists for the navigation, a styled form, and styled skip links. Several style sheets are included: commented and uncommented style sheets for print and screen media and three Win IE - only sheets that take care of browser anomalies in WinIE5, WinIE5.5 and WinIE6. The JumpStart features Zoe Gillenwater's Teaser Thumbnail List to display the images and text in lefthand column. Last but not least, the JumpStart includes the PNG file used to create the layout.

The download for this JumpStart is fairly large at 18MB, due in large part to an included tutorial that weighs in at 12.5MB. If you are purchasing CMX JumpStart Greenville and would like to download the package without that tutorial, or download it in smaller chunks, please send an email to info@communitymx.com and we will make arrangements for you to do so. If you are a CMX subscriber, you will find links at the end of the article, but prior to the list of supported browsers, to download the JumpStart various different ways.

Turning a Tile Image into a Fireworks Pattern Free!
by Jim Babbage - 09-Aug-06
Reader Level:

There are lots of tile images available on the web for free, or you may be keen on creating your own. But once you've got the image, how do you set it up so that it displays in the Property Inspector's patterns menu to use for filling vector shapes?

You could do a lot of copying and pasting to manually repeat the image, but that is way too much work. And there is a much easier way; Fireworks Patterns. You can apply patterns to fill any vector shape, thus giving the shape a more textured, organic or photo-realistic appearance.

This brief tutorial will show you how to take a seamless tile image and add it to the Fireworks Patterns menu.

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

InDesign - Part 1: Setting up a Document
by Kim Dudley - 26-Jul-06
Reader Level:

InDesign is a great tool for setting up multiple page layouts or documents that have a combination of text and graphics. InDesign can be used for setting up documents for print or for publishing on the web. If you are not familiar with page layout applications you may be a bit uncertain about diving in to InDesign. This and the following three tutorials will help you get to know InDesign and develop the skills needed to work quickly and efficently in this application.

This series of tutorials will follow the process of creating a basic multiple page document. The tutorials will be broken down into four separate parts covering the following topics:

Setting up a new document with master pages
Adding and formatting text
Working with graphics
Publishing the document for print and online

The techniques explained in these tutorials can be used to set up any document and are a good starting point for learning InDesign.

The InDesign Series:
InDesign - Part 1: Setting up a Document
InDesign - Part 2: Adding and Formatting Text
InDesign - Part 3: Working with Graphics
InDesign - Part 4: Publishing a Document

Polarized Sky Effect using Fireworks
by Jim Babbage - 25-Jul-06
Reader Level:

Our Photoshop Guru, Knut Kubenz, recently wrote a tutorial on creating a polarized sky effect without using expensive camera filters. He described the process using Photoshop. Now if you know me, you'll also know I am always looking for ways to produce the same or similar Photoshop effects within Fireworks. Seeing as Knut an I were on one of our photo jaunts the day he took the photo of the marina, I thought this would be a perfect example for producing the effect in Fireworks. You'll also see that photographers rarely see exactly the same thing, even when they're standing in almost the same spot.

Transparent Backgrounds in Win IE
by Heidi Bautista - 21-Jul-06
Reader Level:

Transparent PNGs in Win IE? Sure, just use the AlphaImageLoader filter. This article explains how to use the filter, offers some examples, and shows how the results are the same or different as compared to transparent PNGs in FireFox.

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.

CMX Design Elements - Iodine
by Gordon Mackay - 22-Jun-06
Reader Level:

Welcome to the latest in the CMX Design Elements series. This new, and vibrantly colored design has been named Iodine.

While other Design Elements have focused on layouts that would most likely be translated by the coder into a fixed width layout, Iodine is designed in such a way that it could be applied to either a fluid or fixed width design.

Please read on to discover how to use and find your way around CMX Design Element - Iodine.

What's Included?

In the CMX Design Element - Iodine package you will find the following:

The Iodine design PNG.
A suggested color scheme to help you maintain the design's color consistency.
Example form controls to add to your customized Iodine page.
An .STL file that allows you to easy reapply all the styles used in the Iodine design via a few clicks in Fireworks.
Six bundled tutorials that will guide you in the use of included design techniques such as importing an .STL, slicing and exporting, using gradients, and applying styles and using layers

Approximate download size: 2.3MB

Introducing CMX Design Element Iodine Free!
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.

Quick Guide to The GIMP - Part 3: Filters, Plug-ins & Scripts
by Thomas Pletcher - 19-Jun-06
Reader Level:

In this wrap-up of our 3-part GIMP series, we look at some of the program's more impressive and versatile filters and also take a look at some GIMP plug-ins and scripts. In addition, we modify a script -- using Script-Fu -- to create a new, transparent instance of the Sphere script (along with a new GIMP menu item for it), and close by reviewing a few GIMP variants you might want to try, one of which emulates Photoshop.

The Quick Guide to The GIMP Series:
Quick Guide to The GIMP - Part 1: Basic Tools & Program Layouts
Quick Guide to The GIMP - Part 2: Editing Basics & Web Tips
Quick Guide to The GIMP - Part 3: Filters, Plug-ins & Scripts

Batch Processing in Fireworks 8 Free!
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 Free!
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 JumpStarts: Orlando
by Zoe Gillenwater - 15-Jun-06
Reader Level:

Mention Orlando, and most people immediately think of theme parks, laughing kids, warm sunshine and palm trees. Our Orlando JumpStart captures this spirit of Orlando perfectly, from its imagery to fun masthead font to bright colors.

As do all our JumpStarts, 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 you may wish to use it for. Orlando is a two column elastic layout, which means it expands in width based on the user's font size. This allows the overall proportions of the page to stay intact no matter what window or font size the page's visitors are using, as well as making the design very accessible. The design also features a subhead area, a styled list as a navigation menus, and floated images.

The graphic and code techniques used to create Orlando are explained fully in the 11 tutorials that we've included in your download, as well as this article. We also include the four style sheets needed for this design (including an extensively commented one you can use for reference), the XHTML files for the layout, the two source Fireworks PNGs, and a Dreamweaver extension that allows you to create new pages based on Orlando easily.

If you'd like a more detailed look at the Orlando Jumpstart, as well as seeing a modified Orlando design, check out Sheri German's CMX JumpStart Orlando: An Introduction. Otherwise, click the link below to dive right into this JumpStart!

Create a Polaroid Photograph in Fireworks
by Kim Cavanaugh - 13-Jun-06
Reader Level:

Do you have a drawer full of Polaroid photos somewhere? Perhaps they're old vacation photos or shots from a family reunion. Wherever you might have taken them, the trusty Polaroid camera was for a time the best way to get instant photographic gratitude. A push of the button, and whir of the motor, and the camera would discharge a hunk of plastic that would magically show your picture in just a minute or so. And if you're really old like I am, you might even remember an earlier time when you had to peel a protective paper away from the picture and fan it in the air until the image dried.

In many ways that was a simpler time and images that simulate the look of a Polaroid snapshot still evoke a certain sense of nostalgia. While the Polaroid camera has gone the way of the 8 track tape player, the look and feel of Polaroid pictures can still be used for great effect, particularly when you want to capture the feel of an earlier era. In this tutorial you'll learn how to turn your own images into Polaroid snapshots and capture that earlier time.

Approximate download size: 3.4MB

Loaders Demystified - Part 4: Using the CMX GIF Pre-Loader Packs Free!
by Joseph Balderson - 12-Jun-06
Reader Level:

In this tutorial we will look at using the popular CMX GIF Pre-Loader Packs, which contain animation assets for loaders. Using a sample from the series, you will create a custom animated flash loader using a combination of tried-and-true techniques and some of the latest in flash 8 effects.

By the end of this tutorial your loader will look like the following:
the finished product

Approximate download size: 1.3MB

The Loaders Demystified Series
Loaders Demystified: Part 1 - Usability Guidelines
Loaders Demystified: Part 2 - Creating a Simple Loader
Loaders Demystified: Part 3 - Getting Creative with Progress Indicators
Loaders Demystified: Part 4 - Using the CMX GIF Pre-Loader Packs

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

Quick Guide to The GIMP - Part 2: Editing Basics & Web Tips Free!
by Thomas Pletcher - 08-Jun-06
Reader Level:

The GIMP is the preeminent image editor of the open source world—it is free, cross-platform, and a worthy competitor to proprietary image-editing programs. In Part 2 of this series, you'll learn some basic GIMP image-editing tools and techniques, as well as some Web-specific tools and tips. You'll also create a basic animation.

Approximate download size: 362k

The Quick Guide to The GIMP Series:
Quick Guide to The GIMP - Part 1: Basic Tools & Program Layouts
Quick Guide to The GIMP - Part 2: Editing Basics & Web Tips
Quick Guide to The GIMP - Part 3: Filters, Plug-ins & Scripts

Creating Web Icons: Part 3
by Gordon Mackay - 06-Jun-06
Reader Level:

Once again we don our magnifying glass and set about creating another three commonly used web icons using Fireworks.

In previous tutorials of this series we created mail icons, shopping cart icons and a few other nice little additions to a good web design. This time we will make a tiny site map icon, an alarm clock icon and an image icon.

So let's open Fireworks and get pushin' some pixels!

The Creating Web Icons Series:
Creating Web Icons: Part 1
Creating Web Icons: Part 2
Creating Web Icons: Part 3

Blends and Masks - A Fireworks Project: Part 2
by Jim Babbage - 02-Jun-06
Reader Level:

In Part One of this two-part series, we worked with several of Fireworks's tools (new and old) to produce a corporate style cover page in a vertical format.

In Part Two we'll look at how we can take a design and re-purpose it for another use. Most print work is created in a portrait—or vertical—orientation. Most work destined for the screen is designed to fit a landscape—or horizontal—orientation. We will take the image we created in Part 1 and create a horizontal image, which could be used in a kiosk, on a homepage or a PowerPoint Presentation.

The Blends and Masks Series:
Blends and Masks - A Fireworks Project: Part 1
Blends and Masks - A Fireworks Project: Part 2

Approximate download size: 6.3MB

Introducing CMX Jumpstart San Francisco Free!
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.

CMX JumpStart San Francisco for Students (and Anyone)
by Sheri German,John Gallant - 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.

Approximate download size: 4MB

CMX Design Elements - Mercury
by Gordon Mackay - 25-May-06
Reader Level:

Hello, and welcome to the fourth CMX Design Element. This Design Element's code name is Mercury due to its gentle lines and pale metallic palette.

While our previous Design Elements have been loose designs with no particular theme, Mercury is a design that is focused towards (but not in any way limited to) photography sites. It looks like this:

Mercury

What's Included?

The Mercury PNG file.
Custom web icons drawn in Fireworks that will compliment the Mercury design perfectly.
A STL file that will allow you to re-apply all the Fireworks Styles used in Mercury's design via the Styles Panel.
Extra bullets and buttons specially designed to be used with Mercury.
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 - Mercury in detail:

Share Your Style by Gordon Mackay
Using Guides to Help Slice an Image by Jim Babbage
Fireworks Layers - Best Practices by Jim Babbage
Designing with Gradients and Glows by Adrian Senior
Creating Great Curves in Fireworks by Kim Cavanaugh
Fireworks: Rollovers Made Easy by Bill Horvath

We aim to make CMX Design Elements educational as well as productivity enhancing.

Approximate download size: 5.3MB

Introducing CMX Design Element Mercury Free!
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.

Quick Guide to The GIMP - Part 1: Basic Tools & Program Layout Free!
by Thomas Pletcher - 24-May-06
Reader Level:

The GIMP, or GNU Image Manipulation Program, is a very powerful image editor that is frequently compared to Photoshop. The GIMP is free, open source, and available on all major platforms. This introductory article will describe the basic, top-level tools offered by the program, and highlight the elements of its program interface which are different from Photoshop and other image editors.

The Quick Guide to The GIMP Series:
Quick Guide to The GIMP - Part 1: Basic Tools & Program Layouts
Quick Guide to The GIMP - Part 2: Editing Basics & Web Tips
Quick Guide to The GIMP - Part 3: Filters, Plug-ins & Scripts

Blends and Masks - A Fireworks Project: Part 1
by Jim Babbage - 19-May-06
Reader Level:

I've been playing more with blending modes and masks lately in an effort to come up with some unique collages that still have a business/corporate feel to them. With all the new Blend Modes in Fireworks 8, it's amazing to see what you can come up with—not to mention, fun!

A great deal of my personal photography is landscape and nature. Incorporating these types of images into a business presentation or homepage can at times be challenging—unless you're the Sierra Club. What I have done—and you will do—in Part 1 of this tutorial is create a cover page with an annual report feel. You'll be working with:

Blend modes
Masks
Live filters
Importing images into Fireworks
Guides
Symbols and Instances

Approximate download size: 1.4MB

The Blends and Masks Series:
Blends and Masks - A Fireworks Project: Part 1
Blends and Masks - A Fireworks Project: Part 2

Text in Motion With the Wiggler Free!
by Tom Green - 19-May-06
Reader Level:

When you start using After Effects, there will come a time when you look at the presets and think, "Gosh, I am bored with these." That will be the point where you discover Adobe has a wonderful sense of humor and you start using the Wiggler. In the text options, on the timeline, the Wiggly selector can be added to a chunk of text to randomize the values of any of the properties associated with that group. That description may sound rather formal, but when it comes to adding effects, randomness can lead to some happy surprises.

Approximate download size: 541k

Keeping it Small in Flash Free!
by Tom Green - 18-May-06
Reader Level:

If your Flash efforts need to go on some sort of weight loss program, here's a good place to start.

Creating a Blurred Mask Free!
by Tom Green - 18-May-06
Reader Level:

In this exercise you will create a video that blurs the edges of a mask to create the effect of a video that is in focus in a "knock out" area while the remainder of the video, under a black bitmap, is blurred using a Threshold effect. The key to this exercise, is to understand that the shapes you draw are composed of colored pixels. These pixels form a shape and that shape, when the movie is displayed on your screen, is seen by the computer as a bitmap.

Approximate download size: 4.3MB

Masks in Motion Free!
by Tom Green - 17-May-06
Reader Level:

As you know movie clips can be created using ActionScript and they have properties like position and size that can be manipulated. In this exercise we are going have a quite a few masks — up to 30 at any given time — moving across the screen and the color of the video will change based upon the position of the mouse on the screen.

Approximate download size: 2.2MB

Correcting an Overexposed Image Using Masks and Blend Modes
by Jim Babbage - 15-May-06
Reader Level:

When you are shooting fast moving objects, sometimes you just have to react and hope your exposure is acceptable in the final image. Sometimes though, while you may get the shot you want, the exposure isn't good as it should be. In a past tutorial, I demonstrated how to quickly fix an over exposed image by creating a duplicate object and using the Multiply Blend mode. In this tutorial, we will build on the multiply technique by adding a custom bitmap mask and experimenting with different shades of grey when applying the mask. To help with a washed out sky, we'll make use of the Replace Color tool and the Burn tool to add density to the waves created by the windsurf board.

Applying Filters and Blends Through ActionScript Free!
by Tom Green - 15-May-06
Reader Level:

Filters and blends can be applied without the use of code. They are all available through the Property Inspector and can be applied singly or in combination with each other. The filters and blends can also be applied through the use of ActionScript.

In the first of two exercises, you will blur a video by dragging your mouse across it. In the second exercise you add a screen blend mode that simulates the effect of a video being projected onto an underlying image… but the image shows through.

Approximate download size: 4.1MB

Persistent Page Indicator Free!
by Stephanie Sullivan - 12-May-06
Reader Level:

When developing Web sites using good principles of usability, it is good practice to use an indicator showing what page the person is on as they surf through your site. Some people use bread crumbs as well as a persistent page indicator (many times like the down state of the button) indicating that "you are here." This page indication can be acheived by simply placing a class on the proper navigation item (and changing the item it's placed on from page to page). However, when using server-side includes, templates or library items in Dreamweaver, since the same menu is used on each instance of the page, it can be a more challenging process. Don't worry though -- CSS and the descendant selector handle the challenge quite nicely. Come along as we walk through the steps needed to create this effect.

CMX Design Elements - Gold
by Gordon Mackay - 11-May-06
Reader Level:

Welcome to the latest in our popular series of CMX Design Elements.

We have covered two elements of the periodic table already; Carbon and Krypton, and while those elements inspired us to create some attractive designs, they still remain rather bland in terms of chemistry. So, lets find something that's valuable in terms of design, chemistry and global value.

Think of that one element of the periodic table that stands out above all others in terms of monetary value… yes, you guessed correctly, it's Gold, and as far as Community MX is concerned, it looks like this:

CMX Design Element - Gold

Gold, represented chemically by the symbol Au (from the latin word "Aurum") is probably the most attractive of all elements found in the world, it's also a globally recognized currency that's value never decreases in any significant way.

I bet that you didn't know that there is approximately 1 milligram of gold present in every ton of sea water! Fortunately for you, we have extracted many milligrams of this expensive metal and forged it into a rather precious design. Let's have a closer look at CMX Design Element - Gold.

Approximate download size: 1.9MB

Introducing CMX Design Element Gold Free!
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.

Loaders Demystified - Part 3: Getting Creative with Progress Indicators
by Joseph Balderson - 09-May-06
Reader Level:

There are many ways to code a loader, and just as many ways to create its look and feel. In this article you will build a style of loader that uses a "shape fill" progress indicator to add that "extra something" to your project.

Approximate download size: 4.5MB

The Loaders Demystified Series
Loaders Demystified: Part 1 - Usability Guidelines
Loaders Demystified: Part 2 - Creating a Simple Loader
Loaders Demystified: Part 3 - Getting Creative with Progress Indicators
Loaders Demystified: Part 4 - Using the CMX GIF Pre-Loader Packs

Fireworks on Mother's Day
by Jim Babbage - 05-May-06
Reader Level:

Mother's Day is fast approaching and I thought it would be fitting to make a new card for my Mom. Because I'll be emailing it and because of some of its very useful features, I'll be using Fireworks 8 to create my "Ode to Mom."

This tutorial will cover the use of:

Converting a Mask to a selection
Saving and restoring bitmap selections
Modifying bitmap selections
Combining two images using blends and masks
Text on a path
Dodging and burning
Using blend modes and opacity with the Rubber Stamp
Applying the Radial Motion Blur filter

Approximate download size: 11.2MB

Creating Web Icons: Part 2
by Gordon Mackay - 03-May-06
Reader Level:

When it comes to good design, everyone knows that God is in the details. Some of the best designed web sites all have one thing in common: a huge attention to detail.

A good design contains many graphic elements that extend beyond the common presence of attractive logos, creative background images and the various other images that serve to create a web page. Small web icons are one of those small details that make the difference between a good design and a great design.

In the first tutorial of the series we looked at creating a home page icon, a printer icon and an email icon. In this second tutorial we will create an add to cart icon that will be represented by a small image of a shopping cart, a download file icon, and a delete icon that will be represented by a small image of a trash can.

The Creating Web Icons Series:
Creating Web Icons: Part 1
Creating Web Icons: Part 2
Creating Web Icons: Part 3

Beating Spam On Your Contact Forms
by Adrian Senior - 03-May-06
Reader Level:

In this article we will look at how we can use a very simple method to beat the spam form scripts that populate and submit our forms.

Creating Web Icons: Part 1
by Gordon Mackay - 01-May-06
Reader Level:

When it comes to good design, everyone knows that God is in the details. Some of the best designed web sites all have one thing in common: a huge attention to detail.

A good design contains many graphic elements that extend beyond the common presence of attractive logos, creative background images and the various other images that serve to create a web page. Small web icons are one of those small details that make the difference between a good design and a great design.

In this tutorial we will have a look at drawing three of the most commonly used web icons: a house, used for a home link; an envelope, used for an email link; and a printer, used for a printable version link.

The Creating Web Icons Series:
Creating Web Icons: Part 1
Creating Web Icons: Part 2
Creating Web Icons: Part 3

CMX Design Elements - Krypton
by Gordon Mackay - 27-Apr-06
Reader Level:

Welcome to the second in our series of CMX Design Elements. We have moved along the periodic table from Carbon to Krypton (no, not the green crystals that make Superman tougher than the average mortal :o) )

The element Krypton (Kr) is used commonly in photographic flashes for speed photography, but our own CMX version of Krypton is generally intended to make awesome web sites :)

Here's what it looks like:

Krypton
Image 1: Design Element - Krypton.

Approximate download size: 5MB

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

Introducing CMX Design Element Krypton Free!
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.

Building a Video Scrub Bar
by Tom Green - 24-Apr-06
Reader Level:

The dreaded "video scrubber" isn't as scary as you may think. In fact, when you really think about it, it isn't that hard to create. You just have to think about the process in a slightly different manner.

In this tutorial you will be creating a scrubber bar that allows you to drag the Progress widget and move forwards and backwards in the currently playing video. When you release the mouse, the video will start playing at that point. Like all of the previous tutorials in this series, we aren't going to dive right into the project. The first thing we are going to do is answer that "Age Old" question: How does the dang thing work?

Approximate download size: 14.7MB

Retouching in Photoshop - Part 3 - More Image Adjustments
by Jim Babbage - 21-Apr-06
Reader Level:

It's pretty much an undisputed fact that Photoshop is the king of bitmap editing tools — especially for high resolution, print-destined images. Photoshop CS and CS2 have some very cool and useful tools (seen in Part 1 and Part 2) and commands that can help you fix or clean up almost any image that is supplied to you. In this article (Part 3) we will look at some more Image Adjustment commands — some of which you will recognize if you are a veteran Fireworks user — and some which you will probably say, "Holy Image Adjustment heaven, Batman!"

This article is intended as an introduction to some of Photoshop's image adjustment commands (with visual examples) and should not be considered an exhaustive exploration of these features.

In this article we will look at some of the not-so familiar commands:

Shadow/Highlight (Enhanced for CS 2)
Exposure
Replace Color
Variations

The Retouching Tools in Photoshop Series:
Retouching Tools in Photoshop CS2: Part 1
Retouching Tools in Photoshop - Part 2: Image Adjustment
Retouching Tools in Photoshop - Part 3: More Image Adjustments

Retouching in Photoshop - Part 2 - Image Adjustments
by Jim Babbage - 20-Apr-06
Reader Level:

It's pretty much an undisputed fact that Photoshop is the king of bitmap editing tools - especially for high resolution, print-destined images. Photoshop CS and CS2 have some very cool and useful tools (seen in Part 1) and commands that can help you fix or clean up almost any image that is supplied to you. In these article (Part 2 and Part 3) we will look at Image Adjustment commands - some of which you will recognize if you are a veteran Fireworks user - and some which you will probably say, "Holy Image Adjustment heaven, Batman!"

This article is intended as an introduction to some of Photoshop's image adjustment commands (with visual examples) and should not be considered an exhaustive exploration of these features.

In this article we will look at some of the not-so familiar commands:

Auto Contrast
Auto Color
Color Balance
Match Color

Using Illustrator and Photoshop to Age Artwork
by Kim Dudley - 14-Apr-06
Reader Level:

From t-shirts to web pages, the "I've been around for 100 years" look has become quite popular. On web pages, the effect can be used to add some texture and interest to graphics; on t-shirts it creates that favorite old t-shirt feel right off the rack. Whatever the resulting artwork will be used for, this method is easy to do and can be customized to suit any application.

The first time around in Wear it Out - Create a Worn Out Look Using Freehand, I demonstrated this technique in Freehand. In this article, I will use Illustrator and Photoshop to show a different method of producing a similar result.

Illustrator and Photoshop streamline this process, allowing you to create great results in just minutes. Included with this tutorial are four textured images which can be used to create aged artwork or you can use the Photoshop steps provided to create your own textures.

Approximate download size: 1MB

Introducing CMX Design Elements Free!
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.

CMX Design Elements - Carbon
by Gordon Mackay - 13-Apr-06
Reader Level:

Community MX is pleased to announce a very exciting new series of design goodies that we have tagged CMX Design Elements.

How often have you sat down and stared at a blank Fireworks Canvas, trying to summon some inspiration for that really demanding client that you know is going to be very hard to please? Well, if that's you then we're pleased you found us…

Approximate download size: 5 MB

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

Retouching Tools in Photoshop CS2 - Part 1 Free!
by Jim Babbage - 07-Apr-06
Reader Level:

It's pretty much an undisputed fact that Photoshop is the king of bitmap editing tools — especially for high resolution, print-destined images. Photoshop CS2 has some very cool and useful tools and features that can help you fix or clean up almost any image that is supplied to you. In this article (Part 1) we will look at several tools — some of which you will recognize if you are a veteran Fireworks user — and some which you will probably say, "Holy Moly! this is cool!"

Not every image requires that you use all the tools available. The tools we'll focus on are the Spot Healing Brush (new for CS2), the Healing Brush, Clone Stamp, Patch, Dodge and Burn tools.

The Retouching Tools in Photoshop Series:
Retouching Tools in Photoshop CS2: Part 1
Retouching Tools in Photoshop - Part 2: Image Adjustment
Retouching Tools in Photoshop - Part 3: More Image Adjustments

Approximate download size: 1.8MB

Introducing CMX JumpStart Modifications Free!
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…

Teaming up Fireworks and Flash 8 to Create a Custom Video Player
by Tom Green - 27-Mar-06
Reader Level:

When the Flash Video components or pre-rolled buttons don't fit the the project spec, what's a developer to do? How about using Fireworks 8 and Flash 8 to create a custom video player?

In this article I will show you how the drawing tools in both Flash 8 and Fireworks can be used to create a custom video player. We've also included some sweet little buttons created by CMX Partner Gordon Mackay.

In the next article, we will wire the whole thing up using ActionScript.

Approximate download size: 563k

Wiring up the Custom Video Player
by Tom Green - 24-Mar-06
Reader Level:

Wiring up the buttons that control video playback isn't all that difficult to accomplish. You just need to think a bit differently. In the previous installment of this series we created the Player. In this part, we will deal with the ActionScript that makes it all work.

Approximate download size: 1.8MB

Comparing Illustrator and Freehand
by Kim Dudley - 22-Mar-06
Reader Level:

Illustrator and Freehand have worked hard to outdo each other over the years. If one of these applications added a new tool or feature to its resume the other would soon follow with a similar update. Therefore it's not surprising these programs are able to produce very similar results. Both applications specialize in producing vector based artwork for print or the web. As well, both can work with multiple color modes, many different file types and offer drawing tools for producing complex artwork.

Although Illustrator and Freehand have the ability to produce similar results the steps to acheive these results may be quite different. Understanding the different terminology and location of tools in a new application can be frustrating and time consuming. This article will help reduce that frustration by demonstrating how to complete the same basic tasks in each application. In addition we will compare the panels in Freehand to the palettes in Illustrator. If you are a Freehand or Illustrator user and have had the need or interest to use the other application, this tutorial will get you started.

Simple Layer Masking with Photoshop
by Jim Babbage - 21-Mar-06
Reader Level:

If you've read any of my articles, you've probably heard me rant and rave about the power and flexibility of using masks while working in Fireworks. Photoshop has some pretty powerful masking features as well. In this tutorial, I will show you how to create and edit a layer mask from a bitmap selection, and drop in a new background behind the masked object.

Layer masks can be created using either another bitmap image or a bitmap selection. In this particular example, we'll be using a bitmap selection to mask the background of an image. I'll show you how easy it can be to create a layer mask, and adjust it to suit your needs.

This type of masking has many uses. It comes in very handy if — for example — you are working on a catalogue site and need to have all the products on an identical background. Another situation might be a scenic photo that was shot on a drab, overcast day. Wouldn't it be great if you could replace that nondescript grey sky with a bright blue one with fluffy clouds? Well, you can with masking, and keep everything editable in case you change your mind later (or find a better sky).

Hand Coloring and Tinting a Photo in Photoshop
by Jim Babbage - 17-Mar-06
Reader Level:

Harken back to the days of olde when a photographer used FILM and made enlargements in a DARKROOM. This tutorial will show you step-by-step, how to recreate some of the coloring and tinting techniques that have been used for years on traditional black and white photographs, using Photoshop's Actions, adjustment layers, masks, gradients, bitmap selections and the paint brush tool.

Using a ColdFusion Custom Tag as a Site Template: Part 4 - JumpStarts
by Tom Muck - 15-Mar-06
Reader Level:

I wrote a series of three articles on how you can use a ColdFusion custom tag to supply the design of every page in your site. Since that time, Community MX has released several JumpStarts — page designs using the latest HTML and CSS techniques to create starting points for your own designs. A JumpStart is also a perfect fit for the use of a ColdFusion custom tag. Heidi Bautista wrote an article about using JumpStarts with ASP.NET master pages — Convert an Existing Site to Use ASP.NET Master Pages and Themes. The ASP.NET master page is very similar in concept to the technique I presented in my series on CF, so this tutorial will cover the same ground for ColdFusion users, using the free North Pole JumpStart.

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

Using JumpStarts with Cartweaver, Featuring Minneapolis Free!
by Tom Muck - 09-Mar-06
Reader Level:

JumpStarts are great starting points for dynamic sites, and the Minneapolis JumpStart is a great starting point for a dynamic e-commerce site. Shopping carts like Cartweaver integrate well with Dreamweaver, but how do you integrate a third-party cart with a JumpStart? This tutorial, written by a member of the Cartweaver team and Community MX, shows one way of integrating the two.

Batch Processing Images to a Custom File Size Free!
by Jim Babbage - 07-Mar-06
Reader Level:

Fireworks Batch processing features can really save you time when you have to do the same thing to a bunch of images. A recent question in the Macromedia Fireworks forum made me stop to think of another batch processing routine that may come in handy for people; batch processing images to a specific file size.

Let's say you have a large number of photos that are different file sizes. Perhaps due to disc space restrictions or file size limitations for a web gallery or e-commerce site, you have to ensure that ALL the images not exceed a specific file size.

This tutorial will show you how to create a batch process for exporting a folder full of files to a specific file size, how to create your own custom Optimization Presets, and how to to save multiple Batch Options as a single script file that can be accessed in the Batch Process window.

Introducing CMX Jumpstart Minneapolis Free!
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.

CMX JumpStarts: Minneapolis
by Gordon Mackay - 03-Mar-06
Reader Level:

When it comes to shopping, Minneapolis is tough to beat. Travel + Leisure magazine called Minneapolis the 4th best shopping destination in the country, behind only New York, San Francisco and Chicago. And when it comes to jumpstarting your web designs, Community MX is the best. Our newest JumpStart boasts a pretty neat eCommerce design. So naturally we named it Minneapolis, after the city with the largest shopping mall in the United States.

The future of shopping is online, right? The Minneapolis JumpStart, with its valid XHTML 1.0 and CSS 2.1 markup, adherence to WAI and Section 508 accessibility guidelines, provides you with a solid foundation for any kind of eCommerce site.

Note: The download for this JumpStart is very large, 73MB, due in large part to the Drawing on Nature tutorial listed above. This tutorial contains four video lessons, hence the large file size. If you would like to download this JumpStart with all the bundled tutorials except this one, there is a link at the end of the article that will allow you to do so.

If you are not a member of CMX and are buying this JumpStart and can not download a 73MB zipfile, please send an email to info@communitymx.com after your purchase and we will make arrangements for you to download it in 2 parts.

JumpStart Comparison Chart Free!
by Heidi Bautista - 02-Mar-06
Reader Level:

CMX JumpStarts are a quick and sure way to get your new site up and running fast. But how do you decide when there are so many great choices?

The JumpStart Comparison Chart lists all the JumpStarts available at Community MX. The QuickPick Feature table provides a thumbnail of the main JumpStart page, a short list of features and techniques demonstrated in JumpStart, the cost (always free to members), the layout, including the number of columns, and a link to full JumpStart description.

The full descriptions include everything from the QuickPick Feature table plus thumbnails of all pages, links to download the JumpStart and to related articles, the publish date and author(s), and the list of tutorials included with each JumpStart.

Since each of us absorb information different ways, please also check out The Complete JumpStart Catalog. It also describes each of the JumpStarts but in a much more conversational manner. It's especially valuable if you need more information about the features listed in the Comparison Chart.

Creating Realistic Water Droplets on a Photograph
by Jim Babbage - 27-Feb-06
Reader Level:

There are many tutorials available on how to create water droplets. In fact my hat is off to a couple that are truly ingenius and simple. So why do another? Many of the resutls I have seen tend to look a bit unrealistic when used on a photographic image, or when compared to a real water drop in a photo. My goal was to go for realism. So, using a photo that has real drops in it, I went about trying to create my own, custom, articial, but realistic droplets. I think my expereimentation paid off; I came up with a process that can be used to create a droplet on a variety of images, with varying lighting conditions. In each case, the modfications to the droplet were minor.

To achieve this result, we'll be working with a variety of tools in Fireworks:

Vector Shapes
Bitmap selections
Transform tools
Converting Paths to bitmaps (FW 8 only)
Live Filters
Gradient fills

Designing a Logo: Part 3 - Getting Technical
by Kim Dudley - 23-Feb-06
Reader Level:

Logo design could be considered a complicated and tedious subject or it may be looked upon as an exciting and interesting opportunity. Logo development is a very creative process yet the designer must also have very good communication and technical skills.

The Designing a Logo series has attempted to cover all facets of logo design in order to give the reader an understanding and process for designing logos. The first two articles contained information about getting started and the creative process. The third and final article looks at the very important technical side of creating a logo.

After the creative work has been done a logo must be developed to a state that will allow it to be optimized for a wide variety of mediums. This article will look at how to do that as well as cover a few other logo related issues such as common file formats, Standards policies, trademark laws and the all important issue of pricing a logo.

The Designing a Logo Series:
Designing a Logo: Part 1 - Getting Started
Designing a Logo: Part 2 - Getting Creative
Designing a Logo: Part 3 - Getting Technical

Convert an Existing Site to Use ASP.NET Master Pages and Themes
by Heidi Bautista - 22-Feb-06
Reader Level:

One of the great advantages in ASP.NET v2.0 is the introduction of master pages and themes. This tutorial presents a practical example of converting an existing site to use master pages and themes. Our example site is the Community MX North Pole JumpStart. You'll learn how to chop up the code to create the master page, where to put the theme files and how to modify the existing css file so that it works well with the theme. It's actually a very quick process and one that can be adapted to any JumpStart offered by Community MX.

Approximate download size: 320k

Cool GoLive Features Part 4: The QuickTime Editor
by Sheri German - 21-Feb-06
Reader Level:

It's really rather surprising. Hidden in Adobe GoLive you get a whole other application: a QuickTime movie maker and editor. It includes everything from Sprite tools to Flash integration to drop-dead simple slide shows. So don't despair if you don't have an expensive, dedicated movie editing program but you do have Adobe CS2. You will be amazed at what you can do with the GoLive QuickTime Editor.

In this first tutorial in the QuickTime series, we'll look at the GoLive QuickTime tools and environment, and then create a slide show movie with picture, sound and text tracks. In upcoming tutorials we will look at Sprites, Flash integration, filters, and other more advanced GoLive QuickTime features.
This tutorial includes a sample MP3 and folder of images so that you can follow along.

Approximate download size: 1.8MB

Creating Edge/Border Effects in Fireworks
by Jim Babbage - 20-Feb-06
Reader Level:

You never stop learning. Something I have always been interested in is a way to produce a similar result or effect in different software packages. Take Photoshop and Fireworks, for example. Photoshop gives you the ability to create some pretty cool edge and border effects without having to go out and buy third-party software, as you'll see in Knut Kubenz' recent tutorial.

Reading that tutorial, I got to wondering how I could do the same kind of thing in Fireworks. One inherent difference between the two programs is that PhotoShop's roots are firmly planted in the raster graphic half of digital imaging. Fireworks has its roots in the vector graphics half. So, needless to say, there are some different ways to achieve the same kind of result. One thing I do like about this method is that it is non-destructive; no pixel data will be harmed or deleted during the making of this edge effect.

My focus will be on using vector shapes and the built-in Live Filters of Fireworks to create my edge effects. You have a great deal of control with vector shapes. Combine that with the power of Live Filters and your own sense of imagination and you've got a lot of creative potential ready to be unleashed.

We'll be looking at three methods in detail using:

vector shapes
custom paths
Live Filters
strokes

I'll also touch on using bitmap masks to create edge effects.

Designing a Logo: Part 2 - Getting Creative
by Kim Dudley - 09-Feb-06
Reader Level:

In Designing a Logo: Part 1 - Getting Started we discussed the following things: a brief history of "the logo", the terminology and what a logo is and why a company needs one. As well, we looked at the logos of three well-known and successful companies and found that although each logo was very unique they did have characteristics which have lent to their success and staying powers.

The Designing a Logo Series:
Designing a Logo: Part 1 - Getting Started
Designing a Logo: Part 2 - Getting Creative
Designing a Logo: Part 3 - Getting Technical

A Fireworks Quickie - Optimizing Text
by Jim Babbage - 03-Feb-06
Reader Level:

Getting good quality text in a JPEG file has long been a concern for many designers. Fortunately for us, Fireworks MX and higher versions have a very useful feature to help with this called the Selective Quality. In Fireworks MX 2004 and higher, we also have the ability to adjust and customize the aliasing of text. In this short tutorial find out how to utilize these features to keep your text crisp and snappy when exporting a file as a JPEG image.

Approximate download size: 2.5MB

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.

Designing a Logo: Part 1 - Getting Started
by Kim Dudley - 26-Jan-06
Reader Level:

Logos are at the heart of a company's corporate identity program. Their design and staying power can play a very important role in the success or failure of a company. But with so many logos out there why do we remember some and not others? Are there steps for creating logos and how do you turn a logo concept into a useable piece of artwork?

In this series of three articles we will attempt to answer these and other questions as well as discover some interesting logo related facts along the way. Since this topic is such a large one I have broken it down into three separate articles; Part 1 will look at some successful logos and discuss what has allowed them to last throughout the years. Part 2 will discuss the creative side of developing a logo and Part 3 takes a look at the very important technical side of developing a logo.

The Designing a Logo Series:
Designing a Logo: Part 1 - Getting Started
Designing a Logo: Part 2 - Getting Creative
Designing a Logo: Part 3 - Getting Technical

Text on a Path in Fireworks 8
by Jim Babbage - 23-Jan-06
Reader Level:

The release of Fireworks 8 brought with it many enhancements from both creative and production perspectives. This article focuses on one of the old FW features that was revamped for Fireworks 8 — editing text on a path. Adding text to a path breaks you out of the rigid formality of text blocks and gives you the freedom to make the text fit into your design in an almost organic fashion.

In the old days, changing the shape of a path that was attached to text was a multiple step process, and not a very intuitive one. In order to edit the path, you had to detach the text, change the path and then re-attach the text. Very much a trial and error process. In FW 8, it's just as easy to edit the path shape as it is to add text to a path. This makes it easier — and more fun — to create what you want. Control like this has been asked for many times in Fireworks, I'm happy to say it's finally arrived.

Cool Adobe GoLive Features: Part One - The Site Diagram Tool Free!
by Sheri German - 18-Jan-06
Reader Level:

If you purchased Adobe CS2 Premium, you may have noticed that you get Adobe's Web authoring program GoLive in the package. If you have been using Dreamweaver, you might have suppressed your curiosity to investigate further. Because I have taught and used GoLive over the years, however, I've discovered some unique and wonderful features that I would like to share. They may make you want to take a second look and even "weave" a few GoLive tools into your workflow.

In this article, I will introduce GoLive's Site Diagram tool. With it, you can structure an entire site, generate its folders and pages, add annotations, and present a beautifully designed diagram in PDF or SVG format to clients.

The Cool GoLive Features Series:
Cool Adobe GoLive Features: Part 1 - The Site Diagram Tool
Cool Adobe GoLive Features: Part 2 - Extending With Smart Forms

A Fireworks Quickie - Creating a Custom Command for Auto Shapes Free!
by Jim Babbage - 09-Jan-06
Reader Level:

I was reading an interesting thread on the Fireworks Newsgroup recently, about Auto Shapes. More specifically, the user wanted to know if there was any way he could get Fireworks to remember the specific settings for the Pie Auto Shape, in terms of size, segments and position on the canvas.

Without editing the actual JavaScript code for the Auto Shape, I don't think there is a way to get FW to lock in those changes permanently, but I discovered that — using Fireworks 8 — there is a way to create a custom command that does basically the same thing.

I'm a big fan of finding ways to reduce repetition; it saves you time, increases productivity and — let's face it — if I have to add a shape to 200 images for use as a mask object or some such thing, I really don't want to be building the shape from scratch every single time. BORING!!!

A custom command is created by saving a series of steps in the History panel as a single command. Once saved, the command will appear in the Command menu, and is useable on any open file.

I say Fireworks 8 because I found it necessary to use the new Auto Shapes panel to achieve the end result. Typically — and in earlier versions of FW — the only way to put an Auto Shape from the tool bar onto the canvas was to select the shape, then click and drag to draw the shape to your desired size. To edit the properties of the Auto Shape, you would normally drag the shape control handles. The problem with both these steps is that they cannot be recorded by the History panel, because they both rely on mouse movement. In FW 8, we have the new Auto Shape Properties panel, though. We can control every aspect of the shape from this panel, including the ability to insert new, additional shapes without going to the toolbar. This method worked on every auto shape I tested; it is not limited to the pie shape.

So follow along in this quick tutorial to see just how easy this process is. Who knows — it might even save YOU some time.

Creating a Simple Blog: Part 6
by Tom Muck - 22-Dec-05
Reader Level:

There have been five parts in the series on creating a simple blog. The first five parts focused on creating basic functionality to get a basic blog up and running using simple Dreamweaver design tools. This part will show how to incorporate the functionality into a more complex design — specifically, the latest CMX Jumpstart — Inverness. This tutorial will be equally applicable to ColdFusion, ASP, PHP, ASP.NET, or JSP because we will be using standard Dreamweaver server behaviors to create the blog. In the course of merging the dynamic blog into the design, you'll learn the following about merging content with design in general — how to find repeating items and make them dynamic, how to separate parts of an existing design into a module.

Creating a Simple Blog: Part 1 22-Mar-04
Creating a Simple Blog: Part 2 30-Mar-04
Creating a Simple Blog: Part 3 14-Apr-04
Creating a Simple Blog: Part 4 25-May-04
Creating a Simple Blog: Part 5 26-Apr-05

Introducing CMX Jumpstart Inverness Free!
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.

CMX JumpStarts: Inverness
by Gordon Mackay - 21-Dec-05
Reader Level:

Welcome to the latest CMX JumpStart— Inverness.

Inverness is the latest city in Scotland to attain city status. It is also the capital of the Highlands, and now it's a blog design too :)

The Inverness JumpStart is a centered, two column, fixed-width layout that emulates the styling's of a typical weblog. We chose to demonstrate this style of layout due to its current popularity as a way of representing frequently updated content on web pages.

There is nothing terribly complicated about the majority of blog designs. They all share a few common components as part of their index pages:

A summary of latest posts.
A selection of latest posts with snippets of the post content.
A link that takes the user to the detail page for the post.
A link that takes the user directly to a form that allows them to comment on the post.
A list of links to other blogs that the site's owner thinks his users will find interesting.

In addition to those features they also contain things common to all web pages… intuitive navigation and a unique form of branding that gives the owner's weblog a look all of its own.

This CMX JumpStart includes reference to all of these.

The Complete JumpStart Catalog Free!
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.

Making Antique-Style Glass Ornaments in Fireworks
by Jim Babbage - 19-Dec-05
Reader Level:

If you celebrated Christmas as a child, you might remember those old-fashioned, hand-blown glass ornaments that Mom and Dad would carefully unpack, and then hang high on the tree, out of reach from curious young hands. Well over the past couple years, these ornaments seemed to have made a come-back in retail stores. I got to thinking that it would sure be nice to have some kind of ornament — other than the standard ball ornament — that we see in a lot of designs and clip art. So, with the help of some Smart Shapes, a bit of masking and path manipulation, I was able to do just that. And you will too, after trying out this holiday tutorial.

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.

A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 2
by Zoe Gillenwater - 22-Nov-05
Reader Level:

In this final article in the series documenting the creation of my personal web site, you'll see how I used CSS to style the content of my XHTML page to match my design comp. This included styling a list to look like a navigation menu, formatting links and other text, and using sIFR to replace the text in my headings with beautiful Flash-generated text. You'll also see how I created a print style sheet, plus learn how I tested and debugged my page.

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 Cairo Free!
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.

CMX JumpStarts: Cairo
by Adrian Senior - 17-Nov-05
Reader Level:

Welcome to the CMX JumpStart — Cairo. Cairo is a fixed-width two-column layout that has been developed as a learning tool to show how you can use background images and work with gradients and glows to produce designs that are a little different from the run of the mill designs we see so many of on the Internet.

The Many Uses of Fireworks - Part 2 - PowerPoint Backgrounds Free!
by Jim Babbage - 16-Nov-05
Reader Level:

As we learned in Part 1, Fireworks is not just for web graphics. I think of FW as a screen graphics app. It lends itself well to almost any production flow that needs screen quality images, such as Captivate, PowerPoint, Flash, Director and even the desktop.

In Part 1, we looked at how to make promotional wallpaper for your site's visitors, including ways to batch process your files at various pixel dimensions. In Part 2, we will explore Fireworks' capability as a graphics editor/creator for PowerPoint and Captivate.

For good or ill, PowerPoint has become the de facto standard for many types of corporate presentations. Product launches, sales meetings, conferences, and the list goes on. It's easy enough to build a presentation using only the design templates that come with PowerPoint, but your presentation might look very much like someone else's. Also, the stock designs may not utilize a given company's corporate colors. And in many cases, the person creating the presentation may not have the skills, software or time to put together a custom look.

This is where you and Fireworks come in to save the day. Creating custom backgrounds and navigation art — even if it's just optimizing the images that exist in a current presentation — can mean another revenue source for you. And if you're like me — an independent contractor — having your fingers in several pies helps smooth out the highs and lows of project work.

Create a Talking Head Video Using Adobe Premiere Pro and Flash Professional 8 Free!
by Tom Green - 14-Nov-05
Reader Level:

The ability to use video with an Alpha Channel is new to Flash Professional 8. This articles shows how to create the video and then place it in Flash. Ever wondered how they create those talking head videos and cool banner ads on the Macromedia site? Read on...

Using the Dreamweaver 8 Image Viewer
by Tom Green - 03-Nov-05
Reader Level:

There are a lot of slide show solutions that can be used in Dreamweaver. Sometimes we forget there is a rather nifty tool — Image Viewer — that can do the job.

(Not So) Scary Ghosts 'n Goblins - Part 6
by Jim Babbage - 31-Oct-05
Reader Level:

Following in the footsteps of Kim Dudley's petrifying tutorial for making a tombstone in Freehand, here is my offering from the Fireworks side. There are some neat things you can do in Freehand, but my head — err, hat — is off to Fireworks 8 for the way it can quickly add a three-dimensional element to a flat shape. Using textures to make vector shapes more realistic is also a strength of Fireworks, as those textures always remain editable. Add in gradient fills, and we've got a crypt full of scarifying tools.

The (Not So) Scary Ghosts 'n Goblins Series:
(Not So) Scary Ghosts 'n Goblins - Part 1
(Not So) Scary Ghosts 'n Goblins - Part 2
(Not So) Scary Ghosts 'n Goblins - Part 3
(Not So) Scary Ghosts 'n Goblins - Part 4
(Not So) Scary Ghosts 'n Goblins - Part 5
(Not so) Scary Ghosts 'n Goblins - Part 6
(Not so) Scary Ghosts 'n Goblins - Part 7

PHP Contact Forms - Part 1
by Gordon Mackay - 28-Oct-05
Reader Level:

The ability to receive feedback or enquiries from the people who visit your web site is always beneficial. If your site is hosted on a server running PHP, the creation of mail forms is a relatively simple task, made easier by one of PHP's built-in functions, the mail() function.

The PHP Contact Forms Series:
PHP Contact Forms - Part 1
PHP Contact Forms - Part 2

CMX JumpStarts: Traverse City
by Zoe Gillenwater - 27-Oct-05
Reader Level:

You can rest easy using this JumpStart inspired by the tranquil and beautiful Traverse City, Michigan. As do all our JumpStarts, Traverse City 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 you may wish to use it for. Traverse City includes both a three-column home page layout and a two-column inner page layout, both fixed-width, which we've set up in a way that allows you to switch between the two in your own site with ease. Both layouts feature styled lists as navigation menus, and the inner page layout includes a styled data table.

The graphic and code techniques used to create Traverse City are explained fully in the nine tutorials that we've included in your download. We also include the four style sheets needed for this design (including an extensively commented one you can use for reference), the XHTML files for both the layouts, the source Fireworks PNG, and a Dreamweaver extension that allows you to create new pages based on Traverse City easily.

If you'd like a more detailed look at the Traverse City Jumpstart, as well as seeing a modified Traverse City design, check out Sheri German's CMX JumpStart Traverse City: An Introduction. Otherwise, click the link below to dive right into this JumpStart!

Introducing CMX Jumpstart Traverse City Free!
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.

Alpha Video Tricks
by Tom Green - 26-Oct-05
Reader Level:

Looking to do some cool video stuff in Flash Professional 8 such as adding a drop shadow or having the background "project" onto the subject? Read on...

(Not So) Scary Ghosts 'n Goblins - Part 5
by Jim Babbage - 25-Oct-05
Reader Level:

Well if Part 4 didn't send you screaming form the room in fear (of the Pen tool), my latest addition in the series is guaranteed (ok, well, not really) to make your heart beat faster and envelop you in a cold sweat.

In Ghosts 'n Goblins 5, we turn our attention to that winged demon of the night, the vampire bat!

This stylized bat will test your control of the Pen tool (not to mention, expletives), but if you made it through the spider's web, then I think you're up for the challenge.

Includes: Source PNG file, PDF, bat anti-venom, hair net

The (Not So) Scary Ghosts 'n Goblins Series:
(Not So) Scary Ghosts 'n Goblins - Part 1
(Not So) Scary Ghosts 'n Goblins - Part 2
(Not So) Scary Ghosts 'n Goblins - Part 3
(Not So) Scary Ghosts 'n Goblins - Part 4
(Not So) Scary Ghosts 'n Goblins - Part 5
(Not so) Scary Ghosts 'n Goblins - Part 6
(Not so) Scary Ghosts 'n Goblins - Part 7

A Fireworks Quickie - Using Hue/Saturation Live Filters to Colorize an Image Free!
by Jim Babbage - 18-Oct-05
Reader Level:

I'm always looking for cool new things to do with photos. Sometimes I even stumble across techniques by accident. It's even cooler when that technique is easy to do, as in this tutorial about colorizing an image using the Hue/Saturation Live Filter (Live Effect in MX 04 and earlier).

Six Design Problems Free!
by Kim Dudley - 14-Oct-05
Reader Level:

Design combines colors, shapes, photos, graphic elements and text to create a pleasing layout. It is a creative, intuitive process and can affect people in many different ways. Some people will like a design while others dislike it. So how can a design be judged good or bad? Is there such a thing as bad design?

This article will take a look at what bad design is and discuss six issues that may cause a bad design. Simple solutions are offered to improve existing designs and help avoid these pitfalls in future designs.

Making Complex Selections Using Bitmap Masks
by Jim Babbage - 06-Oct-05
Reader Level:

When making an irregular bitmap selection, you generally only have two tools: the Magic Wand or Lasso tool. The Magic Wand may not be accurate enough if your image contains many similar colors. The Lasso can take a lot of time and patience.

There is another alternative though, it's my version of Photoshop's Quick Mask feature. This tutorial will work with almost any version of Fireworks. With Fireworks 8 new Convert Path to Selection or Convert Selction to Path, you can have even more editing control over your final selection.

If the area you want to mask is even in tone/color and contrasts well with your main subject, my tutorial, Simple Bitmap Masking with Fireworks may be just the trick you need.

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 Free!
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.

An Introduction to MOSe Free!
by Gordon Mackay - 22-Sep-05
Reader Level:

The term MOSe means Mozilla, Opera and Safari enhancement. In this article we will explore some practical ways in which you can spice up your CSS designs for users equipped with up to date browsing software.

Due to the lack of modern CSS support in some browsers, many developers and designers find themselves in the rut of only using code that they know works for the masses. However, if we take advantage of modern CSS syntax and proprieatary code we can enhance aethetics beyond the norm for users with standards compliant browser software without sacrificing the experience for users equipped with older browsers.

Let's have a look at some commonly used design elements and see how we can add some more flavour to them.

A CSS Web Design Case Study: Constructing a Personal Site - Design Comp Construction Free!
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

Text in Captivate Free!
by Tom Green - 13-Sep-05
Reader Level:

Why, oh why, oh why do people not format their text in Captivate? Here's a quick overview of some the options available to you for formatting your text in Captivate.

Introducing CMX Jumpstart Machu Picchu Free!
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.

CMX Jumpstart: Machu Picchu
by Adrian Senior - 12-Sep-05
Reader Level:

Welcome to our latest CMX JumpStart offering; Machu Picchu.

Machu Picchu has been developed to be accessible to screen, print and handheld devices. Handheld devices are still very much a gray area in our content delivery for web pages. PDAs and more modern phones can do a very good job of rendering web pages and with a little tweaking can provide us with access to very usable and good looking web sites.

Similarly a print style sheet, when correctly set, can give our users access to printed content that can be digested at their leisure. Web pages that don't print correctly can be very annoying and detract from the site's value. It is these two media types that we will be focusing on along with screen media in Machu Picchu. The aim is to provide content of a high quality to screen, handheld and print medias.

Image Editing Panel - Fireworks 8 Sneak Peek Free!
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

Easy Text Effects: Part 4 - Punch Your Text up With a Highlight
by Linda Rathgeber-Stewart - 08-Sep-05
Reader Level:

There are times when the highlight you get from applying a bevel or other kind of filter just doesn’t create a dramatic enough effect. In this tutorial, you’ll learn an easy way to create a clearly defined highlight, separate from the text body, you can recolor and manipulate in any way you like.

The Easy Text Effects Series:
Easy Text Effects: Part 1
Easy Text Effects: Part 2 - Grunge Text Decollage
Easy Text Effects: Part 3 - 3D Innies and Outies
Easy Text Effects: Part 4 - Punch Your Text up With a Highlight

Bitmap Versus Vector: Part II
by Kim Dudley - 07-Sep-05
Reader Level:

As the line between vector and bitmap applications become more blurred it is very important to understand the difference between vector and bitmap artwork. Part I of this two-part series dealt with the pros and cons of bitmap and vector artwork.

This article will discuss when it is best to use each and look at how some Macromedia applications work with bitmap and vector artwork. In addition we will check out the applications that contain both vector and bitmap tools and discuss what to watch out for when using them.

A CSS Web Design Case Study: Constructing a Personal Site - Visualizing the Design
by Zoe Gillenwater - 30-Aug-05
Reader Level:

In the first article describing the development process for my new personal web site, I described how I came up with goals for my new personal web site and developed a rough site structure and design concept I felt would meet those goals. This article documents the next steps in the creation of my personal web site — fleshing out the design concept to prepare for the actual construction of the design comp (covered in the next article in the series). In this article, you'll see how I gathered inspiration from existing designs and artwork to visualize the design of my own site.

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

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.

Photographic Effects with Fireworks: Part 3 - Soft Focus Technique
by Jim Babbage - 23-Aug-05
Reader Level:

This is the third installment in this series. In prior articles I demonstrated how to emulate the Orton Effect and Multiple Exposures. In this tutorial, we'll look at creating soft focus filter effect.

This techniques is a fairly simple one, but the results can be very effective. As with the other effects, you only require one image file, which we will duplicate. You can use the supplied source file (name of file) or use your own image just as easily. This technique would be useful for to soften portraits or to add a sense of romance or dreamyness to landscapes or cityscapes.

The Photographic Effects with Fireworks Series:
Photographic Effects with Fireworks: Part 1 - Mimicking the Orton Effect
Photographic Effects with Fireworks: Part 2 - Multiple Exposures
Photographic Effects with Fireworks: Part 3 - Soft Focus Technique

Text Effects: Part 3 - 3D Innies and Outies
by Linda Rathgeber-Stewart - 19-Aug-05
Reader Level:

3D text effects come in two flavors: those that make the text look like it has been engraved or pressed into something, and those that make the text look like it is zooming out of your screen. You'll learn ways to create both innie and outie 3D text effects in Fireworks in this tutorial.

The Easy Text Effects Series:
Easy Text Effects: Part 1
Easy Text Effects: Part 2 - Grunge Text Decollage
Easy Text Effects: Part 3 - 3D Innies and Outies
Easy Text Effects: Part 4 - Punch Your Text up With a Highlight

A CSS Web Design Case Study: Constructing a Personal Site - Planning Free!
by Zoe Gillenwater - 19-Aug-05
Reader Level:

I recently redesigned and rebuilt my personal site from the ground up, featuring an all-CSS, web standards compliant layout. This article is the first in a series of articles describing the web development process that I followed for my site. Not all the steps will be applicable to corporate web design, of course, but you will gain insight into a design process that is centered around CSS, accessibility, and usability.

This first article covers the planning stage of the process. You'll learn how I came up with my site goals, developed a rough site structure, and created a design concept.

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

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 Free!
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.

Visualize This: Great New Design Tools in Dreamweaver 8
by Kim Cavanaugh - 09-Aug-05
Reader Level:

Dreamweaver 8 provides some terrific new visualization tools that have been on my personal wish list for some time. For people like me who are primarily visual designers, these new tools and features will be a great help in getting design tasks done more rapidly and efficiently. In addition, the new tools for visualizing page structures based on Cascading Style Sheets (CSS) will be of a tremendous help for those who are learning standards-based design or who just want to quickly examine the structure of the page without having to refer to the CSS settings themselves.

Setting Project Goals: A Web Development Case Study
by Zoe Gillenwater - 02-Aug-05
Reader Level:

Whether designing a new site, planning a redesign, or adding significant enhancements to an existing site, it's important to remember to build a list of approved site goals before beginning any content or design development. After all, content and design exist for a purpose. If you don't know what the site is supposed to be accomplishing, how can you know what action to take, what content to include, how to organize it, or how to present it visually? Letting realistic, measurable goals drive the development of a web site helps you complete the site on time, in budget, and to the satisfaction of the client and the site's users. This article discusses the importance of the goal discovery and evaluation process within the larger web development process, as told through a real case study of a redesign project.

Creating the Print Style Sheet for Vienna: Part One
by Sheri German - 29-Jul-05
Reader Level:

You may have noticed that we included a print style sheet with CMX JumpStart Vienna. There are many good reasons to make print style sheets for CSS layouts, but one in particular persuaded me to always include one. In part one of this series we'll look at print style sheets in general, as well as reconstruct the Vienna print style sheet.

The Many Uses of Fireworks - Part 1: Roll Your Own Promotional Wallpaper
by Jim Babbage - 27-Jul-05
Reader Level:

Fireworks is not just for web graphics. Repeat that mantra over and over, and you will be in the right frame of mind for this (and the next) tutorial. I think of FW as a screen graphics app. It lends itself well to almost any production flow that needs screen-quality images, such as Captivate, PowerPoint, Flash, Director and even, as we will soon see, your desktop.

Print Thumbnails of Multiple Pages in Freehand
by Kim Dudley - 25-Jul-05
Reader Level:

Taking the time to figure out how to use a new tool in an application is often put off till a day you're not quite so busy. ;) When that day never comes we find ourselves performing tasks the same way we always have, even if this is not the best or quickest way to do it. The Output Area tool is one of the tools I avoided for some time. As usual, once I did start using it, I wondered why I had waited so long.

This tutorial will get you started using the Output Area tool and show how it can be used to print or export any part of a document. We will walk through the steps of printing a sheet containing a thumbnail size view of all six pages in the document.

Rollovers: Fireworks vs. Dreamweaver
by Linda Rathgeber-Stewart - 22-Jul-05
Reader Level:

Q."Should I do image rollovers in Fireworks or Dreamweaver? I've heard it's better to do them in Dreamweaver."

I've read many posts in the Dreamweaver forum warning people away from using Fireworks image rollovers, "because Fireworks produces bloated code" compared with Dreamweaver's. No doubt I'll stir up a hornets' nest with this tutorial, but let's do image rollovers in both Fireworks and Dreamweaver so you can see the difference and decide for yourself.

Quick Vignettes
by Linda Rathgeber-Stewart - 15-Jul-05
Reader Level:

Feathering the edges of a photo not only helps to blend it into a composite or HTML page, it can have a significant effect on the viewer’s response to the image. In Fireworks, feathering can be done with the selection tools or with vector masks. Which method is better?

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!

Reconstructing Vienna: The Markup
by Sheri German - 07-Jul-05
Reader Level:

Upon releasing a JumpStart, we occasionally hear requests for a step-by-step reconstruction of how it was done. Sure, it's nice to have a great template that allows you to quickly whip up an accessible and valid site for clients. It's also nice to have all those great bundled articles that — face it — most of us never have time to read. The extensively commented CSS is also wonderful, but some of that detail can seem daunting. Wouldn't it be nice to have someone hold your hand as you get initiated into the magic of CSS layouts so you can really understand how it's done?

If this sounds like something you'd like to participate in, get ready for a two-part series that lets you recreate Vienna from start to finish. Today's article will teach you to plan your structure and write your markup. Part two, which will appear tomorrow, will help you penetrate the mysteries of its CSS documents, both print and screen.

Note: You will need to download CMX Jumpstart Vienna in order to follow along with this tutorial.

If you're ready, let's first ascend to "Wrapper Heaven."

Introducing JumpStart Vienna Free!
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.

The Creation of a CMX JumpStart
by Zoe Gillenwater - 05-Jul-05
Reader Level:

Although only one or two CMX partners' names appear on the JumpStart, each one takes a host of partners working together behind the scenes to create the JumpStart and release it to you, our subscribers. This article details that process, in the hope that it helps you develop your own team-based web design process. You'll learn how we come up with a concept for each JumpStart, our design considerations, how we constuct valid cross-browser pages that are robust enough for a variety of content and audiences, our writing and editing process, and our marketing and release efforts.

The Jello Mold: A New Look at Min- and Max-width For Web Pages - Part Two
by John Gallant,Holly Bergevin - 05-Jul-05
Reader Level:

In Part One of the Jello Mold series we showed how proper styling could create a page 'wrapper' that would fill the window, but also have a minimum width that works for all modern browsers, even Internet Explorer for Windows and Mac.

This installment examines a modification that allows much finer control over the displayed width of the page content, from fixed to fully fluid. We will also add a maximum width to that same content in a way that IE/Win can support.

The Jello Mold: A New Look at Min- and Max-width For Web Pages - Part One Free!
by John Gallant,Holly Bergevin - 30-Jun-05
Reader Level:

When designing a web page, a very important factor is width. If you do not assign an overall width to your page it will fill the user's browser window, whereas a rigid pixel-width wrapper will keep the page width constant, but has its own potential negative points.

As you can see, this is not a trivial issue. Ideally, we would be able to use the CSS min-width and max-width properties to solve the problem. However, Internet Explorer browsers (both Win and Mac) do not currently support them. Scripts are available to accomplish the task, but can introduce browser bugs of their own.

The first part of this tutorial series will introduce a new method of allowing min-width to be simulated in IE browsers without using scripts. It is cross-browser-friendly, as well. We think you're going to like the Jello Mold.

Wear it Out - Create a Worn Out Look Using Freehand
by Kim Dudley - 29-Jun-05
Reader Level:

Go into any trendy store today and you are sure to find retro-styled tees that look like they have been washed a hundred times. Although most commonly seen on tshirts, this effect can be used to add an aged look to logos and all kinds of other artwork, such as text and graphic elements.

Also known as distressing, this worn out effect can quickly and easily be created using Freehand. This tutorial supplies all the tools and steps needed to get you creating artwork that looks like it has years of wear and tear.

About Background Images
by Linda Rathgeber-Stewart - 23-Jun-05
Reader Level:

When they are well thought out, background images can add a lot of pizzazz to your web site at a very low cost in bandwidth. They are a simple and effective way to maintain visual consistency throughout the site, plus introduce color, pattern, and texture.

Digital Video: What Happens Before the FLV?
by Tom Green - 20-Jun-05
Reader Level:

You are handed a QuickTime movie and told, "Get it ready for web playback." Here's what you have to know about that video, how it was created, and why, sometimes, video simply doesn't work.

Love is in the Air - Do-It-Yourself Wedding Invitations Using FreeHand
by Kim Dudley - 14-Jun-05
Reader Level:

One of the hottest new trends for weddings and special events are hand-made invitations. There are hundreds of web sites that offer hand-made invitations or DIY invitation supplies. In this tutorial I've gone one step further and supplied you with Freehand templates and all the information you need to create your own, personalized invitations. Hand-made invitations are an extra touch that will let the guests know this event will be extra special.

This tutorial has everything you need to create your own wedding invitations or you can customize them for any other special event. These wedding invitations are an elegant, classic style but depending on the paper, fonts and embellishments they could be used for any celebration.

A Business Card Template for Freehand
by Kim Dudley - 03-Jun-05
Reader Level:

Presenting a professional image is always important when it comes to doing business. One of the items that can help you do this are business cards. Business cards play a big role in today's business. From a promotional item to a contact reference, they can provide a big bang for your advertising buck.

This article takes a look at business cards and discusses some of the history and issues surrounding them. The supplied template will help you get started with your own business cards and offers some information about choosing from the numerous printing options.

Introducing Jumpstart Vegas Free!
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.

CMX JumpStart: Vegas
by Stephanie Sullivan,Linda Rathgeber-Stewart - 02-Jun-05
Reader Level:

Las Vegas, entertainment capital of the world, inspired this exciting JumpStart design. As with all the JumpStarts, you can use and modify the design in any way you see fit, for commercial work or otherwise.

Two pages, a home page and contact page, are included in this JumpStart. Both pages feature a fixed width, centered design using a faux column technique. The home page includes a customizable Flash Slideshow component that includes a demonstration of images loaded using an XML file. This JumpStart features the cutting edge and accessible sIFR technique. sIFR allows you to use any font currently on your computer to create your headings. The contact page features a styled form using fieldset and legend. The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2 styling. We provide an extensively commented style sheet so you know what each piece does and how to change it to suit your design. Vegas also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for your work and give your users the best experience possible.

We've included the PNG file used to create the layout so you can adapt it with your own look and colors. It features masks that allow you to easily replace our graphics with your own, enabling you to adapt this design for any number of uses or clients. It includes the CMX Flash Slideshow component and the graphic and code techniques used to create Vegas are explained fully in the 13 tutorials that we've included in your download. Those techniques that are not covered in the bundle are explained here, providing you with not only a robust template, but a learning tool giving you insite into the web design process as well.

If you'd like a more detailed look at the Vegas Jumpstart, as well as seeing a modified Vegas design, check out Sheri German's CMX JumpStart Vegas: An Introduction.

Creating a Custom Look for the CMX Slideshow Extension Using Fireworks
by Jim Babbage - 31-May-05
Reader Level:

I'm an Ultra-Noob when it comes to Flash. Frankly, the application overwhelms me, most likely because I over think the process. So one thing that CMX has helped me with is to learn a bit about this program, by working with some of the cool extensions and tutorials created by our Flash Experts.

Case in point: In the past few weeks, I have had TWO requests from clients for an automated slide show for their web sites. In the past I have built these as semi-interactive photo galleries, making use of other extensions and then hammering them into submission until the gallery fit in the page the way I wanted. After reading Paul Newman's article on his CMX Slide show Flash Extension I was not only intrigued, but completely hooked. I could DO this.

And I did, in less than an afternoon, including image selection and batch processing. Let me tell you, I was tickled pink that this worked. Not only did I do something in Flash, I also had an answer for two clients - which means more work and happy customers!

After my initial elation wore off, the designer part of me kicked in. I started wondering how I could jazz up the slide show. I glanced nervously at the drawing tools in Flash, but my hand knew better. Fireworks was launching before I even thought about it.

Paul's excellent tutorial gives you all the info you need to make his extension work. This tutorial will look at how easy it can be to design-ify a Flash interface, by working seamlessly with Flash and Fireworks. What we will be doing is creating a custom frame that surrounds the slide show. area. We will customize the frame so that it looks a bit more organic, and then bring the design into Flash.

Easy Text Effects: Part 2 - Grunge Text Decollage
by Linda Rathgeber-Stewart - 20-May-05
Reader Level:

Smeared, faded, and abraded text and images are staples of commercial art houses, and often appear on the portfolio sites of voguish designers. There are as many methods of producing the effects as there are artists, though I’ll bet none are as easy to reproduce as the methods you’ll be learning in this tutorial.

The Easy Text Effects Series:
Easy Text Effects: Part 1
Easy Text Effects: Part 2 - Grunge Text Decollage
Easy Text Effects: Part 3 - 3D Innies and Outies
Easy Text Effects: Part 4 - Punch Your Text up With a Highlight

A Fireworks Quickie - Using Text as a Mask Free!
by Jim Babbage - 16-May-05
Reader Level:

In this introductory masking tutorial we will take a photograph and mask it with a string of text. This technique is requested often in various user groups. While not difficult to do, it certainly expands the creative options for text.

Turn the Page with Freehand
by Kim Dudley - 12-May-05
Reader Level:

When working with page layout applications the final product will often be printed on a sheet of paper. This may be the reason why the work area in these applications is called a page. The concept of a page is pretty straight forward, but the way applications handle pages is a different story.

This tutorial will look at Freehand's flexibility when working with pages. If you are more familiar with working with canvases in photo applications or if you have only used one-page layouts in Freehand, this tutorial will introduce you to a whole new world of features you may have been missing. Get out that list because this tutorial is going to give you more reasons to use Freehand for that next big project.

Modifying the Aspen JumpStart to Work with Short Pages
by Zoe Gillenwater - 10-May-05
Reader Level:

There's no such thing as one-size-fits-all in web design — some layouts are suited to particular types of content, and others are not. The Aspen JumpStart is no exception. One thing it does not handle well are pages with very little content. As a three column, liquid design, it's better suited toward pages that are bursting at the seams. But luckily, it can be revised to improve its performance on short pages. This article will explain how and includes all the modified files.

If you previously purchased the Aspen JumpStart, please send an email to info@communitymx.com and we will send you this article and the support files at no charge. Please include the email address for the PayPal account used to make the purchase in your email.

Simple Bitmap Masking with Fireworks
by Jim Babbage - 05-May-05
Reader Level:

If you've read many of my articles, you've probably heard me rant and rave about the power and flexibility of using masks while working in Fireworks. In this tutorial, I want to show you how to create and edit a bitmap mask, and drop in in new background behind the masked object.

Bitmap masks can be created using either another bitmap image or a bitmap selection. In this particular example, we'll be using a bitmap selection to mask the background of an image. I'll show you how easy it can be to create a bitmap mask, and adjust it to suit your needs.

This type of masking has many uses. It comes in very handy if - for example - you are working on a catalogue site and need to have all the products on an identical background. Another situation might be a scenic photo that was shot on a drab, overcast day. wouldn't it be great if you could replace that nondescript grey sky with a bright blue one with fluffy clouds? Well, you can with masking, and keep everything editable in case you change your mind later (or find a better sky).

Creating a Lightbulb in FreehandMX
by Kim Dudley - 02-May-05
Reader Level:

Learning a new application can be time consuming and frustrating. Many applications have a steep learning curve and can quickly discourage new users. Macromedia has helped overcome this for their existing users by creating similar interfaces in all their applications. When moving from one Macromedia application to another, the familar interface and comparable tools can help speed along the process of learning the new application.

The most recent addition to my arsenal of programs is Fireworks. In the beginning, I resisted this new tool. I have however, found the move from Freehand to Fireworks to be fairly smooth and quite beneficial. I started the transition between these two programs by creating artwork in Freehand and copying it to Fireworks. This helped illustrate to me how Fireworks handles artwork. I eventually gained the confidence to do a complete project in Fireworks without the aid of Freehand.

When I saw Jim's article Creating a Lightbulb using Fireworks, I realized it would be a great project to recreate using Freehand. I was interested in seeing if a similar graphic could be created and if the steps would be comparable. This tutorial will walk through the steps of creating Jim's light bulb, and in addition to learning how to use many of Freehand's drawing tools we will also see how Fireworks and Freehand compare.

Creating XP-like Icons in Fireworks
by Jim Babbage - 27-Apr-05
Reader Level:

A recent request from one of our CMX subscribers was the inspiration for this tutorial. He wanted to know how to make Windows XP-like icon graphics using Fireworks. I did find a few examples on the web which used Adobe Illustrator - and, by extension, Freehand - (and LOADS of special icon-creation software), but nothing that used Fireworks.

Well, I felt I was up for a challenge and decided to give this a go in my favorite image editor. The following is a step by step tutorial on creating an XP-style icon graphic.

Our test project will be to create a folder icon with an envelope being inserted into it. Think of it as an Email Archive icon. We will be working a lot with vector shapes, the Pen tool and gradients in this project

CMX JumpStarts: New Orleans
by Paul Newman,Zoe Gillenwater - 21-Apr-05
Reader Level:

The New Orleans JumpStart has been designed with the Umoja String Quartet and their jazzy feel at the center. Two pages, a home page and contact page, are included in this JumpStart. Both pages feature a fixed width, centered design with a scrollable content area. The home page includes a customizable MP3 player built in Flash that includes music from from two Umoja String Quartet CDs: "Songs of Our Fathers" and "Things Ain't What They Used To Be."

The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2.1 styling. We provide an extensively commented style sheet so you know what each piece does and how to change it to suit your design, as well as another version of the style sheet with the comments stripped out so you don't have to cut out all those extra kilobytes by hand when you're ready to go live! New Orleans also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for your work.

Beyond just the pages, we've also included all the source files used to create both of the layouts, both PNG and Flash. All layers in the PNG file are organized and labeled so that it's easy to make any modifications you need.

The graphic and code techniques used to create New Orleans are explained fully in the 14 tutorials that we've included in your download. Those techniques that are not covered in the bundled tutorials are explained in this article.

If you'd like a more detailed look at the New Orleans Jumpstart, as well as seeing a modified New Orleans design, check out Sheri German's CMX JumpStart New Orleans: An Introduction.

Introducing CMX Jumpstart New Orleans Free!
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.

A Bright Idea - Creating a Lightbulb in Fireworks MX 2004
by Jim Babbage - 15-Apr-05
Reader Level:

Did you know that the modern light bulb has not changed much in its composition since it was invented over 100 years ago? Keep that one handy for your next game of Trivial Pursuit ™.

Speaking of bright ideas <groan>; here's a project that will shed some light <double-groan> on some of the vector tools in Fireworks MX and MX 2004. Using vector shapes and a variety of fill options we'll build a frosted light bulb from scratch.

To create the light bulb, we'll be joining two basic shapes together - an ellipse and a rectangle. For the threaded base, we'll need the ribbon auto shape - available for free here at CMX. We will also use the Pen tool to create a custom shape.

Make sure you have downloaded and installed the ribbon auto shape before you begin this project.

Pointing In the Right Direction - Using Arrows in Freehand
by Kim Dudley - 05-Apr-05
Reader Level:

There is often an easy way and a not so easy way to do things in Freehand. Many tasks in Freehand are automated, saving you many steps in the creation of artwork. Learning the little features available in Freehand will speed up your workflow making you more productive.

This article will take a look at a handy little automated task for creating arrow graphics in Freehand. I often use arrows in layouts, presentations or when creating things such as flowcharts. The process of manually drawing an arrowhead is not complicated but it does involve a couple of tedious steps and why bother when it can be completed in one quick and easy click.

Photographic Effects with Fireworks: Part 2 - Multiple Exposures
by Jim Babbage - 04-Apr-05
Reader Level:

While Fireworks may not have all the doo-dads and what-cha-ma-call-its that Photoshop has, I think you can still do some pretty neat things with photographs, if you take some time and think about what you want to accomplish.

In this, the second article in our series, we're going to create multiple exposure effects. The traditional technique requires you to make several exposures on the same frame of film. The initial exposure reading is made, and then that exposure is divided between the number of multiple exposures you plan to make. Dividing the exposure reduces the risk of gross overexposure. Every time you make a new exposure, you move the camera, or zoom the lens, or alter the focus. The end result is an expressionist-style image.

In the digital equivalent, we need only one image, but we will treat Fireworks much like a camera, creating our mulitple exposures and altering the composition of each frame through movement, brightness, blur and blending modes. We'll also look at how far you can take this effect, after it's done.

The Photographic Effects with Fireworks Series:
Photographic Effects with Fireworks: Part 1 - Mimicking the Orton Effect
Photographic Effects with Fireworks: Part 2 - Multiple Exposures
Photographic Effects with Fireworks: Part 3 - Soft Focus Technique

Introducing the CMX CSS Snippet Collection - Part One
by Sheri German - 01-Apr-05
Reader Level:

CSS Positioning layouts are hot, and many people are trying to make the transition from the mostly reliable, but non-semantic, table-based layouts we've all used for years. CSS 2.1 provides great features for laying out pages, and the specs for CSS 3 indicate that some day the future of design on the web will be ever brighter indeed.

We here at CMX try to make the learning curve as painless as possible with our many CSS tutorials and articles. Now we'd like to offer you a diagnostic tool that spares you some typing and memorizing. We are proud to introduce the CMX CSS Snippets Collection. Snippets, as you may well be aware, are bits of reusable code that paste as blocks or around selections with the click of an insert button.

This article includes an extension for installing part one of the collection into the Dreamweaver Snippets panel, and a tutorial that explains the problems and solutions that the hacks correct.

Part One of the CMX CSS Collection includes the following:

Caio Hack
Anti-Caio Hack
IE Mac only
IE Mac only 2
Hide from Mac
Holly Hack
Box Model Hack
Tan Hack
Tan Hack and Anti-Mac combined
6 IE Conditionals for all IE, 5.0, 5, 5.5, gte 5.5, and 6

Read on and bust those bugs!

Easy Text Effects: Part 1 Free!
by Linda Rathgeber-Stewart - 31-Mar-05
Reader Level:

Text as art form is still possible for Web pages, but to use it with any flair, the Web designer must still fall back on graphic text. With a powerful imaging tool like Fireworks, it is possible to create graphic text—for headings and titles, and as design elements in their own right—that rival the best of the printed media.

The Easy Text Effects Series:
Easy Text Effects: Part 1
Easy Text Effects: Part 2 - Grunge Text Decollage
Easy Text Effects: Part 3 - 3D Innies and Outies
Easy Text Effects: Part 4 - Punch Your Text up With a Highlight

Creating a Realistic Cast Shadow
by Jim Babbage - 24-Mar-05
Reader Level:

In the early days of CMX, I wrote an article on Creating Perspective Shadows in Fireworks MX. Those concepts still hold true, but I thought I would share another technique. Consider this an enhancement which produces an even more realistic - and controllable - cast shadow.

This technique makes use of a vector mask, a marquee selection and two copies of the bitmap selection, each filled with black.

From Design to Completion: A Corporate Identity - Part 2
by Kim Dudley - 21-Mar-05
Reader Level:

No matter the project type or project size, all graphic design jobs follow a similar path and involve comparable skills. Graphic design is not all about creativity, in fact that is a small part of a graphic designers overall job. Dealing with clients and suppliers, going to meetings, research, setting up artwork, these are a few of the other tasks involved in a design job.

This article is the second part of a two-part series looking at a real world graphic design project. We began in the first article with the initial contact and followed through to the completion of a logo and business cards.

This article will give you a look into the process of developing a brochure, setting up the brochure, producing name tags, having a second meeting and invoicing.

How to Punch a Vector Shape Through a Bitmap
by Linda Rathgeber-Stewart - 15-Mar-05
Reader Level:

I'll bet you've been told that it's impossible to punch a vector shape through a bitmap in Fireworks. This tutorial will prove that you can, and that it may be a better method than selecting with a marquee tool or masking.

From Design to Completion: A Corporate Identity - Part 1
by Kim Dudley - 09-Mar-05
Reader Level:

In this article we will be looking at a real world project and the process involved in the creation of a corporate identity. We will begin with the initial contact and follow through to the completion of the job. This series of articles will give you a look into the process of working with a client, estimating costs, writing specs for printers and producing the actual materials.

In this first article, we will cover the initial meeting with the client, discuss quotes, send specs to the printer and design the logo. Like all projects this one has its successes and its problems, but that's all part of the job.

Photographic Effects with Fireworks: Part 1- Mimicking The Orton Effect
by Jim Babbage - 08-Mar-05
Reader Level:

As I was browsing through the latest issue of my favorite photo magazine I came upon a very inspiring article, detailing how to digitally reproduce (or create) some different traditional film camera techniques. As is the norm, these techniques were described using Photoshop. Well, I thought I would share my own take on these creative ideas, using my favorite web imaging software, Fireworks.

In this first in a series, we're going to look at mimicking the Orton Effect. The original technique was developed by Vancouver Island photographer Michael Orton and is acheived by sandwiching two slides together - a sharp image and a duplicate that is deliberately blurred. The overall result is a dreamy, ethereal image, water-color like in nature.

The steps I describe will vary depending on your images, but that is at least half the fun and makes this a really creative project for you. You decide what you like - how far to take things. I can see all sort of uses for this type of effect; page design, header graphics and the like.

The Photographic Effects with Fireworks Series:
Photographic Effects with Fireworks: Part 1 - Mimicking the Orton Effect
Photographic Effects with Fireworks: Part 2 - Multiple Exposures
Photographic Effects with Fireworks: Part 3 - Soft Focus Technique

Slicing Fireworks Navigation Bars With Frames
by Kim Cavanaugh - 25-Feb-05
Reader Level:

A question that often comes up when discussing slicing Fireworks navigation compositions is "Should I use layers or frames for composing my image?" The short answer is, "Yes", which is really no answer at all of course. The slightly longer answer is "It depends."

In a previous Captivate video tutorial I showed you how to slice with layers. In this tutorial, also done with Captivate, you'll see how frames can be used for more complex navigation schemes, and see an example of the kind of image that might be more suitable for this slicing technique. You'll also see how this method differs from the layer method so you can make an informed decision about the best way to tackle that complex exporting job.

A Printing Checklist For Problem-Free Print Jobs
by Kim Dudley - 23-Feb-05
Reader Level:

Completing an attractive design and sending it to print is a great feeling. But there is nothing worse then sending a file to print, only to have the printer call you because they are having problems with your artwork. This can cause delays and significantly add to the cost of printing. If a printer needs to spend time fixing your mistakes you better expect to pay for it.

So how can you avoid problems and ensure your file prints the way it is supposed to? This article will provide a checklist to use during setup and before sending a file to print. It will help you avoid the common problems that arise during a print job. In addition to the checklist I have also included a PDF of a job sheet. This job sheet includes information the printer will need to output your artwork correctly. Just fill it out and send it along with your files or use it to create your own customized version. A checklist and a job sheet, two simple items that will help you be sure your print job is completed on time and on budget.

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.

Fireworks Hotspot Rollovers
by Linda Rathgeber-Stewart - 17-Feb-05
Reader Level:

Everyone knows that web images are rectangular. If you want a navigation system made of image rollovers, you have to make them out of stacks of rectangles, or horizontal arrays of rectangles. Rectangles to the left. Rectangles to the right. Rectangles over and under. Gets boring, eh?

CMX JumpStarts: Venice
by Zoe Gillenwater - 14-Feb-05
Reader Level:

Venice, the city of canals, inspired this romantic JumpStart design. As with all the JumpStarts, you can use and modify the design in any way you see fit, for commercial work or otherwise.

Venice includes a three-column home page design as well as a two-column form page. Both layouts feature fixed-width, equal-height columns with rounded corners. Techniques used in the layout include floats, absolute positioning, list styling, and backgroung image tiling. The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2.1 styling. Venice also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design you may wish to use it for. Both designs have been extensively tested on a wide range of platforms and browsers to ensure maximum cross-browser compatibility.

In addition to the extensively commented XHTML and CSS files, Venice comes with the PNG file used to create both of the layouts. It features masks that allow you to easily replace our graphics with your own, enabling you to adapt this design for any number of uses or clients. You'll learn how to organize a single Fireworks file into a comp for multiple pages.

To help you master the techniques used to design and construct the files, Venice comes bundled with the following tutorials:

Using Masks in Fireworks MX by Jim Babbage
Do You Want To Do That With CSS? — Centering a Wrapper by John Gallant and Holly Bergevin
Flowing and Positioning: Two Page Models by John Gallant and Holly Bergevin
Float The Theory by John Gallant and Holly Bergevin
CSS An Introduction Part Two: Background Images by Adrian Senior
Recreating Macromedia's Layout by Zoe Gillenwater
Styling CSS Buttons (Part 2) by Stephanie Sullivan
Styling Forms: Fieldset and Legend by Stephanie Sullivan
Using Classes and IDs Effectively by Zoe Gillenwater
Do You Want To Do That With CSS? — Align Elements Left and Right by John Gallant and Holly Bergevin

Each bundled tutorial explains how to complete the tasks that were undertaken to create the layout. Those techniques that are not covered in the bundle are explained here, providing you with not only a robust template, but a learning tool into the web design process as well.

If you'd like a more detailed look at the Venice Jumpstart, as well as seeing a modified Venice design, check out Sheri German's CMX JumpStart Venice: An Introduction.

JumpStart Venice: An Introduction Free!
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.

Creating a Neon Sign with Fireworks and CMX Black Line Masters
by Jim Babbage - 10-Feb-05
Reader Level:

As you may - or may not - be aware, Kim Cavanaugh has been providing CMX with some very cool, royalty-free, vector-based clip art, called the CMX Black Line Masters Series. If you're in a creative slump, or need that special something for an illustration or a logo, these clip art packs can be a great inspiration. I've written a couple tutorials that use the Black Line masters series as their foundation. This simple tutorial is another example of what can be done with them. The goal is to create a neon sign suitable for hanging in any cyber bar of your preference.

We'll be working primarily with the path Stroke color, and a single Live Effect.

Creating Charts and Graphs in Freehand
by Kim Dudley - 07-Feb-05
Reader Level:

Creating a visually appealing document containing lists of numbers and statistics can be challenging. Displaying these numbers and statistics in charts and graphs is more interesting and may communicate the information to the viewer better and quicker. Charts and graphs may not be appropriate for official business reports, but for items such as presentations, newsletters, brochures and web sites, charts and graphs can take a boring bunch of numbers and create something that is interesting and attention grabbing.

This tutorial will go through the steps of setting up a chart and graph and go over the other graphs available in Freehand.

Be Mine, Valentine
by Jim Babbage - 04-Feb-05
Reader Level:

Whether you consider Valentine's Day to be a special occasion for love, or an event manufactured by the greeting card industry, one thing can be certain; you better have a little gift from the heart with you when you see your special someone that day.

The best gifts are not the most expensive -- they're the ones that show care and thought. This tutorial -- or rather the end result of this tutorial -- was inspired by that special person in my life.

From a less mushy perspective, I also wanted to show you how techniques from other tutorials can be altered to suit your own design needs. Learning how to do specific things is great, don't get me wrong, but there's a certain sense of accomplishment when you can take what you've learned, and make it your own.

Several techniques have been used here. I have modifed Brian Edgin's tutorial, The Ultimate Aqua Button , to create the glass heart effect. This tutorial will also make use of:

Bitmap masks
Live Effects
Vector Shapes
Vector Path tool
Replace Color tool
Transform Tool
Magic Wand

You will also work a lot with modifying bitmap masks, vector paths and shapes

This tutorial is video-based, with narration and captioning. Due to the size of the videos, it has been broken into 6 parts. The completed, editible PNG file as well as off line versions of the videos are available in the support documents. There is close to an hour of video instruction, divided between the 6 parts.

Conversion Selections in Fireworks
by Linda Rathgeber-Stewart - 02-Feb-05
Reader Level:

In this exercise you’ll learn how to use Fireworks to change the background color of a simple logo to transparent, and do it without leaving ugly anti-aliasing artifacts around the edges.

Liverpool JumpStart with .NET
by Heidi Bautista - 31-Jan-05
Reader Level:

Ah yes, Liverpool, not only a great JumpStart, but now you can have it with ASP.NET support. In addition to a valid CSS2 and XHTML 1.0 Transitional, WAI and 508 Accessible CSS layout, you also get a dynamic ASP.NET login application. The original release of the Liverpool JumpStart comes bundled with ColdFusion, PHP, and ASP and uses Dreamweaver's built-in User Authentication Server Behaviors. Unfortunately, Dreamweaver doesn't boast similar server behaviors for ASP.NET. To help make up for that lack, here's a special tutorial just for you ASP.NET coders. I've taken the original Liverpool JumpStart pages and added the necessary ASP.NET code. The result: an out-of-the-box ASP.NET login solution combined with a versatile layout. What could be better? :-)

Included in the support files are the CF, ASP and PHP versions of the Liverpool JumpStart. There is a link at the end of the article that will allow you to download just the .NET version if you prefer, as well as a link to download the bundled tutorials that were included with the original Liverpool JumpStart.

The .NET version of Liverpool is available as a no charge upgrade to purchasers of the original Liverpool JumpStart. If you would like to receive the .NET version, please send us an email and we will send you the .NET files. Please be sure to include your name and the email address that is associated with the PayPal account used to make the purchase.

Off the Page - The Unseen Job of Printer's Marks
by Kim Dudley - 26-Jan-05
Reader Level:

In this tutorial, we will look at the life of a printer's mark. Dedicated to ensuring a job prints correctly, they are one of the most important elements in a print design, yet are never seen. After they successfully complete their job they are cut off and thrown away...

Okay, maybe I can't make you feel sorry for printer's marks, so I'll just get to my point. Printer's marks are a necessary part of a print job and it is a good idea to know how to use them. This tutorial will take a look at printer's marks and demonstrate how to automatically and manually set them up in Freehand.

Announcing CMX JumpStart: Liverpool Free!
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.

New Year, New Style
by Kim Dudley - 13-Jan-05
Reader Level:

It seems that during the past number of years the expected output for a graphic designer has increased exponentionally. Projects that once took a week to complete are now expected to be sent to print within a couple of days. With deadlines, as well as budgets, growing tighter we must find ways to improve our productivity and increase our accuracy. Freehand's Style Sheets are one way we can accomplish this. This tutorial is a step-by-step guide on the set-up and application of style sheets. At the end of this project you will be using style sheets for all your large projects.

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.

A JumpStarts Case Study: Replacing Page Design Elements
by Kim Cavanaugh - 07-Jan-05
Reader Level:

One of the things that I really love about the JumpStart designs from Community MX is the fact that I don't need to worry about the little tweaks and hacks that are so common when attempting fully validated CSS-P designs that are compatible across multiple browsers and platforms. Frankly, I just don't have the time to remember all the little things that need to be done to make a CSS-P design work, and having the CSS wizards at Community MX doing that part of the work allows me to concentrate on the things that do matter to me, like getting a design completed to meet my client's requirements. OK, they're only imaginary clients at this point, but imagine the all-too-real instance of a client saying that they like the overall design that you've worked out, but that things are just a "little too purple". This part of the series shows you how to locate all those other elements of your JumpStart design, how to change them to create a unique design, and how to use Fireworks to help in the process.

Note to non-subscribers purchasing this tutorial: The download file for this tutorial is approximately 39MB. If a download of this size is too large for you, please send an email to info@communitymx.com after your purchase and a link will be sent to you where you may download each video contained in the article separately. Please include the email address that is associated with the PayPal account used to make the purchase. For subscribers, there will be links at the end of the tutorial itself giving you the same options.

Get Up to Date With Freehand
by Kim Dudley - 28-Dec-04
Reader Level:

With 2005 just around the corner, I have created a project utilizing Freehand's drawing tools and text tools. This tutorial deals with many of the tasks and tools used in day-to-day layout work, including guidelines, importing elements and working with tabs. At the end of this basic project you will have a 12 month desktop calendar ready for printing.

CMX JumpStarts: Aspen
by Zoe Gillenwater - 23-Dec-04
Reader Level:

Community MX is pleased to announce the release of the latest CMX JumpStarts designs, Aspen. As with all the JumpStarts, you can use and modify the design in any way you see fit, for commercial work or otherwise.

Aspen is a three column liquid-width design that includes floats, fixed and absolute positioning, background positioning, styled lists, a base page and a form page, plus all the PNG files used to create the graphics for the pages. Both pages meet the specifications of XHTML 1.0 Transitional and CSS 2. Aspen also follows the accessibility guidelines for WAI and 508 to provide you with a solid foundation for any design you may wish to use it for.

In addition to the extensively commented XHTML and CSS files, Aspen comes bundled with the following tutorials:

The Theory of CSS Column Design: Source Order by John Gallant and Holly Bergevin
Clearing Floats, the Easy Way by John Gallant and Holly Bergevin
Creating Liquid Faux Columns by Zoe Gillenwater
Styling CSS Buttons (Part 2) by Stephanie Sullivan
Styling Forms: Fieldset and Legend by Stephanie Sullivan
Custom Gradients in Fireworks MX by Kim Cavanaugh
Understanding the Pen Tool by Kim Cavanaugh (video)
Using Masks in Fireworks MX by Jim Babbage
CMX Design-time Extension by Paul Boon

If you'd like a more detailed description of Aspen, including screenshots, check out the free article Announcing a New CMX JumpStart: Aspen.

Announcing CMX JumpStart: Aspen Free!
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.

Creating a Curled Photo
by Jim Babbage - 21-Dec-04
Reader Level:

This tutorial is a direct response to a question I found in the MM Newsgroup. Someone was asking how to create a curled or bent photo effect. This process is quite easy in PhotoShop, using a combination of the Shear Filter and the Transform Perspective feature. You can do something quite similar in Fireworks, even though it doesn't have a Live Effect or filter that is equivalent to PhotoShop's Shear Filter. In the following video tutorials, we'll make use of vector masks, the Skew tool and custom gradients to get a pretty striking (and fully editable) result.

Creating Gift Tags Using Freehand
by Kim Dudley - 14-Dec-04
Reader Level:

With the busy Christmas season upon us, this quick and easy Freehand 10 or 11 tutorial will help you with your Christmas preparations. At the end of this project you will have some decorative Christmas gift tags and a bunch of new Freehand skills. We will draw a graphic, import some others and work with text and colors to create graphic gift tags. Print out these, or use your imagination to create your own. Either way, these tags will add the finishing touch to all your Christmas gifts.

'Tis the Season for Christmas Cards
by Kim Dudley - 01-Dec-04
Reader Level:

With Christmas right around the corner, it is time to start hanging wreaths and mailing Christmas cards. This year why not add a personal touch to your Christmas cards by making your own? This tutorial will walk you through the steps of customizing a Christmas card in Freehand 11. Add a photo and personal message or create a whole new design using the card layouts. Either way your Christmas card will be sure to stand out and spread some Christmas cheer.

Let it Snow, Man! - Part 1
by Jim Babbage - 16-Nov-04
Reader Level:

Well there's a chill in the air. The leaves have fallen, the wind is brisker and sometimes, even in early November, there's that "scent of snow" in the air. In the lead-up to the holiday season, I have created a two-part series that uses both Fireworks and Dreamweaver. The end result will be a fun little "build your own" snowman web page. In Fireworks, we will create all the essential ingredients for our frozen friend. Then in Dreamweaver, we'll use the Drag Layer behavior to create a web page where we can move all the snowman pieces together and build our own snowman online. This is a great opportunity for our friends to the south who don't even get snow to have a little winter fun.

We will also make use of a different export option in FW: Export as CSS Layers. This is a little known—or little-used—feature in FW, and comes in quite handy for jump-starting our web page.

This concept could have many different uses: visual quizzing, jigsaw puzzles, or other holidays, just to name a few.

Freehand, It's Not Just For Print Anymore
by Kim Dudley - 15-Nov-04
Reader Level:

Freehand is a bit of an oddball amongst its Macromedia Studio siblings. Fireworks, Dreamweaver and Flash are built for web development; Freehand is built for print. Other than the Macromedia name, what do they have in common? The creation of web pages and artwork for print require two completely different sets of skills. Moving a project from print to web can be tedious. Freehand has recognized this and offers tools to simplify the conversion. By providing seamless integration with Flash and Fireworks, Freehand is making itself a useful tool in this web development family

CMX JumpStarts: Seattle
by Adrian Senior,Danilo Celic - 11-Nov-04
Reader Level:

Seattle is our second design in the CMX JumpStarts series. It is free to members of Community MX and available for purchase by non-members at the competitive price of $29.99. If you'd like a more detailed description of Seattle, including screenshots, check out "Announcing a New CMX JumpStart: Seattle"

Seattle provides a fixed-width two column layout with a right-hand navigation setup. Included are a home page, a pre-prepared form page and an inner page design. It has been designed to validate to XHTML 1.0 Transitional and CSS 2, and it also meets the requirements of 508 and WAI for accessibility.

All the source files that were used to create this design are available in the download. That is, the CSS files, the XHTML documents and even the PNG files. The CSS files and the XHTML pages are extensively commented to make editing Seattle a breeze. We are sure you will have a Whale of a good time adapting Seattle to meet your own requirements!

Seattle teaches you how to use nested lists to create a fully accessible navigation system. The download contains tutorials that will provide an in-depth analysis of all the techniques that have been used to create the design.

The following tutorials are bundled with the Seattle JumpStart:

Float: The Theory - by John Gallant & Holly Bergevin
CSS An Introduction - Part Six: The Basics of Positioning - by Adrian Senior
Do You Want To Do That With CSS? — Centering a Wrapper - by John Gallant & Holly Bergevin
Styling Forms: Fieldset and Legend - by Stephanie Sullivan
Semantic (X)HTML Markup: Styling Lists - by Zoe Gillenwater
CSS An Introduction - Part Three: The Descendant Selector - by Adrian Senior
How to Attack an Internet Explorer (Win) Display Bug - by John Gallant & Holly Bergevin
CMX Design-time Extension - by Paul Boon
Foto 1.0 for Fireworks MX Extension - by Steve Grosvenor

Seattle has been tested in various browsers. Click on the following link to view screenshots.

Announcing a New CMX JumpStart: Seattle Free!
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?

Color (Part of) My World
by Jim Babbage - 03-Nov-04
Reader Level:

I like color. I respond strongly to certain colors. I think that is one of the reasons I like autumn so much - lots of color, but a different kind of color from the spring. Sometimes isolating a particular color in a color photo can really make a image *pop*. In an earlier tutorial, I demonstrated different ways to hand color a photograph. Each process relied on turning a color image into a grayscale image first, then applying color with various painting tools. In this tutorial, we're going to "add" color by "subtracting" it from the image. It's easy and fun, and at no time will the Pen tool be used (Just to keep Laurie C happy!) Intrigued? Let's go!

CMX JumpStarts: Paris
by Adrian Senior,Danilo Celic - 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.

This article covers the following:

A list of what is included in the CMX JumpStarts: Paris 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
A page of screen shots that show the Paris layout in a variety of browsers on multiple platforms

Announcing CMX JumpStarts Free!
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

(Not so) Scary Ghosts 'n Goblins - Part 4
by Jim Babbage - 21-Oct-04
Reader Level:

Well folks, it's that time of year again! I'm happy to say I'm back to deliver another ohhhh-so-scary Halloween Fireworks tutorial. Last year, you got to see how to make ghosts, jack-o-lanterns and eerie monster eyes. This time around we'll start off with another traditional frightening favourite - a spider web and nasty spider!

To create our horrifying masterpiece, we'll be making use of the following techniques and tools in Fireworks:

Vector Shapes
Pen Tool
Stroke and Fill textures
Gradients
Automating steps using the History Panel and Symbols

Tutorial includes: PDF, final PNG files of Spider, web and the two combined, short video clip on using the pen tool to make curves.

The (Not So) Scary Ghosts 'n Goblins Series:
(Not So) Scary Ghosts 'n Goblins - Part 1
(Not So) Scary Ghosts 'n Goblins - Part 2
(Not So) Scary Ghosts 'n Goblins - Part 3
(Not So) Scary Ghosts 'n Goblins - Part 4
(Not So) Scary Ghosts 'n Goblins - Part 5
(Not so) Scary Ghosts 'n Goblins - Part 6
(Not so) Scary Ghosts 'n Goblins - Part 7

WebQuests for Teachers - Part 3 - Creating an Original WebQuest Free!
by Sheri German - 07-Oct-04
Reader Level:

In the first part of this series, we introduced the WebQuest and a bit of its history. We learned that this lesson in a Web page allows students to make safe use of Internet resources and discussed the six sections that make up a traditional WebQuest. In the second part of the series, we reconstructed the "Time Machine MTV" WebQuest from scratch. Now, in the third and final part of the series, we'll look at strategies for developing your WebQuest content, where to find images on the web, how to evaluate the web pages where information is found, common student errors to be aware of and finally, how to share your Web Quest on the information super highway.

The WebQuest Series:

Part 1: WebQuests for Teachers
Part 2: WebQuests for Teachers - Reconstructing
Part 3: WebQuests for Teachers - Creating an Original WebQuest

WebQuests for Teachers - Part 2 - Reconstructing Free!
by Sheri German - 27-Sep-04
Reader Level:

In the first part of this series, we introduced the WebQuest and a bit of its history. We learned that this lesson in a Web page allows students to make safe use of Internet resources. We also discussed the six sections that make up a traditional WebQuest, and how the WebQuest should be more than mere fact-finding. Finally, we looked at the completed version of the "Time Machine MTV" WebQuest that we're going to reconstruct from scratch. The moment to do that is now upon us, so let's get started.

The WebQuest Series:

Part 1: WebQuests for Teachers
Part 2: WebQuests for Teachers - Reconstructing
Part 3: WebQuests for Teachers - Creating an Original WebQuest

Creating an Animated Progress Meter in Fireworks
by Jim Babbage - 23-Sep-04
Reader Level:

I've seen a few requests out there, in various forums, on how to make an animated progress meter and thought it would be a nifty little tutorial for beginners in Fireworks. A progress bar can be used while a large image is downloading, indicating to the user that something is indeed happening and hopefully encouraging the user to wait for the download to be completed.

This type of animation is not tied to the real download process; it's just an animated GIF image. Using Layers in Dreamweaver, we can make that image visible until the real image downloads to the user's system. Then it will disappear. We're going to create a three different progress meters: one very simple example, and two using some of FW's handy animation effects. In one animation, we will tween the opacity of a glow. In the other we will create a motion animation.

Includes: Source files, two Camtasia/Flash videos, PDF version of article

Features of a Powerful Home Page
by Tricia Littlefield - 10-Sep-04
Reader Level:

Creating the right home page can be a daunting task. It is difficult to pack in that powerful punch in a limited space. Learn what is important on your home page to make a bigger impact on your customers, and improve your conversion rating.

Correcting Under Exposed Images in Fireworks
by Jim Babbage - 09-Sep-04
Reader Level:

On a bright sunny day, it's quite common to take a picture that is - overall - well exposed, but still has certain areas that are in shadow and display too dark. Now there is nothing wrong with shadows. They can add depth, contrast and visual interest to a photograph. But in some cases, the shadows are so strong, that they obscure detail, and make relatively large parts of the image hard to see.

In Fireworks, we're going to apply Curves to a custom bitmap selection. We'll use the Polygon Lasso tool to select just the areas we want to correct, save that selection for future use, and then apply the Curves Filter to brighten up the shadows. While I'll describe in detail the techniques for using these tools for this specific application, we have several other in-depth articles on using the Bitmap Tools and the Curves dialog box. You can see a listing at the end of this article. The article, Using Curves to Improve Tonal Range of an Image, is based on a similar premise, but uses copying and pasting a bitmap selection.

Ideally, you should have a basic idea of Fireworks or Bitmap editing in order to complete this project. If you have not used Fireworks before, I'd recommend reading some of our "Piece by Piece" articles first.

Includes: A sample source file is included for you to work on, and a list of related articles.

Search Engine Optimization Tips
by Tricia Littlefield - 27-Aug-04
Reader Level:

This article provides over a dozen useful tips to help you improve your web site's search engine rankings. Learn how META tags, URLs, ALT text, and properly structured documents can help search engines index your site, and those of your clients.

Correcting an Overexposed Image Using Blending Modes
by Jim Babbage - 26-Aug-04
Reader Level:

Anyone who takes photographs regularly (film or digital) can relate to this scenario: at some point in time, due to camera or human error, you will end up with an over exposed photo. Over exposed images appear very light in tone; the color saturation is very low, and the contrast also tends to be low. Highlight areas seem washed - or bleached - out, with very little detail visible. Shadow areas are not very shadowy; blacks appear middle to light grey, instead of the expected deep rich black. It happens to all of us. Sometimes we're just in a hurry to get the photo before the scene changes, and we pay little or no attention to exposure. Sometimes the camera's light meter gets fooled because the scene in front of it is very low key (lots of dark tones, few middle tones and almost no light tones). In any event, I am here to tell you that sometimes, your image isn't a total write-off. Fireworks can help save your over exposed image and make it suitable for show.

Vodafone For the Rest Of Us: How Did They Do It? - Part 2 Free!
by Tom Green - 18-Aug-04
Reader Level:

Just because you don't have the resources to pick up a copy of Flash Professional is no reason to be shut out of the web video game. Here's how to create the Vodafone Video Bracelet using Flash MX 2004.

Creating Different Types of Corners and Borders with Fireworks MX 2004
by Jim Babbage - 09-Aug-04
Reader Level:

There's been a lot of talk in CMX town lately - talk about corners. Not cutting corners, mind you; making corners. Specifically, making corners and the necessary borders to create flexible boxes in your web page. That flexible box might be in a table layout, or as we have seen recently, a CSS layout. Corners do not have to be rounded. And that, ladies and gents, is what this article is all about.

We're going to look at some of the cool features in Fireworks MX 04 that can help us make some far-out corners, and use other more traditional FW techniques to create the borders needed for flexible boxes.

We're going to use some of the Auto Shapes found in the Tool Bar and work with punching vector shapes. We'll also play around with some Live Effects to get some different results. When we're done, you will be able to use the resulting graphics in either a table-based or CSS-based layout.

So walk with me, faithful reader, as we check out some new angles on corners.

Interview with a Usability Engineer Free!
by Joel Martinez - 05-Aug-04
Reader Level:

Usability is one of those issues (much like security) that everyone says is so important, and how it needs to be a focus in their next project. Unfortunately, more often than not, it falls by the wayside to be replaced by aggressive deadlines, poor site/application designs, and angry users. Usability should be given more than a passing thought before, during, and after your project plan. With the proper plan, you can ensure that your end users will have a pleasant experience using your product.

I've had the pleasure of working with someone who's entire job is to do nothing but ensure that usability is at the forefront of a project. Her name is Lani Hathaway, and she is a usability engineer.

The Practice of CSS Column Design: Custom Corners and Sides
by John Gallant,Holly Bergevin - 30-Jul-04
Reader Level:

Previously in this series, we learned how to create nice clean columns and boxes containing our content. Unfortunately, it's hard to create a visually flowing design with rectangles everywhere. Sometimes you just want a little variety! Using CSS and background images, we'll now show you how to create some "rounded corners" on your columns, and avoid such a boxy fate, all without the use of tables!

Flash, DHTML Menus and Accessibility Free!
by Stephanie Sullivan - 28-Jul-04
Reader Level:

It's not uncommon to hear developers complaining that their DHTML menus, when triggered, have dropped behind the Flash movie below them. It's also not uncommon to hear, "that's just how they work." Before Flash Player 6, that was true in many browsers. But nowadays, it's become urban legend. With Flash Player 6, Macromedia introduced windowless mode for Netscape and Mac OS X (previously it was supported only for Windows). In the process, this also gave developers a way to completely hide Flash from older screen readers and the focus issues they can have with it. In fact, when Flash is purely used as eye candy, it's wise to remove it from the flow of the screen reader's page so that they don't have to listen to Flash without a purpose.

Compositional Elements of a Photograph
by Jim Babbage - 27-Jul-04
Reader Level:

Choices, choices and more choices! When making pictures, you're confronted with myriad decision-making situations. These situations are not obstacles though! They are opportunities. The choices you make will affect how well your vision is communicated to others. Good communication depends on good visual design. Knowing what your options are and how to best use them will go a long way toward improving your photographs.

As a web designer, you may be called on by your client to do many things other than just design their web site. Your client may rely on you to produce a logo, create original images or even take photos of their products, people or location. Sometimes, there just isn't the budget or the time to find, hire and schedule a photographer for a simple photo shoot. In fact, your own inherent design sense (if you are a designer) may already rank you higher in qualifications than the client.

This article will look at some of the basic principles of visual design as well as a few tips on composing your photos to begin with. As you will see, both of these subjects overlap and interrelate. My hope is that this article will arm you with a bit of knowledge, enabling you to improve your own personal photography, or give you the confidence to take on some photo requirements of your clients.

Many images are also included in the article to illustrate the different elements of design.

Practical Font Control With CSS
by Stephanie Sullivan - 15-Jul-04
Reader Level:

Do you find yourself using the same fonts over and over simply because you don't know what else to use? Are you afraid to deviate from the font norm since you're not sure the font you like will be available on everyone's computer? With a little time and exploration, this doesn't need to be the case. Some simple tricks will add a lot of class to your styles with only a little effort on your part. You can be free to use a larger variety of fonts if you understand the principles of the CSS font cascade and are armed with knowledge of a specific font's frequency.

Rotoscoped Buttons in Flash
by Tom Green - 08-Jul-04
Reader Level:

We sometimes tend to forget how we got here. Back in the early days of Flash, when video was a dream, we discovered how to use video without using video. Rotoscoping lets you create some rather interesting video effects.

The Theory of CSS Column Design: Semantic Construction
by John Gallant,Holly Bergevin - 02-Jul-04
Reader Level:

This second installment in The Theory of Column Design series looks at a highly effective way to structure the HTML, allowing "machine friendly" code while avoiding the Box Model Problem and related issues. This technique is becoming very common on the web, and for good reason. It's easy, powerful, accessible, and robust. You can't get much better than that!

Building Simple Buttons: Part 2
by Tom Green - 30-Jun-04
Reader Level:

Have you ever wondered how to build a really cool button? In this tutorial, I show you how to build a button using the features of Freehand, Fireworks and Flash. I also show you a couple of "integration" techniques guaranteed to speed up your workflow.

Resources for Extending Fireworks--Part 2--Extensions Free!
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.

Fireworks Slicing Technique #2--Slicing Page Compositions
by Kim Cavanaugh - 08-Jun-04
Reader Level:

In this second set of video tutorials on slicing in Fireworks, you'll take a look at a method for working with complex page compositions. Fireworks is a great program for creating design concepts, and with the appropriate and efficient use of slices you can take that design idea and turn it into a full-blown page in Dreamweaver while maintaining small file weights.

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.

Mother's Day with Fireworks Free!
by Jim Babbage - 05-May-04
Reader Level:

Mother's Day is fast approaching. Now, I don't know about you, but my Mom got bitten by the Internet bug a couple years ago. She's always online, chatting with friends or one of my siblings. So what better way to say, "Thanks, Mom!" than to send her a Mother's Day card made by l'il old me. This tutorial uses native Fireworks effects to create a warm and fuzzy Mother's Day card, that you could email or post on the web for the world to see. As it happens, my Mom is going to be out west on Mother's Day, visiting my brother and his family. So I think this card will be a perfect little way to say that I love her.

Trace Bitmap Tool In Flash
by Derrick Ypenburg - 05-May-04
Reader Level:

The Trace Bitmap tool in Flash has got to be the best bitmap-to-vector tracing tool out of all the software I've seen. In this tutorial, I will go over tracing bitmaps for abstract image manipulation, and for design and animation techniques.

Digital Photography Tips and Tricks Free!
by Jim Babbage - 21-Apr-04
Reader Level:

I've become a big fan of digital cameras over the past few years; they are quickly increasing in quality, and decreasing in price. But a digital camera - like a computer or software - is just a tool. It's what YOU do with the tool, that make the end result successful. To that end, this article gives you some helpful tips to improve your digital photography, and avoid some common errors

Creating a Banner Graphic
by Jim Babbage - 30-Mar-04
Reader Level:

Requested by one of our subscribers, this tutorial demonstrates - with video - how to create a banner or header graphic using only vectors and native Fireworks effects. We'll also discuss how to slice this image for creating a "stretchy" graphic for flexible web pages.

You Say You Want a Resolution? Free!
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.

Sailing the Wine Dark Sea - A Fireworks Masking Project
by Jim Babbage - 18-Mar-04
Reader Level:

Sailing, sailing over the bounding sea . . . Or in our case, inside a wine glass! Many of us have seen the "ship in a bottle" knick-knack. Well, I'm here to show you how to set a sailboat afloat in a wine glass, using Fireworks MX or MX 2004, vector AND bitmap masks. Heave ho, matey, and don't forget to buckle your swash!

Hidden Gems - Fireworks Fade Image Command Free!
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.

Creating a Copper Medallion in Fireworks
by Jim Babbage - 03-Mar-04
Reader Level:

The more I experiment with Fireworks, the more neat things I figure out. This tutorial is an example. It started with a post in a newsgroup where someone was looking for input on creating a metallic shield. I gave my two cents in a post and then thought, "Hey, this would make a cool tutorial." And so another creative project is born.

Exploring Web Developer Tools in Firefox
by Kim Cavanaugh - 03-Mar-04
Reader Level:

I finally got around to installing the latest edition of the open-source Gecko browser, Firefox, and installed the Web Developer's extension. I was hooked after about 30 minutes of using these fabulous new tools. If you're serious at all about testing your own creations, or learning by looking at what other people are doing, the Firefox browser allows you dissect web pages in some fascinating and more efficient ways.

Dreamweaver MX 2004 Piece by Piece -- Part 2: Flash Text and Flash Buttons
by Bill Horvath - 01-Mar-04
Reader Level:

So you've found the perfect font to use for your menu system. That's the good news. The bad news you already know: Unless the person who looks at your web page has that same font, they're going to see Times, Arial or Helvetica instead of the font you intended, and possibly your design will look much different than what you wanted. Flash Text and Flash Buttons to the rescue! Simple to use and easy to integrate into your web page, these two Dreamweaver tools will allow you to keep your design intact in a very simple manner.

Usability 101
by Robert Hoekman Jr - 26-Feb-04
Reader Level:

Usability problems still run rampant on the Internet, and now it's Robert Hoekman, Jr's turn to help you clean up. Part 1 of the series discusses five major usability concerns and what you can do about them.

Hidden Gems: Format Table Command in Dreamweaver Free!
by Jim Babbage - 25-Feb-04
Reader Level:

If you have a plain vanilla html table, and are looking for a way to quickly spruce it up, the Format Table Command could be just what you're looking for. This neat little feature is built right into Dreamweaver 4, MX and MX 04 and makes table formatting a snap.

Sound Playback in Flash MX 2004 Free!
by Tom Green - 24-Feb-04
Reader Level:

In this tutorial, I show you two really simple, yet effective, methods of managing sound playback in a Flash MX 2004 movie. It is dead simple. Really.

From Design to Completion: Case Study One
by Stephanie Sullivan - 20-Feb-04
Reader Level:

I'll take you through a very real-world example of how a page composition can be transferred from a client-approved Fireworks concept to CSS-P reality. You'll see how the essential elements of the original design are sliced and exported from Fireworks, how the initial page structure is analyzed and built, how to position your divs properly, and how to build your styling from the ground up.

Typography Part 4- Typographic Contrast
by Tom Green - 16-Feb-04
Reader Level:

The principals of typographic contrast were contained in a pamphlet created by the Canadian typographer, Carl Dair. These principals, which appeared over fifty years ago, were directed at the print graphics trade. They have as much resonance and meaning today as they did before the word "Internet" was invented.

Typography Part 3: It's All About Legibility
by Tom Green - 05-Feb-04
Reader Level:

In this, the third part of the series, I dive into the issues of just what makes type legible, and how words are read.

Understanding the Pen Tool
by Kim Cavanaugh - 02-Feb-04
Reader Level:

Ah, the Pen tool. This incredibly versatile drawing tool is also one of the most difficult tools to learn. Why don't things look the way I expect? How do I create anchor points that act the way I want? And what the heck is a Bezier curve anyway? All these questions and more are answered in the five video tutorials that you'll find here.

DW Templates - Part 4: Nested Templates
by Heidi Bautista - 02-Feb-04
Reader Level:

Dreamweaver nested templates give you fine-grained control over design and content. They allow you to further characterize the look and feel of your site while still retaining the flavor defined in the master template. Read on to learn more about this powerful feature.

The Dreamweaver Template Series:
Dreamweaver Templates - an Introduction
DW Templates - Part 2: Repeating Regions and Repeating Tables
DW Templates - Part 3: Template Parameters and Expressions
DW Templates - Part 4: Nested Templates

Web Typography - Part 2
by Tom Green - 23-Jan-04
Reader Level:

In choosing type for a web page, more goes into the choice than a funky name. Such factors including the anatomical features of the type face, its size, x-height, line height and members of the "family" can have a profound effect upon the look of your page. Read more...

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...

Color Correction: Part 4
by Tom Green - 06-Jan-04
Reader Level:

In the last installment of this series, I review the power of the use of Histograms, Levels, and the setting of the White and Black points in an image.

Fun with Wingdings and Webdings Free!
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.

Color Correction: Part 3
by Tom Green - 30-Dec-03
Reader Level:

This is the third installment in this series. It reviews adjusting brightness and Contrast and applying Unsharp masking to an image. The article ends with an in depth explanation of the more important concepts reviewed in this series.

Creating a Christmas Tree with Fireworks Free!
by Jim Babbage - 25-Dec-03
Reader Level:

"On the first day of Christmas . . ." Well, I don't know about you, but before the first day of Christmas, I want my tree up! In case you're short on space in your home, I've come up with a quick and easy Christmas tree that you can build and set up right inside Fireworks. No need to water it, and it comes down in a snap!

DW Templates - Part 3: Template Parameters and Expressions
by Heidi Bautista - 18-Dec-03
Reader Level:

Add a touch of dynamicism to your templates with parameters and expressions. This is about as close as you can get to dynamic without actually backing it up with server-side code.

The Dreamweaver Template Series:
Dreamweaver Templates - an Introduction
DW Templates - Part 2: Repeating Regions and Repeating Tables
DW Templates - Part 3: Template Parameters and Expressions
DW Templates - Part 4: Nested Templates

Making Snowflakes in Fireworks Free!
by Jim Babbage - 08-Dec-03
Reader Level:

Ever made snowflakes using a piece of paper and a pair of scissors? It's amazing what one can do simply by folding a sheet of paper and cutting some shapes into it. It's even more amazing that you can do the same kind of thing in Fireworks! Just in time for the holidays, here's your chance to create your own custom snowflakes, without the worry of getting a papercut or running with scissors!

Color Correction- Part 2
by Tom Green - 04-Dec-03
Reader Level:

In this article we take the next step in the color correction process and adjust an image's midtones, and identify and remove a colour cast.

How to Make Photo Corners using CMX Black Line Masters
by Jim Babbage - 24-Nov-03
Reader Level:

In this tutorial, we're going to create some classic "photo corners". You might remember these from old family photo albums, where the photos were affixed to the pages by using small adhesive "corners".

Correcting Perspective in a Photograph
by Jim Babbage - 14-Nov-03
Reader Level:

Correcting perspective in a photograph is a snap using Fireworks. This tutorial shows you two ways to *straighten things out" by using different Transformation tools and Guides.

DW Templates - Part 2: Repeating Regions and Repeating Tables
by Heidi Bautista - 12-Nov-03
Reader Level:

Get the most out of your Dreamweaver templates - learn how to add and customize repeating tables and regions.

The Dreamweaver Template Series:
Dreamweaver Templates - an Introduction
DW Templates - Part 2: Repeating Regions and Repeating Tables
DW Templates - Part 3: Template Parameters and Expressions
DW Templates - Part 4: Nested Templates

(Not so) Scary Ghosts 'n Goblins - Part 3
by Jim Babbage - 29-Oct-03
Reader Level:

Well, boys and ghouls, if you've been following along, we have created a spooky ghost and eerie jack-o-lantern in our past two tutorials. This one focuses on some scary eyes, to frighten the be-jeebers out of you and your friends.

The (Not So) Scary Ghosts 'n Goblins Series:
(Not So) Scary Ghosts 'n Goblins - Part 1
(Not So) Scary Ghosts 'n Goblins - Part 2
(Not So) Scary Ghosts 'n Goblins - Part 3
(Not So) Scary Ghosts 'n Goblins - Part 4
(Not So) Scary Ghosts 'n Goblins - Part 5
(Not so) Scary Ghosts 'n Goblins - Part 6
(Not so) Scary Ghosts 'n Goblins - Part 7

Creating a Realistic Wax Seal using Fireworks and CMX Black Line Art
by Jim Babbage - 08-Oct-03
Reader Level:

Combine a variety of Fireworks techniques and CMX's new Black Line Masters, to create a very realistic looking envelope and wax seal from the olden days.

Dreamweaver Templates - an Introduction
by Heidi Bautista - 03-Oct-03
Reader Level:

Learn about one of Dreamweaver's most powerful and overlooked features - templates. This is the first in a series of articles that starts with template basics. You'll learn how to create and use templates and how templates can help you get your job done faster and more easily.

The Dreamweaver Template Series:
Dreamweaver Templates - an Introduction
DW Templates - Part 2: Repeating Regions and Repeating Tables
DW Templates - Part 3: Template Parameters and Expressions
DW Templates - Part 4: Nested Templates

Using Curves to Improve Tonal Range of an Image
by Jim Babbage - 02-Oct-03
Reader Level:

Sometimes part of an image is just too dark (or too light). You don't want to apply any global changes, as that will impact the entire image. This tutorial shows you how to correct a selected part of an image, and still maintain editability through the use of Live Effects.

Seamless Blending of Two Images in Fireworks
by Jim Babbage - 29-Sep-03
Reader Level:

Take two images of the same scene, one exposed for the light areas and one exposed for the dark areas, and merge them together using a mask, to create a perfectly "exposed" image. This is a great technique on "fixing" an image. Along the way, you'll also work with the Smudge, Rubber Stamp and Eraser tools.

Creating an Effective Motion Blur in Fireworks MX 2004
by Jim Babbage - 19-Sep-03
Reader Level:

The new Motion Blur effect can be very handy to enhance the sense of movement, but there are some tricks to using it well.

Using the Tabs Auto Shape in Fireworks MX 2004
by Jim Babbage - 29-Aug-03
Reader Level:

The purpose of this particular Auto Shape is to allow the quick creation of a tabbed navigation bar, complete with color, shading, highlighting and depth. This tutorial will show you:

How to quickly create a Tab Auto Shape.
How to customize the color, shape, size and number of tabs.
How to create Rollover effects.
How to use the Tab Auto Shape as a button symbol.

Skinning QuickTime
by Matthew David - 04-Aug-03
Reader Level:

QuickTime movies are more than just video. The QuickTime movie player can also be changed to enhance the message being delivered through the movie. In this article you will learn how to "skin" the QuickTime player.

Creating multiple link styles
by Kim Cavanaugh - 29-Jul-03
Reader Level:

A common question that arises for new users of Dreamweaver relates to the use of multiple link styles in a single page. You've seen them on other sites, so they must be possible, right? The trick is simply knowing a little about using Cascading Style Sheets to control your links, and how the styles are applied in Dreamweaver.

Removing Red Eye from Photos
by Jim Babbage - 24-Jul-03
Reader Level:

Some of the more wizard-driven imaging programs actually have automatic processes for removing red eye. Sadly, FW is not one of them. The goal of this tutorial is to show you one way to remove red eye from a photo, and even add a couple custom commands to speed you on your way.

UPDATE: At the time this tutorial was written, there was no red-eye removal tool available within Fireworks. With the release of Fireworks MX 2004, users now have a red-eye tool at their disposal. Watch for an upcoming tutorial at CMX on using this new feature.

Creating a Batch Process for Adjusting the Brightness of an Image
by Jim Babbage - 18-Jul-03
Reader Level:

Add even more power to your digital imaging arsenal of skills. Knowing how to do things such as a batch process can save you a lot of time if you have many images that need similar manipulation. This tutorial will take you step by step through the creation of a custom command to brighten dark images, and through the Batch Process feature of Fireworks MX.

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.

Create A Spinning Graphic With Text
by Jim Babbage - 07-Jul-03
Reader Level:

In part two, we look at how to add some text to this spinning graphic, and the tricks used to maintain the illusion of 3-D rotation.

Creating a spinning graphic Free!
by Jim Babbage - 04-Jul-03
Reader Level:

Rotating animations are pretty simple to create in Fireworks, but what if you want you animation to spin, in a 3-D manner? In Part One of this tutorial I will show you how to create the "appearance" of a 3-D spin of an image, by using Symbols and Instances, and some manual tweaking of the Frames Panel.

Create an Illustration Effect Using a Photograph
by Jim Babbage - 24-Jun-03
Reader Level:

If you have problems drawing your way out of a paper bag (like this author), this tutorial may be just what you need! Follow along as we take an original photograph, and turn it into a fairytale wonderland - all thanks to Fireworks' vector tools.

Using a ColdFusion Custom Tag as a Site Template Part 1
by Tom Muck - 20-Jun-03
Reader Level:

ColdFusion developers have had Custom Tags in their arsenal of tricks since the early days of ColdFusion. With CFMX, the tag has made it even easier to use custom tags on your pages. With the introduction of ColdFusion Components (CFC) in CFMX, the custom tag has taken a back seat to the versitility of CFCs, but some things are ideally suited to the ColdFusion Custom Tag API. This article will address one use of a ColdFusion custom tag: building a flexible template for your site that will feed every page on the site.

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.

Creating Composite Masks in Fireworks Free!
by Kim Cavanaugh - 16-Jun-03
Reader Level:

A composite mask is loosely defined as a combination of a masked object with another image within a document. That's a pretty dry definition for a technique that can allow you to create some fabulous effects with your photos. By understanding a few basic principles, and using the power of Fireworks Live effects, you can generate beautiful photographic effects in a fraction of the time that it might take you to use complicated filters in other programs.

Creating a flowchart diagram in Fireworks MX
by Jim Babbage - 05-Jun-03
Reader Level:

There are lots of software packages out there that will build flowcharts, but hey - if you have Fireworks, YOU don't need to buy ANY of them. This tutorial shows you how to build a flowchart from scratch in Fireworks, and offers some time-saving tips in the process. A completed PNG flowchart is also included in the source files.

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.

Styling CSS Buttons (Part 1)
by Stephanie Sullivan - 23-May-03
Reader Level:

So you think you're ready to hop on the CSS styling bandwagon? Many people are finding that decreased page load time and quick site wide changes are attractive draws to making the leap. And rightly so. In this tutorial I'll cover three different ways to style simple CSS buttons.

What is This Thing Called PNG? Free!
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.

Customizing the Site Window in Dreamweaver Free!
by Kim Cavanaugh - 15-May-03
Reader Level:

Sometimes you need more information at your fingertips than Dreamweaver provides on its own in the Site window. This tutorial shows how to customize the look of the Site columns in the Site window to meet your own needs and the needs of a particular site.

Creating GIF Animations in Fireworks
by Jim Babbage - 13-May-03
Reader Level:

Flash is a great animation tool, but you can do some pretty cool stuff in Fireworks, and export out as a GIF animation. This tutorial introduces you to making GIF animations in Fireworks MX, then takes you through the steps of creating a not-so-basic animation.

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.

Create Transparent Editable Text, with a Funky Edge
by Jim Babbage - 07-May-03
Reader Level:

You've probably seen a few tutorials that tell you how to make the central part of your text see- through, but it usually involves converting your text to a Bitmap. Well, this is Fireworks Baby, and I want my editability all the time! Follow along and see what a ball you can have when you stroke text the right way.

Creating Fluid Pages (Part Two)
by Stephanie Sullivan - 30-Apr-03
Reader Level:

You want your pages to look good at any resolution. You want to stay accessible to the largest crowd. But CSS positioning is scary isn't it? Is it? Take a look at this table-free tutorial. We'll explore both a static-width, centered approach and a more fluid, stretchy design. And the cool thing is -- both use the same html page. The difference is all in the stylin'. (Pssst... go ahead... click the "more" button.)

Using Masks in Fireworks MX
by Jim Babbage - 28-Apr-03
Reader Level:

Don't crop it! Mask it! Masking is a non-destructive way to hide or show parts of an image. With Fireworks, you have some pretty powerful masking tools at your disposal, and this tutorial will show you how to use them.

Fireworks MX - The Basics - Part 2
by Jim Babbage - 24-Apr-03
Reader Level:

Dig deeper into the Fireworks interface, and explore some more advanced techniques such as masking and slicing.

The Physics of Vector Graphics--Part II
by Kim Cavanaugh - 22-Apr-03
Reader Level:

The three primary drawing tools from Macromedia all depend on vector graphics to work their magic. Whether you are animating in Flash, drawing in Fireworks, or illustrating in Freehand, the common thread between all three is their use of vectors. In the second part of this series you'll examine the relationship between anchor points and the line segments that are created when points are connected, and see how line segments are modified in Freehand, Fireworks, and Flash.

Fireworks MX - Understanding the Basics
by Jim Babbage - 21-Apr-03
Reader Level:

Fireworks MX is a great tool for creating and optimizing images for web and other on-screen uses like Flash MX or even PowerPoint! Learn the ropes with this introductory tutorial.

The Fireworks MX Button Editor
by Jim Babbage - 18-Apr-03
Reader Level:

The Button Editor has come of age! Earlier versions of Fireworks were just as likely to turn you off using this nifty feature, but MM got it right in FWMX. The Button Editor is a great productivity tool, and has some new features to it that make it even more flexible to use.

Clean Cross-Browser Table Borders
by Bill Horvath - 18-Apr-03
Reader Level:

Creating nice, clean table borders that display consistently in all browsers should be easy... Actually, it is!

Creating Rounded Cornered Boxes
by Stephanie Sullivan - 17-Apr-03
Reader Level:

Don't be square! Whether you want to use rounded corners for a fixed size box or round a stretchy rectangle that can adjust to any size, we'll show you two simple methods of rounding the corners of your tables.

Creating a clickable wireframe navigation for site testing
by Jim Babbage - 15-Apr-03
Reader Level:

Proving your navigational structure before you dig deep into the graphical design of your site is very important. Creating a clickable wireframe can help point out problem areas in navigation, or may prompt you - or the client - about a missing hyperlink. A little up front work can save you tons of time at the production stage.

The Elements of Vector Graphics
by Kim Cavanaugh - 14-Apr-03
Reader Level:

Vector graphics are at the heart of the three primary drawing tools in the MX suite. Freehand, Flash, and Fireworks all depend on vectors for drawings that range from the simple to the astoundingly complex. No matter how they are created though, all vector drawings share a common structure that is explored in this multi-part series.

Retouching Images in Fireworks MX
by Jim Babbage - 11-Apr-03
Reader Level:

Fireworks has some pretty impressive bitmap edting tools They come in very handy when you have to fix up a tired, nasty digital image received from the client. This tutorial will show you how to use only Fireworks MX to do the repair work.

Hand Coloring and Tinting a Photo in Fireworks MX
by Jim Babbage - 07-Apr-03
Reader Level:

Harken back to the days of olde when a photographer used FILM and made enlargements in a DARKROOM. This tutorial will show you step by step, how to recreate some of the coloring and tinting techniques that have been used for years on traditional black and white photographs.

Creating Fluid Pages (Part One)
by Stephanie Sullivan - 31-Mar-03
Reader Level:

Learn simple methods, using tables, to keep your design looking good at any monitor resolution.

Creating Custom Command in FireworksMX Free!
by Kim Cavanaugh - 30-Mar-03
Reader Level:

Learn to use Fireworks MX to create a custom command to produce thumbnail images. Combine the command with the batch processing power of Fireworks MX to take your productivity to the next level!

Round Trip Editing in Fireworks and Dreamweaver
by Jim Babbage - 30-Mar-03
Reader Level:

Work smarter, not harder! Tight integration between Dreamweaver and Fireworks can make you work go even faster and improve your productivity! Check out this tutorial and start taking advantage of Roundtrip Editing.

Creating perspective shadows in Fireworks MX
by Jim Babbage - 29-Mar-03
Reader Level:

There was a time, in ancient imaging history (ummm 6 years ago or so), when creating a simple Drop Shadow was a multi-step process of selections, layers, fills and Gaussian blurring. Now, it's as easy as clicking a button! In a lot of cases though, what you really need is a shadow that more closely mimics the shape of the object itself. One that seems to have been created by the sun or some other key light source. In photography, shadows add depth, texture and dimension to an image.

Latest New Content

Search CMX

Latest Free Content

View All
Free Content

Accessibility

CMX Learning Guides

Design

What's Included?

What's Included?

Member's Sign In

Current Articles
and Tutorials

Most Recent JumpStarts

CMX Suite

RSS Feed

Latest New Content

Search CMX

Latest Free Content

View All Free Content

Accessibility

CMX Learning Guides

Design

What's Included?

What's Included?

Member's Sign In

Current Articles and Tutorials

Most Recent JumpStarts

Newsletter

CMX Suite

RSS Feed

View All
Free Content

Current Articles
and Tutorials