You've already started watching How to Achieve Pixel Hinting Perfection in Photoshop
In this Treehouse Quick Tip, we're going to learn how to deal with unwanted anti-aliasing in Photoshop and achieve pixel perfection when working with vector shapes. This method is referred to as pixel-hinting. Using Adope Illustrator and Photoshop, you can apply pixel hinting to your vector shapes to get exactly the design you are looking for.
-
0:01
[treehouse⢠presents]
-
0:02
[Quick Tips: How to Achieve Pixel Perfection in Adobe Photoshop]
-
0:04
[with Allison Grayce]
-
0:05
Hi, I'm Allison Grayce.
-
0:07
In this Treehouse Quick Tip, we're going to learn how to
-
0:09
deal with unwanted anti-aliasing
-
0:11
in Photoshop and achieve pixel perfection
-
0:13
when working with vector shapes.
-
0:15
This method is referred to as pixel hinting.
-
0:18
In this Quick Tip, I'll be using Adobe Illustrator CS6
-
0:21
and Adobe Photoshop CS6.
-
0:24
Now, I've gone ahead and created a simple logo
-
0:26
in Illustrator, and I want to bring that
-
0:28
logo to use in a design I'm working on
-
0:30
in Photoshop.
-
0:32
So, Ctrl-A to Select All,
-
0:34
then Ctrl-C to Copy,
-
0:36
and let's navigate on over to Photoshop.
-
0:39
So, let's go ahead and Ctrl-V to Paste the logo.
-
0:42
Photoshop gives us a dialog box
-
0:44
that asks how we want to paste in our vector shape.
-
0:47
Since we want to be able to edit the paths,
-
0:49
we'll paste it in as a shape layer.
-
0:51
So I'm going to go ahead and scale the logo
-
0:53
to my desired size, because if I resize
-
0:56
the shape after pixel hinting,
-
0:58
I'd need to do it all over again.
-
1:00
We're going to make this logo white.
-
1:03
[mouse clicking]
-
1:07
Perfect.
-
1:09
So, let's go ahead and zoom in a little bit closer here.
-
1:12
If you notice, there is some unwanted
-
1:14
anti-aliasing happening,
-
1:16
especially around these horizontal lines here,
-
1:18
and what that does, if we zoom back out,
-
1:20
is it actually makes the logo appear a little bit blurry.
-
1:24
This happens to a lot of vector shapes, because the paths
-
1:26
are not completely taking up 1 whole pixel.
-
1:29
They're taking up a little more or a little less.
-
1:31
Sometimes, for it to appear perfect, we'll need to manually
-
1:34
adjust the shapes.
-
1:36
Now, in CS6, we'll need to head to Photoshop,
-
1:38
Preferences,
-
1:40
and General,
-
1:42
and head on over to the very last check box here
-
1:44
and uncheck Snap Vector Tools
-
1:47
and Transforms to Pixel Grid. Press Okay.
-
1:50
Turning this option off will let us manually
-
1:52
adjust where the paths fit into Photoshop's pixel grid.
-
1:55
You'll want to turn it back on if you're drawing shapes in Photoshop, later.
-
1:59
So, let's go ahead and right-click and select the shape.
-
2:02
So, we can see the paths that make up the vector shape, now.
-
2:06
First let's go ahead and zoom in on
-
2:09
the icon, here.
-
2:11
As you can see, this part of the paper airplane
-
2:13
is not a perfectly straight line,
-
2:15
and because of this, it's causing some fuzziness in the logo.
-
2:18
So, if we navigate over to the Toolbar,
-
2:20
and select our Direct Selection tool,
-
2:22
we can grab the anchors on our path,
-
2:26
then we can use the Right arrow
-
2:28
to nudge it to the right.
-
2:30
We can see now that the line is beginning to appear
-
2:32
sharper, and we'll do the same thing for this anchor.
-
2:36
Now, let's move on down to this horizontal line, here.
-
2:39
Click on the top-left and top-right anchors of this line,
-
2:43
remembering to hold Shift,
-
2:46
and let's go ahead and use the bottom arrow
-
2:49
on our keyboard to nudge it down,
-
2:51
and for the bottom-left and bottom-right anchors,
-
2:53
we will nudge it up a bit.
-
2:55
So, if we zoom out, we can see how much better
-
2:57
our logo is beginning to look.
-
3:00
So, moving down to the type,
-
3:02
make sure to be careful--text should and will
-
3:04
have anti-aliasing, especially around the curves
-
3:06
where letters should appear smooth.
-
3:09
So, only adjust the areas of the vector shape
-
3:11
that should have a sharp, clean edge.
-
3:13
We'll just fix the top and bottom of the letters
-
3:15
and leave the rest alone.
-
3:18
To move around the canvas when you're zoomed in this close,
-
3:20
just hold down the Spacebar.
-
3:23
[mouse clicking]
-
3:47
So, if we zoom out back to 100%,
-
3:50
we can see that our logo is very crisp and sharp.
-
3:53
Pixel hinting and snapping your vector shapes
-
3:56
to grid will result in a much cleaner, crisper design.
-
3:58
Training your eye to be aware of the overall design
-
4:01
down to each and every pixel
-
4:03
is what will set a good designer apart from a great designer.
-
4:06
If you'd like to see more advanced videos and tutorials
-
4:09
like this one, go to TeamTreehouse.com,
-
4:12
and start learning for free.
-
4:14
[treehouseā¢]
You need to sign up for Treehouse in order to download course files.
Sign up