Anna (shoqolad) wrote in icon_tutorial,

extending backgrounds

This is a little tutorial on how to extend the background of an image. I'll try to explain 3 different techniques I use. I tried to explain everything as detailed as possible. If there are any questions left feel free to ask away!
I'll start with what I feel like is the easiest way to extend the background of an image and then get to the more difficult techniques. But this isn't all that hard.
The coloring of the icons is not included.

Program: Photoshop CS2

extending backgrounds

using the smudge tool
using the rectangular marquee tool
using the clone stamp

To make the tutorial a bit easier to read I decided to not include every detail in the text. The more detailed explanations (things like adding new layers or where the tools are located) are linked in the tutorial. You can find them at the bottom of the page or by just clicking the appropriate links in the tutorial text.


I'll start with this icon. It's fairly easy since there's only that corner of the wall in the background.


This is my base. A base like this one is pretty easy to work with. If it wasn't for the window above Peter's head or the corner of the wall above Olivia's head you could just smudge the background out over the white part of the canvas.

Of course that's what you can do here, too, by just smudging over the window and the wall corner. But the result you get looks a bit more unrealistic than the alternative (at least in my opinion) with everyting that's going on in the background of the image behind Olivia and Peter. It feels like that wall corner needs to be there in order to make the perspective look right.


Anyway, in order to extend that corner all way up to the top I like to use the smudge tool. (Where do I find the smudge tool?)
If you look closely at the image there's this black box-y thing right above Olivia's head and next to the corner. There's only two pixels (in height) of just the wall corner between Olivia's head and the box. So this little part is what I want to smudge all way up to the top.
I use a square brush for this. (How do I get a square brush?) In this case it's easier to work with a square brush because it gives you a straight line at the bottom. (Where do I choose a brush?)

So with the square smudge brush (strength set to 100% Where do I adjust the strength?) I drag the little bit of wall corner all way up to the top of the canvas. Make sure you smudge in a straight line, you don't want that corner to look all bendy. This is a little tricky. You'll need a pretty steady hand for this. If the line gets bendy you can just smudge over it or you can try to keep smudging in little steps.</a>


For the rest of the background I just kept smudging the wall up until the entrie white part of the canvas was covered.


In order to smoothen things out a bit I used my favorite brush (made by inxsomniax) set it to a smaller size (about 10-20 pixels Where do I adjust the size?) and lower strength (about 20-30%) and smudged happily around until it looked right-ish.


Then you can go ahead and apply your coloring. Sometimes the background starts looking pixelated. To smoothen things out again, just use the same technique again. First you'll have to either merge all layers down or copy merged and paste as a new layer. (How do I do this?)


This is my result after smudging the background.


The second one is a little bit more difficult with all the light reflections in the background.


This base is a little harder... if you want it to be. Again, you could easily just smudge out the background all around Sam and Dean and have it all blank... which is exactly what I did at first. But I felt like that didn't really work with the image. So I decided to use the light reflections from the windows to fill the background.


First I did what I did with the Fringe icon. I used a square brush to smudge the background all the way up to the top.
Now while there is the pattern from the reflection of the windows on the bottom left half of the image, there's just a straight vertical line in the top half.


I used the rectangular marquee tool and selected the window pattern. (Where do I find this tool and what does it do?) Then I copied that part and pasted it in as a new layer. (How do I do this?) I draged this new layer all the way to the top of the canvas. I added a layer mask to hide the bright part at the bottom of that layer and make it blend in with the background of the base. (How do I add a layer mask and how does it work?) This is my result.


I used the same technique for the reflection behind Sam's head. I selected the area I wanted to duplicate, copied it and pasted it on top of everything as a new layer. Again I used a layer mask, this time to get rid of Sam's head. In order to complete the reflection (one little square is missing since it was covered with Sam's head) I added a new layer. (How do I add a new layer?") I used the eyedropper to get the color of the reflection (How do I do this?) and then used a small round brush to draw the rest of the reflection on the new layer. (How does this work?)


The alternative to the marquee tool is the clone stamp.


If you have an image with a background similar to this, I feel like it looks better to not just fill the top of the canvas with the wall's color but to have all those little blinky lights go all the way up to the top, too.


First I use my square brush again to smudge the background all the way up to the top. I do this in order to get the basic color I want in the background. Then I look at the lights and what else is in the background and decide what should go all the way up to the top.


I use the clone stamp set to a small round brush and click on the part I want to duplicate while pressing the "Alt" key. (Where can I find the clone stamp?) By doing this you copy the part of the image you're clicking on. When you start painting with the clone stamp it will copy the part of the image you just Alt-clicked on. So extended the lights on the right side all the way up to the top by clicking (i.e. copying) in little steps.
I could have used the rectangular marquee tool here, too, but if you want to copy small parts like I did here it's just easier to use the clone stamp.


I did the same with the lights and the wall behind Elizabeth and probably used the smudge tool to soften everything a little in the end - just like I did in the first example before.

Where is the smudge tool located?
You can find the smudge tool in your little tools window. You can switch between the blur, sharpen and smudge tool by right-clicking on the symbol and then choose the tool you need.

How do I get a square brush?
You can easily create a square brush in Photoshop. All you need to do is open a new canvas (File >> New) and fill it with black using the paint bucket from your tools palette. Then you can go to Edit >> Define Brush. A little window will pop up. Put in a name for the new brush. Click "ok".

How do I choose a brush I just created?
When you're working with the smudge or paint tool, just click on the little downward arrow in the top bar, right next to the brush you're currently using. A little box will appear in which you can find all your brushes. Here you can also adjust the size of the brush and the hardness.

How can I adjust the size of a brush?
You can adjust the size of a brush in that little drop down box in the top bar.

How can I adjust the strength of a brush?
You can adjust the strength in the top bar.

How can I merge or copy merge all layers?
To merge your layer go to your layer palette and right-click on the top layer. Choose merge visible.
To copy merge all your layers got to select and click "all". Then go to edit and click "copy merged". Then go to edit and click "paste". The keyboard shortcut for this is Ctrl+A (select all), Ctrl+Shift+C (copy merged) and Ctrl+V (paste).
I prefer the second method. This way you keep all your coloring layers and can always go back to change something or look at how you did something.

Where can I find the rectangular marquee tool and how does it work?
You can find the rectangular marquee tool in your tools palette. With this tool you can select any rectangular part of your image. For example in order to copy that part as I am about to do here.

How do I copy and paste?
After you selected the part you want to copy go to edit and click "copy". Then go to edit again and click "paste". The keyboard shortcut for this is Ctrl+C and Ctrl+V.

How can I apply a layer mask and how do they work?
Go to your layer palette and select the layer you want to add a layer mask to. Then click the third little button from the left at the bottom of the palette. A white square will now appear next to your layer. This is the layer mask. Make sure the layer mask is selected (just click on it to make sure). Now you can start drawing on the layer mask. If you draw on it with black everything you draw will disappear. If you use grey instead the layer will start fading. Using layer masks is a lot easier than using the eraser tool because you can always draw on the mask with a white brush to correct mistakes since drawing on it with white will make the layer visible again. This is what my layer palette looks in the end.

How can I add a new blank layer?
You can add a new layer by going to the layer menu at the top and then click "new" and then "layer".

Where can I find the eyedropper tool and what does it do?
You can find the eyedropper in your tools palette. By clicking on it your arrow will become a little pipette. With this you can choose a color from your image by clicking on it.

How do I draw on a layer
Just choose one of the round default brushes and adjust the size and hardness.

Where can I find the clone stamp?
The clone stamp is located on your tools palette.

Please let me know if you have any questions, if I messed something up or if any images/links don't work!

Comments are appreciated.
Tags: program: gimp, program: paint shop pro, program: photoshop, tutorial: blending
  • Post a new comment


    Comments allowed for members only

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

← Ctrl ← Alt
Ctrl → Alt →
← Ctrl ← Alt
Ctrl → Alt →