One of the things I do often as a working graphics guru, is use found/purchased images in fun and different ways to get an end product my client is happy with. Sometimes I can afford the time to go and get my own images. But scouting a location, collecting the shoots I need and then going through them is a process that can be long and wasteful. Which a lot of times is not in my clients budget, or doable based on my deadline schedule.
In these cases I have to fall back on a number of tricks and skills that can save me time, but deliver an awesome end product that fits my clients needs. In this short tutorial I will go over creating “header” or “banner” style images, which can be used in many different web applications. I work mostly in Photoshop and on a PC so keep that in mind as you follow along, the tools I will outline and mention normally have equivalents in most other graphic programs.
The image I am starting with is a couple of sail boats at dusk. I am going to fit this image into a 940 x 198 pixel banner (compatible with WordPress headers), so I search for a big image. It is important to also find a high DPI or high pixel count image when you are planning a project like this. Make sure you save the file and don’t overwrite it, often I will save and image as “sailboats_src.jpg” or something along those lines.
Doing both of these steps will help you out in the long run. It is always easier to shrink and image than it is to blow it up. The nifty “enhance” trick made fun of in Super Troopers and often seen in shows like CSI is complete bullshit. Yes you can do it.. But it is massively time consuming and just a waste, plus your end product will look grainy or pixelated.
After a quick search on Google I have a 1024 x 768 image I want to use. After dragging it into my template I end up with something like this:
You will notice that it doesn’t quite fill my work-space, I have a big chunk of white to the left of the boats that is a bit out of place.
This is what I will focus on fixing to make the image which is not at the right ratio, look right. There are a few ways to do this, painting new information in is more artistic but ultimately almost as involved as going and taking the shot it wanted in the first place.
I could drag another image in, to hide it, but that isn’t what I want, I could clone it, which works but can look to “doctored”. So what am I gonna do? Mix all three of those methods of course!
First I will cut and paste the image in again. It some in on-top and I have gone ahead and used ctrl-t to transform the image so you can see the outside bounding box. You can see in this example how big the image is and why I couldn’t just shrink it down to get what I wanted.. the Ratio is just to far off.
This is the Layer box, or Layers Menu. As you can see the image I dropped in is currently “on top” of the other image, so it displays as if it is physically on top of the other image. A good way to look at layers is just like that, each one is a new “photo” that has been dropper onto the stack.
However “Layer 2” is not the layer I want on top, so I will simply use the drag and drop feature to place it below “Layer 1”. This way the white space on the left is covered up, just as mentioned above this is one of the ways I could have fixed the banner…
This is not enough however it is only part of what I plan to do in the long run. Simply covering the white space still leaves something to be desired. And this is what we end up with..
Now I need to get it the way I want it. There are a few different methods for getting this done, but what I will do is use the Transform tool or ctrl-t to move it, resize it, twist it and even distort it until it looks good and like something I can use.
Here what I mostly did was shrink it to almost the right size and then distort it by stretching it to get the mountains and water where I wanted them. Again I left the transform tools bounding box up so you could get an idea of how much I tweaked the image.
From here we are getting pretty damn close. In my lazier moments I will toss some text, or even just a thick black line over the image to disguise the “weld” line but that isn’t enough for this project, so I will get into using my skills as a painter and the clone tool to get rid of that line and make this header really work.
Below you can see what I have started to do, and as in most good art projects, I started by making a
mess, that then needs to be refined and perfected into a finished piece.
From here I start to pull out all my tools, burn, dodge, smear, and even some digital painting will go into making a finished piece. This is really where you have to decide how you want to work, with what tools and how fast. Remember MAKE A MESS! Then refine it, also make sure you are looking at the whole piece as much as you can.
It can be tempting to zoom in and get lost on details, but my warning is this: You will waste time, and you will lose what you are working on. The zoom feature is awesome, but your audience won’t see it zoomed in… so you can make the corner perfect! But no one can see it and it doesn’t match…
And there you have it, I will continue to weak it a little one way or another, but I am happy enough to show my client and move on to the next part of the process. I would stress that this is however a small element and just a draft, a final may include a different picture or even more refining.
- Cloned Self Portraits (mikevictorinophotography.wordpress.com)
- 10 Killer Photoshop Tricks (aybanlim.wordpress.com)