Quiz #4 - LayoutsLecture Code: 098581

http://fa10.decal.aw-industries.com

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 staff@decal.aw-industries.comPost to the chat roomCatch us after classAdditional material at http://sp10.decal.aw-industries.com Web casts at http://youtube.com/webdesigndecal

Today’s AgendaQuick review of positioning

.PSD to HTML and CSSCSS: background-imagePrepping imagesCSS: background-repeat Image Types and Transparency

Photoshop introduction

Lab

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

Web Design:Basic to Advanced Techniques

Fall 2010Monday 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-imageCSS Property: background-image

Usage: div { background-image: url(/image.png); }

Note: One background-image per HTML element only

Related Propertiesbackground-positionbackground-repeat

Background Image Example

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

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

<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

Background Image Use Examples

Gradients and toolbars

Backgrounds.. of course!Most presentation graphics

Rounded rectangles

<img /> Use ExamplesLogos Portfolio

ThumbnailsProfile Pictures

Articles

Ads

Classify Images

http://weloveicons.com/background-image <img />

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

How to slice?What to slice?

Crop Tool

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?

Identifying SlicesGoal: Capture complexity in fewest and smallest images

Minimize download size of website

dynamic size

Exploiting Repetition in Images

CSS: background-repeatCSS Property: background-repeat

Usage: div { background-repeat: repeat; }

Valuesrepeatrepeat-xrepeat-yno-repeat

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?

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

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

HTML for Button

<a href=“…url...”><span class="left"></span ><span class="middle">button</span ><span class="right"></span >

</a>

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

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

float & clear demo

View demo demo/floats/*.html

Web Design:Basic to Advanced Techniques

Fall 2010Monday 7-9pm

200 Sutardja-Dai Hall

Photoshop Introduction

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!

Photoshop OverviewWorkspace

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

WorkflowHistory

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 ContentSelection 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 - LayoutsLecture Code: 098581

Then… Labhttp://fa10.decal.aw-industries.com