Category Archives: Animated GIF

Have a Rockin’ Birthday

4 Replies

I wanted to give my my son-in-law a special birthday card this week.  AnimatedGIFAssignments1086 was just the thing.

Make someone a special birthday card, but make it extra special by including a GIF!!  Try to make the design unique to them (it’s THEIR birthday, after all!).

Animated Birthday Card

‘Shakin’ It Up’ for a special birthday card

I’m starting to get good at this now with all the practicing I’m doing with my new GIFing skills.  I use Photoshop Elements 11 for the Mac as my image editing tool, and here’s my tutorial on the making of this GIF.

Original Birthday Card Image

Original Card

Step 1: For this project I started with an image I found on-line from a free create-your-own birthday card site.  I chose this image because it had a solid white background which makes it much easier when you get to the point of merging the layers.  And that was important because on this card I wanted to make the guy dance, but keep the text still.  I also wanted to add a little something extra to personalize it.

Lasso Tool Selection

Selecting Image with the Lasso Tool

 

Step 2: Use the lasso tool to capture only the guitar player as illustrated above.  Copy and paste it into a new layer with a transparent background.  Then grab the image of the “Have a rocking Birthday” text and do the same thing.  Then you’ll end up with two pieces of the image on two different layers, with transparent backgrounds.

Making Music on the Computer

Step 3: To personalize the card create another layer with your text or a special image.  I used this free clipart icon of a man sitting at a computer making music as my son-in-law, Michael, has just taken up a new hobby learning how to create music on the computer.  I think he might be using Audacity even.

Guitar Player Images

Step 4: Create Guitar Player Image Layers

Step 4: Duplicate the guitar player to create three identical layers.  Rotate two of the images +5deg and -5deg.  You now have 3 guitar players, one leaning forward, one leaning back and one in the middle.

Step 5: For the border I made a rectangle with a transparent fill in PowerPoint (I know my way around the program very well, and it was just easier to do it there.) and saved it as a picture in the .PNG format.  This allows you to maintain the transparency of the images.  We’ll also need a solid white layer. You should end up with 7 unique layers at this point. But we’ll need to make duplicates of layers 4-7 below to be used during the layer merging process.

1. Guitar Player tilted backward (1)

2. Guitar Player in the center (1)

3. Guitar Player leaning forward (1)

4. “Have a Rockin’ Birthday” text (x3)

5. The computer guy icon (x3)

6. The border with a transparent middle (x3)

7. A solid white layer (x3)

Step 6:If you haven’t already, duplicate layers 4-7 so that you have 3 of each as noted above.

Step 7: Now it’s time to start merging the layers together so that you end up with only the guitar player moving and everything else remaining still.  These new merged layers are what will be used to create the actually GIF. Make sure you save your work often and I’d highly recommend saving the work you’ve done creating the individual image layers as its own file at this point – just in case you make an error during the merge process, you have something to go back to.  You really don’t want to start all over again do you?

Note: The white layer should go at the bottom of your stack.  It is supposed to be the background.  Otherwise when you merge the layers you’ll end up with only a white image.

Rockin B-day Final Image

Final merged image

Merged Layer 1: Guitar player tilted back =  1 + 4 + 5 + 6 + 7

Merged Layer 2: Guitar player in center =  2 + 4 + 5 + 6 + 7

Merged Layer 3: Guitar player leaning forward =  3 + 4 + 5 + 6 + 7

Duplicate merged layer 2 (the guitar player in the center) so he’ll rock forward and backward evenly. Ta Da!  You now have the four layers you’ll need to create your GIF.  Center => Forward => Center => Backward. If you’ve done it right you’ll only see the guitar player rockin’.

Step 8: In PhotoShop Elements 11 you select “Save For Web” to preview your GIF. On the right hand side menu, select GIF, Transparency, Animate, and set your speed in the “Frame Delay” box at the bottom. The default delay of 0.2 seconds works for most projects. Click on preview over at the bottom left and you can watch your masterpiece in action.

SaveForWebWindow_8in

Step 9:  If you like what you’ve done, save it as a GIF.  To view the file once it’s on your computer you’ll need to open it with your browser.  On my Mac I right click the file, select ‘Open With’ Google Chrome.

Up, Up, And Away

3 Replies

 

Animated Movie Poster GIF

Meet Rochelle from Pixar’s movie “Planes”.

Still enamored with creating GIFs, I stayed up way too late last night creating this animated movie poster from the movie Planes by Pixar to be released in theaters August, 2013. (DesignAssignments313)

Let me give you a little background on why I chose this particular movie poster. My name is Rochelle, and it’s not a very common name in the United States.  I met only one other Rochelle growing up, and that was in High School.  I’ve met maybe 5 others my whole life. So when a Facebook friend posted on my timeline that Pixar would be introducing a new character in their upcoming movie about planes, I was beaming,

 “I have a cartoon character named after me?”  

Now this assignment would give me the opportunity to create something out of a real movie poster that had my name on it.  How cool is that? If I liked it, I could see using it in other circumstances around the web. I do like my final product, so you might see it popping up again.

Keeping with this week’s design theme, I studied the poster to understand what is being conveyed in the image.  Since the movie isn’t even out yet, I read the Pixar synopsis of the movie and more specifically the plane character, Rochelle. (voice of by Julia Louis-Dreyfus)

Excerpt from Pixar site:

Rochelle

Pla rochelle rolloutimage v3-0simp

(voice of Julia Louis-Dreyfus)

Rochelle is a tough racer and the pride of the Great White North. Always confident and capable, she got her start running mail to small towns in Quebec, picking up home remedies for mechanical maladies along the way. She also developed a knack for fast travel that ultimately inspired her to give air racing a try. Rochelle never looked back (this competitive contender doesn’t need to). She is relentlessly pursued by charmer El Chupacabra, but steadfast Rochelle is much too focused on winning the race to return his affections.[20]

I would also need to keep in mind the file size limitations of a GIF, how many frames I’d be allowed in my photo editing software, and since I didn’t want this project to consume my life for days, the number of frames I’d actually have to create.  I decided that the important elements of the poster to focus on would be that this is a plane, and then illustrate something about Rochelle’s personality.  My first overly ambitious thoughts were to have her fly on the poster.  Moderating my initial exuberance with a dose of reality, I admitted to myself the work required to make the plane actually fly in or out of the poster was way too complicated to pull off.  My rational, although still very creative self, went with animating the propeller props, and giving her a wink.  I’m not totally at peace with the symbolism of her winking, since the character synopsis says she is steadfast and much to focused on winning the race to return another plane’s affection, but I’ve seen the blinking effect used in a lot of other GIF projects (Ben’s “The Colorized Zone” was a big inspiration), so why not give it a try.

[An illustrated detailed process of creating this animation will be documented and posted as a tutorial eventually. Until then, you can view a tutorial example with only one animation zone.] 

A summary of the process using PhotoShop Elements 11 for the Mac:

1. I used the lasso tool to grab an image of each of the propellers and the eyes/windshield of the plane. This was pretty painstaking while I experimented with which parts of the propeller would work best to create the rotating effect.  I then duplicated the propeller images and rotated them 30deg and 60 deg. I ended up with 3 different propeller images for each side of the plane.

2. For the winking eye I used the lasso tool again to capture just the left half the windshield image.  Then started stretching, erasing, copying, pasting, aligning… until I had something that looked right.

3. Once all of the individual image layers were created, it was time to merge the appropriate layers to create new combined images that would animate correctly.  Oh my was this a chore as it became closer and closer to midnight.  I was creating a total of 3 animation zones?! My brain just wasn’t working as well anymore and I was having a hard time following tracking of what went where.  And remember that ambitious enthusiasm I spoke about? Well I added in an additional challenge to have each of the propellers appear to be spinning a little differently. And believe you me, it was no walk in the park to properly align everything so that those parts that were supposed to be still remained still.  I didn’t want any distracting jumping around of the animation.

4. The timing of the animation sequence was also important.  I didn’t want her constantly winking, yet I wanted the propellers to be moving at a quick rate to provide a better spinning illusion. I was able to create the effect I wanted by duplicating more of the image layers for the propellers and sandwich the winking effect in the middle. All-in-all I ended up with a total of 14 frames: 8 propeller frames + 2 winking frames + 4 propeller frames, all running at 0.2 seconds per frame.

As I mentioned above, this post only gives a high level synopsis of creating this GIF.  The tutorial will have much more detail with screen shot images and examples at each stage as I move through the creation process.