Iphone icon set: Get more than 15000 icons FREE!

You accept to be included in our newsletter (We only send amazing freebies like this, no ads or crap, promise! )

Tweet about us and say thanks in comments ;)

Amazing freebies every week in your e-mail, don't miss the next ones with our newsletter, Sign up now.

Tweet about us and say thanks in comments ;)

Cinemagraphs: Worthy animated GIF’s

Comments and suggestions in here

Cinemagraphs, those animated photographs that you can find almost every blogging or image showcase site, they make you laugh or they surprise you, for me those are like a movie inside a photograph or a photo that wanted to be a movie. A image that has a slight movement or, suddenly claims a breath of life. Interesting, uh? wanna learn how to make your own living picture? Just click on “More” and let the magic begin.

Have you ever felt that, although one image says more than a thousand words, sometimes not even one steady image is enough to express what you want to? Well, stop nodding and feeling sad, Cinemagraphs were created by Jamie Beck, the NY Photographer and Kevin Burg, web Designer. They came up with this great idea on the last Fashion Week, probably because they felt the same way over a year ago and took the animated gifs to another level, they say creating one of this takes from 3 to 4 hours up to an entire day editing. First of all, GIF and animated GIF aren’t the exact same thing, after all, their names are differents. GIF stands for “Graphics Interchange Format – Picture Format” see? is a picture format, not animation format. But with several GIF images in secuence, you can resemble an animation, that’s how animated Gifs are created, after all, movies are 24 frames per second. But, since we’re always looking for new things, those GIF animations evolved to… Cinemagraphs. What’s a Cinemagraph?, you may ask, well nothing but the hot fuzz online for the past year. Is the middle point between photographies and movies. I’m not a big Harry Potter fan, I haven’t read all the books or can’t wait for the next movie to be on screen, however, in one of those movies, i saw an effect that totally wished could be true: the photographies in the newspaper, or the image on Harry’s buttons could move, like, a movie inside a picture, that was mind blowing for me.

So now, you can learn how to create your own beautiful and artistic -or maybe funnies and meme- cinemagraphs. With a little knowledge of photoshop (really little) and following the next steps.

The Ingredients

Here’s the list of thing you must have before even start thinking in your own cinemagraph:

  • The idea
  • The model and/or location
  • Camera
  • Tripod
  • Photoshop
  • Good will, patience, time and probably some coffee or energizing drinks.

First of all, you need to have a clear idea of what your cinemagraph is going to show. It’s important to consider that the best ones, the most impressive ones, are those that have a subtle change, so minimal, it’s even hard to say for sure, did that photo just wink me? try to choose the most steady element as posible. Trees are always moving, so it might be difficult to involve one in your first try, get something you can control.A model, or even your own hand will help you with this first try.

Once the decision has been taken you have to choose a photography composition that looks great as a still photo, then place your camera on a tripod and start recording. The tripod is for the camera to be really still, of course. Any kind of slight bump will distract the attention and break the dreamed image. Fernando Baez uses 1080p at 25fps, but you can work with whatever feels good for you, we recommend as high quality as you can.

Now you have something to work with. Open photoshop and open your video (File/Open) from it’s location. Adobe Photoshop can only open MOV and AVI video files, so keep that in mind while recording the video. From the animation palette, choose the frames you want to get the movement from. Once you’ve selected the ones you want simply render (File/Export/Render Video type a new file name and click on render).

01  Select frames

Go to File/Import/Video Frame to Layers, so the animation palette have the frame and the layers palette have all the frame in layers for you to mask and edit. Select the first frame and in the layer palette only the first layer would be visible. This is going to be the first image, so it has to be a still photograph in order to give a evolution to the final cinemagraph. Select the second frame and in the layer palette select both the first layer and the second layer. Mask the second layer to show the part you want to move. Make the same thing with all the frames, just remember that the layer that are visible are the ones that are going to appear in that specific frame. You can preview the animation ay anytime by pressing the space bar (For checking out how’s the animation going so far, just press the space bar).

02 Select and mask the layers

If you’re a Mac user and got lost in how to import video frames as layers, piece of cake, just open photoshop in 32-bit mode. How? right click on photoshop, click “Get info” and click in the box next to “Open in 32-bits mode” and that’s the way the cookie crumbles.

To make an smooth transition in the animation, the first frame must be the same as the last frame. Is easy to make this once you’ve finished all the masking and everything. Select all frames, copy them and paste them after the original frame. Now in the animation palette menu select Reverse Frame and you’re done. The best is to aim for a under 100 frames to start with. You can (and probably will) get rid of more frames as you’re making your cinemagraph.

03 Similar

Now, we’re entering the editing part. Select the time for each frame to show, 0.16 sec in each frame suggested, but this can be easily modified. Now we’re almost done. You can improve the quality and color of your images but keep in mind that .gif files we’re limited with 256 colors, so using a Duo-tone or crossprocessing is a good option to limit the color and take fully advantage of .gif files. One all this is done, is time to make the .gif file.

Saving this animation is simple. All you have to do is save as you always do (File/Save As…) and save as .gif. Don’t forget to make sure the animation loop is set forever.

04 Save as gif

Ta-Dah! Please try this, now you can see is quite simple. If you don’t have a tripod is no excuse, place the camera over a couple books or something. The idea is giving this a try. Not convinced yet? Check out this amazing examples from around the web.

Our overall top

Fashion to die for

5658559695_750b525e5e_o

5664791600_673da58b78_o

5665230598_d8db1f8572_o

5703979876_6c5d072a42_o

cinematography-gifs-6

cinematography-gifs-21

hair-sprayer-615

mano

pasarela

pelos

tiffanys

tumblr_lgjnh8JvOP1qzcq51o1_r1_500

tumblr_lgkiqqq9Qz1qzcq51o1_500

People just like you

6

5658550205_4859b95813_o

5727263344_7cbca6d91f_o

5787142290_34bf7e4df5_o

bday-615

Cinemagraph 5

Engagement-Composite-GIF-615

flexiones

lazo

nina

oldmen

tumblr_lgjkd4gKw41qzcq51o1_r1_500

tumblr_lh3ddeWcrs1qh9bl7o1_500

tumblr_liqb4gAuZ21qc66bjo1_500

tumblr_lj6u4h4gsC1qe0eclo1_r6_500

tumblr_ll41rghiPe1qc66bjo1_r4_500

tumblr_llxqets8em1qc66bjo1_500

tumblr_lm6zqzTxGT1qc66bjo1_500

tumblr_lm72wvd55X1qc66bjo1_500

tumblr_ln0bp88eba1qc66bjo1_500

tumblr_ln4cvdfPM11qkwry4o1_500

tumblr_ln5cuf2n191qkkks5

Enjoyable Food and drinks

5658557245_3db4af80b6_o

5739526869_e47d3616f3_o

Cinemagraph 13

vino

Models attitude

6MoUh

5658558393_a2b0d28560_o

bufanda

Cinemagraph 12

Cinemagraph

cinematography-gifs-20

coco-balcony-615

glamorai-615

glamour-615

hair-blowing-615

mechon

mujer

rocha1

rosa

tumblr_lgj5enVFFW1qzcq51o1_500

tumblr_lgl9hgNv5I1qzcq51o1_r2_500

tumblr_lh2ve9LTyC1qzcq51o1_r1_500

tumblr_lh8fun62ST1qzcq51o1_500

tumblr_lh8k8fZZBB1qzcq51o1_500

tumblr_lh8q7k6s4T1qzcq51o1_r1_500

tumblr_lkjgf7HnOX1qc66bjo1_500

tumblr_lkktemk6731qeyuguo1_500

Tv and movies

cinematography-gifs-8

cinematography-gifs-9

cinematography-gifs-10

cinematography-gifs-13

cinematography-gifs-14

cinematography-gifs-15

tumblr_lgb02mCfLm1qe0eclo1_r5_500

tumblr_lith9zxruU1qd5s9p

tumblr_ljsjl5Shw21qcoaceo1_r1_500

tumblr_lky5llDXkY1qe0eclo1_500

tumblr_ll7al7haD01qh9bl7o1_500

tumblr_llmnc3L2XJ1qbyfbso1_500

tumblr_lltf6p39Vh1qzahuvo1_500

tumblr_llzg124Mv01qz5yzjo1_500

tumblr_lm8zypssel1qbyfbso1_500

tumblr_lmytszW2iw1qbyfbso1_500

tumblr_lmyxoo3Pz61qfb90jo1_500

The Secret life of things – Things that happen when you’re not watching

7

5659126388_3f56c8807f_o

5707289086_301170cff9_o

5707697408_6f4c437282_o

Cinemagraph 8

Cinemagraph 9

patada

tumblr_lgzrsbJiZM1qzcq51o1_500

tumblr_lh75rqvoPK1qzcq51o1_500

tumblr_life35G6C51qc66bjo1_500

tumblr_lk103kSsdc1qc66bjo1_500

tumblr_lm7068tis61qc66bjo1_500

tumblr_lmn1bdGoan1qc66bjo1_r1_500

tumblr_lmn2gbAHPZ1qc66bjo1_r1_500

tumblr_lmvgvmcWHO1qipkb4o1_500

tumblr_ln0cijura11qc66bjo1_500

tumblr_ln05lqvX0J1qc66bjo1_500

tumblr_ln7h97OtaN1qkkks5

viento

Amazing, uh? well, this is the end for this week list. I hope you enjoyed it and… why haven’t you started trying out with this


38 Responses to “Cinemagraphs: Worthy animated GIF’s”

  1. Wow, this is amazing :)
    I’ve never seen this kind of stuff before.
    Good job.

    • WebDesignShock
      June 29th

      Pretty cool aren’t they?…

  2. Vivyrelax
    June 30th

    WOUAOUWWWWW amazing !!! Thank you !

    • WebDesignShock
      June 30th

      You’re welcome, please let us know what other things would you like to see here…

  3. Wow! Thanks for these cool animations. Now I can make my own! Thanks again…

  4. usa webmaster
    July 11th

    I like your job it’s interesting. thanks for sharing.

  5. Awesome! I’ve never been a fan of animated gifs as they’re usually quite badly done, but these are stunning. Especially the filmmaker in me appreciates some of the cinematography in these images :).

    • WebDesignShock
      July 13th

      Hey, we’re glad you liked them Tom!, this is definitely an interesting that should be less overlooked because is really great!…

  6. Wow…!!! amazing….!!!!
    good work awesome pictures.

  7. Awesome.. great pictures. can i republish?

  8. coooooool!
    nice and thanks for sharing! \m/

  9. nice work….keep it up

  10. My spouse and i genuinely appreciated looking at your post! You have good quality materials. I might help you to create blogs even more usually. In this way, possessing this kind of a worthwhile site I think you will probably achieve greater rankings in the search engines.

  11. No Limits!! Cool :)

  12. Nice!!!
    another kind of cinemagraph : http://maudrabau.com/cinemagraph.html

  13. Woww..this is one of the best site I ever seen…two thumbs for you..Perfect, just perfect!

  14. Thanks for sharing this great information, I enjoyed reading this information.

  15. nice but some of these definitely are gif’s and not cinemagraphs.

  16. I read this article completely on the topic of the difference
    of most up-to-date and preceding technologies, it’s remarkable article.

  17. bard catheters
    January 25th

    I like this informative article. Thank you very much for providing this kind of information.

  18. You’re welcome, always glad to see that our pieces are of great use to visitors’ projects. Best regards

  19. Cinemagraphs: Worthy animated GIF’s http://t.co/xpGy9R2 via @designshock

  20. Cinemagraphs: Amazing animated GIF’s http://t.co/VU2ZtcW via @designshock

  21. Best 150 Cinemagraphs http://t.co/lOCCd26 via @gaksdesigns

  22. Just discovered #cinematograf pictures. Nice art. More about it here:
    http://t.co/iNjbE412

  23. Loving these #Cinemagraphs! Think I need to make some fancy one’s myself.. #longlivetheGIF. http://t.co/Ab1xBY7r @webdesignshock #digitalart

  24. Cinemagraphs: Worthy animated GIF’s http://t.co/kVrvvYJc #design #useful

  25. Los 50 mejores cinemagraphs http://t.co/q1YwM2Zy vía @webdesignshock

Leave a Reply

Comments

*