|
|
|
Metallic Interface designs are undoubtedly very popular these days, and seem to
be popping up everywhere - from application skins to clan websites. Whilst
overlapping metal plates may be simplicity itself to create, however, they also
look rather boring unless logos are etched onto them,
LCD screens
are attached, or they are personalized in some way. Another simple way is to add
screws/rivets, which are an excellent way of filling in dead space. The aim of
this tutorial is to teach you how to create screws/rivets yourself, and
illustrate the ways you can modify their appearance to suit your own individual
needs. Read on...
 |
Step 1: Create a blank 200px by 200px document and
fill the background with anything you like. Create a new
transparent layer on top and, using the Elliptical Marquee Tool,
draw a circle whilst holding down the shift key (this will give you a
classic circle with equal proportions). Go to the colour
swatches and set your foreground/background colours as pure white/black
respectively. |
 |
Step 2: Select the radial Gradient Tool from the toolbar and, with the circular selection still active, click and
drag a line from the centre of the selection to just outside the circle (as
is shown in the step 1 image). This should give you a gradient circle
somewhat similar to the one on the left. If you want to add the
white highlight elsewhere you can do that too - experimentation is the key
to knowledge after all... ;) |
 |
Step 3: We are not done with this artificial 3D
sphere yet, of course, because it really doesn't look that metallic!
Rectify this by selecting Image > Adjustments > curves from the menu
and creating a curve similar to the one on the left. Press OK to
finalize the changes and look at your new sphere. If the
highlights are a tad too dark or steep, choose Image > Adjustments >
Brightness/Contrast from the menu. From here you should increase
the brightness and decrease the contrast to suit your personal tastes. |
 |
Step 4: Now select Layer > Layer Style >
Gradient Overlay from the menu and fill in the details on the left.
This will add a nice little sheen to the metal. Press OK when you have
finished. |
 |
Step 5: Now onto the screw slot. Create a new
layer on top of everything else and, using the rectangular marquee
tool, create a rectangle like the one on the right and fill with a dark
grey (in this case, I chose #3F3E3E). Hold CTRL and click on the
sphere layer to make a selection. Now for the fun part - choose
Select > Modify > Contract from the menu and enter the setting as 1px.
Press OK. Now click on Select > Inverse and, with the rectangle
layer still active, press delete on your keyboard to remove the overage. |
 |
Step 6: Many tutorial websites would stop at this
point, but I'm a bit crazy, so we'll take this effect a bit further.
With the rectangular layer still active, pick Layer > Layer Style > Inner
Glow from the menu and enter the settings on the left. This will
add a nice highlight to the outer edges of the screw head. Don't press
OK just yet though... |
 |
Step 7: Progress onto the gradient overlay
subsection and, once more, copy my settings on the left. Now you can
press OK... :) |
 |
Step 8: And there we are - a nice shiny screw
awaits usage in your interfaces and/or skins. You should, of course,
add a nice background, a black outer glow, and maybe even a
drop shadow to the spherical layer using layer effects to give it
a bit of depth, but this is all simple and left entirely up to you.
Also remember that you should rotate the slot a little too - nobody sane
makes all their screws face in the same direction... |
 |
Cross-threaded: This effect requires a little more
work, but it really isn't difficult. Instead of drawing a single
rectangle in step 5, draw two in a cross formation. Before
starting step 6 you should then run through my
anti-aliasing tutorial to smooth out the shape before continuing to add
layer effects. The resultant screw head isn't quite as neat as
the single slot, but that will hardly be noticeable, considering that you'll
undoubtedly be scaling the screw down to fit your interface anyway. |
 |
Rivets: Probably the simplest effect of all, you
can create a rivet by drawing a circle in the middle of the screw head
during step 5. Then all you have to do is change the gradient 'style'
in step 7 to Radial and add a black Inner Glow. Its really very flexible,
and with a little practice I'm sure you'll be able to invent some pretty
funky alternative screws as well. Have fun! :) |
- Tutorial written by Man1c M0g
| 

|
|
 |
Zen Author: hackzenindus Posted: Nov 19th, 2:54pm Activity: 1 replies, 8 views
|  | Submit/sell/show my designs Author: lakotaswift@hot Posted: Nov 19th, 12:38pm Activity: 1 replies, 11 views
|  | Are the Tutorials available??? Author: LivingCovers Posted: Nov 18th, 10:15am Activity: 2 replies, 38 views
|  | Graphic Artist from Nigeria, Africa... Author: LivingCovers Posted: Nov 18th, 8:47am Activity: 3 replies, 36 views
|  | New guy in VA Author: Rohape Posted: Nov 18th, 1:53am Activity: 4 replies, 45 views
|  | Doseages and Solutions Author: Guardian Posted: Nov 17th, 11:54pm Activity: 7 replies, 65 views
|  | Removing background from images Author: Alex Ross Posted: Nov 17th, 3:50pm Activity: 13 replies, 227 views
|  | How do i add a blinking light on a picture? exa... Author: murkr Posted: Nov 17th, 1:49am Activity: 3 replies, 111 views
|  |
|
 |
 |
 |
 |
 |
| --- Site Resources --- |
| Total Tutorials: | 210 |
| Total Downloads: | 413 |
| Linkbase Links: | 243 |
 |
|
 |
 |
|