[Ben]

I'v been asked a few times how to create funky/urban edges to a website to give it a street feel. A really easy method I use is using the "Alien Skin" effect in Fireworks within a few mouse clicks you can create a urban edge effect in seconds.

Step 1
Open Fireworks and create a blank canvas at around 800 pixels and drawn a simple rectangle using the vector square tool inside at about 600-700 pixels.

 urban_edges_1.gif (32.07K)
Number of downloads: 47

Step 2
Click on the square you created and select Filters (Effects) > Alien Skin > Edges

 urban_edges_2.gif (7.45K)
Number of downloads: 35

Step 3
Select the torn paper effect from the drop down menu within the Alien Skin pop-up. Then adjust the dials at the top till you have the required look you are after. The "Feature Size" dial will determine how jagged the edges will be whilst the "Edge" and "Margin" options will change the depth and how much it cut's into your object.

 urban_edges_3.gif (21.52K)
Number of downloads: 31

When you are done click "OK" and you should now have a more funky looking rectangle, you can play about with other filters to improve the visual as this is only a basic tutorial.

Finished:

 urban_edges_finished.gif (35.73K)
Number of downloads: 84

Enjoy.

[Cromo]

Thats a nice little tutorial.

but i get the feeling its more torn edges than urban/street look.

also u need to change that bloody simile because you can't type 8 hundred without it being there lol.

[Alexander]

Cool, I would think you would have used photoshop, but infact you use Fireworks, excvactly like me. and for my website I did what this tut said. Lol.

[Ehsan]

aww i don't use FW any help doing this in PS ? i have seen most of you guys use FW

[BenG]

Yeh I use PS and I have seen alien skin plugin somewhere

[jbladeus]

alien skin plugins rock!
http://www.alienskin.com/

Btw, the above borders can also be made in photoshop in a similar way.