Wireframing in Photoshop
Final OutPut:
----------------------------------------------------------------------------------------------------
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.
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.
Then go to
Edit => Define Brush. Name your brush
"Wireframe" and click OK.
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 wire frame 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.
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 v
alue 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.
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 that you are on the new layer, 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.