Design
CMX Design Element - Sulphur
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
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
CMX JumpStart: Nairobi-Flexible
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.
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 Design Element - Xenon
Reader Level:
Hello, and welcome to the sixth CMX Design Element. It has been a while since we last released one of these, so we hope that this one comes as a bit of a treat.
This Design Element's code name is Xenon (that's the Xenon with a Zzee).
While our previous Design Elements have been loose designs with no particular theme, Xenon is a design that is focused towards (but not in any way limited to) financial themed sites.
It's designed along the same lines as many modern websites that contain much of the extended page content in an oversized footer section.
It looks like this:
Image 1: CMX Design Element - Xenon.
What's Included?
Reader Level:
Hello, and welcome to the sixth CMX Design Element. It has been a while since we last released one of these, so we hope that this one comes as a bit of a treat.
This Design Element's code name is Xenon (that's the Xenon with a Zzee).
While our previous Design Elements have been loose designs with no particular theme, Xenon is a design that is focused towards (but not in any way limited to) financial themed sites.
It's designed along the same lines as many modern websites that contain much of the extended page content in an oversized footer section.
It looks like this:
Image 1: CMX Design Element - Xenon.
What's Included?
- The Xenon PNG file
- Custom web icons drawn in Fireworks that will compliment the Xenon design perfectly
- A STL file that will allow you to re-apply all the Fireworks Styles used in Xenon's design via the Styles Panel
- Bullets and buttons specially designed to be used with Xenon
- Full support via our forums
You also receive 6 bundled articles that explore the concepts and techniques used in the development of CMX Design Element - Xenon in detail:
- Cool Pie Charts by Gordon Mackay
- Best Practices Work Flow in Fireworks CS3 by Jim Babbage
- Fireworks Layers - Best Practices by Jim Babbage
- Designing with Gradients and Glows by Adrian Senior
- Reflections on a Theme in Fireworks by Kim Cavanaugh
- Creating Web Icons: Part 1 by Gordon Mackay
Our aim with the CMX Design Elements series is to provide you with an educational, as well as productivity enhancing, tool to reuse as often as you need.
Approximate download size: 28MB
The CMX Design Elements
CMX Design Elements - Krypton
CMX Design Elements - Carbon
CMX Design Elements - Gold
CMX Design Elements - Mercury
CMX Design Elements - Iodine
CMX Design Elements - Xenon
Flowing Text Around an Object in Fireworks by Using Freehand and Fireworks
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.
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.
Creating a Printable Photo Poster - A Fireworks Project
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.
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
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.
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
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
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
Working with Overlapping Slices in Fireworks 8
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.
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.
CMX JumpStart: Metropolis
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
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
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.
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
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.
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.
From Concept to Cross-Media Compatibility: Part Six - Completing the Screen Media Type Layout
Reader Level:
In Part 6 of this series you will complete the screen media type layout and discover what is meant by elements being in and out of the document flow. You will also learn about clearing floats and using techniques that allow you to see your design evolve as you work.
The Concept to Cross-Media Compatibility Series:
From Concept to Cross-Media Compatibility: Part One - Building the Header
From Concept to Cross-Media Compatibility: Part Two - Building the Content Area
From Concept to Cross-Media Compatibility: Part Three - Buidling the Footer and Exporting the Slices
From Concept to Cross-Media Compatibility: Part Four - Site Structure and Image Preparation
From Concept to Cross-Media Compatibility: Part Five - Building the Screen Media Type Layout
From Concept to Cross-Media Compatibility: Part Six - Completing the Screen Media Type Layout
From Concept to Cross-Media Compatibility: Part Seven - Building the Print Media Type Layout
From Concept to Cross-Media Compatibility: Part Eight - Building the Handheld Media Type
Reader Level:
In Part 6 of this series you will complete the screen media type layout and discover what is meant by elements being in and out of the document flow. You will also learn about clearing floats and using techniques that allow you to see your design evolve as you work.
The Concept to Cross-Media Compatibility Series:
From Concept to Cross-Media Compatibility: Part One - Building the Header
From Concept to Cross-Media Compatibility: Part Two - Building the Content Area
From Concept to Cross-Media Compatibility: Part Three - Buidling the Footer and Exporting the Slices
From Concept to Cross-Media Compatibility: Part Four - Site Structure and Image Preparation
From Concept to Cross-Media Compatibility: Part Five - Building the Screen Media Type Layout
From Concept to Cross-Media Compatibility: Part Six - Completing the Screen Media Type Layout
From Concept to Cross-Media Compatibility: Part Seven - Building the Print Media Type Layout
From Concept to Cross-Media Compatibility: Part Eight - Building the Handheld Media Type
Creating a Digital Photo Matte in Fireworks
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.
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.
Cool Pie Charts
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. :)
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
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.
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
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.
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.
CMX JumpStarts: Greenville
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.
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.
Fireworks to Photoshop - Converting the CMX Venice JumpStart PNG to a PSD File
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:
Reader Level:
I will do my level best not to bore you with why I like Fireworks in this, the third in my series of CMX JumpStart PNG's conversion articles. But I have to say, for rapid prototyping and flexibility, Fireworks can't be beat. By using Frames, you can create completely separate designs and where there are common elements in each design, you can share specific layers throughout the frames. This is just the case with the Venice JumpStart which has two complete layout designs, each on its own frame.
That said, PhotoShop is no slouch in this area either. While there is no way to directly port over this multi-frame document to Photoshop, by using Layer Comps we can emulate the PNG file quite nicely.
For detailed information and steps on converting flattened vector objects into editable Shape Layers be sure to read Fireworks to Photoshop - Rebuilding the CMX Vienna JumpStart PNG as a PSD file.
For details on creating and working with Smart Objects, or working with an exported Adobe Illustrator file see Converting the CMX Orlando JumpStart PNG to a PSD and AI file.
Because these steps have already been covered, I will not be covering them again in this article in any great detail. The focus in this piece will be exporting the two-frame PNG file as individual PSD files. We will then merge those two files in to one and use Layer Comps to emulate the original two-frame design.
Several other workflow techniques will be discussed as well:
- PNG layer hierarchy to PSD layer hierarchy
- Creating Layer Comps
- Creating new, editable layer masks
- Creating and working with Work Paths
- Working with Slices
- Working with the Gradient Editor
The instructions in this article, along with the two previously mentioned articles, are meant as a guide if you choose to do the conversion on your own. Remember, as with all the articles in this series, a final, editable PSD file is part of the support documents download.
Approximate download size: 1.8MB
Fireworks to Photoshop - Rebuilding the CMX Orlando JumpStart as a PSD (and AI) File
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.
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
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.
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
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
Batch Processing in Fireworks 8
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:
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.
Create a Polaroid Photograph in Fireworks
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
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
Creating Web Icons: Part 3
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
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
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
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
CMX JumpStart San Francisco for Students (and Anyone)
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
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
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:
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:
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
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
Blends and Masks - A Fireworks Project: Part 1
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:
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
Loaders Demystified - Part 3: Getting Creative with Progress Indicators
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
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
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:
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
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
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
Creating Web Icons: Part 1
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
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
Building a Video Scrub Bar
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
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
Introducing CMX Design Elements
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.
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.
Retouching Tools in Photoshop CS2 - Part 1
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
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
Changing Continents and Layouts - Modifying the Paris Jumpstart to Make Playacar, Mexico
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:
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
Teaming up Fireworks and Flash 8 to Create a Custom Video Player
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
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
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
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
Batch Processing Images to a Custom File Size
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.
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.
Creating Realistic Water Droplets on a Photograph
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:
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
Creating Edge/Border Effects in Fireworks
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:
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.
CMX JumpStarts: Inverness
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:
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.
Making Antique-Style Glass Ornaments in Fireworks
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.
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.
(Not So) Scary Ghosts 'n Goblins - Part 6
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
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
(Not So) Scary Ghosts 'n Goblins - Part 5
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
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
Making Complex Selections Using Bitmap Masks
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.
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.
Text Effects: Part 3 - 3D Innies and Outies
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
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
Creating the Print Style Sheet for Vienna: Part One
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.
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
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.
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.
Rollovers: Fireworks vs. Dreamweaver
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.
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.
About Background Images
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.
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.
Love is in the Air - Do-It-Yourself Wedding Invitations Using FreeHand
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.
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
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.
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.
Creating a Custom Look for the CMX Slideshow Extension Using Fireworks
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.
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.
Creating a Lightbulb in FreehandMX
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.
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.
A Bright Idea - Creating a Lightbulb in Fireworks MX 2004
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.
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.
Photographic Effects with Fireworks: Part 2 - Multiple Exposures
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
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
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:
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
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
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
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.
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.
How to Punch a Vector Shape Through a Bitmap
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.
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.
Photographic Effects with Fireworks: Part 1- Mimicking The Orton Effect
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
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
A Printing Checklist For Problem-Free Print Jobs
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.
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 Hotspot Rollovers
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?
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?
New Year, New Style
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.
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.
Creating a Curled Photo
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.
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
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.
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
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.
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
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.
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.
(Not so) Scary Ghosts 'n Goblins - Part 4
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
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
Creating an Animated Progress Meter in Fireworks
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
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
Correcting Under Exposed Images in Fireworks
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.
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.
Correcting an Overexposed Image Using Blending Modes
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.
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
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.
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
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.
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.
Trace Bitmap Tool In Flash
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.
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.
Creating a Banner Graphic
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.
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?
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.
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.
Creating a Copper Medallion in Fireworks
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.
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.
From Design to Completion: Case Study One
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.
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.
Color Correction: Part 3
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.
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.
Color Correction- Part 2
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.
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.
Correcting Perspective in a Photograph
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.
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.
(Not so) Scary Ghosts 'n Goblins - Part 3
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
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
(Not so) Scary Ghosts 'n Goblins - Part 2
Reader Level:
The second of five in our haunting series, this tutorial shows you how to create your own Jack-O-Lantern in Fireworks, without getting a single pumpkin seed on your kitchen floor.
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
Reader Level:
The second of five in our haunting series, this tutorial shows you how to create your own Jack-O-Lantern in Fireworks, without getting a single pumpkin seed on your kitchen floor.
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
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.
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.
Using Curves to Improve Tonal Range of an Image
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.
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
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.
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 multiple link styles
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.
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
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.
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
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.
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.
Create an Illustration Effect Using a Photograph
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.
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.
Positioning text when attached to a path
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.
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
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.
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 GIF Animations in Fireworks
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.
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.
Create Transparent Editable Text, with a Funky Edge
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.
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.
Using Masks in Fireworks MX
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.
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.
Creating a clickable wireframe navigation for site testing
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.
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.
Retouching Images in Fireworks MX
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.
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.
Round Trip Editing in Fireworks and Dreamweaver
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.
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
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.
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.
Searching CMX
Get familiar with the CMX search facility & learn how to find the tutorials you need easily & quickly.
Latest Free Content
-
Create a Stone Effect for Text -
Smart Objects for Photographers: Part 1 - Neon Text Effects
- Inked Stone
-
The TwentyEleven WordPress Series: Introduction
View All Free Content
Advertise with CommunityMX
Copyright © 2010 - CommunityMX - All rights reserved. Conforms to W3C Standard XHTML & CSS