website promotion banner
eturnkeys
Your Ad Here
Photoshop  Home Photoshop Special Effects Wirframing in Photoshop
rss

Wirframing in Photoshop

Author: Naveed Babar More by this author


Step 1: Open a new document, 500 x 250 pixels. Fill the background with a blue color. Select the brush tool and select a 1 pixel hard edge. Press 'D' to make your foreground color black to paint with. Now create a new layer and paint a box like here I use. Tip: Hold down the shift key at each corner to have photoshop draw a straight line to the next point.

image 1

Step 2: Next, hide the background layer so only your black box is showing. Grab the rectangular marquee tool and draw a selection around the box looks like below.

image 2

Step 3: Then go to Edit => Define Brush. Name your brush "Wireframe" and click OK.

image 3

Step 4: Hide the brush layer and create a new layer on top of it. Make white your foreground color because that is the color we want our wireframe to be. Move over to the paths palette and click the new path button on the bottom of the palette. Then select the pen tool and draw a path like I have across your image.

image 4

Step 5: Now go into the brushes palette. First, in the "Brush Tip Shape" section, select the brush that we just created. Then go to the shape dynamics section. Select Angle Jitter control drop down box to "Fade". Then enter a value of around 100 in the box. Now go back to the brush tip shape and you may need to play with the spacing setting. I have set around 10-20 percent. Just look at the preview area to see the style that you are going for.

image 5

Step 6: Once you have your brush the way you want it, go back to the paths palette. Make sure your brush tool is active first, and make sure white is your foreground color. Click the "Sroke path with brush" button in the bottom of the paths palette. This will stroke the path with the brush that you just created on the active layer.

image 6

Step 7: Here a few examples of some brushes that I created and the wireframes that they produced. Experiment with the settings in the brushes palette to get different effects. You will quickly see that there are not too many options if you still want to keep the wireframe look, since many of the settings will really warp your brush. You do however have a lot of control with the wireframe look you are going for with the angle and spacing settings so try to concentrate there.

Wirframing in Photoshop Tutorial: Final Result

image 8



About the Author:

I am Naveed Babar. I am enjoying to work with Adobe Photoshop and my aim is to be a Master in Adobe Photoshop. So I can share lots of information, tips, and ideas through nicetutz.blogspot.com.


Author's URL: nicetutz.blogspot.com

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Wirframing in Photoshop"