What's new
Photoshop Gurus Forum

Welcome to Photoshop Gurus forum. Register a free account today to become a member! It's completely free. Once signed in, you'll enjoy an ad-free experience and be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

Animation Effect...


stOrM!

Well-Known Member
Messages
181
Likes
0
Uhm sorry this time I have no screenshot of the effect I would like to use... :{

I try to descripe it best I can...

Don't know if you have noticed the effect ofthen seen on old movies...
It's like little borders mostly white or grey moving across parts of the movie...

I made a little LCD-Screen with animation it would be great, if I could add the mentioned effect over the animated Logo in the screen...

BUT!

If someone had a better effect, which I could easily add to it, I would be glad if you tell.

Maybe firstly having a look on my animation will help...

BTW.
Another problem while building the animation itself I noticed is:
I don't believe that I really have to create 85 Layers to build the animation I'm sure it could be done with less Layers but how???

Also it blows my Filesize to the sky 1.85 MB!!!!!!!! [stuned]
 

theKeeper

Guru
Messages
2,313
Likes
63
Delete some frames Storm, 86kb is way too big for a "sig" file image. Try every second frame removed. Duplicate your document first though so you're not working on the original.
The letters are moving past so fast anyway noone is going to see/miss them if some are removed. You don't NEED to have ALL the letter scrolling up from 'A' to the other letters. Save that stuff for the Hollywood movies. :rofl:

As for the 'film stutter' line effect... try adding a new layer above the others, set to Screen Mode, fill with black, and run the FILTER>Texture>Grain filter with a setting of 100/100/Vertical.
Then add a Threshold Adjustment layer to the grain layer and dial the effect you want by adjusting the slider.

NOTE: group the Adjustment layer to the grain layer.

To animate... just add a new frame, then move the grain line layer a bit over. Do this a few more times, moving in both directions. Make small movements not big leaps.

Then repeat the grain filter & adjustment layer steps on another new layer. Turn off the first grain line effect layer. Now add some more frames to the animation and move this new grain line around like you did the first one.

TIP: if you put the grain filter and adjustment layers into a "group", they'll be easier to work with. :perfect:

Get what i mean? :B

Here... i've created an example "clip" that shows the effect i'm describing above. It's 111kb however, and may take several seconds to load.
 

stOrM!

Well-Known Member
Messages
181
Likes
0
Man thats cool!

I'll try :perfect:
 

Sanby

Power User
Messages
210
Likes
0
Great stuff Keeper.

And I love the image you have there Storm, jsut bring the filesize down.

BTW, nice avatar Mark :rofl: :rofl: :rofl: :rofl:

Sanby
 

stOrM!

Well-Known Member
Messages
181
Likes
0
Thanx Sanby!

For Deleting every second Layer... Uhm will this not be seen in the animation? cauze the Animation running from A to S for example so when A is seens then it will go to C so visitors will not recognice that?

I've found a way somewhere in a Tut which describes another way to make the Filesize small but I've been lost on the way how he made it since it doesn't work maybe I did a mistake!

Please have a look: (He made the same just with Numbers!)

snip:

A more elegant (and not much more sophisticated) approach would be to create a virtual "number wheel" ? a vertical, masked string of characters that can be "rolled" to display the desired digit. This approach only requires one layer for each character: so we would only need 3 layers instead of 30!

To begin, duplicate the original type layer ("4.39") again and drag the layer to the top-most position in the Layers palette (or choose Layer ? Arrange ? Bring to Front [Ctrl+Shift+] ] ). Double-click on the name of the layer (in the Layers palette) and type a "4.39" (or delete the word "copy") so that the layer name reflects the actual contents of the layer.

Double-click the type layer thumbnail ( ) in the Layers palette to select all the type in the current layer. Type the numbers "0" through "9", pressing enter after each number (e.g. "0", Enter, "1", Enter, "2", Enter, etc.). You will not be able to see what you are typing once the cursor disappears below the canvas, but don't worry about that.

Again, select all type in the current layer [Ctrl+A] (or double-click the type layer thumbnail ( ) in the Layers palette). From the Character palette (Window ? Show Character), enter 64px for the Leading ( ) (or some value that leaves about 5 pixels between the lines of type).

Finally, using the Move tool [V], position the "4" in newly created "number wheel" layer directly on top of the "4" in the original type layer ("4.39").

On this I am lost since it doesn't work correctly to me (I'm lost!)

kr
s!

BTW. found the Site again where I got it:

http://user.fundy.net/morris/redirect.html?photoshop19.shtml
 

wbiss

Guru
Messages
2,313
Likes
7
:perfect: Great effect there Mark! :}

stOrM!, re your animation, I agree that you could cut your file size in 1/2 by eliminating every other frame and perhaps, speeding up the transition just a tad. Test that out. The 'eye' is easily fooled into filling in the blanks.

Try it... ;)

BTW....B7 cool new avatar, Sanby!
 

Bubble

Power User
Messages
239
Likes
0
stOrM... I love the LCD animation. Can't wait to see how it looks when its done.

Mark!!! Fantastic effect! Gotta add that to my 'things i wanna try one of these days' list! :perfect:
 

theKeeper

Guru
Messages
2,313
Likes
63
Thanks guys. [honesty]

Storm... no, people won't see that transition. It's too fast. If they were to think anything... it would simply be that the letters are being displayed in a random manner,. then stopping at the appropriate one to spell your name. Not a big issue when file size reduction is the cost. ;)

The biggest tips i can give anyone to reducing file size is first, use a few colours as you can, second, keep the dimensions down to a practical size, third, use the "reduce pixels" method of frame advancement... here... for a more complete bit of info on this, read the article i wrote about it: http://www.sitepoint.com/article/634

:B
 

stOrM!

Well-Known Member
Messages
181
Likes
0
Great Tips Mark!

The Storm Animation was just a try to get familiar with animation things...
while having following in mind:

I am currently coding my own Browser... (A real Full-Screen Browser !)
I did FilmStrips as thumbnails for the current Browser Windows hard to explain thought! )

So I need a little animation when users will surf to a site on the net like IE does with his Globe animation...

What I would like to have is a YING/YANG Symbol (steel + glass) turning 360 ? around) in the glass part I would like to have 010100010001 moving from the right to the left inside the glass part of the Ying/Yang Symbol but not on the steel part just inside the glass part...

I found a shape which already have that symbol so I don't need to draw it myself (thank god [oops]

Problem is how to build that animation since it seems a little too much for a beginner where would you start as you where me?

kr
s!
 

theKeeper

Guru
Messages
2,313
Likes
63
Aaah, well if it's for an app that'll be running on people's computers... then file size is almost irrelevant.
I'm familiar with how those anis are created for the browsers. Like a film strip of frames that run right to left.
What type of app would you use to compile that ani? It's not a Gif, ...Avi?

That's a helluva nice sounding ani idea Storm. But to get the symbol rotating 360 using just PS will be extremely difficult.

If i may, i'd like to give the main ani idea a shot with 3D.
What type of 'metal"? Steel? Shiny or matte? Tinted glass or clear? Black background?

FYI: having the binary code running through the glass part will prove a challenge to make it really visible. The animations used for that purpose are quite small usually. Unless you want to numbers to be almost as tall as the glass part of the symbol? And moving fairly slowly.
 

stOrM!

Well-Known Member
Messages
181
Likes
0
Mark!
Sorry for the delay, but yesterday I was getting an old man I'm in the 30'er now :(|

Here I put a small picture, of what it could / should be something similiar I've seen in another Application you can see the ying/yang in the right corner sorry it's really small but maybe you see it ;)
 

theKeeper

Guru
Messages
2,313
Likes
63
Ok, that looks good.

You want the symbol to "spin" around like a disc? And then have the binary sliding through the blue plastic part...?

What are the dimensions of this symbol Storm?

I thought you meant full-on 3D, as in extrusion/depth and such. But if this is what you meant, then that would be simple to create in just PS. And if this is YOUR symbol... then it looks as though you already have it done well...?
 

stOrM!

Well-Known Member
Messages
181
Likes
0
You want the symbol to "spin" around like a disc? And then have the binary sliding through the blue plastic part...?

Yes exactly...!

And if this is YOUR symbol... then it looks as though you already have it done well..?

No sorry it isn't my symbol but it looks exactly like the one I would love to see in my browser... [innocent]

Marc
 

stOrM!

Well-Known Member
Messages
181
Likes
0
Dimensions are 65 * 65 Pixel
 

theKeeper

Guru
Messages
2,313
Likes
63
Ok well then... here's your challenge Storm... ;)

Since you only want it to be spinning like a disc, then it's totally possible to do in PS alone. Take the "Classy Glass Buttons" tute and make yourself a symbol. I believe you'll find the ying yang symbol in the Vector Shape default libraries in PS. If not, there are a number of fonts out there that have the symbol... and there even a tute posted in the Forum showing how to create the symbol.

Either way, do the glass button tute and put that symbol behind the glass. You'll need to split the symbol into its 2 parts. So it's easier to work with. Then add the metal affect to the yang side of the symbol. And move this layer above the glass button layers.

I'd go into more details about technique on this, but then you'd be doing a tute instead of a 'project'. If ya need some help, you can ask. But try to work out as many of the problem areas as ya can first.

PS: try to make yours original... don't copy that other one ya showed us.

Good luck! :perfect:
 

stOrM!

Well-Known Member
Messages
181
Likes
0
Ok Mark!
I'll try not sure if my knowledge is enough for that but I will try!

showing the result soon here...

regards
s!
 

stOrM!

Well-Known Member
Messages
181
Likes
0
Oh !
As I currently starting the Project I came to the first big problem (for me!)
You mentioned to cut the Symbol into two Parts! Thats my Problem cauze how can I do it?

I found it in the PS Custom Shapes...
I made a new Layer drawing that Shap onto it and have a selecteion currently... but now how to cut it ?

I added the PSD as attachment...

regards
s!
 

theKeeper

Guru
Messages
2,313
Likes
63
Actually Storm... i saw that one and now realize it's a bit different than the one you first referred to. This one has a border around it. That would make it a bit more work to use.

Basically though you'd just use the Magic Wand to select the "ying" side of the symbol, then on a new layer fill that with white.

Here... i've gone ahead and made an example for you. I kept the board and actually use it as part of the metal (yang) side. This close to what you're thinkin'?
 

Top