Face-pasting Using Photofuser

Transferring your face onto something (pictures of) can do done in five to ten minutes, by your grandmother if she is using Photofuser. This instructable shows how to transfer your face to a flaming bonfire , but the same technique can be used to put your face on fruit and vegetables, smooth walls, etc.

Photofuser is an easy and free to use HTML5 webapp for taking a bit of "Artistic License" with your pictures. HTML5  means that it runs entirely inside your web browser, there is nothing to install, and it doesn't require any plugins. For artistic license, read "lie outrageously".

Photofuser is currently in beta so if you spot any problems, the authors would love to know about it.

The key concept in Photofuser is cutting out polygonal or blobby areas from one picture, and pasting them onto another picture. The pastes can be resized, rotated, re-colored and arbitrarily warped as needed.

In this instructable, you'll notice numbers before each of the "mini-steps". These numbers correspond with the red arrows and numbers on the pictures.  

1: Point your favorite browser at http://photofuser.com. Firefox and Chrome work best, Opera isn't bad, IE9 mostly works, and Safari hasn't been tested.

 2: Once the page comes up, click on the button labelled "Use photofuser". That takes you to the Photofuser application itself.

3: Click on the "Load" tab.

4: Use the "Choose file" options to load a picture of a face for the "Cut from" image. If you are using Chrome or Firefox, you can simply drag-n-drop a picture from a directory folder.

5: Do the same to load a picture of a fire (or fruit) into the "Paste to" image.  For this instructable, I used http://commons.wikimedia.org/wiki/File:MidsummerNightBonfire.jpg

6: Click on the "Cut&Paste" tab.

7: I'm going to zoom in on the fire because it will make the pasting a bit easier.

8: Click on the "Cut outline" tool button.

9: Click in a clockwise direction around the face to define the part of the face you want to paste. [It doesn't really matter whether you go clockwise or counterclockwise, you just can't cross or double-up on your own path]. You should notice the same outline appear on both image panes. 

10: Click on the "Select outline" tool button to bring up handles for the outline.

11: The filled circles on the hollow circle surrounding the face are rotate handles. Drag a rotate handle with the mouse to rotate the outline.

12. The filled squares are resizing handles. The corner ones enforce proportional scaling while others allow you to change the width and height separately.

13: Drag inside the outline to position it more accurately.

14: By default, Photofuser only shows a small set of tools so that new users don't get overloaded.  We'll need a bit more than that, so click on the "More stuff" button to show all the tools.

15: Our next few steps are to give the face the same coloration as the fire. We do this using a feature called "Match tones". But before we enable Match tones, we need to indicate where on the pasted image we want the coloration to match. To do so, we use the "Modify usage" tool, so click it's button.

16: Now, you can either click on each of the pins defining your outline. Or you can drag a box that encloses all the pins. The pins will change from being hollow circles to hollow boxes.

17: Press the button for enabling tone matching. The outlined face should now be "tone-matched" to the flames beneath it.

My face looks a bit washed out so I'm going increase the contrast of it a bit in the next step. If you are satisified with your face, you can skip the next step.

18: press the Effects tab.

19: Click on the face picture will bring up the Image Processing Effects window dialog. This can take a few seconds so be patient.

20: Drag the Preview Glass in front of the face. The preview pane shows you what an applied effect will look like. Some of the effects take a long time to compute on the full image.

21: Select the "Brightness and Contrast" tool.

22: Adjust the "Contrast" slider, and possibly the "Brightness" slider until the image in the preview pane looks satisfactory.

23: Press the "Transform entire image" button, which will apply the effect to the entire image.

24: Press the "Done - Use image as displayed" button. This will cause the Image Processing Effects dialog box to close.

25: Return to the "Cut&Paste" pane by clicking on the "Cut&Paste" tab.

26. To hide the boundaries of the pasted image, I'm going increase the feathering to 6. Feathering tapers the edges of the pasted image, that is, it makes them partially transparent so the seams are less visible.

27: I'm going to make the pasted image partially transparent so the texture of the underlying flame shows through. Do this by adjusting the opacity slider.

28: As a final modification, I'm going to warp the pasted image. Warping is like tugging on a rubber sheet that our picture is painted on. We start by selecting the "Move pin" tool.

29: Drag a few pins in the "Paste to" image pane.

30: To save the image, click on the "Save" tab.

31: Click on the "In JPG format" button. If your browser is anything except Chrome, this will bring up a dialog box with your picture in it. If you are using Chrome, you'll get a file save dialog box or your picture will be saved to your downloads directory (depending on your browser settings).

32: If you aren't using Chrome, right click on the image that came up and select the "Save image as" item.

Note: By default, Photofuser will put a watermark on the bottom of your picture. You can tell it not to by clicking on the "More stuff" button on the "Save" pane and unselecting the watermark checkbox. Then do the above two steps as usual.