How to Make a Photo Collage Banner for Your Photoblog or Website

When you’re creating a photo blog or website a photo banner lets you showcase a range of your work. You can create a collage of photos for a banner in Photoshop or Photoshop Elements very easily.

Here’s how to make one.

Step 1

Start with a new image the size of your banner or a multiple of it. So, for example, if your banner is going to be 1200 pixels wide by 250 pixels you can start with this size image or double it so you have a bigger space to work and size it down as the last step.

Here I’ve created a document 2400 x 500 at a Resolution of 72 pixels/inch, RGB Color and with a Transparent background..

Step 2

Open the photos to work with. These should be fixed and color corrected but they don’t need to be sized. I like to open more images than I will use so I have lots to choose from. A combination of close-ups and distance shots gives your banner a lot of variety. Flatten all the images to a single layer.

Select the Rectangular Marquee tool and drag over an area to use from the first photo. Select a generous portion of the image allowing plenty of room to the left and right of the main portion of the image that you are interested in as you will use this area to blend the layers. Chose Edit > Copy and then switch to the banner image and choose Edit > Paste. Close the original image.

Press Ctrl + T and then Ctrl + 0 and size the image to fit your banner. Use the Move tool to position it in place.

Step 3

Select the next photo to use. Copy a piece from it and paste it into your banner image. Size it and move it into position. Continue to do this until your banner is full. The images should each appear on a separate layer and they should all overlap by significant amounts.

If desired, drag the layers into a different order to position the images where they should appear in the collage.

Step 4

Starting on one side of the image, select the Eraser and select a soft brush or a textured one such as the Chalk 44 pixels brush. Adjust the brush size so that it’s big enough to work with, reduce its Opacity to around 50 percent and click on the layer in the layer palette that contains the image to blend.

Erase over the edge of the image to reveal the layers below. As you work, give some consideration to how you want the images to blend together. In some instances, simply softening the hard edge of the image will be sufficient. However, if there are significantly different colors on each layer you may want to be more creative about how you blend the layers together.

Step 5

If you’re familiar with using masks you’ll find that you’ll get better results with a mask than you do with the eraser as the blending can be easily undone.

To use a mask, add a mask to the layer that you’re working on and then paint over the mask in black to remove the image from this layer. If you make a mistake, paint in white. To add a layer mask, click the Add a Layer Mask icon at the foot of the Layer palette.

Work across the image softening the edges where the images overlap. It’s at this point that you will see the benefits of having plenty of overlap between the images as this will give you plenty of room to blend the images together.

Some layers may lend themselves to being used as overlays rather than a part of the image. For example, a photograph of text can be placed over another image with its Blend Mode set to Multiply and its Opacity lowered so you get a layering of photos.

Step 6

Finish your banner by adding some text. Click the Text tool and click on the banner and type your text. Use a Drop Shadow layer style to make the text rise above the background so it will be more easily read.

Helen Bradley
is a Lifestyle journalist who divides her time between the real and digital worlds, picking the best from both. She writes and produces video instruction for Photoshop and digital photography for magazines and online providers world wide. She has also written four books on photo crafts and blogs at Projectwoman.com.

Some Older Comments

m?c inSeptember 11, 2012 08:39 pm

Simply desire to say your article is as surprising. The clearness on your publish is just cool and that i can assume you're knowledgeable on this subject. Fine together with your permission allow me to snatch your feed to keep up to date with drawing close post. Thank you a million and please continue the gratifying work.

Sandra RowneyDecember 20, 2011 11:57 pm

Hi Helen
Many thanks for great instructions. My new artist blog banner is now at www.sandrarowney.blogspot.com and I've posted a link to your blog.
Sandra

Donna@Collage IdeasDecember 7, 2011 08:02 am

Collages are totally my thing! I have some great collage ideas at my blog for you to check out. Mostly they are about real "material" collages, but you can find them to be very inspirational.

New Jersey MemoriesNovember 1, 2010 07:25 am

I tried this and it worked very well! Much easier than with Picasa. My header still needs some tweaking, but I like it. The fun thing is that I can change the pictures in my header when I want to!

Thank you a million, I test the steps, and it's correct. I have made a beautiful banner for my blog with 3 photos on a line. I am very satisfied with it. You can see the result on my blog: http://photo-collage-scrapbook.blogspot.com/
P.S. I also find an amazing digital scrapbooking software, it provides many photo collage templates, i love them so much!

Helen BradleyMarch 30, 2010 12:52 am

@memoria... I am so glad you sorted this out - I checked out your site and the food banner looks great. Well done!

Helen

MemoriaMarch 29, 2010 06:49 pm

Thankfully I figured out what the problem was. I needed to change the setting from "fixed width" to "normal". After I fixed the marquee tool, everything else went by pretty smoothly. I now have my banner up. Thank you so much!! I cannot thank you enough for your clear tutorial.

MemoriaMarch 29, 2010 02:19 pm

When I do Edit>Paste, nothing happens. I'm so frustrated because everyone else thinks it is so easy!! I usually figure out these sort of things with no problem, but Photoshop is a headache for me. :(

Terri HeinzFebruary 10, 2010 08:44 am

Thank you so much, I now have a much better banner for my blog. I used 4 photos that represented me and I am very satisfied with it.

onlinearcadeJanuary 20, 2010 08:56 am

Really great info on your website, I will definitely return again soon.

Richard Guy BriggsJanuary 20, 2010 06:38 am

I don't have access to Photoshop (I'm using Linux with GIMP, Krita or Cinepaint). Do you have the names of the operations performed by "Control-T" and "Control-O" (or is that "Control-0")?

Helen BradleyOctober 31, 2009 12:31 am

Totally, anyone can do these banners. You will get better the more of these you make. Make one then decide what you like and what you don't like about it. Look at other people's banners and see if you can learn what looks good and what doesn't. Then make a few more - learning all the way.

GeiszlerOctober 30, 2009 10:45 am

Hello, I loved your insights, do you think that is a thing that can be done by anyone?

The first time I did this it worked perfectly. Looked pretty crappy but I did it. The second time, not so much. I can't figure out what I'm doing wrong! How frustrating...

MeganApril 7, 2009 09:03 am

Thank you so much for this great tutorial. I am new, new, new to photoshop and I was able to follow this step by step and make a really great collage for my family's blog! My kids loved it!

annikenApril 6, 2009 09:17 am

Thanks for the tutorial.

I followed it step by step, and now you can see the result on my blog: http://annikensa.wordpress.com.

I'm gonna play more with this, that's for sure.

LindaApril 5, 2009 04:34 am

Loved this tutorial!! Used it step by step and I feel so proud of my results. I will play with this a lot!
Thanks!

EdsarApril 1, 2009 12:19 am

Helen, Darren thank you very much for the site loads with tons of effective toturials i never thought that photoshop would be the next interesting part after photography.

Again thank you.....

unobloggerMarch 30, 2009 04:39 pm

A wonderful tutorial... Never knew the possibilities of photoshop... I am gonna start using it effectively.

DanfernoMarch 28, 2009 09:11 pm

Masks are so incredibly useful, it is unbelievable.

FrankMarch 28, 2009 06:16 pm

I never understood how a mask layer works. Now I get it:
A mask layer just turns the black/white drawing tools in eraser/undo tools.

Thanks!

LisaNewtonMarch 28, 2009 10:01 am

I created my blogs header in Illustrator, but this tutoral is great for helping me work with layers. Thanks!

AnneMarch 28, 2009 08:18 am

Thanks so much!

Tom B.March 28, 2009 08:06 am

Nice tutorial. Wish I had seen it a few months ago when I was working on a header image for a project. And explained well enough I should be able to figure out the steps in PSP. Will need to give it a try later.

Sherri MeyerMarch 28, 2009 08:02 am

Darren - this is a great tutorial. It might be easier than the way we did our Website banner at http://www.sherrimeyer.com.