How to Make Exciting Screenshots (In Photoshop or Gimp!)
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!
Enjoy this post? Get future updates sent to you for free! Join by email or RSS.
About the Author - Michael Martin is the founder of Pro Blog Design. He works as a freelance web designer, loves WordPress, and has an unhealthy addiction to smilies. Written on 13th November 2008.
Other posts tagged with Color, Gimp, Photography, Photoshop, Post Images, Screenshots.
13th November, 9:08 pm GMT
Awesome post, I definitely need to start utilizing more screenshots.
13th November, 9:46 pm GMT
Interesting! For websites I prefer to take screenshot with Safari and Command + Shift + 4 and then Space followed by a click on the wanted windows. It makes a beautiful PNG that I resize with Photoshop.
Demo here:
http://www.geekandhype.com/200.....-en-ligne/
13th November, 10:45 pm GMT
Nice post, something that's never really considered much.
14th November, 12:25 am GMT
Excellent article and tutorial, creating a visually stimulating screenshot can do a lot to dress up a blog post or any presentation for that matter. I will definitely be using some of these tricks in the future. Nice work!
14th November, 12:45 am GMT
Nice tutorial! Thats what I like seeing from you Corey!
Keep it up!
14th November, 4:13 am GMT
Sweet tutorial, dude; I used it for an element on my as-of-yet-woefully-unfinished site redesign. I'm still very much learning GIMP, though, so I stumbled a bit through the tutorial; still, I'm happy with the final result. Thanks again!
14th November, 4:42 am GMT
Quick note: The "about" part says "he" and I'm a girl.
The avatar is even female, haha. Thanks for posting the tutorial! I'm glad so many people are enjoying it!
@Adam & Brad
Thanks!
@Lee Monroe & Jeremy
It's not really something you think about, but when you see them they look really cool.
@Rick Beckman
Just keep trying dude!
It takes a couple of tries to get the lighting and perspective parts down, but after practice it takes maybe 5 minutes at best.
14th November, 5:01 am GMT
FAIL! My bad, Corey, no insult intended! I know what I did: I saw the name Corey and immediately thought of Corey Feldman and made the apparently dumb assumption that it must *always* be a guy's name.
Well, you probably didn't care about all that, but there ya go.
Thanks again for the tutorial. I'm pretty happy with the result I got with it -- I didn't use the lighting or color effects, though, as the screenshot was of a mostly black/white site.
14th November, 5:03 am GMT
Awesome tutorial which deserves a stumble! Somehow you make it so easy to understand amidst the tens of options on the photo editor. Thanks for sharing!
14th November, 11:09 am GMT
Great tutorial indeed. I make a lot of screenshots while working, and i've never thought of this idea. It is really helpful and it injects life in the screenshot. Something that is really recommended if you want to be different from others.
14th November, 12:15 pm GMT
neat
14th November, 4:25 pm GMT
Great tutorial, decent screenshots can make or break a project!
14th November, 5:08 pm GMT
Nice tutorial Corey! I'm starting to experiment more with lighting effects myself; they can really spice up a graphic! They make for a sleek gradient effect too (and sometimes they're easier to control than gradients).
Oh, and thanks for mentioning the Creative Curio article!
16th November, 5:55 pm GMT
Nice tutorial.
Thanks
17th November, 12:33 pm GMT
Just saw a link to this post in your comment on my blog.
This is a fantastic post! It's one of those things you really don't think about (or I don't, at least), but it can make a huge difference.
Awesome.
20th November, 1:39 pm GMT
Thanks for the GIMP instructions. I recently got a new Mac, and installed Gimp and OpenOffice. So far, I haven't needed to touch Word, Excel or Photoshop on the old computer. (Knock on wood.)
24th November, 6:00 am GMT
Nice tutorial Corey, I'm working on an e-course about image and graphic design for blogs. I'll link to this site as a resource. Thanks for the great content.
24th November, 5:20 pm GMT
amazing, great tut
24th November, 5:39 pm GMT
Great tip, I've been looking for a creative way to display screen capture fora while. Usually if I need to highlight one specific feature I'll leave it flat and use illustrator to draw a "sketched" outline around the featured part but this is a great way to draw attention to the post as a whole rather than a part of a screen capture.
25th November, 5:33 am GMT
this tuto is very nice . this is learnable tuto; thnx
2nd December, 4:45 pm GMT
Awesome. I was searching for this for a long time. Thanks
4th December, 5:04 pm GMT
This is a fantastic tutorial for making a great screenshots. Thanks a ton for sharing this.
5th December, 2:00 am GMT
Thanks for the great tutorials, now i just need a time to explore back my image library to practice
5th December, 12:15 pm GMT
You just made me shoot up Photoshop instead of MS Paint for a screenshot. I don't think I can adjust the perspective well, I just don't seem to have total control.
This is how my first attempt looks like: http://www.sheeptech.com/techn.....k-now-live
I have only followed the first 3 steps, as I think it's good enough for a general website screenshot. Definitely looks way more interesting. Thanks for great tutorial, will bookmark and practice more with my future screenshots.
12th December, 1:14 pm GMT
Thanks! This is great. I'm using it already!
14th December, 4:09 pm GMT
Wow!!!!!!! You captured my attention with this process.
I am not a designer at all... I write on ehow.com. One day I needed to do a screen shot and for me that was a challenge!
You explained this and used such great picture steps, that even I can understand the process. I may try my hand at this. Thank you for writing such a great tutorial.
ALRADY
12th January, 4:47 am GMT
Great Article, i will try it.
Your design look nice.
27th June, 1:01 pm GMT
I would suggest to had some lens blur for a more realistic effect (that works better than a simple blur)
1 - Just create a selection (with feather, adjust pixel radius according to image size) on zone you want to focus the lens.
2 - Layer > MayerMask > Reveal selection
3 - On layers window, select now the image (not the mask), and go to Filters > Blur > Lens Blur.
4 - On Depth map Choose the layer mask, and click where you want to have the focus on. Play with setting (radius, etc...) until you reach something satisfying, and validate.
5 -On layer window, you can now right-click on the layer mask and delete it.
You could too add some more blurring effect.
1 - duplicate you layer
2 - add some gaussian blur on the new layer (must be on top of the original one), and set its transparency as overlay, or soft light, or lighten depending on what effect you want.
(adding this effect with the lighting one looks perfect)
Have fun
(NB : i don't know if those processes can be accomplished with Gimp, i use Photoshop)