Learn what a static GIF is and how you should use it

Looking for something new for your website? Learn how to add a static GIF to your website.

Get started growing your business with a B12 website.

No credit card required
Learn what a static GIF is and how you should use it

Resources

Transcript: I want to show you how to make an animated gif inside of Photoshop CC 2015 okay now I've already created one earlier and so I'm just going to play this and hit the play button in the timeline panel here if you can't see your timeline panel you may just need to just click on that to open it up and then I'll hit the play button and we'll see this young woman spinning okay it's actually constructed from eight still images now they were captured using a tripod and I'll just stop this and we'll close the file and I'll show you how I've made this file from scratch so we'll just close this one and now we'll come down to file and instead of coming to open we're going to come down to scripts and we're going to come across to load files into stack now we have my eight still images that I prepared okay they're going to be screen resolution images we're not going to be creating animated gifs from 24 megapixel files here so you are gonna need to gonna crop these still... See more →

Transcript: I'm gonna teach you five ways to make awesome animated gifs gifs gifs however you like to say it in procreate procreate recently added a feature that allows you to export your layers as an animated gif this opens up the entire base of procreate artists to the wonderful world of animation I cannot get enough of making these animations in procreate and I think you're going to love what you can create as well you can use animation to give your work that little extra something something or to express something in ways a static image simply cannot this tutorial will show you five easy methods to start making your own animations today if you're new to procreate I'd recommend watching my intro to procreate tutorial to learn all the basics let's get started here's how animation works in procreate each visible layer or layer group of your artwork becomes a frame in your animation the first frame in the animation is the bottom most layer and progresses upwards procreate takes the frames and compiles them into a special file format called a gif or Jif that loops these frames indefinitely for example... See more →

Transcript: Today we're going to take a look at this kind of cool little hand-drawn animation style effect I think you'll really like it let's just jump into the tutorial and check it out and learn how to do a thing or two in Photoshop alright well as I said a little bit of a sketch effect here this sort of animated sketch effect in Photoshop you saw an example of it a moment ago and for me it all begins with a stock photo you can do this with any object you like but a water buffalo a bull come on pretty cool I'm gonna grab my rectangular marquee tool and just loop a selection around the bottom bull here I don't need the guy over black and I'm gonna say hey image crop to just cut away everything else and then select deselect to get rid of my selection and then I'm gonna go ahead and just make this a little bit smaller it looks like it's pretty small but we are only at 25% if you can see that down there so... See more →

Transcript: I wanted to come in with a quick tutorial on showing you how you can create a gif file for your email or for your website without having to go through the app giphy and this is specifically if you want to create a gif file using text not using your images or your video so here we go i'm going to use powerpoint and the way then i'm going to use power point is i have isolated here a slide that i created some animation on and in order to create animation on any slide that you have in PowerPoint you just click on the animations tab and then you make sure that you have your animation pane open which is open over here and then for each set of texts that you have on the screen you can give it an action you can animate that so i can say i want this because right now this text has no animation so i can say i want it to appear or maybe i might want it to wipe in and i can... See more →

Transcript: Today we're going to show you how you can create an animated gif for your emails this is how it's going to look when we're finished using gifs in your emails will significantly increase your click-through rates and general engagement for all your email marketing campaigns first let's start by searching banner snack on Google then create an account or just log in if you already have one click on create new then select your size this time we'll use a custom size 600 by 280 if you want you can change the height of your image to any size but for this width in particular we recommend you stick with 600 pixels so your jiff will fit any screen size for this jiff you'll use a blue background then add images from your own library or choose from one of our stock photos next we're going to add some SVG files this way we'll be able to change the color at any point after the illustrations are in place we can start animating them let's place the paper plane where its animation will end open up the timeline select your layer then on the left side we'll set... See more →

Key quotes:

  • "If you’re a skilled animator, Photoshop is probably not the tool you use for your work"
  • "We’re using Photoshop because it is one of the most commonly used design applications and relatively easy to use for those who are just starting to explore more complex design projects, like creating animated GIFs"
  • "It’s not like the computer magically does it for you"
  • "Simple icons work best, but I also like to look for small details that already convey a sense of motion"
  • "👩🏽‍🎨 PRO TIP: Simple, bold icons work best for animation"
  • "The sweet spot for .GIF files is 2–6 seconds, where the icon repeats or reverses the animation in a loop"
  • "Now is the time to refer to your research notes and see if there are any file set up considerations for where you plan to use the animation"
  • "I like to use the Film & Video tab to create the animation template file"
  • "I’ve found four different methods to create the vector layers needed for animating"
  • "👩🏽‍🎨 PRO TIP: Thoughtfully group and name layers to save you time in the animating process"
  • "Creating a timeline lets you assign property changes to the different layers based on time (think of video or audio editing software)."
    Read more →

Key quotes:

  • "If you’re interested in incorporating GIFs into your marketing toolkit but don’t have any experience with Photoshop, I’ll show you how to use five free tools to create original GIFs"
  • "Need help creating graphics that will convert visitors into customers? GIF Maker allows you to create animated GIFs from video files, YouTube links, existing GIFs, and even still photos"
  • "What I Like About GIPHY’s GIF Maker What I Don’t Like About GIPHY’s GIF Maker As a free tool, it’s simple to use and has the exact feature I’m looking for"
  • "What I Like About GIF.com What I Don’t Like About GIF.com Overall, while I did enjoy GIF.com’s Instant Effects and sticker options, I wouldn’t recommend becoming a paid subscriber for features you can find for free on GIPHY’s GIF Maker and other online tools"
  • "Ever use a tool like ClipConverter to turn a YouTube video into an .mp3 file? It doesn’t have themed stickers, fun filters, or customizable fonts for captions, but it will help you create a high-quality GIF in no time"
  • "As a marketer, my favorite GIF creator of all time is LICECap, a free animated screen capture tool."
    Read more →

Key quotes:

  • "In this post, Justinmind will explain how to design animated GIFs, including a little history, and a few tips and tricks for making the most of them in your design process"
  • "Consider using GIFs in your marketing and design efforts because they can: What makes a good animated GIF? Here are some popular tools to get you started on your GIF making journey: Clean interface and intuitive to use, Gifs lets you create Gifs out of pre-made content from your favorite websites"
  • "You can make a video using RecordIt above or ScreenFlow, another screen grabbing app, which has animation tools that you can take advantage of"
  • "You need to make your own GIF, using the software of your choice (hint: use the tools above) and create a static GIF of the first frame which will be displayed until an Event is triggered"
  • "You’ll want to use a Set Value event, select your image then set the image path to use your animated GIF"
  • "GIFs are a great way to show personality, convey a message or simply to have a little bit of fun online"
  • "Start making your own today with the tools listed above and become a GIF whizz in no time."
    Read more →

Key quotes:

  • "The packages that are required to build animated plots in R are: While those above two are the essential packages, We have also used the entire tidyverse, janitor and scales in this project for Data Manipulation, Cleaning and Formatting"
  • "An Animated Plot building process involves two primary sections: The final step after these two primary steps is to render the animation in the desired file format, like GIF or MP4 (Video)"
  • "Now that our data is ready to plotted, We’ll build all the required static plots"
  • "As you might have seen in the animation at the top of this post, We’re going to see how the Top 10 Countries based on GDP has changed over the years in the given dataset"
  • "The renderer used in the animate() differs based on the type of output file required"
  • "For GIF File Format: For Video (MP4) File Format: The GIF output of this project: Thus, We’ve successfully built the Animated Bar Plot to visualize how the Top Countries have moved over a few years period, based on its GDP value."
    Read more →

Key quotes:

  • "So, you’ve spent countless hours crafting animation in After Effects, Principle or any other software, it looks amazing and everything seems to be alright… The only step left is making a GIF file"
  • "Did you know that Photoshop allows you to work with video layers, render video files and export to the GIF format? So, if you’re GIF is long, and it’s critical to keep the frame rate high to retain smoothness, you’re screwed"
  • "Upload your file, tell the converter what you need, and it’s done"
  • "So, if you have a 15+ seconds animation with smooth transitions and rich colors, forget about EZGIF"
  • "Create a color palette file After running the script, you’ll get something like this: 6"
  • "If it’s more than 10 MB, you need to decrease the fps and repeat steps 5 and 6 to get the perfect result"
  • "Maybe you’re asking what do we need that color palette file for? Briefly, GIF supports 256 colors, and if the converter selects the wrong palette, the result will look weird"
  • "You can easily notice small dots in the following example: As you can see, making GIFs is not difficult, but there are certain things you don’t want to learn the hard way and waste hours of your time."
    Read more →

What customers & experts say

Jia Junaid
Jia Junaid Founder and Attorney

“I love that B12 prompts me to update certain features and add integrations like online scheduling to increase efficiency in my law firm. ”

Brian Bohley
Brian Bohley Founder and Accountant

“B12 was easily able to include several integrations, such as Calendly and Drift, that facilitate communication with my clients. The experience was seamless, unlike my previous website design experience.”

Ron Matten
Ron Matten Founder and Attorney

“I feel like they are part of my team”

Leroy Maxwell, Jr.
Leroy Maxwell, Jr. Founder and Attorney

“I would recommend B12 to any company that wants a team to manage and grow their website while they focus on growing the business. ”

Jill Burgess
Jill Burgess Mortgage lender

“ B12 provides the best ROI for a small business owner.”

Brett Packard
Brett Packard Operations

“We finally have a website we’re proud of”

The best way to grow your business online

B12 is an all-in-one platform for business owners. Manage every facet of your company online, including your website, SEO, online scheduling, email marketing, blog posts, invoices, and more.

Get a website in minutes
This website uses cookies to ensure you get the best browsing experience.  Learn more
I agree