Photoshop and ImageReady was combined into 1 so you can use Photoshop CS2 or CS3 .
update: 20th jan 08
This is just a little tutorial on creating a userbar and an animated shining effect using
Adobe ImageReady. If u dont know ImageReady but have some Photoshop Knowledge then u'll be familiar with most of the tools.
Ok lets start by creating a 320x19px document. I used a light dark red as a background.
Make a 1px stroke around the canvas:
-New Layer (CTRL + SHIFT + N)
-Fill Layer (CTRL or ALT + BACKSPACE)
-Right click the layer, Layer Styles and choose Blending Options
-Set Fill Opacity to 0% and apply a 1px black stroke with Position:Inside (default)
Now make the white reflection, using the Ellipse Tool (U) and set the opacity to something between 30-40%.
I set it to 35%
Its time for the scanlines pattern:
-Create a new 6x6px document with transparent background
-Draw a single 1px diagonal line (better zoom in to maximum before drawing)
-Then Edit menu and choose Define Pattern
Then create a new layer, go to Edit menu and choose Fill.
The following dialog will appear:
As in the picture above, choose Pattern and opacity to smth like 10-20%.
It will fill the background with the newly created pattern, set as default by ImageReady.
Now the last step before the animation, creating the text. As a standart:
-Font: Visitor -BRK-
-Size: 10px (ImageReady uses pixels for fonts)
-Antialiasing: None
I wrote a white "Usebars.org User" with 1px black stroke
-To make the stroke, right click the text layer, Layer Styles and choose Stroke
-1px, black and Position:Outside
After all these ull end up with something like this:
Create a text in the left part of the canvas. I wrote "USERBARS.ORG"
-Font:Arial (bold), Size:14px, Color:Black, AntiAliasing:Strong
Now lets create the shining layer which will mask through the text.
Create a Rectangle which is slightly wider then one character of your text and its height bigger then the text.
Place it in the leftmost part of the canvas, without it overlapping the text. This will also serve as the first frame of the animation.
To achieve the shine effect we have to create a gradient for the rectangle.
It must be bright in the middle and fade to the side.
-Right click the rectangle layer, Layer Styles and choose Blending Options.
-Set fill opacity to 0%
-Go to Gradient Overlay and set Angle: 0
Now click at the part marked with red to bring up the Edit Gradient dialog:
-Create a center color point and make all three color points white.
-Create a center transparency point and assign it a 80% transparency.
-Set the transparency of the other two points to 0%.
(Point values are changed by double clicking at them)
(Points are created by clicking in an empty area)
This step may be a bit confusing for those who never heard about clipping masks, but ill try my best to explain.
Im assuming you have the rectangle layer just above the text layer (in my case "userbars.org"). Let them as they are cos thats how we need them. Hold down ALT and place the cursor just in the middle of the two layers. You will know if its ok because the cursor will change to something like two small circles, and the empty circle shows its fill in the place where it overlaps with the other circle. It shows just the basic idea of clipping masks. With the cursor changed, now u can left click and so u have created a clipping mask. Pretty simple heh!!
mod edit: [picture] added by yet, jan o8
What it basically does is to show the top layer (in this case the rectangle) within the borders of the bottom layer (in this case the text).
And this is what we need, cos we dont want the rectangle show outside the text borders. Anyway right now you wont see the effect cos the rectangle is placed so it doesnt overlap the text. If u wanna see the effect just place the rectangle somewhere in the text.
Ok we have everything set up for the last step, the animation. All the static part was created and also we prepared the first frame. It is time to create the second frame.
In the animation palette click the new layer symbol (Duplicate Current Frame), which duplicates the first frame and creates a second one.
Also ive marked the "Tween" button because we will use it later.
Now we are at frame 2 and all the changes we make will affect only frame 2. So select the "shining" rectangle and move it to the end of the text (the "USERBARS.ORG" one). So we have the first frame where the rectangle is in the leftmost part of the canvas and the second frame where the rectangle is just after the text. You should have got the idea right now. What we have done with the two frames is specify the first and last position of the "shining" rectangle. The rest of the job is done by ImageReady (pretty smart app lol).
Just click the Tween button which i marked in the above picture. The following dialog will appear:
Tween with: Previous frame (makes the tween with the previous frame, frame 1)
Frames to add: 50 (used 50 so it results a bit slow and shows the shine with all its glory)
Layers: All Layers (it will show all the layers in the tweening frames, but animate only the one that has been changed)
Parameters: Position (we have only done the movement of the rectangle so thats the right option)
Now click the play button and see the preview. Pretty neat. If you want you can make the last frame delay a bit (like 2 secs) if dont want it to restart the animation immediately.
Ok we are done now. Hope this tutorial helped you in some way, cos you can use the same animation techniques with only just some tweeks, to create lots of different transitions. And by the way, im no ImageReady expert so there may be parts where i might have gone for a shorter approach, but WIKIWIG (What I Know Is What Im Giving looool). If u have any questions, suggestions or you have followed the tutorial and the result is far from what u expected, post here and ill reply asap.
Bye for now and this is my result after all the above steps.
Author