How to Make Exciting Screenshots (In Photoshop or Gimp!)
50Have 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? You should follow me on Twitter!
Awesome post, I definitely need to start utilizing more screenshots.
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/2008/10/30/mtv-music-de-la-musique-et-des-clips-en-ligne/
Nice post, something that’s never really considered much.
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!
Nice tutorial! Thats what I like seeing from you Corey! ;) Keep it up!
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!
Quick note: The “about” part says “he” and I’m a girl. :P 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
It takes a couple of tries to get the lighting and perspective parts down, but after practice it takes maybe 5 minutes at best. :) Just keep trying dude!
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.
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!
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.
neat
Great tutorial, decent screenshots can make or break a project!
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! :D
Nice tutorial.
Thanks
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. :)
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.)
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.
amazing, great tut
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.
this tuto is very nice . this is learnable tuto; thnx
Awesome. I was searching for this for a long time. Thanks
This is a fantastic tutorial for making a great screenshots. Thanks a ton for sharing this.
Thanks for the great tutorials, now i just need a time to explore back my image library to practice
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/technorati-engage-blog-ad-network-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.
Thanks! This is great. I’m using it already! :)
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
Great Article, i will try it.
Your design look nice.
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)
Thanks and also very impressed about how to make an awesome work from a simple one. I will definitely try that and Thank you for GIMP instructions as well. I love to work with GIMP..
wow, amazing and inspiring tutorila, thanks for share it man, we all need to take shots for our blogs and this will definitely help.
Thanks for sharing such a nice tutorial to better utilize screenshots. Do you have a similar tutorial for photoshop as well?
Thanks for writing this post, it’s exactly what I was looking for! I build blogs and need to screenshot my projects but they always look so bland. And my photoshop skills are SO 1999, so this is a 2fer that I’ll use a lot!
Screenshots are very helpful in giving the post a life. Like here is problogdesign they have many fabulous screenshots that’s why many are coming again and again to watch out for new post. Thanks for this tutorial.
Awesome post. Screen shots can always look tacky on a website, but editing them like this will definitely help!!
Thanks.
Thanks for this tips, I’ll do it on my blog! I’m not a designer but I try …
I’ve never really attempted to make screenshots look more exciting but this tutorial will definitely be very useful for me and then I can finally make some more interesting screenshots. Thanks for sharing.
Like here is problogdesign they have many fabulous screenshots that’s why many are coming again and again to watch out for new post
This looks amazing, but does anyone know of a programme that can do this?
The tutorial and instructions that were given is very helpful and there is a guarantee that you will be able to make an excellent screenshots.
Wow, that is really cool. So simple to do. Thanks for giving me the idea.
Great tutorial. 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. Especially since I have to do a screen shot.
Awesome post, I definitely need to start utilizing more screenshots.
Thanks for taking time out to put together this walkthrough, it’s great.
It’s nice to be able to take something as mundane as a screenshot and turn it into an interesting content element that ‘pops’ – added bonus is that you can mask or delete the elements you don’t like using this technique too.
Thanks again.
This article is truly relevant to my study at this moment, and I am really happy I discovered your website.Thanks
Nice post really nice tip for photoshop.
This article is truly relevant to my study at this moment, and I am really happy I discovered your website.
Thanks for the info,,, I love it
Although the sculpture will be drastically harmed, its accepted as an excellent illustration connected with Hellenistic sculpture.
Now however, things changed drastically. There are large wall clocks which we can use in decoration. That being the case even seemingly important objects such as large wall clocks has an important role in determining the beauty of the room.
I generally agree with your issues. We all obtain a benefit from this great article. This web-site is great. I have discovered loads of things from here. Many thanks.