Viewers: in countries Watching now:
In Fireworks CS5 Essential Training, author Jim Babbage gives a detailed overview of Fireworks CS5, Adobe's software for creating and optimizing web graphics and interactive prototypes. This course includes a detailed tour of the interface, the enhanced PNG format, and the image editing toolset in Fireworks. Critical concepts, such as prototyping for HTML applications and working with symbols, the heart of an efficient workflow in Fireworks, are covered in detail. Exercise files are included with this course.
A really cool technique that uses some of the Bitmap Painting tools is something called Hand Coloring. Now this is a technique that was a traditional photographic technique where photographers would use dyes to paint on black-and-white images, and create accent color throughout different parts of the photograph. This technique has been adapted at the digital world. The great thing about doing this in Fireworks is we can do it without damaging the original image at all. Now before we get into actually doing the work, let me just show you where we are going to end up. Over in my Layers panel, I have got a Start layer and a Finished layer.
I am going to hide my Start layer. There is our finished version, a really soft edge colorization around the petals in the sunflower, a little bit of sketch work with the pencil, and a black-and-white image overall. So we have drawn a bit of focus, or a bit of attention, just to one specific area in the image. I am going to show you how to do this. So let's get started. Okay! I'm just going to lock down my Finished layer, so I don't accidentally select it, and I am going to hide it from view, and I'll bring back my original image.
Now first thing we want to do is turn this into a black-and-white image. There's a great little command for this. First of all, let's select our image, go to Commands > Creative > Convert to Grayscale, an instant colorization change right there. Now, this is not a permanent effect. If you look down in the Properties panel, you'll see that a Live Filter has been added that is controlling the colorization of the image. Let's just take a look at the information here. I am going to click on the Eye icon. And you'll see what happened is the Saturation has been totally reduced to 0.
So we end up with a color image that apparently has no color to it. So I am going to click OK. The great thing about Live Filters is they are not destructive filters. I can turn this off. I can turn it back on. I can even delete it, and I am not going to affect the original image in any way. All right! Now I am going to go over to my Layers panel and expand my Start layer, and we are going to get into the coloring. Now again, we want to keep this as editable as possible, as nondestructive as possible. The thing you've got to remember about the Bitmap Painting tools is that they are destructive tools.
They actually apply pixels. They change pixel values. So if we were to paint right on top of our photograph, we are going to be permanently changing the pixel values in the photo. So rather than do that, we are going to use another common technique, where we are adding in an additional layer or object to apply our colorization to. Now in Fireworks we have this icon here right beside the Trashcan called New Bitmap Image. That allows me to create a completely transparent bitmap element. So totally see through at the moment.
This is where we are going to be applying our paint. So I am going to go over to my Brush tool, and first thing I want to do is select a color in the Properties panel. So I am going to go with a nice bright yellow. I also want to work with a decent sized brush, so I have selected about a 16-pixel brush. I want to have a nice soft edge, so I have set the value for my Edge Softness to 100. I think I'm also going to change the category of my Brush. So I am just going to go into my Brush Categories here.
I think I am going to work with a nice, soft, textured Charcoal. Now, one other point I'll mention here, as well, is notice the Transparency or the Opacity of my Brush. It's set to about 40%. This is kind of like applying stain rather than paint. We are going to still be able to see detail through the paint. So once we've got those things set up, we'll just go up to our image, and I think I'll zoom in just a little bit, so I can see things a bit better, hold down the Spacebar so I can reposition my image.
And there is my Brush, and I'll just start painting. I am seeing a nice kind of textured charcoaled edge, thanks to that Brush category. What I am going to try to do here is not let go with the mouse while I am doing this first set of painting. Thing you have to watch for, if you're doing this kind of technique, if you let go with the mouse and start painting again and you overlap an area you have already painted, you are going to add twice as much color to that area. So we want to try to avoid that. What I am not worried about is whether I color in areas that I actually don't want colored.
I can fix that up later on with one of the other Bitmap tools. So there's our starting point. Now, I am going to finish coloring up the petals in this, but we are going to ask the Editor to fast-forward you to the point where we have got all the petals colored in. Okay. Now that all the color has been added to the leaves, we are going to do a little bit of touchup work, and that's going to require the use of the Eraser tool. Now I am going to zoom in a little bit first. Again, just Ctrl+Plus or Command+Plus to zoom in. Use my Spacebar to access my Scrolling tool and just zoom in on my Artwork here.
I do use the term artwork rather loosely. Now we've got a few spots here where I have basically gone outside the lines. And rather than try to be too accurate when I am doing the painting, I can come back and touch this us up later on with the Eraser tool. So I am going to select the Eraser from the Bitmap tools. I want to work with, again, a soft edged brush. I'm probably going to work with a small brush because these are fairly fine details. I am going to set a value of 4 here, and just start painting over the areas that I didn't want to be colored in the first place.
Because we're working on this separate Bitmap layer, I am not actually erasing any pixels on the photograph. I am just erasing pixels from that little bitmap object. There we go. And maybe one more, like so, okay. So we've got some of those fellows touched up quite nicely. Our next step is to add in a bit more of a sketchiness to this by using the Pencil tool. The Pencil tool, like the Brush tool, it's a Bitmap tool.
It's permanently going to affect the Bitmap layer. So we want to make sure we are still on that Bitmap layer we are using for colorization. I am going to go and select my Pencil tool, and I am going to change my color. I don't really want it to be the same yellow. So I am going to work with more of a brown color I think for this, and something along that line. I want to make sure it's Anti-aliased, so we get a bit of a smoother Edge. Again, I want to work with the Opacity. I don't need to have a solid line. So we are going to work with a lower value here of about 30%.
I can also if I want to work with Blend modes and experiment with how the color interacts with the other colors that are in the page. But in our case, we are going to keep it simple. We are just going to work with a subtle Opacity and a nice, soft, Anti-aliased edge. Now, I am doing all this with a mouse, as I have probably said a few times. So this can be a little challenging, but bear with me, and keep in mind that you have lots of time to practice and do much better than I am about to do. So all I really want to do here is just add in some Stroke Edges to create kind of a sketchy feel to the overall artwork.
I don't want these things to be outrageously powerful. They are just there kind of to add a little bit of extra edge to things. If I am finding that it's still too subtle, I can always go ahead and increase my Opacity. I'll go up to about 40%. I'll play around with that, and that's a little bit better, I think. Yeah, it's a little more obvious but still kind of little bit translucent. Again, we will let the Editor take care of things as I just add in a few more lines to finish off the artwork. All right! Now, we are just going to zoom out a little bit to see our final finished piece here.
There it's at 100%. There we go. Between using three different Bitmap Painting tools: the Paint Brush, the Pencil tool and the Eraser tool, we have created a kind of a hand color technique here. With a little bit of practice and a bit more time, you can make this look very, very sophisticated. You can add color to different areas, maybe even consider applying some green to some of the spots on the plant itself. Have a bit of fun with it. Get comfortable with the tools, and you'll find a whole range of different things that you can do, just by getting used to working with them.
There are currently no FAQs about Fireworks CS5 Essential Training.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.