Hybrid Design How-To

How to create an animated GIF file with Photoshop CS

In this lesson I will teach you how to create a very simple animated gif using Adobe Photoshop CS and Adobe ImageReady (comes with Photoshop). The image I am making will be pretty ugly, but its only purpose is for this lesson.

STEP 1: Ok, so here we go. The very first step is to create a new file within Adobe Photoshop CS, I created a standard vertical banner size of 120 pixels wide and 240 pixels heigh, and 72 dpi:

STEP 2: I gave the image an orange background, and then I created my first layer by using the text tool, and typing in the words "Frame 1". The key to making an animated GIF file is to make a new layer for every frame of your animation. For this lesson I am just using text, and by default Photoshop makes a new layer each time you make new text. If you wanted to use shapes or images, you would need to create a new layer for each frame. I am trying to keep this simple, just so you get the basic idea of how to make the animate GIF.

STEPS 3 & 4: I just repeated step 2, two more times, to make 3 frames. So Now I have the text "Frame 1", "Frame 2" and "Frame 3" each on their own layers. So I have 3 lines of text and 3 layers:

STEP 5: So, now that we have our layers and text made, we are ready to create the animation. To to this, we need to transfer our file over to ImageReady. First, let's save our file (ctrl-s) and name it "animate-gif". Then once you have saved your file, simply click the ImageReady Icon on the bottom of your tool bar and it will automatically transfer this file over to ImageReady for you.

STEP 6: Now that we are have the file opened in ImageReady, the first thing we want to do is make sure that the file will be saved as a GIF. So you go to Window and choose Optimize to open that tool window, and then choose GIF under the Format pulldown. For this lesson leave all the other settings alone.

STEP 7: We are now ready to start creating the animation. So, we have created a layer for each frame of your animation, so the first thing we want to do is turn off all the layers, except for our Frame 1 & the Background Layer (Background will stay on the entire time), since it is the first frame and we always want to see the orange background.

Then we need to go to our Animation window (if it's not open, go to Window: Animation, to open it) and set the time we want this first frame to be visible for. For this lesson I will choose 1 sec. You can change these to what you want, to see how they affect your file later on.

STEP 8: Next we need to create a duplicate frame in the Animation Window, but clicking on the New Frame Icon, and it will create another frame of animation for you, with the same settings as the one before, leave the setting at 1 sec.

STEP 9: Ok, now that you have the new frame, all you need to do is go to the Layers window, turn off the Frame 1 layer, and turn on the Frame 2 layer, and it will update your frame for you within the Animation window.

Repeat this process for Frame 3, click the new frame icon on the Animation window

Then turn off the Frame 2 Layer and turn on the Frame 3 Layer

You have now created all the frames for this Animated GIF file. Save your File (Ctrl-S), once you save your file, it will still be a Photoshop file, but if will also retain all the animation information so you can change it in ImageReady, for instance if you want to speed it up, etc. It is important to note that if you open the file in Photoshop and save it in Photoshop, all this information will be lost, so only edit it in ImageReady. If you want to see your GIF in action click the Play Button on the Animation Window and it will give you a rough view of what your GIF will look like.

STEP 10: You are now ready to create the animated GIF file. This is very simple, just go to File and choose Save Optimized:

A new window will open. Leave all the settings alone, and just pick the folder that you want to save your file and click save:

That's it!!! You have now created an animate GIF. Pretty ugly one, but you get the basic idea. If you want to take it to the next level, just know that any changes you make on a Frame will be in the animation, so you can turn on and off Layer Styles, change colors, add blurs, whatever you want, make a frame for it, and it will happen.

How to take snapshots of your screen

I get asked this all the time. Someone will call me up and ask me how to do something, are what settings I used, or say I am designing a website and a client shows me some sites that they like, I can take a snapshot of that site, so I can refer to it instead of always having look up the page on my browser.

There are two types of snapshots that you can do. First is taking a snapshot of everything on your screen. This means that everything you see, the way that you see it on your monitor at the time of the snapshot, will be in the image file. The second is a more controlled snapshot which allows you choose the area of your screen that you want to take a snapshot of.

The first snapshot is pretty straight forward, hold down the Cmd (apple) key and the shift key, then while continuing to hold them down hit the numeral 3 key, you should have a camera noise to let you know it took the snapshot. It will then create an image file on your desktop. The file should be a .pdf (Adobe Acrobat, similar to a JPEG) file or a .pct (PICT), depending on your version of OS you are using.

The second type, or the controlled type, of snapshot is just as simple but requires one more step. Here's how it works: Again hold down the Cmd Key and the Shift Key, but this time hit the numeral 4 key. Now, your mouse will turn into a cross cursor, you can move the cursor to the area you want to capture, once there, Click and Hold the mouse button, it's important that you hold it, and drag a now visible box around the area that you want to take the snapshot of. When you have the box over the area you want, you then let go of the mouse button, and again, a camera clicking noise should happen, and the same file will be on your desktop.

You can take as many snapshots as you want, your computer will not overwrite the prior one it will just create a second file called Picture01.pdf, Picture02.pdf, and so on.

If you are looking to take your snapshots to the next level, I highly suggest this software from Ambrosia Software, Inc. called Snapz Pro X.

Summary: Snapz Pro X is by far the most powerful, versatile, and easy to use screen capture solution for Mac OS X. Whether you're writing online manuals that require visual examples, or simply recording video of your flight simulator dogfighting skills, Snapz Pro X is the ultimate utility for capturing moving or still pictures on Mac OS X.

Welcome to my "blog"

Hi, I guess I should introduce myself, my name is James Sowers and I am a graphic design/web designer/videographer/photographer/mac user... I ALWAYS have people asking me questions on how to do tasks which are very simple, yet hard to explain without showing them. So I decided, hey, I will start a page about how to do things everytime someone asks me how.

So this is what this "blog" is all about, I will make instructions on simple things that will hopefully make your life easier. My instruction will include photos and videos explaining and showing how I do the steps I am trying to explain.

The titles to my posts will usually be the question that I am trying to answer within the post.

I will also be giving lots of helpful links, products, and other things that will help you.

PLEASE NOTE: I am 100% Macintosh User, so all of my "lessons", links, product suggestions, etc, will mostly be for Macintosh users. While most lessons are compatible with both PC and Mac, I will be describing steps in terms of doing them on a Mac computer.

If you find my "blog" useful, please feel free to make a donation by clicking the donation button, it will be much appreciated.