Interface Skin and Bone - Design Tutorials

Thursday, April 3, 2008

Interface Skin and Bone

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.

Read More...

Previous Posts




0 comments: