|
|
|
Photoshop is a very powerful aid to your creativity, but only if you know the
basics of interface creation. To use an analogy, its a bit like driving a
car - you can be familiar with the tools at your disposal (i.e. the brake,
accelerator, gear stick, etc), but unless you actually know how to use them
properly, you'll be going nowhere fast. Likewise, knowing all the metal
effects & shiny plastic techniques in the world won't get you very far if you
miss out on the basics. In my opinion, one of the most basic skills you
MUST pick up to be an effective interface designer is learning how to make
complex shapes. So, without further ado, here is my tutorial on making one
of the more complex shapes around - a handgun grip.
 |
Step 1: Create a new 300px by 300px document with
a white background. Create a new transparent layer on top and call it
shape. Using the Rectangular Marquee Tool, draw a rectangle and
use the Edit > Fill command from the menu to create a black rectangle
in the shape layer. |
 |
Step 2: Now go back into the menu and choose
Edit > Transform > Distort. Click and drag the corner points around
until you end up with a shape similar to the one on the left. Click
outside the selection to render the effect permanent.
|
 |
Step 3: Ok, now we can work on the finger grooves.
Select the Elliptical Marquee Tool and draw a little oval shape.
Move it into an appropriate position and press the BACKSPACE key on your
keyboard to remove an oval-shaped chunk from your distorted rectangle. |
 |
Step 4: Without losing your oval selection, move
it along to create the other two grooves. Remember that holding down
the SHIFT key whilst using the cursor keys will move your selection about a
little faster and at regular intervals. This can be very useful if you want
to maintain a sense of symmetry in your shapes. |
 |
Step 5: Well, its not bad, but its not very
ergonomic either, is it? Rectify this by creating a new
transparent layer on top of all the others called shape2 and select
it. Now draw a long rectangular selection using the Elliptical Marquee Tool, and Edit > Fill it with a non-black colour.
In this case I used blue, but you may find 50% grey just as convenient. |
 |
Step 6: Use the eraser tool to remove all
parts of the circle you don't want. Holding SHIFT on the keyboard
whilst clicking on the shape or shape2 layer will load up a
selection around the underlying shape and allow cleaner deletion of excess
pixels (you will then only be able to erase areas within the selection).
Together with Select > Inverse this is a powerful way of cleaning up
your work. There's no need to be overly neat - we'll take care of
excess jagged edges and corners in the next step. |
 |
Step 7: With the top layer active, select Layer
> Merge Down to join the two parts of the complex shape together. Now
run through my
anti-aliasing tutorial with a Gaussian blur of 5 to smooth out the edges
and get a result similar to that on the left.
Et voila - a
nice looking gun handle shape is yours, and ready to be made into an interface
using whatever plastic effects or metallic techniques you have at your disposal.
Enjoy! :) |
- Tutorial written by Man1c M0g
| 
|
|
|
Quote from malboroman;22386: Well... the only way to get rid of those 'ugly pixels' is to switch to Illustrator and work with vectors. This is the best photoshop can do... |
Agreed, 2 years after this reply. Hehe. |
Reply to this post |
|
|
Simple yet effective. Reminds me of a long forgotten tool called Image Styler. I still use it though. It gives so much freedom with alot less time lost in selecting and finding layers to fuse or diffuse parts or objects from your work. Pitty Adobe converted it to LiveMotion.
Note: And thank GOD livemotion is gone. |
Reply to this post |
User: Taipan (#35249)
Date: Sat Dec 02, 2006. 04:11:17 | Post #6 of 8 |
|
Nice simple tutorial that importantly works and also gives an insight into a part of PS some might not even see, ie. Channels and Adjustment Levels. |
Reply to this post |
|
|
This method also works well for doing drastic enlargements of simpler shapes, such as logos. After resizing it, it will have gigantic "jaggies" but this method easily and quickly gets rid of them and smooths out the edge. |
Reply to this post |
--- View Entire Thread ---
|

|
|
 |
php, shoutbox problems Author: vanhansen Posted: Nov 17th, 1:30am Activity: 5 replies, 93 views
|  | MarkupGeeks Logo Author: ahstanford Posted: Nov 16th, 8:45pm Activity: 12 replies, 158 views
|  | Drawing Tutorials Author: ahstanford Posted: Nov 16th, 12:46am Activity: 0 replies, 99 views
|  | Superbowl predictions, anyone? Author: ahstanford Posted: Nov 15th, 10:46pm Activity: 10 replies, 138 views
|  | Photomanipulation Footsteps Author: ahstanford Posted: Nov 15th, 10:43pm Activity: 4 replies, 100 views
|  | Learning to draw... Author: ahstanford Posted: Nov 15th, 12:43pm Activity: 4 replies, 116 views
|  | Looking for simple UI elements Author: FenixRoA Posted: Nov 15th, 6:40am Activity: 7 replies, 108 views
|  | HDD Help? Author: Phoenix Wynde Posted: Nov 13th, 2:31am Activity: 1 replies, 107 views
|  | Fun New Battles Posted! Author: ahstanford Posted: Nov 11th, 7:33pm Activity: 0 replies, 141 views
|  | 4-man Simon Tournament Author: ahstanford Posted: Nov 11th, 3:28pm Activity: 0 replies, 92 views
|  | Design Brief Inspiration for BioRUST Battles! Author: ahstanford Posted: Nov 11th, 7:19am Activity: 4 replies, 140 views
|  | The BioRUST Free Stock Photography Thread Author: ahstanford Posted: Nov 11th, 6:32am Activity: 2 replies, 147 views
|  |
|
 |
 |
 |
 |
 |
| --- Site Resources --- |
| Total Tutorials: | 212 |
| Total Downloads: | 415 |
| Linkbase Links: | |
 |
|
 |
 |
|