GIF is a file format for compressing and saving image files. GIF stands for Graphic Interchange Format and therefore should be pronounced with a hard G sound. (not JIF as in the peanut butter :)) Because of file compression and the relatively small file size they create, it is particularly suited for saving short animation files.
This assignment refers to files created in the 2 Portraits Assignment
Preparing the Swatch Global RGB Colors
- Choose either your step 1 grayscale image or your step 2 color posterization. Whichever one you choose, the colors MUST be global colors.
- If they are not yet Global Colors, but you have those colors separated by layer, then you can simply open each layer individually, use the eyedropper to select the color used in the layer and locate that color in your swatches window/palette. (if not yet in your swatches, add it now).
- From the SWATCHES Window, open the color by double clicking on it. Check the Global color box in the next window that opens up. This is also where you change the color from CMYK to RGB. (However, to change ALL of your colors to RGB, go to the top menu bar FILE>>DOCUMENT COLOR MODE>>RGB)
- Do the above step for each color that you used.
- If however, you failed to separate colors by layer or failed to create Global colors in the first place then your job will now be much more difficult. The best option for you will be to first use the eyedropper to select a color from your drawing. Then, from the top menu do the following: SELECT>>SAME>>COLOR FILL. Then create a new layer and move all of your selected shapes to that new layer. Then, lock that layer and turn off its visibility eyeball. Repeat these steps for every color until all colors are separated into their individual layers. Now, open each layer one at a time.
- From the SWATCHES Window, open the color by double clicking on it. Check the Global color box in the next window that opens up. This is also where you change the color from CMYK to RGB.
- Do the above step for each color that you used.
Duplicating your drawing to create 6 Individual .ai Files
- Once you have completed the steps listed above for preparing all the colors as Global Spot Colors and they are each separated into their own individual layers you are ready to do the following.
- First SAVE AS your file and name it (name)1.ai (in my example that will look like this: Jenn1.ai
- Then Execute the SAVE AS command again, (name)2.ai (in my example that will look like this: Jenn2.ai
- Repeat this SAVE AS command again as many times as the number of global colors (or layers) in your drawing. Be sure to change the name of the file each time by adding the next number (3, 4, 5, or 6, etc. Also, be sure you have saved all of your files to the same folder).
- When you complete this stage of the process, you should have 6 (or however many colors you used) .ai files which essentially look exactly the same right now. In my example, I have Jenn1.ai, Jenn2.ai, Jenn3.ai, Jenn4.ai, Jenn5.ai, Jenn6.ai.
Preparing the Individual .ai files as different colored Still Animation Frames
- Once you have completed the steps listed above for duplicating your drawing, you are ready to do the following.
- Do nothing more to your first file.
- On the rest of the files simply open each global color and change it dramatically by shifting either its hue or value or by adding a colored line/stroke around the shapes. Make these changes by moving the slider associated with either Red, Green or Blue to create a new color. Repeat this step of modifying the global color on each file.
- Save these changes for each file.
Preparing the Animation in Photoshop
- Open Photoshop, NEW File and select the FILM and VIDEO option from the menu at the top of the page. Press CREATE.
- From the top Menu Bar>>WINDOW>> WORKSPACE>>MOTION. (There should now open a TIMELINE window. If this window is not visible, however, then simply open it from under the WINDOW option in the top menu bar.)
- Open the LAYERS Window if not already open.
- Go to Illustrator and open your first file (for example: Jenn1.ai). Make sure all of your drawing layers are visible and unlocked. Copy your Drawing
- Return to Photoshop and paste it as a SMART OBJECT.
- DO NOT MOVE OR RESIZE THE IMAGE
- Return to Illustrator and open file number 2. and again, be sure all layers are visible and unlocked. Select All, and Copy.
- Go back to Photoshop and paste as a Smart Object (rename this in the Layer Window, number 2).
- Repeat these Copy and Paste steps for each of your Illustrator files bringing them to Photoshop in their own separate PS layer.
Create the PS Animation GIF
- In the TIMELINE Window, Click CREATE FRAME ANIMATION
- In the LAYERS Window Make only Layer 1 or Step 1 visible.
- In the TIMELINE Window click the Add a Frame Button (The box icon containing a + sign)
- In the LAYERS Window, make only Layer 2 or Step 2 visible
- Repeat this process of adding a separate frame for each of your layers or image steps.
- Import to Photoshop an instrumental (no lyrics) music file
- place your music audio file into the audio tracks of the timeline (located below the Video tracks)
- In the TIMELINE Window options, select Loop
- Below each frame select a speed of 0.1 seconds
- Press the Play button to see the animation.
Export Animation
- Export>>Save for Web (be sure to select the Save for Web option 1st)
- Select GIF option
- Open your GIF in a Browser or on a Website page to see the animation (Drop it on the icon of an Internet browser)
- To add Play/Pause controls, to play it outside of an internet browser and also have the ability to stop and start, do the following:
Do a screen recording of the animation
Open the Gif
Press the COMMAND SHIFT 5 keys
Marque around the image to record
Press Record (check the record control/options, there may be a 5 second count down before the recording begins)
Record 10 seconds of your Gif
Press COMMAND SHIFT 5 again
Press Stop Record - Here is an alternative option for adding a control to Stop and Start the animation