Manipulating A Picture To Fit Theme

 

 Have you ever wanted to create a theme using a picture that, let's say, had more than one person in the picture but they weren't all side by side with each other? And if you've made themes before, you know that there isn't very much space, height wise, in which to use to create your theme. 

So for this tutorial I'm going to be using my now standard template of 5200 pixels wide (for extra wide screen resolutions) by 200 pixels tall. In the end, depending on what I choose as my background, I may crop some of the width from my theme. For now, let's get started.

I'm going to use this Disney's The Little Mermaid poster. As you can see, there are a number of characters (as well as other elements) that can be used in a theme. Now just for reference, the image below shows two dotted lines across the poster. Those lines represent the height of my theme template. And from that example, you see just how much of the poster would not be seen if you simply just cropped it and used what you were left with.

So how do you utilize more of the poster to create a theme and still have it look nice? I'll show you. What you see below is my theme template with the poster added in a new layer. I didn't have to resize the image in this instance though. It was already a nice size, but sometimes pictures are much too big and will need resized to use effectively. HINT: A larger image is usually better because it will more than likely give you a better quality image. And that's what you want.

Now what I did was move the image to the very right edge of my template. Then I duplicated the layer.

What you want to do here is move that duplicated layer around until you get another character into view and place that character where you want them to appear in your theme. Since you can see King Triton's torso to the left of Ariel, that's where I want to place him. Like so:

 

 

  Here is where it gets fun. You can do the next part in a couple ways. A quick way is just to select your eraser tool with a soft round brush and just start erasing parts of the duplicated poster. But I personally like to use a Layer Mask. This way if I have to undo something, it's very easy to do so.

You use a solid black paintbrush color to "erase" or solid white to make visible again on a layer mask. At this point I take my brush and remove part of the duplicated image so that it blends with the original image.

You will want to make another duplicate of your original layer and make sure that it's over top your previous layer. With this layer I think I can get Ursula and Eric in the image field without issues.

I have a layer on my template called New Guide which shows me approximately how the theme will display depending on whether a person has various elements of their header visible or not. When it comes to people's faces, I like to keep them above the bottom line if possible. So, as you can see from the image below, I don't have to put Ursula and Eric in separate layers. 

At this point you want to blend the newest layer with the existing ones by once again either using a layer mask or the eraser tool.

For this layer I did change the size of the brush I was using a couple times in order to get a more detailed blend. For instance, the area to the left of Triton's arm. Even though this layer is over top of the Triton layer, I wanted the eel next to Eric to seem as if it is coming from behind Triton's arm, not over it.

Now that we have all the characters from the poster in view, it's now just a matter of finishing it up. But there is one little thing that's bugging me, and that is the fact that the top of Triton's head can be seen in the last layer I did. Now granted, it's not likely anyone will see it. I just choose to cover it up. And I'll do that by making another duplicate of the starting layer. For this, I'm going to use a turtle from the image.

After editing.

Now what I'll do is take the eyedropper tool and select a color from the very left edge of what you have so far. In particular, the dark water.

Once I have a color selected I want to fill a layer behind all the image layers that I have in place. 

Normally what I would do now is use a soft paintbrush to "erase" the left most edges of the images. In this instance, I've decided to, in a new layer over top the others, paint over the edge to blend it in with the background color. Really just enough to hide the harsh edges.

At this point you can choose to save it as is. I decided to add a little something more to the left area. I once again duplicated my initial image layer, moved it to the forefront of the layers to add a couple of the fish on the right side of Ariel over top of the back end of the turtle. One more thing I decided to do was add a picture of bubbles under water that I downloaded from the stock site Unsplash. In particular, an image by Douglas Bagg. 

Now I did use a layer mask to erase part of the bubbles near the fish I last added. I also played with the blend mode of the bubbles layer. I also lowered the opacity of the bubbles and, in a new layer over top of the bubbles layer, I colored just over the bubbles with my background color and changed the blend mode of it so that there wasn't any unwanted colors flowing into the background color. 

Now I'm done. And I decided not to crop any of width from my image because when I went to save it, it wasn't an excessive file size. So I left it as is. 

 

Now I'll take the image into Firefox Color and get it ready to upload. :) You do NOT have to use Firefox Color, of course. You can just take your image directly to the Submit a New Add-on page on Mozilla. Firefox Color just gives you more customization options. I hope this has been helpful.

The theme can now be seen in action here:https://addons.mozilla.org/en-US/firefox/addon/disneys-little-mermaid/