Monthly Archive for May, 2009

Making your Photoshop animations web-ready

Lloyd, you lazy rats ass! You didn’t teach us how to make our animations into GIFs for the web. Well yeah, sorry. I forgot. I’d been on granpa’s ol’ cough medicine. So here it is.

Got your animation? Good, because this tutorial is a bit useless without it.

Hit up the File menu, then go to Save for Web & Devices… or hit the stupidly complex  shortcut, Alt+Shift+Ctrl+S. To be honest, I could probably click faster than it’d take me to position my fingers in the right place.

image

A little (or large, depends on your media size) window will pop up giving you a few options.

image

You wont need a lot of the options in the side panel, if you’re sticking to simple. I’ll explain the more complex things in a later tutorial, where I’ll explore more in depth animation.

File type: pick your poison

image

Looping options and frame stepper – step through your frames, and change the options of your animation repetition. Do you want it to play once, or repeat? Just bear in mind.. repetitive animations can be a royal pain in the backend if you abuse them on your website. They might look great to you, but do they distract from the actual function of the site? Keep it in mind.

image The other stuff is a bit more complex, but like I said – that’s for another time.

Animating in Photoshop

Is incredibly simple. So here I go explaining it to you guys’n’gals!

Today I’m going to make a counter that counts down from 5, movie-style. You’re going to need to be familiar with layers, but if you’re not you’ll probably be able to follow anyway. If you can’t – that’s what comments are for, right?

Start by setting up your workspace. Head to Window > Animation and make sure it’s checked. Make sure your layers window is open too.image

I made a 640x480px canvas with a dark grey background. Make a circle on it.

Continue reading ‘Animating in Photoshop’