|
|
|
At the risk of sounding like Mr Miyagi, a house will only ever be as sturdy as
the foundations on which it is built. Or, putting it another way, you'll end up
with a pretty disappointing interface if you don't spend a little time getting
the underlying shapes as smooth as possible. Of course, you can go
through the lengthy and often very frustrating process of manually removing
'jaggies' at the end of the project, but you can save yourself lots of trouble
letting Photoshop do most of the work for you at the beginning instead.
Just follow these four easy steps to smoother work...
 |
Step 1: Create a new 500px by 500px document with
a white background. Create a new layer called shape. Using the
Rectangular Marquee Tool, Elliptical Marquee Tool, and Polygon Lasso Tool, draw some complex
shapes in this new layer and use the Edit > Fill command from the
menu to fill them with black. Feel free to experiment here - I created
the shape on the left using nothing but circles and rectangles. Don't
worry about the sharp edges - they'll all be gone when we're finished. |
 |
Step 2: When you are happy with your shape, press
CTRL and click on the shape layer in the layers palette to make it
the active selection. Now go into the channels palette (you can
get there by clicking on a tab above the layers palette). Click on the
create new channel button to make a new channel & call it alpha. With
the selection still active, Edit > Fill the shape with white and then
Select > Deselect. Now run the Filter > Blur > Gaussian Blur
filter with a setting of 5 to 10, depending on how rounded you want the
final shape. |
 |
Step 3: With the channels palette still active,
click on Image > Adjust > Levels from the menu to open up a panel
very similar to the one on the left. Drag the two outer triangles towards
the centre until your shape looks nice and smooth. Don't overdo it,
though, or you'll get jaggies. Once you are happy with your
shape, hold CTRL and click on the alpha channel to create a new
selection. |
 |
Step 4: Go back to the layers palette and create a
new transparent layer. Select it and then fill the shape selection
with black using the Edit > Fill menu command. Delete the old
shape layer or make it invisible - you don't need it anymore.
And that's it - you now have a nice smooth shape which you can bevel,
colour, and manipulate however you want! Experiment lots with
the principles of this tutorial and you'll go a long way to understanding
the whole basis of interface design. Have fun! |
- 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, 92 views
|  | MarkupGeeks Logo Author: ahstanford Posted: Nov 16th, 8:45pm Activity: 11 replies, 148 views
|  | Drawing Tutorials Author: ahstanford Posted: Nov 16th, 12:46am Activity: 0 replies, 98 views
|  | Superbowl predictions, anyone? Author: ahstanford Posted: Nov 15th, 10:46pm Activity: 10 replies, 137 views
|  | Photomanipulation Footsteps Author: ahstanford Posted: Nov 15th, 10:43pm Activity: 4 replies, 94 views
|  | Learning to draw... Author: ahstanford Posted: Nov 15th, 12:43pm Activity: 4 replies, 115 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, 106 views
|  | Fun New Battles Posted! Author: ahstanford Posted: Nov 11th, 7:33pm Activity: 0 replies, 139 views
|  | 4-man Simon Tournament Author: ahstanford Posted: Nov 11th, 3:28pm Activity: 0 replies, 90 views
|  | Design Brief Inspiration for BioRUST Battles! Author: ahstanford Posted: Nov 11th, 7:19am Activity: 4 replies, 139 views
|  | The BioRUST Free Stock Photography Thread Author: ahstanford Posted: Nov 11th, 6:32am Activity: 2 replies, 146 views
|  |
|
 |
 |
 |
 |
 |
| --- Site Resources --- |
| Total Tutorials: | 212 |
| Total Downloads: | 415 |
| Linkbase Links: | |
 |
|
 |
 |
|