2 WAYSTO MAKE IN PHOTOSHOP

GIF

TUTORIAL

A

STEP 1

Open "Icon" file made in Adobe Illustrator and save every movement that you want per layer.

Save with number and sequence of layers.

Save file from smallest numeral for "File Ending“

Save file from biggest numeral for "File Starting"

Preparing the file

STEP 1

*GIF movement example

STEP 2

Open Adobe Photoshop and follow these steps :

File > Scripts > Load Files into Stack

Import files to Adobe Photoshop

STEP 2

“Load Layers” will appear and click :

> Browse (on Load Layers)

> Select the file (in Open file)

> Open

STEP 3

Open timeline view :

Windows > Timeline*

Add files to Timeline

* Windows > “Animation” option if using Adobe Photoshop CS5

STEP 3

* Timeline view

STEP 3

Find “Create Frame Animation” buttin inside Timeline column.

Click triangle button beside "Create Frame Animation" > Select "Create Frame Animation" > Click

STEP 3

One layer will appear inside Timeline column. To bring out all layers.

Click button on the top right Timeline column > Select Make Frames From Layers

STEP 4

After all layers appear on Timeline column, set the delay time frame for every

layers.

Click “0 sec.” below Layer.

Setting the delay time and looping

STEP 4

Continue setting how many cycles of Looping

(repetition ) you desire.

For preview, click the Play button below Layers.

STEP 5

When you have finished, you can save to GIF format by following these steps :

File > Save for Web

Save the project as GIF

STEP 5

Make sure the files storage is set to GIF format

TUTORIAL

B

STEP 1

Open "Icon" file made in Adobe Illustrator, and save element per layer.

Save each element which will be animated to PNG format.

Save the first file following these steps :

File > Export > Click “Use Artboards” > Range : 1

You can save the rest of the Files without clicking “Use Artboards”

Preparing the file

STEP 2

Open Adobe Photoshop and follow these steps :

File > Scripts > Load Files into Stack

Import the files to Adobe Photoshop

STEP 2

“Load Layers” will appear and click :

> Browse (on Load Layers)

> Select the file (in Open file)

> Open

STEP 3

Open timeline view :

Windows > Timeline*

Add files to Timeline

* Windows > “Animation” option if using Adobe Photoshop CS5

STEP 3

* Timeline View

STEP 3

Find “Create Frame Animation” button inside Timeline column :

Click triangle button beside "Create Frame Animation" > Select "Create Frame Animation" > Click

STEP 3

One layer will appear on

Timeline column.

STEP 4

This one layer will be treated with

reposition or change the opacity.

Disable the "Auto-select" OR click

"Layer" to simplify elements

reposition.

On first layer, place Element to first

point position.

Then, copy Layer with click

"Duplicates Frames" button and move

the element to the next position where

element will migrating.

STEP 4

Select 2 layers you'd like to

animate then click “Tweens

Animation Frames”

Tween panel will appear to

determine:

− How many frame you'd

like to add between 2

animated frames

− Which Layers

− What Parameters

STEP 4

* Layers view after “Tweens Animation Frames” effect added.

THANK YOU

Presented by