Dynamic content change for images

Question

I am working on a web site project and not good at design as much as needed. I have a requirement of creating an image as it is on
http://www.proptiger.com/images/banners/Top-–-generic-ad-for-Sai-Proviso-County-251x81.gif

Now this is a .gif image and it has a changeable text.At first I thought those are two images or FLASH stuff,but they aren't.Also,no code for changing the content or text.Not much familiar with photoshop or other design tools.Are they needed here or can this be done byother means?

Answer 1

A .gif file has some advantadges when it comes to design, first of all for web design, it can save transparency, and second of all, it can save frames (much like flash video's)

---

This image is simply created by creating one static image (the background), and putting two text layers on them in photoshop. One saying Apartments in Dombivali, and the other saying 1/2 BHK Apts Starting (weird sign) 21.22 Lac.

Then you hide one of the text layers by pressing the little eye, in front of the corresponding layer. you then open up the Photoshop animation window (Window->Animation). and from there make your animation.

---

Now the following might be incorrect because it has been a while since i created an animation in Photoshop. But for CS4 or older, you need to create separate frames, and hide, and show the different layers on those frames. But in CS5, you have a timeline that looks like the one you would find in After Effects. Every layer will be shown in the timeline, what you do from here is have all layers visible (background, text 1, and text 2 in this case) then you press the little arrow, next to the two text layers, to open up the timeline controls.

---

If you only want the text to appear, you press the stopwatch in front of Opacity. now a small yellow diamond will appear. This is your key-frame. from there you go to another frame, and press the stopwatch again, creating another key-frame, and change the level of Opacity on the specific layer. This way, Photoshop will create the frames that come in between for you.

---

After animating your image go to File->Save for Web & Devices. Select Gif in the top right corner, and press save. At the save options, you can choose to save the HTML as well.

Hope this helps.