MULTIMEDIA WEB DESIGN CLASS NOTESiris.nyit.edu/~dmyrick/dgim759/docs/class2.pdf · MULTIMEDIA WEB...

MULTIMEDIAWEBDESIGN CLASSNOTES

1

CLASS :: 02

01.31

2020 4 Hours

“THE” AGENDA

HOMEWORK 1 REVIEW [ Upload to Comm Arts Server ] :: Completed Questionnaire 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]

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


2

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

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

[SEE FOLDER STRUCTURE ON NEXT PAGE]


3


4

PS WORKSPACE & SHAPE TOOLS

:: Set-Up Photoshop Workspace SHORTCUT KEY

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


5

:: Resizing the Canvas – FOR INSTRUCTION/DEMO ONLY SHORTCUT KEY


3 Resize the Canvas

a. Menu Bar > Image > Canvas Size b. Change height, width, or both

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


6

:: 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 shape’s properties in the Properties Panel.


7

:: 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. Go to Menu Bar > Edit > Undo State Change OR Step Backward 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 (Many ways to do it): 1. Right-Click Layer (in Layers Panel) Duplicate 1. Select Layer (in Layers Panel) > Go To Layer Options Button> Choose Duplicate Layer (or Group) 2. Go to Menu Bar > Layer > Duplicate Layer… 3. Choose Move Tool(V) >Go to Canvas> Hover Over Shape> Hold alt(option) + Click and Drag Shape

:: Pixels, Rulers, & Guides SHORTCUT KEY


4 Set Up Rulers in Pixels

a. Go to Menu Bar > View > Rulers b. Change to Pixels: Hover mouse over Ruler > Right-Click > Pixels NOTE: You may Show/Hide Rulers with the Shortcut Key [Ctrl+R] or [cmd+R]

[Ctrl+R]

[cmd+R]


8

5 Set Up Center Guides

a. Go to Menu Bar > View > New Guide Layout

b. Go To Menu Bar > View > Lock Guides NOTE: You may Show/Hide Guides with the Shortcut Key [Ctrl+; ] or [cmd+;]

:: Layers, Shapes, & Fills SHORTCUT KEY


6 Create New Layer There Are Many 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:

Shift + Ctrl + N

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…


9

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


10

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

You may also manipulate gradients:

[U]

[U]

10 Save Document

h. Save As (or Save): YourInitials_shapes.psd [Ctrl+S] [cmd+S]


11

:: Organizing/Grouping/Naming Layers SHORTCUT KEY


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:

1. Clicking the Layer Options Button > Choose > New Group from Layers…

or 2. [ Ctrl+G ] / [ cmd+G ] 3. Rename Group “KEYHOLE”

[Ctrl+G]

[cmd+G]


12

:: Manipulating Shapes with Transform & Selection Tool SHORTCUT KEY


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:


13

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:

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: http://youtu.be/VYn80kAPNDA

[A]

[A]


14

:: Saving a Custom Shape SHORTCUT KEY


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] SHORTCUT KEY


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: http://youtu.be/kkB2BN_Asog


15

:: “Punching Holes” in a Shape [Subtract Front Shape] SHORTCUT KEY


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”


16

GIF ANIMATIONS – DEMO :: Best Practices for Gif Animations

STEPS & ASSETS :: STEPS: 1. IMPORT 2. WORK 3. EXPORT

ASSETS:

Videos [.mp4, .mov, etc.]

Photos

[.jpeg, .png, etc.]

Illustration [.ai, .png, etc.]

Photoshop CC Save for Web… Save as a GIF

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


17

1. Import Videos & Manipulate TYPES OF VIDEOS THAT MAY BE IMPORTED: URL: https://helpx.adobe.com/photoshop/using/supported-file-formats-photoshop-cs6.html 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


18

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. Add Animation using Frame or Timeline Animation 6. Export Gif


19

Homework

HW-2 DUE :: 02.07

REVIEW ::

1. Adobe Photoshop Help Reference//CHAPTER 12: Drawing and Painting URL: https://helpx.adobe.com/pdf/photoshop_reference.pdf

2. Shape Tool Tutorial URL: https://youtu.be/nW_DV254CeU

3. The Pen Tool Tutorial URL: http://youtu.be/kkB2BN_Asog

4. Adobe Photoshop animation and video timeline. URL: https://youtu.be/WTIKj0xVg64

DO ::

Gather Assets for Your Gif Face Project (Choose One):

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.

o For Photos: Ensure you have at least 8 images: Know which frames you will treat with filters, shapes, effects, etc.

o Manipulated Images/Graphics: Ensure images are scanned with high-resolution scanner and saved to your flash drive

o Vector Illustration: Ensure .ai is exported as a .psd Know which frames you will treat with filters, masking or cloning objects, effects, etc.

o 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

MULTIMEDIA WEB DESIGN CLASS NOTESiris.nyit.edu/~dmyrick/dgim759/docs/class2.pdf · MULTIMEDIA WEB...

Documents

Transcript of MULTIMEDIA WEB DESIGN CLASS NOTESiris.nyit.edu/~dmyrick/dgim759/docs/class2.pdf · MULTIMEDIA WEB...