TUTORIALS SUBMENU ---->

PHOTOSHOP    FLASH    ILLUSTRATOR    BLENDER    CINEMA 4D    WEB-CODING

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!  :)

Great tut! Easy to follow and mine are almost..... as good as yours.
Thanks!

Reply to this post

Very good tutorial with a great after-effect, the extra detail is well worth it.

Reply to this post

Awesome tutorial! The screws were easy to make and the results are some of the best I have found!

Reply to this post