Vectorials
Flash Perfection
3D Lessons
Tutorialkit
Markup Tutorials
Learn PHP
network
adv banner
Photoshop  Home Photoshop Web Layout Wires
rss

Wires

Author: Havenfx.com More by this author


So you want to make wires, huh? I don't blame you, they look really nice when used right. Whether it be for a banner, or to connect images on your layout, wires can be very effective and look very nice. So, here we go.

1. Open up a new image that is big enough to hold your wire. I am going to use 400 x 200 pixel, 72 DPI, white background as the settings for this tutorial.

2. Once your image is opened, select the Pen Tool and make sure that you have it set to "Paths" in the options bar at the top (Window > Options if you don't have it open already).

3. Once you have done this, click on your image to add a point. Now, on the opposite end of the image, click once more to add another point. You should now have a straight line with a point at either end.

4. Now that you have your first 2 points, make a third point below the second one, and a few to the left of the third point. After you have done so, click on the point that you started with. Your image should now look like this:



5. This is the step where your wire gets it's shape and curvature. Right click on the Pen Tool and select the "Add Anchor Point" tool from the flyout menu. Now, click on the line somewhere, but don't let up on the mouse. Just click and drag the mouse. You should see your line bend. Drag the mouse until you give your line a nice curvy feel to it. Do this around the line and give your image some curvature. It should look somewhat like this (Except different since you used different points to drag from):



6. Ok, we have our curviness, now create a new layers and go to the Paths Palette (Window > Paths). Right click on the "Work Path" and select "Make Selection" from the flyout menu. Set the "Feather Radius" to 0 and make sure the "Anti-Aliasing" box is checked. Click ok.

7. Now, go to Edit > Stroke and use the following settings:



8. Now, lose the selection (Ctrl + D) and go back to the Layers Palette (Window > Layers). Right click on the layer that has your wire on it (Should be the layer you created) and select "Blending Options" from the flyout menu. Choose Drop Shadow, and Bevel and Emboss and leave them both at their default settings (Drop Shadow is optional, not necessarily needed. I used it for visual effect.). Also choose a Color overlay and use whatever color you would like.

9. Now, you can use your eraser tool to erase the part(s) of the line that you don't need and to smooth out any excessively jagged edges. Here is what you can get if you put a little time into it:

Wires Tutorial: Final Result


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 "Wires"