Quiz #4 - Layouts Lecture Code:

Announcements Mini Project #1 Graded Mini Project #2 Out Soon… Due in two weeks Photoshop Trial from Adobe.com Need help? Office hours by request us at Post to the chat room Catch us after class Additional material at Web casts at

Today’s Agenda Quick review of positioning.PSD to HTML and CSS CSS: background-image Prepping images CSS: background-repeat Image Types and Transparency Photoshop introduction Lab

Positioning Review 4 Types of Positioning Static: Default Relative: Offsets relative to static position Absolute: Offsets relative to closest parent who has position set, otherwise relative to document bounds Fixed: Offsets relative to browser window Absolute and Fixed remove element from document flow

Web Design: Basic to Advanced Techniques Fall 2010 Monday 7-9pm 200 Sutardja-Dai Hall.PSD to HTML and CSS

So Far Only Solid Colors… But we want this… Q: How do we get there?

A: CSS: background-image CSS Property: background-image Usage: div { background-image: url(/image.png); } Note: One background-image per HTML element only Related Properties background-position background-repeat

Background Image Example

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 background- image 5. Attach background-image’s to our div’s

Why Use Images at All? CSS2 only handles single color rectangles Cannot specify gradients, rounded corners, reflections, rotation CSS3 does handle everything above Why don’t we use CSS3 instead of CSS2?

vs. background-image 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 Bars Site background Splash pages Container styling

Background Image Use Examples Gradients and toolbars Backgrounds.. of course!Most presentation graphics Rounded rectangles

Use Examples LogosPortfolio ThumbnailsProfile Pictures Articles Ads

Classify Images background-image

Where Do We Get the Images? We slice and dice our Photoshop mockup How to slice? What to slice?

Crop Tool

Background-Images in Practice Typically, not one giant image, but rather sub images Need to think about scalability and image reuse This gradient repeats This gradient also repeats Multiple Instances of icon Triangles can’t be made from pure HTML and CSS, must be an image Gradient changes Variable length?

Identifying Slices Goal: Capture complexity in fewest and smallest images Minimize download size of website dynamic size

Exploiting Repetition in Images

CSS: background-repeat CSS Property: background-repeat Usage: div { background-repeat: repeat; } Values repeat repeat-x repeat-y no-repeat

Background-Repeat Values background-repeat: repeat-x;background-repeat: repeat-y;background-repeat: repeat; background-imageHTML container What does background-repeat: no-repeat; look like?

Save For Web in Photoshop

Save For Web in Photoshop …continued

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…

Transparency Comparison View demo demo/transparency/transparency.html

Reassembly HTML 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

HTML for Button button

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; }

CSS: display Example: a { display: block; } Common Values: block inline none Hides object inline-block (not supported in IE 6, inconsistent IE 7) Allows block level elements to be placed next to each other For compatibility: use floats instead Valid HTML: Still don’t nest block elements in inline elements. HTML syntax independent of CSS. block inline

display: none; demo View demo demo/display/display_none.html

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

CSS: clear Used 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

float & clear demo View demo demo/floats/*.html

Web Design: Basic to Advanced Techniques Fall 2010 Monday 7-9pm 200 Sutardja-Dai Hall Photoshop Introduction

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 Play around on your own!

Photoshop Overview Workspace Modifying Existing Images Photoshop Panels that Aid Workflow Creating Content

Workspace (setup in lab) tools layers canvas history colors text tool options

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 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

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

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

Quiz #4 - Layouts Lecture Code: Then… Lab