Log in

05 April 2008 @ 08:02 am
Animated Banner Tutorial  
Because I got a request about the the new animated header of ckll I made a tutorial. But I created it as a banner this time, 'cause it's easier to show. It works the same way with headers or icons.

I'm using Photoshop CS2

I started by creating this background.

The polaroid textures are made by chaoticfae. You can download it HERE
Backgroundtexture is made by hermintage. You can download it HERE

Of course I wanted to put photos into my frames. So I took THIS picture for the frame in the background.
I flipped, rotated and screened  it (it's also possible that "lighten" is better for your picture then screen - depends on the picture) and erased every part of the pic that doesn't fit into the black part of my polaroid.

This is what I got:

Now we need a pic for the frame in the front
I took the same pic again. Rotated and croped it until it fits into the black part of the frame. Screen it and erase the edges of the pic which are not fit into the frame. You should get something like this:

I call this layer from now on J2a!!

Because we want a banner with animation at the end, we have to fit in a second photo.
Make your last layer with the boys invisible (click on the eye button beside the layer). Now your banner looks like on the second picture again.

Now I took THIS picture and fit it also into the first frame. (Crop, rotate, erase and screen it... you already know what to do)
At the end it should look like this:

I call this layer from now on J2b!!

Make this new layer invisible. And now make the J2a layer  visible.
Looks again like this:

Now the magic begins. Let's animate it. ;o)

Open your Animation program. I use the PS animation program (just click at WINDOW - ANIMATION)
When you've opened it, your screen looks like this:

Change the time of the first frame to 2 (click on the little arrow on the right side of your frame)
Now click on the button with the "paper" on it (red arrow)

You got a second frame that looks like the first one. Click on this frame and then make  your J2a layer invisible and your J2b layer visible.
Now it looks like this:

Make a click on your first frame so it is marked.
Click on the button with the bubbles on it (red arrow)

A new window pops up.
Change the number of frames to 4. The scroll-down button should be already at "next frame":

Click on Ok and you get 4 new frames between the first and the last one.
Change the time of the 4 new frames to "no delay":

Now click on the last frame so it is marked and click again the "bubble button".
When the window pops up again change the scroll bar to "first frame" and change the number of frames again to 4.

Now you get again 4 new lays (behind the one with J2b):

Change the time of the 4 new lays again to "no delay" - and that's it!!!

Safe it as gif and this is your result:

We all know that me English is not the best. So if you don't understand anything feel free to ask! :o)

Current Mood cold
ckllckll on April 5th, 2008 07:15 am (UTC)
I wish i wasn't so brainless and make such great art :D
Manu: dean smile non anisweetgirl7808 on April 5th, 2008 07:35 am (UTC)
Naawww sweetie, it's not as difficult as my tutorial seems. *gg*
(no subject) - ckll on April 5th, 2008 07:49 am (UTC) (Expand)
shai82: Dark Angelshi82 on April 5th, 2008 07:22 am (UTC)
great tutorial thanks
Manu: dean sexysweetgirl7808 on April 5th, 2008 07:35 am (UTC)
Thanks a lot! :o)
Geoislagurl on April 5th, 2008 07:45 am (UTC)
Awesome tutorial. Mem'd it and can't wait to try this out. That's if I have a chance to.
Manu: dean smile 2sweetgirl7808 on April 5th, 2008 03:06 pm (UTC)
Thanks so much! :o)
ramoniciuramoniciu on April 5th, 2008 08:10 am (UTC)
Great tutorial and your english is perfect!
Manu: sam smile heart s/wsweetgirl7808 on April 5th, 2008 03:06 pm (UTC)
*Blushes* Thanks sooo much sweetie! ♥
blackbirdj2blackbirdj2 on April 5th, 2008 08:45 am (UTC)
Thank you so much for the tutorial!! :)
Manu: dean sunshinesweetgirl7808 on April 5th, 2008 03:07 pm (UTC)
My pleasure hun'! :o)
(Deleted comment)
Manu: live your dreamssweetgirl7808 on April 5th, 2008 03:08 pm (UTC)
Hey sweetie! Of course I would try to make it!
I'll send you my e-mail address per PM. ;o)
Wiveca: SPN: Dean with halowive on April 5th, 2008 12:16 pm (UTC)
This looks beautiful!
And your tut makes sense of course!
Your english is just fine!
*bookmarks this*

Manu: hug sam deansweetgirl7808 on April 5th, 2008 03:11 pm (UTC)
Thank you soooo much sweetie!! ♥
I'm always nervous when I have to write so much in English. When I only post arts it's much easier for me! *gg*

Kikkik_luna on April 5th, 2008 02:48 pm (UTC)
Bei deinen Erklärungen lohnt es sich schon beinahe sich den PS zu organisieren und es auszuprobieren! Trotz dem vielen Englisch ist es gut zu verstehen und bestimmt nicht mehr so schwer es nachzumachen :o)

Sehr gut erklärt "Frau Lehrerin" *ggg* Hier sind dir bestimmt einige Dankbar dafür...

*drück dich*
Manu: dean smile 2sweetgirl7808 on April 5th, 2008 03:12 pm (UTC)
Aaaawwww Danke Mäuschen!! ♥
Und wenn Du Dir Photoshop zulegst, kannst mich gerne fragen wenn Du was bastelst! ;o)

thacha: dean_promotalulababy on April 5th, 2008 03:22 pm (UTC)
Awesome! Thanks. :D
Manu: dean sam cloudssweetgirl7808 on April 6th, 2008 03:45 am (UTC)
My pleasure hun'! ;o)
faith1912faith1912 on April 5th, 2008 03:29 pm (UTC)
Whoa! I love your tuts! They are awesome and totally easy to understand! Thank you! *hugs*
Manu: dean smilesweetgirl7808 on April 6th, 2008 03:45 am (UTC)
Really?? Wow that's awesome! Thanks soo much for telling me this!! ♥
bianka 'street': sam/buffyowlanatomy on April 5th, 2008 05:52 pm (UTC)
Totally doing this later!

thanks you posting the tut.
I love it.
Manu: sam smile heart s/wsweetgirl7808 on April 6th, 2008 03:46 am (UTC)
Thanks sooo much hun'!!! ♥
birggitt: Animal Spiritsbirggitt on April 5th, 2008 10:00 pm (UTC)
Added to memories, because this is such a well explained tutorial, even me could follow up =D
Thank you very, very much!
Manu: live your dreamssweetgirl7808 on April 6th, 2008 03:47 am (UTC)
Naaawwww thanks soooo much sweetie!! ♥

albeitslowly on April 6th, 2008 12:14 am (UTC)
Ooh, thank you. *bookmarks* I haven't even opened Image Ready yet, lol.
Manu: dean omgsweetgirl7808 on April 6th, 2008 03:47 am (UTC)
It took me sooo long until I've tried my first animated icon! I'll never forget how nervous I was! *g*

Thanks a lot for bookmarking sweetie!! :o)
(no subject) - albeitslowly on April 6th, 2008 03:49 am (UTC) (Expand)
(no subject) - sweetgirl7808 on April 6th, 2008 03:51 am (UTC) (Expand)
(no subject) - albeitslowly on April 6th, 2008 03:54 am (UTC) (Expand)
(no subject) - sweetgirl7808 on April 6th, 2008 03:59 am (UTC) (Expand)
misutakimisutaki on April 6th, 2008 02:59 am (UTC)
OH MY GOD MANU! THIS IS.... IS.... Spektakulär!!!!! AHHHHHHHHHHH!!! i bookmarked this thinking omg this is wonderful.. then when i finished making sure i knew how to do it, i looked at the name and i was like OMG IT'S YOU!!! SQUEE!!! OMG IT'S YOU!!! <3
Manu: blushsweetgirl7808 on April 6th, 2008 03:49 am (UTC)
Really??? OMG thanks sooooo much!!
I'm making tuts from time to time. Not very well... but I'm trying to get better!
Please tell me if you've found mistakes (you know - my English problem). *sigh*

Here are my other tuts and my beloved icon tut-list:

Rua1412: Deanrua1412 on April 6th, 2008 12:55 pm (UTC)
Wonderful tutorial! Thank you to have shared it.
I'll surely try the not animated part of it in future since I don't know anything about creating an animation though ^_^
Manu: dean smile 2sweetgirl7808 on April 6th, 2008 03:30 pm (UTC)
Thanks a lot! ♥
Oh be sure this animation is very simple! I'm a really lazy person, so most of my stuff is very simple! *gg*
     Mandya_phoenixdragon on April 7th, 2008 01:38 am (UTC)
Whoa... Okay... STILL too complicated for me! But thanks for showing us, love!!

*Looks forward to more yum from you...*

Manu: impala colorsweetgirl7808 on April 7th, 2008 03:31 am (UTC)
Hey luv! Glad you like it. :o)
I know it seems complicated. But that's just my stupid way to explain things. It's really easy to make this.


*hugs you tight*
(no subject) - a_phoenixdragon on April 7th, 2008 04:08 am (UTC) (Expand)
Call Me Psycho Troll!: FreshBlood-GIFala_tariel on April 7th, 2008 05:02 am (UTC)
Oh thank you, thank you. Last Friday, I managed on making an animated icon. *points to icon* what do you think? It's my second animated icon. :))

Now, I have to find a quiet time and make an animated banner, based on your lesson here.

You are wonderful! ♥
Manu: dean smile non anisweetgirl7808 on April 7th, 2008 05:12 am (UTC)
Wow your icon turned out very well! Only the second line is a little bit hard to read. But your icon is really good!!

Would love to see your banner (when you made it of course!)

I'm glad you like my little tut. If you have any questions, feel free to ask. ;o)

(no subject) - ala_tariel on April 7th, 2008 05:19 am (UTC) (Expand)
(no subject) - sweetgirl7808 on April 7th, 2008 07:06 am (UTC) (Expand)
(no subject) - ala_tariel on April 7th, 2008 07:07 am (UTC) (Expand)
Robyncakesbitterbird on April 9th, 2008 03:26 am (UTC)
I always love playing with that animations affects they are so fun!
Manu: tutorialsweetgirl7808 on April 9th, 2008 03:31 am (UTC)
You're sooo true!!
I'm planing a tut with animated text affects. *gg*
(no subject) - bitterbird on April 9th, 2008 03:34 am (UTC) (Expand)
(no subject) - sweetgirl7808 on April 9th, 2008 03:44 am (UTC) (Expand)
(no subject) - bitterbird on April 9th, 2008 03:49 am (UTC) (Expand)
(no subject) - sweetgirl7808 on April 9th, 2008 03:58 am (UTC) (Expand)
(no subject) - bitterbird on April 9th, 2008 04:04 am (UTC) (Expand)
summer_lovesummer_love on April 9th, 2008 05:16 pm (UTC)
Thanks for the tutorial! I love that animated header you made. It's gorgeous!!
Manu: sam smile heart s/wsweetgirl7808 on April 9th, 2008 05:19 pm (UTC)
My pleasure! I'm glad that you like the tut - and of course the header! :o)
Call Me Psycho Troll!ala_tariel on April 14th, 2008 09:20 am (UTC)
Hi! It's me again. :))

I have a question. How can I save my work with GIF extension? Because it juts won't work. The layers don't appear. I have to save it with "save for web' and the result is very ugly and the file size will be very big.

What do I have to do?

Thank you very much for the answer.
Manu: dean thinkingsweetgirl7808 on April 14th, 2008 10:17 am (UTC)
Hey! *waves*
You make everything right, 'cause the size has to be really big.
You can try to optimize the size of the gif.
When you are in the "save for web" window, click on this little arrow:

Choose "optimize filesize"
You can write into the little box 999.
Then try to save it with this size.
(no subject) - ala_tariel on April 14th, 2008 11:14 am (UTC) (Expand)
celia_goesfactoids on June 9th, 2008 02:20 pm (UTC)
Hi, just wanted to thank you for this great tutorial! made a banner for my profile.

will credit you for the tutorial (:

you can check it out here


thanks once again!
Manu: good jobsweetgirl7808 on June 9th, 2008 02:50 pm (UTC)
OMG your header is awesome!! Looks so gorgeous!! :o)
Thanks so much for your super sweet comment! ♥

Btw: Credit is really not necessary. The header is your work! I had nothing to do with this masterpiece! ;o)
Franzi: John Crichtonfranzimania on August 11th, 2008 07:33 pm (UTC)
also hammer tut^^ ich find es wirklich klasse und du erklärst suuupiii^^
trotz meines sehr schlechten englischs konnte ich es ein bissel nach machen...
das ergebnis ist zwar nicht perfekt aber mir gefällt es und ich werde es auch selber benutzen :D als header^^

und was sagst du dazu???

Manu: butterflysweetgirl7808 on August 12th, 2008 03:49 am (UTC)
Awwwwwwwwwww vielen Dank! Wenn Du mal echt Problem mit den Englischen Erklärungen hast (vorallem weil mein Englisch sehr stümperhaft ist) übersetz ich Dir auch gern ein Tut. ;o)

Bist Du eigentlich noch zu retten? Der Header ist nicht perfekt? Der ist sehr wohl perfekt - und vorallem verdammt "lecker"!!! *melts*
Ich fin den einfach superklasse!!!! :o)

(no subject) - franzimania on August 12th, 2008 09:49 pm (UTC) (Expand)
(no subject) - sweetgirl7808 on August 13th, 2008 05:03 am (UTC) (Expand)
(no subject) - franzimania on August 13th, 2008 11:54 am (UTC) (Expand)
(no subject) - sweetgirl7808 on August 17th, 2008 03:54 am (UTC) (Expand)
(no subject) - franzimania on August 17th, 2008 08:05 pm (UTC) (Expand)
(no subject) - franzimania on August 18th, 2008 08:39 pm (UTC) (Expand)