Pro Blog Design

Have you seen screenshots on other blogs and wondered how they made something plain look so vivid and unique?

Engaging your readers with beautiful graphics isnʼt as hard as you might think! This tutorial will teach you how to create more eye-catching screenshots with just a few simple techniques.

From Michael: From last week’s polls, I’m trying to work with more than just Photoshop in these tutorials now. All of the screenshots here are from Photoshop, but I’ve added instructions for finding all of the settings in GIMP as well.

Gimp is a free graphics package which Windows users can download here. Let me know if you use the Gimp help here please, so I know to keep it up.

1 – Screenshot Something

Take a screenshot of the web page, program, or document you want to show off.

Once youʼve done that, open the picture in Photoshop. For this example, Iʼve taken a screenshot of the web tool RSS Forward.

Next, crop the part you want to emphasize. To do this, draw a selection around the part you’re keeping and go to Image > Crop.

For Gimp: Image > Crop to Selection.

2 – Switching the Perspective

Changing the view perspective makes the screenshot much more interesting.

First, hit Ctrl+N (Or Cmd+N) to create a new layer. Use the Eyedropper Tool (In the screenshot) to choose the background color of your image, and then use the Paint Bucket tool to fill the layer with that color.

Now, drag that layer underneath the layer with your image. We do this so that when we change the perspective of the image, white spaces won’t show up!

To make the screenshot more appealing, weʼre going to adjust the perspective, using the Free Transform Photoshop tool. Simply select the entire screenshot (Ctrl+A, or Cmd+A) and right click, then select Free Transform. Right click again to find the Perspective Tool.

For Gimp: Tools > Transform Tools > Perspective.

Now adjust the perspective until you find an angle you like. This could take a few tries to get used to.

3 – Further Emphasizing Certain Screenshot Elements

Letʼs say I want to make a part of my screenshot stand out even more, for example, the input bar of the application. This can be achieved through slightly blurring the elements surrounding it.

Select the Polygonal Lasso Tool and draw a tilted rectangle selection around the text field.

In Gimp: Use the Free Select Tool, and draw out the shape (Hold the mouse down to draw freehand, or click where you would like to put down an anchor for straight lines, like the Polygonal Lasso Tool from Photoshop).

Finally, right click on your selection again and pick Select Inverse from the menu. Then go to Filter > Blur > Blur. This will slightly blur out the surrounding area. Feel free to experiment with the other forms of blurring to get stronger effects, or different ones altogether.

In Gimp: Make your selection, then go to Select > Invert. Then to Filters > Blur > Blur.

4 – Adding Lighting Effects for Intrigue and Mystery

Now comes the fun part. Once youʼve found a perspective you enjoy, and slightly highlighted the element you want to be most apparent, you can add some mystery to the screenshot by adjusting the lighting.

Select your entire screenshot, then go to Filter > Render > Lighting Effects.

In Gimp: Go to Filters > Light and Shadow > Lighting Effects (The settings you use will be different, but the tool is the same!).

A window will pop up where you can adjust the lighting preferences. Select Omni from the type and set intensity to 34. Then position the lighting above your screenshot, as seen below. The light should be used to highlight the focal point of your image.

Once you have these set, feel free to adjust the Exposure and Ambience levels to your liking (I used 1 and 1). My result looked like this:

5 – Final Cropping

Distorting the perspective and playing with the lighting and hightlights has changed your image. You may now decide that there’s too much blank space to one side, or you want to cut something more out. Feel free to crop the image again!

The background color should be close enough to your original that the small corners wonʼt matter. But if your image was large enough to begin with, you may be able to crop the picture inside these edges to get rid of them! (I’ve just trimmed the image a little here, borders are still visible).

6 – (Optional) Color Adjustment

If you want to add just a little more mystery to your screenshot, you can adjust the color levels to twist it whatever way you like. Go to Layer > New Adjustment Layer > Color Balance. This will add a new layer to your file, which affects the color of all the layers below it.

In Gimp: You can’t create a new layer for this, but you can apply the exact same settings to a current layer. Select the layer with your image, and go to Colors > Color Balance.

You can change settings in Midtones, Shadows and Highlights, to really get the effect you’re after. Here are some of the settings I used:

We’re only touching on the basics of color adjustment here. If you want to learn how to manipulate your photos and screenshots properly, make sure you read Creative Curio’s excellent guide to color correction.

And here’s my final image:

So there you have it! A much more interesting screenshot that will intrigue your readers and liven up your content.

Do you use any other tricks on your post images? Show off any you’re proud of from your own blog!