(no subject)
Tutorial requested by apanda523
This is the animation I use as a link button on my personal website.
The first thing I did was to open an RGB document at 400 X 100 pixels, and created a new blank layer. I picked the Gradient tool and chose the Noise gradient set from the flyout menu on the gradient picker. I ran the gradient from left to right, which created my base for the GIF, and in the Add A Layer Style menu in the bottom of the layers palette I chose Inner Shadow to give it some depth.
Over that, I created a new blank layer and switched to the Type tool. I made the type for "digital" and positioned it on the left side of the base. I pressed Ctrl + J to make a duplicate of that layer, then double clicked on the "T" icon in the layers palette for that particular layer and changed the word to "design", again switching to the Move tool afterward to reposition this layer. I repeated this process a third time, changing the word "design" to "version 4.0".
Clicking back on the Design layer in the layers palette, I chose Stroke from the Add A Layer Style menu in the bottom of the layers palette. In the Stroke dialog box, I lowered the Size to 2, Position to Center, and Fill Type to Gradient. I clicked once on the gradient thumbnail to bring up the Gradient editor, opened the flyout menu and chose the Metals set. From that set I chose the Silver gradient, and changed the angle until it looked like I wanted it to. I added a Drop Shadow from the Layer Styles menu in the bottom of the layers palette, and I lowered the Fill setting from 100 to 0 (it's just below the opacity setting). This made the type disappear, but that's what I wanted to do in order to make the type transparent. I repeated these steps for the other two type layers.
I clicked on the Jump To Imageready icon in the bottom of the Tool box, opening the layered image in Imageready. I opened the Animation palette by choosing Window/Animation. I clicked 5 times on the Duplicate Current Frame icon in the Animation palette, leaving me with a total of 6 frames. I clicked once on the first frame, and toggled off (toggle on and off by clicking on the eye icon beside the layer in the layers palette) all the Text layers as I wasn't using them in the first frame, leaving only the base (background) layer visible. I clicked the second frame and in the layers palette I clicked on the base layer and the "design" text layer, so that they were the only things viewable in the open document window. The third frame, again, was just the base layer with all other layers toggled off. Frame 4 was base & "design". Frame 5 was just the base layer, and Frame 6 was the base layer and "version 4.0".
Imageready lets you control the speed of each frame by changing the Frame Delay Time at the bottom of each frame. The default is 0 seconds, or "No delay". To slow it down, adjust this setting. Since I wanted the animation to continually rollover, I made sure all frames were set at "Forever", instead of "Once". This setting is below the Frame Delay Time setting. To make the transition fade smoothly, I tweened the frames. Tweening adds additional frames between your existing frames and effectively fades one into the other. To tween the frames, I clicked on the first frame in the Animation palette and clicked on the Tween icon. The default setting is 5, I increased it to 10. It tweens by default to the next frame in the palette. I counted five frames back from the right to the left and clicked on this frame, which was my 2nd original frame. Clicking the Tween icon again, I added more tweened frames to the animation - and repeated this process to the last frame. For this one, after you click the Tween icon, change the "Tween with next frame" setting to "Tween with first frame". Then I previewed it in a browser window by clicking the Internet Explorer icon in the toolbox. Once I was satisfied that nothing more needed to be done, I went to the File menu and chose Save Optimized As, and named the animation. That was all there was to it!
This is the animation I use as a link button on my personal website.
The first thing I did was to open an RGB document at 400 X 100 pixels, and created a new blank layer. I picked the Gradient tool and chose the Noise gradient set from the flyout menu on the gradient picker. I ran the gradient from left to right, which created my base for the GIF, and in the Add A Layer Style menu in the bottom of the layers palette I chose Inner Shadow to give it some depth.
Over that, I created a new blank layer and switched to the Type tool. I made the type for "digital" and positioned it on the left side of the base. I pressed Ctrl + J to make a duplicate of that layer, then double clicked on the "T" icon in the layers palette for that particular layer and changed the word to "design", again switching to the Move tool afterward to reposition this layer. I repeated this process a third time, changing the word "design" to "version 4.0".
Clicking back on the Design layer in the layers palette, I chose Stroke from the Add A Layer Style menu in the bottom of the layers palette. In the Stroke dialog box, I lowered the Size to 2, Position to Center, and Fill Type to Gradient. I clicked once on the gradient thumbnail to bring up the Gradient editor, opened the flyout menu and chose the Metals set. From that set I chose the Silver gradient, and changed the angle until it looked like I wanted it to. I added a Drop Shadow from the Layer Styles menu in the bottom of the layers palette, and I lowered the Fill setting from 100 to 0 (it's just below the opacity setting). This made the type disappear, but that's what I wanted to do in order to make the type transparent. I repeated these steps for the other two type layers.
I clicked on the Jump To Imageready icon in the bottom of the Tool box, opening the layered image in Imageready. I opened the Animation palette by choosing Window/Animation. I clicked 5 times on the Duplicate Current Frame icon in the Animation palette, leaving me with a total of 6 frames. I clicked once on the first frame, and toggled off (toggle on and off by clicking on the eye icon beside the layer in the layers palette) all the Text layers as I wasn't using them in the first frame, leaving only the base (background) layer visible. I clicked the second frame and in the layers palette I clicked on the base layer and the "design" text layer, so that they were the only things viewable in the open document window. The third frame, again, was just the base layer with all other layers toggled off. Frame 4 was base & "design". Frame 5 was just the base layer, and Frame 6 was the base layer and "version 4.0".
Imageready lets you control the speed of each frame by changing the Frame Delay Time at the bottom of each frame. The default is 0 seconds, or "No delay". To slow it down, adjust this setting. Since I wanted the animation to continually rollover, I made sure all frames were set at "Forever", instead of "Once". This setting is below the Frame Delay Time setting. To make the transition fade smoothly, I tweened the frames. Tweening adds additional frames between your existing frames and effectively fades one into the other. To tween the frames, I clicked on the first frame in the Animation palette and clicked on the Tween icon. The default setting is 5, I increased it to 10. It tweens by default to the next frame in the palette. I counted five frames back from the right to the left and clicked on this frame, which was my 2nd original frame. Clicking the Tween icon again, I added more tweened frames to the animation - and repeated this process to the last frame. For this one, after you click the Tween icon, change the "Tween with next frame" setting to "Tween with first frame". Then I previewed it in a browser window by clicking the Internet Explorer icon in the toolbox. Once I was satisfied that nothing more needed to be done, I went to the File menu and chose Save Optimized As, and named the animation. That was all there was to it!