Bits and pieces of my life
Tutorial: Animated Bunting Header

Going straight to the point..

The font I'll be using in this tutorial is KG A Little Swag. You can download it here.

Once downloaded, extract, install font,.. I suppose you know the procedures at this point. Open Photoshop, mine's CS5. Create new white canvas, mine's 639px by 94px. Type away whatever you want, any color, any size. The buntings would be a little longer with caps-on.

At this stage, this is how you bunting header would probably look like..

...your text with unicolor..
..and you layer, sth like this;

notice the text layer with caps-on and caps-off, well you know why.. for the pastel colors...
I'll be using #F2D4C9 #F6D8D8 #E1E6C0 #D4E5DB , and #F5F6D2 

Applying the colors to your text

copy any of the color code above, click on your text layer and using the text tool, highlight the any letter you want.

On the text panel directly below main panel, click on the box with the current color of your font to set the color.

..and there'll be a pop-up, paste the pastel color code in the highlighted text area.

..repeat the recent steps above for the other letters, with the color you want. Here's how my text layer look like after setting the color of each letter and stuffs;
..Now for the lines, rails and stuffs..refer here.
for the curly ends, I'll be using brackets. Opened bracket '(' for the curly end on the left, and closed bracket ')' for the curly end on the right. for the putus-putus lines, I would use the percentage symbol '%'

..and for the rails underneath the buntings, I would use '='

Applying the rails, lines and stuffs.

I'll go with the putus-putus lines first..
click on your text layer, and create a new text layer on top of it. In the new text layer, type '%'. Once done, place it in the first bunting-letter and resize the '%' until it fits the width of the bunting.

so..this is how your first text layer would probably look like..with the putus-putus line on the initial letter..
...and this is how you layers would look like.. right-click on the '%' layer and select 'duplicate layer..' there'll be a 'OK'. Then, use your right keyboard arrow(make sure your cursor is the pointer with the dragable icon beside it) to move the duplicated putus-putus line towards the right. Stop when it has settled in its place. Repeat the steps from the 'duplicate layer' thing..
 The result once done with the above procedures;

...and the'll have multiples of dupliacted '%' layers..

..and now for the rails behind the buntings.. i mentioned earlier, i'll be using '=' for those rails..
..below your first text layer (the one with all words of your choice), create another text layer and this time, type out '='. Move it right, left, top ,bottom until it results in sth like the image below.

..notice the line that goes across the top of the gap in between the two buntings?
..your layers should look like this..the '=' layer should be in between your locked background layer and your first text layer.
repeat the step with duplicates of '=' layer, all under your first text layer.
...and the top of your buntings should look like this;

...and last but not least, the curly ends...done with this step and we're ready for animation..
..also below your first text layer, make a new text layer, this time, type out '(' and ')'. Position it and you'll have something that results like the image below;

...oh gosh..i'm tired, mind if i take a break?... to be continued..


...ok next step, below your first text layer, make a new text layer and type out '{' . A plain bunting will appear.

set its color to any color, grey, black or whatever, as long as it's not the color of your other pastel colored buntings. Also, the color of your plain bunting will be the color of your text in the animation frames afterwards. Make sure the plain bunting is not any bigger than your other buntings.

Now drag your plain bunting underneath the first letter in your first text layer. You'll have something like this;

notice the first letter.
Before doing the same for the second letter, click "File>Save for web&devices..". That'll be your first frame for animation. Now for the second letter,repeat the same thing by dragging the same plain bunting layer to the second letter. You'll now have something like this;

note the second letter.

Save it under a different file name. Now that'll be you second frame for animation.Repeat the same thing for the other letters. Mine resulted in the following;



Frame#4 got it already i suppose..let's carry, for animation time;

Once you've made separate layers for each letter, click "File>Open.." . Open all the layers you made for each letter. On the first layer, that is is the layer for your first letter, drag all the other layers to it(in order) and place it above your first layer. Still on the first layer, below, u'll see 'Animation(frames)'. On the top right of that very panel, click 'Make frames from layers..'

This is how your layers would probably look like;

..and your frames perhaps like this;

..and the result..

you can adjust the speed by clicking on the top right of the animation panel and selecting 'Select all frames...'. You'll then see all frames are highlighted, indicating any changes done on the first frame will be inherited by all the other frames. By doing so, click on '0. second' on the first frame and select another option of your choice. ..and that's under web&devices and you're done!

Labels: , ,

Newer Posts Older Posts