AGENDA. :: Homework Upload. :: Photoshop Lesson 4: Creating a PSD Wireframe [Homepage] I. DOCUMENT SET-UP: II. DRAWING SHAPES III.

Transcription

1 CLASS :: 04 MULTIMEDIA TOOLS :: CLASS NOTES AGENDA :: Homework Upload [ A-2 ] Ultimate Composite! Upload A-2 Project to Student PSD Folder :: Photoshop Lesson 4: Creating a PSD Wireframe [Homepage] I. DOCUMENT SET-UP: a. Dimensions & Rulers b. Sections and Guides II. DRAWING SHAPES a. Organizing Content/Folders b. Rectangle (Square) & Ellipse (Circle) Tool c. Creating Placeholder Images & Using Clipping Masks d. Text & Toolbar Options e. Text Box & Character Panel f. Duplicating Layers & Groups III. HOMEWORK REVIEW Revised

2 Photoshop Lesson 4: Creating a PSD Wireframe [Homepage] Today you will design a wireframe for your homepage using Photoshop. This wireframe will serve as a layout reference of your future live website. Revised

3 :: DOCUMENT SET-UP For design purposes, your mock-up measurements will be based on the most popular screen size for web devices used worldwide: 1366px X 768px [ SOURCE URL: ] In the future, you will design your website to display on screens larger and smaller than 1366px X 768px. For this reason, you will capture/design and treat high-resolution images in a separate Photoshop document, then import those images into your mock-up for your midterm project. Step# Description Action Shortcut Key (Win) (Mac) 1 Set-Up Workspace Dimensions and Resolution a. Open Photoshop CC b. Create a New Document: [Ctrl+N] [cmd+n] Width: 1366 pixels Height: 2760 pixels (768px * px footer) Resolution: 72 pixels/inch c. Click OK NOTE: If you need to change your canvas size: 1. Go to Menu Bar> Image > Canvas Size 2. Change height, width, or both [See Next Page] Revised

4 Step# Description Action Shortcut Key (Win) (Mac) 3. To ADD pixels equally to surrounding sides: Click OK 4. To ADD pixels to the BOTTOM: [Click] UP ARROW > Click OK 5. To ADD pixels to the TOP: [Click] DOWN ARROW > Click OK 6. To ADD pixels to the LEFT: [Click] RIGHT ARROW > Click OK 7. To ADD pixels to the RIGHT: [Click] LEFT ARROW > Click OK 2 Activate Document Rulers a. Turn on Rulers: [Ctrl+R] OR [command+r] OR Go to Menu Bar> View > Rulers b. Ensure Ruler is set to Pixels: Hover Over Ruler measurements > Right-Click Ruler > Choose Pixels [Ctrl+R] [cmd+r] Step# Description Action Shortcut Key Revised

5 (Win) (Mac) 3 Create Guides MAIN GUIDES: a. Go to Menu Bar > View > New Guide Layout b. Add Values (Same as Figure Below) [Ctrl+N] [cmd+n] c. Click OK NOTE: If you need to add additional guides: VERTICAL GUIDES: d. Go to Menu Bar > View > New Guide Orientation: [Check] Vertical Position: Enter % OR pixels Click OK HORIZONTAL GUIDES: e. Go to Menu Bar > View > New Guide Orientation: [Check] Horizontal Position: Enter % OR pixels Click OK MANUAL SET GUIDES: f. Hover Over Ruler Section > Left-Click + Drag Guide to Desired Location] LOCK GUIDES: g. Go to Menu Bar > View > Lock Guides HIDE/SHOW GUIDES: h. [ Ctrl + ; ] OR [ command + ; ] :: DRAWING SHAPES Revised

6 You will learn how to draw shapes in Photoshop using the shape tool (U). You will name and organize shapes to complete your Photoshop wireframe assignment. Step# Description Action Shortcut Key (Win) (Mac) 1 Organizing Content/Folders a. Ensure each layer has a name: 1. If you create a box to represent the navigation, you may name the rectangle layer navigation bar 2. You will use Xs to represent future images. Name all placeholder image layers according to function (logo.png, header-image.jpg, ) 3. In Ps CC, you may give one image layer multiple names (generates files based on image sizes, & alpha)* *future lesson b. Layers should be arranged in order of appearance on your webpage (when possible) c. To simplify working in your document, organize layers into groups based on function ( i.e. a group folder named HEADER may have a header background rectangle layer, text layer to represent a navigation menu, and a logo placeholder shape) Revised

7 2 OVERVIEW: Shape Tool BASIC STEPS FOR CREATING SHAPES a. Create a New Layer b. Go to Toolbar > Select the Shape Tool [U] c. Select the Shape You Wish To Create d. Change Options in TOOLBAR OPTIONS: (Fill, Stroke, Line Thickness, Radius, Height/Width, etc.) e. Either Click on the Canvas (for shapes with defined measurements) OR Click + Drag Your Mouse on Canvas to Create Shape f. Change Size of Shape in Toolbar Options [ Height (H) and Width (W) ] OR the Properties Panel g. Name the New Layer According To Its Purpose in Your Design. TYPES OF SHAPES (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 (Change # of sides in TOOL OPTIONS) e. Line f. Custom Shape [shapes available in TOOL OPTIONS] URL: Revised

8 Create a hero image placeholder [rectangle]: a. Choose Rectangle Tool [U] b. On Canvas, [Click + Drag], then Release [Activates Properties Panel] Enter Values in panel as follows: [U] [U] W: 1366px H: 768px X: 0 Y: 0 Click Select shape fill type button > Choose White from Color Picker Create X Shape with Line Tool [X = future image]: a. Choose Line Tool [U]/5 th Option In tool bar options: Stroke: Black Weight: 3px b. Move mouse to upper left corner [0,0] c. [Click+Drag] mouse to bottom-right of white rectangle [ X: (over)1366px, Y: (down) 768px ] d. Click the Shape 1 Layer > Right-Click > Duplicate Layer > Click OK e. Transform and Flip Horizontally (to create X): [U] [Ctrl+T] [U] [cmd+t] Click [Ctrl+T] > Hover over Line on Canvas > Right-Click > Choose Flip Horizontal OR Go to Menu Bar > Edit > Transform > Flip Horizontal f. [Click] Enter/Yes to apply Transformation > [Click] Yes (If prompt appears): Revised

9 Group Shapes & Name Hero Image MERGE LAYERS: [Ctrl+E] [Cmd+E] a. [Hold Shift + Select]: Shape 1 and Shape 1 Copy b. Right-Click > Select Merge Shapes [Cmd+E] c. Double-Click the Layer Name Shape 1 Copy and Rename X d. [Hold Shift + Select]: X and Rectangle 1 e. [Click Ctrl+G] to Group the Layers f. Double-Click the folder name Group 1 and Rename placeholder_hero.jpg Generate Assets & Save the Document Photoshop CC is capable of exporting image layers or groups as image files. To do so: Save the Document in your PSD folder: File > Save As > Browse to PSD folder > Name yourinitials_wireframe.psd > Save GENERATE ASSETS: SOURCE URL: a. Ensure the layer or group name contains no spaces and has an image file extension (.jpg,.png,.gif) b. Create an empty layer (above placeholder group) named: default images/ DON T FORGET THE FORWARD SLASH c. Go to Menu Bar > File > Generate > Image Assets Revised

10 d. A folder will be created inside of the same folder your.psd is located with the same filename as your Photoshop file, followed by -assets e. Inside that folder will be an images folder with the saved images OVERVIEW: Text & Toolbar Options TEXT TOOL [ Single Line Text ]: a. Choose Text Tool [ T ] b. Click ONCE away from shapes c. Go To TOOL OPTIONS d. Choose Font Color & Size e. Type Words f. Modify Text [ Menu Bar > Window > Character ] g. Choose Move Tool h. Move Text to desired location [ T ] [ T ] TEXT BOXES [ for paragraphs ]: a. Choose Text Tool [ T ] b. [ Click + Drag ] a Text Box c. Go To TOOL OPTIONS d. Choose Font Color & Size e. Type Words f. Modify Text [ Menu Bar > Window > Character ] g. Modify box size with transform tool [ Ctrl+T ] [Ctrl+T] [cmd+t] 4 Create Horizontal Navigation: a. Go to Menu Bar > Layer > New > Layer b. Choose Text Tool [ T ] c. Click on Canvas (Away from other Objects) d. Type: [T] [T] Home [Click Tab Key 2x] Works [Click Tab Key 2x] About [Click Tab Key 2x] Contact [Click Tab Key 2x] e. Go To TOOL OPTIONS: Choose Font Type Choose Font Size f. Place Navigation in upper right corner of canvas (SEE IMAGE IN LEFT COLUMN) Revised

11 5 Create Logo Placeholder a. Create a New Layer b. Go to Toolbar > Select the Shape Tool (U) > 3 rd Option > Ellipse Tool c. Move mouse to Canvas Area (Away from other shapes) d. Hold Shift + [Click and Drag] to create a circle e. Move circle to upper left area on Canvas f. Name the Ellipse 1 layer: placeholder_logo.png Revised

12 Step# Description Action Shortcut Key (Win) (Mac) 6 Group Layers & Groups into a Parent Group a. [Hold Shift + Select] the following layers/groups: b. [Click Ctrl+G] to Group the Layers/Groups c. Double-Click the folder name Group 1 and Rename HEADER 7 Create the Works Section in Mock-Up: Go To New Guide Layout and divide the page into 3 columns [Zero out the other values]: This Step = Gray Background a. Create a New Layer b. Select Shape Tool / Rectangle Option [U]: Revised

13 c. Make Rectangle 1/3 the width of your canvas d. Make height 768px e. Make the Rectangle white f. Rename the Layer bg_thumbnail1 d. Place an existing placeholder image (X) into your document (above the bg_thumbnail layer) e. Go to Menu Bar > File > Place Embedded f. Browse to: placeholder_hero.png g. Hit Enter [Return] to accept image placement h. Ensure the placeholder is located above bg_thumbnail1 i. Rename the placeholder_hero > X j. Right-Click > X k. Select Create Clipping Mask Revised

14 8 Create a Works Thumbnail: l. Free Transform [Ctrl/Cmd+T] X Layer to display correctly m. Group the X and bg thumbnail1 layer: [Hold Shift + Select Layers], then Click [Ctrl+G] (PC) OR [command+g] (PC) This Step = Creating The Image Thumbnail [X box] Placeholder for Works One only n. Rename Group 1 thumb1.jpg 9 Create a New Text Layer for the Title of the Thumbnail a. Create a New Layer b. Go to Toolbar > Text Tool [ T ] > c. Click on Canvas (Away from Shapes) d. Type Works One e. In TOOL OPTIONS, choose font & size f. Click Move Tool > Ensure Auto-Select is checked > Layer Option This Step = Adding WORKS ONE title for thumbnail one g. On the Canvas, Move WORKS ONE Text Layer under the thumb1.png placeholder 10 Create a New Text Box for description of work This Step = creating caption for thumbnail one a. Create a New Layer b. Go to Toolbar > Text Tool [ T ] > c. (Under the Title) [Click+Drag] on Canvas d. Inside the bounding box, place your cursor e. Insert placeholder text: Go to Menu Bar > Type > Paste Lorem Ipsum f. In TOOL OPTIONS, choose font & size g. Open Character Panel [ Window > Character ] to change the leading and tracking of your text h. You may resize the bounding box using the transform controls Revised

15 MORE TEXT OPTIONS 11 Create a Custom more Button for Hyperlinking to your future works page i. Create a New Layer j. Select Any Shape/Shapes k. Name the Layer btn_more.png OPTIONAL: If you want text in your more button, Create a new Text layer & type MORE If your more button requires more than one layer, group the layers making up the button, then Name the group folder btn_more.png (SEE NEXT PAGE) Revised

16 12 Group the Thumbnail, Supporting Text, & More Button into one folder Group the Layers Shown Below: a. [Hold Shift + Select Layers], then Click [Ctrl+G] (PC) OR [command+g] (PC) b. Rename Group 1 WORKS ONE NOTE: In class students named: WORKS ONE (above); THUMBNAIL ONE The organization of the folders and layers are relevant; the names of them are interchangeable Create 2 More Works Groups a. In Layers panel, Select WORKS ONE group b. Right-Click > Duplicate Group c. Edit Name > Click OK d. Select WORKS TWO and repeat steps b & c: Duplicate As: WORKS THREE 14 Move WORKS TWO and THREE to proper location on canvas a. Select the Move Tool b. Change the TOOL OPTIONs from Auto-Select Layer to Auto-Select Group c. In the Layers panel, Select WORKS TWO and nudge to the center of the canvas [Shift + Right Arrow Key ] d. Repeat steps to align WORKS THREE to the right Revised

17 e. On Canvas, Use the Text Tool [T] to rename WORKS ONE WORKS TWO and WORKS THREE respectively. You must select the Move tool [V] after each text change (to avoid continued typing ) 15 Group WORKS ONE, WORKS TWO, WORKS THREE, & the BG_works Layer into a group folder a. [Hold Shift + Select]: WORKS ONE, WORKS TWO, WORKS THREE, and BG_Works Layer b. Click [Ctrl+G] to group c. Rename Group 1, WORKS 16 Create the About and Footer Content With the tools you have learned, Create the About and Footer Section. [ Reference the Figure on the Next Page ] Revised

18 FIGURE: About Section [Similar to the WORKS Section] FIGURE: Footer [Similar to the HEADER Section] FIGURE: Folder Organization Revised

19 HOMEWORK: REVIEW :: 1. Class 4 Notes 2. Pages 5 6 of Paletton Instructions [Downloading a Color Palette.aco OR.png from paletton.com] 3. Good vs. Bad Logos 4. Watch Shapes Tutorials: URL: How To Use The Shape Tool How To Create a Flat UI Style Button in Photoshop CC The Pen Tool Drawing Custom Shapes DO :: 1. Complete PSD Wireframe 2. Create a Website Color Scheme Document in Photoshop 3. Create 3 Logo Sketches for your website BRING :: HW-3 1 Photoshop Wireframe PSD 2 Color Scheme PSD [.aco file] 3 3 Logo Sketches 4 Images you wish to use for your website: [ Photo, projects, or other best works ] 5 USB 6 Sketchbook Revised