MULTIMEDIA WEB DESIGN

Transcription

1 CLASS :: 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 :: Hide/Show :: Position :: Opacity :: Effects (example: change Color Overlay fx) VIDEO TIMELINE ANIMATION :: Transform (Scale/Rotate) :: Animating Layer Mask :: Animating Vector Mask :: Animating Styles (example: change outer glow fx) SAVING GIFS :: Exporting/Saving for Web [.gif] :: Exporting/Rendering Video [.mp4] :: Setting Quality :: Testing Animation :: Size of File :: Save To Location :: Preview in Browser :: Edit for Mega Face (Hide Background)/Save [.gif,.psd ] CROPPING/SAVING MULTIPLE FORMATS :: DGIM 759 Student Work Page: [480px X 600px] :: Facebook [ 7seconds, Cropped to Square ] 1

2 :: Set-Up Student Folder HOMEWORK 1 REVIEW [ Turn-In ] 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 (Legacy) 2. Choose GIF 128 Dithered From Preset > Click Save Button 2

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.) 3

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 4

5 FRAME ANIMATION - IMAGES :: Set-Up Frame Animation [Photos and Image Assets] STEP DESCRIPTION ACTION SHORTCUT KEY [Win] [Mac] :: Import Images into Photoshop 1. Open Photoshop CC 2. Go To Menu Bar > File > Scripts > Load Files into Stack PREVIOUS STEP FOR MEDIA TYPE 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 5

6 FRAME ANIMATION - VIDEO :: Set-Up Frame Animation [ For Video Clip (500 Frames or Less) ] 1. Open Photoshop CC Go To Menu Bar > File > Import > Video Frames to Layers STEP FOR IMPORTING VIDEO MEDIA 2. Choose Options for the Import [Start & End points, Frame options, etc ] 3. Click OK 6

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 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 7

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 1 st 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: STEP DESCRIPTION ACTION SHORTCUT KEY [Win] [Mac] 1 Resave Your Document File > Save As > initials_gif-face-frame.psd a. At the bottom of the Frame Animation Panel, Shift + Ctrl + S Shift + cmd + S 2 Create a New Frame Click Frame 1, then Click the Duplicates selected frames Button 8

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 9

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:: 10

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: STEP DESCRIPTION ACTION SHORTCUT KEY [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 a. At the bottom of the Frame Animation Panel, click the Play button [ spacebar ] 11

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 a. At the bottom of the Frame Animation Panel, click the Play button [ spacebar ] 5 Save Document [Ctrl+S] [cmd+s] 12

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 STEP DESCRIPTION ACTION SHORTCUT KEY [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 13

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 ] 14

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 STEP DESCRIPTION ACTION SHORTCUT KEY [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 15

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 16

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) 17

18 VIDEO TIMELINE ANIMATION :: Set-Up Video Timeline Animation STEP DESCRIPTION ACTION NEW ANIMATION SHORTCUT KEY [Win] [Mac] :: Open Video into Photoshop SET-UP & PREP 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 18

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) STEP DESCRIPTION ACTION SHORTCUT KEY [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 Animate Style 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 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 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 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 19

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 STEP DESCRIPTION ACTION SHORTCUT KEY [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 2. Ensure the playhead is at your designated start point (on timeline) 3. In the Timeline Panel, Click the Layer you wish to animate 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: Ensure the keyframe diamond icon appears 20

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 STEP DESCRIPTION ACTION SHORTCUT KEY [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 21

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 ]: 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 22

23 FACEBOOK REQUIREMENT STEP DESCRIPTION ACTION SHORTCUT KEY [Win] [Mac] 1 Crop Your Document to Square [ 480 x 480 ] 1. Go To File > Save As > YourInitials_Facebook_profile.mp4 C [Option 1] C [Option 1] 2. Go To Tool Bar and Choose Crop Tool 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 23

24 HW-3 Homework DUE :: REVIEW [For Gif Face] :: 1. Adobe Photoshop Help Reference//CHAPTER 14 [ pp ]: Video and Animation URL: 2. Creating Masks to Move Over Time in Photoshop CS6 URL: 3. Transforming Layers Over Time in Photoshop CS6 URL: 4. How to Pan and Zoom Video in Photoshop CS6 URL: 5. Creating Advanced Animation in Photoshop URL: 6. [ OPTIONAL: Same as Last Week ] Adobe Photoshop CC animation and video timeline. URL: DO :: Modify/Complete GIF Face View Public Figure/Brand Pages and Bring in An Idea for Your Public Figure Page Create a 20 second Movie for Your Public Figure Facebook Page [ Cover Video Feature ] [Film in Landscape Mode] SEE HOMEWORK PAGE FOR COMPLETE DETAILS BRING :: P-1 / P-2 [ working ] 1 Completed GIF Face 2 Idea for Facebook Public Figure Page [PROJECT-2] 3 Video Capture for Facebook Cover Video (Landscape Mode, Minimum: 1080w x 720h) 4 iphone or Android 5 Cable to transfer video from Photoshop to Your Smart Phone [iphone/android] 24