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. These presets help out a lot when you are making mock ups, and when you are done you can slice them up and make the pieces to your web site.

Another feature that I like is the ability to change the orientation of the pattern on the fly, and you can position it exactly how you like manually, instead of using a trial and error method of dialing in numbers. You do this by hovering your mouse next to the center dot when you have your pattern selected. the mouse will change to a circular arrow icon, and you can click and drag to rotate it at will. The other cool feature is the ability to drag and stretch your patterns at will. You do this by clicking and dragging the vertical and horizontal lines, to stretch and fit your pattern to taste. You can also adjust the edge to be hard, anti-aliased, or feathered, which gives you great control over the edge of the pattern shape.

Adding a curves filter allows you to lighten or darken the wood, giving you the desired colors and look that you want.

I am a professional graphic designer and web designer with years of experience. I am also an illustrator and Wordpress theme creator and author of this design blog. I write tutorials and build custom websites. I do what I love, and I love what I do! You can: Follow Me on Twitter, Join Me on Facebook, & Or Follow James George on Google+

Land DREAM CLIENTS: Build a successful design business.
Land DREAM CLIENTS: Build a successful design business.

Write To Us

Creative Beacon

6515 Clinton Hwy, Suite 202

Knoxville, TN 37912