Free template for web designers: Monitor Resolutions Guide

For all you designers out there who are getting tired (like I was) of always creating the same document over and over for your website design, here’s a Photoshop template to make things a little easier. This document has a layer group which includes white masks for all the most common monitor resolutions, organized in descending order of popularity. You can enable visibiity of each layer to make sure that your background images show up properly at the most popular resolutions.

Instructions:

1. Download the Monitor Resolutions Guide (Photoshop format)
2. Copy the Monitor Resolutions layer to the top layer of your Photoshop document. (Or if you’re starting your design from scratch, create a new layer in this document below the Resolutions layer.)
3. Enable the layer for each resolution size that you want to check. Depending on your design, you may want to create a mask with a gaussian blur on the edges so that your design gradually fades into your background page color.

Another helpful tool: If you want to see how your site appears in various resolutions, check out the Web page Screen Resoution Simulator.