How To Make A Photo Wall For Your Facebook Cover Photo

This post is particularly for my photographer friends and/or for Photoshelter users who like to use the photo wall feature on their websites and would like their Facebook page to have the same feel. But I suppose anybody could use it to create a photo wall on their personal page as well. I used Adobe Photoshop to create my photo wall cover image and I'll assume that my readers have some familiarity with the program. If you have any questions, please leave them in the comments section and I'll do my best to answer them.

I was not particularly happy with the cover image for my new "Timeline" Facebook business page. It was a great panoramic image of a great blue heron next to the Great Falls of the Potomac with the water in the falls nicely blurred, but at the required size and resolution, it just didn't "pop" at all. While looking at a recent post on the Photoshelter blog, I read a brief post about 39 creative Timeline cover photos and checked out the link. There were some great examples in the article, but it turns out that what really caught my eye was the next item down in the blog featuring Brighton Dog Photography. They had included a capture of part of the photographer's main website and it turns out that the capture was about the size of a Timeline cover image. I've always loved the look of the photo wall on my website and thought the cover image-sized capture of Brighton Dog Photography's photo wall looked really great. Plus, by using a photo wall-like cover image, I could make the branding more similar between my website and Facebook business page. So I got to work...

Here's what I've come up with so far and also a link to my photo wall on the actual page:

I'm sure I could continue to improve this, so if you have any suggestions, feel free to leave them in the comments section here or on the wall on my fan page. What follows is a brief description of how I put this together in case you'd like to create something similar for your page.

In Photoshop go to File --> New and in the dialog box that pops up create a canvas with a width of 850 pixels and a height of 320 pixels (the maximum dimensions of a Timeline cover image). Set the resolution at 72 ppi and color as sRGB for web display and for now you can keep the background as white.  Hit OK.

Next, I used the the paint bucket tool to change my background color to match the background color of the photo wall on my website. For this light gray color I used 191 for all three of the RGB values. You could certainly leave it white as well, particularly if your web page background is white. To start out I also set guides 10 pixels in from all the edges of the canvas to help with placing photos.

Next, use the Place command (File --> Place...) to import images onto the canvas as Smart Objects.  There are two big reasons for importing the images as Smart Objects rather than directly importing them. First, this embeds the original photo so when you are resizing the image up and down as you play with placement, it calls on the original image so you don't end up with soft and pixelated images. Second, as I'll discuss in a moment, it allows you to change images relatively quickly and easily. When you initially import an image, it will show up on the canvas with a bounding box around it and a large X over the photo. At this point hold down the Shift key (to keep it proportional) and click and drag the corners to resize your image to the desired size. If needed, click and drag inside the image to move it to the desired location on the canvas.  Once you are happy with it, hit enter to lock the image.

You can play with the organization of the images. You don't have to use the arrangement that I used; I just started placing images and playing with the sizing. I wanted to reproduce the somewhat jumbled look and mix of verticals and horizontals that I get on my website's photo wall. I highly recommend, however, that you set guides around each photo to help with placement, spacing, and if you inevitably want to swap one of the images out.

The choice of images is up to you. I found (through trial and error) at this relatively small size that keeping a consistent color scheme in the images looks much better and less busy than a completely random selection of images. In my case, I choose late spring/early summer images that featured a predominant green color cast and that matched the current season.

Now comes the beauty of placing the images as Smart Objects. If you don't like an image or want to switch images, instead of mixing everything around or starting over, you can easily replace one image with another. Go to the layer for that particular image, right click on the layer, and from the pop-up menu that appears choose "Replace Contents..." and choose a new image. Sometimes when the new image pops in, it won't be sized properly.  However, if you have set your guides, it should be a simple matter of holding the Shift key and clicking and dragging the corners to resize to line the image up with the preexisting guides. The one problem is that the layer will continue to contain the file name of the original image, but you could always change the layer names to numbers or something else that makes sense instead. If you ever forget which layer corresponds to which image, just click on the eye icon next to a given layer and see which image disappears. Click the eye back on to make it reappear.

This also means that you can easily replace images later on to make a completely new cover image to keep your Facebook page fresh. I'm thinking I will do somewhat seasonal changes that reflect what is happening in the natural world during that time period. For example, I can do a red, yellow, and orange fall color wall in the autumn and images of snow, ice, and wintering snow geese in the winter.

What happens if you lock the size of an image, but then want to change it? No problem. Just select the layer of the corresponding image, then choose Edit --> Free Transform, and you will get the bounding box back and you can use Shift, click, and drag to resize the image again.

Now for the final touches. I didn't want my photo wall to be completely flat and I liked the idea of having it look like a bunch of gallery wraps actually hanging on a wall. So I added a slight bevel and emboss effect to each image. Here is how to do it. Click on a layer (corresponding to an image) and go to Layer --> Layer Style --> Bevel and Emboss. I found the default settings to be a bit too much for this purpose, so I changed the following settings: Style: Inner Bevel, Technique: Smooth, Size: 3px, and I reduced the opacity of the Highlight Mode and Shadow Mode in the shading panel to 60%. Unfortunately it seems that you have to do a Bevel and Emboss for each layer individually, but once it is done, the effect is maintained when you swap images.

Once I was happy, I flattened the image, did a Filter --> Sharpen, and used the Save For Web command to create my jpeg.  Then it was a simple matter of uploading the new cover image. I hope this helps and again please feel free to leave comments or questions here or on my Facebook page and I'll get back to you.