Use fireworks to build your own coordinates

There is a time to see other people's pages on the horizontal axis and ordinate, is really the point of the page in the pen. At first I thought this could be done with a common, seamless background. Until one day, I intend to use this effect on a Web page, I suddenly found that the original seamless filling is really some skills! It's not as simple as I thought. Although the effect is done, but the conscience says, why should such a painting to fill so accurate, I still do not know, the most super code principle I have not figured out. Can only be said to be blind to deal with the method. Now let's share with you the way we've come to this blind encounter. ：）

1, new file, width=50pixels,height=20pixels, background color is transparent (transparent)

2, enlarge the editing area to 400 times times with the magnification tool. Draw a rectangle with a width of 1 pixels (pixel) and a height of 9 pixels with the rectangular tool in the toolbox. Open the Info panel reference. Then move the rectangle to the position where the x-coordinate is 4,y coordinates 1. The information panel appears as shown in the following figure.

3, select the rectangle, Edit>clone, and then press five times on the computer keyboard right ARROW keys, (each press the arrow key, the selected object will move to the corresponding direction of a pixel. If you hold down the SHIFT key on your computer's keyboard and press the arrow keys, each time you press the arrow key, the selected object will move 10 pixels in the corresponding direction.

4. Open the History (history) panel, which records each step of our operation. Hold down the SHIFT key, select the last six steps we have just operated (i.e. Clone,move.move.move.move.move), and press the replay button at the bottom of the history panel 8 times. So we got the following figure.

5, select the last rectangle (that is, the rightmost one). Open the Info panel, enter the number 20 in the H column (set the height of the rectangle to 20), and press the ENTER key on the keyboard, and we find that the height of the rectangle becomes 20 pixels. (A lot of friends in the Information panel to set the width and length, always remember not to press ENTER, but keep complaining that can not change the length or height.) Remember this feature OH: It can bring you a lot of convenience. To get to the point, move the changed rectangle to the Y coordinate to place the 0,x coordinates at 49. Refer to the Info panel.

6, we have a length of 50 pixels, height of 1 pixels of the rectangle, and then move it to the X coordinate value of 0,y coordinates of 9 of the position. This rectangle will be used to make the bottom line of the coordinate line.

7, CTRL + A, while selecting the rectangle in the editing area, what color do you want your coordinates to be?? Just fill in the color you like, though. I prefer blue, here we fill in the Blue bar:). Come to an ending, save this file.

8, the new file, width=776,height=20, generally in the resolution of 800*600 display mode, the width of the Web page set to 776 pixels for the best. The background color is transparent. For the convenience of the display, I set the width to 500.

9, in the editing area to drag and draw a 830*20 rectangle, why should the width of 830 pixels? You'll know by then. Don't forget to open the Info panel reference to ensure that the y-coordinate is placed in 0. Open the Fill panel, open the filling Style drop-down menu, select pattern (patterned fill), in the Pattern Selection drop-down menu, we select the last item other, at this time it will pop up a dialog box let us select the file, when we find the file we just saved, click on the Open button. At this point the effect is as shown

10, we can see that at this point the left side of the picture is not right, because the map to put on the page, the most left to the scale required 0. What do we do? At this point we should be glad, fortunately, we draw a rectangle of 830 pixels long, we just move the rectangle a little distance to the left, so that the leftmost tick value is 0. I didn't forget to mark the number on the corresponding tick value.

11, output it, open the Optimize panel, remember to set to transparent image, the following alpha transparency selected. File>export.

To come to an ending, review the previous steps, the height of the small scale is set to 9 pixels? Because the height of the small scale is best not greater than half the height of the editing area, otherwise the final effect will be somewhat distorted. Let's look at an example.

The height of the small scale is set to 12 pixel effect

As you can see, if the small scale is set to be greater than half the height of the editing area, use it to fill the pattern, and get a slightly misplaced figure.

The horizontal axis is drawn, but how to draw the ordinate? A quick way is to rotate the horizontal axis 90 degrees clockwise. Sometimes the picture after the rotation is not very good, or to draw a vertical ordinate bar.

The method is the same as the previous one, except that the width is set to 20, the height is set to 50, and the last pattern to fill is shown in the following figure

Here no more said, let's try it.

Horizontal axis pattern Original file download

Ordinate pattern Original File download

Turn from: Dynamic Network production guide www.knowsky.com