Is a moving image more intriguing to the eye than a still?
Hi. This is text? Still reading this or looking at the pretty, moving picture?<div style="width:100%;height:0;padding-bottom:150%;position:relative;"><iframe src="https://giphy.com/embed/x6CwpMmC755g4" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div><p><a href="https://giphy.com/gifs/book-x6CwpMmC755g4">via GIPHY</a></p>
See the book cover to the left? Look at it closely. See how it’s moving.
Is that cool or what?
In the highly competitive world of book sales, what if that cover got you just another few seconds of a potential reader’s attention? Maybe just got them to read the book description? What if it was the difference between then passing your book by or becoming a long-term, true fan?
I’m not kidding when I say:
I want little moving bubble-thingies on my book cover!
It’s crazy but … I’m serious.
I’m waiting for the girl to blink. She won’t (I’ve watched), but I’m waiting. Patiently.
Wait, is that cover alive or are my eyes playing tricks on me?
Are those just fancy GIF images? Or some kind of movie? Or HTML5? Granted, I don’t even know what HTML5 is, but I thought I’d just throw it in there.
In fact, part of me doesn’t care what the technology is, I just want it.
See below for more examples and right here for some (not very easy) tutorials on how to create them.
Frankly, this post is more a question “Uh, yeah, so how in the world do I do these?” more than a “This is easy and here’s how!” Stay tuned for my progress on my own covers.
More on cinemagraphs:
- 9 reasons you should use GIFs in your newsletter from MailerLite
- GIPHY So many options for your GIF images you won’t know what to do without them. Or not.
- graphitii The World’s Easiest, Fastest, And Frighteningly Effective Cinemagraph Maker. I’d really like this one to be legit, but I’m going to wait until they’re a little more established.
- How to make an ANIMATED book cover that blows people’s minds Derek Murphy walks through several options to make this easier than you might think.
- Cinemagraphs: How to Create Animated Photographs in Adobe Photoshop
- Ready to make the world’s most beautiful cinemagraphs?
<div style="width:100%;height:0;padding-bottom:150%;position:relative;"><iframe src="https://giphy.com/embed/53YaYR8IfO824" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div><p><a href="https://giphy.com/gifs/epic-collection-ya-53YaYR8IfO824">via GIPHY</a></p>
This is what I got from the Flexel app.
Simple example of highlighting a single area of a video.
Way cool cinemagraph book covers I found at GIPHY.
I think there’s something to say about subtlety here!
<div style="width:100%;height:0;padding-bottom:151%;position:relative;"><iframe src="https://giphy.com/embed/9IO1iFO86aIpO" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div><p><a href="https://giphy.com/gifs/epic-collection-ya-9IO1iFO86aIpO">via GIPHY</a></p>
<div style="width:100%;height:0;padding-bottom:151%;position:relative;"><iframe src="https://giphy.com/embed/gwCG68GkTF1o4" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div><p><a href="https://giphy.com/gifs/epic-collection-ya-gwCG68GkTF1o4">via GIPHY</a></p>
<div style="width:100%;height:0;padding-bottom:140%;position:relative;"><iframe src="https://giphy.com/embed/ClBC1io6ZTdio" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div><p><a href="https://giphy.com/gifs/art-city-lost-ClBC1io6ZTdio">via GIPHY</a></p>
<div style="width:100%;height:0;padding-bottom:161%;position:relative;"><iframe src="https://giphy.com/embed/NLBTBXBaXS61G" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div><p><a href="https://giphy.com/gifs/book-covers-NLBTBXBaXS61G">via GIPHY</a></p>
<div style="width:100%;height:0;padding-bottom:161%;position:relative;"><iframe src="https://giphy.com/embed/tfVlqlk4wofLy" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div><p><a href="https://giphy.com/gifs/epic-collection-ya-tfVlqlk4wofLy">via GIPHY</a></p>
<div style="width:100%;height:0;padding-bottom:155%;position:relative;"><iframe src="https://giphy.com/embed/woeHmkqrOLxjq" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div><p><a href="https://giphy.com/gifs/epic-collection-ya-woeHmkqrOLxjq">via GIPHY</a></p>
<div style="width:100%;height:0;padding-bottom:135%;position:relative;"><iframe src="https://giphy.com/embed/ASM7DFF7QSf5u" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div><p><a href="https://giphy.com/gifs/green-john-ASM7DFF7QSf5u">via GIPHY</a></p>
<div style="width:100%;height:0;padding-bottom:150%;position:relative;"><iframe src="https://giphy.com/embed/oxpyCkCdM01FK" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div><p><a href="https://giphy.com/gifs/clonespiracy-oxpyCkCdM01FK">via GIPHY</a></p>
