quiz #4 - layouts lecture code: 098581
TRANSCRIPT
![Page 1: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/1.jpg)
Quiz #4 - LayoutsLecture Code: 098581
http://fa10.decal.aw-industries.com
![Page 2: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/2.jpg)
AnnouncementsMini Project #1 Graded
Mini Project #2 Out Soon…Due in two weeks
Photoshop Trial from Adobe.com
Need help?Office hours by requestEmail us at [email protected] to the chat roomCatch us after classAdditional material at http://sp10.decal.aw-industries.com Web casts at http://youtube.com/webdesigndecal
![Page 3: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/3.jpg)
Today’s AgendaQuick review of positioning
.PSD to HTML and CSSCSS: background-imagePrepping imagesCSS: background-repeat Image Types and Transparency
Photoshop introduction
Lab
![Page 4: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/4.jpg)
Positioning Review4 Types of Positioning
Static: DefaultRelative: Offsets relative to static positionAbsolute: Offsets relative to closest parent who has position
set, otherwise relative to document boundsFixed: Offsets relative to browser window
Absolute and Fixed remove element from document flow
![Page 5: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/5.jpg)
Web Design:Basic to Advanced Techniques
Fall 2010Monday 7-9pm
200 Sutardja-Dai Hall
.PSD to HTML and CSS
![Page 6: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/6.jpg)
So Far Only Solid Colors…But we want this…
Q: How do we get there?
![Page 7: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/7.jpg)
A: CSS: background-imageCSS Property: background-image
Usage: div { background-image: url(/image.png); }
Note: One background-image per HTML element only
Related Propertiesbackground-positionbackground-repeat
![Page 8: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/8.jpg)
Background Image Example
![Page 9: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/9.jpg)
Photoshop to HTML & CSS1. 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 background-image
5. Attach background-image’s to our div’s
![Page 10: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/10.jpg)
Why Use Images at All?
CSS2 only handles single color rectanglesCannot specify gradients, rounded corners, reflections,
rotation
CSS3 does handle everything aboveWhy don’t we use CSS3 instead of CSS2?
http://www.findmebyip.com/litmus/#css3-properties
![Page 11: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/11.jpg)
<img /> vs. background-image<img /> tags for instances where the content is the image itself
For Example:Profile Pictures Images in a Gallery
Background-image for instances where the image is part of the presentation structure For Example:
Menu Buttons and BarsSite backgroundSplash pagesContainer styling
![Page 12: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/12.jpg)
Background Image Use Examples
Gradients and toolbars
Backgrounds.. of course!Most presentation graphics
Rounded rectangles
![Page 13: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/13.jpg)
<img /> Use ExamplesLogos Portfolio
ThumbnailsProfile Pictures
Articles
Ads
![Page 14: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/14.jpg)
Classify Images
http://weloveicons.com/background-image <img />
![Page 15: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/15.jpg)
Where Do We Get the Images?We slice and dice our Photoshop mockup
How to slice?What to slice?
![Page 16: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/16.jpg)
Crop Tool
![Page 17: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/17.jpg)
Background-Images in PracticeTypically, not one giant image, but rather sub images
Need to think about scalability and image reuse
This gradient repeats
This gradient also repeats
MultipleInstancesof icon
Triangles can’t be made frompure HTML and CSS, must be animage Gradient
changesVariable length?
![Page 18: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/18.jpg)
Identifying SlicesGoal: Capture complexity in fewest and smallest images
Minimize download size of website
dynamic size
![Page 19: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/19.jpg)
Exploiting Repetition in Images
![Page 20: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/20.jpg)
CSS: background-repeatCSS Property: background-repeat
Usage: div { background-repeat: repeat; }
Valuesrepeatrepeat-xrepeat-yno-repeat
![Page 21: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/21.jpg)
Background-Repeat Values
background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: repeat;
background-image HTML container
What does background-repeat: no-repeat; look like?
![Page 22: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/22.jpg)
Save For Web in Photoshop
![Page 23: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/23.jpg)
Save For Web in Photoshop…continued
![Page 24: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/24.jpg)
Image Types .jpg, .gif, .png
JPEG – 16.7M Colors Medium size, medium quality, no transparency
GIF – 256 Colors Smaller size, lower quality, transparency, animation
PNG – 16.7M Colors Largest size*, best quality, transparency *Not always the largest, PNG can be quite small for simple shapes
Tradeoffs…
![Page 25: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/25.jpg)
Transparency Comparison
View demo demo/transparency/transparency.html
![Page 26: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/26.jpg)
ReassemblyHTML elements as “billboards”
Apply background images to existing HTML elements where possible and nest additional HTML elements as necessary
Broke mockup into div’s, now break div’s up into more elements (div, span, etc) to hold background-images
![Page 27: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/27.jpg)
HTML for Button
<a href=“…url...”><span class="left"></span ><span class="middle">button</span ><span class="right"></span >
</a>
![Page 28: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/28.jpg)
CSS for Button
.left {width: 21px;background-image:url(images/left.png);background-repeat: no-repeat;
}.middle {
padding: 0px 80px;background-image:url(images/middle.png);background-repeat: repeat-x;
}.right {
width: 21px;background-image:url(images/right.png);background-repeat: no-repeat;
}
a, span {display: block;height: 92px;
}a span {
float: left;font-size: 80px;font-family: Helvetica, sans-serif;font-weight: bold;color: #343434;line-height: 92px;
}
![Page 29: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/29.jpg)
CSS: displayExample:
a { display: block; }
Common Values:block inlinenone
Hides object
inline-block (not supported in IE 6, inconsistent IE 7)Allows block level elements to be placed next to each otherFor compatibility: use floats instead
Valid HTML: Still don’t nest block elements in inline elements. HTML syntax independent of CSS.
block
inline inline
![Page 30: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/30.jpg)
display: none; demo
View demo demo/display/display_none.html
![Page 31: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/31.jpg)
CSS: float Main Layout Use Case
To place block level elements side-by-side
Effect on itself: A floated object moves left or right (depending on the value of float) until it
encounters another floated object or its container’s boundaries.
Effect on others: Like water flows around a floating item, adjacent objects flow around an object that
has its float property set
Also a type of positioning but not set with position. Can only be set if the position is relative, static or not set.
Should set width and height of object when using float, else behavior can be unpredictable.
Example: div { float: left; width: 100px; height: 100px; }
Common Values: left right none
![Page 32: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/32.jpg)
CSS: clearUsed to specify behavior of object interacting with a floated object
clear forces the object to appear after the floated object ( if it’s a left float, right float, or both types )
Example: p { clear: left; }
Common Values: left right both none
![Page 33: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/33.jpg)
float & clear demo
View demo demo/floats/*.html
![Page 34: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/34.jpg)
Web Design:Basic to Advanced Techniques
Fall 2010Monday 7-9pm
200 Sutardja-Dai Hall
Photoshop Introduction
![Page 35: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/35.jpg)
Photoshop for this CourseHow to use it from a web context
Overview of a few key featuresSome tips and hints
For more informationSearch the web for tutorials
http://www.tutorial9.net/Play around on your own!
![Page 36: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/36.jpg)
Photoshop OverviewWorkspace
Modifying Existing Images
Photoshop Panels that Aid Workflow
Creating Content
![Page 37: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/37.jpg)
Workspace (setup in lab)
tools
layers
canvas
history
colors
text
tool options
![Page 38: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/38.jpg)
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
![Page 39: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/39.jpg)
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
![Page 40: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/40.jpg)
Modifying Existing ImagesImage Resizing
Image Cropping
Hue/Saturation
Levels
![Page 41: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/41.jpg)
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
![Page 42: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/42.jpg)
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
![Page 43: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/43.jpg)
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
![Page 44: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/44.jpg)
Levels Image > Adjustment >
Levels… Apple + L
Left slider: shadows
Middle slider: midtones
Right slider: highlights
![Page 45: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/45.jpg)
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!
![Page 46: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/46.jpg)
WorkflowHistory
Layers
![Page 47: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/47.jpg)
History Undo is only good for going
back one action
History allows you to go back multiple actions
![Page 48: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/48.jpg)
Layers 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
New layer
Delete layer
New group
![Page 49: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/49.jpg)
Layers …continued Allow you to specify the
stacking order
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
![Page 50: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/50.jpg)
Creating ContentSelection Tool
Set Foreground and Background Color
Text and Formatting
Paint Brush
Paint Bucket
Drawing Basic Shapes
![Page 51: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/51.jpg)
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
![Page 52: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/52.jpg)
Text and Formatting In Tools
Allows you to add text to your image
Can set font face, size, color, and many more options
![Page 53: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/53.jpg)
Paint Brush In Tools
Basic drawing tool
Can set color, size, hardness
![Page 54: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/54.jpg)
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
![Page 55: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/55.jpg)
Drawing Basic Shapes Two ways
Make selection and then fill with paint bucket
Use rectangle tools
Make sure to check this
![Page 56: Quiz #4 - Layouts Lecture Code: 098581](https://reader031.vdocuments.net/reader031/viewer/2022032703/56649d005503460f949d2f7a/html5/thumbnails/56.jpg)
Quiz #4 - LayoutsLecture Code: 098581
Then… Labhttp://fa10.decal.aw-industries.com