NYIT Logo (New York Institute of Technology)



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 |

|Import Video & Manipulate |

|Import Photos & Manipulate |

|Import Illustrations & Manipulate |

|Frame vs. Timeline Animation |

|Exports & Publishing |

|HOMEWORK 1 REVIEW [ Turn-In ] |

|:: Questionnaire Turn-In |

|:: Set-Up Student Folder |

|Go To Comm Arts Server |

|Open the _DGIM759 Folder |

|Create a New Folder |

|Right-Click and Rename the New Folder (with Your Name/Nickname/Industry Name) |

|NOTE: Please use English Character Set when naming folders |

| |

|Open Your Folder |

|Create 2 Folders: |

| |

|a. PSD b. AI c. |

| |

|Open the PSD Folder |

|Inside the PSD Folder, create a New Folder named “Best Works” |

|Save Your Best Works inside the “Best Works” folder |

| |

|[SEE FOLDER STRUCTURE ON NEXT PAGE] |

| |

| |

| |

| |

| |

| |

| |

| |

| |

|[pic] |

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

| | |

| |[pic] |

| | |

|:: Resizing the Canvas – FOR INSTRUCTION/DEMO ONLY |

|STEP |DESCRIPTION |ACTION |SHORTCUT KEY |

| | | |[Win] |[Mac] |

|3 |Resize the Canvas |a. Menu Bar > Image > Canvas Size | | |

| | |b. Change height, width, or both | | |

| | |[pic] | | |

| | | | | |

| | |c. To ADD pixels equally to surrounding sides, | | |

| | |> Click OK | | |

| | | | | |

| | |d. To ADD pixels to the BOTTOM: | | |

| | | | | |

| | |1. Press UP ARROW: | | |

| | |[pic] | | |

| | | | | |

| | |[pic] | | |

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

|:: Intro to Tools, Options, & Panels |

|[pic] |

| |

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

| |

|[pic] |

|:: General Rules for Creating Shapes |

| |

|Set Up New Guides |

|Create a New Layer |

|Go to Toolbar > Select the Rectangle Tool (U) |

|Select the Shape You Wish To Create |

|Change Options in Toolbar Option: (Fill, Stroke, Line Thickness, Radius, Height/Width, etc.) |

|Either Click on the Canvas (for shapes with defined measurements) OR |

|Click + Drag Your Mouse on Canvas to Create Shape |

|Change Size of Shape in Toolbar Option: [ Height (H) and Width (W) ] |

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

|STEP |DESCRIPTION |ACTION |SHORTCUT KEY |

| | | |[Win] |[Mac] |

|4 |Set Up Rulers in Pixels | | | |

| | |a. Go to Menu Bar > View > Rulers |[Ctrl+R] |[cmd+R] |

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

|5 |Set Up Center Guides | | | |

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

| | |[pic] | | |

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

| | | |[Win] |[Mac] |

|6 |Create New Layer |There Are Many Ways to Create New Layers. | | |

| | | |Shift + Ctrl +|Shift + |

| | |Below are two ways: |N |command + N |

| | | | | |

| | |Go to Menu Bar > Layer > New > Layer… | | |

| | |Locate the Layers Panel | | |

| | |At the bottom of the Layers Panel, Locate the | | |

| | |Create New Layer Button: | | |

| | |[pic] | | |

| | | | | |

|7 |Create Shapes |Locate the Shape Tool and Draw the Shapes Listed: | | |

| |(Using the Shape Tool) | | | |

| | |NOTE: Remember to put each shape on its own layer | | |

| | |YOU SHOULD HAVE 6 LAYERS… | | |

| | | | | |

| | | | | |

| | |[pic] | | |

| | |(Hold Shift to Keep Height & Width in Proportion (“constrain”) | | |

| | | | | |

| | |Rectangle (Hold Shift for Square) | | |

| | |Rounded Rectangle (Hold Shift for Rounded Square) | | |

| | |Ellipse (Hold Shift for Circle) | | |

| | |Polygon | | |

| | |Line | | |

| | |Custom Shape | | |

| | |[shapes available in TOOL OPTIONS] | | |

| | | | | |

|8 |Layer Order & |NOTE: | | |

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

| | |[pic] | | |

| | | | | |

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

| | | | | |

|9 |Change Fill, Strokes, and line |Select the Shape Layer you wish to change |[U] |[U] |

| |styles |Go to Tool Bar > Select the Shape Tool or Click [U] | | |

| | |Go to Tool Options Bar and Select new fill color | | |

| | |Select new stroke color | | |

| | |Select new line weight | | |

| | |Select new line type | | |

| | | | | |

| | |[pic] | | |

| | | | | |

| | |You may also manipulate gradients: | | |

| | |[pic] | | |

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

| | |h. Save As (or Save): YourInitials_shapes.psd | | |

|:: Organizing/Grouping/Naming Layers |

|STEP |DESCRIPTION |ACTION |SHORTCUT KEY |

| | | |[Win] |[Mac] |

| | | | | |

|11 |Rearrange Layer Order |Select the Circle Layer > | | |

| |[Again] |Move it beneath all other Layers | | |

| | |Double-Click the Layer Name > | | |

| | |Rename “DOME” | | |

| | | | | |

| | | | | |

|12 |Grouping Layers | | | |

| | |Create a Square Layer > Name the Layer “BASE” | | |

| | |Hold Shift > Click the “Dome” + “Base” Layer |[Ctrl+G] |[cmd+G] |

| | |Group the Layers by: | | |

| | | | | |

| | |1. Clicking the Layer Options Button > | | |

| | |Choose > New Group from Layers… | | |

| | | | | |

| | |[pic] | | |

| | | | | |

| | |or | | |

| | | | | |

| | |2. [ Ctrl+G ] / [ cmd+G ] | | |

| | |3. Rename Group “KEYHOLE” | | |

| | | | | |

| | | | | |

| | | | | |

| | | | | |

| | | | | |

| | | | | |

|:: Manipulating Shapes with Transform & Selection Tool |

|STEP |DESCRIPTION |ACTION |SHORTCUT KEY |

| | | |[Win] |[Mac] |

| | | | | |

|13 |Transform |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: | | |

| | | | | |

| | |[pic] | | |

| | | | | |

| | | | | |

| | | | | |

| | | | | |

| | | | | |

|14 |Direct Selection Tool [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.… |[A] |[A] |

| | |Select Any Shape Layer | | |

| | |Click [A] or go to Toolbar > Selection Tool > Choose Direct Selection Tool: | | |

| | | | | |

| | |[pic] | | |

| | | | | |

| | |Note the anchor points shown on the Shape | | |

| | |Click a point and use the Mouse or Arrow (nudge keys) to manipulate the | | |

| | |anchor points | | |

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

| | | | | |

| | |[pic] | | |

| | | | | |

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

|:: Saving a Custom Shape |

|STEP |DESCRIPTION |ACTION |SHORTCUT KEY |

| | | |[Win] |[Mac] |

| | | | | |

|15 |Save Shapes You Created into the |Choose the Shape Layer you wish to Save | | |

| |Custom Shape Library |Go to Menu Bar > Edit > Define Custom Shape… | | |

| | |Name Your Shape | | |

| | |Go to TOOLBAR OPTIONS > | | |

| | |Click Dropdown Menu for Custom Shapes > | | |

| | |Scroll to Bottom > View Your New Shape | | |

| | |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 ] |[pic] 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: | | |

| | | | | |

| | |Click [P] to activate or choose the Pen Tool from the Toolbar: | | |

| | | | | |

| | |[pic] | | |

| | | | | |

| | |To create straight paths, Point-Click-Release, | | |

| | |to create anchor points. | | |

| | | | | |

| | |To create curved paths, | | |

| | |Point-Click-Hold+Drag | | |

| | | | | |

| | |The Pen Tool Tutorial | | |

| | |URL: | | |

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

|STEP |DESCRIPTION |ACTION |SHORTCUT KEY |

| | | |[Win] |[Mac] |

| | | | | |

|17 |Create an Opening on a Shape (This |Create a Rectangle Layer > Name it “Wall” | | |

| |is good for creating Windows and |Create 3 Circles | | |

| |Doors) |[pic] | | |

| | | | | |

| | | | | |

| | |Ensure the Wall Layer is BELOW the Circle Layers | | |

| | |d. Go to Menu Bar > Layer > Combine Shapes > | | |

| | |Subtract Front Shape | | |

| | | | | |

| | |[pic] | | |

| | | | | |

| | |e. Rename the Layer “WALL” | | |

| | | | | |

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

| |

| |

| |

| |

| |

| |

| |

| |

| |

| |

| |

| |

| |

| |

| |

| |

| |

| |

| |

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

| |

|Open Photoshop |

|File > Import > Video Frames to Layers… |

|Option: Trim Video, Skip Frames (at intervals), etc. |

|Crop Canvas |

|Add Animation using Frame or Timeline Animation |

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

| |

|Open Photoshop |

|Go To Menu Bar > File > Open > [ Select Your Video File ] |

|Go To Menu Bar > Window > Timeline |

|Click Create Video Timeline Button |

|Add Animation using Timeline Animation Properties |

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

| |

|Open Photoshop |

|Go To Menu Bar: File> Scripts> Load Files into Stack… |

|Browse to Location Where Photos are Stored, Click Wanted Checkbox Options> OK |

| |

| |

|Align Images |

|Crop Canvas |

|Go To Menu Bar: Window>Timeline> Create Timeline BTN |

|Convert to Frame Animation [If not active by default] |

|Add Animation using Frame or Timeline Animation |

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

| |

|Open Photoshop [Open saved .psd if exported from Illustrator(.ai)] |

|Create New File [If not already opened] |

|Resize Canvas |

|Go To Menu Bar: Window>Timeline> Create Timeline BTN |

|Add Animation using Frame or Timeline Animation |

|Export Gif |

|HW-2 |Homework |

| |DUE :: 02.07 |

| |

|REVIEW :: |

|Adobe Photoshop Help Reference//CHAPTER 12: Drawing and Painting |

|URL: |

| |

|Shape Tool Tutorial |

|URL: |

| |

|The Pen Tool Tutorial |

|URL: |

| |

|Adobe Photoshop animation and video timeline. |

|URL: |

| |

|DO :: |

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

| |

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

| |

|Manipulated Images/Graphics: |

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

| |

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download