multimedia web design class notes - iris.nyit.eduiris.nyit.edu/~dmyrick/dgim759/docs/class3.pdf ·...

MULTIMEDIAWEBDESIGN CLASSNOTES

1

CLASS :: 03

02.08

2019 3 Hours

“THE” AGENDA

HOMEWORK 2 REVIEW [ Upload to Comm Arts Server ] :: Upload “GIF Face” assets to Your PSD Folder [ Inside of Folder> Create “Gif Face” Folder ]

GIF ANIMATION :: File Set-Up :: Intro to Animation [ Frame vs. Video Timeline ] :: Importance of Layer Names & Order

FRAME ANIMATION VIDEO TIMELINE ANIMATION

:: Hide/Show :: Position :: Opacity :: Effects (example: change Color Overlay fx)

:: Transform (Scale/Rotate) :: Animating Layer Mask :: Animating Vector Mask :: Animating Styles (example: change outer glow fx)

SAVING GIFS :: Save Project for Future Editing [.psd] :: Exporting/Saving for Web [.gif] :: Exporting/Rendering Video [.mp4] :: Setting Quality :: Testing Animation :: Size of File :: Save To Location :: Preview in Browser

VIDEO PROJECT REVIEW :: DGIM 759 Student Work Page: Header Videos :: Online Examples :: Review Header Video Requirements :: Brainstorm Treatments (Filter/Blendmodes/Etc.) for Your Final Video


2

HOMEWORK 1 REVIEW [ Turn-In ] :: Set-Up Student Folder

1. Go To Comm Arts Server ( In the Windows Search Bar Type z:, then [ HIT ENTER ] ) 2. Open the _DGIM759 Folder 3. Open Your Student Folder 4. Open the PSD Folder 5. Inside the PSD Folder, Create a New Folder: “Gif Face” [ If not previously created ] 6. Save Your Images or Video into the Gif Face Folder

(You should name your images, preferably in numeric order, i.e. face1.jpg, face2.jpg, etc.)

QUICK TIPS FOR IMPORTING GIF FACE ASSETS :: Import Images into Photoshop [ FRAME ANIMATION ]

1. Open Photoshop CC 2. Go To Menu Bar > File > Scripts > Load Files into Stack…

:: Import Video into Photoshop [ FRAME ANIMATION ]

1. Open Photoshop CC 2. Go To Menu Bar > File > Import > Video Frames to Layers… 3. Choose Options for the Import [Start & End points, Frame options, etc…]

NOTE: Videos are limited to 500 frames… :: Import Video into Photoshop [ VIDEO TIMELINE ANIMATION ]

1. Open Photoshop CC 2. Go To Menu Bar > File > Open > Gif Face Folder > yourvideoname.mp4

QUICK TIP FOR SAVING ANIMATED GIFs

:: SAVING GIFS

1. Go To Menu Bar > File > Export > Save For Web… 2. Choose GIF 128 Dithered From Preset > Click Save Button


3

“GIF FACE” ANIMATION :: Intro to Animation [ Frame vs. Video Timeline ]

Frame Animation:

Allows you to animate layers frame-by-frame. Animation by Frame is limited to changing a layer’s Position, Opacity, and Effects (fx, blendmodes)…

Video Timeline:

Allows you to animate layers based on a timeline. Animation by Video Timeline is limited to changing a layer’s Position, Transformation (Scale, Rotate), Opacity, Layer Mask Position, Vector Mask Position, and Layer Styles (fx, blendmodes, etc.)


4

:: Importance of Layer Names & Order Ensure all layers are named and organized into groups when possible. This will allow you to locate the shape/layer easier in the Layers Panel, and identify which shape/layer is being animated in the Video Timeline Panel


5

FRAME ANIMATION - IMAGES :: Set-Up Frame Animation [Photos and Image Assets]

SHORTCUT KEY STEP DESCRIPTION ACTION

[Win] [Mac]

PREVIOUS STEP FOR MEDIA TYPE

:: Import Images into Photoshop

1. Open Photoshop CC 2. Go To Menu Bar > File > Scripts > Load Files into Stack…

3. Navigate to Your Folder with The Gif Face Images or Video 4. Select The Folder and Options for Your Import:

NOTE: Align Images is good for images that are not the same size NOTE: Smart Object is Good if You wish to apply smart filters


6

FRAME ANIMATION - VIDEO :: Set-Up Frame Animation [ For Video Clip (500 Frames or Less) ]

STEP FOR IMPORTING VIDEO MEDIA

1. Open Photoshop CC

Go To Menu Bar > File > Import > Video Frames to Layers…

2. Choose Options for the Import [Start & End points, Frame options, etc…]

3. Click OK


7

1 Save Your Photoshop Document (PSD)

File > Save > Your Gif-Face Folder > initials_gif-face.psd

2 Crop To DGIM 759 Student Page Requirement

a. Go To Menu Bar > Image > Canvas Size b. Resize the Canvas to 480 x 600

3 Align/Transform Images To Fit In Frame

a. Go To Menu Bar > Select > All Layers b. Go To Menu Bar > Edit > Free Transform c. Hold Shift+Alt+Drag Corner from Center of

Images

Free Transform

Ctrl+T [ command+T ]

for Mac

4

Open the Frame Animation Panel

a. Go to Menu Bar > Window > Timeline


8

b. In the Timeline Panel > Click Drop Down Arrow > Choose Create Frame Animation

:: Animate Hide/Show

When you choose or convert your timeline to frame animation a thumbnail will appear displaying the 1st frame. The thumbnail will display all of the visible layers in your Layers panel. You may Hide or Show a layer by clicking the Hide/Show icon in your Layers panel. [TRY IT] You may animate the layer’s visibility by creating a new frame and choosing a visibility that is opposite of the previous frame. (If you change the duration from “Once” to “Forever”, the layer will appear to blink: EXAMPLE: http://iris.nyit.edu/~dmyrick/dgim759/images/tomhanks.gif


[Win] [Mac]

1 Resave Your Document File > Save As… > initials_gif-face-frame.psd

Shift + Ctrl + S

Shift + cmd + S

2 Create a New Frame

a. At the bottom of the Frame Animation Panel,

Click Frame 1, then Click the “Duplicates selected frames” Button


9

3

Hide a Selected Layer

Your Frame Animation Timeline Panel should have 2 frames:

a. Go to your Layers panel, and choose the layer you wish to hide in the second frame b. Click the Hide/Show icon to hide the visibility of the layer:

4

Change Looping Options [to make animation loop “forever”]

a. At the bottom of the Frame Animation Panel, click the “Select looping options” button b. Change the option from “Once” to “Forever”

5

Preview Animation

a. At the bottom of the Frame Animation Panel, click the “Play” button [ spacebar ]

6

Change Delay Time of frame(s)

If the animation is too fast for your liking, You may change the delay time of a frame or frames. If you wish to change one frame’s delay time: a. Go to bottom of Frame Thumbnail >

b. Click “Selects frame delay time” arrow > c. Choose the newly desired time. d. Preview the animation If you wish to change multiple frames’ delay time:

a. Click the “Timeline Options Button”


10

b. Choose Select All Frames c. Go to bottom of any Frame Thumbnail >

d. Click “Selects frame delay time” arrow > e. Choose the newly desired time. d. Preview the animation

7

Save Document [Ctrl+S] [cmd+S]

NOTES::


11

:: Animate Position

You may animate the layer’s position by creating a new frame (or choosing an existing frame) and moving the layer (with the move tool) to a new position. EXAMPLE: http://iris.nyit.edu/~dmyrick/dgim759/images/deli.gif


[Win] [Mac] 1

Move Layer Position

a. Ensure Frame 2 is selected.

b. Go to your Layers panel, and choose the layer or group you wish to move in the second frame.

In the example below, the “IN” door of a deli will be opened. A Group of layers named “IN-DOOR” includes layers for the door shape and signage.

c. Choose the Move Tool d. To avoid moving other layers, you may Hold Shift Key + Arrow [nudge key] to move the layer by increments Alternate option: Lock all of the layers except for the layer you wish to move > In Move TOOL OPTIONS, ensure Auto-Select is selected w/ the Group option

2

Preview Animation



12

3

Add a Tween

A Tween creates/animates a transition (between stages), for example: Position: Movement from one position to another; Opacity: From opaque to transparent & visa versa Effects: Transition of one color to another a. Ensure desired keyframe is selected.

b. Click the “Tweens animation frames” button c. In the Tween Pop-Up Window:

Tween With: Previous Frame Frames to Add: Default (Add more for realism, or less for faster animation) Layers: Ensure All Layers is selected (so the others don’t disappear – in future practice) Parameters: Just change the Position (Uncheck the others)

d. View the new number of frames, then click each frame to see the group of layers position by frame

4

Preview Animation


5

Save Document [Ctrl+S] [cmd+S]


13

:: Animate Opacity

You may animate the layer’s opacity by creating a new frame (or choosing an existing frame), choosing a layer in the Layers panel, changing the layer’s opacity, then adding a tween


[Win] [Mac] 1

Add a New Frame, or Choose an Existing Frame

Choose the Frame in which you want a layer to become transparent.

2 Choose the Layer you wish to become transparent

Go to your Layers panel, and choose the layer or group you wish to become more transparent or “invisible”.

3

Reduce the Layer’s Opacity

At the top of the Layers panel, reduce the opacity to a % of your choice [16% is in this example]

EXAMPLE ONLY In this example, the “WINDOWS” group will become dimmer (more transparent/less opaque). NOTE: A duplicate layer with a black color overlay was added below the WINDOWS group, so darkness could show through the opacity. In order for this animation to work, the dark layer must exist on both the selected frame and the frame used as a base for the tween. For this example, a new frame (with the dark layer) is added to the timeline…


14

4

Create a Tween to Animate the Opacity

a. Go to the Frame Animation Timeline panel > Click the “Tweens animation frames” button b. In the Tween Pop-Up Window:

Tween With: Previous Frame Frames to Add: Default (Add more for realism, or less for faster animation) Layers: Ensure All Layers is selected (so the others don’t disappear – in future practice) Parameters: Ensure Position and Opacity (Uncheck Effects if Necessary)

5

Preview Animation

a. At the bottom of the Frame Animation Panel, click the “Play” button NOTE: Some animations may be affected by others. If you desire a different outcome, consider converting your Timeline from Frame Animation to Video Timeline (for more control).

[ spacebar ]


15

:: Animate Effects

You may animate the layer’s Effects (Layer Styles, Blendmodes) by creating a new frame (or choosing an existing frame), adding fx or blendmodes to the layer, then adding a tween. You may change the blend mode on your Gif Face Project


[Win] [Mac] 1

Add a New Frame, or Choose the Last Frame

Create a new Frame, or Select the last frame in your time line.

2 Add an fx or blendmode to a Layer Go to your Layers panel, and Choose the layer

3

To Add a fx (Color or Gradient Overlay) to the Layer

a. At the bottom of the Layers panel: Click the “fx” button b. Choose Desired Style

NOTE: If you choose a Gradient Overlay fx, it may become distorted when exported as an animated gif.

c. Double-click the “Set color of overlay” button d. Choose your desired color from the Color Picker

e. Click OK


16

4

Create a Tween to Animate the Effects

a. Go to the Frame Animation Timeline panel > Click the “Tweens animation frames” button b. In the Tween Pop-Up Window:

Tween With: Previous Frame Frames to Add: Default (Add more for realism, or less for faster animation) Layers: Ensure All Layers is selected (so the others don’t disappear – in future practice) Parameters: Ensure all Parameters (Position, Opacity, and Effects) are Checked

5

[OPTIONAL] Change Effects

You may change the effects by:

a. Selecting the Layer with fx b. If Layer effects are not seen, Click the “Reveals layer effects in the panel” button

c. Double-Click the fx You chose (Shown in picture: Color Overlay “Layer effect name”) d. Change properties of Layer fx

6

Edit Frame Animation

a. In the Frame Animation panel: Hold Shift > Select the Last Frame AND the frame you wish the effects animation to begin.

NOTE: Frames should be highlighted

b. Click the “Tweens animation frames” button


17

7

Preview Animation a. At the bottom of the Frame Animation Panel,

click the “Play” button NOTE: Some animations may be affected by others. If you desire a different outcome, consider converting your Timeline from Frame Animation to Video Timeline (for more control).

[ spacebar ]

8

Save Document Go to Menu Bar > File > Save [Ctrl+S]

CONVERT FROM FRAME ANIMATION TO VIDEO TIMELINE

1 Convert to Video Timeline

Go To Top Right of Timeline Panel > Click “Timeline Options Button” > Choose Convert to Video Timeline OR

Go To Bottom Left of Timeline Panel > Click “Convert to video timeline” button

NOTE: Once you choose to convert to Video Timeline, DO NOT convert back to Frame Animation (You will lose functionality & order)


18

VIDEO TIMELINE ANIMATION :: Set-Up Video Timeline Animation


[Win] [Mac] NEW ANIMATION

SET-UP & PREP

:: Open Video into Photoshop

1. Open Photoshop CC 2. Go To Menu Bar > File > Open > Gif Face Folder > yourvideoname.mp4 3. You May Add New Layers (SHAPES, PICTURES, FILTERS, MASKS, etc) in the Layers Panel

4. You May Add More Video and Audio Clips to The Timeline Panel, by Clicking +

VIDEO TIMELINE WORKSPACE


19

:: Position, Opacity, Style

The general rule for animating layers in the video timeline is: 1. Place the time indicator (playhead) at the frame you wish to start animating 2. [click stopwatch] Ensure all the layer properties (position, opacity, and style) are to your liking 3. [click keyframe diamond] Place the time indicator (playhead) at the frame (keyframe) you wish the animation to change/stop 4. Change the layer properties (position, opacity, and style) to the new property values

NOTE: Animating Position in the Video Timeline may be easily accomplished on a simple/single layer. If you wish to animate the position of a group (instead of individual layers), the group must be Converted to a Smart Layer. SEE Transform (Scale/Rotate)


[Win] [Mac]

1

Animate Position (This may only be done on Simple Layers)

1. Ensure the playhead is at your designated start point (on timeline) 2. In the Timeline Panel, Click the Layer you wish to animate

3. Click the “Show layer properties” button 4. Locate the Position Property

5. Click the stopwatch icon (before Position) to set the initial position of layer (NOTE: keyframe is activated when diamond icon turns gold)

6. Move the playhead to the desired frame number 7. Move the layer with [Move Tool – Group Option] or [Shift+Nudge Key] 8. Ensure the keyframe diamond icon appears

2 Animate Opacity


3. Click the “Show layer properties” button 4. Locate the Opacity Property 5. Click the Stopwatch icon (before Opacity) to set the initial opacity of layer (NOTE: keyframe is activated when diamond icon turns gold)

6. Move the playhead to the desired frame number 7. In the Layers panel change the Opacity to desire % 8. Ensure the keyframe diamond icon appears

3 Animate Style


3. Click the “Show layer properties” button 4. Locate the Style Property 5. Click the Stopwatch icon (before Style) to set the initial style of layer (NOTE: keyframe is activated when diamond icon turns gold)

6. Move the playhead to the desired frame number 7. In the Layers panel change the desired Style (blendmode, fx, etc.) 8. Ensure the keyframe diamond icon appears


20

:: Transform (Move/Scale/Rotate)

NOTE: To Animate the Transform Properties of a layer or group, the layer/group must be Converted to a Smart Layer. Once converted, the Layer property in the timeline will be named “Transform” You may animate Transform (Move, Scale, Rotate, Perspective, etc.) using the same order of animation as above…


[Win] [Mac] 1

Animate Transform [Convert to Smart Layer]

To convert a layer/group: 1. Go to the Layers panel > Select the Layer/Group > Right-Click > Convert to Smart Object


4. Click the “Show layer properties” button 5. Locate the Transform Property

6. Click the stopwatch icon (before Transform) to set the initial state of the layer (NOTE: keyframe is activated when diamond icon turns gold)

7. Move the playhead to the desired frame number MOVE :: 8. Move the layer with [Move Tool – Group Option] or [Shift+Nudge Key]

ROTATE :: 9. Go to Menu Bar > Edit > Transform > Rotate [ or Edit > Free Transform ]

SCALE :: 10. Go to Menu Bar > Edit > Transform > Scale [ or Edit > Free Transform ] Free Transform Instruction: URL: https://helpx.adobe.com/photoshop/using/transforming-objects.html#scale_rotate_skew_distort_apply_perspective_or_warp 11. Ensure the keyframe diamond icon appears


21

:: Animating Masks

NOTE: To Animate the Masks, ensure the layer mask is UNLINKED to the layer. Once unlinked, the Mask Position may be moved in the Timeline…


[Win] [Mac] 1

Animate Mask

1. In the Timeline Panel, Click the Layer you wish to animate 2. Go to Layers panel 3. Locate the selected layer 4. Click the Link to unlink the layer with the mask

FROM:: TO:: 5. In the Timeline, ensure the playhead is at your designated start point (on timeline)

6. Click the “Show layer properties” button 5. Locate the Vector Mask Position Property

6. Click the stopwatch icon (before Vector Mask Position ) to set the initial position of the mask (NOTE: keyframe is activated when diamond icon turns gold)

7. Move the playhead to the desired frame number 8. Move the mask with [Move Tool – Group Option] or [Shift+Nudge Key] 9. Ensure the keyframe diamond icon appears


22

SAVING as PHOTOSHOP DOCUMENT [ Required for Future Editing ] :: Edit for Gif Face: Hide Background Layer & [Export > Save for web .gif AND Save As… .psd ]

SAVING GIFS :: Exporting/Saving for Web [.gif]:

File > Export > Save for Web… > Locate Preset: Choose GIF >

:: Setting Colors: You may edit the number of Colors [ FROM 2 – 256 ]: Affects quality & file size :: Changing Image Size of File: You may adjust the dimensions of an Image (NOTE: Increasing the dimensions may result in pixilation.)

:: Testing Animation: You may change the loop option [Once, 3x, Forever] ; and Click the play button to preview the gif animation

:: Save To Location: [Save to your student folder > inside the PSD folder] :: Preview in Browser: [Open the .gif file in any internet browser]

SAVING as VIDEO :: Exporting/Rendering Video [.mp4]: File > Export > Render Video > Ensure “Adobe Media Encoder” is selected > H.264 > RENDER


23

FACEBOOK OPTION


[Win] [Mac] Crop Your Document to Square [ 480 x 480 ]

1. Go To File > Save As… > YourInitials_Facebook_profile.mp4

2. Go To Tool Bar and Choose Crop Tool

C

[Option 1]

C

[Option 1]

1

2. In the Tool Bar Options, change the Height and Width values to 480 x 480px [ For Square Framed Image ]

NOTE: Ensure Delete Cropped Pixel is UNCHECKED

2

Ensure The GIF is 7 Seconds in Length

In Video Timeline Mode, Manipulate Gif To be 7 Seconds in Length

3

Export as a .mp4

1. Go To Menu Bar > File > Export > Render Video > 2. Ensure “Adobe Media Encoder” is selected > H.264 >

RENDER 3. Title/Name: YourInitials_Facebook_profile.mp4

4

Upload to Your PERSONAL Facebook Page

Login to Your Facebook Account using an iPhone or Android device. Upload the 7-second .mp4 video as your profile pick


24

Homework HW-3

DUE :: 02.15

REVIEW [For Gif Face] ::

1. Adobe Photoshop Help Reference//CHAPTER 14 [ pp. 689 - 727 ]: Video and Animation URL: https://helpx.adobe.com/pdf/photoshop_reference.pdf

2. Creating Masks to Move Over Time in Photoshop CS6 URL: http://tv.adobe.com/watch/the-complete-picture-with-julieanne-kost/creating-masks-to-move-over-time-in-photoshop-cs6/

3. Transforming Layers Over Time in Photoshop CS6 URL: http://tv.adobe.com/watch/the-complete-picture-with-julieanne-kost/transforming-layers-over-time-in-photoshop-cs6/

4. How to Pan and Zoom Video in Photoshop CS6 URL: http://tv.adobe.com/watch/the-complete-picture-with-julieanne-kost/how-to-pan-and-zoom-video-in-photoshop-cs6/

5. Creating Advanced Animation in Photoshop URL: https://www.smashingmagazine.com/2015/06/creating-advanced-animations-in-photoshop/

6. [ OPTIONAL: Same as Last Week ] Adobe Photoshop CC animation and video timeline. URL: https://youtu.be/WTIKj0xVg64

DO ::

• Modify/Complete GIF Face • Create a 10-20-second Movie for the Hero Position of Your Website

[Film in Landscape Mode]

SEE HOMEWORK PAGE FOR COMPLETE DETAILS

BRING :: P-1 / P-2 [ working ]

1 Completed GIF Face

2 Video Capture for Facebook Cover Video (Landscape Mode, Minimum: 1280w x 720h)

3 Thumbdrive

multimedia web design class notes - iris.nyit.eduiris.nyit.edu/~dmyrick/dgim759/docs/class3.pdf ·...

Documents