Pr. Anna Pinkas

MMP100 - Introduction to Multimedia

Tutorials

!
!
WEEK 9 - SIMPLE ANIMATION WITH PHOTOSHOP: HD VIDEO
!
Installing the font
! 1. Double click on Righteous-Regular.ttf
2. Click on the Install Font button

! a New Document for HD video output
Creating
! 1. Open Photoshop
2. File > New
a. Width: 1920px
b. Height: 1080px
c. 72ppi
d. RGB
e. OK
3. File > Save As
a. Name the file “hungryOwl_video”
b. Set the file format to Photoshop (.psd)
c. Save

! the background
Creating
! 1. Rename the first layer “background”

2. Double-click on foreground color and set it to #242424
3. Select the bucket tool (G)
4. Click anywhere on the canvas to fill it with dark grey

! the text
Creating
! 1. Select the type tool (T)

2. Set the font-family to Righteous, Size to 320px, Color to #4d4d4d
3. Click anywhere on the canvas and type “hungry owl”
a. Click on the Check Mark in the top options bar to commit
4. To center the text on the canvas:
a. Select All (Cmd + A)
b. Activate the move tool
c. Use the centering icons in the top option bar
d. Deselect (Cmd + D)
5. Make 2 copies of the font layer (Cmd + J)
6. Rename the layers “font1”, “font2”, “font3”
7. Add noise to each layer:
a. Activate the “font1” layer
b. Filter > Noise > Add Noise
i. OK the rasterize alert window ii. Set the amount to 20

iii. OK
c. Activate the “font2” layer
d. Filter > Noise > Add Noise
i. OK the rasterize alert window ii. Set the amount to 21 iii. OK
e. Activate the “font3” layer
f. Filter > Noise > Add Noise
i. OK the rasterize alert window ii. Set the amount to 22 iii. OK

! the stars
Adding

1. Create a new layer above each font layer (Cmd + Shift + N)
2. Rename them relative to their font layer (“stars1”, “stars2”, “stars 3”)
3. Load the star brush:
a. Activate the brush tool (B)
b. In the top options bar, click on the little arrow next to the second drop down from the left.
c. Click on the little gear icon > Load brushes >
Star_brushes_by_Moondustdreams.abr
***The new brushes are now at the bottom of the list of brushes (scroll down)
4. Hide all the font/star layers except for “star1” and “font1”
5. Activate the “stars1” layer
6. Set the foreground layer to #fff
7. Pick one of the new star brushes
a. Adjust its size ([])
b. Click inside the letters to add stars
c. Pick another one of the star brushes to add stars of different size and shapes
*** Rotating the canvas to add stars from different angles can be helpful. To rotate the view of the canvas use the R key. To reset it: Top Option Bar > Reset View
*** To remove stars, use the eraser tool (E)
8. Hide all font/star layers except for “stars2” and “font2”
9. Activate the “stars2” layer
10. Add stars the same way you did with the first stars layer
11. Repeat process with “stars3” and “font3”
*** The pattern should be slightly different each time – this is how we’ll get the “sparkly” effect.

! grey shapes to hide the text
Creating
!
1. Create a New Group:
a.
b.
c.
d.

2.
3.
4.
5.

Click on the folder icon at the bottom of the layers panel
Rename it “bites”
Open it (click on the little arrow to its left)
Create a new layer inside it (Cmd + Shift+ N)
i. Name it “bite1”
Grab the polygonal lasso tool (Shift + L)
a. Create a shape around a section of the text (anywhere except the “h” and “o”)
Set the foreground to #242424
Activate the bucket tool (G)
Click inside the selection to fill it

6. Deselect (Cmd + D)
7. Repeat this process, creating a new layer for each new “bite”, until all that is left is the intact
“h” and “o” - you should have ~ 40 bites total
8. Close the “bites” folder and deactivate it

!

Adding the owl

!

1. File > Place (Embedded) > owl.jpg
a. Enter to accept
2. Hide all the other layers
3. Activate the quick selection tool (W)
b. Make a quick selection around the owl
*** To create a selection that takes into account the small/blurred feathers on the edge, we must use Refine Edge
c. In the Top Option Bar click on the Refine Edge button
i. Set the View to Overlay ii. Turn Smart Radius On
a. Increase the Radius slider to ~80 iii. Feather: 2px iv. Shift Edge: ~ -18
v. Output to: Selection vi.OK d. Click on the Layer Mask icon (at the bottom of the layers panel)
e. Move the owl layer at the top of the layer stack
f. Reveal all the layers (including “bites” folder)
g. Scale and position the owl so that it fits comfortably between the “h” and the “o” using the Free Transform tool (Cmd + T)
i. enter to commit
h. Rasterize the layer: Control + Click on it > Rasterize Layer
i. Bring the owl all the way to the bottom of the canvas: Shift+Click and drag down !
Animating the stars
! 1. Window > Timeline

2. Click on the Create Frame Animation Button
*** Notice: Photoshop creates the first frame for you
3. Hide all the layers except “background”, “star1” and “font1”
a. Set the length of the frame to 0.2
4. Click on the New Frame icon
5. Hide all layers except “background”, “star2” and “font2”
6. Click on the New Frame icon
7. Hide all the layers except “background”, “star3” and “font3”
***Click through the frames to see the effect
8. Repeat this cycle of frames:
a. Select all three frames (Shift + click)
b. Click on the New Frame icon (which automatically copies the three selected frames) i. Repeat until you have ~ 120 frames
c. Click on the Play button to preview

! off” the text
“Biting

! I want the text to start disappearing after ~ 5sec
***

2. Select frames 20 through the last one (Select frame 20, hold Shift, click on last frame)
3. Reveal and expand the “bites folder”
a. Reveal all the “bites”inside of it
4. Select frame 20 only
b. Hide all the bites except “bite 1”
5. Select frame 21 only
c. Hide all the bites except “bite 1” and “bite2”
6. Repeat, adding a new bite for each frame until all the bites are on
7. Preview the animation:
a. Select the first frame
b. Click on the Play button to preview

!
Animating the owl
! Select the frame after the last bite until the last frame of the animation
1.
2.
3.
4.
5.
6.

a. Reveal the owl layer
Select the last frame after last bite only + 5 frames
a. Shift + Click + drag up until a little bit of the head appears on the canvas
Select the next five frame
a. Shift + Click + drag up until you see the eyes
Select all the subsequent frames (until the end)
a. Shift + Click + drag until the owl has reached its final position
Click on the Play button to preview
To get rid of any extra frames:
a. Select the frames you want to discard
b. Click on the little trash icon

!
Exporting the animation to Quicktime
! File > Export > Render to Video
1.
a.
b.
c.
d.
e.

Name “hungry_owl.mp4”
Format: H.264
Preset: High Quality
Leave everything else as is
Render

!
SIMPLE ANIMATION WITH PHOTOSHOP: ANIMATED GIF LOGO
! a New Document for Animated GIF output
Creating
1. File
a.
b.
c.
d.
e.
2. File
a.
b.

> New
Width: 1000px
Height: 1000px
72ppi
RGB
OK
> Save As
Name the file “hungryOwl_logo”
Set the file format to Photoshop (.psd)

! the feathered background
Creating
! 1. File > Place > owl.jpg

2. Shift + click and drag to resize the image (it should fill the canvas)
a. Enter to commit the changes
3. We want to remove the eyes and fill the canvas with white feather:
a. Control + Click on the owl layer > Rasterize Layer
b. Activate the stamp tool (S)
i. Hold the option key and click on the area of the canvas you want to sample from ii. Adjust the size of the stamp tool ([]) and set the hardness to 0 iii. Click and drag on the part of the image you want to replace
4. Turn the background into a circle:
a. Select the Elliptical Marquee tool (Shift + M)
b. Shift + click and drag from the top left to the bottom right corner
c. To center the selection:
i. Select > Transform Selection
a. Set the x and y to 500px
b. Enter to commit
d. Click on the Vector Mask icon at the bottom of the layers panel

! the text
Creating
! 1. Select the type tool (T)

2. Set the font-family to Righteous, Size to 550pt, Color to #4d4d4d
3. Click anywhere on the canvas and type “ho”
4. To center the text on the canvas:
a. Activate the Move Tool
b. Activate the Free Transform Tool (Cmd + T)
c. Set the x and y to 500px
d. Enter to commit
5. Make 2 copies of the font layer (Cmd + J)
6. Rename the layers “font1”, “font2”, “font3”
7. Add noise to each layer:
a. Activate the “font1” layer
b. Filter > Noise > Add Noise
i. OK the rasterize alert window ii. Set the amount to 20 iii. OK
c. Activate the “font2” layer
d. Filter > Noise > Add Noise
i. OK the rasterize alert window ii. Set the amount to 21 iii. OK
e. Activate the “font3” layer
f. Filter > Noise > Add Noise
i. OK the rasterize alert window ii. Set the amount to 22 iii. OK

! the stars
Adding

1.
2.
3.
4.
5.
6.

Create a new layer above each font layer (Cmd + Shift + N)
Rename them relative to their font layer (“stars1”, “stars2”, “stars 3”)
Hide all the font/star layers except for “star1” and “font1”
Activate the “stars1” layer
Set the foreground layer to white
Pick one of the star brushes
a. Adjust its size ([])
b. Click inside the letters to add stars
c. Pick another one of the star brushes to add stars of different size and shapes
*** Rotating the canvas to add stars from different angles can be helpful. To rotate the view of the canvas use the R key. To reset it: Top Option Bar > Reset View
*** To remove stars, use the eraser tool (E)
7. Hide all font/star layers except for “stars2” and “font2”
8. Activate the “stars2” layer
9. Add stars the same way you did with the first pair of layers.
10. Repeat process with “starss3” and “font3”
*** The pattern should be slightly different each time – this is how we’ll get the “sparkly” effect.

!

Animating the logo

!

1. Window > Timeline
2. Click on the Create Frame Animation Button
*** Notice: Photoshop creates the first frame for you
3. Hide all the layers except “owl”, “star1” and “font1”
a. Set the length of the frame to 0.2
4. Click on the New Frame icon
5. Hide all layers except “background”, “star2” and “font2”
6. Click on the New Frame icon
7. Hide all the layers except “background”, “star3” and “font3”
8. Preview:
a. Set the looping option to Forever
b. Click on the Play button to preview

!
Exporting the animation to GIF
! File > Save for Web
1.

a. Preset: GIF 128 Dithered
b. Make sure the Transparency option is on
c. Keep the size at 1000 x 1000px
i. Click on the preview button to see the file in the browser
d. Click on the Save button
a. Save As: “hungryOwl_logo.gif”
b. Save

!
! the animated GIF to an HTML page
Adding
! Simply use the element in your HTML file (i.e: )