View Profile
View Forum Posts
Private Message
Visit Homepage
o0Hubba0o @ Good tuts submitted this
If you like our tutorials you'll love the rest of our site too.
We have a great community, so come REGISTER and join us!
This will be a beginner tutorial to start, it's probably one the most basic animations, but for someone who hasn't done anything in imageready it will help get you on the way to doing your own animations. As usual I'll put the keyboard shortcuts for certain steps, but you can also do them whichever way you usually do. I will add to this tutorial down the line increasing the animations and difficultie of it. So keep an eye out for part two which will add animation to the name, or a more complex border.
This is the final product of this tutorial:
Note: The animated border on this I actually wanted to be cented over the black border lol, oh well, you get the idea still lol.
Basic layout/Photoshop
1) Create your document, blinkies seem to be around 150 X 20 generally. Make the background whatever color you would like.
2) Let's make the border first. On your background layer add a 3 pixel inside stroke. (Layer > LayerStyle... > Stroke)
3) Next let's add some text, the font size will vary depending on your font style. I used a pixel style font for this one and only needed a size of 8. Adjust and resize the text to fit however you would like it too.
4) Now the fun part heh, create 3 new layers (Shft+Ctrl+N), to make it easier rename them to border1, border2 and border3.
5) Go to: Edit > Preferences > Guide, Gride & Slices and make sure the grid settings are for a line every 1 pixel. Now go to View > Show > Grid. You will have to zoom in also, hit Ctrl + "+" till it gets big enough for you to work with.
6) For this blinkie I'm just going to do a basic white marque type border. So grab your pencil tool and set it 1 pixel and what ever color you choose. Here's where it gets a little tedious, this is what will seperate the true addicts from the wannabe addicts lol.
- On the first border layer; "border1", starting in one corner color 2 squares in, then skip 3, color 2 skip 3 and keep going. When you get to a corner just keep the same pattern around the corner, color 2 skip 3.
- Now hide the "border1" layer (click the little eye next to it) and start on the "border2" layer. Following the same pattern but instead of starting in the corner, skip 2 squares then start.
- Now hide the "border2" layer also and start on the next layer; "border3", this time skip 4 boxes to start off with.
7) Make sure the "border1" layer is visible and the other two are hidden.
Animation/Imageready
1) Ok click the button to switch over to imageready or Ctrl+Shft+M, the animation should be one of the easiest steps.
2) Duplicate the frame twice, so you should have 3 frames.
3) The first frame should be set, only the border1 layer should be visible.
4) Go the next frame and hide "border1" and make "border2" visible.
5) In frame 3 make "border2" hidden, and make "border3" visible.
6) Set the amount of time for each frame, I put these at .1 sec.
Reply With Quote
Quote: DemonicPaper
lol
