Advanced Search

How to Make the Valentine’s Day Footer on the Love Bunnies Template

This entry was posted By Cubert on Sunday, January 17th, 2010 at 9:34 pm and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

This tutorial shows you how to design the cutesy footer from the Love Bunnies Valentine’s Day Template.

Today we are going to learn to make a cute nice footer for a Valentine theme template. When putting this footer together, you will pick up a few new tricks for your bag, including making illustrations look like stickers that have been stuck onto a design, creating a cool pattern for your background, and setting up a well balanced scene.

You can download the “Bunny Love” template, along with the full PSD source files for this template in BoxedArt’s members section, as well as thousands of other website templates and web design products.

First, we gather up all of the images we will need. Here, we have 2 cute bunnies, one male and one female happily in love, some presents in the garden, and a paper Valentine label.



Step 1 – The Repeat Love Background

The first part in designing the footer section of this website template is to set up the repeating background image. To do this, we start with a new document with the size of 42px X 30px, add then add a new layer and fill it with pastel light blue #d5e5f1.

New 42

Step 2 – Add a Pattern to the Background Image

Next, let’s draw some mini hearts, but remember to make a new layer first. Then, use the custom shape tool, and select the heart card shape.

Change the foreground color to white, and then create some mini hearts and duplicate it likes below.


After that, define the pattern by going to Edit > Define Pattern and name your pattern.

New 42

pattern name

Step 3 – Getting Started on the Easter Web Template’s Footer

Now that we have our love pattern ready, it’s time to create the cute footer. Start with a new document (1000px 900px). Create a new layer and fill the layer with pastel light blue #d5e5f1.


Step 4 – Apply Your Pattern to the Background

Then, double click on the layer that you just created, and you will have the layer style option window. Select Pattern Overlay and click on the pattern, you will see an option to select the pattern you just defined – click OK.

pattern overlay

You will see the layer is filled with the mini heart love background.


Step 5 – Laying Out the Content Area

Next, let’s draw a rounded corner square for the content area for the template as shown below.

white corner

To do so, use the rounded rectangle tool with the radius of 20px and make sure your foreground background color is set to white.


Step 6 – Draw a Grassy Area for the Footer

Now, let’s make the nice big footer. Start with the garden vector image that we had prepared in the beginning of the tutorial. Put the image at the bottom of the page and make it as if was a sticker being stuck at the bottom of the page.


How do you make the image look like a sticker? Just add the below setting layer style to the vector image.


Step 7 – Adding in the Love Bunnies

The garden is in place, but it looks empty and lonely, so lets add in the adorable bunny couple. A good location for these images is on the bottom right section so we have space for others and the content for the template later. Again, apply the same layer style as above to make the images look like colorforms or stickers.


Step 8 – Create and Place Additional Sticker Graphics

Now, let’s put up a tree behind the bunnies, as well as the presents and grass to complete the cute scenery. Just apply the same sticker layer style to each vector graphic we added in. Finally, we have a nice scene for the lovely rabbit couple with trees and presents.


Step 9 – Label Me

Now on the left hand side it’s kind of empty… let’s put the paper label vector that we created just now. And add in the text for the label. I have put up the date for Valentine’s Day.


Step 10 – And Now the Strip Bar (No, not that strip bar, save that for after you’ve finished your work.)

Finally, add a white strip bar just below everything else for the copyright and terms text.


Make it transparent by setting the opacity 20%


The template footer is now DONE, and you’ve learned a few cool tricks. When you slice it to CSS, just make sure you set the background bottom for it, so when you content gets longer, the footer will always stay on the bottom. Enjoy!

('DiggThis') StumbleDelicious


Wow! this is so cool… and you have it detailed all the steps in here! that is amazing!

Cute design and informative tutorial, I often overlook how easy but yet effective creating a pattern for my layouts. Thanks for the nudge I think I will try some of this today…

Thanks and Regards

Noel for
professional graphics design

Excellent! great way of explaining and very cute designing. thanks for sharing.

i really like the design! it’s very valentine’s day-ish!

x-lent..i am working as web design ar althea design .it helped me to increase my skills..thanks

Leave a Reply

  • Built2Go
  • ThemeStock
  • Stockedphotos
  • Bravenet
  • Bluehost