Please, enter a valid email!
00 days
00 hours
00 minutes
00 seconds

Web Design Kitchen. Tasty Facebook Cover Tutorial

The idea of creating something magic and useful at the same time is too tempting for each artist. Designing templates for you on the regular basis is really exciting, but I always wanted to offer something special to the blog readers. At last, the idea came out to me – free stock freebies that would be fresh, spicy, inspirational stuff for designers. A pack of such goodies you’ll get the next week. And today I want to share with you a Facebook cover tutorial based on one of the photos from this fancy pack.

As usual, each Photoshop tutorial starts with an offer to open it, but let’s change this course. As far as the creation of this banner started with quite original idea that was far from web, and only then it was transformed into digital, I offer you to check out the whole process from the very beginning. So, the initial idea was… to bake delicious, tasty cupcakes with eye-candy icing on the top. Sounds trivially? Perhaps. But there is one gimmick making these cupcakes special – they go with WordPress, Joomla, PrestaShop logos on their tops. This post would be incomplete if I didn't share with you a recipe of these fluffy muffins. If you're not a kitchen guru, share it with your friends or relatives, and they will surely bake delicious cakes for you.


Prep: 15 min
Cook: 30 min

  • Preheat an oven to 350 degrees F. Grease or line 16 muffin cups with paper liners.
  • Beat eggs in a large bowl using an electric mixer on medium speed until smooth and creamy, and only then add sugar, salt, cinnamon. Beat until smooth. Slowly add flour stirring it with wooden spoon.
  • Use another spoon to put the prepared mixture into the muffin cups.
  • Bake in the preheated oven. Use a toothpick (insert it in the center of a cupcake) to see whether it’s ready. It should come out clean.

That’s it!

Icing and other cake decorations like sprinkles were applied on some cakes. WordPress, Joomla, PrestaShop cake toppers were made using marshmallow fondant and food colors. To see how it’s made, check out any marshmallow fondant recipe online.

Baking and decorating cupcakes was the first step. Then came shooting time, we've arranged them nicely on a A1 paper and shot from different perspectives. One of these fancy photos was taken as a basis for a Facebook cover. We'd like to start its "transformation" from Lightroom.

Time to complete: 30 minutes
Tools: Photoshop CS3 or later, Lightroom 3.6.

Download source files

Facebook Cover Tutorial. Lightroom

When it comes to editing photos there is nothing better than Adobe Lightroom. Probably LightZone user will not agree, but actually tastes differ…

For this tutorial was used Lightroom 3.6, this is not the latest version, but highly usable and is compatible with Windows XP (there are still quite a lot of users fond of Win XP.)

Editing photos in Lightroom is a relatively easy and enjoyable process, all you need is a good tutorial or couple of spare hours during a week.

So, let’s start. First you need to import the photo into the Lightroom, press Ctrl+Shift+I to open the Library, now select the source folder and press Import, all photos located in this folder will be uploaded into the library. Lightroom can work with RAW formats of all cameras, in our case this was .CR2 by Canon.

The picture was shot at 1/200 shutter speed, 5.6 aperture, ISO 100 and 106mm focal length. I was not using either external or internal flash, but used lightbox for macro photography.

The original shot was quite dark that’s why I had to make some Lightroom manipulations to lighten it and give some vibrancy.

Let’s start.

support Ukraine

Step 1

I’ve uploaded the shots now it’s time to make the adjustments.


* * *

Step 2

First of all you need to open the Develop mode, take the Brush tool (K), which is in the right upper corner use following adjustments:

  • Exposure - 0.8
  • Brightness - 78
  • Size - 31
  • Feather - 100
  • Flow - 100
  • Density - 100

Using this tool you need to paint over the whole image, it will become quite bright, but that’s the idea. Press Done when finished.


* * *

Step 3

Now using the same brush with similar settings you need to paint over only muffins, don’t touch the background. When you're over press Done.


* * *

Step 4

Now it’s time to reduce the Brightness, you have to make these step in order to lighten the background which looks quite grey, in the end you’ll make it look at it is in reality.


* * *

Step 5

Now you need to reduce Exposure


* * *

Step 6

To make color more vivid update Saturation giving it some extra points +5 would be fine.


* * *

Step 7

Once again reduce Exposure, don’t come it too strong.


* * *

Step 8

Update Saturation drag the bar to +6.


* * *

Step 9

Reduce saturation of Red, set -5.


* * *

Step 10

Reduce saturation of Green, set -20.


* * *

Step 11

Add saturation of Blue, set +20.


Facebook Cover Tutorial. Photoshop

By Ivy Green.

Now you're done with Lightroom. Let's proceed to Photoshop and see how to make a Facebook cover by several easy manipulations which you are welcome to follow.

[mfc_lightbox]Final result[/mfc_lightbox]

Step 1

First of all create a new document: Width 851, Height 314


* * *

Step 2

Now let’s add the photo of cupcakes and resize it CTRL+T


* * *

Step 3

Make a new layer (CTRL+Shift+ALT). Take Rectangular Marquee Tool (M) and draw a rectangle. Fill it with the color #f5eeb2 (ALT+Backspace).


* * *

Step 4

Now you will work with Custom Shape Tool. Just choose a heart shape and draw a heart over the yellow rectangle.


* * *

Step 5

Rasterize Vector Mask of the shape, select Pixels (right click), make the layer with the yellow rectangle active and press Delete.


* * *

Step 6

Choose Elliptical Rectangular Marquee Tool select a part of the cupcake and copy it.


* * *

Step 7

Make a new layer (CTRL+Shift+ALT) and press CTRL+V to paste the element you have just copied. Place the layer under the yellow rectangle. As the result you can see a part of the cupcake through the heart shape.


* * *

Step 8

Now let’s work with Horisontal Type Tool and make several white dots.


* * *

Step 9

Rotate the layer with dots CW 90 and make the Opacity 81%.


That is the result you have at the moment:


* * *

Step 10

Now the cover has some text elements. To add them to the existing design take Horisontal Type Tool, the color#d5779a. Use Font Abel, Font size 36. Press Faux Bold, tracking for the selected characters -25.


* * *

Step 11

Now type 4U with the color# 84b6da. This time choose Font Open Sans Condensed Light. Press Faux Bold


* * *

Step 12

It is the very time to draw the frame around the words. Take Rectangular Marquee Tool (M) and draw a white rectangle.


Select Pixels. Now make the following: Select-Modify-Contract. Set 1 px and press Delete.


Make Opacity 86%.


* * *

Step 13

In order to make a decorative border we will create a new layer. Take Elliptical Rectangular Marquee Tool and draw a circle.


* * *

Step 14

Duplicate the layer 22 times. Select the layers with the circles to Align left edges and Distribute vertical centers. That’s all. Now you have an original Facebook cover which you've designed yourself.

Final result

* * *

That's all for today. Check out my post in a week to get a bunch of cool cupcake photos for free.

Katarina Klementi

Katarina is a content writer, one of those who create all-that-inspirational sometimes technical posts for TemplateMonster blog.

Get more to your email

Subscribe to our newsletter and access exclusive content and offers available only to MonsterPost subscribers.

From was successfully send!
Server error. Please, try again later.

112 responses to “Web Design Kitchen. Tasty Facebook Cover Tutorial”

  1. … [Trackback]

    […] Find More on on that Topic: […]

  2. 홀덤 says:

    … [Trackback]

    […] Find More on that Topic: […]

  3. … [Trackback]

    […] Read More on on that Topic: […]

  4. Yasal bahis: Bildiğiniz gibi yerli bahis müdavimlerinin en çok aktif üyeye sahip bahis ve casino sitesi kesintisiz bir şekilde yükselmesi ile beraber kullanıcılar akıllı telefon ile de yeni oldukları amacıyla bu yatırım cepbank üzerinden yapılmalıdır. Bu hali en aza indirebilirsiniz. Hem de sarfedilen üyelikler amacıyla de bir grup farklılıklar gösterebiliyor. Yapmış olduğunuz sanal kart teknolojisi olarak karşımıza çıkan finansal problemler, adaxbet söz hususu olduğunda para çekme zamanı 1 saat içersinde 20 TL değerindeki yatırımlarda, yatırımın yapılmasının sonrasında, prosedür yapılmadan evvel Canlı Destek ekibine bağlantı kurarak talep etmeniz gerekir. Çünkü bonus vasıtası ile bahis oynamak amacıyla bu alanda ne kadar şuana kadar iyi performans gösterdi. Site sayılarının yükselmesine paralel olarak mühim bir katkıda bulundu. Dilediğiniz para yatırma işleminize 100 oranında 500 TL Bedava Bonus500 TL hoşgeldin bonusu var. Genellikle internet teknolojisi ile beraber kendinizi güvende hissedeceğiniz bir marka olarak da TRY Turkish Lira seçeneklerini işaretlemek gerekiyor. Fakat doğrultu bahisleri mi yoksa doğrultu bahisleri biraz riskli olsa da uygun görünüyor.

  5. gobahis says:

    Kullanıcılar amacıyla en ürkütücü olay, para yatırma prosedürü tamamlansa bile paranın hesaba aktarılmaması ya da para çekme talebine karşın hesaba para aktarılmamasıdır. Bu tür finansal işlemler, kullanıcının sitenin güvenilirliğini sorgulamasına niçin olur. Bu halde müşteri temsilcileriyle görüşmeleri çok önemlidir. Müşteri bu durumlardan muzdaripse, olası olan en kısa sürede çözülmelidir. Bütün bu nedenlerden kaynaklı sitenizin tercih ettiği canlı destek hattı ile iletişime geçmelisiniz. gobahis Canlı bir destek hattına bağlanamıyorsanız, o siteden uzak durmalısınız.

  6. Bahis sitelerine son zamanlarda ilgi hayli artmış görünüyor. Tüm dünyayı sarsan ve halen devam eden Covid 19 salgını sonrası birçok ülkede ekonomik sıkıntılar ortaya çıktı ve insanlar artık yeni kazanç kapıları arama içine girdiler. Kolay para kazanma yollarının başında ise bahis ve şans oyunları yer alıyor. Dünya üzerinde milyonlarca insan bahis sitelerine giriş yapıyor ve buralara paralar yatırarak yüksek paralar kazanmak için uğraşıyorlar. Bahis siteleri arasında son yılların en çok kazandıran ve en yüksek bahis oranları bulunan bahis sitesi olan favorisen tüm dünyada yaygın bir şekilde kullanılmaktadır.

  7. Bahis oynarken yapmış olduğunuz bakiye yüklemesinin yanı sıra bahis siteleri doğrulusunda sunulan bonusların detaylılığı de ehemmiyet taşımaktadır. Şimdilik ilk defa bahis yapar iken elde edeceğiniz promosyon fırsatlarını tam anlamıyla kullanarak bahis tadını üst civarlara çıkarabilirsiniz. Şuan fazlası bahis sitesinde tespit edilen deneme bonusu ise yeni kullanıcıların dikkatini bir hayli çekmekte. Hem bahis firmaları hemde oyuncular doğrulusunda cazip bir bonus türü olan deneme bonusu bir başka ismiyle yeni üye olanlara verilen bir nevi test hedefli bonus ismidir. Şimdi ayrıntılı olarak deneme bonusu nedir bunu inceleyelim aynı vakitte deneme bonusu veren siteler ile ilgili kapsamlı bulgular sunalım.

  8. İnternetten para kazanma

  9. istanbul antalya evden eve nakliyat

  10. multiple sclerosis neurogenic bladder and botox injections

  11. botox injections into the bladder side effects

  12. botox for overactive bladder blog

  13. bladder botox injections cpt code

  14. billing medicare for botox of bladder

  15. Ofis ve parça eşya taşıma işlemlerinde güvenli taşımacılık ile tanışın. Siz de evden eve ve şehirler arası nakliyat işlemlerinizde güvenilir bir firmadan hizmet alın.

  16. … [Trackback]

    […] Read More Info here on that Topic: […]

  17. instagram ücretsiz takipçi hilesi

  18. düşük asit zeytinyağı

  19. SEO Analiz Google Sıralama Yarışması

  20. almond under eye cream dark circles

  21. how much does a botox appointment cost

  22. … [Trackback]

    […] Find More on to that Topic: […]

  23. relx says:

    … [Trackback]

    […] Read More on that Topic: […]

  24. bra roll liposuction before and after

  25. botox says:

    botox botox near me botox before and after

  26. … [Trackback]

    […] Here you can find 2716 additional Info to that Topic: […]

  27. … [Trackback]

    […] Read More on that Topic: […]

  28. instagram iphone profile picture download

  29. ipad high quality instagram image download

  30. download instagram videos online

  31. macbook high quality ig igtv download

  32. instagram free featured download

  33. download mac instagram videos online

  34. iphone-laatuinen ig post lataus

  35. téléchargeur d’images ig

  36. darkfail says:

    … [Trackback]

    […] Read More Information here to that Topic: […]

Leave a Reply

Your email address will not be published. Required fields are marked *