图像的动态内容更改

时间:2012-05-23 04:17:03

标签: image dreamweaver photoshop ui-design

我正在开展一个网站项目,并且根据需要不擅长设计。 我需要创建一个图像,因为它是在 http://www.proptiger.com/images/banners/Top-–-generic-ad-for-Sai-Proviso-County-251x81.gif

现在这是一个 .gif 图像,它有一个可更改的文本。首先我认为这些是两个图像或FLASH的东西,但它们不是。而且,没有用于更改内容的代码或者文字。对Photoshop或其他设计工具不太熟悉。他们需要在这里或者可以通过其他方式完成吗?

1 个答案:

答案 0 :(得分:3)

.gif文件在设计方面有一些优势,首先是网页设计,它可以节省透明度,其次,它可以节省帧(很像flash视频)


这个图像只是通过创建一个静态图像(背景),并在photoshop中放置两个文本图层来创建。一个说公寓在Dombivali,另一个说1/2 BHK Apts起始(奇怪的标志)21.22 Lac。

然后通过按相应图层前面的小眼睛隐藏其中一个文本图层。然后打开Photoshop动画窗口(Window-> Animation)。并从那里制作你的动画。


现在以下内容可能不正确,因为我已经有一段时间了,因为我在Photoshop中创建了一个动画。但是对于CS4或更早版本,您需要创建单独的帧,并隐藏,并在这些帧上显示不同的层。但在CS5中,您的时间轴看起来与您在After Effects中找到的时间轴相似。每个图层都将显示在时间轴中,您在此处执行的操作是所有图层都可见(在这种情况下为背景,文本1和文本2)然后按下两个文本图层旁边的小箭头以打开时间线控制。


如果您只想显示文字,请按不透明度前面的秒表。现在会出现一个小黄钻。这是你的关键帧。从那里你转到另一个框架,然后再次按秒表,创建另一个关键帧,并更改特定图层上的不透明度级别。这样,Photoshop将为您创建介于两者之间的帧。


动画制作图像后,转到文件 - >保存为Web&设备。选择右上角的Gif,然后按“保存”。在保存选项中,您也可以选择保存HTML。

希望这有帮助。