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.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.
Related download
- object optimization citrix virtual apps
- graph export — export current graph
- how to convert gif jpg jpeg png bmp to flash
- adobe fireworks cs4 h ow tos
- adobe imageready version
- avs4you programs help
- macromedia flash 5 tutorial from xiaohong qiu
- oswestry borders u3a older people determining their own
- guidance notes for students
- cws 2 8 annex ii in english wipo
Related searches
- new york board of education
- new york dept of treasury
- new york board of nursing endorsement
- new york state of nursing
- new york board of nursing application
- new york board of nursing application form
- new york secretary of state business search
- new york division of corporations search
- new york division of corporations
- new york secretary of state corporations
- new york state of professional license
- new york department of treasury