?

Log in

No account? Create an account
 
 
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)

 
cold
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*

*smooches*
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*

*snuggles*
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)

*huggles*
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!! ♥

*huggles*
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:

http://sweetgirl7808.livejournal.com/tag/tutorial
(Deleted comment)
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*