Welcome, Guest. Please login or register.
Jan 23, 2019, 08:56 AM

Login with username, password and session length
13522 Posts in 2078 Topics by 2116 Members
Latest Member: TrentonDuf
Search:     Advanced search
+  Userbars.ORG Forum | Community
|-+  Userbar Newbies
| |-+  How To Make Userbars
| | |-+  Tutorials and Guides
| | | |-+  [tutorial] Animated scanlines
« previous next »
Pages: [1] Print
Author Topic: [tutorial] Animated scanlines  (Read 12270 times)
Blayde
Global Moderator
Sr. Member
*****
Posts: 430


View Profile WWW
« on: Feb 10, 2007, 05:27 PM »

As per request this tut is made, if it blows, then my bad  Tongue

This tutorial shows you how to make scanlines move along.

Needed:
Patience (not an application)
Adobe Photoshop
Adobe ImageReady

First, make you userbar in PS, as i have done, and then save it in save for web as gif, highest quality (cos when you transfer to imageready, whatever format was last saved in PS will get transferred over, and it's usually jpg, non animated)



Next, make a new layer(make everything else invisible so you can work) and fill it with white, a nd then add scanlines, at a low opacity



Next, make a medium sized selection on the scanlines layer, ctrl+c and then ctrl+v



Deselect selection, then select the scanlines original layer and nudge it right(ctrl +rightarrow) so that it isnt touching the copied layer. After that, move the copied layer above the original scanlines layer ion the layer box, and then nudge the copied layer over the scanlines original till it looks like one big scanlines layer



After this, ctrl+e while both scanlines layers are selected to merge them, then nudge the scanlines layer back till the right side is just at the edge(ie into the original position)

Make you userbar visible again and put the scanlines layer over the gradient but not the rest of it(unless you want to)


For black scanlines use multiply to remove the background color and for white, use screen or color dodge (in the drop down next to opacity) and lower opacity of either to suit the bar.

Remember the next step depends on your scanlines, whether you have a wide set, or a standard width scanlines, cos they vary

Hop onto imageready, and then duplicate the frame(dont forget to make sure all the necessary layers are visible and the opacity and effects are set). Select the scanlines layer and nudge it one pixel(ctrl+ right arrow once) on the second frame(the one you just duplicated). Again duplicate the second layer and repeat this. Keep doing this until the last frame and the first frame look like the last is one pixel away from the first(in the standard scanlines, there should be three frames, if you use a wide set of scanlines, it may vary)

for timing i use  0.1 seconds, it works well, then save optimized as and viola!




Logged



~ SymoN ~
Newbie
*
Posts: 10


View Profile
« Reply #1 on: Feb 28, 2007, 03:12 PM »

very nice tutorial...

Thanx for disone...
Logged
tanocapo
Newbie
*
Posts: 2


View Profile
« Reply #2 on: Mar 26, 2007, 08:38 PM »

Could you show us an example?? Please!!
Thnx in adv. Grin
Logged
joseloco
Full Member
***
Posts: 110


View Profile
« Reply #3 on: Mar 26, 2007, 09:05 PM »

Could you show us an example?? Please!!
Thnx in adv. Grin

I think the bar at the end of the tutorial is an example. Just look carefully and you will see the animation.

BTW, nice tut Blayde. Smiley
Logged

tanocapo
Newbie
*
Posts: 2


View Profile
« Reply #4 on: Mar 27, 2007, 09:21 AM »

How silly i am!!!  Cheesy Cheesy Gonna try it later!!

Thanks mate!!
Logged
aghoose
Newbie
*
Posts: 1


\m/


View Profile WWW
« Reply #5 on: Dec 18, 2010, 07:31 AM »

cool...
Logged

Pages: [1] Print 
« previous next »
Jump to:  

Powered by SMF 1.1.16 | SMF © 2011, Simple Machines Design by 7dana.com