MULTIMEDIA WEB DESIGN

Transcription

1 CLASS :: Hours THE AGENDA HOMEWORK 1 REVIEW [ Upload to Comm Arts Server ] :: Completed Questionnaire :: Best Works [Saved to Server] GIF ANIMATION DEMO :: Best Practices for GIF Animations o Import Video & Manipulate o Import Photos & Manipulate o Import Illustrations & Manipulate o Frame vs. Timeline Animation o Exports & Publishing PS WORKSPACE & SHAPE TOOLS :: Set-Up Photoshop Workspace :: Resizing the Canvas :: Intro to Tools, Options, & Panels :: General Rules for Creating Shapes :: Pixels, Rulers, & Guides :: Layers, Shapes, & Fills :: Organizing/Grouping/Naming Layers :: Manipulating Shapes with Selection Tool :: Saving a Custom Shape :: Creating Custom Shapes with the Pen Tool [Demo] :: Punching Holes in Shapes [Subtract Front Shape] 1

2 :: Questionnaire Turn-In :: Set-Up Student Folder HOMEWORK 1 REVIEW [ Turn-In ] 1. Go To Comm Arts Server 2. Open the _DGIM759 Folder 3. Create a New Folder 4. Right-Click and Rename the New Folder (with Your Name/Nickname/Industry Name) NOTE: Please use English Character Set when naming folders 5. Open Your Folder 6. Create 2 Folders: a. PSD b. AI c. yourwebsitename.com 7. Open the PSD Folder 8. Inside the PSD Folder, create a New Folder named Best Works 9. Save Your Best Works inside the Best Works folder 2

3 3

4 GIF ANIMATIONS DEMO :: Best Practices for Gif Animations STEPS & ASSETS :: STEPS: 1. IMPORT 2. WORK 3. EXPORT Videos [.mp4,.mov, etc.] ASSETS: Photos [.jpeg,.png, etc.] Photoshop CC Save for Web Save as a GIF Illustration [.ai,.png, etc.] BASIC STEPS FOR GIF ANIMATION: a. Understand Requirements for Project [File Dimensions(pixels), File Size(MB), File Duration(seconds)] b. Sketch your Ideas [Thumbnail Story Board] c. Choose Your Medium [Photo, Video, Illustration, Multimedia] d. Create Footage or Objects e. Import into Photoshop [If Illustrator is used export PSD from Illustrator] f. Use Frame or Timeline Animation g. Manipulate Frames or Layers [ Effects, Filters, Position, Rotate, Scale, Opacity, etc. ] h. Test Gif i. Export Gif 4

5 1. Import Videos & Manipulate TYPES OF VIDEOS THAT MAY BE IMPORTED: URL: Photoshop allows you to convert a video to an animated gif (graphic interchange format). You may use Frame or Timeline animation to create your gif. FRAME ANIMATION: The number of frames allowed for gifs (made with Frame animation) is limited to 500 frames. The typical video is 24 frames per second (fps) or 30fps. MAXIMUM video time for :: 1. 30fps video = 16+seconds 2. 24fps video = 20+seconds 1. Open Photoshop 2. File > Import > Video Frames to Layers 3. Option: Trim Video, Skip Frames (at intervals), etc. 4. Crop Canvas 5. Add Animation using Frame or Timeline Animation 6. Export Gif TIMLINE ANIMATION: Timeline Animation is not limited by a number of frames; however, it is important to limit the amount of frames in order to keep the file size low (large file sizes slow down the gifs performance in the browser) Suggested Time = 10 seconds or less Suggested File Size = 7MB or less *Times and File size based on computer performance 7. Open Photoshop 8. Go To Menu Bar > File > Open > [ Select Your Video File ] 9. Go To Menu Bar > Window > Timeline 10. Click Create Video Timeline Button 11. Add Animation using Timeline Animation Properties 12. Export Gif 2. Import Photos & Manipulate Photoshop allows you to import and manipulate multiple photos to create an animated gif The number of frames allowed for gifs (using this method) is limited to 500 frames. Photos may need to be resized if file size is too large to process. Photos may need to be cropped or composed to eliminate unwanted items/add wanted items. Each frame may be edited to suit your design. 1. Open Photoshop 2. Go To Menu Bar: File> Scripts> Load Files into Stack 3. Browse to Location Where Photos are Stored, Click Wanted Checkbox Options> OK 5

6 4. Align Images 5. Crop Canvas 6. Go To Menu Bar: Window>Timeline> Create Timeline BTN 7. Convert to Frame Animation [If not active by default] 8. Add Animation using Frame or Timeline Animation 9. Export Gif 3. Import Illustrations & Manipulate Photoshop allows you to import and manipulate Illustrated images to create an animated gif The number of frames allowed for gifs is limited to 500 frames. You may use: a. Hand drawn or painted art [scan on a high-resolution scanner], then follow steps for Importing Photos b. Vector/pixel based art created in Illustrator, Photoshop, etc. [SEE BELOW] NOTE: You may export separate layers from Illustrator(.ai) files by saving the Illustrator document as a Photoshop document (.psd). Each frame may be edited to suit your design. You may animate layers to create 2D animation. 1. Open Photoshop [Open saved.psd if exported from Illustrator(.ai)] 2. Create New File [If not already opened] 3. Resize Canvas 4. Go To Menu Bar: Window>Timeline> Create Timeline BTN 5. Convert to Frame Animation [If not active by default] 6. Add Animation using Frame or Timeline Animation 7. Export Gif 6

7 PS WORKSPACE & SHAPE TOOLS :: Set-Up Photoshop Workspace STEP DESCRIPTION ACTION SHORTCUT KEY [Win] [Mac] 1 Open New File File > New [Ctrl +N] [cmd+n] 2 Enter file settings as follows a. Enter File Name: YourInitials_gifface b. Width: 480 Pixels Height: 600 Pixels Resolution: 72 Pixels/Inch (NOTE: Screen/Web Resolution) c. Color Mode: RGB (NOTE: Screen/Web Color Mode) d. Background Contents: Transparent e. Click OK 7

8 :: Resizing the Canvas STEP DESCRIPTION ACTION a. Menu Bar > Image > Canvas Size b. Change height, width, or both SHORTCUT KEY [Win] [Mac] 3 Resize the Canvas c. To ADD pixels equally to surrounding sides, > Click OK d. To ADD pixels to the BOTTOM: 1. Press UP ARROW: 2. Click OK e. To ADD pixels to the TOP, press DOWN ARROW, > Click OK f. To ADD pixels to the LEFT, press RIGHT ARROW, > Click OK g. To ADD pixels to the RIGHT, press LEFT ARROW, > Click OK 8

9 :: Intro to Tools, Options, & Panels NOTE: When a tool is chosen, the TOOL OPTIONS displays the options available for the selected tool. You may customize tool settings in either the TOOL OPTIONS. When Using the Shape Tool, In addition to the TOOL OPTIONS, the PROPERTIES panel appears. You may change a shapes properties in the Properties Panel. 9

10 :: General Rules for Creating Shapes a. Set Up New Guides b. Create a New Layer c. Go to Toolbar > Select the Rectangle Tool (U) d. Select the Shape You Wish To Create e. Change Options in Toolbar Option: (Fill, Stroke, Line Thickness, Radius, Height/Width, etc.) f. Either Click on the Canvas (for shapes with defined measurements) OR Click + Drag Your Mouse on Canvas to Create Shape g. Change Size of Shape in Toolbar Option: [ Height (H) and Width (W) ] h. Name the New Layer According To Its Purpose in Your Design UNDO MISTAKES: 1. [ Ctrl+Z ] PC / [ cmd+z ] Mac 2. To UNDO 2+ mistakes [ alt+ctrl+z ] PC / [ alt/option+cmd+z ] Mac 3. Go to Menu Bar > Edit > Undo State Change OR Step Backward(For 2+ mistakes) FIND LAYERS PANEL: If you can t find the Layers Panel, View it by performing one of the following actions: 1. Go to Menu Bar > Window > Layers 2. [ F7 ] PC / [ fn+f7 ] Mac DUPLICATE SHAPES: 1. Right-Click Layer (in Layers Panel) Duplicate 2. Go to Menu Bar > Layer > Duplicate Layer 10

11 :: Pixels, Rulers, & Guides STEP DESCRIPTION ACTION SHORTCUT KEY [Win] [Mac] 4 Set Up Rulers in Pixels a. Go to Menu Bar > View > Rulers b. Change to Pixels: Hover mouse over Ruler > Right-Click > Pixels [Ctrl+R] [cmd+r] NOTE: You may Show/Hide Rulers with the Shortcut Key [Ctrl+R] or [cmd+r] 11

12 a. Go to Menu Bar > View > New Guide Layout 5 Set Up Center Guides b. Go To Menu Bar > View > Lock Guides NOTE: You may Show/Hide Guides with the Shortcut Key [Ctrl+; ] or [cmd+;] :: Layers, Shapes, & Fills STEP DESCRIPTION ACTION 6 Create New Layer There are 4 Ways to Create New Layers. Below are two ways: 1. Go to Menu Bar > Layer > New > Layer 2. Locate the Layers Panel At the bottom of the Layers Panel, Locate the Create New Layer Button: SHORTCUT KEY [Win] Shift + Ctrl + N [Mac] Shift + command + N 7 Create Shapes (Using the Shape Tool) Locate the Shape Tool and Draw the Shapes Listed: NOTE: Remember to put each shape on its own layer YOU SHOULD HAVE 6 LAYERS 12

13 (Hold Shift to Keep Height & Width in Proportion ( constrain ) a. Rectangle (Hold Shift for Square) b. Rounded Rectangle (Hold Shift for Rounded Square) c. Ellipse (Hold Shift for Circle) d. Polygon e. Line f. Custom Shape [shapes available in TOOL OPTIONS] 8 Layer Order & Moving Layers NOTE: The Rectangle 1 Layer is at the bottom of the Layers Panel. The layer order in the panel correlates to the layers on the canvas. The Bird is above all on the Canvas and the Layers Panel a. Change the layer order by clicking the layer in the Layers Panel, and moving it to its new layer order b. To move the layer s position on Canvas [Move Tool]: 1. Select the Layer > Move with Mouse or Arrow Key 2. OR Go to Move [V] TOOL OPTIONS > Enable Auto Select > Coose Layer Option > Move Layer with Mouse [V] [V] 13

14 9 Change Fill, Strokes, and line styles a. Select the Shape Layer you wish to change b. Go to Tool Bar > Select the Shape Tool or Click [U] c. Go to Tool Options Bar and Select new fill color d. Select new stroke color e. Select new line weight f. Select new line type [U] [U] You may also manipulate gradients: 10 Save Document h. Save As (or Save): YourInitials_shapes.psd [Ctrl+S] [cmd+s] 14

15 :: Organizing/Grouping/Naming Layers STEP DESCRIPTION ACTION SHORTCUT KEY [Win] [Mac] 11 Rearrange Layer Order [Again] a. Select the Circle Layer > Move it beneath all other Layers b. Double-Click the Layer Name > Rename DOME 12 Grouping Layers a. Create a Square Layer > Name the Layer BASE b. Hold Shift > Click the Dome + Base Layer c. Group the Layers by: [Ctrl+G] [cmd+g] 1. Clicking the Layer Options Button > Choose > New Group from Layers or 2. [ Ctrl+G ] / [ cmd+g ] 3. Rename Group KEYHOLE 15

16 :: Manipulating Shapes with Transform & Selection Tool STEP DESCRIPTION ACTION SHORTCUT KEY [Win] [Mac] 13 Transform a. Transform a shape s height, width, and rotation using Free Transform [cmd + T] OR Go To Menu Bar > Edit > Free Transform NOTE: 1. To Preserve your shape s proportions (constrain), Hold Shift + Drag one corner of the transform controls to make your shape bigger or smaller. 2. To constrain your shape AND keep it s center position on the canvas Hold Shift + Alt + Drag one corner of the transform controls to make your shape bigger or smaller. b. Transform the orientation of a Shape by using the Transform Tool [ cmd + T ], hover over the shape, Right-Click and Choose the tool of your choice. OR Go To Menu Bar > Edit > Transform and choose from the following: 16

17 14 Direct Selection Tool [A] a. Change a Shape s contour by using the Direct Select Tool. The direct selection tool allows you to edit paths/points on a shape. b. Select Any Shape Layer c. Click [A] or go to Toolbar > Selection Tool > Choose Direct Selection Tool: [A] [A] d. Note the anchor points shown on the Shape e. Click a point and use the Mouse or Arrow (nudge keys) to manipulate the anchor points f. You may convert a straight path to a curved path by choosing the Convert Point Tool > Select an Anchor Point > Manipulate with Mouse or Nudge (Direction Arrow) Keys g. You may convert a curved path to a straight path by Double-Clicking an Anchor Point with the Convert Point Tool DEMO and follow (See short tutorial here) URL: 17

18 :: Saving a Custom Shape STEP DESCRIPTION ACTION SHORTCUT KEY [Win] [Mac] 15 Save Shapes You Created into the Custom Shape Library a. Choose the Shape Layer you wish to Save b. Go to Menu Bar > Edit > Define Custom Shape c. Name Your Shape d. Go to TOOLBAR OPTIONS > Click Dropdown Menu for Custom Shapes > Scroll to Bottom > View Your New Shape e. Select Shape and Draw it on the Canvas :: Creating Custom Shapes with the Pen Tool [Demo] STEP DESCRIPTION ACTION SHORTCUT KEY [Win] [Mac] 16 [ Pen Tool Demo ] The Pen Tool is the most powerful tool in Adobe Photoshop (and Illustrator) for creating custom shapes. NOTE: Are you familiar with Connect the Dots? In Photoshop a shape consists of anchor points & lines drawn between the anchor points (by the software). You may create anchor points on the canvas, and Photoshop will draw lines between the anchor points you create. Once you have drawn your custom shape using the pen tool, you may manipulate shapes with the Direct Selection Tool, Convert Point Tool, and Transform Tool. General Rules for the Pen: 1. Click [P] to activate or choose the Pen Tool from the Toolbar: 2. To create straight paths, Point-Click-Release, to create anchor points. 3. To create curved paths, Point-Click-Hold+Drag The Pen Tool Tutorial URL: 18

19 :: Punching Holes in a Shape [Subtract Front Shape] STEP DESCRIPTION ACTION SHORTCUT KEY [Win] [Mac] 17 Create an Opening on a Shape (This is good for creating Windows and Doors) a. Create a Rectangle Layer > Name it Wall b. Create 3 Circles c. Ensure the Wall Layer is BELOW the Circle Layers d. Go to Menu Bar > Layer > Combine Shapes > Subtract Front Shape e. Rename the Layer WALL 19

20 HW-2 Homework DUE :: REVIEW :: 1. Adobe Photoshop Help Reference//CHAPTER 12: Drawing and Painting URL: 2. Shape Tool Tutorial URL: 3. The Pen Tool Tutorial URL: 4. Adobe Photoshop CC animation and video timeline. URL: DO :: Gather Assets for Your Gif Face Project (Choose One): o o o o o For Movie: Ensure it is 7 seconds or less [based on frame rate/file properties] Know which frames you will treat with filters, shapes, effects, etc. For Photos: Ensure you have at least 8 images: Know which frames you will treat with filters, shapes, effects, etc. Hand Created Images: Ensure images are scanned with high-resolution scanner and saved to your flash drive Vector Illustration: Ensure.ai is exported as a.psd Know which frames you will treat with filters, masking or cloning objects, effects, etc. Create Background or objects you wish to include in your project [*optional: based on design] SEE ASSIGNMENTS PAGE FOR COMPLETE DETAILS BRING :: HW-2 1 Gif Assets [Saved on flash drive] 2 Sketchbook 20