Facebook is one of the biggest success stories in the digital age. Almost no one can escape this social network today and all users wants to present themselves perfectly. The Facebook page for your business can be an important channel for marketing. To make sure your it is displayed in the best way possible it is worth spending some time creating your images. The cover photo is a great place to add your tagline, and the profile picture is a great place for your logo to be placed. To make something special with it you can make some of the cover photo blend into the profile picture with a gradient background colour. With this tutorial on a Facebook timeline cover business template you will learn how to make these two images in Photoshop.
The first step is to get all the measurements correct so that the files you produce are optimised for Facebook. The cover photo should be 851px wide and 315px high. The profile picture in Facebook is displayed as 160 x 160px. However, the picture you upload has to be at least 180 x 180px in size. Facebook then automatically cuts 10px from each side. This might be slightly confusing so to help you along we have created a template to get you started. Download the Photoshop template here. In this file you will find all the measurements mentioned above.
You can now get started by opening the template file in Photoshop by clicking File> Open or Ctrl + O.
Now insert the image that you want to use for your cover photo. To do this you go to File> Place and locate the correct image. As this image will only be used on the web, it doesn’t need to have any higher resolution that 72dpi. I have in this tutorial put the opacity to 50% in order to show how the image should be placed.
To order the image correctly, open your layers panel in the right hand column. Drag your image to the ‘Cover Photo’ tab and place it over the ‘Cover Photo Placeholder’. Now comes the first Magic Step. Select the ‘Slice Tool’ from the tools (this tool is in the same section as the ‘Crop Tool’). Then, draw a rectangle over your image along the borders for the cover photo. This is the slice we will later save.
To make sure you get the exact dimensions, 851 x 315px, select the ‘Slice Select Tool’ and double click inside the slice. In the window that opens, you can now enter the correct dimensions for the slice. With the same tool you can then move the slide to the exact place in the template.
To add your tagline to the cover photo, select the ‘Text Tool’ and write your text in it. Use the fonts that you normally use for your business. I have used ‘Gill Sans Bold’ and ‘Garamond Italic’. Place it in the bottom corner, or in a place where it works well with the background image.
Add a drop shadow to your text, to make sure it stands out from your background. Do this by selecting your text layer and then clicking the ‘fx’ symbol in the bottom of the same panel. Choose ‘Drop Shadow’. Change the size to 10px and distance to 0px to make it a blurry darker background, rather than a distinct drop shadow.
When you are happy with your cover photo, set the opacity to 100% again. Now it is time to work on your profile picture. Insert the image you want to use by clicking ‘File’> ‘Open’ or Ctrl + O. On your personal Facebook page you would normally use a picture of yourself, but for your business page it is a good space for your logo. In order to make this gradient transparent background you need to use the version of your logo that has a transparent background. Place the image in the ‘Profile Picture’ folder in the layers panel. To hide the profile icon, so you can see your image, click the eye next to it in the same panel. To be able to place it properly, make the measurements invisible by clicking the eye next to its folder in the panel. For best result it is a good idea to add some margin between your logo and the edge of the box.
Now, create a new layer under the frame layer, by clicking the paper icon in the bottom of the layers panel. Use the ‘Rectangular Marquee Tool’ to make a selection slightly wider than the frame. Choose the ‘Gradient Tool’ from the toolbox. In the top left corner, click the gradient box and choose the transparancy called ‘Foreground to Transparent’. The colour you want to fade into transparent should be choosen as your foreground colour. We are using white in this tutorial. With the tool selected, click somewhere just below the middle point and drag up to the top of the selection. You should now see part of the cover photo with your logo.
Place a 180x180px slice over the profile picture by using the ‘Slice Tool’ described in step 4.
When everything is properly placed it is time to export your two slices. Before you export them, make the frame layer invisible in the layers panel. Then go to ‘File’> ‘Save For Web & Devices’ and save your profile image. Where you saved the image, you will find a folder with a number of images in it. Among them you will find your profile picture with the size 180x180px. Copy this file from the folder and place it where you want to save it. You can now delete the folder with the other images.
Before you export your cover image, you have to make your profile picture invisible. Do this by clicking the eye next to the folder ‘Profile Picture’ in the layers panel. Then save your image as explained in step 10. You can now upload your two images to Facebook to make your business page look more professional.