霞女之旅

Xia's Journey

GIF from Zero to Hero

on October 25, 2013

I was greatly inspired by the animated GIFs on my good fren’s blog post and decided to try one on my own too.

GIF or technically known as Graphics Interchange Format is a bitmap image format that was born in 1987.

GIFs are typically suitable for logos, low-colour sprite data for games, small animations and low resolution film clips. With its wide support, portabiliy and most importantly, a loss-less compression technique to reduce the file size without degrading the visual quality, GIFs had gained huge popularity and wide-spread use very quickly over the years.

I googled, read up and watched YouTube videos on how to do up an animated gif but was still perplexed by how they did it.

Perhaps the on-line materials were not specific enough, or that my photoshop skills were just too mediocre, it wasn’t as easy as I thought it would be.

After an entire afternoon of hopeless trying, I eventually gave up and sought my friend’s help. He patiently walked me through it step by step, which I am totally grateful for.

I chose the below set of 4 pics to animate.

Step 0

Step 1 : I open these 4 pics in Photoshop CS5.

Step 01

Step 1 : Open pics in Photoshop CS 5.

Step 2 : I used Pic 1 (Prepares to Jump) as the background layer and had to copy the remaining  3 pics into separate layers within one same pic.

Go to the Pic 2 (1,2,3 Jump), use the “Rectangular Marquee” tool on the left and drag the corner of the tool to frame up Pic 2. You should see dotted running lines after you have done the selection. Click “Edit” > “Copy”.

Step 02

Step 2 : Use Rectangular Marquee tool to draw up Pic 2. “Edit” > “Copy”.

Step 3 : Go back to Pic 1. “Edit” > “Paste” and you’ll see a “Layer 1” above the background layer. Layer 1 is actually Pic 2. Now, there will be a “Background” and a “Layer 1”, both reflecting Pic 2 because Layer 1 is now ‘on top’ of the background layer and that the background layer is ‘beneath’ Layer 1.

Step 03

Step 3 : Go back to Pic 1 and click “Edit” > “Paste” into Pic 1.

Step 4 : Do the same for Pic 3.
Go to Pic 3 (Ahh, my shoe), use the “Rectangular Marquee Tool” tool on the left and drag the corner of the tool to frame up Pic 3. You should see dotted running lines after you have done the selection. Click “Edit” > “Copy”.

Step 04

Step 4 : Use Rectangular Marquee tool to draw up Pic 3. “Edit” > “Copy”.

Step 5 : Go back to Pic 1. “Edit” > “Paste” and you’ll see a “Layer 2” above Layer 1. Now, there will be a “Background”, “Layer 1” and “Layer 2”, all reflecting Pic 3 because Layer 2 is now ‘on top’ of “Layer 1” and “Background” layer and that the “Background” layer and “Layer 1” is ‘beneath’ Layer 2.

Step 05

Step 5 : Go back to Pic 1 and click “Edit” > “Paste” into Pic 1.

Step 6 : Do the same for Pic 4.
Go to Pic 4 (Where’s my shoe), use the “Rectangular Marquee Tool” tool on the left and drag the corner of the tool to frame up Pic 4. You should see dotted running lines after you have done the selection. Click “Edit” > “Copy”.

Step 06

Step 6 : Use Rectangular Marquee tool to draw up Pic 4. “Edit” > “Copy”.

Step 7 : Go back to Pic 1. “Edit” > “Paste” and you’ll see a “Layer 3” above Layer 2. Now, there will be a “Background”, “Layer 1”, “Layer 2” and “Layer 3”, all reflecting Pic 4 because Layer 3 is now ‘on top’ of “Layer 2”, “Layer 1” and “Background” layer and that the “Background” layer and “Layer 1”, “Layer 2” is ‘beneath’ “Layer 3”.

Step 07

Step 7 : Go back to Pic 1 and click “Edit” > “Paste” into Pic 1.

Step 8 : Click “Windows” > “Animation” and you’ll see a horizontal bar popping out on your screen.

Step 08

Step 8 : Click “Windows” > “Animation”.

Step 9 : At the top right corner of this horizontal bar, click into “Make Frames from Layers”. Once you click onto “Make Frames from Layers”, there will be 4 frames in the horizontal bar.

Step 09a

Step 9(a) : Click top right button.

Step 9b

Step 9(b) : Click into “Make Frames from Layers”.

Step 09c

Step 9(c) : You should see 4 frames and 4 layers.

This was where my nightmare came about when I spent the entire afternoon figuring out how to do this.

Step 10 : In Frame 1, ensure that the “Eye” Icon is only at “Background”.

Step 10

Step 11 : In Frame 2, ensure that the “Eye” Icon is only at “Layer 1”.

Step 11

Step 12 : In Frame 3, ensure that the “Eye” Icon is only at “Layer 2”.

Step 12

Step 13 : In Frame 4, ensure that the “Eye” Icon is only at “Layer 3”.

Step 13

Step 14 : Now, there are 4 frames with 4 layers each. But each frame has only ONE “Eye” icon.

Step 14 Collage

Step 15 : Set the timing of the individual frames in the Red Circle and the amount of looping you prefer in the yellow circle. Press “Play” button and woolah… you should see the animation.

Step 15

Step 15 : Set the timing and looping you prefer. Press “Play” button and woolah… you should see the animation…!! ; D

Step 16 : Click “File” > “Save for Web & Devices”.
Choose “GIF” at top.
At Image Size (bottom), reduce Width to 500px (for a smaller file size) and height will be autogenerated.
Click “Save”.
Click “Images Only” at Format.
Click “Save”.

Step 16a

Step 16(a) : Save for Web & Devices

Step 16b

Step 16(b) : Save (Images Only)

Step 17 : Go to your file and you should be able to see the animation now.

Getting the GIF to work in WordPress
My second nightmare was to get the GIF file working on this blog site for a previous blog post.

I trialed and error and it still did not work. Again, I googled for information and YouTubes on it and here’s my findings.

Step 1 : During uploading of the media file in Word Press, save as “Full Size”, otherwise, the GIF file will not run.

Step WP 01

WordPress Step 1 : Save in “FULL SIZE”, otherwise GIF will not run.

Step 2 : Ensure that the GIF is on “Original Size” (Full size) as per uploaded. File size should preferably be kept to 500mm width pixels.

Step WP 02

WordPress Step 2 : Ensure that file is in “ORIGINAL SIZE” / (FULL SIZE) as per previous step.

Step 3 : Insert into your post and you should be able to see the animation!

Below’s a copy of the GIF animation which I did… 🙂

Mersing-II

Its quite interesting to see the pictures animate. Have fun creating yours !   🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: