Using Gifs to Enhance Your Website Game
You don't have to be able to pronounce it to make it!
No matter how you say it, a GIF can be a total game changer when it comes to your website. As technology advances, so does design. Not always at the same rate (Virtual Reality may not be something that you NEED to have in your business) but it is important to keep informed and make adjustments as the market changes and as new technology is made available.
GIFs have been around forever it seems. From images on MySpace to hilarious memes on Tumblr, GIFs have a proven track record of being able to tell stories or portray motifs in a fun and engaging way for viewers. The G.I.F. was invented by Steve Wilhite in the 80s and stands for graphics interchange format.
Basically, it is a file of images that act almost as an animated slideshow in the finished form. You can control how quickly the images display and whether or not the finished product repeats infinitely (like a boomerang) or just a few times.
I've used gifs scattered throughout my website to enhance how visitors experience my designs. If something has movement in its physical form, I like to showcase that! For example, I made some gold foil invitations last year for my niece's first birthday party. The gold foil in a static form doesn't do the invite justice! So I created a GIF to display the shiny glittering effect of the foil.
When used sparingly, GIFs can set your website apart from others. If used too much, they can be a distraction and actually deter users from your site (think 90's MySpace backgrounds that flash).
You don't have to know how to code to make a GIF and you don't even need a fancy program like Photoshop to make one! I'll show you how! GIFs are great to show short steps in a blog post or tutorial post so I am assuming for this tutorial that you want to create multiple GIFs to show a process.
Record your GIF
The first step would be to make a video (it can be on your phone!) of your steps. The great thing about the app that I'm going to show you is it lets you clip a part of a video and make it into a GIF in seconds!
This free app is an incredibly useful resource. Not only can you create GIFs from videos on your phone, but you can also take a GIF and make it into a short video file if you need to.
Once you open the GIFVid app, click the create button and then select "Video to Gif". Choose the video from your photo library and then use the trimming option at the top to select your first step to display of your process. If you plan to use this gif in a blog post, I recommend at least exporting the GIF to the medium resolution though max is best for display purposes.
Saving the GIF
After choosing your resolution, the next screen is about compressing the file. The maximum option is selected by default and will produce a larger file with more frames per second.The slider controls how many frames will be in your GIF. The fewer frames, the smaller the file and the choppier the resulting GIF. If you want to create a cool "stop-motion movie" effect, lower the number of frames. If you want the transitions to be smooth like a video, use the maximum option! Once you've decided on how many frames you want, click the next arrow at the top and then the "more" ellipses icon at the bottom to save the GIF to your phone or dropbox or other file management system.
Continue this process until you have all of the steps you need for your blog post.
Add it to your post
No matter what blogging service you use, there should be an option to upload images. In squarespace, it's the image block. For Wordpress, you can upload straight from the add media button within a post. The GIF will automatically loop forever which is preferred in most cases.
You have now made a GIF and know how to use it in your site! If you found this tutorial helpful, let me know! I would also love to see some posts with GIFs made from this tutorial so drop a link in the comments section if you post one!
Would you all be interested in a longer post/ video tutorial on making more advanced GIFs in Photoshop? Let me know in the comments!