Join Ray Villalobos for an in-depth discussion in this video Applying opacity, blending modes, and Live Filters, part of Fireworks CS6 Essential Training.
- View Offline
When you select objects, the Properties panel shows to the right-hand side several options for adding special effects like Blending, Opacity, and live Filters. So let's experiment with some of those options. So I'm going to click on these series of windows right here. See that the first thing that we could do here is adjust the opacity of the object. So if I reduce the opacity down, that object becomes partially transparent and you can see more of the background. So if I move that around you could see that it's a little bit see-through. I'm going to undo, so I'll set that back up to 100%.
You can also change this area right here called Blending Modes, and there are a lot of options there as you can see. So that controls how an object reacts to another object behind it by using mathematical formulas. If you're familiar with Photoshop layer Modes, these are exactly the same thing. When you apply a Blending mode, you're applying a mathematical formula that decides how pixels on an element will affect those pixels underneath that element, so different things about a pixel color will affect the color behind it. And you could see that there are a lot of different ones that you could use here.
They're really best experienced than explained. But, for example, if you use the Multiply mode the color in the foreground will multiply against the color of the background, which means that the resulting colors are going to be darker. Screen, on the other hand-- so, let's look for Screen. It multiplies the inverse of the object color by the color underneath, which results in a bleaching kind of effect. I could describe all the mathematical functions, but there are so many of them, they really most of the time they just kind of experiment with them. After a while you kind of get used to what each one of them does, so you just try out the different options.
Some of the things like Opacity and the Color of the objects affects how these pixels blend with each other, so in addition to just trying out different modes, make sure you play around with the opacity settings and also the color of the object, and you'll see how those different functions work. One of my favorite Blend Modes that I haven't seen in other programs is the Erase mode. It's at the very bottom of the list. So if I go to Erase mode, you actually see that this object acts as a mask and what it's doing is it's showing you the background color. So right now the background color in this particular document is transparent, but if I go to the Modify menu and select Canvass Color and I'll switch it to something Custom, we'll be able to see that background color appear behind the objects, so this is actually making like a hole in our entire drawing.
It is going through all the different objects and all the different layers and making a hole. So let me modify the Canvas back. That's the mode I really haven't seen in other programs, but it's kind of useful when you're trying to just knock something out. I will set it back to Normal. In addition to Blending Modes, Fireworks also offers a super huge library of Filters. These are called Live Filters, because they can be adjusted after you apply them. So if we go to Adjust Color and we do something like say Color Fill, then this will allow us to fill this entire object with a specific color, and as I said, I can still mess around with the opacity settings.
So I'm applying this color, but only at a 28% strength, which shows some of the original gradients and colors that I had on that object. You can also use Blending Modes to control how the pixels and the color affect the pixel in the background, so you can get even more effects by messing around with some of these values right here. The nice thing is, once I apply a Blending mode, I can turn it on and off. I can hit this eye key right here, and then I can go back and readjust my settings here. So back to 100% and then try something else like Darken.
Because photos have so many more pixels, these filters will actually affect photos a lot more than they will vector objects. So in addition to the Color Modes, you could see that I can apply all kinds of other stuff, like adding Noise to an object if I want to and add just a little bit of Noise to the object, that can be good for some effects. You can tell it whether or not you want it to have color in each one of the pixels that it adds and you can apply effects that are sometimes more useful, like Drop Shadows, so I can say give me a Drop Shadow right here and it creates a Drop Shadow for the effect.
It can control the Position of the Dark Shadow in relationship to the object. Then the strength of the Drop Shadow is right here, so you can make it stronger or weaker. Control the Feathering of the shadow, so there's a softer shadow, and of course, also the Angle. And in a lot of the other effects you'll see these same type of controls: Angles, Strength, Color, et cetera, et cetera. Once you have applied the filter, you can actually change the order that these filters are applied and sometimes that makes a difference in the way that they show.
So, for example, I move my Color Fill underneath my Drop Shadow, and now my Drop Shadow has a little bit of that color fill. So moving the filters around within this little window will give you a few additional options. You could spend half an hour messing around with some of these options, until you get your object just the way you want it. Another nice thing about some of the Shadow Modes is that they really do translate well to CSS. So when we look at the CSS Properties panel, you'll see that we can actually grab some of those values and incorporate it into our CSS projects. You can delete Effects by just clicking on them and then hitting this Delete button.
You can also save your effect as Styles, so if you click on this button right here, you can save that effect that you've applied to this element as a Style. And notice that you can also see the different things that affect that style which are not only the effects down here, but also the Fill and Stroke color. So you can say I want to really apply this effect to another object, but I don't want to change the other object's Color or the Fill type. I just want to apply maybe some of these Noise factors and stuff like that, so you could really have a lot of control here about how that effect is applied to other objects as you select them, so then you can pick it up from this pop-up menu right here, and we could delete it right there, if we want to.
So we'll talk more about styles in another movie, but I wanted to show you that you can save some of the presets that you've done. Remember that you can also copy and paste Styles by going to the Edit menu and selecting Copy and then go into another object and go into the Edit menu again and selecting Paste Attributes. That copies all the Effects and the Colors choices that you've made on that original object. You know, some things are better experienced than explained, and I've shown you how to use some of these filters, but this is really scratching the surface. So take the time to experiment with some of these, and I think you'll find them very useful in your artwork.
- Working with the menus, panels, and object properties
- Saving and exporting files
- Optimizing graphics
- Applying opacity, blending modes, and live filters to drawing objects
- Drawing vector shapes
- Masking objects
- Animating with states
- Using the 9-slice scaling tool
- Creating symbols and symbols for sprites
- Using batch commands
- Creating jQuery Mobile templates