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
