Image Blender Tutorial – ‘Creating A Digital Collage’

Share

Image Blender, created by Johan Andersson, is best described by the developer: “This is a simple and clean application with a single purpose, blending together images. You can use multiple blending modes like Multiply, Overlay, Screen and many more.” It is a bit more than just this….”You can move, rotate, resize and mask the top image by choosing two images and tapping the preview.”

Even though Image Blender only allows you to work with two images at a time, with it’s flatten function you can build layer upon layer to create any possible of combinations. In this tutorial I will show you how I used four different images to create a dramatic digital collage.

We hope you will feel inspired to try Image Blender for yourself after reading this tutorial. It is one of the most popular Photo apps available for the iPhone/iPad. It retails for $2.99/£1.99 and you can download it here.

 

media_1345644665951.png

 

Each of the images that used to create my collage were brought into my iPad and prepped in some fashion before I used them to create “Captain”. I won’t be discussing how I did this…I’ll leave it up to you to create your own images to use for your collage.

The above is the final image, the one I am going to show you how to create.

Step 1

media_1345644756546.png

 

When you open Image Blender, this is the first working screen. The button/screen on the bottom left is where you pull in your base layer. The one on the right is for the blending image. (There are a number of functions available to you that I won’t be using in this tutorial. Image Blender has a nice tutorial built into it that you can activate by touching the Blender name at the top of the screen).

Step 2

media_1345644803734.png

 

Touching this screen will bring up this pop-up selection window. I went to my camera roll to bring in my base image.

Step 3

media_1345644843422.png

 

I then went to the screen on the right and brought in my second image. I now had two different cityscapes to work with. Again, the image shown in the left screen is always the base layer while the right screen is your blending image. This is important to keep in mind as you build your collages.

Step 4

media_1345644872418.png

 

Now it was time to use Image Blender’s “Arrange” function to resize and place the top image where I wanted it. To activate this, double tap on the screen and the “Mask/Arrange” menu will appear. Click on “Arrange”.

Step 5

media_1345644902462.png

 

The top image will become a bit more visible allowing for easier adjustments. You can also use the slider bar (C) to change the image’s opacity. I’ve also pointed out two controls on the bottom of the screen, (A) and (B). If these have a lock symbol showing in their centers make sure to click on them to unlock these controls. (A) controls size while (B) controls rotation. Using the standard two- finger pinch/hold control, you can resize, rotate, and/or move the top image to where you need it in your collage.

When you’re happy with your adjustments, click on the “Use” button at the top right (D). This will activate you’ve done. (A note here. If you decide you don’t like what you see after clicking on “Use”, double click on the screen again to bring up the “Arrange” menu…and continue on).

Step 6

media_1345644941309.png

 

With the top cityscape placed where I wanted it, it was time to do some masking. While this screen shot doesn’t show this, I had double-tapped on the screen bringing up the “Mask/Arrange” menu…and this time had picked “Mask”. Once in the “Mask” screen, you have several controls at your disposal. The “Erase/Draw” controls in the center (A) allow you to erase parts of the layer while draw lets you put them back! The brush symbol on the left (B) gives you two types of brushes…and solid brush and a more feathery brush which is showing right now. There are no brush size controls but you can zoom in and out of the image using the standard two-finger pinch. The control on the right (C) allows you to adjust the opacity of the two layers. You can find more on this in Blender’s tutorial.

I typically will use the solid brush to erase away the major parts of the layer and then switch over to the feather brush to softened the edges blending them into the base layer so there are no hard edges showing.

Once done with your masking, click on the “Use” button at the top (D).

Step 7

media_1345644980419.png

 

Time to do some blending. Click on the “Blend” button (A) which brings up the Blend Mode menu. I always need to try several different modes before settling on the one I feel works best. I’d suggest you do likewise. This time I decided on “Normal”, clicked on that and then used the slider bar to set the opacity at 85%.

Step 8

media_1345645012405.png

 

Okay…time to “flatten” my layers so I can continue to build my collage. To bring up this menu, touch and hold on the screen until it appears. Click on “Flatten” which flattens the two layers. If you look at the preview screen on the left, you’ll see this is now your base layer. The blending layer screen is blank…ready for you to choose your next image!

Step 9

media_1345645056524.png

 

As in the beginning, I clicked on the screen, click on “Library” and went to my camera roll for my next image….my “captain”.

Step 10

media_1345645092198.png

 

I double-clicked on the screen, brought up the Arrange menu, clicked on this…

Step 11

media_1345645122782.png

 

…and placed my “captain” where he needed to be for this collage….and clicked on “Use”.

Step 12

media_1345645153117.png

 

I brought up the Mask menu, clicked on this as before.

Step 13

media_1345645180996.png

 

Using the Erase/Draw and brush controls as the first time, I zoomed in and out of my image, getting the “captain” ready for blending.

Step 14

media_1345645221301.png

 

Here’s what the “captain” looks like before I start his blend.

Step 15

media_1345645260862.png

 

Clicking on the blend button and bringing up the blend modes, I tried several of them before deciding on the “Luminosity” mode at 95%. You’ll see why I chose this in the next image…

Step 16

media_1345645294721.png

 

The “captain” went from a sepia-toned vintage gentleman to a silver-toned “captain of industry”…more in keeping where I wanted this collage to go!

I once again touched and held the screen, bringing up the flattening menu and clicked on flatten. (A side note. I also click on the “Save” button at the top after I flatten. This saves the image as is in my camera roll…and good thing to have just in case you mess up big time later on!!)

Step 17

media_1345645328067.png

 

So far I’ve used three different images to build my collage. One more to go! The woman that stood behind the “captain”. (You know…for every good man there was a better woman behind him…) Since the steps used to bring her into the collage are just like above, I’m going to go through this pretty quickly.

Step 18

media_1345645389733.png

 

Clicked on “Arrange”….

Step 19

media_1345645422618.png

 

Placed her…

Step 20

media_1345645451406.png

 

Masked her….and clicked “Use”.

Step 21

media_1345645482492.png

 

I used the same blending mode as with the “captain”, Luminosity but with her I used 50% opacity to give more of that “standing behind” feel to the image.

Step 22

media_1345645526196.png

 

Finishing up, I clicked on Flatten…and saved this to my camera roll.

Step 23

media_1345645567188.png

 

Here’s what the collage looks like at this point. Nice…but needed some more character. As much as I enjoyed using Image Blender, it was time to go to another app…and add some grunge! Which I did…and the final results can be seen at the beginning of this tutorial.

I hope you found my tutorial useful and enjoyable. Please do not be shy about leaving comments and/or questions about what I did. I do appreciate hearing any and all feedback!! Thanks in advance!!

Related Post

13 thoughts on “Image Blender Tutorial – ‘Creating A Digital Collage’

  1. Awesome tute. I have Blender and have played with it a few times. This is a much-needed tutorial because this is something I wanted to get better at and take advantage of the app, as well as broaden my skill base. Thanks for the excellent tutorial. It was well written and easy to understand, even for a relative novice. Thanks David, and thanks as always Joanne and gang at The App Whisperer.

  2. Thanks avito! I’m glad this was helpful! I continue to find that there is always something about an app that I didn’t know before…that’s why I like the fact that the AppWhisperer publishes tutorials…I learn so much myself when I read what others post all the time!

  3. David, this is a great tutorial! You explain everything so well with all the details. Love the image too. How do you put the arrows in?

  4. Thanks Irene!! I do appreciate your feedback!!!! The arrows…I use the “Preview” app that came with my Mac. In the Tools drop down you’ll find Annotate and in there are the arrows and such. Check it out…nifty little tool!!

Leave a Comment

error: Content is protected !!
Skip to toolbar