More Gradient Options with Adobe Fireworks

More Gradient Options with Adobe Fireworks

Adobe Fireworks has a few more control settings than Photoshop when it comes to certain things, and gradients are one of them. In Photoshop, you have your typical Radial gradients, linear, angle, reflected and diamond. You can also create transparent gradients, but in Fireworks, you can do all of that, as well a a few other options.   Go into the Properties panel and choose the tab that allows you to change the fill. You can fill an object with nothing, a solid color, patterns, a gradient, or you can select more options. Here you can choose from a bunch of different gradient options, such as folds, ripples, etc. You can also choose from a bunch of different color presets, like you can in Photoshop, but here you can also feather the gradient, and preview it live, and you can add a texture to it as well, adding another element of depth to you work. You can also determine the exact percentage of texture or grain that you want to add to the gradient. This gives you another degree of flexibility in your gradients that you just can’t obtain with Photoshop.   What I like about these extra settings is that you can also apply the textures to solid fills, patterns and web dithers. You can also make it so that there is transparency as well. This gives you a tremendous amount of control. You can also use the control handle on the screen to control the shape, rotation and thickness of the gradient, pattern, and/or texture....
Blend Colors Easily With Fireworks

Blend Colors Easily With Fireworks

This is a really cool feature found right inside of Adobe Fireworks. What is great about this feature is that when you blend the colors, they are safe for the web. Many times when I am building site composite, or a piece of web work I would like a mix of two major colors that I am using in the site, or a mix of two colors found within a photo. This is really easy to do inside of Fireworks with the Color Blender found within the Color Palette. All you have to do is go down to the bottom of the Color Palette. This is where you can control all of the settings for the mix of the two colors. The different blocks are the number of steps in color gradation from your first color choice to the second one. The slider will determine how many steps there are. The default is 15, but you can make it more or less. To choose your two colors, simply click the square and an eyedropper will come up so you can sample a color from anywhere on the screen. You can do that with the second color as well, giving you an infinite number of color choices. In the example, I wanted a gradient that was a mix of the purple in the logo and the charcoal in the main header box. I chose the original color for the lighter part of the gradient, and the charcoal/purple mixture for the darker part of the gradient. Fireworks is definitely a great tool for making mock-ups for your web sites. It is...
Easy Width Control in Fireworks

Easy Width Control in Fireworks

We have all had this problem when making a web site – You are creating a mock-up of your web site, and you have a distinct number of menus. You want to create buttons that are the same width across as the header and that are spread out evenly across your site. Fireworks has a couple of menus that help with this. In the example below, I am creating a menu where I have the number of buttons that I want, I just need to figure out a consistent width for all of them to span the full width of the header evenly. Firework has a tool in the align panel just for this. Select all of your buttons (without the text, because it may become distorted), and go up to the Modify menu, and select Group. The shortcut for this is Command (control on the PC) +G. This makes all of the buttons one item. Then, select the header, since it is the item that you want the buttons to match its width to, and hold down shift and click on the menu, and with both selected, go to the Align panel and select Match Width. Make sure that the that the alignment is set to relative to object and not relative to canvas. This makes sure that the menus are stretched evenly to match the other object that you have selected. If you want a set of items to match the width of your site, and your canvas is set to the width of your site, then you simply change the sitting to Relative to Canvas. This...
Create Easy Patterns in Fireworks CS5

Create Easy Patterns in Fireworks CS5

I really love to work with Adobe Fireworks when making graphics for the web. It is simple, intuitive, and has a few features that give you a little more control than what you find in photoshop. It is almost like Fireworks is a combination of Illustrator and Photoshop in one. In Fireworks, you find a couple more options for gradients, but you also find patterns built in that are useful. The extra options make it easy to manipulate those patterns as well. I created a new document, set to the dimensions of 800px wide x 600px tall. In the vector section of the tools panel, I selected the rectangle tool. I drew out a box the same size as my canvas. If you have your properties panel open, you will notice that there are numerous options at the bottom of the screen. If you look next to the fill, you will see options for the type of fill for the object. There is solid, web dither, gradient and pattern. If you hover over pattern, there are tons of options for patterns. I selected wood, which gives you the look of a grainy type of plywood. Wood 2 is another option, which gives you the look of planks, such as in a hardwood floor. There is a texture setting right below that, which allows you to add a texture to your fill. This really gives you a lot of flexibility for different effects. Personally, I like the dots, diagonal lines, oilslick and swirls. There are more that I like, but you can make up your mind with what you like....