MULTIMEDIA TOOLS :: CLASS NOTES
CLASS :: 04
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
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.
:: 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:
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] / [Ctrl+N] / [cmd+N]
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
(Win) / (Mac)
3 /
Create Guides /
MAIN GUIDES:
a. Go to Menu Bar > View > New Guide Layout…
b. Add Values (Same as Figure Below)
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 + ; ] / [Ctrl+N] / [cmd+N]
:: 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)
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/the-custom-shape-tool-in-photoshop-cc/
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:
W: 1366px
H: 768px
X: 0
Y: 0
Click “Select shape fill type” button
> Choose White from Color Picker
/
[U] /
[U]
Create X Shape with Line Tool
[X = future image]:
/ a. Choose Line Tool [U]/5th 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):
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):
/
[U]
[Ctrl+T] /
[U]
[cmd+T]
Group Shapes & Name
Hero Image / MERGE LAYERS:
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”
/ [Ctrl+E] / [Cmd+E]
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
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
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 ] /
[ T ]
[Ctrl+T] /
[ 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:
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)
/ [T] / [T]
5 /
Create Logo Placeholder /
a. Create a New Layer
b. Go to Toolbar > Select the Shape Tool (U) >
3rd 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”
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:
This Step = Gray Background / Go To New Guide Layout and divide the page
into 3 columns [Zero out the other values]:
a. Create a New Layer
b. Select Shape Tool / Rectangle Option [U]:
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
8 /
Create a Works Thumbnail:
This Step = Creating The Image Thumbnail [X box] Placeholder for Works One only… / 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
This Step = Adding WORKS ONE title for thumbnail one… / 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
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
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)
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
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 ]
FIGURE: About Section
[Similar to the WORKS Section]
FIGURE: Footer
[Similar to the HEADER Section]
FIGURE: Folder Organization
Revised 10.02.2017 1
MULTIMEDIA TOOLS :: CLASS NOTES
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: http://iris.nyit.edu/~dmyrick/DGIM601-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.02.2017 19