Download Lecture_6 - Announcements

CSS/Photoshop Layouts - Quiz #5
Lecture Code: 500316
http://decal.aw-industries.com
Web Design:
Basic to Advanced Techniques
Today’s Agenda
 Quiz & Attendance
 Announcements
 CSS / Photoshop Layouts – Part 3
 Finish Quiz & Attendance
 Lab
Web Design:
Basic to Advanced Techniques
Announcements
 Zappos.com Recruiting
 Chatroom Thread
 Positions in Email
 Midterms
 Email me if you’ll be missing class
 Mini Project #3 - Photoshop
 2 parts
 Multiple deadlines
 Second part is long!
 Final Project
Web Design:
Basic to Advanced Techniques
Web Design:
Basic to Advanced Techniques
Spring 2010
Tuesdays 7-8pm
200 Sutardja-Dai Hall
CSS/Photoshop Layouts – Part 3
Web Design:
Basic to Advanced Techniques
Where Are We?
1. Website Concept/Idea
First lecture
2. Photoshop Mockup of Layout
3. Layout to HTML
Today
Prev. lecture
1. Identify DIVs
2. Code DIVs
4. CSS to Layout
Prev. lecture
1. Positioning
2. Background Images
5. HTML and CSS content for Site
6. JavaScript, PHP, MySQL
7. Launch Site
First few lectures
Not yet.
Not yet.
Photoshop to HTML/CSS
1. Photoshop Mockup
2. Identify div’s in our mockup
3. Code div’s in HTML and CSS
4. Slice up our Photoshop Mockup for use with backgroundimage
5. Attach background-image’s to our div’s
2.
Photoshop to HTML/CSS –
Step 1-4
1.
3.
4.
<div>
<div class="left"></div>
<div class="middle">button</div>
<div class="right"></div>
</div>
Photoshop to HTML/CSS – Step 5
div {
height: 92px;
}
div div {
float: left;
font-size: 80px;
font-family: Helvetica, sans-serif;
font-weight: bold;
color: #343434;
line-height: 92px;
}
.left {
width: 21px;
background-image:url(images/left.png);
}
.middle {
padding: 0px 80px;
background-image:url(images/middle.png);
}
.right {
width: 21px;
background-image:url(images/right.png);
}
Photoshop for this Course
 How to use it from a web context
 Overview of a few key features
 Some tips and hints
 For more information
 Search the web for tutorials
 http://www.tutorial9.net/
 Play around on your own!
Photoshop Overview
 Workspace
 Modifying Existing Images
 Photoshop Panels that Aid Workflow
 Creating Content
Workspace (setup from Lab 5)
colors
tool options
text
history
tools
canvas
layers
Tools
 In Tools
 Hidden tools: If click and hold
tool that has black triangle in
bottom-right, other versions
of tools selectable
 Options: Top bar displays
options that can be set for a
given tool
Foreground/Background Color
 In Tools
 Can set color by clicking
colored boxes
 Foreground: color that
drawing tools use
 Background: background
color
 Most useful for having two
colors that can be swapped
between using these arrows
Color code
Modifying Existing Images
 Image Resizing
 Image Cropping
 Hue/Saturation
 Levels
Image Resizing
 Image > Image Size…
 Option + Apple + I
 Constrain Proportions
maintains height to width
ratio of original image
 Changing width and height
scales image accordingly
Image Cropping
 In Tools
 Allows us to select a region of
our image and delete
everything outside of that
region
 Primary tool used to cut up
our website layouts
Hue/Saturation
 Image > Adjustments >
Hue/Saturation …
 Apple + U
 Hue: quick way to change
color of our images
 Saturation: allows us to
change the intensity and
vibrancy of our colors
 Lightness: brightness of photo
 Colorize: sepia style coloring
of photo
Levels
 Image > Adjustment >
Levels…
 Apple + L
 Left slider: shadows
 Middle slider: midtones
 Right slider: highlights
Blending Options
 Right click layer you want to
apply to > Blending Options
 Can set a number of built in
effects
 Nice drop shadows for text
 Gradient overlays
 Stroke
 You’ll find yourself using this
A LOT!
Workflow
 History
 Layers
History
 Undo is only good for going
back one action
 History allows you to go back
multiple actions
Layers
 Allow you to specify the
stacking order
 Similar to z-index
 Items higher in the list are on
top of items lower on the list
 Often good practice to
separate out portions of image
 Allows you to change portions
of image independently
 Eye icon: toggle visibility
 Opacity: degree of
transparency
Layers …continued
 New layer: creates blank layer
 New group: creates a folder to
organize layers into
 Delete later: deletes selected
layer
 If drag layer onto new layer
button, duplicates layer
 Notice text on top of image, so
text layer on top of image in
layers as well
Delete layer
New layer
New group
Creating Content
 Selection Tool
 Set Foreground and Background Color
 Text and Formatting
 Paint Brush
 Paint Bucket
 Drawing Basic Shapes
Selection
 In Tools
 A couple different tools for
selecting (see images to right)
 Once selected
 Portion of image can be
deleted




Moved
Cut, copy, pasted
Filled using the paint bucket
Separated so drawing only
affects portion of image
selected
Text and Formatting
 In Tools
 Allows you to add text to your
image
 Can set font face, size, color,
and many more options
Paint Brush
 In Tools
 Basic drawing tool
 Can set color, size, hardness
Paint Bucket
 In Tools
 Allows you to fill a selection
with one color
 Or fill section of image
without selection, but this is
often inexact
Drawing Basic Shapes
 Two ways
 Make selection and then fill
with paint bucket
 Use rectangle tools
Make sure to check this
CSS/Photoshop Layouts - Quiz #5
Lecture Code: 500316
Lab…
http://decal.aw-industries.com
Web Design:
Basic to Advanced Techniques