Creating Animated GIF Layouts in Photoshop & Elements
Welcome to December everyone!!! I am super excited to kick off this month on the Scrapaneers Blog because we have a very special surprise in store for you. There are so many amazing digital artists out there who have supported Scrapaneers over the last three years, that we wanted to spend December giving something back to all of you.
Every Monday, Wednesday and Friday in December, we will highlight designers in the digital community and give away mini-kits that they have designed – all of which coordinate into a massive Mega-Collection that we lovingly call The Magic of Beginnings. In addition to the kit downloads, the Peers will demonstrate a variety of techniques throughout the month to help you grow your digital artistry and memory-keeping skills.
Ready to take a look at The Magic of Beginnings and learn how to make an animated GIF layout in Photoshop? Then come on in and join me . . .
I love taking my digital art to the next level, so learning how to create animated GIF layouts was a no-brainer for me! Haven’t seen an animated digital layout? Then take a look at this one (with a sneak peek at The Magic of Beginnings Collection):
Ahhhhh, isn’t the collection gorgeous? You are only seeing one small part of it too, just wait until you see the rest of it roll out throughout December! You will be able to download Danyale’s (Etc. by Danyale) mini-kit and the Lighted Marquee Alpha today. New mini-kit downloads will be unveiled every Monday, Wednesday and Friday this month – so be sure to check back often. 🙂
I seriously adore this technique and you can make it as simple (or as complicated) as you want. The layout above was created with just two layers in the GIF. But you can also create one with more a more intricate lighting pattern like this:
I created this GIF with six total frames (one will all low lights, plus one high light frame for each letter). This particular pattern would work great with an arrow element (imagine the high light starting at the back end of the arrow and moving toward the tip).
Animated GIF Layout Tutorial
So let’s get to it! Here are the steps for building your own animated GIF layout . . .
Step 1 – Build Your Layouts
You need to start by building the layouts that will be used as the frames in your GIF animation. The first layout above is composed of two (2) frames/layouts. The only difference between the two layouts is that one has a low light effect on the Focus marquee letters, and the other has a high light effect on the letters. (You will get both the high light and the low light versions of the Alpha I used on my layout in today’s downloads.)
The trickiest part of this step is to make sure that your blinking letters line up exactly. Otherwise, it won’t just be a lighting effect, but the letters will shift also. I lined up my letters by using the Auto-Align function under the Edit menu in Photoshop. You can also try to align the two layers on your own by nudging them with the arrow keys, or using the alignment functions on the upper panel when the Move Tool is selected. For these particular letters, the auto-align function worked the best.
Once you have everything in place, save your document in a web-sized format (the same size you would post in a digital gallery or on social media). I saved mine at 72 dpi/800×800 pixels.
Step 2 – Build the Animated GIF File
Now that you have your layouts saved, create a new file the same size as your web-sized layouts (in my case it was 72 dpi/800×800 pixels). You can either add in the layouts by dragging and dropping them into the new file (and then deleting the background layer), or you can use the stack function which is located under File>Scripts>Load Files into Stack. This function does not create a blank background layer.
Step 3 – Set Timeline
Now that you have all your layers added, open the Timeline Panel by going to Window and clicking “Timeline.” The Timeline Panel should appear at the bottom of the Photoshop work space.
Click on Create Animation Frame in the center drop down panel. You should now see a thumbnail of the top layer in the Timeline Panel. Locate the drop down menu to the far right side of the Timeline Panel and choose Make Frames from Layers. Now you should see thumbnails for all the layers in your file.
Step 4 – Create Animation
Now we’ve reached the fun part! At this point, you need to set the speed and duration of your animation. Set the duration by clicking on the duration drop down menu (the default setting is “once”). If you want the animation to play continuously, choose “Forever,” or you can choose a specific number of repetitions.
You can set the speed by clicking on the arrow at the bottom of each thumbnail in the Timeline Panel and choosing a time frame. After experimenting a little, I chose 1 second for each frame. I wanted it to be a slower, more deliberate flashing an 1 second seemed to work the best. You can test the speed of the animation by pressing the play key, or by hitting the space bar to stop and start it.
Step 5 – Save in GIF Format
Once you have settled on the speed and duration, save your file as a GIF. In Photoshop CC+, you can do this by going to File>Export>Save for Web (Legacy) and choosing GIF in the top drop down menu.
And that is it!! How fun was it to create an animated digital layout? GIFs are supported on most of the social media sites now, and in several of the digital scrapbooking galleries, so it should be easy to share with all of your friends and family online.
All of the instructions are written out above, but for those of you who like see things in action, I created a short video that walks you through the animation process.
Directions for Photoshop Elements
And for those of you who want to achieve the same effect in Photoshop Elements, here are the steps:
Step 1: Load web-sized layouts into a single document with no background layer.
Step 2: Go to File>Save for Web
Step 3: Once the Save for Web window opens, set the file type to GIF, click the animate button, set the looping options and frame delay (similar to Step 4 for Photoshop). You can preview the animation by either clicking on the Preview Button (which will open the layout in a web browser) or click on the Play button within the Animation Frame.
Step 4: When you are happy with the animation, save the layout as a GIF file.
There are sooooo many possibilities for this technique. Think about blinking lights on a Christmas tree, or sequential blinking on an arrow element, or even with the headlights or brake lights on a car. Be sure to share your animated GIF layout ideas with us – we would love to see them. 🙂
The Magic of Beginnings Giveaway
Drum roll, please!!!! And now for the grand reveal of the Scrapaneers December Giveaway – The Magic of Beginnings.
On behalf of everyone at Scrapaneers, I want to thank all the amazing designers who contributed to this Mega Collection. The Magic of Beginnings is perfect for your holiday and December sequential projects, but it is about so much more than that. Think about plans and goals for the new year, starting a new stage of life, new relationships or simply the start of exciting new adventures. This collection is so big we could not fit it all into one preview, so here is glimpse at the collection in two parts (we couldn’t fit everything in the preview so know there’s MORE!):
Magic of Beginnings download links are no longer available.
Don’t forget to check back on Monday, December 5 for the next set of downloads, and an awesome black and white photo technique from Kim.
Until next time ~