Weekly freebies in your inbox.
Freebies By Design Shock
Read More
Read More
Read More
Read More
Friends
Weekly freebies in your inbox
Cinemagraphs: Worthy animated GIF’s
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).
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).
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.
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.
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
People just like you
Enjoyable Food and drinks
Models attitude
Tv and movies
The Secret life of things – Things that happen when you’re not watching
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
Author: Juan Pablo Sarmiento Founder and curator of:
iconshock
themeshock
boxofbundles
wpthemegenerator
webdesignshock
June 29th
Wow, this is amazing :)
I’ve never seen this kind of stuff before.
Good job.
June 29th
Pretty cool aren’t they?…
June 30th
WOUAOUWWWWW amazing !!! Thank you !
June 30th
You’re welcome, please let us know what other things would you like to see here…
July 8th
Wow! Thanks for these cool animations. Now I can make my own! Thanks again…
July 11th
I like your job it’s interesting. thanks for sharing.
July 13th
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 :).
July 13th
Hey, we’re glad you liked them Tom!, this is definitely an interesting that should be less overlooked because is really great!…
July 18th
Wow…!!! amazing….!!!!
good work awesome pictures.
July 18th
Thanks buddy, glad you liked them…
July 19th
Awesome.. great pictures. can i republish?
July 19th
Sure mate, just keep posted a back-link pointing to our original article :)…
July 21st
coooooool!
nice and thanks for sharing! \m/
July 21st
Thanks Ehatsumi, this is definitely a wonderful technique!…
August 3rd
nice work….keep it up
August 18th
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.
August 22nd
No Limits!! Cool :)
September 6th
Nice!!!
another kind of cinemagraph : http://maudrabau.com/cinemagraph.html
September 7th
Woww..this is one of the best site I ever seen…two thumbs for you..Perfect, just perfect!
January 25th
Thanks for sharing this great information, I enjoyed reading this information.
January 30th
Thank you for the recognition to our work. Best regards.
January 30th
nice but some of these definitely are gif’s and not cinemagraphs.
March 7th
I read this article completely on the topic of the difference
of most up-to-date and preceding technologies, it’s remarkable article.
March 12th
Thanks to the recognition to our investigation on Worthy animated GIF’s. Don’t forget to follow us on Facebook and Twitter
January 25th
I like this informative article. Thank you very much for providing this kind of information.
January 30th
You’re welcome, always glad to see that our pieces are of great use to visitors’ projects. Best regards
Best 150 Cinemagraphs http://t.co/oZs0Tsh
Cinemagraphs: Worthy animated GIF’s http://t.co/xpGy9R2 via @designshock
Best 150 Cinemagraphs: http://bit.ly/n9BiFf
Cinemagraphs: Amazing animated GIF’s http://t.co/VU2ZtcW via @designshock
Best 150 Cinemagraphs http://t.co/lOCCd26 via @gaksdesigns
#Animated GIF’s http://t.co/WAUAfCLb
Just discovered #cinematograf pictures. Nice art. More about it here:
http://t.co/iNjbE412
@LeftyDesigner Og flere fede her: http://t.co/smhOyWtM
http://t.co/y1LO09A8 Let them all load!
Loving these #Cinemagraphs! Think I need to make some fancy one’s myself.. #longlivetheGIF. http://t.co/Ab1xBY7r @webdesignshock #digitalart
Cinemagraphs: Worthy animated GIF’s http://t.co/kVrvvYJc #design #useful
Los 50 mejores cinemagraphs http://t.co/q1YwM2Zy vía @webdesignshock