Give your Facebook Timeline cover photo
a unique signature

Part three of the tutorial

on how to design and create your unique killer signature timeline cover photo banner. After you finish planning your layout, this section teaches you how you can put them onto a blank canvas.

Continue from part two: Layout. Planning the perfect Facebook timeline cover photo

CD DVD Video Movie Music Slideshow
State-of-the-art services at a low cost by True Artists Group at La CoffeeMelodie Suite.
Available Services for Offline and Online Productions

Offline Production
Music Movie Video Slideshow CD-DVD Production
Photo Scanning-Restoration-Reproduction
Business Card Flyer Brochure Invitation Card Postcard

Online Production for Web
Logo Icon Favicon Graphic Animation Gif Slideshow Flash Slideshow Banner-Ad Flash Movie Web Video Music Video Photo Touch-Up Audio Clean-Up

Digital Arts Design: CD-DVD-Video-Music-Movie. Photo-Image Slideshow and Reproduction. State-of-the-art services at a low cost. By True Artists Group at La CoffeeMelodie Suite.

Designing: putting your layout onto a blank canvas

This is NOT a tutorial that teaches you how to use your photo-graphic editing software. Instead, it guides and trains your thinking process into the creating and designing mode. However, we do have easy-to-follow tutorials in other sections on our Website. Please see our sitemap directory.

The designer in you

Read previous page: Layout.

Next, you need to decide what kind of background you want your cover banner to have -a real look with your own image, a textured look (wood, paper types, scenic mountain-water-flower -stock photo type), or, just a plain color background. Just about any photo- or graphic- editing software (Gimp, Adobe, Zoner Photo Studio, Cyberlink's Photo Director, Serif's Photo Plus -even its Page Plus, Snagit, and many, many more) will do the job, and the simplicity or complexity of this step is based entirely upon each piece of software. How feasible it is also depends on your comfort level with the software.

We will work on the assumption that you have a photo editing software program and some knowledge of how to use it.

After you have chosen your background image, adjust its width to 850 pixels, and its height to 314. (Any software will do this.) There is no problem with downsizing, but if you upsize and the photo looks pixilated, change its dpi to a larger number. The Web quality is around 150. If you want to retain the original image, don't forget to save your new image as ("save as") a .jpg file and give it a new name. (Adobe, Serif, Zoner, Photo Director, and other advanced software)

Put it on a layer -"background." Check the dimensions again: it has to be 850x314.

In the example, I have two layers of backgrounds: The bottom one is a photo of a pearl necklace on texture, which I made awhile back for my business card, and for which I had to increase the dpi, as well as the pixel dimension. The top photo came from a portrait I had. This shot was taken by an excellent photographer. I did all the re-touching to smoothe the edges. Presently, I use this photo as my profile picture on Facebook. (You can check out the details For the purpose of creating background, I added extra flare for drama, putting transparency on the photo and putting it on top of the pearl necklace background, then saving them together as a new background.

Next, if you haven't pre-made your logos, create them on a separate editing pane and save them as .png files. If you plan to use social icons, like Twitter and others, get some free ones where they are offered. If you are into 3-D effects and have the right software for that, turn them into 3-D! (Zoner, Serif)

Put your name, tagline, urls, and call-to-action words on a notepad. -Make sure all typos are corrected! Your urls are not clickable, so you may as well save some space by putting in only the part that comes after www., instead of the whole string: for example,

Now is the time to put them on the background. Let the creativity flow and the fun begin!

"*I have here a screenshot of my actual cover banner with the profile picture thumbnail at the bottom. You may choose to take a screen capture of your friend's timeline, or feel free to download mine and save it on your computer as a reference guideline. For convenience, I combined and added the "view profile as *your friend*," as well as, "view as you" on the same image. Non-friends will also have a similar view as "view as your friend," so I didn't think I needed to go the extra mile to do that. (If you choose to do this on your own, there are Firefox and Chrome addons from which you can choose, and you still have to edit it to the size of 850x314, and combine these elements.) You will see in a minute why we have to do this."

Insert the cover image which you just saved -or made from your own screenshots- in the same editing pane as your background. Adjust its size to the same size as your backgound layer. Reduce the guideline image's opacity to around 30%, or just enough so that you can still see the layout of the outline. Move over to your own background and match the top two corners, adjusting the guideline (not your background) to get the 850x314 area to match exactly. Do not paste. Now, you will see on your background exactly where part of the thumbnail lands, as well as seeing where the tabs show up, whenever you (change cover tab), your friends (friends/subscribe), and soon-to-be friends (add/subscribe) arrive at your timeline cover.

Place your guideline image on the clipboard or work area of your editing pane so you will have it handy. This step will be repeated many more times until your cover photo looks perfect to you.
  • Match your add me/subscribe me to mine the best you can. This is important, it's your call-to-action text!!!
  • Make sure your wordings and urls don't position themselves behind the thumbnail photo.
  • Only you will see change cover tab when you mouse over the area. Ignore it if it doesn't bother you; but, if you think it will, leave that small area clear of words and logo icons.

Position and apply your logo or icons and adjust the sizes. This step is easy, knowing which area to avoid.

Now that you basically know where you will place your elements, go ahead and import or copy and paste your tagline and urls from your notepad into the text boxes. Give them nice and easy to read fonts, and pay attention to the font size. Try not to pile all texts into one textbox: it won't leave room for flexibility. Arrange and adjust as you go. Font color can be changed after you see -or, in most cases, don't see- how it looks against your background. Also, align the text lines (Serif's Page Plus is perfect for this, plus, it adjusts the font size for you.) Group them together if you need to nudge them.

Use your guide image to make sure the bars | under add me-subscribe me are pointing to add (friends) and subscribe tabs, and not to an empty space!

Do you have the right look? Are your wordings clean-looking and legible? How's the color? At this point, and if your editor allows, you may want to tweak it a little more. If it looks flat, pop it out by adding a drop down shadow, and even a reflection in some cases -I wouldn't overdo it on reflections, though, as they will take away from your tagline and urls. Good software for this are: Serif, Cyberlink's Photo Director, Zoner Studio, and a lot more. If you use Adobe, Gimp, or Snagit, you will have to go through a few steps to make the reflections. -For other things it's good to learn, but for this I wouldn't want to go nuts over it.

If your background appears prominent, tweak it (again, if your software is capable) by adjusting light, shadow, level, softening, darkening, or brightening your whole image, then go on to give it some transparency (all software programs would have this). On my second background layer, I expanded my profile photo, cropped, re-positioned, then repeated the steps until I liked what I saw. I gave the photo a glow, then reduced its opacity to a much lower percentage. After I did that my texts disappeared, but I liked the background, so I adjusted the text theme color. I think I'll stay with this cover photo for awhile -or until I have enough "likes" on my Core Melody Voice Studio" fanpage so that I can give it a real name on the url. (See the long string of numbers and symbols? I have to have more than 25 likes before I can get a name. Hey: if you like singing -even if you are not in my area- click like on this fanpage please. Your help will aid my voice teaching studio page to get a real name! Much appreciated!)

Are you finished? Do you like your cover photo, yet? If not, keep tweaking. If anything, this will strengthen your patience and determination. When you're happy with your photo, merge all your layers together, re-check your size (850x314 -I keep repeating that, don't I!) and save it as a .jpg file. Upload it to your brand new Facebook timeline. Now, you have your very own signature timeline cover!!! Don't forget to let me know how it went for you; and, while you're at it, don't forget also to add me or subscribe to me on Facebook!

That's it!!! I am proud of you.
Congratulations on your hard work!

Feeling overwhelmed by all of this? Not familiar or never used photo editing software? Don't have the time? Please contract me to create an awesome unique signature timeline cover photo for you at an awesome price! If you need profile/portrait photo, logo, or other creative design work done, I can create what you need especially for you -please drop me a note!

Thank you, and please leave feedback so I can make your experience even better the next time!

Design and create
Facebook-Timeline tutorial
Layout- Planning the perfect cover photo
Designing- Applying the elements

HTML Comment Box is loading comments...

Design Related
website, template, HTML, tutorial, low tech
learning-HTML, HTML tutorial, Website, Website provider, Website building
HTML, hyper-text, mark-up-language, web-page, building-block
digital arts design, CD DVD video, music movie, photo image slideshow


Coffee Connection-La CoffeeMelodie Suite


La CoffeeMelodie Suite Core Melody Voice Studio At-Home Thai-Cooking Little English Learning Center Follow Pradichaya on Pinterest Follow Pradichaya on Twitter Follow Pradichaya on You Tube Follow Pradichaya on LinkedIn


Digital Arts Design is a service provided to you by True Artists Group

This division is one of many under the giant umbrella of La CoffeeMelodie Suite provides cool shades and protection to those who blossom under it.

Together we grow.

La CoffeeMelodie Suite
An Overview

Site Build It!