How to Master the Art of Visual Web Design

Tutorial: How to Make a Weird and Wonderful GIF in Photoshop

How to Make a GIF in Photoshop

As you may know, GIFs are taking the world by storm, and this tutorial, “How to Make a GIF in Photoshop,” is going to teach you exactly how to stay hip with these crazy internet trends. I’m going to walk you through 7 basic steps and by the end you will have your very own GIF that you can show off to your friends, family, coworkers and random strangers on the internet.

Step 1: Obtain a video
Easy enough. You’ll ideally want to use a .mov or a .mp4. GIFs are meant to be weird and wonderful. Make sure your source material is worth watching.
I’m going to choose a video from the best conference for graphic designersCleveland graphic design firm Go Media‘s very own Weapons of Mass Creation Fest! Wait and see, it’s a good one. Also, want to use a youtube video? No problem! ClipConverter is completely safe and free, and will convert any youtube video (you just need the URL link) to any format!

Step 2:
 Open Photoshop and import video
Once you have your video, open up Photoshop and import your video by clicking:  File > Import > Video Frames To Layers
A window will then pop up with options. Set up your document as the image below displays. You will also have to select a portion of the video that you want to create a GIF out of.

IMPORTANT: GIFs aren’t movies, this should be a relatively short snip of the video that you want.

Step2_a

Step 3: Set up your document
Now that you have a portion of your video imported, your document will probably look similar to this.

Step3_a

If you don’t have your animation window open (which is shown at the bottom of my image) you’ll want to do that. You can open it up by going to Window > Animation.

Secondly, you will want to adjust your image size to 500px in width. Why? Because GIFs are meant to load quickly, and they can’t do that if they are a huge file size! Making your GIF 500 pixels will help it load quickly and run smoothly! Plus, sites like Tumblr require that your GIFs be under a certain size, so this step is essential.

Step 4: 
Edit your frames
Now that you have your document set up, and your video imported, you can start working with your frames (which will be located in your animation window). First hit play and see what you’re currently working with. Then identify the frames you want to keep, and delete all of the surrounding ones. After this step, I ended up with 14 frames which you can see below.

Step4_a

IMPORTANT: Again, remember, you want to keep your GIF short and sweet. Aim to have around 10-20 frames. Impossible? No worries! If you still have 20+ frames after cutting out the part you want of your video, select all of the even numbered frames and delete them. This will make your GIF slightly choppier and faster, but we can fix that later when you edit your frame rate!

Step 5: Create an infinite loop (Optional)
This step is completely optional, however, it’s a fun effect to add to your GIF. If you play your GIF right now, you’ll notice that there is a clear beginning and end. However, you have the ability to work with the frames and create a GIF that reverses backwards and creates an infinite loop. These kind of effects are the fun, inventive things that no other GIF program allows.

So how do you do it? Simple. Copy all of your frames, except the first and last, then paste them back into your Animation window and drag them to the far right. Then click your options panel (shown in image below) and hit “Reverse Frames.”

Step7_a

Step 6: Change your frame rates
A frame rate is the total time each frame will show! Photoshop will automatically make all your frames .03 seconds, however, this tends to be fairly fast. Your frame rate will always be a personal preference and will also depend on your particular GIF, however, I usually try to stick around .08 to .1 seconds.

You can change your frame rate by looking at your animation window, and clicking the small arrow that is displayed in each frame. Make sure you highlight ALL of your frames though before changing your frame rate.

Step8_a Step8_b

In Step 4, if you ended up deleting all of your even numbered frames, you’re GIF will automatically be faster than originally, so you’ll probably have to make your frame rate around .1 to .2 seconds.

IMPORTANT: Don’t 100% trust the speed of your GIF in Photoshop. You won’t be able to truly tell how fast it is until after you export it (which will be shown in the next step)

Step 7: Export!
Now that your GIF is beautifully and personally constructed, you’re ready to create an actual file of it!
To do this click:  File > Save for Web & Devices, and then follow the image below for what to fill in.

Step11_ab

IMPORTANT: Like I stressed above, it’s important that your GIF file size is small. As displayed, my GIF is 1005K. You’ll definitely want to make sure your GIF is under 2 MB. If not, many sites may not be able to load your GIF.

If your GIF is over 2 MB, you’ll want to either cut out more frames, or you can adjust the colors, dither and lossy in this panel. Any of these will decrease the quality of your GIF, but if done in small amounts, it can sometimes be barely noticed.

And here is my final product!
1

CONGRATS!
You have created your very first GIF. Time to celebrate.

(Remember to watch the footage from the best design conference in the entire world, Weapons of Mass Creation Fest! Check out the full WMC Fest video here and buy tickets to Weapons of Mass Creation fest – coming up this summer at downtown Cleveland’s Allen Theatre.)

9

Flash Tutorial: An Introduction to Animation for Newbies

Introduction to Flash Animation

Now, I only know a handful of the multiple software programs that Adobe has to offer, but, in my opinion, Flash is one of the more difficult to learn. Jumping into a project with Flash takes a lot of time and effort, so I want to go over the absolute basics with you. After all, it was quite difficult for me to find anything that helped me in my introduction with Flash. So for our first project, we’re going to make some rectangles move.

So, first things first. We have to open Flash.

Step 1

The type of file that I typically open is an ActionScript 3.0, which is the most recent version of ActionScript. It’s the best for what you want to do for a lot of technical reasons we don’t need to go over right now. But just know that Flash files that use ActionScript 3 cannot include earlier versions of ActionScript.

Step 2

Okay, so we’ve opened our program and now we are at the workspace. The big white space in the middle here is called the stage. If you want something to be seen, make sure that it is within the white space, otherwise, it is unseen offstage.

You will note that my workspace has all of my tools situated on the right hand of the screen. Flash mostly uses the same kind of tools that are used in most of the Adobe suite.

One important thing to note: when you are making shapes with a stroke, the stroke tends to act as a separate component from the shape you originally drew it with, so I tend to make shapes without a stroke.

The main aspect of Flash is that it contains a Timeline that is typically affixed to the bottom of your screen workspace. The timeline is where you keep track of your layers and animation. The timeline is divided into separate frames that can be selected and keyframes inserted.

A Keyframe is a frame where content appears on the Timeline. Typically, Flash’s default setting for speed is 24 frames per second, so it takes 24 frames of animation to create a second of active content.

Empty Keyframe

This is an example of a blank keyframe, which would be 6 frames long if played in Flash Professional. Notice the empty circle at frame 1 indicating there isn’t any content.

Keyframe w action

This is an example of a blank keyframe, but has actions attached to it. Notice the a above the keyframe. Actions are the coding in Flash (we won’t get into coding in this post).

Keyframe w content

Pictured above is an example of a keyframe with content. Notice the filled in circle on the first keyframe.

Content w Tween

This is what a tween looks like when applied to a keyframe with content, more specifically, this is a shape tween. Tween comes from the words “in between.” A tween helps to create movement in your animation.

There are 3 different types of tweens. There are classic tweens (creating a tween that can change size, position, and skew of almost anything), motion tweens (applied to symbols and text fields), and shape tweens (drawing a vector shape on one keyframe and then drawing another shape in a second keyframe).

Frame Animation

This is an example of what the timeline looks like when you are using keyframe animation. Each frame is a keyframe, so instead of using tweens, you are creating each motion within each frame.

So now that we understand the timeline, keyframes, and tweens, let’s draw some shapes.

Step 3

What I did here is pick my color with the color picker (no stroke!) and use the rectangle tool to draw a shape on Layer 1 in frame 1.

Step 3a

Before we get much further, I want to make sure that you know that there are two defaulted tabbed spaces that can be very helpful to you. Libraries are going to be used later in this post, but Properties is also very useful to you.

Properties will tell you what kind of content you have selected, can let you name instances (not shown), and you can change your positioning, size, color, and all kinds of other useful tools that are necessary to the creation process in Flash.

Step 4

Continuing on, since I want this shape to move, I’m going to insert a keyframe at frame 45, which will make this animation less than 2 seconds long. To insert the keyframe, I simply right click so this menu will pop up.

Step 5

With the keyframe at frame 45 highlighted, I take my shape and move it into the position I would like my shape to end up at the end of the animation.

Step 6

Now that we have our shape in the positions we want, we’re going to click anywhere between the two keyframes and create a classic tween. Now, the shape will move within the 45 frames.

Step 7

Now, let’s make a copy the same shape to move in a different direction as the original shape. So to do that, we’re going to use the library panel.

The library stores shapes, animations, sounds, and even photos where they can easily be clicked and dragged out onto the stage.

To make our current shape an aspect of the library, we must convert it to a symbol.

Step 8

In this new menu, we are going to make this a movie symbol, and name this object “Purple Rectangle” and then click on Okay.

Step 9

The symbol now appears under the library tab as Purple Rectangle. We are going to add a new layer and then drag our new symbol out.

Step 10

Next, we’re going to position out our second shape where we would like it to initially appear when the animation begins.

Step 11

After we have our initial position, we’re going to insert a keyframe on layer 2 under frame 45 and move the shape to where we would like the shape to end when the animation is complete.

Step 12

Now that we have our two positions, we are again going to create a classic tween so that our shape moves.

Step 13

Now let’s preview our hard work by going under the Control Panel, to Test Movie, to In Flash Professional.

Step 14

Congrats! You’ve made your first Flash movie! Brought to you by the patron saints of responsive web design Ohio, Go Media.