Wired Out Interface Technique Tutorial

Before we begin, I would like to thank you very much for viewing this tutorial. Your continued support will allow me to create more incredible and useful tutorials for you to benefit from. When you complete this tutorial, I would appreciate any feedback you wish to give me. Once again, thank you.

I assume that you have a basic understanding of Photoshop such as how to create and delete layers and channels etc. However, if you do get stuck on a step, or have questions about ANYTHING, please contact me at: , or post on the tutorial message boards I will be more than happy to answer your questions about how to do a technique or step. Also, the units used in this tutorial are pixels, and if you see something like this "File -> Save As" it just means go to the top menu bar and select "File", then select "Save As".
Thanks again, and have fun!

You may download the zip version this tutorial and follow along if you would like.

This tutorial is an interface technique tutorial and will help you understand how to add wires in photoshop that look like they are coming out of the background through holes. After you learn this, you should have no problems applying the technique to an interface you make. Let's get started!

- Start by creating a new document (ctrl + n). Make the document size 500 x 150 pixels with a white background, a resolution of 72 pixels/inch, and RGB Color Mode.

- Change the background color to a light gray color. I used #cacaca.

- Grab your pen tool, and add anchor points similar to this to get your wire started:

- Now, grab the convert point tool, and round off the points to smooth out the wire. If you need help with this, look at the Nav Bar Pen Tutorial.

This is what I cam up with:

- Ctrl + click on the thumbnail in the paths palette to load the path's selection.

- Create a new layer named "wire and 3d".

- With your foreground color as #999999, give the selection an outside stroke, of 5 pixels (Edit -> Stroke)

- Deselect, and then grab a hard brush about 13px in diameter to erase the excess:

- Zoom in, to the right and left ends of the wire, and make sure there are no hard edges. Smooth/round it out with the eraser in other words:

- Go to Layer -> Layer Style -> Bevel and Emboss...

- Apply these settings to the Bevel and Emboss dialog box:

- Now create a new layer called "stroke", and load the wire's selection by ctrl + clicking on its thumbnail in the layers palette (if it's not loaded already).

- With black as your foreground, give the selection a stroke of 1 pixel, outside.

- Deselect, and lower the stroke's opacity to 60%.

- Create a new layer below the wire and 3d layer, and name it "drop shadow".

- Load the wire and 3d layer's selection, and fill it with black (alt + backspace if your foreground is black).

- Deselect and gaussian blur (Filetr -> Blur -> Gaussian Blur) it by 3 pixels.

- Hit ctrl + t to bring up the free transform handles around the shadow.

- Hold down ctrl, and place your mouse over the top-middle point:

- Drag down, and to the right. We are trying to create the illusion of depth, with a touch of perspective. This is how mine turned out:

- Lower the opacity of the shadow to 40%, and zoom in to the right side. With a soft brush, erase the part of the shadow that "hangs over" the bottom edge of the wire. Then do the same to the left side:

- Create a new layer called "right hole".

- Create a 12 x 12 circular selection, and fill it with black. Deselect.

- Strategically place it underneath the right side of the wire:

- Duplicate the right hole layer (right click on it in the layers palette, and choose Duplicate Layer), and name it "left hole".

- I hope you can figure out what we're doing with this layer ;-) Hint: drag it over to the left side of the wire. :)

- Create a new layer called "right hole inset" below the right hole layer.

- Select the right hole layer's selecton (ctrl + click on its thumbnail).

- Expand the selection by 1 pixel (Select -> Modify -> Expand).

- Apply a dark gray to white gradient to the selection. Mine looked like this after I took all the layers away:

- Duplicate the right hole inset layer and name it "left hole inset".

- Drag it over and place it underneath the left hole.

- A tip I recommend is with a soft brush about 13px, and the opacity about 40%, erase the top left darkness from the left hole inset layer. This is optional, but I think if its too dark, you should erase it a little to lighten it up a bit.

- This is what you should have so far more or less:

Now we need to add the left and right bevels that make the holes come alive with realism.

- Create a new layer above the drop shadow layer named "right hole bevel".

- Zoom into the right hole area, and with white as your foreground, grab the Brush tool (B), and pick a soft, 13px diameter brush. Set the opacity of the brush tool to 10%.

- Apply a subtle white highlight to the top left portion outside of the hole. Then, switch your foreground to black, and apply a subtle shadow to the bottom right just outside of the hole.

This will make it look like the hole has a little depth to it's outside edges. Here is how mine came out after I hid the stroke and wire layers:

That pretty much does it for this tutorial. Here is a screen shot of the finished product and the layers in order:

Thanks for completing the tutorial, and please go to the forums to give feedback and show off your creation! See you there. Also, please take a look at the other tutorials.

Sincerely,