当前位置: 首页 > 网络学院 > 设计教程 > 设计理念 > 图形简介:第四部分

设计理念
什么是XHTML?
启发设计灵感
网站设计的新视角
从最优化角度来设计你的网站
脱离Google生存
logo的类型
Flash的弊端
避免使用JavaScript动态导航条的7大理由
正确使用“留白”属性
商务图形设计
如何使用“哇元素”
提高网站的可访问性
让你步入专家领域
“一页站点”的概念
高级网页设计原则
接近你的客户
创建网站的黄金法则
3条帮助你成功创建“会员制营销”的方法
重新改造你的主页
避免图形文件过量

设计理念 中的 图形简介:第四部分


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-03-01   浏览: 1889 ::
收藏到网摘: n/a

动态GIF

An animated GIF consists of several frames, each of which is an individual GIF file. The individual frames can be created in any graphic application that supports the GIF format. A special animation utility can then take the individual frames and save them as an animated GIF.

一个动态的GIF图片包含若干帧,每帧都是由一个单独的GIF文件构成。你可以在支持GIF格式的任意图形应用程序中创建单独的帧。一系列特定的动态效果可以由单独的帧拼凑完成,并且,可以将它们以动态的GIF图片保存。

To create an animated GIF begin by constructing individual frames using your favorite graphics program. Each frame should be the same size. The table below shows five individual GIF files and an animated GIF using those frames.

一开始,你可以使用你喜欢的图形程序通过架构单独的帧来创建一个动态的GIF。每一帧必须包含相同的尺寸。下面这张表格展示了5个单独的GIF文件,并且将其拼凑成一个动态的GIF文件。

单独

最终的动态GIF效果

帧 1 图:

帧 2 图:

帧 3 图:

帧 4 图:

帧 5 图:

animated gifs

Like image maps, there are shareware tools and professional Web graphics programs that can create animated GIFs. On the Macintosh, GIFBuilder is a freeware tool. GIFBuilder is not being maintained but is presently available. GIF Construction Set is a popular PC utility used to create animated GIFs. Steps for using both of these utilities appear below.

就像图像映射一样,也有很多用于创建动态GIF的共享工具和专业的网络图形程序。对于苹果机来说,GIFBuilder是一个免费的工具。GIFBuilder并未更新,但在当前仍然可以使用它。GIF Construction Set是当前最流行的动态GIF创建工具,它在PC机上使用。具体的使用方法将在下面作具体阐述。

A very popular professional Web graphics application used to create animations is ImageReady. ImageReady is included with Photoshop 5.5.

ImageReady
是一款当今非常流行地用于创建动态图片的专业网络图形应用程序,它集成在Photoshop5.5中。

Creating Animated GIFs with ImageReady 2.0
使用ImageReady 2.0 创建动态GIF

1.      ImageReady is available with Photoshop version 5.5. It allows you to create animations by using the Animation palette and the Layers palette. The Animation palette is used to define each frame and the Layers palette defines the image state associated with each frame.

ImageReady
集成在Photoshop5.5中。它可以使用动画控制面板和层控制面板来创建动画。动画控制面板用于定义每一帧,层控制面板用于定于每一帧所对应的具体图片。

2.      Choose File/Open and locate the multi-layered image you want to animate. In a multi-layered image, each layer will become an individual frame.

选择文件/打开,然后定位你希望制作动态效果的多层图像。在多层图像中,每一层都是一个独立的帧。

3.      In the Animation palette, choose Make Frames From Layers from the animation palette. Each layer will appear as a frame in the Animation palette.

在动画控制面板中,选择“从动画控制面板中指定来自于层的帧”。此时,每个层将作为动画控制面板中的一个帧出现。

4.      To set the time delay between each frame, position the pointer on the time beneath each frame in the Animation palette. Click to display the Frame Delay pop-up menu. Select one of the preset times, or choose Other and set the time desired. To set the time for all the frames at one time, choose Select All Frames from the Animation palette menu. Shift+click will select individual frames and Control+click (Windows) or Command+click (Macintosh) will select discontiguous multiple frames.

在每一帧之间设置时间延迟,在动画控制面板中的每一帧下方的时刻上指定指针。点击显示帧延迟弹出菜单,选择一个事先设定好的时间,或者选择其它你希望设定的时间。一次为所有帧设置时间,从动画控制面板菜单中选择所有的帧。“shift+鼠标单击”用于选择单个帧,“Ctrl+鼠标单击(Windows系统)”或“Command+鼠标单击(苹果系统)”将会选择不连续的多个帧。

5.      At the bottom of the Animation palette, choose Once from the Looping pop-up menu and then click the Play button to view the animation.

在动画控制面板的最下方,从循环弹出菜单中选择“一次”,此时,点击播放按钮开始观看动画。

6.      Frames can be reordered in the Animation palette by clicking on the frame you want to move and dragging it to the desired location.

位于动画控制面板内的帧可以被重新排序。你可以点击指定帧并将其移动到你所希望的位置。

7.      To save the animation, choose File/Save Optimized As. Give the animation a new filename with an extension of .gif and click Save.

选择文件/保存来储存动画;你也可以点击“另存为”来为动画起一个全新的文件名,并以.gif为扩展名,然后单击保存。

8.      The animated image is now ready to be included in the HTML document using the <IMG> tag.

那么现在,你就可以使用<IMG>标签将动态图像嵌套在HTML文档中。

Creating Animated GIFs with GIF Construction Set (Windows)
使用GIF Construction SetWindows系统)来创建动态的GIF

1.      GIF Construction Set is a shareware utility that you can download from mindworkshop.com.

GIF Construction Set
是共享软件,你可以从mindworkshop.com下载。

2.      Select Animation Wizard from the File menu of GIF Construction Set.

GIF Construction Set 的“文件”菜单中选择“动画向导

3.      Click Next to accept each of the defaults until you reach the file selection screen.

点击“下一步”来接受每个默认的程序直到出现文件选择窗口。

4.      Select the individual source GIF files that will comprise your animation. You can do this one at a time, or all at once by holding down the Control key and clicking on each file name in sequence. Click on Open when you're done.

选择你创建动画时所需要使用的GIF源文件,你可以一次性完成上述工作,或者按下“ctrl”键同时点击鼠标左键按顺序选定图形文件。全部完成后点击“打开”。

5.      When you have finished selecting file, click on the Cancel button in the Open dialog box. This will return you to Animation Wizard window. Click on Next.

当你完成了文件选择之后,点击对话框中的取消按钮,这将让你重新返回到动画向导窗口中。点击“下一步”。

6.      Click on Done. Animation Wizard will build your animation and open it in the main GIF Construction Set window.

点击“完成”。动画向导将会为你创建动画,并且会在主体GIF Construction Set窗口中打开它。

7.      You can preview your animation by clicking on View. Press the ESC key to stop the animation.

你可以通过点击“查看”来预览你的动画。按下“ESC”键停止播放动画。

8.      Save your animation to a new GIF file name by selecting Save As from the File menu.

通过选择“文件”菜单中的“另存为”将GIF动画文件以一个全新的名称保存。

9.      The animated image is now ready to be included in the HTML document using the <IMG> tag.

那么现在,你就可以使用<IMG>标签将动态图像嵌套在HTML文档中。

Creating Animated GIFs with GIFBuilder (Macintosh)
使用GIFBuilder(苹果系统)来创建动态的GIF

1.      Download GIFBuilder, and install it on your Macintosh.

下载GIFBuilder,将它安装在苹果操作系统中。

2.      Select File and New.

选择文件/新建

3.      Open the Frames and Preview windows.

打开帧和预览视窗。

4.      Drag the first image file to the Frames window.

将第一个图像文件拖进帧窗口。

5.      Drag the second image file to the Frames window.

将第二个图像文件拖进帧窗口。

6.      Continue until all the files needed for the animation are in the Frames window.

持续上面的操作,直到所有的文件被拖进帧窗口为止。

7.      Select Options Loop and indicate the number of times you want the animation to be performed or click Forever.

选择“循环选项”,指定动画需要播放的时间,或者选择永久播放。

8.      Select Options Interframe Delay and choose how fast you want the images to change.

选择“帧间延迟选项”,并指定图像改变的速度。

9.      From the Animation menu, select Animation, Start .

从“动画”菜单中选择“动画”、“开始”。

10.  To stop the animation, go back to the Command menu and choose Animation, Stop .

如果需要停止播放动画,可以返回“指令”菜单,并选择“动画”、“停止”。

11.  Save the animated file with a new name and an extension of .gif.

以全新的文件名保存动画文件,扩展名为“.gif”。

The animated image is now ready to be included in the HTML document using the <IMG> tag

那么现在,你就可以使用<IMG>标签将动态图像嵌套在HTML文档中。

评论 (0) All

登陆 | 还没注册?