Overview

Many people use dynamic and animated elements for branding, to increase traffic appeal, and add uniqueness to their websites. Often this is done using CSS and other development languages, but there are plenty of ways to use animated images. In this tutorial, you will learn how to use animations in web design, get an introduction to making 24-frame looping animations in clip studio, and gain a marketable skill!

 

Table of Contents:

1. Conceptualizing

2. Web Animation Tips

3. Sketching an Animation and Key Framing

4. Preparing Clip Studio

5. Finalizing

6. Using on a Website

7. Have Fun!

1. Conceptualizing

Before you even begin sketching, you should consider how your asset will be used, the brand (the overall style of who or what you are producing this for), and any other requirements you or your client may need.

How the animation will be used will affect how you design and animate:

Will you being using this for a loading screen, a live logo, a background, a small element on a page?These questions will help you decide if the animation should be subtle (we don't want an animated screaming head on a website if we want the audience to read something instead for example), exciting (drawing attention to a logo or a button can be very beneficial), or simply something to give a little more life to an otherwise boring page. Look over the "Tips" section for ideas on how to decide what to do based on the usage of your design. You should also research "website animations" to find a bunch of creative websites that use all kinds of animated assets for more ideas.

The branding of the website is also an important thing to consider:

If you are doing this project for a client, what kind of design do they already use? What style should your animation be for it to look good with the other elements of the website? What audience is this aimed at (anime fans, professionals, business associates, etc.) and what do you think they would enjoy or be offended by? Does the client have any specific requests? These are important discussions to have with your client.

If you are doing this for a personal project, you should consider the same things: who's your audience? How do you remain consistent? What do you want to say about your project?

Read about marketing or visual communication if you want to know more about these kinds of things.

For this tutorial, I am creating a portfolio website to exhibit my work. I want to create a title element that will show up on the first page. It should attract a lot of attention to capture the interest of the viewer. I also want it to point down the page to my name and help indicate someone to scroll down the page. Therefore, I want it to be a big, dramatic animation with some downward motion that also draws the eye towards the center where my name will be.

This will be the first thing the audience will see when they view my website so they will expect the rest of the site to have a similar style or feeling. My audience will likely be other artists (a sketch-like appearance could be beneficial), possible employers (it should be clean and polished enough to show my ability to produce something professional), and hopefully a bunch of fellow nerds (something fun and sciency would likely be enjoyed by this audience). Based on this information, I know I want to do something with a sketchy style, a lot of clean lines and shapes, and possibly some planets or moons in orbit. I also know that the website will have a dark color scheme to make my portfolio pieces pop, so this animation should have a bright and saturated scheme to draw attention with contrast.

There are so many possibilities!!! But by making constraints that I have to follow, I will ultimately improve my creativity and the final product.

2. Web Animation Tips

Now that you know how and what your animation should do from a practical and marketing perspective, use these tips to generate the best idea for your animation.

1. Animations are Attention Hogs: Animations will often be the only things moving on a webpage and will attract A LOT of attention. Use this to your advantage, but beware that it can take away attention from more important information.

2. Don't be Predictable: Humans are very good at recognizing patterns and an animation that repeats in a simple way can become boring very quickly. Add multiple objects to the animation that move differently in the animation, have a different duration, or even start at a different time to make a much more dynamic and attractive loop.

3. Avoid Stuttering Loops: A good way to start designing a looping animation is by having the first and the final frame be the same. However, if you keep it this way, it will look like the animation pauses for a moment once it restarts because the same frame will be played twice! The last frame should be a transitioning frame (this is discussed in part 3.) for a continuous loop. I like to plan my animations to have one more frame than the final product (25 instead of 24), so I can delete the last frame and avoid this issue.

4. Animated Elements Can Add LIFE: Never be afraid to take a subtle approach, small and simple loops can be a wonderful addition to a webpage and help bring boring information to life. The eye can see more than what is being focused on so a small motion on the side of a paragraph can draw attention away from it. However, if it is subtle, small, or slow enough, it can make the viewer feel like the webpage is actually alive as they will be able to sense the motion while focusing on the words on the page!

5. Direct the Eye with Actual Movement: One of the principles of art is the idea of movement—by using lines, rhythm, and multiple focal points, you can essentially control how the viewer will see the picture by directing their eyes (look up Gestalt design theory for more on this!). Digitally however, you can do the same thing with actual motion. People tend to automatically follow moving objects, so helping their eyes go where you want can be as simple as making something move in that direction.

6. But Don't Trap Them!!!: With looping animation, there is a risk of the viewer becoming trapped, so try to let them escape with movements that bring their eye to another focal point and then transition quickly away so that they are essentially dropped off.

7. Contrast: The contrast between moving and non moving elements can be an incredible tool (look at how it is used in film!). Use motion to highlight a static object, communicate an emotion, or, as mentioned earlier, add additional interest by having different objects move at different rates.

PHEW!!! There are probably a lot of other creative ways to make use of animations, if YOU have any thoughts, put them in the comments!!!

3. Sketching an Animation and Key Framing

Sketches are, of course, static, so it can be hard to work out how an animation will look before actually doing it. Below, I go over how I plan animations on paper (or on a flat layer in Clip Studio).

Animations are typically planned with "key frames"--these are the frames that show the most important phases of an object's motion. For a jump for example, it would be standing, in the middle of the jump, and standing again. Every frame in between two key frames is called a "transition frame"--these show how an object gets from one key frame to another and brings the animation to life. The sketch below shows how I plan different types of motion before actually animating an illustration and the following tips should help you understand (the writing in the picture was actually for my own notes so please don't feel like you are missing something if you can't read them).

These are some of the things I use to make sketches like the one above:

1. Come up with several sketches before planning and use this stage to focus on the composition and overall design like you would for a still illustration (see my sketches in part 1).

2. Separate individual objects and plan them separately to make complex animations easier to manage.

3. Draw each key frame for an object using the following suggestions:

I. For an object that only changes appearance, draw each key frame in order showing the biggest changes.

II. For an object that changes position and appearance, it is helpful to draw each key frame in the position the will be in relative to the other key frames. This allows you to keep track of both types of change.

III. For an object that only changes position, it can be helpful to draw a single key frame and indicate where the object will be in relation to a static object in the design (the center line of a circle for example).

4. Always make note of how you want the transition frames to shape the animation but don't draw each one (you'll be doing this later!).

5. Each transition frame is separated by the same amount of time, so the more you have between key frames, the slower that action will be (and vice versa). I personally use lines to keep track of how many frames I want and where or when I want them to be.

6. Make every object finish their loop in the same number of frames (25 in this case so we can cut off the repeated key frame). Number your key frames to keep track of this (key frame 1 will be frame 1, key frame 2, 3, and so on will be somewhere between frames 2 and 24, and then the final key frame which should be the same and key frame 1 will be at 25). This ensures that you don't accidently make one object take longer than the others and force you to remake the animation.

7. If you want an object to cycle through a motion multiple times but you can't divide the total number of frames easily (25 can't be divided by 2 or 3 for example), then you can plan for the object to have two similar cycles. For example, I planned for the planet to go through one cycle that was 12 frames long and then another one that was nearly identical that was 13 frames long.

8. Make a timeline like the one below. Draw a line for the entire animation and the draw a line next to it showing the relative length, the starting point, and the position of each key frame for every separate object in your animation. This can help you compare the speeds of the objects (closer key frames means a faster action typically), check that all cycles add up, and make adjustments to add more interest.

9. Use symbols to keep track of things that are hard to describe or draw (for example, I use an arrow pointing both ways to remember when I want an animation to repeat in the reverse direction).

10. When trying to make an object look 3D, block the sketches in with basic forms (cubes are especially helpful!!!).

4. Clip Studio Animation!

There are many tutorials on how to optimize your workspace in Clip Studio, so I will simply go over the basic things you need and how to start. Please keep in mind that I am using Clip Studio EX, so there might be some differences on Pro. However, I will stick to using only 24 frames.

Guess what? You've already done a lot of the work on paper!!! Create a new illustration. I am making this for a website so, for now, 1920*1400 pixels at 72ppi is a good starting point. Don’t make this an animation just yet!

Make a sketch of the overall design or import a picture of your sketch on paper.

Now, create the illustration like you normally would, but use layers to separate objects.

Depending on your animation, you can use vector layers to streamline the animation process like the video below! Think about this and other methods you may use while illustrating and layering your design, this will help you a lot.

Once you have finished, place all the layers (except for the sketch) into a folder. If there are layers that stay still and are beneath all the others, you can leave these out of the folder (same with layers that are still and above all others).

Finally, it’s time to animate! Open the timeline window and look for a button that says add new timeline And set it for 24 frames. You can choose your own frame rate, but 15fps is a good start given the low number of frames in the animation. Go to the animation menu at the top and select add animation folder. Place your layer folder into the new animation folder. Now, create 23 duplicates of the layer folder (I set up ctrl+alt+d as a shortcut for this action). You can go through and rename them to numbers to make things easier.

Go back up to the animation menu and select edit track, batch specify cels. Make sure the first layer folder in the animation folder is selected and select the "specify name of existing animation cel" in the batch specify dialogue, it should list the first and the last folders’ names. This will set each folder as a frame in your animation.

Using this method, you are able to make small changes without redrawing it every time, separate your objects to make complex animation more manageable, and avoid the mess of layering an illustration over and over. This method is also useful when using vector layers as you can change lines quickly and easily by going through each frame and adjusting control points. Now you can go through and make the key frames for each object exactly where you want them to be and then start making the transition frames as you planned on your timelines.

Alternatively, you can separate each object (each layer) into different animation folders and create duplicates of each layer--this can be beneficial in multiple ways.

ONWARDS!!!

5. Finalizing

Finally you can test it all out! Play the timeline to see your work come to life!

If there is anything that looks off, make sure you try to understand why it is acting weird and then go back and fix the transition frames that are causing the issue.

Once you have finished fixing the issues, you can go through and polish any parts that look messy or incomplete.

Personally, I realized that two of the planets are accidentally in front of the rays on the sides of the star, I need to redo the animation for my name, and there are some messy lines in there!

NOTE: You can not make an animation smoother simply by adding more frames and increasing the frame rate. It is much more important to make well designed transition frames using the principles of animation like squash and stretch, arcing, delay, and others than to add more transition frames.

6. Using it on a Website

Export your animation as a gif, this is the most used format and most website creators such as Adobe Portfolio, Squarespace, etc. should already support looping animations so you (or a client) should be able to simply pop it into place. Otherwise, I'm afraid I can't help (yet) but there should be plenty of web development tutorials on this subject and others.

7. Have Fun!

If you want to know more about the processes and methods I use, let me know and I can make more detailed tutorials! All questions are welcome!

Woohoo! We did it!