Photoshop Tutorial: Smooth Out Rough Edges - Get Rid Of Stupid Jaggies

[SunBlind 0]

Imagine this: You've created an awesome logo for your site and you're ready to add some layer effects or one of my kick *bottom* styles when you notice something: You made your logo too small! No worries, because you can always use Free Transform or Image Size to make it bigger. Right, but how does your logo look after you've resized it? Lemme guess, it looks like crap? Of course it does, because your image wasn't designed to be that size... What's that, you want to know how to fix it? Okay, okay, I'll tell you... but it'll cost ya.

 

Insert $5 to continue -> [|]

 

 

I'll be demonstrating the steps to smooth out rough edges with the logo for the main DM.Net site because it is the paradigm of the kinds of images that are prone to rough edges after resizing. This was a rough draft of the logo, so it's not perfect, but you get the idea. This image is about 165x140.

 

Now look what happens when I double the size to 330x280 and add a Stroke outline (to show you the edges):

 

Eww! Let's fix that.

 

Activate your layer with your logo (just click on it in the Layers Palette) and clear any blending options or layer styles associated with it. Now go to Layer > Select Transparency or press and hold the Control key while clicking on the logo's layer to select it's transparency. With your selection still active, click on the Channels tab next to Layers in the Layers Palette (or go to Window > Channels) and click on the new channel icon. Your document should now be black with your layer's selection visible and the channel Alpha 1 created and active.

 

Make sure you have white as your foreground and press Alt+Backspace to fill your selection with white.

Press Ctrl+D or go to Select > Deselect to deselect your selection (dee dee dee)

 

Go to Filter > Blur > Gaussian Blur. Now, the settings to be used with this filter will vary depending on the image that it will be applied to... You basically want it to smooth out the rough edges of your image without losing too much of the overall composition. For my image, I used a blur radius of 2.5, or 3, somethin like that.

 

Okay, so I was off, it was 5px, but anyway... Go to Image > Adjustments > Levels to bring up the Levels dialog box (This is the part where we get the shape of the logo back) Look at the image below, see those two arrows on that slider at the bottom? LEAVE THEM ALONE. They'll just screw up the image brightness, you don't want that, you want to screw up the contrast, so you use the 3 arrows on the slider indicated below

 

What you want to do is move each arrow little by little toward the middle, and then either left or right until your logo has a defined shape, not too blurry and not too sharp. When you've got your image looking the way you want it to, hit OK. My image isn't exactly as I wanted it to be, but this was just for the tutorial's sake so I don't really care.

 

Anywhos, press Ctrl+Click on your Alpha 1 channel to select it's transparency and go back to the Layers tab. You should already be on your logo's layer with the Alpha Channel's transparency still selected, if not you screwed up, go back and fix it. Now all you have to do is fill in the selection with the color of your logo and deselect. Again, I added a stroke so you can see the edges more clearly:

 

Damn, I'm smooth.