Photoshop: Tips and tricks for working with images that are too small

Finding the perfect image to use for a blog post, newsletter, website design or flyer can pose it’s challenges, especially when the images you want to use are too small for your design. Here I’ve put together some simple tricks you can use to make your images look great and work for whatever project you’re working on.

What do you think? Have you used any other techniques to modify small images for your projects? Do you have any additional questions regarding these approaches? Please share in the comments!

---

Transcript:

1. Photoshop: Tips & tricks for working with images that are too small Corrine Soave, Web Ascender [email protected]
2. Whether you’re working on a blog post, newsletter, website design, or flyer, finding the perfect photo for your project can be a challenge. What’s more challenging is finding the perfect photo only to have it be too small to use.  Making the image larger won’t solve the issue. The photo will lose quality when it’s expanded. However, there are a couple creative tips and tricks we can use in Photoshop to make up the extra pixels.
3. Blur the Background
4. In this example I use a web design layout in Photoshop but the ideas can be applied to any kind of project. Many times when we’re working on a website design we’ll find images that would be perfect to use but the image is too small to fit in the designated space. Let’s say I have a layout for a website that uses a full width image that’s 920 pixels by 345.
5. I’ve found the perfect image to use, but it doesn’t quite make the cut when it comes to size.
6. There’s enough height, but not nearly enough width. What I’ll do first is right click on my dog photo layer and duplicate the layer.
7. Next, I’ll select the bottom layer (the original layer) and use the transform tool to increase the size. I’ll make it just large enough to cover the needed space.
8. As you can see, increasing the image drastically reduced the quality. In this instance that’s ok because we’re going to make it blurry, anyway. With the layer selected I want to go to “Filter > Blur > Gaussian Blur”
9. I’ll bump up the blur radius until I’m happy with how it looks.
10. Next, I’ll clean up around the top layer so it blends with the background. Then I’ll add an image mask to the layer and use the erase tool with a soft edge just to get rid of the hard sides of the image.
11. Now that I’ve got the edges cleaned up, I’ll crop out the extra space so the image fits nicely in our 920×345 space. Above you see the final result.
12. Copy or Extend the Background Another technique we can use to increase the size of our image is to duplicate the background. This works well with the image we have since the grassy background will make it easy to hide any seams.
13. The first step will be to copy the layer and flip the layer horizontally using the transform tool.
14. Then I moved the image all the way over until it was edge to edge with the old image. Because we flipped the image horizontally, the image is perfectly reflected and lines up with the original image.
15. I can crop the image to be the size I need. However, I still have some of the reflected dog in the photo, and I want to clean up the seam of the reflected line.
16. I’ll use the stamp tool to fix the seam and get rid of the extra dog. If you’ve never used the stamp tool, it takes some getting used to but it’s great for fixing images like this. Essentially what it does is duplicates a small section of the image and copies it onto another. I’ll go more into depth with the stamp tool on the next slide.
17. With the stamp tool selected, I’ll take a sample of grass near the seam by holding down alt and clicking. This is what we’ve “copied.” We can then hover over the seam we need to cover, click, and “paste” the copied section over the part we’re trying to cover. I’ll repeat this step a few more times until I get the seam cleaned up and the extra dog covered. In the end, we’re left with a seamless photo of a dog lying in the grass.
18. Adding a Gradient Overlay Another way to make an image look bigger is to add a gradient overlay.
19. First, I’ll create a new layer the exact size the image needs to be, 920×345, and place it over the original dog image.
20. Next, I’ll change the “Fill” of the layer to 0. Then I’ll double click my layer and add a Gradient Overlay. I’m going to change the angle of the gradient so it goes left to right by changing the angle from 90 to 0.
21. I’m going to change the colors of the gradient to be a green similar to the color of the grass.
22. Next, I’ll change the opacity of the first slide color to 0.
23. I can use the sliders to adjust where my gradient starts and ends to cover the edge of the dog photo and create a seamless blend.
24. Graphic Elements and Text If all else fails, getting creative with graphic elements and text can help make up for the lacking image size
25. In the example above I created a diamond pattern to imitate the grass with the Photoshop shape tool and placed the shapes over my dog image. Then I grouped the shapes and added an image mask to the group so I could use the erase tool to fade the pattern into the dog image. Once I had everything blending together I added my text and created a new box to outline the type.
26. Just because an image is too small in it’s original state doesn’t mean it’s completely useless. With a little creativity and Photoshop knowledge, almost any image can be implemented in a design. Corrine Soave, Web Ascender [email protected]