0

I would like to create a loading icon that show the app is loading the page. I would like to use our logo and animate inside the logo a vertical translting fill like here:

https://m.vente-privee.com/w2/assets/images/vp/GIF_WP_120@3x.gif

I'm more a front end html/css/js developper and don't even know how to create GIFs. What are the tools and steps to create such an effect on our logo ? I would also like to optimize the weidht of this gif so that like on the above website, the gif < 15kb.

  • 2
    Here's a pretty good tutorial for doing something like this in AE. youtu.be/JgwTO0-qDJ4 I'm mentioning this because I immediately thought of it when I saw the example. Also, if you want it to be as simple as the example gif, then maybe you could do that with code? Here's one example of that - there are also other ways you could do this. – Joonas Mar 30 '16 at 11:55
  • amazing, i don't know any adobe photoshop/aftereffect and coand thought it could only be done with much learning. Never thoguht it could be done in pure code. thanks a lot – Mathieu Mar 30 '16 at 12:15
  • in your jsfiddle I don't see on the left sidebar any external resource. but I guess I'm right : you're using jquery ? .animate for example – Mathieu Mar 30 '16 at 12:19
  • Yes, I'm using jquery to animate it. jsfiddle moved all that sort of information to the corner menu of each section. So if you click the "Javascript" text, you can see that jquery was used. You could also use CSS 3. for example. – Joonas Mar 30 '16 at 12:22
  • 1
2

You can do this in photoshop pretty easily using layer styles, plenty of tutorials around so I won't go into too much detail here, but what you need to do is create your logo as a vector shape layer and have a transparent background layer below it.

You can then use gradient overlay in the layer styles panel (double click the layer) to apply your colour.

The idea is that the first frame of your animation is your grey logo, and the final frame shows your full gradient overlay.

to save it as a .GIF , just go to

file>save for web> and choose .GIF in the options, you can also set it to loop here too if you wish.

Go ahead and do this tutorial to further understand the techniques required:

http://webdesign.tutsplus.com/articles/create-your-own-animated-pre-loader-in-photoshop--webdesign-8542

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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