Diagonal line tile with vectors - is this possible in PI12?

[sisom]

Hi everybody, I found this nice looking version of the CSS Zen Garden, here:

http://www.csszengarden.com/?cssfile=/2 ... css&page=0

and I wanted to recreate a similar diagonal line background image, as used in the orange boxes down the left hand side. Does anybody know how to recreate this sort of look in PI? I thought maybe it would be possible using some vectors that somehow tile (I don't know if this is possible in PI). I'd like to be able to edit them so that I could have alternate lines of a different thickness, and also a different colour, etc. I did do a search on Google but didn't have much luck, probably because I don't really know how to describe what I'm looking for, without referring to the web page in question.

[Ron P.]

Here's a quick image created using PI-12. It consists of 3 rectangles.


The small "offset" rectangle I think it suppose to be drop-shadow, which brings the orange menu rectangle to the front. To create it I simply used a gradient filled rectangle, then using the Transform Tool, Rotate>Slant, adjusted it, by slanting the right side downwards. This slanted rectangle is then placed on a layer between the orange rectangle, and the larger gray rectangle.

I did add a drop-shadow to the orange "menu" rectangle.

Now to really re-create what is on the Zen Garden webpage, you need to use CSS. You would need an image similar to the one above, for each menu section. Through CSS you would define where each appears on the webpage. For that you need to do some reading on CSS..

I would create the orange and the smaller "offset" recangles as a single image, not with the larger gray. Then with CSS you would position the "menu rectangles" along the left edge of the larger gray, which is main background for the webpage.

[sisom]

Hi Vidoman, I'm very sorry but I didn't explain clearly what I meant. I want to reproduce the diagonal lines in the orange box, to create a background that I can tile in PI, to create a background image of any size I want, which I can then use in a website. It's the diagonal lines I was asking about (but not very clearly). Is it possible to create something like this in PI, which would be easy to adjust? I'd like to be able to just change the colour of the background and the lines, and to adjust the width of the lines, and to have two alternating colours for each line, so one would be a dark grey, the next would be black, and so on.

[Ron P.]

What you're wanting to create is a pattern to be used as a background. Yes that can be done with PI.

Use a small image size of say 32 x 32 pixels. Then using the Line/Arrow tool, draw diagonal lines. You will need to zoom into around 500% to work on it.

When you're finished save it to a GIF format. Then in your CSS or HTML you would indicate a background tile, using your "pattern" image.

The size of the image is not limited to square, use whatever dimensions works for your layout.

In PI there is a Background Designer found under the Web menu. Those are basically the same.