Being able to create perfectly sized screenshot images of websites is a must-have skill for every web developer’s toolbox.
Here are just a handful of instances where you may need this technique:
- Creating screenshots of sites you’ve built for a portfolio
- Sending previews of work to clients
- Submitting your work to a site like http://onepagelove.com
- Sharing your work on a site like http://dribbble.com
- Creating a thumbnail of your custom built WordPress theme
In this post, I’m going to focus on the last example, screenshots for WordPress themes, but you should be able to apply the steps to whatever your screenshot needs are.
Let’s get to work…
The finishing touch of developing your own WordPress theme involves creating a screenshot of your finished product, which is what will represent your theme in the wp-admin Themes listing. For example, my theme Teal and Tonic is shown here with its screenshot:
According to the WordPress Codex here are the requirements for a theme’s screenshot:
- Image should be 880 x 660 pixels in size.
- Image is named
screenshot.png. The docs specify that the file type should be
.jpgwill also work.
- Image is placed in the main directory for your theme.
- As far as WordPress development goes, this is not a complicated process, but initially I found capturing the screenshot in the correct size to be frustrating, especially as I did not yet have access to the super pricey Photoshop.
After exploring various free photo editing programs, each with their own pros and cons, I landed on Google’s Picasa which allowed me to quickly and easily create the screenshots I needed.
Here’s the process I use to create my screenshots:
1) Download Picasa
Download and install a free copy of Picasa: http://picasa.google.com.
2) Crop pre-set
With Picasa fired up, we want to create a custom cropping pre-set.
Double click any image in your Picasa library to go into Editing Mode. Once in this mode, look for the Crop option in the top left option bar:
Once you are on the crop panel, you will see a drop down menu on the left with a list of predefined crop options. At the bottom of this drop down, find the option to Add Custom Aspect Ratio…
Once you click Add Custom Aspect Ratio, a box will pop up asking you to enter the width and height and a name for this custom pre-set. For this example, I plugged in WordPress theme screenshot dimensions of 880px by 660px. I also named the pre-set WP Screenshot so it’ll be easy to find anytime I need to create a new theme screenshot.
Click Ok to save your crop pre-set.
3) Take a screenshot
With your crop pre-set ready to go, it’s time to take a screenshot which you can apply to pre-set to.
Load the site you want to capture in your browser. Then, press
Command + Shift + 4 which will give you little crosshairs on the screen. Click and drag the crosshair over the browser window you want to capture.
When you release the keys, you’ll hear a camera shutter sound indicating your screenshot has been taken. Check your desktop for the resulting file. By default, the file name will start with
Screen Shot filed by the date and time it was taken, for example
Screen Shot 2014-05-08 at 11.03.01 PM.png
On a PC, press the Windows logo key
+ PrtScn. This will automatically capture the entire screen, but the browser menu can be cropped out easily in Picasa. The file will be saved in a folder called Screenshots that is located in the Pictures folder.
With your screenshot ready to go, let’s apply the custom cropping pre-set for perfect sizing.
Regardless of the method you use to capture the screenshot, the next step is to locate your screenshot file and open it in Picasa, then find the Crop option as we did in the first step. From the dropdown options, find the pre-set you created earlier.
After you choose your pre-set you will see three cropping options (they look like thumbnails of the full image). Each of these selects a different part of the screen to crop down to the 880 x 660 pixel requirement. When you click on these, you can see which part of the image will be kept, because the area that is going to be cropped is grayed out. You can click and drag the box around on your image to adjust what gets cropped.
Once you have the image centered, click Apply to apply the final crop.
Saving in Picasa is a snap: go to File > Save As…. If you’re creating an image for a WordPress theme preview, you’ll want to name your file
4) Theme preview
If you’re creating screenshots for WordPress themes, the final step is to upload your screenshot. To do this, find your theme’s folder in your
wp-content folder and upload your
Now, when you or anyone else installs your theme, they should see your screenshot on the wp-admin Themes page.
And that’s it. Not too shabby for a free piece of software, right?
If you have any questions or issues with this process, don’t hesitate to reach out to us on the forum.