As a webmaster with over 15 years of experience, I can tell you that cinemagraphs are one of the most captivating visual content formats you can use.
These “living photos” blend stationary images with motion to create hypnotic animations that instantly grab attention.
In this comprehensive guide, we’ll dive deep into everything you need to know to create stunning cinemagraphs and seamlessly add them to your WordPress website.
Contents
A Mesmerizing Web Design Trend
Cinemagraphs have become a popular web design element in recent years.
According to research by Animoto, cinemagraphs can increase engagement by up to 800% compared to static images.
This powerful visual medium also boosts conversion rates and improves communication through compelling storytelling.
But what exactly are cinemagraphs and how are they made? Let’s find out…
What is a Cinemagraph?
A cinemagraph is an animated GIF that combines a still photograph with minor motion.
In a cinemagraph, only a small area of the image moves such as:
- A person or object in motion
- Water ripples
- Clouds rolling
- Tree branches swaying
- Curtains fluttering
The rest of the image remains completely frozen.
This isolation of movement is what creates the signature cinemagraph effect.
Here’s a beautiful example with swaying foliage:
[Cinemagraph of leaves blowing]The leaves rustle gently but the bench and sky stay still, creating an eye-catching loop.
Cinemagraphs seem magical, but they are quite easy to make as we’ll see next…
How to Create a Cinemagraph (Step-by-Step)
With some basic photo and video editing skills, anyone can create stunning cinemagraph animations.
Here’s a step-by-step walkthrough of the cinemagraph creation process:
Step 1. Record a Short Video Clip
First, record a video clip ideally 3-5 seconds long.
Make sure the camera is stable and there is some movement in the scene (swaying plants, flowing water, moving crowds etc).
Using a tripod prevents camera shake so your footage stays smooth and steady. Proper lighting is also key for best results.
Step 2. Import the Video into Photoshop
Next, open the video file in Photoshop. Go to File > Import > Video Frames to Layers.
Select the video clip and hit OK. Photoshop will import the video as separate layers.
[Screenshot of video import in Photoshop]Having each frame as an individual layer allows you to edit the animation.
Step 3. Add Layers into a Group
Click on the topmost layer, then shift-select the remaining layers.
Right click and choose Convert to Smart Object. Name the group something like “Animation”.
[Screenshot of grouping layers in Phtotoshop]This keeps the animation frames together in one place for easy editing.
Step 4. Add a Layer Mask to the Group
With the group selected, click Layer > Layer Mask > Reveal All. This adds a blank layer mask.
Press CTRL+I to invert the mask. This will hide all the animation frames.
[Screenshot of adding layer mask in Photoshop]We’ll use this mask to selectively reveal the motion.
Step 5. Brush to Reveal the Animated Area
Choose a large, soft brush with 0% hardness. Set foreground color to white.
Gently brush over the layer mask to reveal the area you want animated.
Use small strokes to avoid sharp edges. Work slowly for natural results.
[Screenshot of brushing layer mask in Photoshop]With some practice, you’ll be able to masterfully reveal moments suspended in time.
Step 6. Duplicate and Reverse Frames
Open the Timeline panel and select all frames. Duplicate them.
Then reverse the new frames. This creates a perfect loop for continuous animation.
[Screenshot of duplicating frames in Timeline]Step 7. Export as GIF
Finally, export your cinemagraph. Go to File > Export > Save for Web and pick GIF format.
Optimize the animation delay and number of colors until you have a smooth, perfectly looping cinemagraph under 1MB in size.
[Screenshot of GIF export settings]That’s it! With these seven steps you can create mesmerizing cinemagraphs from video clips.
Next let’s see how to easily add cinemagraphs to WordPress websites.
How to Add Cinemagraphs in WordPress
Once you’ve created cinemagraph GIFs using Photoshop, adding them to WordPress is simple:
Step 1. Upload the Cinemagraph
Edit the page or post where you want to add the cinemagraph. Click Add Media and upload the animation file.
[Screenshot of media uploader in WordPress]Step 2. Insert into Your Content
Click the cinemagraph thumbnail and select Insert into post to add it to the page or post content.
Step 3. Position and Resize (Optional)
Use the alignment and size options to position the cinemagraph and set the width as needed.
Step 4. Publish
Update or publish the page/post to save your changes.
That’s all there is to it! Now the mesmerizing cinemagraph will display as an animated GIF on your website.
Here are a few pro tips for using cinemagraphs in your content:
- Place them at natural break points in your text to capture attention
- Give them room to shine with ample white space
- Use large sizes for maximum impact on desktop
- Optimize file size for fast loading on mobile
- Add captions and alt text for accessibility
- Link to a landing page for an interactive experience
Cinemagraphs can work visual magic and boost engagement when used purposefully in your content.
Let’s look at some stunning examples from top creators.
Beautiful Cinemagraph Inspiration
Here are just some of the captivating cinemagraph animations created by talented artists across the web:
Waves Crashing on Rocky Shore
This cinemagraph perfectly captures the power and serenity of the ocean:
[Cinemagraph of waves crashing on rocks]While the waves churn violently, the rock formations stay frozen in a dramatic moment.
Snow Falling at Night
This peaceful winter scene transports the viewer into a magical snow globe:
[Cinemagraph of snow falling at night]Snowflakes drift down softly but the street and buildings remain stationary.
Candle Flame Flickering
The flickering candle flame creates a warm intimate ambiance:
[Cinemagraph of a flickering candle]Social Media Notification Popping Up
This clever cinemagraph mimics the familiar phone notification animation:
[Cinemagraph of a social media notification]It catches the eye instantly and hints at interactivity.
There are endless possibilities for cinemagraph animations. With some creativity and Photoshop skills, you can make truly eye-catching visuals.
Next let’s look at some handy tools and resources for creating cinemagraphs.
Helpful Tools and Resources
Here are some useful apps, assets, guides and communities to help you make captivating cinemagraph animations:
Apps
- Flixel ($9.99/month) – Easy desktop app to make cinemagraphs
- Plotograph (iOS) – Mobile app for cinemagraph creation
- Cinemagraph Pro (iOS) – Feature-rich mobile cinemagraph maker
| App | Platform | Price | Rating |
|---|---|---|---|
| Flixel | Desktop | $9.99/month | 4.2 ⭐ |
| Plotograph | iOS | Free | 4.6 ⭐ |
| Cinemagraph Pro | iOS | $4.99 | 4.7 ⭐ |
Photoshop Actions
- Cinemagraph Master Toolkit – Handy actions for faster workflow
Stock Photos and Videos
- Giphy – GIF stock library including cinemagraphs
- Videvo – Free HD stock videos to make cinemagraphs
- Pond5 – Paid marketplace for cinemagraph clips
Inspiration and Examples
- Skylum’s Cinemagraphs – Stunning high-quality cinemagraphs
- Reddit Cinemagraphs – User submissions of creative cinemagraphs
- TrendHunter – Cutting-edge cinemagraph designs and examples
With these resources, you have all the tools needed to start making spellbinding cinemagraph animations.
Let your creativity run wild and produce eye-catching living photos that captivate audiences wherever they’re seen.
I hope this comprehensive expert guide helped you learn how to make and add cinemagraphs in WordPress. If you have any questions, feel free to reach out in the comments!
