您现在的位置: 破洛洛 >> 建站学院 >> 平面设计 >> ImageReady >> 正文

IR动画教程:手机网站banner动画的实现

作者:佚名 来源:思缘 更新时间:2008-1-6
分享到

 192466

Start by creating a new file of the banner size. Create ellipse using elliptical shape tool.

新建一个banner大小的文件。使用椭圆工具创建一个椭圆。

image 1

Create a rounded rectangle using rounded rectangle shape tool.

使用圆角矩形工具创建一个圆角矩形。

image 2

Create another rounded rectangle using rounded rectangle shape tool. Place as shown.

再创建一个圆角矩形,如下进行放置。

image 3

Create some horizontal lines using line tool.

使用线形工具画出几条横线。

image 4

Press Ctrl+Alt+G to create a clipping mask.

按下Ctrl+Alt+G创建一个剪切蒙板。

image 5

Create an ellipse using elliptical shape tool.

使用椭圆工具再创建一个椭圆。

image 6

Double click the layer to open layer style window. Apply layer style with the settings shown.

双击层打开层样式设置窗口。如下进行设置:

image 7

image 8

Reduce the fill value to 0%.

将填充减少到0%

image 9

image 10

Duplicate the layer. Press Ctrl+T. Right click the layer and scale down. Reduce the opacity to 50%.

复制层。点击Ctrl+T.右键点击层,将画面缩小,透明度设置为50%。

image 11

Insert a cutout of a mobile phone.

中间放上一个小手机~

image 12

Type the text in different layers.

键入文字,记得将每个字母放在不同的层上。

image 13

image 14

Select the text layer. Click add vector mask button from the layer window.

选择文字层,点击层窗口的添加矢量蒙版~

image 15

Create a rectangular selection using rectangular marquee tool. Fill it with black color to hide the text behind the mask. Similarly create mask for the second text layer. Also create some musical notes using custom shape tool.

使用矩形选择工具创建一个选区如下,使用黑色填充将后面的文字隐藏, 再使用自定义图形创建几个小音符。

image 16

Open animation window. For the first frame let the both text layers be hidden behind their masks. Reduce the opacity of radial waves to 50%.

打开动画窗口。第一帧将两个文字的图层都隐藏在蒙版后面,将手机信号线的透明度减少到50%。

image 17

Duplicate frame. Unlink the mask and content thumbnail for the text layer. Move the mask to the right side so that the text is completely visible.

复制帧,取消蒙板链接,将蒙版向右移动使得文字全部显示出来。

image 18

Press tween button from the animation window. Apply settings as shown.

按下动画面板上的渐变按钮,进行如下设置:

image 19

image 20

Select 2nd and 6th frame. Change the opacity of inner most radial wave layer to 100%.

选择第二和第六帧,将最里层的手机信号线透明度更改为100%

image 21

Select 3rd and 7th frame. Change the opacity of middle radial wave layer to 100%.

选择第三和第七帧,将中间层的手机信号线透明度更改为100%

image 22

Select 4th and 8th frame. Change the opacity of inner most radial wave layer to 100%.

选择第四和第八帧,将最外层的手机信号线透明度更改为100%

image 23

Select 5th frame. Change the opacity of all radial wave layers to 50%.

选择第五帧,将所有信号线的透明度都设置为50%

image 24

Repeat the above mentioned steps for the next text layer. Also animate the opacity of radial waves as mentioned above.

对另外一部分文本也进行上面的操做~别忘了调整信号线的透明度~

image 25

Press Ctrl+Alt+Shift+S to save an optimized animated GIF.

最后按下Ctrl+Alt+Shift+S将文件保存为gif格式。

Mobile Ringtone Animated Banner Tutorial: Final Result

这里说的只是一种效果的实现,教会大家的也只是一种技术的实现手段,大家可以根据自己的创意实现不同的效果~:)有什么困难的话可以来论坛提问讨论哦~

本文由本站litty翻译,转载请注明出处www.iphotoshop.com.cn,谢谢合作!

转自Webdesign.org


3_200708081801541
3_200708081801541

3_200708081801541
3_200708081801541

3_200708081801541
3_200708081801541



3_200708081801541
3_200708081801541

3_200708081801541
3_200708081801541

3_200708081801541
3_200708081801541

3_200708081801541
3_200708081801541

3_200708081801541
3_200708081801541

3_200708081801541
3_200708081801541

3_200708081801541
3_200708081801541

3_200708081801541
3_200708081801541

3_200708081801541
3_200708081801541


转载请注明:破洛洛(谢谢合作)
网友评论: