When making a web design prototype (or any other graphic) in Photoshop, I always like like everything to be pixel-perfect – this means the edge of my vector shapes will be perfectly straight.
The great thing about using vector shapes in Photoshop, over raster shapes, is that they are infinitely re-sizable without “pixelation”; this is just how Adobe Illustrator works, and that is what makes Illustrator a great tool for making logos.
The Problem
I have found that when you create a shape using Photoshop’s shape tool, the lines can often end up fuzzy – this is because they are not lining up to the documents pixel grid, and Photoshop automatically anti-aliases them.
The Solution
The solution to this is very easy, I will guide you through it step-by-step:
- Make a new Photoshop document.
- Click the shape tool (this can be a rectangle, a rounded rectangle, etc) – See Image 1 below.
- To demonstrate the issue, zoom in further than 100% (Photoshop automatically snaps to pixel when you are zoomed at 100%, however, this is not always accurate enough), now drag out your shape – unless you miraculously dragged it pixel-perfect, your shape will more than likely have fuzzy edges and can hinder your web design.
- Once you have your shape tool selected, click the more options arrow in the toolbar – See Image 2 below.
- You will notice that towards the bottom of this box, there is a check box for Snap to Pixel. Check this.
- Now when you draw a shape at any level of zoom, it will automatically snap to the nearest pixel and give you perfect lines every time!
Conclusion
I hope this quick tip will help some of you, as it will now help me for many years to come, I’m sure!
Image 1 - Select the shape you would like to use
Image 2 - Select more options, then check Snap to Pixels
Thanks for this… such a simple thing, but so annoying when you don’t know about it.
Thank you! Can’t believe I’ve never noticed that check box! How many times I’ve cleaned by edges after using the shape tool…
You may have saved my life.
Not a problem!
Ahhhh, thank you. This had been driving me crazy for YEARS.
I don’t have the “snap to pixels” option in my Photoshop CS3. Is there another option.
wow…. thank you very much….
God! This is amazing. Those blurry edges were driving me crazy!
Thanks, But its get fuzzy border, after resizing the shape. Any solutions?
Is there a way to make pixel perfect lines? I often have problems with blurry lines in PS, especially vertical ones…