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

|
|
 |
TrentonCS Author: ahstanford Posted: Nov 06th, 7:40pm Activity: 1 replies, 16 views
|  | Html 5 Author: ahstanford Posted: Nov 05th, 1:32pm Activity: 5 replies, 81 views
|  | What are your favorite websites? Author: ahstanford Posted: Nov 05th, 12:51am Activity: 0 replies, 45 views
|  | What do you do for a living? Author: ahstanford Posted: Nov 04th, 11:04pm Activity: 0 replies, 43 views
|  | What is your favorite Subway sandwich? Author: ahstanford Posted: Nov 04th, 11:02pm Activity: 4 replies, 84 views
|  | Windows 7 Author: ahstanford Posted: Nov 04th, 10:59pm Activity: 0 replies, 47 views
|  | Google Wave Author: ahstanford Posted: Nov 04th, 10:52pm Activity: 0 replies, 56 views
|  | University Project Author: Gjbphp Posted: Nov 03rd, 8:59pm Activity: 1 replies, 89 views
|  | Hello BioRust! Author: ahstanford Posted: Nov 02nd, 5:39pm Activity: 4 replies, 83 views
|  | Illustrator cs4 - Convert outlines/graphics to ... Author: izidrew Posted: Oct 29th, 3:48pm Activity: 3 replies, 252 views
|  | Hello BioRust!! Author: MOST Posted: Oct 29th, 12:52am Activity: 4 replies, 141 views
|  | Hey! newbie Author: prelimiting Posted: Oct 28th, 11:51pm Activity: 1 replies, 112 views
|  |
|
 |
 |
 |
 |
 |
| --- Site Resources --- |
| Total Tutorials: | 212 |
| Total Downloads: | 415 |
| Linkbase Links: | |
 |
|
 |
 |
|