Another great and easy Adobe Fireworks tutorial. Nice thing about this tutorial is that this technique can be applied almost the same way in most graphic editors (Illustrator, Photoshop…). I choose to write about Adobe Fireworks more often because there are tons of Photoshop and other tutorials and that is not fair since Fireworks deserves more attention. It is pretty easy to find a neat seamless image to use as a background in web pages but sometimes you just cannot find what you are looking for or you want to make something special and unique.
The only solution is to make your own. It is much easier that one could expect.
I show you how I made this texture above (Which btw you can use if you like it for free as you wish).
And below is the link to see this texture in action.
Check it out
The tutorial
Start by creating 200px x 200px new png document and draw a rectangle that is covering entire canvas (200px x 200px also) and give it a gray color (#8A8A8A).
Than populate the canvas with shapes of your choice. I have used simple doughnuts and circles. Color should be a little lighter than the background rectangle (color used is #939393). make sure the objects you use are not going across canvas border and use a nice uniform density while populating the area with objects.
Now comes the main part. Select all objects including the rectangle in the back (CTRL+A) and group them (CTRL+G or Modify > Group). Than make canvas larger 400px 400px by going to Modify>Canvas>Canvas Size and enter 400 as a height and width.
Now position the grouped objects to top left of the new enlarged canvas and copy it (CTRL+C) and paste them (CTRL+V) 3 times and position all of them one to another.
Make sure you position them exactly one to another, it is very important, use axis coordinates for help during positioning.
Now draw another rectangle 200px x 200px (color not important) and position it exactly in the middle. Set X an Y axis to 100 or use smart guides for help.
Right-click over it and select Convert Path to Markuee…
Right click again and select Crop Document
And there you go. Save it as jpg or png and it is ready for use. Nice seamless background that repeats. Perfect for web pages and other backgrounds in graphic design.
