Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

Could someone provide a fine crafted footage of how to animate only part of the image? Let's say we have a image 1366x500 showing some device mockup and we only want to animate the screen of that device which would be smth around 80x30px. The image will go then for a website background. Would be even better to add a hyperlink with that animated screen. Any thoughts?

share|improve this question

3 Answers 3

If i get you right and the big picture wont animate and get "replaced" on the little screen: it is possible with responsive webdesign.

choosing-a-responsive-image-solution

and just replace the big image with ur animated gif via media queries on the small screen

share|improve this answer

Well, the idea of an Animated GIF is that the entire image is replaced with another, like a flipbook. So this isn't possible with that format.

Sounds like what you are trying to achieve is to animate a UI screen on a device, in which you would need to use a program like After Effects to animate your screen, then place it over a photo of your device. After that you export to GIF or Flash or whatever.

Check out the UI presentation templates from a company like Creative Dash. They offer templates for popular devices, and most are compatible with After Effects.

share|improve this answer

you have a variety of options: already mentioned, and probably your best bet is to use media queries for showing certain screens certain things.
css3 offers up multiple background images, which you could tailor with media queries.

if you are using an actual img / element in your markup, don't forget that you can apply background images to it via css. i've seen a cool demo before where a background .jpg was used on an animated .gif....although i don't think this works exactly for your solution. but awesome to know nonetheless. it was something like this:

  
<img src="animated-pix.gif" class="pix-bg" alt="whatever" />  

.pix-bg{  
padding:100px 200px 7px 30px; /** these are random. use padding **/  
background:url("animated-pix-ng.jpg") 0 0 no-repeat;  
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.