CLASS :: 04 02.15 2017 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 02.15.2017 1
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 02.15.2017 2
:: 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: http://www.w3schools.com/browsers/browsers_display.asp ] 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 * 3 + 456px 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 02.15.2017 3
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] Revised 02.15.2017 4
Step# Description Action Shortcut Key (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 + ; ] Revised 02.15.2017 5
:: DRAWING SHAPES 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 02.15.2017 6
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: http://www.dummies.com/software/adobe/photoshop/thecustom-shape-tool-in-photoshop-cc/ Revised 02.15.2017 7
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 02.15.2017 8
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: http://youtu.be/z4du87m9yyq 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 02.15.2017 9
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 02.15.2017 10
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 02.15.2017 11
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: a. Create a New Layer b. Go to Toolbar > Select the Shape Tool [U] > 1 st Option > Rectangle Tool This Step = Gray Background On Canvas, [Click + Drag], then Release [Activates Properties Panel] Enter Values in panel as follows: W: 1366px [Click TAB] H: 768px [Click TAB] X: 0 px [Click TAB] Y: 768 px [Click TAB] c. Click Select shape fill type button > Choose a Pale Gray from Color Picker Revised 02.15.2017 12
d. Rename the Rectangle Layer BG_works e. Lock the layer : [Click the padlock - near top of layers panel] Step# Description Action Shortcut Key (Win) (Mac) 8 Create a Works Thumbnail: Go To New Guide Layout and divide the page into 3 columns [Zero out the other values]: This Step = Creating The Image Thumbnail [X box] Placeholder for Works One only a. Create a New Layer b. Select Shape Tool / Rectangle Option: c. Draw on Canvas (You may edit the size to your liking in the properties panel, or by using the Freeform Transform Tool [Ctrl+T]): Revised 02.15.2017 13
d. Rename the Rectangle Layer bg_thumbnail1 PLACE the image placeholder image in new 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 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) 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 Revised 02.15.2017 14
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 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 Revised 02.15.2017 15
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 02.15.2017 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... 13 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 Revised 02.15.2017 17
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 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 02.15.2017 18
FIGURE: About Section [Similar to the WORKS Section] :: MULTIMEDIA TOOLS :: CLASS NOTES FIGURE: Footer [Similar to the HEADER Section] FIGURE: Folder Organization Revised 02.15.2017 19
:: MULTIMEDIA TOOLS :: (2473) :: CLASS NOTES HOMEWORK: REVIEW :: 1. Class 4 Notes 2. Pages 5 6 of Class 1 Notes [Downloading a Color Palette from paletton.com] 3. Good vs. Bad Logos 4. Watch Shapes Tutorials: URL: http://iris.nyit.edu/~dmyrick/dgim110-w01/tutorials.html 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 10.06.2016 20