This tutorial features the technique I used for the left and right arms of my front interface for the FxZone. The technique creates a seamless form of two different patterns using different effects for each pattern.


You first need to create your base or orignal pattern. Once you have the original pattern you then load a selection on the orignal pattern, expand the selection by 2 pixels (amount will vary depending on the size of the orig. pattern).

Create a new layer then fill the selection with a temporary color like white. This will create the second pattern that will be our interface skin.


Apply your effects for both patterns. Remember the original pattern will be the interface bone so only parts of that pattern will be seen.

I used the aqua affect for my interface bone (fig. 02a) and the 3D bevel effect (fig. 02b) for my interface skin.

Make sure the position of the elements and that the order of layers stay the same with the interface skin appearing on top of the interface bone layer.

We then cut out sections of the interface skin to expose the layer containing our interface bone. Use the elliptical marquee tool and position it over some areas of our interface skin layer. Hit the delete key to expose some sections of the interface bone layer .

Repeat the process until you are satisfied with the amount of bone layer exposed.


We will then apply a slice effect on the edges on the cut outs we made on step 3.

Use the elliptical marquee tool to select one of the edges of the interface skin made by the cut outs (fig. 04a). Make sure you have a small portion of the edge selected with the marquee tool.

Copy the contents of the selection and paste it on a new layer.

Load a selection on the chipped off edge and apply a vertical linear gradient (fig. 04b). The colors for the gradient will be the lighter and darker shade of the base color of the interface skin. I used black and white for the gradient since my base color is dark grey. Once you're done with the gradient move the chipped off edges back to there original position (fig. 04c).

Repeat the process for the other edges of the interface skin


Double click on the layer thumbnail then add a 1 pixel black stroke around the interface skin layer using layer styles and add a drop shadow to complete the tutorial.


tutorial_skinnbone.zip
Download PSD file of this tutorial.
Go Back




Images and content Copyright © 1998-2001 Ryan Lacdao
Bandwidth by Philmetro